From 1745a54eb6e7478f566e1a51b6df70b5f7a9f201 Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Tue, 29 Jul 2025 00:32:57 +0800
Subject: [PATCH] lint:fix all

---
 .github/nuxt.config.ts                      | 106 +++++-----
 app/app.vue                                 |   9 +-
 app/components/AppHeader.vue                | 132 ++++++++-----
 app/components/AppSidebar.vue               |  45 +++--
 app/components/ContentDirectory.vue         |  16 +-
 app/components/IndexCard.vue                | 143 ++++++++------
 app/components/IndexHero.vue                |  30 +--
 app/components/LogoPro.vue                  |   5 +-
 app/components/ThemeSettings.vue            |  44 +++--
 app/components/auth/login.vue               |   2 +-
 app/components/content/ButtonLink.vue       |  43 +++--
 app/components/content/ColorModeSwitch.vue  |   4 +-
 app/components/content/ECard.vue            |  53 ++---
 app/components/content/ETabs.vue            |  14 +-
 app/components/content/FileTree.vue         | 124 ++++++------
 app/components/content/FileTreeItem.vue     |  69 ++++---
 app/components/content/Playground.vue       |  37 ++--
 app/components/content/ProseH1.vue          |  11 +-
 app/components/content/ProseH2.vue          |  11 +-
 app/components/content/ProseH3.vue          |  11 +-
 app/components/content/ProseH4.vue          |  11 +-
 app/components/content/ProseH5.vue          |  11 +-
 app/components/content/ProseH6.vue          |  11 +-
 app/components/content/ReadMore.vue         |  38 ++--
 app/components/content/SmartIcon.vue        |  18 +-
 app/components/content/Stack.vue            |  15 +-
 app/components/docs/DocsAsideLeftTop.vue    |  12 +-
 app/components/docs/DocsPageHeaderLinks.vue |  18 +-
 app/composables/useTheme.ts                 | 204 ++++++++++----------
 app/error.vue                               |  47 ++---
 app/layouts/default.vue                     |  27 ++-
 app/pages/[...slug].vue                     |  91 ++++++---
 app/pages/index.vue                         |   4 +-
 nuxt.config.ts                              |  10 +-
 34 files changed, 820 insertions(+), 606 deletions(-)

diff --git a/.github/nuxt.config.ts b/.github/nuxt.config.ts
index 2752888..b780a3b 100644
--- a/.github/nuxt.config.ts
+++ b/.github/nuxt.config.ts
@@ -1,11 +1,10 @@
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import tailwindcss from '@tailwindcss/vite';
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
 
-const currentDir = dirname(fileURLToPath(import.meta.url));
+const currentDir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
-  devtools: { enabled: true },
   modules: [
     'shadcn-nuxt',
     '@vueuse/nuxt',
@@ -16,42 +15,33 @@ export default defineNuxtConfig({
     'nuxt-og-image',
     '@nuxt/scripts',
     '@nuxtjs/i18n',
-    '@nuxt/fonts',
+    '@nuxt/fonts'
   ],
-  shadcn: {
-    prefix: 'Ui',
-    componentDir: join(currentDir, './components/ui'),
-  },
   components: {
     dirs: [
       {
         path: './components',
-        ignore: ['**/*.ts'],
-      },
-    ],
-  },
-  i18n: {
-    bundle: {
-      optimizeTranslationDirective: false,
-    },
-    strategy: 'prefix_except_default',
-  },
-  colorMode: {
-    classSuffix: '',
-    disableTransition: true,
+        ignore: ['**/*.ts']
+      }
+    ]
   },
+  devtools: { enabled: true },
   css: [
     join(currentDir, './assets/css/themes.css'),
-    '~/assets/css/tailwind.css',
+    '~/assets/css/tailwind.css'
   ],
+  colorMode: {
+    classSuffix: '',
+    disableTransition: true
+  },
   content: {
     documentDriven: true,
     highlight: {
       theme: {
         default: 'github-light',
-        dark: 'github-dark',
+        dark: 'github-dark'
       },
-      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'mdc', 'yaml', 'bash', 'ini', 'dotenv'],
+      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'mdc', 'yaml', 'bash', 'ini', 'dotenv']
     },
     navigation: {
       fields: [
@@ -65,40 +55,50 @@ export default defineNuxtConfig({
         'editLink',
         'prevNext',
         'breadcrumb',
-        'fullpage',
-      ],
+        'fullpage'
+      ]
     },
     experimental: {
       search: {
-        indexed: true,
-      },
-    },
+        indexed: true
+      }
+    }
   },
-  icon: {
-    clientBundle: {
-      scan: true,
-      sizeLimitKb: 512,
-    },
-  },
-  fonts: {
-    defaults: {
-      weights: ['300 800'],
-    },
+  compatibilityDate: '2025-05-13',
+  vite: {
+    plugins: [
+      tailwindcss()
+    ],
+    optimizeDeps: {
+      include: ['debug']
+    }
   },
   typescript: {
     tsConfig: {
       compilerOptions: {
-        baseUrl: '.',
-      },
-    },
+        baseUrl: '.'
+      }
+    }
   },
-  vite: {
-    plugins: [
-      tailwindcss(),
-    ],
-    optimizeDeps: {
-      include: ['debug'],
-    },
+  fonts: {
+    defaults: {
+      weights: ['300 800']
+    }
   },
-  compatibilityDate: '2025-05-13',
-});
+  i18n: {
+    bundle: {
+      optimizeTranslationDirective: false
+    },
+    strategy: 'prefix_except_default'
+  },
+  icon: {
+    clientBundle: {
+      scan: true,
+      sizeLimitKb: 512
+    }
+  },
+  shadcn: {
+    prefix: 'Ui',
+    componentDir: join(currentDir, './components/ui')
+  }
+})
diff --git a/app/app.vue b/app/app.vue
index 097d108..147a155 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -12,16 +12,16 @@ const { selectedTheme, selectedFont, selectedFontSize } = useTheme()
 // 计算根元素的 CSS 类
 const rootClasses = computed(() => {
   const classes = []
-  
+
   // 添加主题类
   classes.push(`theme-${selectedTheme.value}`)
-  
+
   // 添加字体类
   classes.push(`font-${selectedFont.value}`)
-  
+
   // 移除字号类，让它在具体组件中处理
   // classes.push(`text-${selectedFontSize.value}`)
-  
+
   return classes.join(' ')
 })
 
@@ -65,4 +65,3 @@ provide('navigation', navigation)
     </ClientOnly>
   </UApp>
 </template>
-
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index d62a4d6..d8f647d 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,66 +1,93 @@
 <script setup lang="ts">
 // import type { NavigationMenuItem } from '@nuxt/ui'
-import type { ContentNavigationItem } from "@nuxt/content";
-const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
+import type { ContentNavigationItem } from '@nuxt/content'
 
-const isSettingsOpen = ref(false);
-const isLoginModalOpen = ref(false);
-const isRegisterModalOpen = ref(false);
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const isSettingsOpen = ref(false)
+const isLoginModalOpen = ref(false)
+const isRegisterModalOpen = ref(false)
 
 // const { header } = useAppConfig();
 
-
 // 定义 props 来接收侧边栏状态和切换函数
 interface Props {
-  isSidebarOpen?: boolean;
-  toggleSidebar?: () => void;
+  isSidebarOpen?: boolean
+  toggleSidebar?: () => void
 }
 
 const Props = withDefaults(defineProps<Props>(), {
   isSidebarOpen: false,
-  toggleSidebar: () => { },
-});
+  toggleSidebar: () => { }
+})
 
 // 登录注册函数
