智能商务模块适配主题切换

src/views/bussiness-data/bussiness.vue

@@ -4,10 +4,9 @@
     <a-layout-sider 
       width="260"
       :collapsed-width="80"
-      theme="light" 
+      theme="dark" 
       class="folder-sidebar"
       :collapsed="sidebarCollapsed"
-      collapsible
       @collapse="handleSidebarCollapse"
       @expand="handleSidebarExpand"
     >
@@ -102,29 +101,7 @@
         </div>
       </div>
 
-      <!-- 侧边栏底部分页控件 -->
+
-      <div class="sidebar-footer" v-if="!sidebarCollapsed && folderList.length > 0">
-        <div class="pagination-info">
-          <a-typography-text type="secondary" size="small">
-            共 {{ totalFolders }} 个文件夹
-          </a-typography-text>
-        </div>
-        
-        <!-- 隐藏分页控件，因为现在获取所有文件夹 -->
-        <!-- <div class="pagination-controls">
-          <a-pagination
-            :current="currentPage"
-            :page-size="pageSize"
-            :total="totalFolders"
-            :show-size-changer="true"
-            :page-size-options="['10', '20', '50', '100']"
-            @change="handlePageChange"
-            @showSizeChange="handlePageSizeChange"
-            size="small"
-            show-total
-          />
-        </div> -->
-      </div>
     </a-layout-sider>
 
     <a-layout>
@@ -305,7 +282,7 @@
 
               <!-- 大小列 -->
               <a-col :span="3" class="table-column size-column">
-                <div class="cell-content">{{ formatFileSize(file.fileSize || file.size) }}</div>
+                <div class="cell-content">{{ formatFileListSize(file.fileSize || file.size) }}</div>
               </a-col>
 
               <!-- 时间列 -->
@@ -682,7 +659,7 @@ const fileListTemp = ref([]);
 const folderFormRef = ref(null);
 const uploadFormRef = ref(null);
 const uploadRef = ref(null);
-const folderColor = '#165DFF';
+const folderColor = 'var(--color-primary)';
 const refreshing = ref(false);
 const folderSubmitting = ref(false);
 const uploading = ref(false);
@@ -1624,7 +1601,7 @@ const fileColor = (extension) => {
     bmp: '#722ed1',
     webp: '#13c2c2'
   };
-  return colorMap[extension.toLowerCase()] || '#8c8c8c';
+  return colorMap[extension.toLowerCase()] || 'var(--color-text-3)';
 };
 
 
@@ -1881,8 +1858,8 @@ const showTextPreview = async (blob, fileName) => {
             maxWidth: '100%',
             maxHeight: '70vh',
             overflow: 'auto',
-            backgroundColor: '#f8f9fa',
+            backgroundColor: 'var(--color-fill-1)',
-            border: '1px solid #e9ecef',
+            border: '1px solid var(--color-border)',
             borderRadius: '8px',
             padding: '20px',
             fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
@@ -1890,7 +1867,7 @@ const showTextPreview = async (blob, fileName) => {
             lineHeight: '1.6',
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
-            color: '#333',
+            color: 'var(--color-text-1)',
             textAlign: 'left'
           }
         }, text)
@@ -2336,6 +2313,21 @@ const formatFileSize = (fileSize) => {
   return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 };
 
