feat: 优化

frontend/app/web-gold/src/layouts/MainLayout.vue

@@ -1,49 +1,24 @@
 <script setup>
+import { SidebarProvider } from '@/components/ui/sidebar'
 import TopNav from '@/components/TopNav.vue'
 import SidebarNav from '@/components/SidebarNav.vue'
 </script>
 
 <template>
-  <div class="app-shell">
+  <SidebarProvider
+    :style="{ '--sidebar-width': '220px' }"
+    class="flex flex-col min-h-screen bg-background"
+  >
     <TopNav />
-    <div class="app-body">
+    <div class="flex flex-1 pt-[70px]">
       <SidebarNav />
-      <div class="app-content">
-        <main class="content-scroll">
+      <main class="flex-1 h-[calc(100vh-70px)] overflow-auto p-4">
+        <RouterView v-slot="{ Component }">
           <keep-alive>
-            <RouterView />
+            <component :is="Component" />
           </keep-alive>
-        </main>
-       
-      </div>
+        </RouterView>
+      </main>
     </div>
-  </div>
+  </SidebarProvider>
 </template>
-
-<style scoped>
-.app-shell {
-  min-height: 100vh;
-  background: var(--color-bg);
-}
-
-/* 顶部固定，下面主体需要留出空间 */
-.app-body {
-  padding-top: 70px; /* 与 TopNav 高度对齐 */
-  display: grid;
-  overflow: hidden;
-  grid-template-columns: 220px 1fr; /* 左侧固定宽度侧边栏 */
-}
-
-.app-content {
-  height: calc(100vh - 90px);
-  display: flex;
-  flex-direction: column;
-}
-
-.content-scroll {
-  flex: 1 1 auto;
-  overflow-x: hidden;
-  overflow-y: auto; /* 右侧内容区域滚动 */
-  padding: 16px;
-}
-</style>