修改样式

app/layouts/default.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <!-- 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">
+      <!-- Fixed Header -->
+      <AppHeader 
+        class="fixed top-0 right-0 z-30 transition-all duration-300"
+        :class="{ 'left-0': !isSidebarOpen, 'lg:left-64': true }"
+        @toggle-sidebar="isSidebarOpen = !isSidebarOpen" 
+      />
+      
+      <!-- Main Content -->
+      <main class="flex-1 overflow-y-auto pt-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <slot />
+        </div>
+      </main>
+      
+      <!-- Footer -->
+      <AppFooter />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isSidebarOpen = ref(false)
+</script>