-const handleLoginRegister = (type: "login" | "register") => {
-  if (type === "login") {
-    isLoginModalOpen.value = true;
-  } else if (type === "register") {
-    isRegisterModalOpen.value = true;
+const handleLoginRegister = (type: 'login' | 'register') => {
+  if (type === 'login') {
+    isLoginModalOpen.value = true
+  } else if (type === 'register') {
+    isRegisterModalOpen.value = true
   }
-};
+}
 </script>
 
 <template>
-  <UHeader toggle-side="left" title="Estel Docs" mode="modal" class="bg-gray-50 dark:bg-gray-900">
-
+  <UHeader
+    toggle-side="left"
+    title="Estel Docs"
+    mode="modal"
+    class="bg-gray-50 dark:bg-gray-900"
+  >
     <template #title>
-      <h6></h6>
+      <h6 />
     </template>
-    
-    
+
     <template #body>
       <LogoPro class="h-5 w-auto mb-4" />
       <DocsAsideLeftTop />
       <div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
-      <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
+      <UContentNavigation
+        highlight
+        :navigation="navigation"
+        color="primary"
+        type="single"
+        variant="pill"
+      />
     </template>
 
     <template #right>
       <UContentSearchButton class="lg:hidden" />
       <UColorModeButton />
       <button
-            class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            title="页面设置" @click="isSettingsOpen = !isSettingsOpen">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-          </button>
+        class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        title="页面设置"
+        @click="isSettingsOpen = !isSettingsOpen"
+      >
+        <svg
+          class="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+          />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          />
+        </svg>
+      </button>
 
-      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+      <UTooltip
+        text="Open on GitHub"
+        :kbds="['meta', 'G']"
+      >
         <UButton
           color="neutral"
           variant="ghost"
@@ -71,32 +98,45 @@ const handleLoginRegister = (type: "login" | "register") => {
         />
       </UTooltip>
       <div class="flex items-center space-x-2">
-          <button @click="handleLoginRegister('login')"
-            class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
-            登录
-          </button>
-          <button @click="handleLoginRegister('register')"
-            class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors">
-            注册
-          </button>
-        </div>
+        <button
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
+          @click="handleLoginRegister('login')"
+        >
+          登录
+        </button>
+        <button
+          class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
+          @click="handleLoginRegister('register')"
+        >
+          注册
+        </button>
+      </div>
     </template>
-
-
   </UHeader>
 
   <!-- Theme Settings Panel -->
-  <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
+  <ThemeSettings
+    :is-open="isSettingsOpen"
+    @close="isSettingsOpen = false"
+  />
 
   <!-- 登录模态框 -->
-  <UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">
+  <UModal
+    v-model:open="isLoginModalOpen"
+    title="登录"
+    :dismissible="false"
+  >
     <template #body>
       <authLogin />
     </template>
   </UModal>
 
   <!-- 注册模态框 -->
-  <UModal v-model:open="isRegisterModalOpen" title="注册" :dismissible="false">
+  <UModal
+    v-model:open="isRegisterModalOpen"
+    title="注册"
+    :dismissible="false"
+  >
     <template #body>
       <authRegister />
     </template>
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index 0c4007f..99eaa22 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -1,9 +1,10 @@
 <template>
   <UPage>
     <div
-      class="w-64 bg-white dark:bg-gray-900 
-      flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 
-      overflow-hidden">
+      class="w-64 bg-white dark:bg-gray-900
+      flex flex-col h-screen border-r border-gray-200 dark:border-gray-700
+      overflow-hidden"
+    >
       <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
         <!-- Logo -->
         <LogoPro />
@@ -12,29 +13,38 @@
       <!-- Search Box -->
       <div class="p-4 border-gray-200 dark:border-gray-700">
         <ClientOnly>
-          <UContentSearchButton :collapsed="false" label="搜索文档" class="w-full"
-            color="primary" />
+          <UContentSearchButton
+            :collapsed="false"
+            label="搜索文档"
+            class="w-full"
+            color="primary"
+          />
         </ClientOnly>
       </div>
 
       <!-- 可滚动的导航区域 -->
       <div class=" h-full overflow-y-auto ">
-
         <!-- 导航 Section -->
 
         <div>
-          <NuxtLink to="/"
+          <NuxtLink
+            to="/"
             class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
             :class="{
               ' text-blue-600 dark:text-blue-400 ':
-                $route.path === '/',
-            }">
-            <Icon name="lucide-home" class="text-primary mr-2" size="20" />
+                $route.path === '/'
+            }"
+          >
+            <Icon
+              name="lucide-home"
+              class="text-primary mr-2"
+              size="20"
+            />
             站点首页
           </NuxtLink>
           <div class="px-2">
             <DocsAsideLeftTop />
-          </div>   
+          </div>
         </div>
 
         <!-- 分隔线 -->
@@ -42,7 +52,13 @@
 
         <!-- 文档目录导航 -->
         <div class="mt-6 flex items-center justify-start pl-4 w-full">
-            <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
+          <UContentNavigation
+            highlight
+            :navigation="navigation"
+            color="primary"
+            type="single"
+            variant="pill"
+          />
         </div>
       </div>
     </div>
@@ -50,6 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ContentNavigationItem } from "@nuxt/content";
-const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 </script>
diff --git a/app/components/ContentDirectory.vue b/app/components/ContentDirectory.vue
index 42894a5..cef4572 100644
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>    
-    <UContentNavigation 
-      :navigation="directoryNavigation" 
-      highlight 
+  <div>
+    <UContentNavigation
+      :navigation="directoryNavigation"
+      highlight
       color="primary"
       variant="pill"
     />
