修改导航栏

app/app.config.ts

@@ -59,24 +59,24 @@ export default defineAppConfig({
     }]
   },
   toc: {
-    title: 'Table of Contents',
+    title: '当前页',
     bottom: {
       title: 'Community',
       edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
       links: [{
         icon: 'i-lucide-star',
-        label: 'Star on GitHub',
+        label: 'GitHub',
-        to: 'https://github.com/nuxt/ui',
+        to: 'https://github.com/estel-li',
         target: '_blank'
       }, {
-        icon: 'i-lucide-book-open',
+        icon: 'i-lucide-home',
-        label: 'Nuxt UI Pro docs',
+        label: '稷维科技',
-        to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
+        to: 'https://www.xajiwei.com',
         target: '_blank'
       }, {
         icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
+        label: '个人博客',
-        to: 'https://ui.nuxt.com/pro/purchase',
+        to: 'https://lijue.me',
         target: '_blank'
       }]
     }

app/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="w-64 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 flex flex-col h-screen"
+    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700"
   >
     <!--  Logo  -->
     <div
@@ -20,57 +20,82 @@
           <TemplateMenu />
         </NuxtLink>
       </div>
-      
     </div>
+
     <!-- Search Box -->
-    <div class="p-4">
+    <div class="p-4  border-gray-200 dark:border-gray-700">
       <ClientOnly>
-      <UContentSearchButton
+        <UContentSearchButton
-        v-if="header?.search"
+          v-if="header?.search"
-        :collapsed="false"
+          :collapsed="false"
-        loading="true"
+          loading="true"
-        label="搜索文档"
+          label="搜索文档"
-        description="请输入关键词"
+          description="请输入关键词"
-        class="w-full dark:bg-gray-700 text-gray-600 dark:text-gray-100"
+          class="w-full"
-        color="primary"
+          color="primary"
-      />
+        />
       </ClientOnly>
     </div>
+
     <!-- 可滚动的导航区域 -->
     <div
-      class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500 p-4"
+      class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
-      style="max-height: calc(100vh - 180px)"
+      style="max-height: calc(100vh - 200px)"
     >
-      <nav class="space-y-6">
+
         <!-- 导航 Section -->
-        <div>
+
-          <h3
+          <div>
-            class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1"
-          >
-            导航
-          </h3>
-          <div class="space-y-2">
             <NuxtLink
               to="/"
-              class="flex items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm transition-all duration-200"
+              class="flex items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
               :class="{
-                'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm':
+                'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
                   $route.path === '/',
               }"
             >
-              <Icon name="uim:house-user" class="text-primary mr-1" size="20" />
+              <Icon name="uim:house-user" class="text-primary mr-2" size="20" />
               站点首页
             </NuxtLink>
           </div>
+
+
+        <!-- 分隔线 -->
+        <div class="flex items-center px-6 p-1 ">
+          <ContentDirectory />
         </div>
-        <ContentDirectory />
+
-        <!-- Document Navigation -->
+
-        <UContainer>
+
-          <UPageAside>
+
-            <UContentNavigation highlight :navigation="navigation" />
+        <!-- root: 'space-y-1',
-          </UPageAside>
+                  list: 'space-y-1',
-        </UContainer>
+                  item: '',
-      </nav>
+                  listWithChildren: 'ms-4 border-s border-gray-200 dark:border-gray-700',
+                  itemWithChildren: 'flex flex-col',
+                  trigger: 'font-medium text-sm',
+                  link: 'group relative w-full px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200 flex items-center gap-2',
+                  linkLeadingIcon: 'shrink-0 size-5',
+                  linkTrailingIcon: 'size-4 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
+                  linkTitle: 'truncate'
+                   -->
+        <!-- 分隔线 -->
+
+          <!-- Document Navigation -->
+          <UContainer>
+            <UPageAside>
+              <UContentNavigation 
+                highlight 
+                :navigation="navigation"
+                color="primary"
+                variant="pill"
+                :ui="{
+                }"
+              />
+            </UPageAside>
+          </UContainer>
+
+
     </div>
   </aside>
 </template>

app/components/ContentDirectory.vue

@@ -1,15 +1,11 @@
 <template>
   <div>    
-    <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
+      <UContentNavigation 
-      文档目录
+        :navigation="directoryNavigation" 
-    </h3>
+        highlight 
-    
+        color="primary"
-    <UContentNavigation 
+        variant="pill"
-      :navigation="directoryNavigation" 
+      />
-      highlight 
-      color="primary"
-      variant="pill"
-    />
   </div>
 </template>
 

app/layouts/default.vue

@@ -23,7 +23,7 @@
     <!-- Right Content Area -->
     <div class="flex-1 lg:ml-64 flex flex-col">
       <!-- Fixed Header -->
-      <AppHeader />
+      <AppHeader class="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" />
       
       <!-- Main Content -->
       <main class="flex-1 overflow-y-auto pt-16">

app/pages/[...slug].vue

@@ -65,7 +65,7 @@ const links = computed(() => {
   if (appConfig.toc?.bottom?.edit) {
     links.push({
       icon: 'i-lucide-external-link',
-      label: 'Edit this page',
+      label: '编辑页面',
       to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
       target: '_blank'
     })
@@ -110,7 +110,7 @@ const links = computed(() => {
             icon="i-lucide-pen"
             :ui="{ leadingIcon: 'size-4' }"
           >
-            Edit this page
+            编辑页面
           </UButton>
           or
           <UButton
@@ -121,7 +121,7 @@ const links = computed(() => {
             icon="i-lucide-alert-circle"
             :ui="{ leadingIcon: 'size-4' }"
           >
-            Report an issue
+            提交问题
           </UButton>
         </div>
       </USeparator>
@@ -129,11 +129,13 @@ const links = computed(() => {
     </UPageBody>
 
     <template v-if="page?.body?.toc?.links?.length" #right>
+    <div class="fixed top-24 right-18 max-h-[80vh] overflow-y-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="hidden lg:block space-y-6 "
-            :class="{ '!mt-6': page.body?.toc?.links?.length }"
+            :class="{ '!mt-5': page.body?.toc?.links?.length }"
           >
             <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
@@ -141,6 +143,7 @@ const links = computed(() => {
           </div>
         </template>
       </UContentToc>
+    </div>
     </template>
   </UPage>
 </template>

content/1.getting-started/_dir.yml

@@ -0,0 +1,3 @@
+title: Getting started
+icon: lucide:rocket
+navigation.redirect: /getting-started/introduction