From b0ac38c0508c3744c58d32a364b73f1d7af331fa Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Mon, 6 Jul 2026 11:23:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor(file):=20=E9=87=8D=E6=9E=84=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2UI=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=92=8C=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将统计卡片改为销售看板风格的汇总卡片布局
- 实现左右分栏布局并支持拖拽调节宽度
- 新增高级搜索功能和文件类型筛选标签页
- 优化搜索栏布局为工具栏样式并支持折叠
- 移除文件元数据卡片改用预览区域显示
- 添加查看文件详情和导出功能按钮
- 重构表格容器为固定高度可滚动布局
- 分离我的文件和共享文件的搜索界面差异
---
 klp-ui/src/views/system/file/all.vue   | 401 ++++++++++++++-----------
 klp-ui/src/views/system/file/index.vue | 151 ++++++++--
 2 files changed, 350 insertions(+), 202 deletions(-)

diff --git a/klp-ui/src/views/system/file/all.vue b/klp-ui/src/views/system/file/all.vue
index 09073a763..aabbde30e 100644
--- a/klp-ui/src/views/system/file/all.vue
+++ b/klp-ui/src/views/system/file/all.vue
@@ -1,146 +1,134 @@
 <template>
   <div class="app-container">
-    <!-- 统计卡片 -->
-    <el-row :gutter="16" class="stat-row" v-if="activeTab === 'all'">
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-num">{{ stats.totalFiles }}</div>
-          <div class="stat-label">文件总数</div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card public">
-          <div class="stat-num">{{ stats.publicFiles }}</div>
-          <div class="stat-label">公开文件</div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card private">
-          <div class="stat-num">{{ stats.privateFiles }}</div>
-          <div class="stat-label">私有文件</div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-num">{{ stats.myFiles }}</div>
-          <div class="stat-label">我上传的</div>
-        </div>
-      </el-col>
-    </el-row>
 
     <!-- 左右分栏布局（可拖拽调节宽度） -->
     <div class="file-layout" ref="layoutContainer">
       <!-- 左侧：文件列表 -->
       <div class="file-left" :style="{ width: leftPanelWidth }">
-        <!-- 搜索栏 -->
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="文件名称" prop="fileName">
-        <el-input
-          v-model="queryParams.fileName"
-          placeholder="请输入文件名称"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="订单编号" prop="orderNo">
-        <el-input
-          v-model="queryParams.orderNo"
-          placeholder="请输入订单编号"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="所属部门" prop="dept">
-        <el-input
-          v-model="queryParams.dept"
-          placeholder="请输入部门"
-          clearable
-          style="width: 200px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="文件类型" prop="fileType">
-        <el-select
-          v-model="queryParams.fileType"
-          placeholder="请选择文件类型"
-          clearable
-          style="width: 200px"
-        >
-          <el-option
-            v-for="item in dict.type.sys_file_type"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="可见范围" prop="scopeType" v-if="activeTab !== 'share' && activeTab !== 'related'">
-        <el-select
-          v-model="queryParams.scopeType"
-          placeholder="请选择可见范围"
-          clearable
-          style="width: 200px"
-        >
-          <el-option label="公开" :value="1" />
-          <el-option label="私有" :value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="上传时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <!-- 统计卡片（两行每行两个） -->
+        <div class="summary-stat-container">
+          <el-card class="summary-card" shadow="hover">
+            <el-row :gutter="6">
+              <el-col :span="12">
+                <div class="summary-item">
+                  <span class="item-label">文件总数</span>
+                  <span class="item-value">{{ stats.totalFiles }}</span>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="summary-item">
+                  <span class="item-label">公开文件</span>
+                  <span class="item-value">{{ stats.publicFiles }}</span>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="6" style="margin-top: 4px;">
+              <el-col :span="12">
+                <div class="summary-item">
+                  <span class="item-label">私有文件</span>
+                  <span class="item-value">{{ stats.privateFiles }}</span>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="summary-item">
+                  <span class="item-label">我上传的</span>
+                  <span class="item-value">{{ stats.myFiles }}</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </div>
+        <!-- 文件类型筛选（两行） -->
+        <div class="file-type-tabs">
+          <span
+            v-for="opt in fileTypeOptions"
+            :key="opt.value"
+            class="type-tab"
+            :class="{ active: (queryParams.fileType || '') === opt.value }"
+            @click="handleTypeTabClick(opt.value)"
+          >{{ opt.label }}</span>
+        </div>
 
