IntelliClass_FE/pages/course/[id].vue
2025-04-03 22:57:36 +08:00

94 lines
2.1 KiB
Vue

<script lang="ts" setup>
import type { SidebarNavGroup } from "~/components/app/Sidebar.vue";
import { topbarNavDefaults } from "~/components/app/Topbar.vue";
const {
fullPath,
params: { id },
} = useRoute();
const router = useRouter();
useHead({
title: "传感器应用技术 - 课程管理",
});
const sideNav: SidebarNavGroup[] = [
{
items: [
{
title: "课程章节",
url: `/course/${id}/chapters`,
icon: "tabler:books",
},
{
title: "教师团队",
url: `/course/${id}/team`,
icon: "tabler:users-group",
},
{
title: "学生班级",
url: `/course/${id}/classes`,
icon: "tabler:school",
},
{
title: "学生评价",
url: `/course/${id}/evaluation`,
icon: "tabler:mood-smile",
},
],
},
];
const topNav = [
{
title: "课程管理",
to: `/course/${id}`,
icon: "tabler:layout-dashboard",
},
...topbarNavDefaults.slice(1),
];
onMounted(() => {
if (fullPath === `/course/${id}`) {
router.replace(`/course/${id}/chapters`);
}
});
</script>
<template>
<AppPageWithSidebar :sidebar-nav="sideNav">
<template #topbar>
<AppTopbar :nav="topNav" />
</template>
<template #sidebar="{ sidebarNav }">
<AppSidebar :nav="sidebarNav">
<template #extra-header>
<div class="px-4">
<div class="flex flex-col items-center gap-1 overflow-hidden">
<NuxtImg
src="https://static-xsh.oss-cn-chengdu.aliyuncs.com/file/2024-08-05/9a8b2ed8d66340d43a4b840f58597f13.png"
alt="课程封面"
class="w-full aspect-video rounded-md shadow-md"
/>
<h1
class="text-base font-medium drop-shadow-md text-ellipsis line-clamp-1"
>
传感器应用技术
</h1>
</div>
</div>
</template>
</AppSidebar>
</template>
<ClientOnly>
<Suspense>
<NuxtPage :page-key="fullPath" />
</Suspense>
</ClientOnly>
</AppPageWithSidebar>
</template>
<style scoped></style>