From b03b2d927397fc08ba2794c6bd7773b27073d4cd Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Sat, 19 Apr 2025 17:19:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E9=87=8D=E6=9E=84=E8=AF=BE=E7=A8=8B?=
 =?UTF-8?q?=E5=87=86=E5=A4=87=E9=A1=B5=E9=9D=A2=E5=8F=8A=E5=85=B6=E5=AD=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/tailwind.css            |  4 +-
 components/app/Container.vue       | 15 ++++--
 components/fn/teach/LessonPlan.vue |  7 +++
 components/nav/Secondary.vue       |  4 +-
 components/nav/Tertiary.vue        | 49 +++++++++++++++++
 pages/course/[id].vue              |  2 +-
 pages/course/prep/config.ts        | 40 ++++++--------
 pages/course/prep/deck.vue         | 25 +++++++--
 pages/course/prep/quiz.vue         | 25 +++++++--
 pages/course/prep/teach.vue        | 85 ++++++++++++++++++++++++++++--
 pages/course/resources/index.vue   |  4 +-
 11 files changed, 217 insertions(+), 43 deletions(-)
 create mode 100644 components/fn/teach/LessonPlan.vue
 create mode 100644 components/nav/Tertiary.vue

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 1973f01..f1f32ee 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -10,7 +10,7 @@
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --primary: 238.73deg 83.53% 66.67%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
@@ -46,7 +46,7 @@
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 234.45deg 89.47% 73.92%;
     --primary-foreground: 0 0% 9%;
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
diff --git a/components/app/Container.vue b/components/app/Container.vue
index b1784e7..1f55826 100644
--- a/components/app/Container.vue
+++ b/components/app/Container.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import type { SubNavItem } from '../nav/Secondary.vue'
+import { twMerge } from 'tailwind-merge'
+import type { NavSecondaryItem } from '../nav/Secondary.vue'
 
-defineProps<{ subnavs?: SubNavItem[] }>()
+defineProps<{
+  navSecondary?: NavSecondaryItem[]
+  contentClass?: string
+}>()
 </script>
 
 <template>
@@ -9,12 +13,13 @@ defineProps<{ subnavs?: SubNavItem[] }>()
     <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
     <slot name="subnav">
       <NavSecondary
-        v-if="subnavs && subnavs.length"
-        :navs="subnavs"
+        v-if="navSecondary && navSecondary.length"
+        :navs="navSecondary"
       />
     </slot>
     <div
-      class="bg-white h-full rounded-lg shadow-sm p-8 dark:bg-neutral-900 z-20"
+      class="h-full rounded-lg shadow-sm overflow-hidden"
+      :class="twMerge('bg-white dark:bg-neutral-900 p-8 z-20', contentClass)"
     >
       <slot />
     </div>
