feat: 更新教案页面，添加课程智能体选项，优化样式和功能

components/fn/teach/LessonPlan.vue

@@ -21,7 +21,10 @@ const tab = ref('text')
             <span>章节生成</span>
           </div>
         </TabsTrigger>
-        <TabsTrigger value="bot">
+        <TabsTrigger
+          value="bot"
+          disabled
+        >
           <div class="flex items-center gap-1">
             <Icon name="tabler:robot" />
             <span>课程智能体</span>
@@ -29,7 +32,7 @@ const tab = ref('text')
         </TabsTrigger>
       </TabsList>
     </Tabs>
-    <div class="flex items-start。 gap-4">
+    <div class="flex items-start gap-4">
       <div
         v-if="tab === 'chapter'"
         class="flex h-20 flex-col justify-center items-center gap-1 px-8 rounded-md border"
@@ -46,13 +49,112 @@ const tab = ref('text')
       />
       <div class="flex flex-col items-center gap-2">
         <Button size="lg">
-          <Icon name="tabler:stars" />
+          <Icon name="mage:stars-c-fill" />
           生成教案
         </Button>
         <p class="text-xs text-foreground/40">内容由 AI 生成，仅供参考</p>
       </div>
     </div>
+    <div
+      class="flex flex-col gap-4 rounded-md border p-4 overflow-hidden relative"
+    >
+      <!-- <div class="absolute inset-0 -z-10 overflow-hidden rounded-md opacity-30">
+        <div
+          class="bubble animate-bubble -top-24 -left-14 size-48"
+          style="--i: 0"
+        />
+        <div
+          class="bubble animate-bubble -top-10 -right-8 size-28"
+          style="--i: 1"
+        />
+      </div> -->
+      <!-- header -->
+      <div class="flex justify-between items-start gap-2">
+        <div class="flex items-center gap-2">
+          <Icon
+            name="mage:stars-c-fill"
+            class="text-xl text-amber-500"
+          />
+          <h1 class="text-lg font-medium">生成的教案标题</h1>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+          >
+            <Icon name="tabler:reload" />
+            重新生成
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+          >
+            <Icon name="tabler:download" />
+            下载
+          </Button>
+          <Button size="sm">
+            <Icon name="tabler:copy" />
+            存入教案库
+          </Button>
+        </div>
+      </div>
+      <!-- items -->
+      <div class="flex flex-col rounded-md border overflow-hidden">
+        <div class="flex justify-between items-center gap-2 p-2 px-4 bg-gradient-to-r from-primary/15 to-muted text-background">
+          <span class="text-sm text-foreground font-medium">教学目标</span>
+          <div class="flex items-center">
+            <Button
+              variant="link"
+              size="xs"
+              class="text-muted-foreground"
+            >
+              <Icon name="tabler:reload" />
+              重新生成
+            </Button>
+            <Button
+              variant="link"
+              size="xs"
+              class="text-muted-foreground"
+            >
+              <Icon name="tabler:trash" />
+              删除
+            </Button>
+          </div>
+        </div>
+        <div class="p-4 py-2 prose prose-sm bg-background">
+          <ol>
+            <li>教学目标 1</li>
+            <li>教学目标 2</li>
+            <li>教学目标 3</li>
+          </ol>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.bubble {
+  @apply absolute bg-gradient-to-tr from-primary to-secondary rounded-full shadow-lg;
+  --i: 0;
+  --animation-delay: calc(var(--i) * 0.5s);
+}
+
+.animate-bubble {
+  animation: bubble 20s infinite;
+  animation-delay: var(--animation-delay);
+}
+
+/* bubble jump slowly */
+@keyframes bubble {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-20px) scale(1.2);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

layouts/default.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import type { SidebarNavGroup } from '~/components/app/Sidebar.vue'
+import type { SidebarNavGroup } from '~/components/app/sidebar/index.vue'
 
 const route = useRoute()
 const { breadcrumbs } = toRefs(useBreadcrumbs())
 
 const sidebarNav: SidebarNavGroup[] = [
   {
-    label: '备课制课',
     items: [
       {
         title: '课程管理',
@@ -18,11 +17,6 @@ const sidebarNav: SidebarNavGroup[] = [
         url: `/course/resources`,
         icon: 'tabler:users-group',
       },
-    ],
-  },
-  {
-    label: 'AI 资源',
-    items: [
       {
         title: 'AI 备课',
         url: `/course/prep`,

package.json

@@ -50,6 +50,7 @@
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@pinia/nuxt": "^0.10.1",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/dplayer": "^1.25.5",
     "@vueuse/nuxt": "^13.0.0",
     "dayjs": "^1.11.13",

pnpm-lock.yaml

@@ -114,6 +114,9 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.10.1
         version: 0.10.1(magicast@0.3.5)(pinia@3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)))
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@3.4.17)
       '@types/dplayer':
         specifier: ^1.25.5
         version: 1.25.5
@@ -1190,6 +1193,11 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@tanstack/table-core@8.21.2':
     resolution: {integrity: sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==}
     engines: {node: '>=12'}
@@ -3040,12 +3048,18 @@ packages:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
@@ -3708,6 +3722,10 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -6051,6 +6069,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.17
+
   '@tanstack/table-core@8.21.2': {}
 
   '@tanstack/virtual-core@3.13.5': {}
@@ -8093,10 +8119,14 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
+  lodash.castarray@4.4.0: {}
+
   lodash.defaults@4.2.0: {}
 
   lodash.isarguments@3.1.0: {}
 
+  lodash.isplainobject@4.0.6: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
@@ -8895,6 +8925,11 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0

tailwind.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @stylistic/quote-props */
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['class'],
@@ -69,5 +70,5 @@ export default {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 }