@@ -18,8 +18,8 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 // 处理导航数据，只显示一级目录和根目录文件
 const directoryNavigation = computed(() => {
   if (!navigation?.value) return []
-  
-  return navigation.value.map(item => {
+
+  return navigation.value.map((item) => {
     // 如果是根目录文件（没有 children），直接返回
     if (!item.children || item.children.length === 0) {
       return {
@@ -29,7 +29,7 @@ const directoryNavigation = computed(() => {
         active: Boolean(item.active)
       }
     }
-    
+
     // 如果是一级目录，只保留目录本身，不显示子项
     return {
       title: item.title,
@@ -45,4 +45,4 @@ const directoryNavigation = computed(() => {
 // 调试信息
 // console.log('ContentDirectory: Navigation data:', navigation.value)
 // console.log('ContentDirectory: Processed navigation:', directoryNavigation.value)
-</script>
\ No newline at end of file
+</script>
diff --git a/app/components/IndexCard.vue b/app/components/IndexCard.vue
index 8524d03..18e8d88 100644
--- a/app/components/IndexCard.vue
+++ b/app/components/IndexCard.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
-        <!-- 响应式卡片网格 -->
-        <!-- 
+  <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
+    <!-- 响应式卡片网格 -->
+    <!--
             这个div使用了Tailwind CSS的类来实现响应式的卡片网格布局：
             - grid：将容器设置为网格布局。
             - grid-cols-1：在小屏幕下每行显示1列。
@@ -11,88 +11,103 @@
             - max-w-8xl：设置最大宽度为8xl，防止内容过宽。
             - mx-auto：左右自动外边距，使网格居中显示。
         -->
-        <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
-            <div v-for="item in firstLevelItems" :key="item.path"
-                class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
-                @click="navigateTo(item.path)">
-                
-                <!-- 卡片头部 -->
-                <div class="flex items-center justify-between mb-1">
-                    <h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
-                        {{ item.title }}
-                    </h2>
-                    <span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
-                        <span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
-                    </span>
-                </div>
-
-                <!-- 子页面列表 -->
-                <div v-if="getChildrenTitles(item).length > 0" class="">
-                    <div v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)" :key="index"
-                        class="flex items-center justify-between 
-                        text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
-                         hover:text-blue-600 dark:hover:text-blue-400 
-                         transition-colors duration-200 py-1
-                         border-b border-gray-200 dark:border-gray-700 pt-2">
-                         
-                        <div class="flex items-center flex-1 min-w-0 pl-1 ">
-                            <UIcon :name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')" class="mr-2 text-gray-400" size="14" />
-                            <span class="text-base font-medium font-sans">{{ child.title }}</span>
-                        </div>
-                        <UIcon name="lucide-chevron-right" class="text-gray-400 flex-shrink-0 ml-2" size="16" />
-                    </div>
-                </div>
-            </div>
+    <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
+      <div
+        v-for="item in firstLevelItems"
+        :key="item.path"
+        class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
+        @click="navigateTo(item.path)"
+      >
+        <!-- 卡片头部 -->
+        <div class="flex items-center justify-between mb-1">
+          <h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
+            {{ item.title }}
+          </h2>
+          <span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
+            <span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
+          </span>
         </div>
+
+        <!-- 子页面列表 -->
+        <div
+          v-if="getChildrenTitles(item).length > 0"
+          class=""
+        >
+          <div
+            v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)"
+            :key="index"
+            class="flex items-center justify-between
+                        text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
+                         hover:text-blue-600 dark:hover:text-blue-400
+                         transition-colors duration-200 py-1
+                         border-b border-gray-200 dark:border-gray-700 pt-2"
+          >
+            <div class="flex items-center flex-1 min-w-0 pl-1 ">
+              <UIcon
+                :name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')"
+                class="mr-2 text-gray-400"
+                size="14"
+              />
+              <span class="text-base font-medium font-sans">{{ child.title }}</span>
+            </div>
+            <UIcon
+              name="lucide-chevron-right"
+              class="text-gray-400 flex-shrink-0 ml-2"
+              size="16"
+            />
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { ContentNavigationItem } from "@nuxt/content";
+import type { ContentNavigationItem } from '@nuxt/content'
 
-const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 // 计算属性：提取第一级数据
 const firstLevelItems = computed(() => {
-    if (!navigation?.value) return [];
-    return navigation.value
-        .filter(item => item.title && item.path)
-        .map(item => ({
-            ...item,
-            description: item.description,
-            icon: item.icon || 'lucide-book-open'
-        }));
-});
+  if (!navigation?.value) return []
+  return navigation.value
+    .filter(item => item.title && item.path)
+    .map(item => ({
+      ...item,
+      description: item.description,
+      icon: item.icon || 'lucide-book-open'
+    }))
+})
 
 // 获取子页面数量
 const getChildrenCount = (item: ContentNavigationItem) => {
-    return item.children?.length || 0;
-};
+  return item.children?.length || 0
+}
 
 // 获取子页面标题列表
 const getChildrenTitles = (item: ContentNavigationItem) => {
-    if (!item.children) return [];
-    return item.children.map(child => child.title).filter(Boolean);
-};
+  if (!item.children) return []
+  return item.children.map(child => child.title).filter(Boolean)
+}
 
 // 获取子页面数据（包含图标）
 const getChildrenWithIcons = (item: ContentNavigationItem) => {
-    if (!item.children) return [];
-    return item.children.filter(child => child.title);
-};
+  if (!item.children) return []
+  return item.children.filter(child => child.title)
+}
 
 // 获取描述信息
 const getDescription = (item: ContentNavigationItem) => {
-    if (item.children && item.children.length > 0) {
-        return `${item.children.length} 个子页面`;
-    }
-    return "文档页面";
-};
+  if (item.children && item.children.length > 0) {
+    return `${item.children.length} 个子页面`
+  }
+  return '文档页面'
+}
 
 // 导航方法
 const navigateTo = (path: string) => {
-    if (path) {
-        window.location.href = path;
-    }
-};
-</script>
\ No newline at end of file
+  if (path) {
+    window.location.href = path
+  }
+}
+</script>
diff --git a/app/components/IndexHero.vue b/app/components/IndexHero.vue
index 594d612..052e0f2 100644
--- a/app/components/IndexHero.vue
+++ b/app/components/IndexHero.vue
@@ -3,20 +3,20 @@
 </script>
 
 <template>
-    <div class="w-full top-0 left-0 bg-gray-50 dark:bg-gray-900">
-        <!-- 欢迎卡片 -->
-        <div
-            class="bg-slate-200 dark:bg-slate-600 rounded-lg border border-gray-200 dark:border-gray-700 p-2 sm:p-4 shadow-sm">
-
-            <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
-                Hi 👋, 欢迎使用简单文档系统
-            </h1>
-            <!-- 编号列表 -->
-            <div class="mt-2 text-base text-gray-700 dark:text-gray-300">
-                1. 登录网站！<br>
-                2. 创建文档，为文档添加文章！<br>
-                3. 拖拽文章标题进行排序，分享文档！
-            </div>
-        </div>
+  <div class="w-full top-0 left-0 bg-gray-50 dark:bg-gray-900">
+    <!-- 欢迎卡片 -->
+    <div
+      class="bg-slate-200 dark:bg-slate-600 rounded-lg border border-gray-200 dark:border-gray-700 p-2 sm:p-4 shadow-sm"
+    >
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
+        Hi 👋, 欢迎使用简单文档系统
+      </h1>
+      <!-- 编号列表 -->
+      <div class="mt-2 text-base text-gray-700 dark:text-gray-300">
+        1. 登录网站！<br>
+        2. 创建文档，为文档添加文章！<br>
+        3. 拖拽文章标题进行排序，分享文档！
+      </div>
     </div>
+  </div>
 </template>
diff --git a/app/components/LogoPro.vue b/app/components/LogoPro.vue
index d7d9512..8d45ca8 100644
--- a/app/components/LogoPro.vue
+++ b/app/components/LogoPro.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="h-8">
-    <NuxtLink to="/" class="flex items-center space-x-3">
+    <NuxtLink
+      to="/"
+      class="flex items-center space-x-3"
+    >
       <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
         <span class="text-white font-bold text-lg">E</span>
       </div>
diff --git a/app/components/ThemeSettings.vue b/app/components/ThemeSettings.vue
index f100de4..70cfd6f 100644
--- a/app/components/ThemeSettings.vue
+++ b/app/components/ThemeSettings.vue
@@ -8,14 +8,16 @@
     leave-from-class="translate-x-0"
     leave-to-class="translate-x-full"
   >
-    <div 
+    <div
       v-if="isOpen"
       class="fixed right-0 top-16 h-[calc(100vh-4rem)] w-full sm:w-96 bg-white dark:bg-gray-900 shadow-2xl z-40 overflow-y-auto border-l border-gray-200 dark:border-gray-700 custom-scrollbar"
     >
       <!-- 头部 -->
       <div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
         <div class="flex items-center justify-between">
-          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">页面设置</h2>
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+            页面设置
+          </h2>
           <UButton
             color="neutral"
             variant="ghost"
@@ -30,7 +32,9 @@
       <div class="p-6 space-y-8">
         <!-- 主题 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">主题</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            主题
+          </h3>
           <div class="grid grid-cols-3 gap-3">
             <UButton
               v-for="theme in themes"
@@ -47,7 +51,9 @@
 
         <!-- 字体 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">字体</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            字体
+          </h3>
           <div class="grid grid-cols-3 gap-3">
             <UButton
               v-for="font in fonts"
@@ -64,7 +70,9 @@
 
         <!-- 字号 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">字号</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            字号
+          </h3>
           <div class="grid grid-cols-5 gap-2">
             <UButton
               v-for="size in fontSizes"
@@ -81,7 +89,9 @@
 
         <!-- 主题色 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">主题色</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            主题色
+          </h3>
           <div class="grid grid-cols-2 gap-3">
             <UButton
               v-for="color in themeColors"
@@ -93,7 +103,7 @@
               @click="selectedThemeColor = color.value"
             >
               <template #leading>
-                <div 
+                <div
                   class="w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600"
                   :style="{ backgroundColor: color.color }"
                 />
@@ -105,7 +115,9 @@
 
         <!-- 自定义主题色 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">自定义主题色</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            自定义主题色
+          </h3>
           <div class="flex items-center space-x-3">
             <input
               v-model="customColor"
@@ -124,7 +136,9 @@
 
         <!-- 代码块主题 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">代码块主题</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            代码块主题
+          </h3>
           <USelect
             v-model="selectedCodeTheme"
             :options="codeThemes"
@@ -136,7 +150,9 @@
 
         <!-- 图注格式 -->
         <div>
-          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">图注格式</h3>
+          <h3 class="text-base font-medium text-gray-900 dark:text-white mb-4">
+            图注格式
+          </h3>
           <div class="grid grid-cols-2 gap-3">
             <UButton
               v-for="format in captionFormats"
@@ -204,7 +220,7 @@ const {
   selectedCaptionFormat,
   applyCustomColor,
   resetSettings
-} = useTheme();
+} = useTheme()
 
 // 监听键盘事件（只监听 ESC 键）
 onMounted(() => {
@@ -213,11 +229,11 @@ onMounted(() => {
       emit('close')
     }
   }
-  
+
   document.addEventListener('keydown', handleKeydown)
-  
+
   onUnmounted(() => {
     document.removeEventListener('keydown', handleKeydown)
   })
 })
-</script> 
\ No newline at end of file
+</script>
diff --git a/app/components/auth/login.vue b/app/components/auth/login.vue
index 266308e..8a42515 100644
--- a/app/components/auth/login.vue
+++ b/app/components/auth/login.vue
@@ -29,7 +29,7 @@ const fields = ref([
 
 <template>
   <UAuthForm
-  
+
     class="max-w-md"
     title="登录"
     description="使用社交账号或邮箱登录"
diff --git a/app/components/content/ButtonLink.vue b/app/components/content/ButtonLink.vue
index f003e00..a7f5334 100644
--- a/app/components/content/ButtonLink.vue
+++ b/app/components/content/ButtonLink.vue
@@ -1,25 +1,34 @@
 <template>
   <div class="flex flex-row items-center mt-2 mb-2">
-  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
-    <UButton :variant="variant" :size="size" :icon="icon" :trailing-icon="trailingIcon" class="min-h-10 max-h-12">
-      <slot/>
-    </UButton>
-  </NuxtLink>
-</div>
+    <NuxtLink
+      :to="to || href"
+      :target="(blank && '_blank') || target"
+    >
+      <UButton
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        :trailing-icon="trailingIcon"
+        class="min-h-10 max-h-12"
+      >
+        <slot />
+      </UButton>
+    </NuxtLink>
+  </div>
 </template>
 
 <script setup lang="ts">
-type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
 
 defineProps<{
-  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black';
-  icon?: string;
-  to?: string;
-  href?: string;
-  target?: Target;
-  trailingIcon?: string;
-  blank?: boolean;
-}>();
+  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black'
+  icon?: string
+  to?: string
+  href?: string
+  target?: Target
+  trailingIcon?: string
+  blank?: boolean
+}>()
 </script>
diff --git a/app/components/content/ColorModeSwitch.vue b/app/components/content/ColorModeSwitch.vue
index 2f8f136..0705739 100644
--- a/app/components/content/ColorModeSwitch.vue
+++ b/app/components/content/ColorModeSwitch.vue
@@ -7,7 +7,7 @@ const isLight = computed({
   },
   set(_isLight) {
     colorMode.preference = _isLight ? 'light' : 'dark'
-  },
+  }
 })
 </script>
 
