129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import type { IResponse } from '~/api'
|
|
import { getCourseDetail } from '~/api/course'
|
|
import type { SidebarNavGroup } from '~/components/app/Sidebar.vue'
|
|
import { topbarNavDefaults } from '~/components/app/Topbar.vue'
|
|
import type { ICourse } from '~/types'
|
|
|
|
const {
|
|
fullPath,
|
|
params: { id },
|
|
} = useRoute()
|
|
const router = useRouter()
|
|
|
|
// const course = await getCourseDetail(id as string);
|
|
|
|
const {
|
|
data: course,
|
|
status: courseStatus,
|
|
error: courseError,
|
|
} = await useAsyncData<
|
|
IResponse<{
|
|
data: ICourse
|
|
}>,
|
|
IResponse
|
|
>(() => getCourseDetail(id as string))
|
|
|
|
useHead({
|
|
title: `${course.value?.data.courseName || '课程不存在'} - 课程管理`,
|
|
})
|
|
|
|
definePageMeta({
|
|
requiresAuth: true,
|
|
})
|
|
|
|
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="course?.data.previewUrl || '/images/bg_home.jpg'"
|
|
alt="课程封面"
|
|
class="w-full aspect-video rounded-md shadow-md"
|
|
/>
|
|
<h1
|
|
class="text-base font-medium drop-shadow-md text-ellipsis line-clamp-1"
|
|
>
|
|
{{ course?.data.courseName || "未知课程" }}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</AppSidebar>
|
|
</template>
|
|
|
|
<ClientOnly>
|
|
<Suspense>
|
|
<div v-if="courseStatus === 'error'">
|
|
<EmptyScreen
|
|
title="课程加载失败"
|
|
:description="courseError?.data?.msg || '请求失败'"
|
|
icon="tabler:exclamation-circle"
|
|
/>
|
|
</div>
|
|
<EmptyScreen
|
|
v-else-if="courseStatus === 'pending'"
|
|
title="加载中..."
|
|
icon="svg-spinners:90-ring-with-bg"
|
|
/>
|
|
<NuxtPage
|
|
v-else
|
|
:page-key="fullPath"
|
|
/>
|
|
</Suspense>
|
|
</ClientOnly>
|
|
</AppPageWithSidebar>
|
|
</template>
|
|
|
|
<style scoped></style>
|