jmal
GitHub
commit
2b959c01c3
@ -137,6 +137,22 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 最近搜索记录🔍
|
||||
getRecentlySearchHistory: function(params) {
|
||||
return request({
|
||||
url: '/search/recentlySearchHistory',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 删除搜索记录🔍
|
||||
removeSearchHistory: function(params) {
|
||||
return request({
|
||||
url: '/search/deleteSearchHistory',
|
||||
method: 'delete',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 搜索文件🔍
|
||||
searchFile: function(params) {
|
||||
return request({
|
||||
|
||||
@ -1,469 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="dialogVisible"
|
||||
:show-close="false"
|
||||
custom-class="no-header-dialog"
|
||||
class="file-search-dialog">
|
||||
|
||||
<div class="search-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<div class="search-filters">
|
||||
<el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>文件类型</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown">
|
||||
<el-dropdown-item command="all">
|
||||
<i class="el-icon-document"></i> 全部文件
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="document">
|
||||
<i class="el-icon-document"></i> 文档
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="image">
|
||||
<i class="el-icon-picture"></i> 图片
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="video">
|
||||
<i class="el-icon-video-camera"></i> 视频
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="audio">
|
||||
<i class="el-icon-headset"></i> 音频
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-coin"></i>
|
||||
<span>文件大小</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown size-filter-dropdown">
|
||||
<div class="size-slider-container">
|
||||
<div class="size-slider-labels">
|
||||
<span>{{ formatFileSize(sizeRange[0]) }}</span>
|
||||
<span>{{ formatFileSize(sizeRange[1]) }}</span>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="sizeRange"
|
||||
range
|
||||
:min="sliderConfig.min"
|
||||
:max="sliderConfig.max"
|
||||
:step="sliderConfig.step"
|
||||
@change="handleSizeRangeChange">
|
||||
</el-slider>
|
||||
<div class="size-slider-presets">
|
||||
<el-button size="mini" @click="setSizePreset([0, 1048576])">≤ 1MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([1048576, 10485760])">1-10MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([10485760, 104857600])">10-100MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([104857600, 1073741824])">100MB-1GB</el-button>
|
||||
<el-button size="mini" @click="setSizePresetLarge()">≥ 1GB</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-date"></i>
|
||||
<span>修改时间</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown time-filter-dropdown">
|
||||
<div class="time-picker-container">
|
||||
<div class="time-presets">
|
||||
<el-button size="mini" @click="setTimePreset('today')">今天</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('yesterday')">昨天</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('thisWeek')">本周</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('lastWeek')">上周</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('thisMonth')">本月</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('lastMonth')">上个月</el-button>
|
||||
</div>
|
||||
<div class="custom-date-range">
|
||||
<p class="date-range-title">自定义时间范围</p>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="daterange"
|
||||
size="small"
|
||||
class="modern-date-picker"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="handleTimeChange">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索条件标签 -->
|
||||
<div class="search-tags" v-if="hasSearchConditions">
|
||||
<div v-if="keyword !== ''">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetKeyword">
|
||||
关键字: {{ keyword }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="fileTypeText !== '全部文件'">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetFileType">
|
||||
文件类型: {{ fileTypeText }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="hasSizeRange">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSizeRange">
|
||||
文件大小: {{ formatSizeRange }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="timeRange">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetTimeRange">
|
||||
时间范围: {{ formatTimeRange }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SearchDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
fileType: 'all',
|
||||
timeRange: null,
|
||||
sizeRange: [0, -1], // 默认范围：0 到 1GB
|
||||
fileTypeText: '全部文件',
|
||||
filterOption: {
|
||||
type: null,
|
||||
modifyStart: null,
|
||||
modifyEnd: null,
|
||||
sizeMin: null,
|
||||
sizeMax: null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSearchConditions() {
|
||||
return this.keyword || this.fileType !== 'all' || this.timeRange || this.hasSizeRange
|
||||
},
|
||||
hasSizeRange () {
|
||||
return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
|
||||
},
|
||||
formatTimeRange() {
|
||||
if (!this.timeRange) return ''
|
||||
return `${this.formatDate(this.timeRange[0])} 至 ${this.formatDate(this.timeRange[1])}`
|
||||
},
|
||||
formatSizeRange() {
|
||||
return `${this.formatFileSize(this.sizeRange[0])} - ${this.formatFileSize(this.sizeRange[1])}`
|
||||
},
|
||||
sliderConfig() {
|
||||
// 根据当前范围动态计算滑块配置
|
||||
if (this.sizeRange[0] >= 1073741824) {
|
||||
// 大文件模式 (1GB - 10GB)
|
||||
return {
|
||||
min: 1073741824,
|
||||
max: 10737418240,
|
||||
step: 20971520 // 20MB
|
||||
}
|
||||
} else {
|
||||
// 普通模式 (0 - 1GB)
|
||||
return {
|
||||
min: 0,
|
||||
max: 1073741824,
|
||||
step: 1024
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.dialogVisible = val
|
||||
},
|
||||
dialogVisible(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新筛选条件并通知父组件
|
||||
updateFilterOption() {
|
||||
this.filterOption = {
|
||||
type: this.fileType === 'all' ? null : this.fileType,
|
||||
modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
|
||||
modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
|
||||
sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
|
||||
sizeMax: this.hasSizeRange ? this.sizeRange[1] : null
|
||||
}
|
||||
|
||||
this.$emit('filter-change', this.filterOption)
|
||||
},
|
||||
|
||||
handleFileType(command) {
|
||||
this.fileType = command
|
||||
switch (command) {
|
||||
case 'all':
|
||||
this.fileTypeText = '全部文件'
|
||||
break
|
||||
case 'document':
|
||||
this.fileTypeText = '文档'
|
||||
break
|
||||
case 'image':
|
||||
this.fileTypeText = '图片'
|
||||
break
|
||||
case 'video':
|
||||
this.fileTypeText = '视频'
|
||||
break
|
||||
case 'audio':
|
||||
this.fileTypeText = '音频'
|
||||
break
|
||||
}
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleTimeChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleSizeRangeChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
setSizePreset(range) {
|
||||
this.sizeRange = range
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
setSizePresetLarge() {
|
||||
this.sizeRange = [1073741824, 10737418240]
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetKeyword() {
|
||||
this.$emit('update:keyword', '')
|
||||
this.$emit('update:visible', false)
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetFileType() {
|
||||
this.handleFileType('all')
|
||||
},
|
||||
|
||||
resetTimeRange() {
|
||||
this.timeRange = null
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetSizeRange() {
|
||||
this.sizeRange = [-1, -1]
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
return new Date(date).toLocaleDateString()
|
||||
},
|
||||
|
||||
formatFileSize(size) {
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (size === 0) return '0 B';
|
||||
const i = Math.floor(Math.log(size) / Math.log(1024));
|
||||
return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
|
||||
},
|
||||
|
||||
setTimePreset(preset) {
|
||||
const now = new Date()
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||||
let start, end
|
||||
|
||||
switch (preset) {
|
||||
case 'today':
|
||||
start = today
|
||||
end = new Date(today)
|
||||
end.setDate(today.getDate() + 1)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'yesterday':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - 1)
|
||||
end = new Date(today)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'thisWeek':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - today.getDay()) // 周日为一周第一天
|
||||
end = new Date(start)
|
||||
end.setDate(start.getDate() + 7)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'lastWeek':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - today.getDay() - 7)
|
||||
end = new Date(start)
|
||||
end.setDate(start.getDate() + 7)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'thisMonth':
|
||||
start = new Date(today.getFullYear(), today.getMonth(), 1)
|
||||
end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999)
|
||||
break
|
||||
case 'lastMonth':
|
||||
start = new Date(today.getFullYear(), today.getMonth() - 1, 1)
|
||||
end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
|
||||
break
|
||||
}
|
||||
this.timeRange = [start, end]
|
||||
this.updateFilterOption()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.file-search-dialog {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
>>> .el-dialog {
|
||||
margin-top: 6vh !important;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
margin-right: 160px;
|
||||
}
|
||||
|
||||
>>> .el-dialog__header {
|
||||
padding: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
>>> .el-dialog__body {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.el-divider--vertical {
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-dropdown {
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>>> .modern-date-picker {
|
||||
.el-range-editor {
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
.el-range-input {
|
||||
background: transparent;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-range-separator {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>>> .modern-dropdown {
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
margin: 2px 0;
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 250px;
|
||||
|
||||
>>> .el-tag {
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
background-color: #f5f7fa;
|
||||
border-color: transparent;
|
||||
color: #606266;
|
||||
|
||||
.el-tag__close {
|
||||
background-color: transparent;
|
||||
color: #909399;
|
||||
|
||||
&:hover {
|
||||
background-color: #909399;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
650
src/components/SearchOption/index.vue
Normal file
650
src/components/SearchOption/index.vue
Normal file
@ -0,0 +1,650 @@
|
||||
<template>
|
||||
|
||||
<div class="search-option-wrapper">
|
||||
<div class="search-option-result">
|
||||
<div>
|
||||
<span>
|
||||
搜索
|
||||
<span class="search-scope" v-if="searchScope">
|
||||
<el-tooltip class="item" effect="dark" :content="searchScope" placement="top">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
</span>:
|
||||
</span>
|
||||
<span>{{ keyword }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{searchResultCount}}</span>
|
||||
<span>个结果</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-search-option">
|
||||
<div class="search-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<div class="search-filters">
|
||||
<div>
|
||||
<el-checkbox
|
||||
v-model="searchOverall"
|
||||
class="search-option-checkbox"
|
||||
@change="handleSearchOverallChange"
|
||||
>全盘搜索
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox
|
||||
v-model="searchMount"
|
||||
class="search-option-checkbox"
|
||||
@change="handleSearchMountChange"
|
||||
>挂载目录
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>文件类型</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown">
|
||||
<el-dropdown-item command="all">
|
||||
<i class="el-icon-document"></i> 全部文件
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="document">
|
||||
<i class="el-icon-document"></i> 文档
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="image">
|
||||
<i class="el-icon-picture"></i> 图片
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="video">
|
||||
<i class="el-icon-video-camera"></i> 视频
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="audio">
|
||||
<i class="el-icon-headset"></i> 音频
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-coin"></i>
|
||||
<span>文件大小</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown size-filter-dropdown">
|
||||
<div class="size-slider-container">
|
||||
<div class="size-slider-labels">
|
||||
<span>{{ formatFileSize(sizeRange[0]) }}</span>
|
||||
<span>{{ formatFileSize(sizeRange[1]) }}</span>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="sizeRange"
|
||||
range
|
||||
:min="sliderConfig.min"
|
||||
:max="sliderConfig.max"
|
||||
:step="sliderConfig.step"
|
||||
@change="handleSizeRangeChange">
|
||||
</el-slider>
|
||||
<div class="size-slider-presets">
|
||||
<el-button size="mini" @click="setSizePreset([0, 1048576])">≤ 1MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([1048576, 10485760])">1-10MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([10485760, 104857600])">10-100MB</el-button>
|
||||
<el-button size="mini" @click="setSizePreset([104857600, 1073741824])">100MB-1GB</el-button>
|
||||
<el-button size="mini" @click="setSizePresetLarge()">≥ 1GB</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="click" class="filter-dropdown">
|
||||
<el-button type="text" class="filter-btn">
|
||||
<i class="el-icon-date"></i>
|
||||
<span>修改时间</span>
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown" class="modern-dropdown time-filter-dropdown">
|
||||
<div class="time-picker-container">
|
||||
<div class="time-presets">
|
||||
<el-button size="mini" @click="setTimePreset('today')">今天</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('yesterday')">昨天</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('thisWeek')">本周</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('lastWeek')">上周</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('thisMonth')">本月</el-button>
|
||||
<el-button size="mini" @click="setTimePreset('lastMonth')">上个月</el-button>
|
||||
</div>
|
||||
<div class="custom-date-range">
|
||||
<p class="date-range-title">自定义时间范围</p>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="daterange"
|
||||
size="small"
|
||||
class="modern-date-picker"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@change="handleTimeChange">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索条件标签 -->
|
||||
<div class="search-tags">
|
||||
<div v-if="searchPath !== 'undefined' && searchPath.length > 1 && !searchOverall">
|
||||
<el-tag
|
||||
@close="resetSearchPath">
|
||||
路径: {{ searchPath }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="searchOverall">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSearchOverall">
|
||||
全盘搜索
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="searchMount">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSearchMount">
|
||||
包含挂载目录
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="fileTypeText !== '全部文件'">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetFileType">
|
||||
文件类型: {{ fileTypeText }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="hasSizeRange">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetSizeRange">
|
||||
文件大小: {{ formatSizeRange }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-if="timeRange">
|
||||
<el-tag
|
||||
closable
|
||||
@close="resetTimeRange">
|
||||
时间范围: {{ formatTimeRange }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SearchOption',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
hasSearchConditionsParam: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterOptionParam: {
|
||||
type: Object,
|
||||
default: function() {}
|
||||
},
|
||||
queryCondition: {
|
||||
type: Object,
|
||||
default: function() {}
|
||||
},
|
||||
searchPath: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
searchResultCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileType: 'all',
|
||||
timeRange: null,
|
||||
sizeRange: [0, -1], // 默认范围：0 到 1GB
|
||||
fileTypeText: '全部文件',
|
||||
searchMount: false,
|
||||
searchOverall: false,
|
||||
filterOption: this.emptyFilterOption
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
searchScope() {
|
||||
const queryTagId = this.$route.query.tagId
|
||||
const isRootPath = this.$route.query.path === '/';
|
||||
if (queryTagId && isRootPath) {
|
||||
return '搜索范围: 仅包含标签文件, 不含子文件'
|
||||
}
|
||||
if (this.queryCondition.isMount && isRootPath) {
|
||||
return '搜索范围: 挂载目录里的所有文件, 不含挂载目录本身'
|
||||
}
|
||||
if (this.queryCondition.isFavorite && isRootPath) {
|
||||
return '搜索范围: 仅包含收藏文件, 不含子文件'
|
||||
}
|
||||
if (this.queryCondition.audio && isRootPath) {
|
||||
return '搜索范围: 仅包含音频文件'
|
||||
}
|
||||
if (this.queryCondition.video && isRootPath) {
|
||||
return '搜索范围: 仅包含视频文件'
|
||||
}
|
||||
if (this.queryCondition.document && isRootPath) {
|
||||
return '搜索范围: 仅包含文档文件'
|
||||
}
|
||||
if (this.queryCondition.image && isRootPath) {
|
||||
return '搜索范围: 仅包含图片文件'
|
||||
}
|
||||
if (this.queryCondition.recently && isRootPath) {
|
||||
return '搜索范围: 仅包含文件, 不含目录'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
hasSearchConditions() {
|
||||
return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount || this.searchOverall
|
||||
},
|
||||
emptyFilterOption() {
|
||||
return {
|
||||
type: null,
|
||||
modifyStart: null,
|
||||
modifyEnd: null,
|
||||
sizeMin: null,
|
||||
sizeMax: null,
|
||||
searchMount: false,
|
||||
searchOverall: false,
|
||||
}
|
||||
},
|
||||
hasSizeRange () {
|
||||
return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
|
||||
},
|
||||
formatTimeRange() {
|
||||
if (!this.timeRange) return ''
|
||||
return `${this.formatDate(this.timeRange[0])} 至 ${this.formatDate(this.timeRange[1])}`
|
||||
},
|
||||
formatSizeRange() {
|
||||
return `${this.formatFileSize(this.sizeRange[0])} - ${this.formatFileSize(this.sizeRange[1])}`
|
||||
},
|
||||
sliderConfig() {
|
||||
// 根据当前范围动态计算滑块配置
|
||||
if (this.sizeRange[0] >= 1073741824) {
|
||||
// 大文件模式 (1GB - 10GB)
|
||||
return {
|
||||
min: 1073741824,
|
||||
max: 10737418240,
|
||||
step: 20971520 // 20MB
|
||||
}
|
||||
} else {
|
||||
// 普通模式 (0 - 1GB)
|
||||
return {
|
||||
min: 0,
|
||||
max: 1073741824,
|
||||
step: 1024
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterOption(newValue) {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新筛选条件并通知父组件
|
||||
updateFilterOption() {
|
||||
this.filterOption = {
|
||||
type: this.fileType === 'all' ? null : this.fileType,
|
||||
modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
|
||||
modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
|
||||
sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
|
||||
sizeMax: this.hasSizeRange ? this.sizeRange[1] : null,
|
||||
searchMount: this.searchMount,
|
||||
searchOverall: this.searchOverall
|
||||
}
|
||||
|
||||
this.$emit('filter-change')
|
||||
this.$emit('update:filter-option-param', this.filterOption)
|
||||
this.$emit('update:has-search-conditions-param', this.hasSearchConditions)
|
||||
localStorage.setItem('searchFilterOption', JSON.stringify(this.filterOption))
|
||||
},
|
||||
|
||||
clearFilterOption() {
|
||||
this.filterOption = this.emptyFilterOption
|
||||
this.setFilterOption(this.filterOption)
|
||||
},
|
||||
|
||||
setFilterOption(filterOption) {
|
||||
if (!filterOption) return
|
||||
|
||||
// 设置文件类型
|
||||
this.handleFileType(filterOption.type || 'all')
|
||||
|
||||
// 设置时间范围
|
||||
if (filterOption.modifyStart && filterOption.modifyEnd) {
|
||||
this.timeRange = [
|
||||
new Date(filterOption.modifyStart),
|
||||
new Date(filterOption.modifyEnd)
|
||||
]
|
||||
} else {
|
||||
this.timeRange = null
|
||||
}
|
||||
|
||||
// 设置文件大小范围
|
||||
if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
|
||||
this.sizeRange = [filterOption.sizeMin, filterOption.sizeMax]
|
||||
} else {
|
||||
this.sizeRange = [-1, -1]
|
||||
}
|
||||
|
||||
// 设置搜索选项
|
||||
this.searchMount = !!filterOption.searchMount
|
||||
this.searchOverall = !!filterOption.searchOverall
|
||||
|
||||
// 更新过滤条件
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleFileType(command) {
|
||||
this.fileType = command
|
||||
switch (command) {
|
||||
case 'all':
|
||||
this.fileTypeText = '全部文件'
|
||||
break
|
||||
case 'document':
|
||||
this.fileTypeText = '文档'
|
||||
break
|
||||
case 'image':
|
||||
this.fileTypeText = '图片'
|
||||
break
|
||||
case 'video':
|
||||
this.fileTypeText = '视频'
|
||||
break
|
||||
case 'audio':
|
||||
this.fileTypeText = '音频'
|
||||
break
|
||||
}
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleTimeChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleSizeRangeChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
setSizePreset(range) {
|
||||
this.sizeRange = range
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
setSizePresetLarge() {
|
||||
this.sizeRange = [1073741824, 10737418240]
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetSearchPath() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetSearchMount() {
|
||||
this.searchMount = false
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetSearchOverall() {
|
||||
this.searchOverall = false
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetFileType() {
|
||||
this.handleFileType('all')
|
||||
},
|
||||
|
||||
resetTimeRange() {
|
||||
this.timeRange = null
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
resetSizeRange() {
|
||||
this.sizeRange = [-1, -1]
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
return new Date(date).toLocaleDateString()
|
||||
},
|
||||
|
||||
formatFileSize(size) {
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (size === 0) return '0 B';
|
||||
const i = Math.floor(Math.log(size) / Math.log(1024));
|
||||
return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
|
||||
},
|
||||
|
||||
setTimePreset(preset) {
|
||||
const now = new Date()
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||||
let start, end
|
||||
|
||||
switch (preset) {
|
||||
case 'today':
|
||||
start = today
|
||||
end = new Date(today)
|
||||
end.setDate(today.getDate() + 1)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'yesterday':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - 1)
|
||||
end = new Date(today)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'thisWeek':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - today.getDay()) // 周日为一周第一天
|
||||
end = new Date(start)
|
||||
end.setDate(start.getDate() + 7)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'lastWeek':
|
||||
start = new Date(today)
|
||||
start.setDate(today.getDate() - today.getDay() - 7)
|
||||
end = new Date(start)
|
||||
end.setDate(start.getDate() + 7)
|
||||
end.setMilliseconds(-1)
|
||||
break
|
||||
case 'thisMonth':
|
||||
start = new Date(today.getFullYear(), today.getMonth(), 1)
|
||||
end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999)
|
||||
break
|
||||
case 'lastMonth':
|
||||
start = new Date(today.getFullYear(), today.getMonth() - 1, 1)
|
||||
end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
|
||||
break
|
||||
}
|
||||
this.timeRange = [start, end]
|
||||
this.updateFilterOption()
|
||||
},
|
||||
|
||||
handleSearchMountChange() {
|
||||
this.updateFilterOption()
|
||||
},
|
||||
handleSearchOverallChange() {
|
||||
this.updateFilterOption()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/custom-ui.scss";
|
||||
.search-option-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.search-option-result {
|
||||
padding: 12px 24px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
span:first-child {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
span:first-child {
|
||||
color: #409EFF;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-search-option {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 12px 10px;
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.el-divider--vertical {
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-dropdown {
|
||||
.filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>>> .modern-date-picker {
|
||||
.el-range-editor {
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
.el-range-input {
|
||||
background: transparent;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-range-separator {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-option-checkbox {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
>>> .modern-dropdown {
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
margin: 2px 0;
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 250px;
|
||||
|
||||
>>> .el-tag {
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
background-color: #f5f7fa;
|
||||
border-color: transparent;
|
||||
color: #606266;
|
||||
|
||||
.el-tag__close {
|
||||
background-color: transparent;
|
||||
color: #909399;
|
||||
|
||||
&:hover {
|
||||
background-color: #909399;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -90,7 +90,7 @@
|
||||
<div class="search-class">
|
||||
<el-popover
|
||||
v-if="showUploadButton"
|
||||
v-show="!(pathList.length < 2 && homeHidden)"
|
||||
v-show="!(isRootPath && homeHidden)"
|
||||
v-model="isShowNewFolder"
|
||||
placement="bottom"
|
||||
trigger="hover"
|
||||
@ -156,30 +156,62 @@
|
||||
></button-upload>
|
||||
</el-popover>
|
||||
|
||||
<el-input
|
||||
v-show="showSearchButton"
|
||||
<el-autocomplete
|
||||
ref="searchInput"
|
||||
placeholder="搜索"
|
||||
:class="searchInputClass"
|
||||
v-show="showSearchButton"
|
||||
:fetch-suggestions="queryRecentlySearchHistory"
|
||||
hide-loading
|
||||
:debounce="300"
|
||||
:popper-append-to-body="false"
|
||||
:placeholder="`搜索 ${cmdKey} P`"
|
||||
v-model="searchFileName"
|
||||
@keyup.enter.native="searchFileEnter(searchFileName)"
|
||||
@focus="setInputFocus"
|
||||
@input="searchFileEnter(searchFileName)"
|
||||
@blur="setInputBlur()"
|
||||
@clear="searchFileEnter(searchFileName)"
|
||||
@focus="searchInputFocus"
|
||||
@blur="searchInputBlur"
|
||||
@select="handleSelectSearchHistory"
|
||||
>
|
||||
<template v-slot:suffix>
|
||||
<el-popover
|
||||
v-if="searchFileName"
|
||||
placement="bottom-end"
|
||||
popper-class="search-filter-popover"
|
||||
trigger="click">
|
||||
<search-dialog :visible.sync="searchDialogVisible" :keyword.sync="searchFileName" @filter-change="searchFilterChange"></search-dialog>
|
||||
<el-button slot="reference" type="text" :class="searchOptionBtnClass" @click="searchDialogVisible = true">
|
||||
<i class="el-icon-s-operation"></i>
|
||||
<div>
|
||||
<el-button v-if="searchFileName" type="text" class="search-close-btn" @click="searchClose">
|
||||
<i class="el-icon-circle-close"></i>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-show="searchFileName"
|
||||
placement="bottom-end"
|
||||
popper-class="search-filter-popover"
|
||||
trigger="click">
|
||||
<search-option
|
||||
ref="searchOption"
|
||||
:has-search-conditions-param.sync="hasSearchFilterOption"
|
||||
:keyword.sync="searchFileName"
|
||||
:filter-option-param.sync="filterOption"
|
||||
:query-condition="queryCondition"
|
||||
:search-path="currentDirectory"
|
||||
:search-result-count="pagination['total']"
|
||||
@filter-change="searchFilterChange" >
|
||||
</search-option>
|
||||
<el-button slot="reference" type="text" :class="searchOptionBtnClass" @click.native="showSearchOption">
|
||||
<i class="el-icon-s-operation"></i>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- 自定义提示项 -->
|
||||
<template #default="{ item }" class="autocomplete-suggestion-custom">
|
||||
<div class="suggestion-item">
|
||||
<div class="suggestion-item-title">
|
||||
<i class="el-icon-time"></i>
|
||||
<span class="suggestion-item-text">{{ item.keyword }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="text" icon="el-icon-close" class="clear-search-history-btn" @click.native.prevent="clearSearchHistory(item, $event)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-autocomplete>
|
||||
<el-dropdown
|
||||
size="medium"
|
||||
style="height: 40px;"
|
||||
@ -831,7 +863,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchDialog from '@/components/SearchDialog/index.vue'
|
||||
import SearchOption from '@/components/SearchOption/index.vue'
|
||||
import DialogFileList from '@/components/ShowFile/DialogFileList.vue'
|
||||
import FileClipboard from '@/components/ShowFile/FileClipboard.vue'
|
||||
import store from '@/store'
|
||||
@ -872,7 +904,7 @@ export default {
|
||||
components: {
|
||||
FileClipboard,
|
||||
DialogFileList,
|
||||
SearchDialog,
|
||||
SearchOption,
|
||||
FileDetails,
|
||||
TagDialog,
|
||||
ShareDialog,
|
||||
@ -948,7 +980,7 @@ export default {
|
||||
queryCondition: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return { isFolder: null }
|
||||
return { isFolder: null, isMount: null }
|
||||
},
|
||||
},
|
||||
singleMenus: {
|
||||
@ -1018,6 +1050,7 @@ export default {
|
||||
renameFileName: '',
|
||||
searchFileName: '',
|
||||
pathList: [{ folder: '' }],
|
||||
currentDirectory: '/', // 当前路径
|
||||
fileList: [],
|
||||
pageLoadCompleteList: [],
|
||||
pagination: {
|
||||
@ -1160,10 +1193,11 @@ export default {
|
||||
deleteLoading: false, // 删除loading
|
||||
debounceSearch: null,// 搜索防抖
|
||||
debounceGetFileList: null,// 获取文件列表防抖
|
||||
searchDialogVisible: false,
|
||||
filterOption: {}, // 搜索选项
|
||||
searchHistoryList: [],// 搜索历史列表
|
||||
hasSearchFilterOption: false, // 是否有搜索选项
|
||||
fileUsername: '', // 一般用于挂载文件
|
||||
searchInputClass: 'search-input' // 搜索输入框样式
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -1184,15 +1218,14 @@ export default {
|
||||
}
|
||||
},
|
||||
searchOptionBtnClass() {
|
||||
if (this.hasSearchFilterOption) {
|
||||
return 'search-option-btn search-option-btn-active'
|
||||
} else {
|
||||
return 'search-option-btn'
|
||||
}
|
||||
return this.hasSearchFilterOption ? 'search-option-btn search-option-btn-active' : 'search-option-btn'
|
||||
},
|
||||
cmdKey() {
|
||||
return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
|
||||
},
|
||||
isRootPath() {
|
||||
return !this.$route.query.path || this.$route.query.path.length < 2
|
||||
},
|
||||
fileClipboard() {
|
||||
return store.getters.fileClipboard
|
||||
},
|
||||
@ -1300,6 +1333,12 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
searchFileName(newValue) {
|
||||
if (!newValue) {
|
||||
this.hasSearchFilterOption = false
|
||||
this.$refs.searchOption.clearFilterOption()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 监听返回
|
||||
@ -1365,6 +1404,11 @@ export default {
|
||||
this.$router.replace({ query })
|
||||
}
|
||||
|
||||
if (this.$route.query.keyword) {
|
||||
this.filterOption = localStorage.getItem('searchFilterOption') ? JSON.parse(localStorage.getItem('searchFilterOption')) : {}
|
||||
this.$refs.searchOption.setFilterOption(this.filterOption)
|
||||
}
|
||||
|
||||
let that = this
|
||||
window.onresize = function() {
|
||||
that.clientHeight =
|
||||
@ -1511,11 +1555,11 @@ export default {
|
||||
event.stopPropagation()
|
||||
}
|
||||
// ctrl + P / cmd + P
|
||||
// if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
|
||||
// this.searchDialogVisible = true
|
||||
// event.preventDefault()
|
||||
// event.stopPropagation()
|
||||
// }
|
||||
if (isCmd && keyCode === 80 && !checkPreviewVisible) {
|
||||
this.$refs.searchInput.focus()
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
},
|
||||
keyup(event) {
|
||||
const { keyCode } = event
|
||||
@ -2795,6 +2839,7 @@ export default {
|
||||
} else {
|
||||
this.pagination.pageIndex = 1
|
||||
}
|
||||
this.currentDirectory = decodeURIComponent(this.getQueryPath())
|
||||
this.pageLoadCompleteList[this.pagination.pageIndex] = false
|
||||
this.tableLoading = true
|
||||
this.finished = false
|
||||
@ -2922,6 +2967,7 @@ export default {
|
||||
this.vmode
|
||||
}&path=${path}${keyword}${searchOpenFolder}${queryTagId}${basePath}${folder}`
|
||||
)
|
||||
|
||||
api.searchFile({
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
@ -2942,6 +2988,9 @@ export default {
|
||||
queryModifyEnd: this.filterOption.modifyEnd,
|
||||
querySizeMin: this.filterOption.sizeMin,
|
||||
querySizeMax: this.filterOption.sizeMax,
|
||||
searchMount: this.filterOption.searchMount,
|
||||
isMount: this.queryCondition.isMount,
|
||||
searchOverall: this.filterOption.searchOverall,
|
||||
}).then(res => {
|
||||
this.loadData(res, onLoad)
|
||||
this.listModeSearch = true
|
||||
@ -3016,6 +3065,7 @@ export default {
|
||||
if (this.$route.query.keyword !== 'undefined') {
|
||||
this.searchFileName = this.$route.query.keyword
|
||||
}
|
||||
this.searchInputBlur()
|
||||
const searchPathIndex = this.pathList.findIndex(item => item.search)
|
||||
if (this.$route.query.searchOpenFolder && searchPathIndex > -1) {
|
||||
this.searchFileAndOpenDir(this.$route.query.searchOpenFolder, onLoad)
|
||||
@ -3036,6 +3086,7 @@ export default {
|
||||
order: this.sortable.order,
|
||||
isFolder: this.queryCondition.isFolder,
|
||||
isFavorite: this.queryCondition.isFavorite,
|
||||
isMount: this.queryCondition.isMount,
|
||||
isTrash: this.queryCondition.isTrash,
|
||||
tagId: this.queryCondition.tagId,
|
||||
queryCondition: this.queryCondition,
|
||||
@ -3413,7 +3464,8 @@ export default {
|
||||
this.menus = JSON.parse(JSON.stringify(this.singleMenus))
|
||||
// 挂载的文件
|
||||
const owner = localStorage.getItem('mountFileOwner')
|
||||
if (this.$route.query.folder && owner) {
|
||||
const notSelf = row.userId && row.userId !== this.$store.getters.userId
|
||||
if ((this.$route.query.folder && owner) || notSelf) {
|
||||
// 根据权限设置菜单
|
||||
this.setMenusByPermission(row)
|
||||
} else {
|
||||
@ -3453,14 +3505,14 @@ export default {
|
||||
)
|
||||
this.shareToken = undefined
|
||||
// 在download之前添加复制下载链接选项
|
||||
this.addMenusCopyDownLoadLinks(downloadIndex)
|
||||
if (row.isPrivacy) {
|
||||
// 如果是私密分享需要先获取shareToken
|
||||
api.generateShareToken({fileId: row.id}).then(res => {
|
||||
this.shareToken = res.data
|
||||
this.addMenusCopyDownLoadLinks(downloadIndex)
|
||||
}).catch(() => {
|
||||
this.menus.splice(downloadIndex, 1)
|
||||
})
|
||||
} else {
|
||||
this.addMenusCopyDownLoadLinks(downloadIndex)
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -3520,8 +3572,8 @@ export default {
|
||||
this.menuTriangle = ''
|
||||
const e = {}
|
||||
e.pageX = event.pageX + 5
|
||||
e.pageY = event.pageY + 2
|
||||
e.clientX = event.clientX + 5
|
||||
e.pageY = event.pageY + 20
|
||||
e.clientX = event.clientX + 50
|
||||
e.clientY = event.clientY + 2
|
||||
this.$refs.contextShow.showMenu(e)
|
||||
this.cellMouseIndex = -1
|
||||
@ -4475,26 +4527,54 @@ export default {
|
||||
this.fileHandler = {}
|
||||
this.specifyPreviewer = 'office'
|
||||
},
|
||||
searchFilterChange(filterOption) {
|
||||
this.filterOption = filterOption
|
||||
let hasSearchFilterOption = false
|
||||
if (filterOption.type !== 'all' && filterOption.type !== null) {
|
||||
hasSearchFilterOption = true
|
||||
}
|
||||
if (filterOption.modifyStart !== null && filterOption.modifyEnd !== null) {
|
||||
hasSearchFilterOption = true
|
||||
}
|
||||
if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
|
||||
hasSearchFilterOption = true
|
||||
}
|
||||
this.hasSearchFilterOption = hasSearchFilterOption
|
||||
|
||||
searchClose() {
|
||||
this.searchFileName = ''
|
||||
this.searchInputBlur()
|
||||
this.searchFileEnter()
|
||||
},
|
||||
searchInputFocus() {
|
||||
this.searchInputClass = 'search-input search-input-focus'
|
||||
this.setInputFocus()
|
||||
},
|
||||
searchInputBlur() {
|
||||
this.searchInputClass = this.searchFileName ? 'search-input search-input-focus' : 'search-input'
|
||||
this.setInputBlur()
|
||||
},
|
||||
searchFilterChange() {
|
||||
this.debounceSearch(this.searchFileName, false)
|
||||
},
|
||||
checkPreviewVisible() {
|
||||
if (this.searchDialogVisible) {
|
||||
return true
|
||||
showSearchOption() {
|
||||
},
|
||||
queryRecentlySearchHistory(queryString, cb) {
|
||||
if (this.searchFileName) {
|
||||
cb([])
|
||||
return
|
||||
}
|
||||
api.getRecentlySearchHistory({keyword: queryString}).then(res => {
|
||||
this.searchHistoryList = res.data || []
|
||||
cb(this.searchHistoryList)
|
||||
}).catch(error => {
|
||||
console.error("Error fetching search history:", error)
|
||||
this.searchHistoryList = []
|
||||
cb([])
|
||||
});
|
||||
},
|
||||
handleSelectSearchHistory(item) {
|
||||
this.searchFileName = item.keyword
|
||||
this.filterOption = item
|
||||
this.debounceSearch(this.searchFileName, false)
|
||||
this.$refs.searchOption.setFilterOption(item)
|
||||
},
|
||||
clearSearchHistory(itemToDelete, event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const idToDelete = itemToDelete.id
|
||||
api.removeSearchHistory({id: idToDelete}).then(() => {
|
||||
const index = this.searchHistoryList.findIndex(item => item.id === idToDelete)
|
||||
this.searchHistoryList.splice(index, 1)
|
||||
})
|
||||
},
|
||||
checkPreviewVisible() {
|
||||
if (this.iframePreviewVisible) {
|
||||
return true
|
||||
}
|
||||
@ -4757,14 +4837,76 @@ export default {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 230px;
|
||||
transition: width 0.3s ease-in-out;
|
||||
>>> .el-input--suffix .el-input__inner {
|
||||
padding-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-focus {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.search-close-btn {
|
||||
padding: 4px;
|
||||
color: #C0C4CC;
|
||||
:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.search-option-btn {
|
||||
padding: 8px;
|
||||
padding: 4px;
|
||||
margin-right: 4px;
|
||||
color: #606266;
|
||||
:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.search-option-btn-active {
|
||||
padding: 8px;
|
||||
background: #409EFF;
|
||||
color: #fff;
|
||||
:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
>>> .el-autocomplete-suggestion li {
|
||||
padding: 0 5px 0 15px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.suggestion-item-title {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.suggestion-item-text {
|
||||
width: 152px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-search-history-btn {
|
||||
padding: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.clear-search-history-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -198,10 +198,11 @@ export default {
|
||||
this.filepath = this.getLocalPath(this.file.path)
|
||||
this.pathUrl = `/?path=${this.filepath}&highlight=${this.file.name}`
|
||||
this.getIsSync()
|
||||
if (this.fileUsername) {
|
||||
const isMountFile = this.fileUsername || this.file.userId !== this.$store.getters.userId ? this.file.userId : undefined
|
||||
if (isMountFile) {
|
||||
fileApi.getMountFileInfo({
|
||||
fileId: this.file.id,
|
||||
fileUsername: this.fileUsername
|
||||
fileUserId: this.file.userId,
|
||||
}).then((res) => {
|
||||
const path = this.getLocalPath(res.data.path)
|
||||
this.filepath = path
|
||||
|
||||
31
src/styles/custom-ui.scss
Normal file
31
src/styles/custom-ui.scss
Normal file
@ -0,0 +1,31 @@
|
||||
>>> .el-checkbox {
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox__inner {
|
||||
background-color: #f0f0f0; /* 浅灰色背景 */
|
||||
border-color: #dcdcdc; /* 浅灰色边框 */
|
||||
border-radius: 4px; /* 圆角 */
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #a0a0a0; /* 深灰色背景 */
|
||||
border-color: #a0a0a0; /* 深灰色边框 */
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
border-color: #ffffff; /* 白色勾号 */
|
||||
}
|
||||
|
||||
.el-checkbox__inner:hover {
|
||||
//border-color: #b0b0b0; /* hover 时边框颜色 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
@ -29,19 +29,15 @@ export default {
|
||||
},
|
||||
// 预览文件的url
|
||||
previewUrl: function(username, file, token, shareToken, serverUrl) {
|
||||
let owner = null
|
||||
if (username !== store.getters.name || localStorage.getItem('mountFileOwner') !== null) {
|
||||
owner = localStorage.getItem('mountFileOwner')
|
||||
} else {
|
||||
owner = username
|
||||
}
|
||||
if (owner == null) {
|
||||
owner = store.getters.name
|
||||
}
|
||||
let baseUrl = serverUrl || this.baseUrl
|
||||
let fileUrl = `${baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
|
||||
let fileUrl = `${baseUrl}/file/${store.getters.name}${encodeURI(file.path)}${encodeURI(file.name)}`
|
||||
fileUrl = fileUrl.replaceAll('#', '%23')
|
||||
fileUrl = fileUrl.replaceAll(/%5C/g, '/')
|
||||
|
||||
if (file.userId !== store.getters.userId && token && !shareToken) {
|
||||
return `${baseUrl}/pre-file/${file.id}/${encodeURI(file.name)}?jmal-token=${token}&name=${username}`
|
||||
}
|
||||
|
||||
if (token) {
|
||||
return `${fileUrl}?jmal-token=${token}&name=${username}`
|
||||
}
|
||||
|
||||
@ -26,7 +26,8 @@ export default {
|
||||
prop: 'updateDate', order: 'descending'
|
||||
},
|
||||
queryCondition: {
|
||||
isFolder:false
|
||||
isFolder:false,
|
||||
audio: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
|
||||
@ -26,7 +26,8 @@ export default {
|
||||
prop: 'updateDate', order: 'descending'
|
||||
},
|
||||
queryCondition: {
|
||||
isFolder: false
|
||||
isFolder: false,
|
||||
document: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
|
||||
@ -25,7 +25,8 @@ export default {
|
||||
prop: 'updateDate', order: 'descending'
|
||||
},
|
||||
queryCondition: {
|
||||
isFolder: false
|
||||
isFolder: false,
|
||||
image: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
|
||||
@ -26,7 +26,8 @@ export default {
|
||||
prop: 'updateDate', order: 'descending'
|
||||
},
|
||||
queryCondition: {
|
||||
isFolder: false
|
||||
isFolder: false,
|
||||
video: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
|
||||
56
src/views/mount/index.vue
Normal file
56
src/views/mount/index.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<show-file
|
||||
:isCollectView="true"
|
||||
:defaultGrid="true"
|
||||
:sortable="sortable"
|
||||
:orderCustom="true"
|
||||
:showClipboard="true"
|
||||
:defaultSort="sortable"
|
||||
:queryCondition="queryCondition"
|
||||
:contextMenus="contextMenus"
|
||||
homeHidden
|
||||
>
|
||||
</show-file>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShowFile from "@/components/ShowFile/ShowFile";
|
||||
import { createFiles, fileArrangements } from '@/utils/file-operations'
|
||||
|
||||
export default {
|
||||
components: {ShowFile},
|
||||
data() {
|
||||
return {
|
||||
sortable: {
|
||||
prop: 'name', order: 'ascending'
|
||||
},
|
||||
queryCondition: {
|
||||
isMount: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
{ iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
|
||||
{ iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
|
||||
{ label: '显示文件夹大小', operation: 'show-folder-size'},
|
||||
]
|
||||
},
|
||||
{ label: '排列方式', operation: 'arrangement' ,child: fileArrangements
|
||||
},
|
||||
{ label: '刷新', operation: 'refresh'},
|
||||
{ divider: true, operation: 'divider' },
|
||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
||||
},
|
||||
{ divider: true, operation: 'divider' },
|
||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
prop: 'uploadDate', order: 'descending'
|
||||
},
|
||||
queryCondition: {
|
||||
isFolder:false
|
||||
isFolder: false,
|
||||
recently: true
|
||||
},
|
||||
contextMenus: [
|
||||
{ label: '查看', operation: 'viewMode' ,child: [
|
||||
|
||||
@ -392,4 +392,7 @@ export default {
|
||||
>>>.box-card {
|
||||
max-width: 1440px;
|
||||
}
|
||||
>>> .el-table .cell.el-tooltip {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user