@@ -24,7 +24,7 @@ const isLight = computed({
         :ui="{
           base: 'w-70 h-35 rounded-lg rotate-90 data-[state=checked]:bg-[var(--ui-color-neutral-200)]',
           thumb: 'data-[state=checked]:translate-x-35 data-[state=checked]:rtl:-translate-x-35 rounded-lg size-34',
-          icon: 'rotate-270 size-8',
+          icon: 'rotate-270 size-8'
         }"
         @click="isDark = !isDark"
       />
diff --git a/app/components/content/ECard.vue b/app/components/content/ECard.vue
index f4587c2..fc07f82 100644
--- a/app/components/content/ECard.vue
+++ b/app/components/content/ECard.vue
@@ -1,14 +1,19 @@
 <template>
-      <UPageCard :title="title"  :description="description" :spotlight="spotlight" :icon="icon" class="">
-        <slot/>
-        <NuxtImg
-        v-if="img"
-        :src="img"
-        class="w-full"
-      />
-      <span> {{ content }} </span>
-      </UPageCard>
-      
+  <UPageCard
+    :title="title"
+    :description="description"
+    :spotlight="spotlight"
+    :icon="icon"
+    class=""
+  >
+    <slot />
+    <NuxtImg
+      v-if="img"
+      :src="img"
+      class="w-full"
+    />
+    <span> {{ content }} </span>
+  </UPageCard>
 </template>
 
   <!-- ::card
@@ -21,20 +26,18 @@ Image Card
 #content
 Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
 :: -->
-  
-  <script setup lang="ts">
 
-  const {
-content="",
+<script setup lang="ts">
+const {
+  content = ''
 
-} =defineProps<{
-    title?: string;
-    content?: string;
-    img?: string;
-    icon?: string;
-    description?: string;
-    spotlight?:boolean;
-    slot?:string;
-  }>();
-  </script>
-  
\ No newline at end of file
+} = defineProps<{
+  title?: string
+  content?: string
+  img?: string
+  icon?: string
+  description?: string
+  spotlight?: boolean
+  slot?: string
+}>()
+</script>
diff --git a/app/components/content/ETabs.vue b/app/components/content/ETabs.vue
index 777076b..af3d5e0 100644
--- a/app/components/content/ETabs.vue
+++ b/app/components/content/ETabs.vue
@@ -1,6 +1,14 @@
 <template>
-  <UTabs :items="tabItems" class="w-full" :unmount-on-hide="false" variant="link">
-    <template v-for="item in tabItems" #[item.slot]="{ item: slotItem }">
+  <UTabs
+    :items="tabItems"
+    class="w-full"
+    :unmount-on-hide="false"
+    variant="link"
+  >
+    <template
+      v-for="item in tabItems"
+      #[item.slot]="{ item: slotItem }"
+    >
       <div class="mt-4">
         <component :is="getSlotContent(slotItem)" />
       </div>
@@ -38,4 +46,4 @@ function getSlotContent(item: TabsItem) {
   if (!item.slot) return null
   return slotContents.value[item.slot]
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/app/components/content/FileTree.vue b/app/components/content/FileTree.vue
index 400c59d..08ad80e 100644
--- a/app/components/content/FileTree.vue
+++ b/app/components/content/FileTree.vue
@@ -1,9 +1,16 @@
 <template>
   <UPage class="mt-4 mb-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-300 dark:border-gray-700">
-    <div v-if="title" class="flex items-center font-mono text-base m-3 text-gray-700 dark:text-gray-300 rounded-xl ">
-      
-      <Icon v-if="icon" :name="icon" class="mr-2" size="20" />
-      
+    <div
+      v-if="title"
+      class="flex items-center font-mono text-base m-3 text-gray-700 dark:text-gray-300 rounded-xl "
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mr-2"
+        size="20"
+      />
+
       <span>{{ title }}</span>
     </div>
 
@@ -23,7 +30,7 @@
             />
           </div>
         </div>
-        
+
         <!-- 服务端渲染时的占位符 -->
         <template #fallback>
           <div class="space-y-1">
@@ -33,8 +40,11 @@
               class="file-tree-item"
             >
               <div class="flex items-center py-1 px-2">
-                <div class="flex items-center" :style="{ marginLeft: '0px' }">
-                  <Icon 
+                <div
+                  class="flex items-center"
+                  :style="{ marginLeft: '0px' }"
+                >
+                  <Icon
                     v-if="showIcon"
                     :name="item.icon || 'lucide-file'"
                     class="mr-2 text-gray-500 w-4 h-4"
@@ -45,7 +55,7 @@
                       'text-yellow-500': item.icon?.includes('json')
                     }"
                   />
-                  <span 
+                  <span
                     class="text-sm font-mono"
                     :class="{
                       'font-semibold': item.isFolder,
@@ -61,38 +71,38 @@
         </template>
       </ClientOnly>
     </div>
-</UPage>
+  </UPage>
 </template>
 
 <script setup lang="ts">
 type InputTreeItem = string | {
-  [key: string]: InputTreeItem[];
-};
+  [key: string]: InputTreeItem[]
+}
 
-type FileTreeItemDiff = 'none' | 'addition' | 'deletion';
+type FileTreeItemDiff = 'none' | 'addition' | 'deletion'
 
 interface FileTreeItem {
-  title: string;
-  icon?: string;
-  children?: FileTreeItem[];
-  highlighted?: boolean;
-  diff?: FileTreeItemDiff;
-  isFolder?: boolean;
+  title: string
+  icon?: string
+  children?: FileTreeItem[]
+  highlighted?: boolean
+  diff?: FileTreeItemDiff
+  isFolder?: boolean
 }
 
 const {
   tree,
   autoSlash = true,
   showArrow = false,
-  showIcon = true,
+  showIcon = true
 } = defineProps<{
-  title?: string;
-  icon?: string;
-  autoSlash?: boolean;
-  showArrow?: boolean;
-  showIcon?: boolean;
-  tree: InputTreeItem[];
-}>();
+  title?: string
+  icon?: string
+  autoSlash?: boolean
+  showArrow?: boolean
+  showIcon?: boolean
+  tree: InputTreeItem[]
+}>()
 
 // 默认图标映射
 const defaultIcons = {
@@ -103,38 +113,38 @@ const defaultIcons = {
   json: 'simple-icons-json',
   folder: 'lucide-folder',
   file: 'lucide-file'
-};
+}
 
 function getIcon(filename: string, type: 'folder' | 'file'): string {
-  if (filename === '...') return 'lucide-more-horizontal';
-  if (filename.endsWith('/')) return defaultIcons.folder;
+  if (filename === '...') return 'lucide-more-horizontal'
+  if (filename.endsWith('/')) return defaultIcons.folder
+
+  const parts = filename.split('.')
+  const extension = parts.length > 1 ? parts[parts.length - 1]?.toLowerCase() || '' : ''
 
-  const parts = filename.split('.');
-  const extension = parts.length > 1 ? parts[parts.length - 1]?.toLowerCase() || '' : '';
-  
   // 根据扩展名返回对应图标
   switch (extension) {
-    case 'vue': return defaultIcons.vue;
-    case 'ts': return defaultIcons.ts;
-    case 'js': return defaultIcons.js;
-    case 'md': return defaultIcons.md;
-    case 'json': return defaultIcons.json;
-    default: return type === 'file' ? defaultIcons.file : defaultIcons.folder;
+    case 'vue': return defaultIcons.vue
+    case 'ts': return defaultIcons.ts
+    case 'js': return defaultIcons.js
+    case 'md': return defaultIcons.md
+    case 'json': return defaultIcons.json
+    default: return type === 'file' ? defaultIcons.file : defaultIcons.folder
   }
 }
 
 function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[]): FileTreeItem {
-  let title = key;
-  let highlighted = false;
-  
+  let title = key
+  let highlighted = false
+
   if (title.startsWith('^') && title.endsWith('^')) {
-    title = title.substring(1, title.length - 1);
-    highlighted = true;
+    title = title.substring(1, title.length - 1)
+    highlighted = true
   }
 
-  let diff: FileTreeItemDiff = 'none';
-  if (title.startsWith('+')) diff = 'addition';
-  else if (title.startsWith('-')) diff = 'deletion';
+  let diff: FileTreeItemDiff = 'none'
+  if (title.startsWith('+')) diff = 'addition'
+  else if (title.startsWith('-')) diff = 'deletion'
 
   if (type === 'file') {
     return {
@@ -143,7 +153,7 @@ function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[
       highlighted,
       diff,
       isFolder: false
-    };
+    }
   } else {
     return {
       title: `${title}${autoSlash ? '/' : ''}`,
@@ -152,35 +162,35 @@ function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[
       highlighted,
       diff,
       isFolder: true
-    };
+    }
   }
 }
 
 function getTree(tree: InputTreeItem[]): FileTreeItem[] {
-  const res: FileTreeItem[] = [];
+  const res: FileTreeItem[] = []
 
   for (const item of tree) {
     if (typeof item === 'string') {
-      res.push(getItem(item, 'file'));
+      res.push(getItem(item, 'file'))
     } else if (typeof item === 'object' && item !== null) {
       for (const key of Object.keys(item)) {
-        const children = (item as Record<string, InputTreeItem[]>)[key];
+        const children = (item as Record<string, InputTreeItem[]>)[key]
         if (children) {
-          res.push(getItem(key, 'folder', children));
+          res.push(getItem(key, 'folder', children))
         }
       }
     }
   }
 
-  return res;
+  return res
 }
 
 const parsedTree = computed(() => {
-  return getTree(tree);
-});
+  return getTree(tree)
+})
 
 // 使用 provide/inject 来管理展开状态
