优化智能商务模块对的文件分页和页面布局

src/views/bussiness-data/bussiness.vue

@@ -143,19 +143,22 @@
 
       <a-layout-content class="file-content">
         <a-card :bordered="false" class="file-card">
-          <a-descriptions :title="`文件列表 (${fileList.length})`" v-if="currentFolderId" />
+          <!-- 文件列表标题和搜索框在同一行 -->
-          
+          <div v-if="currentFolderId" class="file-header-container">
-          <!-- 文件搜索功能 -->
+            <div class="file-title">
-          <div v-if="currentFolderId" class="file-search-container">
+              <span class="file-list-title">文件列表 ({{ fileList.length }})</span>
-            <a-input-search
+            </div>
-              v-model="fileSearchKeyword"
+            <div class="file-search-container">
-              placeholder="搜索文件名..."
+              <a-input-search
-              class="file-search-input"
+                v-model="fileSearchKeyword"
-              @search="handleFileSearch"
+                placeholder="搜索文件名..."
-              @input="handleFileSearchInput"
+                class="file-search-input"
-              @clear="handleFileSearchClear"
+                @search="handleFileSearch"
-              allow-clear
+                @input="handleFileSearchInput"
-            />
+                @clear="handleFileSearchClear"
+                allow-clear
+              />
+            </div>
           </div>
           
           <a-divider size="small" v-if="currentFolderId" />
@@ -336,7 +339,7 @@
           </div>
 
           <!-- 文件分页 -->
-          <div v-if="currentFolderId && !loading && totalFiles > 0" class="file-pagination">
+          <div v-if="currentFolderId && !loading && totalFiles > 0" class="pagination-container">
             <a-pagination
               :total="totalFiles"
               :current="fileCurrentPage"
@@ -345,6 +348,8 @@
               :show-page-size="true"
               :page-size-options="[10, 20, 50, 100]"
               :show-jumper="true"
+              :hide-on-single-page="false"
+              size="default"
               @change="handleFilePageChange"
               @page-size-change="handleFilePageSizeChange"
             />
@@ -2629,6 +2634,7 @@ onMounted(() => {
   background: var(--color-bg-1);
   min-height: 0;
   max-height: calc(100vh - 120px);
+  position: relative;
 }
 
 .file-card {
@@ -2640,6 +2646,7 @@ onMounted(() => {
   position: relative;
   height: 100%;
   overflow: hidden;
+  padding-bottom: 80px; /* 为分页器留出空间 */
 }
 
 /* 表格容器 */
@@ -2654,7 +2661,7 @@ onMounted(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   margin-bottom: 0;
   min-height: 300px;
-  max-height: calc(100vh - 300px);
+  max-height: calc(100vh - 380px); /* 调整高度为分页器留出空间 */
 }
 
 /* 表头行样式 */
@@ -3100,14 +3107,65 @@ onMounted(() => {
 }
 
 /* 分页样式 */
-.pagination-container, .file-pagination {
+.pagination-container {
-  margin-top: 16px;
+  position: absolute;
-  text-align: right;
+  bottom: 0;
-  padding: 0 16px 16px;
+  left: 0;
-}
+  right: 0;
-
+  background: var(--color-bg-1);
-.file-pagination {
+  padding: 16px 24px;
   border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  z-index: 10;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+  margin-top: 0;
+  
+  .arco-pagination {
+    margin: 0;
+    
+    .arco-pagination-item {
+      border-radius: 6px;
+      margin: 0 4px;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+      
+      &.arco-pagination-item-active {
+        background: var(--color-primary);
+        border-color: var(--color-primary);
+        color: white;
+      }
+    }
+    
+    .arco-pagination-prev,
+    .arco-pagination-next {
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+      }
+    }
+    
+    .arco-pagination-size-changer {
+      margin-left: 16px;
+    }
+    
+    .arco-pagination-jumper {
+      margin-left: 16px;
+    }
+    
+    .arco-pagination-total {
+      color: var(--color-text-2);
+      font-size: 14px;
+    }
+  }
 }
 
 
@@ -3530,9 +3588,29 @@ onMounted(() => {
   100% { transform: translateX(100%); }
 }
 
+/* 文件头部容器样式 */
+.file-header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px 0;
+}
+
+.file-title {
+  display: flex;
+  align-items: center;
+}
+
+.file-list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin: 0;
+}
+
 /* 文件搜索样式 */
 .file-search-container {
-  margin: 16px 0;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -3601,55 +3679,7 @@ onMounted(() => {
   border-top-color: var(--color-primary);
 }
 
-/* 文件分页样式 */
+
-.file-pagination {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin-top: 16px;
-  padding: 16px 0;
-  display: flex;
-  justify-content: center;
-  border-top: 1px solid var(--color-border);
-  background: var(--color-bg-1);
-  flex-shrink: 0;
-  z-index: 10;
-  
-  .arco-pagination {
-    .arco-pagination-total {
-      color: var(--color-text-2);
-      font-size: 14px;
-    }
-    
-    .arco-pagination-item {
-      border-radius: 6px;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-      }
-      
-      &.arco-pagination-item-active {
-        background: var(--color-primary);
-        border-color: var(--color-primary);
-        color: white;
-      }
-    }
-    
-    .arco-pagination-prev,
-    .arco-pagination-next {
-      border-radius: 6px;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-      }
-    }
-  }
-}
 
 /* 树形文件夹结构 */
 .folder-tree-container {