-    <!-- 操作按钮 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
+        <!-- 操作按钮 + 名称搜索 -->
+    <div class="toolbar-row">
+      <div class="toolbar-buttons">
         <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
+          v-if="activeTab === 'my' || activeTab === 'all'"
           @click="handleAdd"
         >上传文件</el-button>
-      </el-col>
-      <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
+      </div>
         <el-button
           type="danger"
           plain
           icon="el-icon-delete"
           size="mini"
+          v-if="activeTab === 'my' || activeTab === 'all'"
           :disabled="multiple"
+          style="margin-right: auto;"
           @click="handleDelete"
         >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
+      <div class="toolbar-search">
+        <el-input
+          v-model="queryParams.fileName"
+          style="flex: 1;"
+          prefix-icon="el-icon-search"
+          placeholder="按名称搜索"
+          clearable
           size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+          @change="handleQuery"
+          @keyup.enter.native="handleQuery"
+          @clear="handleQuery"
+        ></el-input>
+        <el-button icon="el-icon-sort" @click="toggleQuery"></el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
+      </div>
+    </div>
+
+    <!-- 高级搜索区域 -->
+    <div v-show="showQuery" class="advanced-search">
+      <el-form :model="queryParams" inline size="mini" class="advanced-search-form">
+        <el-form-item label="订单编号">
+          <el-input v-model="queryParams.orderNo" placeholder="订单编号" clearable @change="handleQuery" style="width: 140px;"></el-input>
+        </el-form-item>
+        <el-form-item label="所属部门">
+          <el-input v-model="queryParams.dept" placeholder="所属部门" clearable @change="handleQuery" style="width: 140px;"></el-input>
+        </el-form-item>
+        <el-form-item label="文件类型">
+          <el-select v-model="queryParams.fileType" placeholder="文件类型" clearable @change="handleQuery" style="width: 120px;">
+            <el-option v-for="item in dict.type.sys_file_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="可见范围">
+          <el-select v-model="queryParams.scopeType" placeholder="可见范围" clearable @change="handleQuery" style="width: 120px;">
+            <el-option label="公开" :value="1" />
+            <el-option label="私有" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上传时间">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            clearable
+            style="width: 240px;"
+            @change="handleQuery"
+          ></el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
 
     <!-- 文件列表表格（固定高度可滚动） -->
     <div class="file-table-wrapper">
-      <KLPTable v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" highlight-current-row @row-click="handleRowClick">
+      <div class="file-table-scroll">
+        <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">
@@ -159,6 +147,7 @@
         </template>
       </el-table-column>
     </KLPTable>
+      </div>
 
     <pagination
       v-show="total>0"
@@ -169,28 +158,6 @@
     />
     </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>
@@ -204,6 +171,8 @@
             <div class="preview-header">
               <span class="preview-filename" :title="selectedFile.fileName">{{ selectedFile.fileName }}</span>
               <div>
+                <el-button size="mini" type="warning" plain icon="el-icon-download" @click="handleExport">导出</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>
@@ -379,6 +348,8 @@ export default {
       multiple: true,
       // 显示搜索条件
       showSearch: true,
+      // 显示高级搜索
+      showQuery: false,
       // 总条数
       total: 0,
       // 文件列表
@@ -458,6 +429,11 @@ export default {
     }
   },
   computed: {
+    /** 文件类型筛选选项 */
+    fileTypeOptions() {
+      const dict = this.dict.type.sys_file_type || []
+      return [{ value: '', label: '全部' }, ...dict]
+    },
     /** 根据文件后缀分类，决定右侧用哪个预览组件 */
     fileTypeCategory() {
       if (!this.selectedFile) return null
@@ -581,16 +557,25 @@ export default {
         this.form.visibleUsers = []
       }
     },
-    /** 搜索按钮 */
+    /** 搜索 */
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
     },