-const expandedState = ref(new Set<string>());
+const expandedState = ref(new Set<string>())
 
-provide('expandedState', expandedState);
+provide('expandedState', expandedState)
 </script>
diff --git a/app/components/content/FileTreeItem.vue b/app/components/content/FileTreeItem.vue
index 7b6cf42..56e3206 100644
--- a/app/components/content/FileTreeItem.vue
+++ b/app/components/content/FileTreeItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="file-tree-item">
-    <div 
+    <div
       class="flex items-center py-1 px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
       :class="{
         'bg-blue-50 dark:bg-blue-900/20': item.highlighted,
@@ -10,18 +10,24 @@
       @click="toggleFolder"
     >
       <!-- 缩进 -->
-      <div class="flex items-center" :style="{ marginLeft: level * 16 + 'px' }">
+      <div
+        class="flex items-center"
+        :style="{ marginLeft: level * 16 + 'px' }"
+      >
         <!-- 箭头（仅文件夹且有子项时显示） -->
-        <Icon 
+        <Icon
           v-if="showArrow && item.isFolder && item.children && item.children.length > 0"
           :name="isExpanded ? 'lucide-chevron-down' : 'lucide-chevron-right'"
           class="mr-1 text-gray-400 w-4 h-4 transition-transform"
           :class="{ 'rotate-90': isExpanded }"
         />
-        <div v-else-if="showArrow" class="w-4 mr-1"></div>
-        
+        <div
+          v-else-if="showArrow"
+          class="w-4 mr-1"
+        />
+
         <!-- 图标 -->
-        <Icon 
+        <Icon
           v-if="showIcon"
           :name="item.icon || 'lucide-file'"
           class="mr-2 text-gray-500 w-4 h-4"
@@ -32,9 +38,9 @@
             'text-yellow-500': item.icon?.includes('json')
           }"
         />
-        
+
         <!-- 标题 -->
-        <span 
+        <span
           class="text-sm font-mono"
           :class="{
             'font-semibold': item.isFolder,
@@ -47,7 +53,10 @@
     </div>
 
     <!-- 子项 -->
-    <div v-if="item.children && item.children.length > 0 && isExpanded" class="ml-4">
+    <div
+      v-if="item.children && item.children.length > 0 && isExpanded"
+      class="ml-4"
+    >
       <FileTreeItem
         v-for="child in item.children"
         :key="child.title"
@@ -61,48 +70,48 @@
 </template>
 
 <script setup lang="ts">
-type FileTreeItemDiff = 'none' | 'addition' | 'deletion';
+type FileTreeItemDiff = 'none' | 'addition' | 'deletion'
 
 interface FileTreeItem {
-  title: string;
-  icon?: string;
-  children?: FileTreeItem[];
-  highlighted?: boolean;
-  diff?: FileTreeItemDiff;
-  isFolder?: boolean;
+  title: string
+  icon?: string
+  children?: FileTreeItem[]
+  highlighted?: boolean
+  diff?: FileTreeItemDiff
+  isFolder?: boolean
 }
 
 const props = defineProps<{
-  item: FileTreeItem;
-  level: number;
-  showArrow: boolean;
-  showIcon: boolean;
-}>();
+  item: FileTreeItem
+  level: number
+  showArrow: boolean
+  showIcon: boolean
+}>()
 
-const expandedState = inject('expandedState', ref(new Set<string>()));
-const itemKey = computed(() => `${props.item.title}-${props.level}`);
+const expandedState = inject('expandedState', ref(new Set<string>()))
+const itemKey = computed(() => `${props.item.title}-${props.level}`)
 
 const isExpanded = computed({
   get: () => expandedState.value.has(itemKey.value),
   set: (value: boolean) => {
     if (value) {
-      expandedState.value.add(itemKey.value);
+      expandedState.value.add(itemKey.value)
     } else {
-      expandedState.value.delete(itemKey.value);
+      expandedState.value.delete(itemKey.value)
     }
   }
-});
+})
 
 // 初始化时展开所有文件夹
 onMounted(() => {
   if (props.item.isFolder && props.item.children && props.item.children.length > 0) {
-    isExpanded.value = true;
+    isExpanded.value = true
   }
-});
+})
 
 function toggleFolder() {
   if (props.item.isFolder && props.item.children && props.item.children.length > 0) {
-    isExpanded.value = !isExpanded.value;
+    isExpanded.value = !isExpanded.value
   }
 }
-</script> 
\ No newline at end of file
+</script>
diff --git a/app/components/content/Playground.vue b/app/components/content/Playground.vue
index 30557e5..b49f18b 100644
--- a/app/components/content/Playground.vue
+++ b/app/components/content/Playground.vue
@@ -7,7 +7,10 @@
       sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
       class="w-full h-full min-h-[600px] overflow-hidden rounded-md"
     />
-    <USkeleton v-else class="w-full min-h-[600px] rounded-md" />
+    <USkeleton
+      v-else
+      class="w-full min-h-[600px] rounded-md"
+    />
   </div>
 </template>
 
@@ -19,31 +22,31 @@ const {
   branch = 'main',
   dir = '',
   file,
-  title = 'Playground',
+  title = 'Playground'
 } = defineProps<{
-  provider: 'stackblitz' | 'codesandbox';
-  id?: string;
-  repo?: string;
-  branch?: string;
-  dir?: string;
-  file: string;
-  title?: string;
-}>();
+  provider: 'stackblitz' | 'codesandbox'
+  id?: string
+  repo?: string
+  branch?: string
+  dir?: string
+  file: string
+  title?: string
+}>()
 
-const url = ref('');
-const colorMode = useColorMode();
+const url = ref('')
+const colorMode = useColorMode()
 
 onMounted(() => {
   if (provider === 'stackblitz') {
     if (repo)
-      url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`;
+      url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`
     else if (id)
-      url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`;
+      url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`
   } else if (provider === 'codesandbox') {
     if (repo)
-      url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`;
+      url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`
     else if (id)
-      url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`;
+      url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`
   }
-});
+})
 </script>
diff --git a/app/components/content/ProseH1.vue b/app/components/content/ProseH1.vue
index eaa3943..2be2362 100644
--- a/app/components/content/ProseH1.vue
+++ b/app/components/content/ProseH1.vue
@@ -1,5 +1,8 @@
 <template>
-  <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+  <h1
+    :id
+    class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+  >
     <NuxtLink
       v-if="generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
 </script>
diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue
index 3cc7cfe..55f8124 100644
--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -1,5 +1,8 @@
 <template>
-  <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+  <h2
+    :id
+    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10"
+  >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
 </script>
diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue
index 4dadb1d..6c40ea9 100644
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -1,5 +1,8 @@
 <template>
-  <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+  <h3
+    :id
+    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8"
+  >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
 </script>
diff --git a/app/components/content/ProseH4.vue b/app/components/content/ProseH4.vue
index cf17fcc..3e33cc1 100644
--- a/app/components/content/ProseH4.vue
+++ b/app/components/content/ProseH4.vue
@@ -1,5 +1,8 @@
 <template>
-  <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h4
+    :id
+    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
 </script>
