139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<template>
|
||
<div class="file-toolbar">
|
||
<!-- 第一行：视图切换 + 搜索框 + 上传/新建 -->
|
||
<div class="toolbar-top">
|
||
<el-button-group>
|
||
<el-button :type="currentMode === 'table' ? 'primary' : ''" @click="changeMode('table')">
|
||
<el-icon><List /></el-icon>
|
||
</el-button>
|
||
<el-button :type="currentMode === 'grid' ? 'primary' : ''" @click="changeMode('grid')">
|
||
<el-icon><Grid /></el-icon>
|
||
</el-button>
|
||
</el-button-group>
|
||
|
||
<el-input
|
||
v-model="searchText"
|
||
placeholder="搜索文件..."
|
||
clearable
|
||
class="search-input"
|
||
@keyup.enter="doSearch"
|
||
@input="onSearchInput"
|
||
>
|
||
<template #prefix><el-icon><Search /></el-icon></template>
|
||
</el-input>
|
||
|
||
<el-button-group v-if="menuType === 'my-files'">
|
||
<el-button type="primary" @click="$emit('upload')">
|
||
<el-icon><Upload /></el-icon>
|
||
<span style="margin-left: 4px">上传文件</span>
|
||
</el-button>
|
||
<el-button @click="$emit('newFolder')">
|
||
<el-icon><FolderAdd /></el-icon>
|
||
<span style="margin-left: 4px">新建文件夹</span>
|
||
</el-button>
|
||
</el-button-group>
|
||
|
||
<el-button type="danger" v-if="menuType === 'trash'" @click="$emit('emptyTrash')">
|
||
<el-icon><Delete /></el-icon>
|
||
<span style="margin-left: 4px">清空回收站</span>
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- 第二行：前进后退 + 路径 -->
|
||
<div class="toolbar-bottom">
|
||
<div class="path-controls">
|
||
<el-button v-if="showBack" @click="$emit('goBack')" circle title="返回上级">
|
||
<el-icon><Back /></el-icon>
|
||
</el-button>
|
||
<span class="current-path">{{ currentPath }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { List, Grid, Upload, FolderAdd, Delete, Back, Search } from '@element-plus/icons-vue'
|
||
|
||
const props = defineProps({
|
||
viewMode: { type: String, default: 'table' },
|
||
searchKeyword: { type: String, default: '' },
|
||
menuType: { type: String, default: 'my-files' },
|
||
currentPath: { type: String, default: '/' },
|
||
showBack: { type: Boolean, default: false }
|
||
})
|
||
|
||
const emit = defineEmits([
|
||
'update:viewMode',
|
||
'update:searchKeyword',
|
||
'search',
|
||
'refresh',
|
||
'upload',
|
||
'newFolder',
|
||
'emptyTrash',
|
||
'goBack'
|
||
])
|
||
|
||
const currentMode = ref(props.viewMode)
|
||
const searchText = ref(props.searchKeyword)
|
||
|
||
watch(() => props.viewMode, (val) => {
|
||
currentMode.value = val
|
||
})
|
||
|
||
watch(() => props.searchKeyword, (val) => {
|
||
searchText.value = val
|
||
})
|
||
|
||
const changeMode = (mode) => {
|
||
currentMode.value = mode
|
||
emit('update:viewMode', mode)
|
||
}
|
||
|
||
const onSearchInput = (val) => {
|
||
emit('update:searchKeyword', val)
|
||
}
|
||
|
||
const doSearch = () => {
|
||
emit('search')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.file-toolbar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.toolbar-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
}
|
||
|
||
.toolbar-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.path-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.current-path {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|