feat: 优化页面

web/src/components/page/AppPage.vue

@@ -10,7 +10,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <transition appear mode="out-in" name="fade-slide">
-    <section class="cus-scroll-y p-15 bg-[#f5f6fb] flex-col wh-full" dark:bg-hex-121212>
+    <section class="cus-scroll-y p-15 bg-[#f5f6fb] flex flex-col wh-full" dark:bg-hex-121212>
       <slot />
       <app-footer v-if="showFooter" mt-auto pt-20 />
     </section>

web/src/components/page/CommonPage.vue

@@ -14,16 +14,42 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <app-page :show-footer="showFooter">
-    <div class="flex flex-col gap-10">
+    <div class="flex flex-col gap-10 flex-1 min-h-0">
       <header v-if="showHeader">
         <slot v-if="$slots.header" name="header" />
         <n-card v-else size="small">
           <slot name="tabbar" />
         </n-card>
       </header>
-      <n-card>
+      <n-card class="main-card flex-1 min-h-0">
         <slot />
       </n-card>
     </div>
   </app-page>
 </template>
+
+<style scoped lang="scss">
+.main-card {
+  display: flex;
+  flex-direction: column;
+
+  :deep(.n-card__content) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    // n-flex vertical 填满
+    > .n-flex {
+      flex: 1;
+      min-height: 0;
+    }
+
+    // n-data-table 填满
+    .n-data-table {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+}
+</style>