99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { nav } from './config'
|
|
import { FnTeachLessonPlan } from '#components'
|
|
import type { NavTertiaryItem } from '~/components/nav/Tertiary.vue'
|
|
|
|
definePageMeta({
|
|
requiresAuth: true,
|
|
hideSidebar: true,
|
|
})
|
|
|
|
useHead({
|
|
title: 'AI 教学设计 | 备课',
|
|
})
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { setBreadcrumbs } = useBreadcrumbs()
|
|
|
|
const tertiaryNavs: NavTertiaryItem[] = [
|
|
{ label: '教案设计', component: FnTeachLessonPlan },
|
|
{ label: '案例设计' },
|
|
{ label: '课程标准' },
|
|
{ label: '知识图谱' },
|
|
{ label: '课程章节' },
|
|
{ label: '教研计划' },
|
|
]
|
|
|
|
const currentNav = ref(0)
|
|
|
|
watch(currentNav, (val) => {
|
|
router.replace({
|
|
query: {
|
|
fn: val,
|
|
},
|
|
})
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (route.query.fn && !isNaN(Number(route.query.fn))) {
|
|
currentNav.value = Number(route.query.fn)
|
|
}
|
|
|
|
setBreadcrumbs([
|
|
{
|
|
label: 'AI 备课',
|
|
path: '/course/prep',
|
|
},
|
|
{
|
|
label: 'AI 教学设计',
|
|
},
|
|
])
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AppContainer
|
|
:nav-secondary="nav"
|
|
content-class="flex items-start p-0"
|
|
>
|
|
<div class="w-[188px] h-full border-r shadow-xl">
|
|
<div class="flex justify-center items-center h-16 border-b gap-2">
|
|
<Icon
|
|
name="fluent-color:design-ideas-24"
|
|
class="text-2xl"
|
|
/>
|
|
<h1 class="text-base font-medium text-foreground">AI 教学设计</h1>
|
|
</div>
|
|
<div class="p-2">
|
|
<NavTertiary
|
|
v-model="currentNav"
|
|
:navs="tertiaryNavs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 h-full p-6">
|
|
<Suspense>
|
|
<component
|
|
:is="tertiaryNavs[currentNav].component"
|
|
v-if="tertiaryNavs[currentNav].component"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="flex flex-col items-center justify-center w-full h-full gap-2"
|
|
>
|
|
<Icon
|
|
name="tabler:mood-sad"
|
|
class="text-6xl text-muted-foreground"
|
|
/>
|
|
<p class="text text-muted-foreground">
|
|
该功能暂不可用
|
|
</p>
|
|
</div>
|
|
</Suspense>
|
|
</div>
|
|
</AppContainer>
|
|
</template>
|
|
|
|
<style scoped></style>
|