修改导航栏

2025-07-25 01:10:05 +08:00
parent 9469b530a1
commit 9dafb6ff47
6 changed files with 85 additions and 58 deletions
--- a/app/app.config.ts
+++ b/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',
-        to: 'https://github.com/nuxt/ui',
+        label: 'GitHub',
+        to: 'https://github.com/estel-li',
        target: '_blank'
      }, {
-        icon: 'i-lucide-book-open',
-        label: 'Nuxt UI Pro docs',
-        to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
+        icon: 'i-lucide-home',
+        label: '稷维科技',
+        to: 'https://www.xajiwei.com',
        target: '_blank'
      }, {
        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
-        to: 'https://ui.nuxt.com/pro/purchase',
+        label: '个人博客',
+        to: 'https://lijue.me',
        target: '_blank'
      }]
    }
--- a/app/components/AppSidebar.vue
+++ b/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,10 +20,10 @@
          <TemplateMenu />
        </NuxtLink>
      </div>
-      
    </div>
+
    <!-- Search Box -->
-    <div class="p-4">
+    <div class="p-4  border-gray-200 dark:border-gray-700">
      <ClientOnly>
        <UContentSearchButton
          v-if="header?.search"
@@ -31,46 +31,71 @@
          loading="true"
          label="搜索文档"
          description="请输入关键词"
-        class="w-full dark:bg-gray-700 text-gray-600 dark:text-gray-100"
+          class="w-full"
          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"
-      style="max-height: calc(100vh - 180px)"
+      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 - 200px)"
    >
-      <nav class="space-y-6">
+
        <!-- 导航 Section -->
+
          <div>
-          <h3
-            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>
+
+
+        <!-- 分隔线 -->
+        <div class="flex items-center px-6 p-1 ">
          <ContentDirectory />
+        </div>
+
+
+
+
+        <!-- root: 'space-y-1',
+                  list: 'space-y-1',
+                  item: '',
+                  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" />
+              <UContentNavigation 
+                highlight 
+                :navigation="navigation"
+                color="primary"
+                variant="pill"
+                :ui="{
+                }"
+              />
            </UPageAside>
          </UContainer>
-      </nav>
+
+
    </div>
  </aside>
 </template>
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -1,9 +1,5 @@
 <template>
  <div>    
-    <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
-      文档目录
-    </h3>
-    
      <UContentNavigation 
        :navigation="directoryNavigation" 
        highlight 
--- a/app/layouts/default.vue
+++ b/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">
--- a/app/pages/[...slug].vue
+++ b/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="{ '!mt-6': page.body?.toc?.links?.length }"
+            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" />

@@ -141,6 +143,7 @@ const links = computed(() => {
          </div>
        </template>
      </UContentToc>
+    </div>
    </template>
  </UPage>
 </template>
--- a/content/1.getting-started/_dir.yml
+++ b/content/1.getting-started/_dir.yml
@@ -0,0 +1,3 @@
+title: Getting started
+icon: lucide:rocket
+navigation.redirect: /getting-started/introduction