修改顶栏的汉堡

app/app.vue

@@ -50,7 +50,7 @@ provide('navigation', navigation)
 <template>
   <UApp>
     <NuxtLoadingIndicator />
-    <AppHeader />
+
     <UMain>
       <NuxtLayout>
         <NuxtPage />

app/components/AppHeader.vue

@@ -2,71 +2,111 @@
 const isSettingsOpen = ref(false)
 
 const { header } = useAppConfig();
+
+// 定义 props 来接收侧边栏状态和切换函数
+interface Props {
+  isSidebarOpen?: boolean
+  toggleSidebar?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSidebarOpen: false,
+  toggleSidebar: () => {}
+})
 </script>
 
 <template>
-  <UPage>
+  <header
-    <template>
+    class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
-      <header
+  >
-        class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
+    <div class="px-2 sm:px-4 lg:px-6">
-      >
+      <div class="flex justify-between items-center h-12">
-        <div class="px-2 sm:px-4 lg:px-6">
+        <!-- 汉堡菜单按钮 - 只在移动端显示 -->
-          <div class="flex justify-between items-center h-12">
+        <button
-            <UContentSearchButton v-if="header?.search" class="lg:hidden" />
+          @click="() => {
-            <div class="ml-auto">
+            console.log('汉堡按钮被点击')
-              <UColorModeButton v-if="header?.colorMode" />
+            props.toggleSidebar()
-              
+          }"
-            <!-- Settings Button -->
+          class="lg:hidden p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            <button
+          aria-label="打开导航菜单"
-              class="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        >
-              title="页面设置"
+          <svg 
-              @click="isSettingsOpen = !isSettingsOpen"
+            class="w-5 h-5" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+            :class="{ 'rotate-180': props.isSidebarOpen }"
+          >
+            <path 
+              v-if="!props.isSidebarOpen"
+              stroke-linecap="round" 
+              stroke-linejoin="round" 
+              stroke-width="2" 
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+            <path 
+              v-else
+              stroke-linecap="round" 
+              stroke-linejoin="round" 
+              stroke-width="2" 
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+        
+        <UContentSearchButton v-if="header?.search" class="lg:hidden" />
+        <div class="ml-auto">
+          <UColorModeButton v-if="header?.colorMode" />
+          
+        <!-- Settings Button -->
+        <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>
+          
+        </div>
+        <!-- User Actions - Mobile and Desktop -->
+        <div class="hidden sm:flex items-center space-x-2">
+          <NuxtLink
+            to="/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"
+          >
+            登录
+          </NuxtLink>
+          <NuxtLink
+            to="/register"
+            class="text-sm font-medium text-white bg-primary rounded-md"
+          >
+            <UButton icon="lucide-rocket">注册</UButton>
+          </NuxtLink>
+          <!-- Mobile Menu Button -->
+          <div class="sm:hidden">
+            <NuxtLink
+              to="/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"
             >
-            <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" />
+            </NuxtLink>
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            <NuxtLink
-            </svg>
+              to="/register"
-          </button>
+              class="ml-2 px-3 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
-              
+            >
-            </div>
+              注册
-            <!-- User Actions - Mobile and Desktop -->
+            </NuxtLink>
-            <div class="hidden sm:flex items-center space-x-2">
-              <NuxtLink
-                to="/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"
-              >
-                登录
-              </NuxtLink>
-              <NuxtLink
-                to="/register"
-                class="text-sm font-medium text-white bg-primary rounded-md"
-              >
-                <UButton icon="lucide-rocket">注册</UButton>
-              </NuxtLink>
-              <!-- Mobile Menu Button -->
-              <div class="sm:hidden">
-                <NuxtLink
-                  to="/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"
-                >
-                  登录
-                </NuxtLink>
-                <NuxtLink
-                  to="/register"
-                  class="ml-2 px-3 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
-                >
-                  注册
-                </NuxtLink>
-              </div>
-            </div>
           </div>
         </div>
-            <!-- Theme Settings Panel -->
+      </div>
-      <ThemeSettings 
+    </div>
-        :is-open="isSettingsOpen" 
+        <!-- Theme Settings Panel -->
-        @close="isSettingsOpen = false" 
+  <ThemeSettings 
-      />
+    :is-open="isSettingsOpen" 
-      </header>
+    @close="isSettingsOpen = false" 
-    </template>
+  />
-  </UPage>
+  </header>
 </template>

app/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700"
+    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"
   >
     <!--  Logo  -->
     <div

app/layouts/default.vue

@@ -1,29 +1,26 @@
 <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" 
       @click="isSidebarOpen = false"
     />
-    <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'"
-    />
-    <!-- Mobile Sidebar (Drawer) -->
-    <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" 
       :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">
+    <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
       <!-- Fixed Header -->
-      <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" />
+      <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" 
+        :is-sidebar-open="isSidebarOpen"
+        :toggle-sidebar="toggleSidebar"
+      />
       
       <!-- Main Content -->
       <main class="flex-1 overflow-y-auto pt-16">
@@ -40,6 +37,21 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { watch } from 'vue'
 
 const isSidebarOpen = ref(false)
+
+// 切换侧边栏
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value
+  console.log('侧边栏状态:', isSidebarOpen.value) // 调试信息
+}
+
+// 监听路由变化，在移动端自动关闭侧边栏
+watch(() => useRoute().path, () => {
+  if (isSidebarOpen.value) {
+    isSidebarOpen.value = false
+  }
+})
 </script>