update layout

frontend/src/components/layouts/MainLayout.vue

@@ -145,11 +145,10 @@ const breadcrumbItems = computed(() => {
 </script>
 
 <template>
-  <a-layout class="min-h-screen">
+  <div class="min-h-screen flex flex-col">
     <!-- Header -->
-    <a-layout-header
-      class="fixed top-0 w-full z-10 flex items-center justify-between px-4"
-      style="height: 64px; line-height: 64px"
+    <header
+      class="fixed top-0 w-full z-20 flex items-center justify-between px-4 bg-[#001529] h-16"
     >
       <div class="flex items-center gap-4">
         <Brand size="small" :show-app-name="!collapsed" />
@@ -182,17 +181,16 @@ const breadcrumbItems = computed(() => {
           </a-menu>
         </template>
       </a-dropdown>
-    </a-layout-header>
+    </header>
 
-    <a-layout class="mt-16">
+    <div class="flex pt-16 min-h-screen">
       <!-- Sidebar -->
-      <a-layout-sider
-        v-model:collapsed="collapsed"
-        :trigger="null"
-        collapsible
-        class="fixed left-0 top-16 bottom-0 overflow-y-auto"
+      <aside
+        class="fixed left-0 top-16 bottom-0 z-10 overflow-y-auto bg-[#001529] transition-[width] duration-200"
+        :style="{ width: collapsed ? '80px' : '200px' }"
       >
         <a-menu
+          :inline-collapsed="collapsed"
           :selected-keys="selectedKeys"
           v-model:open-keys="openKeys"
           mode="inline"
@@ -214,16 +212,14 @@ const breadcrumbItems = computed(() => {
             </a-menu-item>
           </template>
         </a-menu>
-      </a-layout-sider>
+      </aside>
 
       <!-- Content + Footer -->
-      <a-layout
-        :style="{
-          marginLeft: collapsed ? '80px' : '200px',
-          transition: 'margin-left 0.2s',
-        }"
+      <div
+        class="flex flex-col flex-1 min-h-[calc(100vh-4rem)]"
+        :style="{ marginLeft: collapsed ? '80px' : '200px', transition: 'margin-left 0.2s' }"
       >
-        <a-layout-content class="p-6">
+        <main class="flex-1 overflow-y-auto p-6">
           <a-breadcrumb class="mb-4">
             <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
               <router-link v-if="item.path !== route.path" :to="item.path">
@@ -233,18 +229,12 @@ const breadcrumbItems = computed(() => {
             </a-breadcrumb-item>
           </a-breadcrumb>
           <slot />
-        </a-layout-content>
+        </main>
 
-        <a-layout-footer class="text-center text-gray-500">
+        <footer class="text-center text-gray-500 py-6 bg-[#f5f5f5]">
           &copy; 2026 DataHub - 数据管理平台
-        </a-layout-footer>
-      </a-layout>
-    </a-layout>
-  </a-layout>
+        </footer>
+      </div>
+    </div>
+  </div>
 </template>
-
-<style scoped>
-:deep(.ant-layout-sider) {
-  z-index: 9;
-}
-</style>