From 28f84bca92c99c06391a6fe7f167610b04a7fee5 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Sat, 19 Apr 2025 01:32:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=90=84=E7=BA=A7?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=20chore:=20=E9=85=8D=E7=BD=AE=20prettier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc                        |   7 +
 .vscode/settings.json              |   1 -
 components/SubNav.vue              | 104 +++++++
 components/app/Container.vue       |  29 ++
 components/app/NavMain.vue         |  26 +-
 components/app/PageWithSidebar.vue |  32 --
 components/app/Sidebar.vue         |   1 +
 components/app/Topbar.vue          |  62 ++--
 eslint.config.mjs                  |   5 +
 layouts/default.vue                |  58 +++-
 layouts/no-sidebar.vue             |  12 +-
 nuxt.config.ts                     |   1 +
 package.json                       |   5 +
 pages/course/[id].vue              | 158 +++++-----
 pages/course/index.vue             | 455 ++++++++++++++---------------
 pages/course/research/index.vue    |   2 +-
 pages/course/resources/index.vue   |   1 -
 pages/preview/[resource_url].vue   |  84 ++++--
 pages/user/authenticate.client.vue |   4 +
 pnpm-lock.yaml                     | 116 ++++++++
 stores/breadcrumbs.ts              |  24 ++
 types/index.ts                     |   5 +
 types/nuxt.d.ts                    |   8 +
 23 files changed, 784 insertions(+), 416 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 components/SubNav.vue
 create mode 100644 components/app/Container.vue
 delete mode 100644 components/app/PageWithSidebar.vue
 create mode 100644 stores/breadcrumbs.ts
 create mode 100644 types/nuxt.d.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..77129cf
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSameLine": false,
+  "singleAttributePerLine": true
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6e5623c..e25829e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
   "eslint.useFlatConfig": true,
-  "prettier.bracketSameLine": true,
   "prettier.semi": false,
   "prettier.singleAttributePerLine": true,
   "prettier.singleQuote": true
