DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(file): 重构文件管理页面UI布局和搜索功能

Browse Source 
- 将统计卡片改为销售看板风格的汇总卡片布局
- 实现左右分栏布局并支持拖拽调节宽度
- 新增高级搜索功能和文件类型筛选标签页
- 优化搜索栏布局为工具栏样式并支持折叠
- 移除文件元数据卡片改用预览区域显示
- 添加查看文件详情和导出功能按钮
- 重构表格容器为固定高度可滚动布局
- 分离我的文件和共享文件的搜索界面差异
This commit is contained in:
jhd
2026-07-06 11:23:28 +08:00
parent cf4e5b78fc
commit b0ac38c050
2 changed files with 350 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

401
klp-ui/src/views/system/file/all.vue
View File

@@ -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） -->

151
klp-ui/src/views/system/file/index.vue
View File

@@ -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>