refactor(file): 优化文件管理页面布局和元数据显示

- 将文件列表表格包装在可滚动容器中，支持固定高度显示
- 新增选中文件元数据卡片组件，显示文件详细信息
- 调整左右分栏布局为拉伸对齐，优化高度计算
- 移除预览区域的文件元数据行，统一在卡片中显示
- 为共享文件和相关文件标签页添加独立的滚动样式
- 简化预览内容区域的flex属性配置

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);
+  height: 100%;
-  min-height: 450px;
+  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） -->

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);
+  height: 100%;
-  min-height: 450px;
+  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） -->