106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="file-header">
|
||
|
|
<div class="breadcrumbs">
|
||
|
|
<a-breadcrumb>
|
||
|
|
<a-breadcrumb-item
|
||
|
|
v-for="(item, index) in breadcrumbPath"
|
||
|
|
:key="index"
|
||
|
|
:class="{ 'clickable': index < breadcrumbPath.length - 1 }"
|
||
|
|
@click="handleBreadcrumbClick(index)"
|
||
|
|
>
|
||
|
|
{{ item }}
|
||
|
|
</a-breadcrumb-item>
|
||
|
|
</a-breadcrumb>
|
||
|
|
<a-button
|
||
|
|
type="text"
|
||
|
|
shape="circle"
|
||
|
|
@click="handleRefresh"
|
||
|
|
:loading="refreshing"
|
||
|
|
tooltip="刷新数据"
|
||
|
|
>
|
||
|
|
<template #icon>
|
||
|
|
<icon-refresh :spin="refreshing" />
|
||
|
|
</template>
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
<a-space>
|
||
|
|
<a-button type="outline" @click="handleUpload">
|
||
|
|
<template #icon><icon-upload /></template>
|
||
|
|
上传文件
|
||
|
|
</a-button>
|
||
|
|
<a-button type="primary" @click="handleCreateFolder">
|
||
|
|
<template #icon><icon-plus /></template>
|
||
|
|
新建文件夹
|
||
|
|
</a-button>
|
||
|
|
</a-space>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { IconRefresh, IconUpload, IconPlus } from '@arco-design/web-vue/es/icon';
|
||
|
|
|
||
|
|
// 定义props
|
||
|
|
const props = defineProps({
|
||
|
|
breadcrumbPath: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
refreshing: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 定义emit事件
|
||
|
|
const emit = defineEmits(['breadcrumb-click', 'refresh', 'upload', 'create-folder']);
|
||
|
|
|
||
|
|
// 处理面包屑点击
|
||
|
|
const handleBreadcrumbClick = (index) => {
|
||
|
|
emit('breadcrumb-click', index);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 处理刷新
|
||
|
|
const handleRefresh = () => {
|
||
|
|
emit('refresh');
|
||
|
|
};
|
||
|
|
|
||
|
|
// 处理上传文件
|
||
|
|
const handleUpload = () => {
|
||
|
|
emit('upload');
|
||
|
|
};
|
||
|
|
|
||
|
|
// 处理新建文件夹
|
||
|
|
const handleCreateFolder = () => {
|
||
|
|
emit('create-folder');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.file-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 24px;
|
||
|
|
height: 64px;
|
||
|
|
background: var(--color-bg-1);
|
||
|
|
border-bottom: 1px solid var(--color-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumbs {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clickable {
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--color-primary);
|
||
|
|
transition: color 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clickable:hover {
|
||
|
|
color: var(--color-primary-light-1);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|