From 9ef387114d1299e91626ea3b5ec7d4a43d6c0c1f Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Mon, 6 Jul 2026 09:51:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor(file):=20=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=92=8C=E5=85=83=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将文件列表表格包装在可滚动容器中，支持固定高度显示
- 新增选中文件元数据卡片组件，显示文件详细信息
- 调整左右分栏布局为拉伸对齐，优化高度计算
- 移除预览区域的文件元数据行，统一在卡片中显示
- 为共享文件和相关文件标签页添加独立的滚动样式
- 简化预览内容区域的flex属性配置
---
 klp-ui/src/views/system/file/all.vue   | 71 ++++++++++++++++----------
 klp-ui/src/views/system/file/index.vue | 70 +++++++++++++++----------
 2 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/klp-ui/src/views/system/file/all.vue b/klp-ui/src/views/system/file/all.vue
index ffa39af76..09073a763 100644
--- a/klp-ui/src/views/system/file/all.vue
+++ b/klp-ui/src/views/system/file/all.vue
@@ -138,8 +138,9 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <!-- 文件列表表格 -->
-    <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
+    <!-- 文件列表表格（固定高度可滚动） -->
+    <div class="file-table-wrapper">
+      <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
       <el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
       <el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
         <template slot-scope="scope">
@@ -166,6 +167,30 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+    </div>
+
+    <!-- 选中文件元数据卡片 -->
+    <div class="file-meta-card" v-if="selectedFile">
+      <el-descriptions :column="2" border size="small">
+        <el-descriptions-item label="文件名称">{{ selectedFile.fileName }}</el-descriptions-item>
+        <el-descriptions-item label="文件类型">
+          <dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="文件大小">{{ formatFileSize(selectedFile.fileSize) }}</el-descriptions-item>
+        <el-descriptions-item label="文件后缀">{{ selectedFile.suffix || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="浏览次数">{{ selectedFile.viewCount != null ? selectedFile.viewCount : 0 }} 次</el-descriptions-item>
+        <el-descriptions-item label="订单编号">{{ selectedFile.orderNo || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="所属部门">{{ selectedFile.dept || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="可见范围">
+          <el-tag :type="selectedFile.scopeType === 1 ? 'success' : 'warning'" size="small">
+            {{ selectedFile.scopeType === 1 ? '公开' : '私有' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="上传人">{{ selectedFile.createBy }}</el-descriptions-item>
+        <el-descriptions-item label="上传时间">{{ parseTime(selectedFile.createTime) }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ selectedFile.remark || '-' }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
       </div>
       <!-- 拖拽分隔条 -->
       <div class="resize-handle" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
@@ -179,19 +204,11 @@
             <div class="preview-header">
               <span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
               <div>
-                <el-button size="mini" type="text" @click="handlePreview(selectedFile)">预览</el-button>
-                <el-button size="mini" plain icon="el-icon-info" @click="handleShowInfo(selectedFile)">查看</el-button>
                 <el-button size="mini" type="primary" icon="el-icon-download" @click="downloadFile(selectedFile)">下载</el-button>
                 <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(selectedFile)">编辑</el-button>
                 <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
               </div>
             </div>
-            <div class="preview-meta">
-              <span>{{ formatFileSize(selectedFile.fileSize) }}</span>
-              <dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType" />
-              <span>{{ selectedFile.createBy }}</span>
-              <span>{{ parseTime(selectedFile.createTime) }}</span>
-            </div>
             <div class="preview-comment">
               <div class="comment-bar" @click="commentExpanded = !commentExpanded">
                 <span><i class="el-icon-chat-dot-round"></i> 评论 ({{ comments.length }})</span>
@@ -862,12 +879,15 @@ export default {
 /* 左右分栏布局 */
 .file-layout {
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 0;
 }
 
 .file-left {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 240px);
 }
 
 .file-right {
@@ -915,12 +935,10 @@ export default {
   background: #fff;
   border: 1px solid #ebeef5;
   border-radius: 4px;
-  height: calc(100vh - 280px);
-  min-height: 450px;
+  height: 100%;
+  min-height: calc(100vh - 300px);
   display: flex;
   flex-direction: column;
-  position: sticky;
-  top: 16px;
 }
 
 .preview-empty {
@@ -948,17 +966,6 @@ export default {
   margin-right: 12px;
 }
 
-.preview-meta {
-  padding: 8px 16px;
-  border-bottom: 1px solid #ebeef5;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: 12px;
-  color: #909399;
-}
-
 .preview-comment {
   border-bottom: 1px solid #ebeef5;
 }
@@ -1042,7 +1049,6 @@ export default {
 }
 
 .preview-content {
-  flex: 1;
   overflow: auto;
   display: flex;
 }
@@ -1057,6 +1063,17 @@ export default {
   align-items: center;
   height: 400px;
 }
+
+/* 左侧表格区域撑满剩余空间可滚动 */
+.file-table-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* 左侧文件元数据卡片 */
+.file-meta-card {
+  margin-top: 12px;
+}
 </style>
 
 <!-- 表格选中行高亮（非 scoped，穿透 el-table） -->
diff --git a/klp-ui/src/views/system/file/index.vue b/klp-ui/src/views/system/file/index.vue
index ae7fdf5ca..40618aecc 100644
--- a/klp-ui/src/views/system/file/index.vue
+++ b/klp-ui/src/views/system/file/index.vue
@@ -145,8 +145,9 @@
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
-        <!-- 文件列表表格 -->
-        <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share' || activeTab === 'related'" @row-click="handleRowClick">
+        <!-- 文件列表表格（固定高度可滚动） -->
+        <div :class="['file-table-wrapper', { scrolling: activeTab === 'share' || activeTab === 'related' }]">
+          <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share' || activeTab === 'related'" @row-click="handleRowClick">
           <el-table-column type="selection" width="55" align="center" v-if="activeTab === 'my' || activeTab === 'all'" />
           <el-table-column label="文件名称" align="center" prop="fileName" :show-overflow-tooltip="true">
             <template slot-scope="scope">
@@ -217,6 +218,30 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
+        </div>
+
+        <!-- 选中文件元数据卡片（仅共享文件 / 与我相关 tab） -->
+        <div class="file-meta-card" v-if="selectedFile && (activeTab === 'share' || activeTab === 'related')">
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="文件名称">{{ selectedFile.fileName }}</el-descriptions-item>
+            <el-descriptions-item label="文件类型">
+              <dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="文件大小">{{ formatFileSize(selectedFile.fileSize) }}</el-descriptions-item>
+            <el-descriptions-item label="文件后缀">{{ selectedFile.suffix || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="浏览次数">{{ selectedFile.viewCount != null ? selectedFile.viewCount : 0 }} 次</el-descriptions-item>
+            <el-descriptions-item label="订单编号">{{ selectedFile.orderNo || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="所属部门">{{ selectedFile.dept || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="可见范围">
+              <el-tag :type="selectedFile.scopeType === 1 ? 'success' : 'warning'" size="small">
+                {{ selectedFile.scopeType === 1 ? '公开' : '私有' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="上传人">{{ selectedFile.createBy }}</el-descriptions-item>
+            <el-descriptions-item label="上传时间">{{ parseTime(selectedFile.createTime) }}</el-descriptions-item>
+            <el-descriptions-item label="备注" :span="2">{{ selectedFile.remark || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
       </div>
 
       <!-- 拖拽分隔条（共享文件 / 与我相关 tab） -->
@@ -232,18 +257,11 @@
             <div class="preview-header">
               <span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
               <div>
-                <el-button size="mini" plain icon="el-icon-info" @click="handleShowInfo(selectedFile)">查看</el-button>
                 <el-button size="mini" type="primary" icon="el-icon-download" @click="downloadFile(selectedFile)">下载</el-button>
                 <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(selectedFile)">编辑</el-button>
                 <el-button v-if="canEdit(selectedFile)" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedFile)">删除</el-button>
               </div>
             </div>
-            <div class="preview-meta">
-              <span>{{ formatFileSize(selectedFile.fileSize) }}</span>
-              <dict-tag :options="dict.type.sys_file_type" :value="selectedFile.fileType" />
-              <span>{{ selectedFile.createBy }}</span>
-              <span>{{ parseTime(selectedFile.createTime) }}</span>
-            </div>
             <div class="preview-comment">
               <div class="comment-bar" @click="commentExpanded = !commentExpanded">
                 <span><i class="el-icon-chat-dot-round"></i> 评论 ({{ comments.length }})</span>
@@ -928,12 +946,15 @@ export default {
 /* 左右分栏布局 */
 .file-layout {
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 0;
 }
 
 .file-left {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 240px);
 }
 
 .file-right {
@@ -981,12 +1002,10 @@ export default {
   background: #fff;
   border: 1px solid #ebeef5;
   border-radius: 4px;
-  height: calc(100vh - 280px);
-  min-height: 450px;
+  height: 100%;
+  min-height: calc(100vh - 300px);
   display: flex;
   flex-direction: column;
-  position: sticky;
-  top: 16px;
 }
 
 .preview-empty {
@@ -1014,17 +1033,6 @@ export default {
   margin-right: 12px;
 }
 
-.preview-meta {
-  padding: 8px 16px;
-  border-bottom: 1px solid #ebeef5;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: 12px;
-  color: #909399;
-}
-
 .preview-comment {
   border-bottom: 1px solid #ebeef5;
 }
@@ -1108,7 +1116,6 @@ export default {
 }
 
 .preview-content {
-  flex: 1;
   overflow: auto;
   display: flex;
 }
@@ -1123,6 +1130,17 @@ export default {
   align-items: center;
   height: 400px;
 }
+
+/* 左侧表格区域撑满剩余空间可滚动（仅 share / related tab） */
+.file-table-wrapper.scrolling {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* 左侧文件元数据卡片 */
+.file-meta-card {
+  margin-top: 12px;
+}
 </style>
 
 <!-- 表格选中行高亮（非 scoped，穿透 el-table） -->