feat(file): 扩展文件管理功能支持相关文件标签页

- 为 related 标签页添加左侧文件列表面板宽度控制逻辑
- 在 KLPTable 组件中为 related 标签页启用行高亮显示功能
- 调整文件类型、文件大小、订单编号、所属部门、可见范围列的显示条件
- 为浏览次数列添加 related 标签页的支持条件
- 调整备注和操作列的显示逻辑以兼容 related 标签页
- 为 related 标签页添加拖拽分隔条和右侧文件预览功能
- 在文件预览头部添加查看文件详情按钮
- 更新预览和行点击事件以支持 related 标签页
- 实现文件详情查看功能和对应的弹窗显示逻辑

klp-ui/src/views/system/file/index.vue

@@ -38,7 +38,7 @@
     <!-- 左右分栏布局 -->
     <div class="file-layout" ref="layoutContainer">
       <!-- 左侧：文件列表 -->
-      <div class="file-left" :style="{ width: activeTab === 'share' ? leftPanelWidth : '100%' }">
+      <div class="file-left" :style="{ width: activeTab === 'share' || activeTab === 'related' ? leftPanelWidth : '100%' }">
         <!-- 搜索栏 -->
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
           <el-form-item label="文件名称" prop="fileName">
@@ -146,26 +146,26 @@
         </el-row>
 
         <!-- 文件列表表格 -->
-        <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" :highlight-current-row="activeTab === 'share'" @row-click="handleRowClick">
+        <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">
               <el-link type="primary" @click="handlePreview(scope.row)">{{ scope.row.fileName }}</el-link>
             </template>
           </el-table-column>
-          <el-table-column label="文件类型" align="center" prop="fileType" v-if="activeTab !== 'share'">
+          <el-table-column label="文件类型" align="center" prop="fileType" v-if="activeTab !== 'share' && activeTab !== 'related'">
             <template slot-scope="scope">
               <dict-tag :options="dict.type.sys_file_type" :value="scope.row.fileType"/>
             </template>
           </el-table-column>
-          <el-table-column label="文件大小" align="center" prop="fileSize" v-if="activeTab !== 'share'">
+          <el-table-column label="文件大小" align="center" prop="fileSize" v-if="activeTab !== 'share' && activeTab !== 'related'">
             <template slot-scope="scope">
               {{ formatFileSize(scope.row.fileSize) }}
             </template>
           </el-table-column>
-          <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
-          <el-table-column label="所属部门" align="center" prop="dept" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
-          <el-table-column label="可见范围" align="center" prop="scopeType" v-if="activeTab !== 'share'">
+          <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" v-if="activeTab !== 'share' && activeTab !== 'related'" />
+          <el-table-column label="所属部门" align="center" prop="dept" :show-overflow-tooltip="true" v-if="activeTab !== 'share' && activeTab !== 'related'" />
+          <el-table-column label="可见范围" align="center" prop="scopeType" v-if="activeTab !== 'share' && activeTab !== 'related'">
             <template slot-scope="scope">
               <el-tag :type="scope.row.scopeType === 1 ? 'success' : 'warning'" size="small">
                 {{ scope.row.scopeType === 1 ? '公开' : '私有' }}
@@ -178,13 +178,13 @@
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="浏览次数" align="center" width="90" v-if="activeTab === 'share'">
+          <el-table-column label="浏览次数" align="center" width="90" v-if="activeTab === 'share' || activeTab === 'related'">
             <template slot-scope="scope">
               <span>{{ scope.row.viewCount != null ? scope.row.viewCount : 0 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" v-if="activeTab !== 'share'" />
-          <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" v-if="activeTab !== 'share'">
+          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" v-if="activeTab !== 'share' && activeTab !== 'related'" />
+          <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width" v-if="activeTab !== 'share' && activeTab !== 'related'">
             <template slot-scope="scope">
               <el-button
                 size="mini"
@@ -219,11 +219,11 @@
         />
       </div>
 
-      <!-- 拖拽分隔条（仅共享文件 tab） -->
-      <div class="resize-handle" v-if="activeTab === 'share'" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
+      <!-- 拖拽分隔条（共享文件 / 与我相关 tab） -->
+      <div class="resize-handle" v-if="activeTab === 'share' || activeTab === 'related'" @mousedown="startResize" :class="{ dragging: isDragging }"></div>
 
-      <!-- 右侧：文件预览（仅共享文件 tab） -->
-      <div class="file-right" v-if="activeTab === 'share'">
+      <!-- 右侧：文件预览（共享文件 / 与我相关 tab） -->
+      <div class="file-right" v-if="activeTab === 'share' || activeTab === 'related'">
         <div class="preview-panel">
           <div v-if="!selectedFile" class="preview-empty">
             <el-empty description="请选择左侧文件进行预览" />
@@ -232,6 +232,7 @@
             <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>
@@ -802,7 +803,7 @@ export default {
     },
     /** 预览 */
     handlePreview(row) {
-      if (this.activeTab === 'share') {
+      if (this.activeTab === 'share' || this.activeTab === 'related') {
         this.selectedFile = row
         incrementView(row.fileId)
       } else {
@@ -811,12 +812,18 @@ export default {
         this.previewVisible = true
       }
     },
-    /** 点击行选中预览（共享文件 tab） */
+    /** 点击行选中预览（共享文件 / 与我相关 tab） */
     handleRowClick(row) {
-      if (this.activeTab === 'share') {
+      if (this.activeTab === 'share' || this.activeTab === 'related') {
         this.selectedFile = row
       }
     },
+    /** 查看文件详情 */
+    handleShowInfo(row) {
+      this.previewFile = row
+      this.previewTitle = '文件详情 - ' + row.fileName
+      this.previewVisible = true
+    },
     /** 下载文件 */
     downloadFile(row) {
       if (row.filePath) {