diff --git a/components/SubNav.vue b/components/SubNav.vue
new file mode 100644
index 0000000..046f873
--- /dev/null
+++ b/components/SubNav.vue
@@ -0,0 +1,104 @@
+<script lang="ts">
+export interface SubNavItem {
+  label: string
+  to: string
+}
+</script>
+
+<script lang="ts" setup>
+defineProps<{
+  navs: SubNavItem[]
+}>()
+
+const route = useRoute()
+
+const isCurrentPath = (path: string) => {
+  return route.path === path
+}
+</script>
+
+<template>
+  <div class="flex items-end ml-4 z-0">
+    <div
+      v-for="(nav, i) in navs"
+      :key="i"
+      class="subnav-item"
+      :class="`${isCurrentPath(nav.to) ? 'active' : ''}`"
+      :style="{
+        'z-index': isCurrentPath(nav.to) ? 10 : -i,
+      }"
+    >
+      <svg
+        class="absolute inset-0 aspect-auto"
+        viewBox="0 0 206.5 72"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <defs>
+          <linearGradient
+            :id="`paint_linear_${i}`"
+            gradient-units="objectBoundingBox"
+            x1="0.5"
+            y1="0"
+            x2="0.5"
+            y2="1"
+          >
+            <stop stop-color="var(--svg-stop1)" />
+            <stop
+              offset="1"
+              stop-color="var(--svg-stop2)"
+            />
+          </linearGradient>
+        </defs>
+        <g>
+          <path
+            id="subnav_item_active"
+            d="M51.9 0L154.6 0C172.19 0 187.72 11.48 192.86 28.31L206.5 72L0 72L13.35 28.31C18.49 11.48 34.02 0 51.9 0Z"
+            :fill="`url(#paint_linear_${i})`"
+            fill-opacity="1.000000"
+            fill-rule="evenodd"
+          />
+        </g>
+      </svg>
+      <NuxtLink
+        class="text-lg font-medium z-10 select-none"
+        :class="{
+          'text-secondary': isCurrentPath(nav.to),
+          'text-neutral-400 dark:text-neutral-500': !isCurrentPath(nav.to),
+        }"
+        :to="nav.to"
+      >
+        {{ nav.label }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.subnav-item {
+  @apply relative flex justify-center items-center px-4 pt-1 drop-shadow-md;
+
+  --svg-stop1: #ffffff;
+  --svg-stop2: #f3f3f3;
+
+  &:not(:first-of-type) {
+    @apply -ml-3;
+  }
+
+  &.active {
+    --svg-stop1: #6059f4;
+    --svg-stop2: #8e59f4;
+  }
+}
+
+.dark .subnav-item {
+  --svg-stop1: #000000;
+  --svg-stop2: #0c0c0c;
+
+  &.active {
+    --svg-stop1: #6d7ca6;
+    --svg-stop2: #6f6da6;
+  }
+}
+</style>
diff --git a/components/app/Container.vue b/components/app/Container.vue
new file mode 100644
index 0000000..7c901b3
--- /dev/null
+++ b/components/app/Container.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { SubNavItem } from '../SubNav.vue'
+
+defineProps<{ subnavs?: SubNavItem[] }>()
+</script>
+
+<template>
+  <div class="flex flex-1 flex-col p-8 page-bg-gradient">
+    <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
+    <slot name="subnav">
+      <SubNav
+        v-if="subnavs && subnavs.length"
+        :navs="subnavs"
+      />
+    </slot>
+    <div
+      class="bg-white h-full rounded-lg shadow-sm p-8 dark:bg-neutral-900 z-20"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-bg-gradient {
+  @apply bg-gradient-to-br from-[#D5DEF9]/50 to-[#D6C9F9]/50;
+  @apply dark:from-[#36477A]/50 dark:to-[#7C6DA6]/50;
+}
+</style>
diff --git a/components/app/NavMain.vue b/components/app/NavMain.vue
index c7624e9..ac97f67 100644
--- a/components/app/NavMain.vue
+++ b/components/app/NavMain.vue
@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import { ChevronRight, type LucideIcon } from 'lucide-vue-next'
-import type { RouteLocationRaw } from 'vue-router'
+import { ChevronRight } from 'lucide-vue-next'
+import type { SidebarNavItem } from './Sidebar.vue'
 
 defineProps<{
   nav: {
     label?: string
-    items: {
-      title: string
-      url?: RouteLocationRaw | string
-      icon: LucideIcon | string
-      isActive?: boolean
-      items?: {
-        title: string
-        url: string
-      }[]
-    }[]
+    items: SidebarNavItem[]
   }[]
 }>()
 </script>
@@ -41,16 +32,16 @@ defineProps<{
             <NuxtLink
               v-if="item.url"
               v-slot="{ isActive, href, navigate }"
-              class="py-6"
+              class="py-5"
               :to="item.url"
               custom
             >
               <SidebarMenuButton
                 as="a"
-                class="flex justify-start text-base pl-8"
                 :tooltip="item.title"
                 :is-active="isActive"
                 :href
+                :target="item.isExternal ? '_blank' : undefined"
                 @click="navigate"
               >
                 <!-- 图标名 -->
@@ -71,6 +62,13 @@ defineProps<{
                   v-if="item.items"
                   class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                 />
+                <!-- 外部链接 -->
+                <Icon
+                  v-if="item.isExternal"
+                  name="tabler:external-link"
+                  class="ml-auto !size-4 opacity-50"
+                  size="16px"
+                />
               </SidebarMenuButton>
             </NuxtLink>
             <!-- 无跳转链接 -->
diff --git a/components/app/PageWithSidebar.vue b/components/app/PageWithSidebar.vue
deleted file mode 100644
index 305b314..0000000
--- a/components/app/PageWithSidebar.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import type { SidebarNavGroup } from './Sidebar.vue'
-
-const props = defineProps<{
-  sidebarNav: SidebarNavGroup[]
-}>()
-
-defineExpose({
-  props,
-})
-</script>
-
-<template>
-  <SidebarProvider style="--sidebar-width: 200px">
-    <slot
-      name="sidebar"
-      :sidebar-nav="sidebarNav"
-    >
-      <AppSidebar :nav="sidebarNav" />
-    </slot>
-    <SidebarInset>
-      <slot name="topbar">
-        <AppTopbar />
-      </slot>
-      <div class="flex flex-1 flex-col gap-4 p-4">
-        <slot />
-      </div>
-    </SidebarInset>
-  </SidebarProvider>
-</template>
-
-<style scoped></style>
diff --git a/components/app/Sidebar.vue b/components/app/Sidebar.vue
index 5584073..0b86c04 100644
--- a/components/app/Sidebar.vue
+++ b/components/app/Sidebar.vue
@@ -8,6 +8,7 @@ export interface SidebarNavItem {
   url?: string | RouteLocationRaw
   icon: LucideIcon | string
   isActive?: boolean
+  isExternal?: boolean
   items?: {
     title: string
     url: string
diff --git a/components/app/Topbar.vue b/components/app/Topbar.vue
index cd03d9c..fb2f91d 100644
--- a/components/app/Topbar.vue
+++ b/components/app/Topbar.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+import type { IBreadcrumbItem } from '~/types'
 
 defineProps({
+  breadcrumbs: {
+    type: Array as () => IBreadcrumbItem[],
+    default: () => [],
+  },
   hideTrigger: {
     type: Boolean,
     default: false,
@@ -48,16 +52,43 @@ export const topbarNavDefaults = [
 
 <template>
   <header
-    class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear border-b sticky top-0 z-30 bg-background"
-  >
+    class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear border-b sticky top-0 z-30 bg-background">
     <!-- group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 -->
-    <div class="flex items-center gap-2 px-4 w-full">
-      <SidebarTrigger
-        v-if="!hideTrigger"
-        class="-ml-1"
-      />
-      <slot name="title-area" />
-      <div class="flex-1 flex justify-center">
+    <div class="flex justify-between items-center gap-2 px-4 w-full">
+      <div
+        class="flex items-center gap-2"
+        :class="`${hideTrigger ? 'px-7' : ''}`">
+        <SidebarTrigger v-if="!hideTrigger" class="-ml-1" />
+        <img
+          v-if="hideTrigger"
+          src="/images/xsh_logo.png"
+          alt="Logo"
+          class="w-10 aspect-square" />
+        <Separator
+          orientation="vertical"
+          class="mr-2 h-4" />
+        <Breadcrumb v-if="breadcrumbs.length > 0">
+          <BreadcrumbList>
+            <template
+              v-for="(crumb, i) in breadcrumbs"
+              :key="i">
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  v-if="crumb.path"
+                  :href="crumb.path">
+                  {{ crumb.label }}
+                </BreadcrumbLink>
+                <BreadcrumbPage v-else>
+                  {{ crumb.label }}
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator v-if="i < breadcrumbs.length - 1" />
+            </template>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <slot name="title-area" />
+      </div>
+      <!-- <div class="flex-1 flex justify-center">
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem
@@ -87,21 +118,18 @@ export const topbarNavDefaults = [
             </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
-      </div>
+      </div> -->
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button
             variant="ghost"
-            size="icon"
-          >
+            size="icon">
             <Icon
               name="tabler:moon"
-              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-            />
+              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Icon
               name="tabler:sun"
-              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-            />
+              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
           </Button>
         </DropdownMenuTrigger>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index f6b713f..4830679 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,4 +1,5 @@
 // @ts-check
+import prettier from 'prettier'
 import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
@@ -6,6 +7,10 @@ export default withNuxt(
   {
     rules: {
       'vue/html-self-closing': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+    },
+    plugins: {
+      prettier,
     },
   },
 )
diff --git a/layouts/default.vue b/layouts/default.vue
index 9777d31..5131596 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,62 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SidebarNavGroup } from '~/components/app/Sidebar.vue'
+
+const route = useRoute()
+const { breadcrumbs } = toRefs(useBreadcrumbs())
+
+const sidebarNav: SidebarNavGroup[] = [
+  {
+    label: '备课制课',
+    items: [
+      {
+        title: '课程管理',
+        url: `/course`,
+        icon: 'tabler:books',
+      },
+      {
+        title: '课程资源',
+        url: `/course/resources`,
+        icon: 'tabler:users-group',
+      },
+    ],
+  },
+  {
+    label: 'AI 资源',
+    items: [
+      {
+        title: 'AI 备课',
+        url: `/course/prep`,
+        icon: 'tabler:books',
+        isExternal: true,
+      },
+      {
+        title: 'AI 教科研',
+        url: `/course/research`,
+        icon: 'tabler:users-group',
+        isExternal: true,
+      },
+    ],
+  },
+]
+</script>
 
 <template>
   <div class="w-full min-h-screen flex font-sans">
-    <slot />
+    <SidebarProvider style="--sidebar-width: 200px">
+      <AppSidebar
+        v-if="!route.meta.hideSidebar"
+        :nav="sidebarNav"
+      />
+      <SidebarInset>
+        <AppTopbar
+          :hide-trigger="route.meta.hideSidebar"
+          :breadcrumbs
+        />
+        <div class="flex flex-1 flex-col gap-4">
+          <slot />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
   </div>
 </template>
 
diff --git a/layouts/no-sidebar.vue b/layouts/no-sidebar.vue
index f3b7fe2..6fe019c 100644
--- a/layouts/no-sidebar.vue
+++ b/layouts/no-sidebar.vue
@@ -2,17 +2,7 @@
 
 <template>
   <div class="w-full min-h-screen flex flex-col font-sans">
-    <AppTopbar hide-trigger>
-      <template #title-area>
-        <div
-          class="flex items-center gap-2 w-[calc(var(--sidebar-width)+24px)] overflow-hidden"
-        >
-          <h1 class="text-lg font-medium">
-            智课教学平台
-          </h1>
-        </div>
-      </template>
-    </AppTopbar>
+    <AppTopbar hide-trigger />
     <div class="min-h-[100vh] flex-1 md:min-h-min p-4">
       <slot />
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a897070..66701b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -35,6 +35,7 @@ export default defineNuxtConfig({
         indent: 2,
         quotes: 'single',
         semi: false,
+        commaDangle: 'only-multiline',
       },
     },
   },
diff --git a/package.json b/package.json
index 414b623..2e8dc63 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
     "@nuxt/test-utils": "3.17.2",
     "@tanstack/vue-table": "^8.21.2",
     "@vee-validate/zod": "^4.15.0",
+    "@vue-office/docx": "^1.6.3",
+    "@vue-office/excel": "^1.7.14",
+    "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "^1.0.1",
     "@vueuse/core": "^13.0.0",
     "class-variance-authority": "^0.7.1",
@@ -49,7 +52,9 @@
     "@vueuse/nuxt": "^13.0.0",
     "dayjs": "^1.11.13",
     "dayjs-nuxt": "^2.1.11",
+    "eslint-plugin-prettier": "^5.2.6",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "prettier": "^3.5.3",
     "shadcn-nuxt": "2.0.1",
     "typescript": "^5.8.2"
   }
diff --git a/pages/course/[id].vue b/pages/course/[id].vue
index 92063bb..7b8c19d 100644
--- a/pages/course/[id].vue
+++ b/pages/course/[id].vue
@@ -1,8 +1,6 @@
 <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 {
@@ -10,61 +8,44 @@ const {
   params: { id },
 } = useRoute()
 const router = useRouter()
+const { setBreadcrumbs } = useBreadcrumbs()
 
 const {
   data: course,
   status: courseStatus,
   error: courseError,
-} = await useAsyncData<
+} = useAsyncData<
   IResponse<{
     data: ICourse
   }>,
   IResponse
 >(() => getCourseDetail(id as string))
 
-useHead({
-  title: `${course.value?.data.courseName || '课程不存在'} - 课程管理`,
-})
-
 definePageMeta({
   requiresAuth: true,
+  hideSidebar: 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',
-      },
-    ],
-  },
-]
+watch(
+  () => course.value,
+  (data) => {
+    useHead({
+      title: `${course.value?.data.courseName || '课程不存在'} - 课程管理`,
+    })
 
-const topNav = [
-  {
-    title: '课程管理',
-    to: `/course/${id}`,
-    icon: 'tabler:layout-dashboard',
+    if (data?.data.courseName) {
+      setBreadcrumbs([
+        {
+          label: '课程管理',
+          path: '/course',
+        },
+        {
+          label: data.data.courseName || '课程不存在',
+        },
+      ])
+    }
   },
-  ...topbarNavDefaults.slice(1),
-]
+)
 
 onMounted(() => {
   if (fullPath === `/course/${id}`) {
@@ -72,61 +53,54 @@ onMounted(() => {
   }
 })
 
-watch(() => useRoute().fullPath, (newPath) => {
-  if (newPath === `/course/${id}`) {
-    router.replace(`/course/${id}/chapters`)
-  }
-})
+watch(
+  () => useRoute().fullPath,
+  (newPath) => {
+    if (newPath === `/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>
+  <AppContainer
+    :subnavs="[
+      {
+        label: '课程章节',
+        to: `/course/${id}/chapters`,
+      },
+      {
+        label: '教师团队',
+        to: `/course/${id}/team`,
+      },
+      {
+        label: '学生班级',
+        to: `/course/${id}/classes`,
+      },
+      {
+        label: '学生评价',
+        to: `/course/${id}/evaluation`,
+      },
+    ]"
+  >
+    <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"
+    />
+  </AppContainer>
 </template>
 
 <style scoped></style>
diff --git a/pages/course/index.vue b/pages/course/index.vue
index fab3941..f0361a8 100644
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -6,7 +6,6 @@ import type { FetchError } from 'ofetch'
 import { createCourse, deleteCourse, listUserCourses } from '~/api/course'
 
 definePageMeta({
-  layout: 'no-sidebar',
   requiresAuth: true,
 })
 
@@ -100,245 +99,245 @@ const onDeleteCourse = (courseId: number) => {
 </script>
 
 <template>
-  <div class="container mx-auto flex flex-col gap-8">
-    <div class="flex justify-between items-center">
-      <div class="flex items-center gap-2">
-        <Form
-          v-slot="{ handleSubmit }"
-          as=""
-          :validation-schema="courseFormSchema"
-        >
-          <Dialog v-model:open="createCourseDialogOpen">
-            <DialogTrigger as-child>
-              <Button
-                variant="secondary"
-                size="sm"
-              >
-                <Icon
-                  name="tabler:plus"
-                  size="16px"
-                />
-                新建课程
-              </Button>
-            </DialogTrigger>
-            <DialogContent class="sm:max-w-[425px]">
-              <DialogHeader>
-                <DialogTitle>创建课程</DialogTitle>
-                <DialogDescription>
-                  课程创建后，您可以在课程中添加章节等内容。
-                </DialogDescription>
-              </DialogHeader>
-
-              <form
-                id="createCourseForm"
-                autocomplete="off"
-                class="space-y-2"
-                @submit="handleSubmit($event, onCourseSubmit)"
-              >
-                <FormField
-                  v-slot="{ componentField }"
-                  name="courseName"
-                >
-                  <FormItem v-auto-animate>
-                    <FormLabel>课程名称</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="请输入课程名称"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-                <FormField
-                  v-slot="{ componentField }"
-                  name="profile"
-                >
-                  <FormItem v-auto-animate>
-                    <FormLabel>课程介绍</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        type="text"
-                        placeholder="请输入课程介绍"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-                <FormField
-                  v-slot="{ componentField }"
-                  name="schoolName"
-                >
-                  <FormItem v-auto-animate>
-                    <FormLabel>学校名称</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="请输入院校名称"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-                <input
-                  type="hidden"
-                  name="teacherName"
-                  :value="loginState.user.nickName"
-                />
-                <FormField
-                  v-slot="{ componentField }"
-                  name="semester"
-                >
-                  <FormItem v-auto-animate>
-                    <FormLabel>学期</FormLabel>
-                    <FormControl>
-                      <Select v-bind="componentField">
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="请选择学期" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem
-                              v-for="semester in getSemesters(3)"
-                              :key="semester"
-                              :value="semester"
-                            >
-                              {{ semester }}
-                            </SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </form>
-
-              <DialogFooter>
+  <AppContainer>
+    <div class="flex flex-col gap-8">
+      <div class="flex justify-between items-center">
+        <div class="flex items-center gap-2">
+          <Form
+            v-slot="{ handleSubmit }"
+            as=""
+            :validation-schema="courseFormSchema"
+          >
+            <Dialog v-model:open="createCourseDialogOpen">
+              <DialogTrigger as-child>
                 <Button
-                  type="submit"
-                  form="createCourseForm"
+                  variant="secondary"
+                  size="sm"
                 >
-                  创建
+                  <Icon
+                    name="tabler:plus"
+                    size="16px"
+                  />
+                  新建课程
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </Form>
+              </DialogTrigger>
+              <DialogContent class="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>创建课程</DialogTitle>
+                  <DialogDescription>
+                    课程创建后，您可以在课程中添加章节等内容。
+                  </DialogDescription>
+                </DialogHeader>
 
-        <Form
-          v-slot="{ handleSubmit }"
-          as=""
-          keep-values
-          :validation-schema="folderFormSchema"
-        >
-          <Dialog>
-            <DialogTrigger as-child>
-              <!-- TODO: disable temporarily -->
-              <Button
-                variant="secondary"
-                size="sm"
-                class="hidden"
-              >
-                <Icon
-                  name="tabler:folder-plus"
-                  size="16px"
-                />
-                新建文件夹
-              </Button>
-            </DialogTrigger>
-            <DialogContent class="sm:max-w-[425px]">
-              <DialogHeader>
-                <DialogTitle>创建文件夹</DialogTitle>
-                <DialogDescription>
-                  可以将多门课程收纳在文件夹中
-                </DialogDescription>
-              </DialogHeader>
-
-              <form
-                id="createCourseForm"
-                autocomplete="off"
-                class="space-y-2"
-                @submit="handleSubmit($event, onFolderSubmit)"
-              >
-                <FormField
-                  v-slot="{ componentField }"
-                  name="folderName"
+                <form
+                  id="createCourseForm"
+                  autocomplete="off"
+                  class="space-y-2"
+                  @submit="handleSubmit($event, onCourseSubmit)"
                 >
-                  <FormItem v-auto-animate>
-                    <FormLabel>文件夹名称</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="请输入文件夹名称"
-                        v-bind="componentField"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </form>
+                  <FormField
+                    v-slot="{ componentField }"
+                    name="courseName"
+                  >
+                    <FormItem v-auto-animate>
+                      <FormLabel>课程名称</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="请输入课程名称"
+                          v-bind="componentField"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                  <FormField
+                    v-slot="{ componentField }"
+                    name="profile"
+                  >
+                    <FormItem v-auto-animate>
+                      <FormLabel>课程介绍</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          type="text"
+                          placeholder="请输入课程介绍"
+                          v-bind="componentField"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                  <FormField
+                    v-slot="{ componentField }"
+                    name="schoolName"
+                  >
+                    <FormItem v-auto-animate>
+                      <FormLabel>学校名称</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="请输入院校名称"
+                          v-bind="componentField"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                  <input
+                    type="hidden"
+                    name="teacherName"
+                    :value="loginState.user.nickName"
+                  />
+                  <FormField
+                    v-slot="{ componentField }"
+                    name="semester"
+                  >
+                    <FormItem v-auto-animate>
+                      <FormLabel>学期</FormLabel>
+                      <FormControl>
+                        <Select v-bind="componentField">
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue placeholder="请选择学期" />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectGroup>
+                              <SelectItem
+                                v-for="semester in getSemesters(3)"
+                                :key="semester"
+                                :value="semester"
+                              >
+                                {{ semester }}
+                              </SelectItem>
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                </form>
 
-              <DialogFooter>
+                <DialogFooter>
+                  <Button
+                    type="submit"
+                    form="createCourseForm"
+                  >
+                    创建
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </Form>
+
+          <Form
+            v-slot="{ handleSubmit }"
+            as=""
+            keep-values
+            :validation-schema="folderFormSchema"
+          >
+            <Dialog>
+              <DialogTrigger as-child>
+                <!-- TODO: disable temporarily -->
                 <Button
-                  type="submit"
-                  form="createCourseForm"
+                  variant="secondary"
+                  size="sm"
+                  class="hidden"
                 >
-                  创建
+                  <Icon
+                    name="tabler:folder-plus"
+                    size="16px"
+                  />
+                  新建文件夹
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </Form>
+              </DialogTrigger>
+              <DialogContent class="sm:max-w-[425px]">
+                <DialogHeader>
+                  <DialogTitle>创建文件夹</DialogTitle>
+                  <DialogDescription>
+                    可以将多门课程收纳在文件夹中
+                  </DialogDescription>
+                </DialogHeader>
+
+                <form
+                  id="createCourseForm"
+                  autocomplete="off"
+                  class="space-y-2"
+                  @submit="handleSubmit($event, onFolderSubmit)"
+                >
+                  <FormField
+                    v-slot="{ componentField }"
+                    name="folderName"
+                  >
+                    <FormItem v-auto-animate>
+                      <FormLabel>文件夹名称</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="请输入文件夹名称"
+                          v-bind="componentField"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  </FormField>
+                </form>
+
+                <DialogFooter>
+                  <Button
+                    type="submit"
+                    form="createCourseForm"
+                  >
+                    创建
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </Form>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :variant="deleteMode ? 'destructive' : 'secondary'"
+            size="sm"
+            @click="deleteMode = !deleteMode"
+          >
+            {{ deleteMode ? '退出删除' : '删除课程' }}
+          </Button>
+        </div>
       </div>
-      <div class="flex items-center gap-2">
-        <Button
-          :variant="deleteMode ? 'destructive' : 'secondary'"
-          size="sm"
-          @click="deleteMode = !deleteMode"
-        >
-          {{ deleteMode ? "退出删除" : "删除课程" }}
-        </Button>
-      </div>
-    </div>
-    <div
-      v-if="coursesList?.rows && coursesList.rows.length > 0"
-      class="grid grid-cols-5 gap-8"
-    >
-      <CourseCard
-        v-for="course in coursesList?.rows"
-        :key="course.id"
-        :data="course"
-        :delete-mode="deleteMode"
-        @delete-course="onDeleteCourse"
-      />
-    </div>
-    <EmptyScreen
-      v-else
-      title="暂无课程"
-      icon="fluent-color:people-list-24"
-    >
-      <p class="text-sm text-muted-foreground">
-        还没有创建或加入课程
-      </p>
-      <Button
-        variant="outline"
-        size="sm"
-        @click="createCourseDialogOpen = true"
+      <div
+        v-if="coursesList?.rows && coursesList.rows.length > 0"
+        class="grid grid-cols-6 gap-8"
       >
-        <Icon
-          name="tabler:plus"
-          size="16px"
+        <CourseCard
+          v-for="course in coursesList?.rows"
+          :key="course.id"
+          :data="course"
+          :delete-mode="deleteMode"
+          @delete-course="onDeleteCourse"
         />
-        新建课程
-      </Button>
-    </EmptyScreen>
-  </div>
+      </div>
+      <EmptyScreen
+        v-else
+        title="暂无课程"
+        icon="fluent-color:people-list-24"
+      >
+        <p class="text-sm text-muted-foreground">还没有创建或加入课程</p>
+        <Button
+          variant="outline"
+          size="sm"
+          @click="createCourseDialogOpen = true"
+        >
+          <Icon
+            name="tabler:plus"
+            size="16px"
+          />
+          新建课程
+        </Button>
+      </EmptyScreen>
+    </div>
+  </AppContainer>
 </template>
 
 <style scoped></style>
diff --git a/pages/course/research/index.vue b/pages/course/research/index.vue
index 347962f..b2236e5 100644
--- a/pages/course/research/index.vue
+++ b/pages/course/research/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 definePageMeta({
-  layout: 'no-sidebar',
+  hideSidebar: true,
 })
 </script>
 
diff --git a/pages/course/resources/index.vue b/pages/course/resources/index.vue
index c2d7d8e..64d2546 100644
--- a/pages/course/resources/index.vue
+++ b/pages/course/resources/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 definePageMeta({
-  layout: 'no-sidebar',
   requiresAuth: true,
 })
 </script>
diff --git a/pages/preview/[resource_url].vue b/pages/preview/[resource_url].vue
index 6c3aad0..2dfdae0 100644
--- a/pages/preview/[resource_url].vue
+++ b/pages/preview/[resource_url].vue
@@ -1,9 +1,19 @@
 <script lang="ts" setup>
 import VueOfficePptx from '@vue-office/pptx'
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+import VueOfficePdf from '@vue-office/pdf'
+import '@vue-office/docx/lib/index.css'
+import '@vue-office/excel/lib/index.css'
+
+definePageMeta({
+  hideSidebar: true,
+})
 
 const {
   params: { resource_url },
 } = useRoute()
+const { setBreadcrumbs } = useBreadcrumbs()
 
 const url = computed(() => {
   return atob(resource_url as string)
@@ -28,36 +38,76 @@ const fileType = computed(() => {
   if (ext === 'mp3' || ext === 'wav') return 'audio'
   return ''
 })
+
+onMounted(() => {
+  useHead({
+    title: `${fileType.value.toUpperCase()} 资源预览`,
+  })
+
+  setBreadcrumbs([
+    {
+      label: `${fileType.value.toUpperCase()} 资源预览`,
+    },
+  ])
+})
+
+const vueOfficeOptions = {
+  autoSize: true,
+  autoHeight: true,
+  autoWidth: true,
+  autoScale: true,
+  autoRotate: true,
+  autoFit: true,
+}
 </script>
 
 <template>
-  <div class="w-full h-screen">
+  <AppContainer>
     <div v-if="!url">
       <div class="flex items-center justify-center h-full">
-        <p class="text-muted-foreground">
-          资源链接无效
-        </p>
+        <p class="text-muted-foreground">资源链接无效</p>
       </div>
     </div>
     <div
       v-else
-      class="w-full h-full"
+      class="w-full h-full border rounded-lg overflow-hidden"
     >
-      <VueOfficePptx
-        v-if="fileType === 'ppt'"
-        :src="url"
+      <VueOfficeDocx
+        v-if="fileType === 'word'"
         class="w-full h-full"
-        :options="{
-          autoSize: true,
-          autoHeight: true,
-          autoWidth: true,
-          autoScale: true,
-          autoRotate: true,
-          autoFit: true,
-        }"
+        :src="url"
+        :options="vueOfficeOptions"
       />
+      <VueOfficePptx
+        v-else-if="fileType === 'ppt'"
+        class="w-full h-full"
+        :src="url"
+        :options="vueOfficeOptions"
+      />
+      <VueOfficeExcel
+        v-else-if="fileType === 'excel'"
+        class="w-full h-full"
+        :src="url"
+        :options="vueOfficeOptions"
+      />
+      <VueOfficePdf
+        v-else-if="fileType === 'pdf'"
+        class="w-full h-full"
+        :src="url"
+        :options="vueOfficeOptions"
+      />
+      <div
+        v-else
+        class="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground"
+      >
+        <Icon
+          name="fluent-color:notebook-question-mark-24"
+          class="text-6xl"
+        />
+        <p>暂不支持该资源类型</p>
+      </div>
     </div>
-  </div>
+  </AppContainer>
 </template>
 
 <style scoped></style>
diff --git a/pages/user/authenticate.client.vue b/pages/user/authenticate.client.vue
index 1f6797e..d7141f3 100644
--- a/pages/user/authenticate.client.vue
+++ b/pages/user/authenticate.client.vue
@@ -6,6 +6,10 @@ import * as z from 'zod'
 import type { FetchError } from 'ofetch'
 import { userLogin, type LoginResponse } from '~/api'
 
+definePageMeta({
+  layout: 'blank',
+})
+
 const loginState = useLoginState()
 const {
   query: { redirect },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2152a82..d98b06b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,15 @@ importers:
       '@vee-validate/zod':
         specifier: ^4.15.0
         version: 4.15.0(vue@3.5.13(typescript@5.8.2))(zod@3.24.2)
+      '@vue-office/docx':
+        specifier: ^1.6.3
+        version: 1.6.3(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      '@vue-office/excel':
+        specifier: ^1.7.14
+        version: 1.7.14(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      '@vue-office/pdf':
+        specifier: ^2.0.10
+        version: 2.0.10(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       '@vue-office/pptx':
         specifier: ^1.0.1
         version: 1.0.1(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
@@ -111,9 +120,15 @@ importers:
       dayjs-nuxt:
         specifier: ^2.1.11
         version: 2.1.11(magicast@0.3.5)
+      eslint-plugin-prettier:
+        specifier: ^5.2.6
+        version: 5.2.6(eslint@9.23.0(jiti@2.4.2))(prettier@3.5.3)
       pinia-plugin-persistedstate:
         specifier: ^4.2.0
         version: 4.2.0(@pinia/nuxt@0.10.1(magicast@0.3.5)(pinia@3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))))(magicast@0.3.5)(pinia@3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)))
+      prettier:
+        specifier: ^3.5.3
+        version: 3.5.3
       shadcn-nuxt:
         specifier: 2.0.1
         version: 2.0.1(magicast@0.3.5)
@@ -959,6 +974,10 @@ packages:
     resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@pkgr/core@0.2.4':
+    resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
@@ -1404,6 +1423,36 @@ packages:
       vue:
         optional: true
 
+  '@vue-office/docx@1.6.3':
+    resolution: {integrity: sha512-Cs+3CAaRBOWOiW4XAhTwwxJ0dy8cPIf6DqfNvYcD3YACiLwO4kuawLF2IAXxyijhbuOeoFsfvoVbOc16A/4bZA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@vue-office/excel@1.7.14':
+    resolution: {integrity: sha512-pVUgt+emDQUnW7q22CfnQ+jl43mM/7IFwYzOg7lwOwPEbiVB4K4qEQf+y/bc4xGXz75w1/e3Kz3G6wAafmFBFg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@vue-office/pdf@2.0.10':
+    resolution: {integrity: sha512-yHVLrMAKpMPBkhBwofFyGEtEeJF0Zd7oGmf56Pe5aj/xObdRq3E1CIZqTqhWJNgHV8oLQqaX0vs4p5T1zq+GIA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.1
+      vue: ^2.0.0 || >=3.0.0
+      vue-demi: ^0.14.6
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   '@vue-office/pptx@1.0.1':
     resolution: {integrity: sha512-+V7Kctzl6f6+Yk4NaD/wQGRIkqLWcowe0jEhPexWQb8Oilbzt1OyhWRWcMsxNDTdrgm6aMLP+0/tmw27cxddMg==}
     peerDependencies:
@@ -2268,6 +2317,20 @@ packages:
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
 
+  eslint-plugin-prettier@5.2.6:
+    resolution: {integrity: sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
   eslint-plugin-regexp@2.7.0:
     resolution: {integrity: sha512-U8oZI77SBtH8U3ulZ05iu0qEzIizyEDXd+BWHvyVxTOjGwcDcvy/kEpgFG4DYca2ByRLiVPFZ2GeH7j1pdvZTA==}
     engines: {node: ^18 || >=20}
@@ -2379,6 +2442,9 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
@@ -3632,6 +3698,15 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@6.1.1:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -4038,6 +4113,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  synckit@0.11.4:
+    resolution: {integrity: sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   synckit@0.9.2:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5759,6 +5838,8 @@ snapshots:
 
   '@pkgr/core@0.2.2': {}
 
+  '@pkgr/core@0.2.4': {}
+
   '@polka/url@1.0.0-next.28': {}
 
   '@poppinss/colors@4.1.4':
@@ -6178,6 +6259,21 @@ snapshots:
     optionalDependencies:
       vue: 3.5.13(typescript@5.8.2)
 
+  '@vue-office/docx@1.6.3(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.8.2))
+
+  '@vue-office/excel@1.7.14(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.8.2))
+
+  '@vue-office/pdf@2.0.10(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.8.2))
+
   '@vue-office/pptx@1.0.1(vue-demi@0.14.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
@@ -7091,6 +7187,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-prettier@5.2.6(eslint@9.23.0(jiti@2.4.2))(prettier@3.5.3):
+    dependencies:
+      eslint: 9.23.0(jiti@2.4.2)
+      prettier: 3.5.3
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.4
+
   eslint-plugin-regexp@2.7.0(eslint@9.23.0(jiti@2.4.2)):
     dependencies:
       '@eslint-community/eslint-utils': 4.5.1(eslint@9.23.0(jiti@2.4.2))
@@ -7254,6 +7357,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.3.0: {}
+
   fast-fifo@1.3.2: {}
 
   fast-glob@3.3.3:
@@ -8741,6 +8846,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier@3.5.3: {}
+
   pretty-bytes@6.1.1: {}
 
   process-nextick-args@2.0.1: {}
@@ -9216,6 +9327,11 @@ snapshots:
       csso: 5.0.5
       picocolors: 1.1.1
 
+  synckit@0.11.4:
+    dependencies:
+      '@pkgr/core': 0.2.4
+      tslib: 2.8.1
+
   synckit@0.9.2:
     dependencies:
       '@pkgr/core': 0.1.2
diff --git a/stores/breadcrumbs.ts b/stores/breadcrumbs.ts
new file mode 100644
index 0000000..332b5c3
--- /dev/null
+++ b/stores/breadcrumbs.ts
@@ -0,0 +1,24 @@
+import type { IBreadcrumbItem } from '~/types'
+
+export const useBreadcrumbs = defineStore('breadcrumbs', () => {
+  const breadcrumbs = ref<IBreadcrumbItem[]>([])
+
+  const setBreadcrumbs = (items: IBreadcrumbItem[]) => {
+    breadcrumbs.value = items
+  }
+
+  const clearBreadcrumbs = () => {
+    breadcrumbs.value = []
+  }
+
+  const getBreadcrumbs = () => {
+    return breadcrumbs.value
+  }
+
+  return {
+    breadcrumbs,
+    getBreadcrumbs,
+    setBreadcrumbs,
+    clearBreadcrumbs,
+  }
+})
diff --git a/types/index.ts b/types/index.ts
index ed7b963..2a5dbeb 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -2,3 +2,8 @@ export * from './user'
 export * from './course'
 
 export type { FetchError } from 'ofetch'
+
+export interface IBreadcrumbItem {
+  label: string
+  path?: string
+}
diff --git a/types/nuxt.d.ts b/types/nuxt.d.ts
new file mode 100644
index 0000000..cd2ad8f
--- /dev/null
+++ b/types/nuxt.d.ts
@@ -0,0 +1,8 @@
+declare module '#app' {
+  interface PageMeta {
+    /** 隐藏侧边栏 */
+    hideSidebar?: boolean
+  }
+}
+
+export {}