diff --git a/components/fn/teach/LessonPlan.vue b/components/fn/teach/LessonPlan.vue
new file mode 100644
index 0000000..c3804dd
--- /dev/null
+++ b/components/fn/teach/LessonPlan.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>教案设计</div>
+</template>
+
+<style scoped></style>
diff --git a/components/nav/Secondary.vue b/components/nav/Secondary.vue
index 72bf6b5..c471d67 100644
--- a/components/nav/Secondary.vue
+++ b/components/nav/Secondary.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-export interface SubNavItem {
+export interface NavSecondaryItem {
   label: string
   to: string
 }
@@ -7,7 +7,7 @@ export interface SubNavItem {
 
 <script lang="ts" setup>
 defineProps<{
-  navs: SubNavItem[]
+  navs: NavSecondaryItem[]
 }>()
 
 const route = useRoute()
diff --git a/components/nav/Tertiary.vue b/components/nav/Tertiary.vue
new file mode 100644
index 0000000..f08b894
--- /dev/null
+++ b/components/nav/Tertiary.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+export interface NavTertiaryItem {
+  label: string
+  to?: string
+  component?: string | Component
+}
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    navs: NavTertiaryItem[]
+    modelValue?: number
+  }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', idx: number): void
+}>()
+
+const isActiveItem = (idx: number) => {
+  return props.modelValue === idx
+}
+
+const onClickItem = (idx: number) => {
+  emit('update:modelValue', idx)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div
+      v-for="(nav, i) in navs"
+      :key="i"
+      class="flex justify-center items-center gap-2 p-2.5 rounded-sm cursor-pointer select-none transition-colors duration-75"
+      :class="`${isActiveItem(i) ? 'bg-primary text-primary-foreground' : 'bg-accent text-foreground'}`"
+      @click="onClickItem(i)"
+    >
+      <span class="text-sm font-medium">
+        {{ nav.label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/pages/course/[id].vue b/pages/course/[id].vue
index 7b8c19d..adbac23 100644
--- a/pages/course/[id].vue
+++ b/pages/course/[id].vue
@@ -65,7 +65,7 @@ watch(
 
 <template>
   <AppContainer
-    :subnavs="[
+    :nav-secondary="[
       {
         label: '课程章节',
         to: `/course/${id}/chapters`,
diff --git a/pages/course/prep/config.ts b/pages/course/prep/config.ts
index 3647033..dc9e17d 100644
--- a/pages/course/prep/config.ts
+++ b/pages/course/prep/config.ts
@@ -1,26 +1,20 @@
-export const nav = [
+import type { NavSecondaryItem } from '~/components/nav/Secondary.vue'
+
+export const nav: NavSecondaryItem[] = [
   {
-    items: [
-      {
-        title: 'AI 教学设计',
-        url: '/course/prep/teach',
-        icon: 'tabler:calendar-cog',
-      },
-      {
-        title: 'AI 课件设计',
-        url: '/course/prep/deck',
-        icon: 'tabler:book-2',
-      },
-      {
-        title: 'AI 出题',
-        url: '/course/prep/quiz',
-        icon: 'tabler:notebook',
-      },
-      {
-        title: '微视频制作',
-        url: '/course/prep/test',
-        icon: 'tabler:video',
-      },
-    ],
+    label: '教学设计',
+    to: '/course/prep/teach',
   },
+  {
+    label: '课件设计',
+    to: '/course/prep/deck',
+  },
+  {
+    label: 'AI 出题',
+    to: '/course/prep/quiz',
+  },
+  // {
+  //   label: '微视频制作',
+  //   to: '/course/prep/test',
+  // },
 ]
diff --git a/pages/course/prep/deck.vue b/pages/course/prep/deck.vue
index e274a3e..63506eb 100644
--- a/pages/course/prep/deck.vue
+++ b/pages/course/prep/deck.vue
@@ -3,13 +3,32 @@ import { nav } from './config'
 
 definePageMeta({
   requiresAuth: true,
+  hideSidebar: true,
+})
+
+useHead({
+  title: 'AI 课件设计 | 备课',
+})
+
+const { setBreadcrumbs } = useBreadcrumbs()
+
+onMounted(() => {
+  setBreadcrumbs([
+    {
+      label: 'AI 备课',
+      path: '/course/prep',
+    },
+    {
+      label: 'AI 课件设计',
+    },
+  ])
 })
 </script>
 
 <template>
-  <AppPageWithSidebar :sidebar-nav="nav">
-    <h1>deck</h1>
-  </AppPageWithSidebar>
+  <AppContainer :nav-secondary="nav">
+    <h1>AI 课件设计</h1>
+  </AppContainer>
 </template>
 
 <style scoped></style>
diff --git a/pages/course/prep/quiz.vue b/pages/course/prep/quiz.vue
index f3c608b..2a3ece8 100644
--- a/pages/course/prep/quiz.vue
+++ b/pages/course/prep/quiz.vue
@@ -3,13 +3,32 @@ import { nav } from './config'
 
 definePageMeta({
   requiresAuth: true,
+  hideSidebar: true,
+})
+
+useHead({
+  title: 'AI 出题 | 备课',
+})
+
+const { setBreadcrumbs } = useBreadcrumbs()
+
+onMounted(() => {
+  setBreadcrumbs([
+    {
+      label: 'AI 备课',
+      path: '/course/prep',
+    },
+    {
+      label: 'AI 出题',
+    },
+  ])
 })
 </script>
 
 <template>
-  <AppPageWithSidebar :sidebar-nav="nav">
-    <h1>quiz</h1>
-  </AppPageWithSidebar>
+  <AppContainer :nav-secondary="nav">
+    <h1>AI 出题</h1>
+  </AppContainer>
 </template>
 
 <style scoped></style>
diff --git a/pages/course/prep/teach.vue b/pages/course/prep/teach.vue
index 2334d4d..246c0df 100644
--- a/pages/course/prep/teach.vue
+++ b/pages/course/prep/teach.vue
@@ -1,19 +1,98 @@
 <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>
-  <AppPageWithSidebar :sidebar-nav="nav">
-    <h1>teach</h1>
-  </AppPageWithSidebar>
+  <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>
diff --git a/pages/course/resources/index.vue b/pages/course/resources/index.vue
index 64d2546..c0d7fa3 100644
--- a/pages/course/resources/index.vue
+++ b/pages/course/resources/index.vue
@@ -5,7 +5,9 @@ definePageMeta({
 </script>
 
 <template>
-  <div>Resources</div>
+  <AppContainer>
+    <div>课程资源</div>
+  </AppContainer>
 </template>
 
 <style scoped></style>