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>

web/src/layout/AppMain.vue

@@ -9,9 +9,11 @@ const keepAliveNames = computed(() => {
 </script>
 
 <template>
-  <router-view v-slot="{ Component, route }">
-    <keep-alive :include="keepAliveNames">
-      <component :is="Component" v-if="!tabStore.reloading" :key="route.path" />
-    </keep-alive>
-  </router-view>
+  <div class="wh-full">
+    <router-view v-slot="{ Component, route }">
+      <keep-alive :include="keepAliveNames">
+        <component :is="Component" v-if="!tabStore.reloading" :key="route.path" />
+      </keep-alive>
+    </router-view>
+  </div>
 </template>

web/src/layout/IndexView.vue

@@ -35,7 +35,7 @@ const themeStore = useThemeStore()
       </n-scrollbar>
     </n-drawer>
 
-    <article flex-col flex-1 overflow-hidden>
+    <article flex flex-col flex-1 overflow-hidden>
       <header
         :style="`height: ${themeStore.header.height}px`"
         dark="bg-dark border-0"

web/src/views/file/IndexView.vue

@@ -25,7 +25,7 @@ const permission = ref(false)
 
 <template>
   <common-page show-footer>
-    <n-flex vertical :size="20">
+    <n-flex vertical :size="20" class="h-full">
       <path-input
         v-model:path="fileStore.path"
         v-model:keyword="fileStore.keyword"

web/src/views/file/ListView.vue

@@ -1244,8 +1244,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4" :style="themeStyles">
-    <n-spin :show="loading">
+  <div class="flex flex-col flex-1 gap-4 min-h-0" :style="themeStyles">
+    <n-spin :show="loading" class="flex flex-col flex-1 min-h-0">
       <div
         ref="gridContainerRef"
         class="file-container"
@@ -1582,7 +1582,7 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .file-container {
   position: relative;
-  height: 60vh;
+  flex: 1;
   overflow: auto;
   background: var(--card-color);
   border-radius: 3px;
@@ -1596,6 +1596,7 @@ onUnmounted(() => {
     align-content: start;
     gap: 16px;
     padding: 16px;
+    border: none;
 
     .file-item {
       display: flex;
@@ -1780,4 +1781,11 @@ onUnmounted(() => {
     flex: 1;
   }
 }
+
+// n-spin 内部容器填满
+:deep(.n-spin-content) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 </style>