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