+// 专门用于文件列表的格式化函数（假设后端返回的是KB单位）
+const formatFileListSize = (fileSize) => {
+  const size = Number(fileSize);
+  if (isNaN(size) || size < 0) return '未知';
+  
+  // 假设后端返回的是KB单位
+  if (size < 1024) {
+    return `${size} KB`;
+  } else if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} MB`;
+  } else {
+    return `${(size / (1024 * 1024)).toFixed(1)} GB`;
+  }
+};
+
 
 
 const fileTypeText = (type) => {
@@ -2458,7 +2450,7 @@ onMounted(() => {
 <style scoped>
 .knowledge-container {
   height: 100vh;
-  background-color: var(--color-bg-2);
+  background-color: var(--color-bg-1);
 }
 
 
@@ -2470,13 +2462,15 @@ onMounted(() => {
   transition: all 0.3s ease;
   overflow: hidden;
   position: relative;
-  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar-header {
   padding: 20px 16px;
   border-bottom: 1px solid var(--color-border);
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  background: var(--color-bg-1);
   position: relative;
   
   &::after {
@@ -2492,12 +2486,18 @@ onMounted(() => {
 
 .folder-content {
   padding: 16px 0;
-  height: calc(100vh - 320px); /* 为底部分页控件留出更多空间，因为文件夹项现在更高 */
+  flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 200px);
 }
 
+
+
 .folder-content::-webkit-scrollbar {
   width: 8px;
 }
@@ -2537,7 +2537,7 @@ onMounted(() => {
   border: 1px solid transparent;
   
   &:hover {
-    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    background: linear-gradient(135deg, var(--color-fill-2) 0%, var(--color-fill-3) 100%);
     border-color: var(--color-primary-light-2);
     transform: translateX(2px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -2606,7 +2606,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 0 24px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   border-bottom: 1px solid var(--color-border);
   height: 64px;
 }
@@ -2623,10 +2623,12 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   padding: 24px;
-  overflow: auto;
+  overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
+  min-height: 0;
+  max-height: calc(100vh - 120px);
 }
 
 .file-card {
@@ -2637,6 +2639,7 @@ onMounted(() => {
   flex-direction: column;
   position: relative;
   height: 100%;
+  overflow: hidden;
 }
 
 /* 表格容器 */
@@ -2649,7 +2652,9 @@ onMounted(() => {
   overflow-y: auto;
   background-color: var(--color-bg-1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  padding-bottom: 80px; /* 为分页留出空间 */
+  margin-bottom: 0;
+  min-height: 300px;
+  max-height: calc(100vh - 300px);
 }
 
 /* 表头行样式 */
@@ -2729,8 +2734,8 @@ onMounted(() => {
 }
 
 .folder-icon {
-  color: #165DFF;
+  color: var(--color-primary);
-  background-color: #E8F3FF;
+  background-color: var(--color-primary-light-1);
 }
 
 .file-name {
@@ -2744,7 +2749,7 @@ onMounted(() => {
 }
 
 .table-data-row:hover .file-name {
-  color: #165DFF;
+  color: var(--color-primary);
 }
 
 .type-column, .size-column, .time-column {
@@ -2789,7 +2794,7 @@ onMounted(() => {
   white-space: nowrap;
   
   .table-data-row:hover & {
-    color: #165DFF;
+    color: var(--color-primary);
   }
 }
 
@@ -2922,6 +2927,35 @@ onMounted(() => {
   }
 }
 
+/* 浏览器缩放调整 */
+@media (max-height: 800px) {
+  .folder-content {
+    max-height: calc(100vh - 180px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 100px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 280px);
+  }
+}
+
+@media (max-height: 600px) {
+  .folder-content {
+    max-height: calc(100vh - 160px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 80px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 260px);
+  }
+}
+
 /* 空状态样式 */
 .initial-state, .empty-state {
   display: flex;
@@ -2930,7 +2964,7 @@ onMounted(() => {
   justify-content: center;
   padding: 64px 0;
   color: var(--color-text-3);
-  background-color: #fafafa;
+  background-color: var(--color-fill-1);
   border-radius: 8px;
   text-align: center;
 }
@@ -2944,7 +2978,7 @@ onMounted(() => {
 :deep(.empty-state .arco-btn) {
   margin-top: 16px;
   padding: 8px 16px;
-  background-color: #165DFF;
+  background-color: var(--color-primary);
   color: white;
   border-radius: 4px;
   border: none;
@@ -2954,7 +2988,7 @@ onMounted(() => {
 }
 
 :deep(.empty-state .arco-btn:hover) {
-  background-color: #0E42D2;
+  background-color: var(--color-primary-dark-1);
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3076,50 +3110,7 @@ onMounted(() => {
   border-top: 1px solid var(--color-border);
 }
 
-/* 侧边栏底部分页样式 */
-.sidebar-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
-  border-top: 1px solid var(--color-border);
-  padding: 20px 16px;
-  z-index: 10;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
-}
 
-.pagination-info {
-  margin-bottom: 16px;
-  text-align: center;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-}
-
-.pagination-controls {
-  display: flex;
-  justify-content: center;
-  
-  :deep(.arco-pagination) {
-    .arco-pagination-item {
-      border-radius: 6px;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-/* 确保文件夹内容区域不被底部分页遮挡 */
-.folder-content {
-  /* 高度已调整，无需额外padding */
-}
 
 /* 动画效果 */
 :deep(.arco-icon-refresh.spin) {
@@ -3250,8 +3241,8 @@ onMounted(() => {
   border: 1px solid #e2e8f0;
   
   &:hover {
-    background: #e2e8f0;
+    background: var(--color-fill-2);
-    color: #165DFF;
+    color: var(--color-primary);
   }
 }
 
@@ -3260,8 +3251,8 @@ onMounted(() => {
   transition: all 0.2s ease;
   
   &:hover {
-    border-color: #165DFF;
+    border-color: var(--color-primary);
-    color: #165DFF;
+    color: var(--color-primary);
   }
   
   &:active {
@@ -3370,7 +3361,7 @@ onMounted(() => {
     border-radius: 8px;
     border: 1px solid var(--color-border);
     transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(var(--color-bg-1-rgb), 0.9);
     
     &:hover {
       border-color: var(--color-primary-light-2);
@@ -3388,7 +3379,7 @@ onMounted(() => {
 .search-result-tip {
   padding: 12px 16px;
   margin: 12px 16px;
-  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
   border-radius: 8px;
   border-left: 4px solid var(--color-primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
@@ -3402,7 +3393,7 @@ onMounted(() => {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+    background: linear-gradient(45deg, transparent 30%, rgba(var(--color-bg-1-rgb), 0.1) 50%, transparent 70%);
     animation: shimmer 2s infinite;
   }
 }
@@ -3440,7 +3431,7 @@ onMounted(() => {
   margin-top: 16px;
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   max-height: 300px;
   overflow-y: auto;
 }
@@ -3612,17 +3603,18 @@ onMounted(() => {
 
 /* 文件分页样式 */
 .file-pagination {
-  position: absolute;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 10;
+  margin-top: 16px;
-  margin-top: 0;
   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 {
@@ -3662,7 +3654,7 @@ onMounted(() => {
 /* 树形文件夹结构 */
 .folder-tree-container {
   padding: 8px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   border-radius: 6px;
   margin: 8px;
   overflow: hidden;