diff --git a/app/components/content/ProseH5.vue b/app/components/content/ProseH5.vue
index 87960a6..cbea9d2 100644
--- a/app/components/content/ProseH5.vue
+++ b/app/components/content/ProseH5.vue
@@ -1,5 +1,8 @@
 <template>
-  <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h5
+    :id
+    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
 </script>
diff --git a/app/components/content/ProseH6.vue b/app/components/content/ProseH6.vue
index 07376e7..63f6999 100644
--- a/app/components/content/ProseH6.vue
+++ b/app/components/content/ProseH6.vue
@@ -1,5 +1,8 @@
 <template>
-  <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h6
+    :id
+    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()
 
-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
 </script>
diff --git a/app/components/content/ReadMore.vue b/app/components/content/ReadMore.vue
index 73c0d3c..b483c9c 100644
--- a/app/components/content/ReadMore.vue
+++ b/app/components/content/ReadMore.vue
@@ -1,10 +1,20 @@
 <template>
   <UPage>
-    <NuxtLink v-if="to" :to="to">
-      <UAlert :icon :title :color="color" :variant="variant" :description="to"
-        class="mt-2 mb-3 text-black dark:text-white" :ui="{
+    <NuxtLink
+      v-if="to"
+      :to="to"
+    >
+      <UAlert
+        :icon
+        :title
+        :color="color"
+        :variant="variant"
+        :description="to"
+        class="mt-2 mb-3 text-black dark:text-white"
+        :ui="{
           icon: iconSize
-        }">
+        }"
+      >
         <slot />
       </UAlert>
     </NuxtLink>
@@ -12,20 +22,18 @@
 </template>
 
 <script setup lang="ts">
-
 const {
   variant = 'subtle',
   title,
   icon = 'lucide:bookmark',
-  color = 'primary',
+  color = 'primary'
 } = defineProps<{
-  color?: 'primary' | 'error' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral';
-  description?: string;
-  title?: string;
-  to?: string;
-  icon?: string;
-  iconSize?: string;
-  variant?: 'subtle' | 'solid' | 'outline' | 'soft';
-}>();
-
+  color?: 'primary' | 'error' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral'
+  description?: string
+  title?: string
+  to?: string
+  icon?: string
+  iconSize?: string
+  variant?: 'subtle' | 'solid' | 'outline' | 'soft'
+}>()
 </script>
diff --git a/app/components/content/SmartIcon.vue b/app/components/content/SmartIcon.vue
index 048e768..2cf8dd1 100644
--- a/app/components/content/SmartIcon.vue
+++ b/app/components/content/SmartIcon.vue
@@ -1,6 +1,10 @@
 <template>
   <!-- Iconify Icons -->
-  <Icon v-if="checkIcon(name)" :name :size />
+  <Icon
+    v-if="checkIcon(name)"
+    :name
+    :size
+  />
   <!-- Emojis -->
   <span
     v-else-if="/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name)"
@@ -16,17 +20,17 @@
 </template>
 
 <script setup lang="ts">
-import { stringToIcon, validateIconName } from '@iconify/utils';
+import { stringToIcon, validateIconName } from '@iconify/utils'
 
 const { size = 16 } = defineProps<{
-  name: string;
-  size?: number;
-}>();
+  name: string
+  size?: number
+}>()
 
 function checkIcon(name: string): boolean {
   if (name.includes('http'))
-    return false;
+    return false
 
-  return validateIconName(stringToIcon(name));
+  return validateIconName(stringToIcon(name))
 }
 </script>
diff --git a/app/components/content/Stack.vue b/app/components/content/Stack.vue
index 67a8e9a..7de26bf 100644
--- a/app/components/content/Stack.vue
+++ b/app/components/content/Stack.vue
@@ -1,13 +1,12 @@
 <template>
   <UPageCard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4  dark:divide-gray-700 shadow-sm ">
-      <div
-        v-for="(slot, i) in slotItems"
-        :key="i"
-        class=""
-      >
-        <component :is="slot" />
-      </div>
-
+    <div
+      v-for="(slot, i) in slotItems"
+      :key="i"
+      class=""
+    >
+      <component :is="slot" />
+    </div>
   </UPageCard>
 </template>
 
diff --git a/app/components/docs/DocsAsideLeftTop.vue b/app/components/docs/DocsAsideLeftTop.vue
index a3be514..e96d688 100644
--- a/app/components/docs/DocsAsideLeftTop.vue
+++ b/app/components/docs/DocsAsideLeftTop.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
+
 const route = useRoute()
 const items = ref<NavigationMenuItem[][]>([
   [
     {
       label: 'Guide',
-      icon: 'lucide-book-open',
+      icon: 'lucide-book-open'
     },
     {
       label: 'Composables',
@@ -74,7 +75,7 @@ const items = ref<NavigationMenuItem[][]>([
         }
       ]
     }
-  ],
+  ]
   // [
   //   {
   //     label: 'GitHub',
@@ -94,5 +95,10 @@ const items = ref<NavigationMenuItem[][]>([
 </script>
 
 <template>
-  <UNavigationMenu orientation="vertical" :items="items" class="w-full justify-center" color="primary" />
+  <UNavigationMenu
+    orientation="vertical"
+    :items="items"
+    class="w-full justify-center"
+    color="primary"
+  />
 </template>
diff --git a/app/components/docs/DocsPageHeaderLinks.vue b/app/components/docs/DocsPageHeaderLinks.vue
index ba40b97..9190543 100644
--- a/app/components/docs/DocsPageHeaderLinks.vue
+++ b/app/components/docs/DocsPageHeaderLinks.vue
@@ -17,28 +17,28 @@ const items = [
       toast.add({
         title: 'Markdown link copied to clipboard',
         icon: 'lucide-check-circle',
-        color: 'success',
+        color: 'success'
       })
-    },
+    }
   },
   {
     label: 'View as Markdown',
     icon: 'simple-icons:markdown',
     target: '_blank',
-    to: markdownLink.value,
+    to: markdownLink.value
   },
   {
     label: 'Open in ChatGPT',
     icon: 'simple-icons:openai',
     target: '_blank',
-    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`
   },
   {
     label: 'Open in Claude',
     icon: 'simple-icons:anthropic',
     target: '_blank',
-    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
-  },
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`
+  }
 ]
 </script>
 
@@ -50,7 +50,7 @@ const items = [
       color="neutral"
       variant="outline"
       :ui="{
-        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5'],
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5']
       }"
       @click="copy(markdownLink)"
     />
@@ -61,10 +61,10 @@ const items = [
       :content="{
         align: 'end',
         side: 'bottom',
-        sideOffset: 8,
+        sideOffset: 8
       }"
       :ui="{
-        content: 'w-48',
+        content: 'w-48'
       }"
     >
       <UButton
diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts
index aaf838b..9c6003c 100644
--- a/app/composables/useTheme.ts
+++ b/app/composables/useTheme.ts
@@ -41,20 +41,20 @@
  * </template>
  * ```
  */
-import { ref, watch } from 'vue';
+import { ref, watch } from 'vue'
 
 // 定义各种选项
 const themes = [
   { label: '经典', value: 'classic' },
   { label: '优雅', value: 'elegant' },
   { label: '简洁', value: 'minimal' }
-];
+]
 
 const fonts = [
   { label: '无衬线', value: 'sans-serif' },
   { label: '衬线', value: 'serif' },
   { label: '等宽', value: 'monospace' }
-];
+]
 
 const fontSizes = [
   { label: '更小', value: 'xs' },
@@ -62,7 +62,7 @@ const fontSizes = [
   { label: '推荐', value: 'base' },
   { label: '稍大', value: 'lg' },
   { label: '更大', value: 'xl' }
-];
+]
 
 const themeColors = [
   { label: '经典蓝', value: 'blue', color: '#3B82F6' },
@@ -76,7 +76,7 @@ const themeColors = [
   { label: '石墨黑', value: 'gray', color: '#6B7280' },
   { label: '雾烟灰', value: 'slate', color: '#64748B' },
   { label: '樱花粉', value: 'pink', color: '#EC4899' }
-];
+]
 
 const codeThemes = [
   { label: 'dark', value: 'dark' },
@@ -85,14 +85,14 @@ const codeThemes = [
   { label: 'github-light', value: 'github-light' },
   { label: 'one-dark-pro', value: 'one-dark-pro' },
   { label: 'material-theme', value: 'material-theme' }
-];
+]
 
 const captionFormats = [
   { label: 'title 优先', value: 'title' },
   { label: 'alt 优先', value: 'alt' },
   { label: '只显示 title', value: 'title-only' },
   { label: '只显示 alt', value: 'alt-only' }
-];
+]
 
 // 默认设置
 const defaultSettings = {
@@ -102,92 +102,92 @@ const defaultSettings = {
   themeColor: 'blue',
   codeTheme: 'dark',
   captionFormat: 'none'
-};
+}
 
 // 响应式状态
-const selectedTheme = ref<string>(defaultSettings.theme);
-const selectedFont = ref<string>(defaultSettings.font);
-const selectedFontSize = ref<string>(defaultSettings.fontSize);
-const selectedThemeColor = ref<string>(defaultSettings.themeColor);
-const customColor = ref<string>('#3B82F6');
-const selectedCodeTheme = ref<string>(defaultSettings.codeTheme);
-const selectedCaptionFormat = ref<string>(defaultSettings.captionFormat);
+const selectedTheme = ref<string>(defaultSettings.theme)
+const selectedFont = ref<string>(defaultSettings.font)
+const selectedFontSize = ref<string>(defaultSettings.fontSize)
+const selectedThemeColor = ref<string>(defaultSettings.themeColor)
+const customColor = ref<string>('#3B82F6')
+const selectedCodeTheme = ref<string>(defaultSettings.codeTheme)
+const selectedCaptionFormat = ref<string>(defaultSettings.captionFormat)
 
 // 这是一个单例，确保在整个应用中只有一个主题状态实例
-let isInitialized = false;
+let isInitialized = false
 
 export function useTheme() {
-  const colorMode = useColorMode();
+  const colorMode = useColorMode()
 
   const initializeTheme = () => {
     if (import.meta.client && !isInitialized) {
-      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme;
-      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font;
-      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize;
-      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor;
-      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme;
-      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat;
-      
-      // 找到自定义颜色对应的主题色值
-      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6';
-      customColor.value = localStorage.getItem('app-custom-color') || initialColor;
+      selectedTheme.value = localStorage.getItem('app-theme') || defaultSettings.theme
+      selectedFont.value = localStorage.getItem('app-font') || defaultSettings.font
+      selectedFontSize.value = localStorage.getItem('app-font-size') || defaultSettings.fontSize
+      selectedThemeColor.value = localStorage.getItem('app-theme-color') || defaultSettings.themeColor
+      selectedCodeTheme.value = localStorage.getItem('app-code-theme') || defaultSettings.codeTheme
+      selectedCaptionFormat.value = localStorage.getItem('app-caption-format') || defaultSettings.captionFormat
 
-      applyThemeVariables();
-      isInitialized = true;
-      console.log('主题已初始化');
+      // 找到自定义颜色对应的主题色值
+      const initialColor = themeColors.find(c => c.value === selectedThemeColor.value)?.color || '#3B82F6'
+      customColor.value = localStorage.getItem('app-custom-color') || initialColor
+
+      applyThemeVariables()
+      isInitialized = true
+      console.log('主题已初始化')
     }
-  };
-  
+  }
+
   const applyThemeVariables = () => {
     if (import.meta.client) {
-      const root = document.documentElement;
-      
+      const root = document.documentElement
+
       // 颜色映射到 @nuxt/ui 支持的颜色
       const colorMapping: { [key: string]: string } = {
-        'blue': 'blue',
-        'emerald': 'emerald', 
-        'orange': 'orange',
-        'yellow': 'yellow',
-        'violet': 'violet',
-        'sky': 'sky',
-        'rose': 'rose',
-        'lime': 'lime',
-        'gray': 'gray',
-        'slate': 'slate',
-        'pink': 'pink'
-      };
-  
+        blue: 'blue',
+        emerald: 'emerald',
+        orange: 'orange',
+        yellow: 'yellow',
+        violet: 'violet',
+        sky: 'sky',
+        rose: 'rose',
+        lime: 'lime',
+        gray: 'gray',
+        slate: 'slate',
+        pink: 'pink'
+      }
+
       // 使用 @nuxt/ui 的主题系统
       if (selectedThemeColor.value !== 'custom') {
-        const mappedColor = colorMapping[selectedThemeColor.value];
+        const mappedColor = colorMapping[selectedThemeColor.value]
         if (mappedColor) {
-          const appConfig = useAppConfig();
-          if (!appConfig.ui.colors) appConfig.ui.colors = {};
-          appConfig.ui.colors.primary = mappedColor;
+          const appConfig = useAppConfig()
+          if (!appConfig.ui.colors) appConfig.ui.colors = {}
+          appConfig.ui.colors.primary = mappedColor
         }
       }
-      
+
       // 字体设置保持不变
       const fontMapping = {
         'sans-serif': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
         'serif': 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
         'monospace': 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
-      };
-      root.style.setProperty('--font-family', fontMapping[selectedFont.value as keyof typeof fontMapping]);
-      
+      }
+      root.style.setProperty('--font-family', fontMapping[selectedFont.value as keyof typeof fontMapping])
+
       const fontSizeMapping = {
-        'xs': '0.75rem', 'sm': '0.875rem', 'base': '1rem', 'lg': '1.125rem', 'xl': '1.25rem'
-      };
-      root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping]);
-      
-      root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal');
-      root.classList.add(`theme-${selectedTheme.value}`);
+        xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem'
+      }
+      root.style.setProperty('--font-size-base', fontSizeMapping[selectedFontSize.value as keyof typeof fontSizeMapping])
+
+      root.classList.remove('theme-classic', 'theme-elegant', 'theme-minimal')
+      root.classList.add(`theme-${selectedTheme.value}`)
     }
-  };
+  }
 
   /**
    * 应用自定义主色调
-   * 
+   *
    * Nuxt UI v3 不支持运行时动态自定义颜色，因此我们使用 CSS 变量覆盖的方法：
    * 1. 保持 Nuxt UI 使用有效的颜色系统（这里使用 'blue' 作为基础）
    * 2. 通过 CSS 变量 --ui-primary 覆盖实际显示的颜色
@@ -195,62 +195,62 @@ export function useTheme() {
    */
   const applyCustomColor = () => {
     if (import.meta.client) {
-      selectedThemeColor.value = 'custom';
-      const root = document.documentElement;
-      
+      selectedThemeColor.value = 'custom'
+      const root = document.documentElement
+
       // 使用 Nuxt UI v3 推荐的 CSS 变量覆盖方法
       // 设置主色调的 CSS 变量，这会影响所有使用 primary 颜色的组件
-      root.style.setProperty('--ui-primary', customColor.value);
-      
+      root.style.setProperty('--ui-primary', customColor.value)
+
       // 保持 Nuxt UI 使用有效的颜色系统
-      const appConfig = useAppConfig();
-      if (!appConfig.ui.colors) appConfig.ui.colors = {};
-      appConfig.ui.colors.primary = 'blue'; // 使用有效的颜色名称作为基础
+      const appConfig = useAppConfig()
+      if (!appConfig.ui.colors) appConfig.ui.colors = {}
+      appConfig.ui.colors.primary = 'blue' // 使用有效的颜色名称作为基础
     }
-  };
+  }
 
   const resetSettings = () => {
-    selectedTheme.value = defaultSettings.theme;
-    selectedFont.value = defaultSettings.font;
-    selectedFontSize.value = defaultSettings.fontSize;
-    selectedThemeColor.value = defaultSettings.themeColor;
-    const defaultColor = themeColors.find(c => c.value === defaultSettings.themeColor)?.color || '#3B82F6';
-    customColor.value = defaultColor;
-    selectedCodeTheme.value = defaultSettings.codeTheme;
-    selectedCaptionFormat.value = defaultSettings.captionFormat;
-    
-    colorMode.preference = 'system';
-    
-    applyThemeVariables();
-  };
+    selectedTheme.value = defaultSettings.theme
+    selectedFont.value = defaultSettings.font
+    selectedFontSize.value = defaultSettings.fontSize
+    selectedThemeColor.value = defaultSettings.themeColor
+    const defaultColor = themeColors.find(c => c.value === defaultSettings.themeColor)?.color || '#3B82F6'
+    customColor.value = defaultColor
+    selectedCodeTheme.value = defaultSettings.codeTheme
+    selectedCaptionFormat.value = defaultSettings.captionFormat
+
+    colorMode.preference = 'system'
+
+    applyThemeVariables()
+  }
 
   // 监听预设主题色的变化，并同步更新自定义颜色选择器的值
   watch(selectedThemeColor, (newThemeColor) => {
     if (newThemeColor !== 'custom') {
-      const colorObject = themeColors.find(c => c.value === newThemeColor);
+      const colorObject = themeColors.find(c => c.value === newThemeColor)
       if (colorObject) {
-        customColor.value = colorObject.color;
-        //应用颜色
-        applyCustomColor();
+        customColor.value = colorObject.color
+        // 应用颜色
+        applyCustomColor()
       }
     }
-  });
+  })
 
   watch([selectedTheme, selectedFont, selectedFontSize, selectedThemeColor, selectedCodeTheme, selectedCaptionFormat, customColor], () => {
-    applyThemeVariables();
-    
+    applyThemeVariables()
+
     if (import.meta.client) {
-      localStorage.setItem('app-theme', selectedTheme.value);
-      localStorage.setItem('app-font', selectedFont.value);
-      localStorage.setItem('app-font-size', selectedFontSize.value);
-      localStorage.setItem('app-theme-color', selectedThemeColor.value);
-      localStorage.setItem('app-code-theme', selectedCodeTheme.value);
-      localStorage.setItem('app-caption-format', selectedCaptionFormat.value);
+      localStorage.setItem('app-theme', selectedTheme.value)
+      localStorage.setItem('app-font', selectedFont.value)
+      localStorage.setItem('app-font-size', selectedFontSize.value)
+      localStorage.setItem('app-theme-color', selectedThemeColor.value)
+      localStorage.setItem('app-code-theme', selectedCodeTheme.value)
+      localStorage.setItem('app-caption-format', selectedCaptionFormat.value)
       if (selectedThemeColor.value === 'custom') {
-        localStorage.setItem('app-custom-color', customColor.value);
+        localStorage.setItem('app-custom-color', customColor.value)
       }
     }
-  });
+  })
 
   return {
     initializeTheme,
@@ -270,5 +270,5 @@ export function useTheme() {
     applyCustomColor,
     resetSettings,
     colorMode
-  };
-} 
\ No newline at end of file
+  }
+}
diff --git a/app/error.vue b/app/error.vue
index 0de777a..67b2acf 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -1,37 +1,37 @@
 <script setup lang="ts">
-import type { NuxtError } from "#app";
+import type { NuxtError } from '#app'
 
 definePageMeta({
-  layout: "default",
-});
+  layout: 'default'
+})
 
 defineProps<{
-  error: NuxtError;
-}>();
+  error: NuxtError
+}>()
 
 useHead({
   htmlAttrs: {
-    lang: "zh-CN",
-  },
-});
+    lang: 'zh-CN'
+  }
+})
 
 useSeoMeta({
-  title: "Page not found",
-  description: "We are sorry but this page could not be found.",
-});
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
 
-const { data: navigation } = await useAsyncData("navigation", () =>
-  queryCollectionNavigation("docs"),
-);
+const { data: navigation } = await useAsyncData('navigation', () =>
+  queryCollectionNavigation('docs')
+)
 const { data: files } = useLazyAsyncData(
-  "search",
-  () => queryCollectionSearchSections("docs"),
+  'search',
+  () => queryCollectionSearchSections('docs'),
   {
-    server: false,
-  },
-);
+    server: false
+  }
+)
 
-provide("navigation", navigation);
+provide('navigation', navigation)
 </script>
 
 <template>
@@ -43,7 +43,7 @@ provide("navigation", navigation);
       :clear="{
         size: 'xl',
         icon: 'lucide-arrow-left',
-        class: 'rounded-full',
+        class: 'rounded-full'
       }"
       redirect="/"
     />
@@ -51,7 +51,10 @@ provide("navigation", navigation);
     <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
     </ClientOnly>
   </UApp>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 42ff622..4627b58 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
     <!-- 移动端遮罩层 -->
-    <div 
-      v-if="isSidebarOpen" 
-      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden" 
+    <div
+      v-if="isSidebarOpen"
+      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden"
       @click="isSidebarOpen = false"
     />
-    
+
     <!-- 侧边栏 -->
-    <AppSidebar 
-      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out" 
+    <AppSidebar
+      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
       :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
     />
-    
+
     <!-- Right Content Area -->
     <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
       <!-- Fixed Header -->
-      <AppHeader 
+      <AppHeader
         :is-sidebar-open="isSidebarOpen"
         :toggle-sidebar="toggleSidebar"
       />
-      
+
       <!-- Main Content -->
       <UMain class="flex-1 overflow-y-auto">
         <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <slot />
         </div>
       </UMain>
-      
+
       <!-- Footer -->
       <AppFooter />
     </div>
@@ -35,9 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { watch } from 'vue'
 
 const isSidebarOpen = ref(false)
 
@@ -45,6 +44,4 @@ const isSidebarOpen = ref(false)
 const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value
 }
-
-
-</script>
\ No newline at end of file
+</script>
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index 46ac2b3..09d05fb 100644
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -24,7 +24,7 @@ const { data: page } = await useAsyncData(
   {
     default: () => null // 提供默认值
   }
-);
+)
 
 if (!page.value) {
   throw createError({
@@ -32,10 +32,9 @@ if (!page.value) {
     statusMessage: '文档不存在',
     message: '当前页面不存在，请您检查路径是否正确',
     fatal: true
-  });
+  })
 }
 
-
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
   return queryCollectionItemSurroundings('docs', route.path, {
     fields: ['description']
@@ -69,7 +68,7 @@ const editLink = computed(() => {
     appConfig.github.branch,
     appConfig.github.rootDir,
     'content',
-    `${page.value?.stem}.${page.value?.extension}`,
+    `${page.value?.stem}.${page.value?.extension}`
   ].filter(Boolean).join('/')
 })
 
@@ -89,29 +88,60 @@ const links = computed(() => {
 </script>
 
 <template>
-  <UPage v-if="page" :class="pageFontSizeClass">
-    <UPageHeader :title="page.title" :description="page.description" :headline="headline" :ui="{
-      wrapper: 'flex-row items-center flex-wrap justify-between ',
-    }">
+  <UPage
+    v-if="page"
+    :class="pageFontSizeClass"
+  >
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :headline="headline"
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between '
+      }"
+    >
       <template #links>
-        <UButton v-for="(link, index) in page.links" :key="index" size="sm" v-bind="link" />
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
 
         <DocsPageHeaderLinks />
       </template>
     </UPageHeader>
 
     <UPageBody>
-      <ContentRenderer v-if="page" :value="page" />
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
 
       <USeparator>
-        <div v-if="editLink" class="flex items-center gap-2 text-sm text-muted">
-          <UButton variant="link" color="neutral" :to="editLink" target="_blank" icon="lucide-pen"
-            :ui="{ leadingIcon: 'size-4' }">
+        <div
+          v-if="editLink"
+          class="flex items-center gap-2 text-sm text-muted"
+        >
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="editLink"
+            target="_blank"
+            icon="lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
             编辑页面
           </UButton>
           or
-          <UButton variant="link" color="neutral" :to="`${appConfig.github.url}/issues/new/choose`" target="_blank"
-            icon="lucide-alert-circle" :ui="{ leadingIcon: 'size-4' }">
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
             提交问题
           </UButton>
         </div>
@@ -119,15 +149,32 @@ const links = computed(() => {
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template v-if="page?.body?.toc?.links?.length" #right>
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
       <div class="fixed top-24 right-15 w-auto">
+        <UContentToc
+          :title="appConfig.toc?.title"
+          :links="page.body?.toc?.links"
+        >
+          <template
+            v-if="appConfig.toc?.bottom"
+            #bottom
+          >
+            <div
+              class="hidden lg:block space-y-6 "
+              :class="{ '!mt-5': page.body?.toc?.links?.length }"
+            >
+              <USeparator
+                v-if="page.body?.toc?.links?.length"
+                type="dashed"
+              />
 
-        <UContentToc :title="appConfig.toc?.title" :links="page.body?.toc?.links">
-          <template v-if="appConfig.toc?.bottom" #bottom>
-            <div class="hidden lg:block space-y-6 " :class="{ '!mt-5': page.body?.toc?.links?.length }">
-              <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
-
-              <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
+              <UPageLinks
+                :title="appConfig.toc.bottom.title"
+                :links="links"
+              />
             </div>
           </template>
         </UContentToc>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c361050..de3f39a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,8 +3,8 @@ definePageMeta({
   layout: 'default'
 })
 
-const title = "Estel Docs"
-const description = "Estel Docs"
+const title = 'Estel Docs'
+const description = 'Estel Docs'
 
 useSeoMeta({
   titleTemplate: '',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8a32aa5..c4aacb0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -26,12 +26,12 @@ export default defineNuxtConfig({
       pathMeta: {
         slugifyOptions: {
           // Keep everything except invalid chars, this will preserve Chinese characters
-          remove: /[$*+~()'"!\-=#?:@.]/g,
+          remove: /[$*+~()'"!\-=#?:@.]/g
         }
       }
     },
     preview: {
-      dev:true,
+      dev: true,
       api: 'https://api.nuxt.studio'
     }
   },
@@ -60,7 +60,7 @@ export default defineNuxtConfig({
   icon: {
     clientBundle: {
       scan: true,
-      sizeLimitKb: 512,
-    },
-  },
+      sizeLimitKb: 512
+    }
+  }
 })