+    /** 切换高级搜索 */
+    toggleQuery() {
+      this.showQuery = !this.showQuery
+    },
+    /** 文件类型筛选切换 */
+    handleTypeTabClick(value) {
+      this.queryParams.fileType = value || undefined
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
     /** 重置按钮 */
     resetQuery() {
       this.dateRange = []
       this.selectedFile = null
-      this.resetForm('queryForm')
       this.queryParams = {
         pageNum: 1,
         pageSize: 20,
@@ -600,7 +585,7 @@ export default {
         fileType: undefined,
         scopeType: undefined
       }
-      this.handleQuery()
+      this.getList()
     },
     /** 多选框 */
     handleSelectionChange(selection) {
@@ -838,38 +823,111 @@ export default {
 </script>
 
 <style scoped>
-.stat-row {
+/* 操作工具栏 */
+.toolbar-row {
+  display: flex;
+  align-items: center;
   margin-bottom: 8px;
 }
 
-.stat-card {
+.toolbar-buttons {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.toolbar-search {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  flex: 0 1 420px;
+}
+
+/* 高级搜索区域 */
+.advanced-search {
   background: #fff;
-  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
   padding: 10px 16px;
+  margin-bottom: 8px;
+}
+
+.advanced-search-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.advanced-search-form /deep/ .el-form-item {
+  margin-bottom: 0;
+}
+
+/* 文件类型筛选（两行） */
+.file-type-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.type-tab {
+  display: inline-block;
+  padding: 3px 10px;
+  font-size: 12px;
+  color: #606266;
+  border: 1px solid #dcdfe6;
+  border-radius: 2px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s;
+}
+
+.type-tab:hover {
+  color: #5F7BA0;
+  border-color: #5F7BA0;
+}
+
+.type-tab.active {
+  color: #fff;
+  background: #5F7BA0;
+  border-color: #5F7BA0;
+}
+
+/* 统计卡片 - 销售看板风格 */
+.summary-stat-container {
+  margin-bottom: 10px;
+}
+
+.summary-stat-container .summary-card {
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+}
+
+.summary-stat-container .summary-card /deep/ .el-card__body {
+  padding: 10px;
+}
+
+.summary-item {
   text-align: center;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
-  border-left: 3px solid #409eff;
+  padding: 6px 4px;
+  border: 1px solid #ebeef5;
+  border-radius: 2px;
 }
 
-.stat-card.public {
-  border-left-color: #67c23a;
-}
-
-.stat-card.private {
-  border-left-color: #e6a23c;
-}
-
-.stat-num {
-  font-size: 22px;
-  font-weight: 700;
-  color: #303133;
-  line-height: 1.2;
-}
-
-.stat-label {
+.item-label {
+  display: block;
   font-size: 12px;
   color: #909399;
-  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.item-value {
+  display: block;
+  font-size: 20px;
+  font-weight: bold;
+  color: #1f2d3d;
+  line-height: 1.2;
 }
 
 .upload-demo {
@@ -881,13 +939,13 @@ export default {
   display: flex;
   align-items: stretch;
   gap: 0;
+  height: calc(100vh - 100px);
 }
 
 .file-left {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 240px);
 }
 
 .file-right {
@@ -936,7 +994,6 @@ export default {
   border: 1px solid #ebeef5;
   border-radius: 4px;
   height: 100%;
-  min-height: calc(100vh - 300px);
   display: flex;
   flex-direction: column;
 }
@@ -1064,16 +1121,20 @@ export default {
   height: 400px;
 }
 
-/* 左侧表格区域撑满剩余空间可滚动 */
+/* 左侧表格区域撑满剩余空间，分页置底 */
 .file-table-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.file-table-scroll {
   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 40618aecc..543c70aaa 100644
--- a/klp-ui/src/views/system/file/index.vue
+++ b/klp-ui/src/views/system/file/index.vue
@@ -39,8 +39,8 @@
     <div class="file-layout" ref="layoutContainer">
       <!-- 左侧：文件列表 -->
       <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 v-if="activeTab === 'my'" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
           <el-form-item label="文件名称" prop="fileName">
             <el-input
               v-model="queryParams.fileName"
@@ -112,8 +112,61 @@
           </el-form-item>
         </el-form>
 
-        <!-- 操作按钮 -->
-        <el-row :gutter="10" class="mb8">
+        <!-- 搜索栏 - 共享文件 / 与我相关 -->
+        <div v-else class="share-search-area">
+          <div class="toolbar-row">
+            <div class="toolbar-buttons">
+              <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+            </div>
+            <div class="toolbar-search">
+              <el-input
+                v-model="queryParams.fileName"
+                style="flex: 1;"
+                prefix-icon="el-icon-search"
+                placeholder="按名称搜索"
+                clearable
+                size="mini"
+                @change="handleQuery"
+                @keyup.enter.native="handleQuery"
+                @clear="handleQuery"
+              ></el-input>
+              <el-button icon="el-icon-sort" @click="toggleQuery"></el-button>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
+            </div>
+          </div>
+          <div v-show="showQuery" class="advanced-search">
+            <el-form :model="queryParams" inline size="mini" class="advanced-search-form">
+              <el-form-item label="订单编号">
+                <el-input v-model="queryParams.orderNo" placeholder="订单编号" clearable @change="handleQuery" style="width: 140px;"></el-input>
+              </el-form-item>
+              <el-form-item label="所属部门">
+                <el-input v-model="queryParams.dept" placeholder="所属部门" clearable @change="handleQuery" style="width: 140px;"></el-input>
+              </el-form-item>
+              <el-form-item label="文件类型">
+                <el-select v-model="queryParams.fileType" placeholder="文件类型" clearable @change="handleQuery" style="width: 120px;">
+                  <el-option v-for="item in dict.type.sys_file_type" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="上传时间">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
+                  clearable
+                  style="width: 240px;"
+                  @change="handleQuery"
+                ></el-date-picker>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+
+        <!-- 操作按钮（仅我的文件 tab） -->
+        <el-row v-if="activeTab === 'my'" :gutter="10" class="mb8">
           <el-col :span="1.5" v-if="activeTab === 'my' || activeTab === 'all'">
             <el-button
               type="primary"
@@ -147,6 +200,7 @@
 
         <!-- 文件列表表格（固定高度可滚动） -->
         <div :class="['file-table-wrapper', { scrolling: activeTab === 'share' || activeTab === 'related' }]">
+          <div class="file-table-scroll">
           <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">
@@ -210,6 +264,7 @@
             </template>
           </el-table-column>
         </KLPTable>
+          </div>
 
         <pagination
           v-show="total>0"
@@ -220,28 +275,6 @@
         />
         </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） -->
@@ -257,6 +290,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>
@@ -435,6 +469,8 @@ export default {
       multiple: true,
       // 显示搜索条件
       showSearch: true,
+      // 显示高级搜索
+      showQuery: false,
       // 总条数
       total: 0,
       // 文件列表
@@ -641,10 +677,15 @@ export default {
       this.queryParams.pageNum = 1
       this.getList()
     },
+    /** 切换高级搜索 */
+    toggleQuery() {
+      this.showQuery = !this.showQuery
+    },
     /** 重置按钮 */
     resetQuery() {
       this.dateRange = []
       this.selectedFile = null
+      this.showQuery = false
       this.resetForm('queryForm')
       this.queryParams = {
         pageNum: 1,
@@ -948,13 +989,13 @@ export default {
   display: flex;
   align-items: stretch;
   gap: 0;
+  height: calc(100vh - 100px);
 }
 
 .file-left {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 240px);
 }
 
 .file-right {
@@ -1003,7 +1044,6 @@ export default {
   border: 1px solid #ebeef5;
   border-radius: 4px;
   height: 100%;
-  min-height: calc(100vh - 300px);
   display: flex;
   flex-direction: column;
 }
@@ -1131,15 +1171,62 @@ export default {
   height: 400px;
 }
 
-/* 左侧表格区域撑满剩余空间可滚动（仅 share / related tab） */
+/* 左侧表格区域撑满剩余空间可滚动 + 边框 */
 .file-table-wrapper.scrolling {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.file-table-wrapper.scrolling .file-table-scroll {
   flex: 1;
   overflow-y: auto;
 }
 
-/* 左侧文件元数据卡片 */
-.file-meta-card {
-  margin-top: 12px;
+/* 搜索栏（共享文件 / 与我相关 tab） */
+.share-search-area {
+  margin-bottom: 8px;
+  padding: 6px 0;
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.toolbar-buttons {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.toolbar-search {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  flex: 0 1 420px;
+}
+
+.advanced-search {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px 16px;
+  margin-bottom: 8px;
+}
+
+.advanced-search-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.advanced-search-form /deep/ .el-form-item {
+  margin-bottom: 0;
 }
 </style>