ow
This commit is contained in:
owenchen committed
1 parent
3759fcc14a
commit
75dc6fc980
4 files changed
+336
-83
No files matched your search
@@ -1 +1 @@
|
||||
window._iconfont_svg_string_2184398='<svg><symbol id="icon-family" viewBox="0 0 1024 1024"><path d="M1018.368 807.424c0-79.36-52.224-143.872-117.248-185.856 28.672-31.744 56.832-80.896 56.832-123.392 0-93.184-73.728-168.96-164.864-168.96-90.624 0-164.864 75.776-164.864 168.96 0 43.008 28.672 97.792 57.344 129.024-65.536 42.496-117.76 101.376-117.76 180.736 0 25.088 0.512 47.104 25.088 47.104 24.064 0 24.576-22.016 24.576-47.104 0-77.312 99.84-158.72 175.104-158.72 75.264 0 180.224 81.408 180.224 158.72 0 25.088 4.096 48.64 27.136 44.032 24.576-5.632 17.92-19.456 18.432-44.544z m-225.28-193.536c-65.024 0-117.76-54.272-117.76-120.832 0-66.56 53.248-120.832 117.76-120.832s117.76 54.272 117.76 120.832c-0.512 67.072-53.248 120.832-117.76 120.832z" fill="#FFBD80" p-id="5692"></path><path d="M61.44 747.52V276.48c0-27.648 22.016-49.664 48.64-49.664h623.616c26.624 0 48.64 22.528 48.64 49.664v28.16h55.808V276.48c0-59.392-47.104-107.52-104.448-107.52H110.08C52.224 168.96 5.632 217.088 5.632 276.48v471.04c0 59.392 47.104 107.52 104.448 107.52H527.36v-57.344H110.08c-26.624-0.512-48.64-23.04-48.64-50.176z" fill="#FFBD80" p-id="5693"></path><path d="M477.184 264.192H177.152c-39.424 0-71.168 32.768-71.168 73.216v308.224c0 40.448 31.744 73.216 71.168 73.216h300.032c39.424 0 71.168-32.768 71.168-73.216V337.408c0-40.448-31.744-73.216-71.168-73.216zM142.848 358.912c0-33.792 26.624-55.808 59.392-55.808h50.688v212.992H142.848V358.912z m59.392 321.536c-32.768 0-59.392-22.528-59.392-55.808v-92.672 17.92h110.08v130.56h35.328V302.592h61.44v377.856H202.24zM511.488 624.64c0 33.792-26.624 55.808-59.392 55.808h-66.56v-220.16h125.44v-34.304H385.536v-122.88h66.56c32.768 0 59.392 22.528 59.392 55.808V624.64z" fill="#FFBD80" p-id="5694"></path></symbol><symbol id="icon-dgroup" viewBox="0 0 1024 1024"><path d="M42.666667 192h853.333333c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333H128c-46.933333 0-85.333333-38.4-85.333333-85.333333v-682.666667z" fill="#FC7748" p-id="5535"></path><path d="M128 64h384l128 128H42.666667v-42.666667c0-46.933333 38.4-85.333333 85.333333-85.333333z" fill="#FED2C3" p-id="5536"></path><path d="M405.333333 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" p-id="5537"></path><path d="M618.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" p-id="5538"></path><path d="M512 725.333333c0 34.133333 46.933333 21.333333 106.666667 21.333334s106.666667 12.8 106.666666-21.333334-46.933333-106.666667-106.666666-106.666666S512 686.933333 512 725.333333zM465.066667 601.6c-17.066667-17.066667-38.4-25.6-59.733334-25.6-59.733333 0-106.666667 81.066667-106.666666 128 0 38.4 34.133333 42.666667 76.8 42.666667 12.8-46.933333 46.933333-102.4 89.6-145.066667z" fill="#FFFFFF" p-id="5539"></path></symbol><symbol id="icon-dbank" viewBox="0 0 1024 1024"><path d="M512 44.521739C865.636174 44.521739 979.478261 158.363826 979.478261 512S865.636174 979.478261 512 979.478261 44.521739 865.636174 44.521739 512 158.363826 44.521739 512 44.521739z m10.373565 311.652174c-64.77913 0-117.626435 50.621217-120.119652 113.975652a99.417043 99.417043 0 0 0-87.618783 98.214957c0 53.559652 43.097043 97.190957 96.923827 98.882782l222.163478 0.044522c53.604174-2.003478 96.434087-45.501217 96.434087-98.927304a99.372522 99.372522 0 0 0-87.663305-98.170435C640.044522 406.79513 587.241739 356.173913 522.373565 356.173913z m4.051478 110.280348c2.80487 0 5.476174 1.157565 7.435131 3.161043l44.655304 45.81287a10.373565 10.373565 0 0 1-7.479652 17.630609h-29.829565v40.381217a14.825739 14.825739 0 0 1-29.606957 0v-40.336696h-29.829565a10.373565 10.373565 0 0 1-7.43513-17.67513l44.655304-45.81287a10.373565 10.373565 0 0 1 7.43513-3.116521z" fill="#FC7068" p-id="4517"></path></symbol><symbol id="icon-source-pic" viewBox="0 0 1024 1024"><path d="M480 422.4h211.2v51.2H480zM480 505.6h211.2v51.2H480z" fill="#F16967" p-id="30292"></path><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM396.8 716.8c32-32 57.6-64 83.2-108.8l32 19.2c-25.6 44.8-51.2 83.2-83.2 115.2l-32-25.6z m211.2-6.4c0 25.6-12.8 38.4-44.8 38.4h-44.8l-6.4-32h44.8c6.4 0 19.2 0 19.2-12.8V588.8H448v-192h108.8c6.4-12.8 6.4-32 12.8-51.2H384V512c0 102.4-19.2 185.6-51.2 249.6l-25.6-25.6c25.6-51.2 38.4-128 38.4-224V307.2H768v38.4H595.2c0 19.2-6.4 32-12.8 51.2h140.8v192H608v121.6z m128 32c-19.2-32-44.8-70.4-83.2-115.2l32-19.2c38.4 38.4 64 76.8 83.2 108.8l-32 25.6z" fill="#F16967" p-id="30293"></path></symbol><symbol id="icon-mp3-play" viewBox="0 0 1024 1024"><path d="M513.024 2.048c282.112 0 510.976 228.864 510.976 510.976S795.136 1024 513.024 1024 2.048 795.136 2.048 513.024C2.048 230.912 230.912 2.048 513.024 2.048z" fill="#FE7C84" p-id="16052"></path><path d="M719.36 495.616c9.728 6.144 12.288 18.432 6.656 28.16-1.536 2.56-4.096 5.12-6.656 6.656l-281.6 176.128c-9.728 6.144-22.016 3.072-28.16-6.656-2.048-3.072-3.072-7.168-3.072-10.752V336.896c0-11.264 9.216-20.48 20.48-20.48 3.584 Line truncated
|
||||
window._iconfont_svg_string_2184398='<svg><symbol id="icon-help" viewBox="0 0 1024 1024"><path d="M512 1024a512 512 0 1 1 512-512 513.153974 513.153974 0 0 1-512 512z m-57.516489-172.610202H566.661922v-112.17841H454.483511zM537.87331 172.549466c-129.427284 0-253.145433 63.286358-253.145433 227.211388H397.209964a109.323843 109.323843 0 0 1 112.178411-115.032977c46.037485 0 112.17841 17.248873 112.17841 86.3051 0 63.286358-20.164176 74.765362-80.535231 120.802847a171.881376 171.881376 0 0 0-86.305101 157.912219v34.497746h115.032978c0-103.250297 71.910795-115.032977 129.427283-198.483511a226.482562 226.482562 0 0 0 40.267616-135.197153 190.830842 190.830842 0 0 0-201.58102-177.954923z" fill="#1D85ED" p-id="7237"></path></symbol><symbol id="icon-family" viewBox="0 0 1024 1024"><path d="M1018.368 807.424c0-79.36-52.224-143.872-117.248-185.856 28.672-31.744 56.832-80.896 56.832-123.392 0-93.184-73.728-168.96-164.864-168.96-90.624 0-164.864 75.776-164.864 168.96 0 43.008 28.672 97.792 57.344 129.024-65.536 42.496-117.76 101.376-117.76 180.736 0 25.088 0.512 47.104 25.088 47.104 24.064 0 24.576-22.016 24.576-47.104 0-77.312 99.84-158.72 175.104-158.72 75.264 0 180.224 81.408 180.224 158.72 0 25.088 4.096 48.64 27.136 44.032 24.576-5.632 17.92-19.456 18.432-44.544z m-225.28-193.536c-65.024 0-117.76-54.272-117.76-120.832 0-66.56 53.248-120.832 117.76-120.832s117.76 54.272 117.76 120.832c-0.512 67.072-53.248 120.832-117.76 120.832z" fill="#FFBD80" p-id="5692"></path><path d="M61.44 747.52V276.48c0-27.648 22.016-49.664 48.64-49.664h623.616c26.624 0 48.64 22.528 48.64 49.664v28.16h55.808V276.48c0-59.392-47.104-107.52-104.448-107.52H110.08C52.224 168.96 5.632 217.088 5.632 276.48v471.04c0 59.392 47.104 107.52 104.448 107.52H527.36v-57.344H110.08c-26.624-0.512-48.64-23.04-48.64-50.176z" fill="#FFBD80" p-id="5693"></path><path d="M477.184 264.192H177.152c-39.424 0-71.168 32.768-71.168 73.216v308.224c0 40.448 31.744 73.216 71.168 73.216h300.032c39.424 0 71.168-32.768 71.168-73.216V337.408c0-40.448-31.744-73.216-71.168-73.216zM142.848 358.912c0-33.792 26.624-55.808 59.392-55.808h50.688v212.992H142.848V358.912z m59.392 321.536c-32.768 0-59.392-22.528-59.392-55.808v-92.672 17.92h110.08v130.56h35.328V302.592h61.44v377.856H202.24zM511.488 624.64c0 33.792-26.624 55.808-59.392 55.808h-66.56v-220.16h125.44v-34.304H385.536v-122.88h66.56c32.768 0 59.392 22.528 59.392 55.808V624.64z" fill="#FFBD80" p-id="5694"></path></symbol><symbol id="icon-dgroup" viewBox="0 0 1024 1024"><path d="M42.666667 192h853.333333c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333H128c-46.933333 0-85.333333-38.4-85.333333-85.333333v-682.666667z" fill="#FC7748" p-id="5535"></path><path d="M128 64h384l128 128H42.666667v-42.666667c0-46.933333 38.4-85.333333 85.333333-85.333333z" fill="#FED2C3" p-id="5536"></path><path d="M405.333333 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" p-id="5537"></path><path d="M618.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" p-id="5538"></path><path d="M512 725.333333c0 34.133333 46.933333 21.333333 106.666667 21.333334s106.666667 12.8 106.666666-21.333334-46.933333-106.666667-106.666666-106.666666S512 686.933333 512 725.333333zM465.066667 601.6c-17.066667-17.066667-38.4-25.6-59.733334-25.6-59.733333 0-106.666667 81.066667-106.666666 128 0 38.4 34.133333 42.666667 76.8 42.666667 12.8-46.933333 46.933333-102.4 89.6-145.066667z" fill="#FFFFFF" p-id="5539"></path></symbol><symbol id="icon-dbank" viewBox="0 0 1024 1024"><path d="M512 44.521739C865.636174 44.521739 979.478261 158.363826 979.478261 512S865.636174 979.478261 512 979.478261 44.521739 865.636174 44.521739 512 158.363826 44.521739 512 44.521739z m10.373565 311.652174c-64.77913 0-117.626435 50.621217-120.119652 113.975652a99.417043 99.417043 0 0 0-87.618783 98.214957c0 53.559652 43.097043 97.190957 96.923827 98.882782l222.163478 0.044522c53.604174-2.003478 96.434087-45.501217 96.434087-98.927304a99.372522 99.372522 0 0 0-87.663305-98.170435C640.044522 406.79513 587.241739 356.173913 522.373565 356.173913z m4.051478 110.280348c2.80487 0 5.476174 1.157565 7.435131 3.161043l44.655304 45.81287a10.373565 10.373565 0 0 1-7.479652 17.630609h-29.829565v40.381217a14.825739 14.825739 0 0 1-29.606957 0v-40.336696h-29.829565a10.373565 10.373565 0 0 1-7.43513-17.67513l44.655304-45.81287a10.373565 10.373565 0 0 1 7.43513-3.116521z" fill="#FC7068" p-id="4517"></path></symbol><symbol id="icon-source-pic" viewBox="0 0 1024 1024"><path d="M480 422.4h211.2v51.2H480zM480 505.6h211.2v51.2H480z" fill="#F16967" p-id="30292"></path><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM396.8 716.8c32-32 57.6-64 83.2-108.8l32 19.2c-25.6 44.8-51.2 83.2-83.2 115.2l-32-25.6z m211.2-6.4c0 25.6-12.8 38.4-44.8 38.4h-44.8l-6.4-32h44.8c6.4 0 19.2 0 19.2-12.8V588.8H448v-192h108.8c6.4-12.8 6.4-32 12.8-51.2H384V512c0 102.4-19.2 185.6-51.2 249.6l-25.6-25.6c25.6-51.2 38.4-Line truncated
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<a-tooltip title="返回顶层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoTop"
|
||||
@click="$emit('go-top')"
|
||||
>
|
||||
<HomeOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="返回上层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoBack"
|
||||
@click="$emit('go-back')"
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="刷新">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:loading="loading"
|
||||
@click="onBreadcrumbClick(breadcrumbItems[0], 0)"
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-center">
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbItems"
|
||||
:key="index"
|
||||
@click="onBreadcrumbClick(item, index)"
|
||||
:class="{ clickable: index < breadcrumbItems.length - 1 }"
|
||||
>
|
||||
<template v-if="index === 0">
|
||||
<LaptopOutlined style="margin-right: 4px" />
|
||||
</template>
|
||||
<span :style="{ cursor: index < breadcrumbItems.length - 1 ? 'pointer' : 'default',
|
||||
color: index < breadcrumbItems.length - 1 ? '#1677ff' : '' }">{{ item.displayName }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索文件名称"
|
||||
allow-clear
|
||||
style="width: 240px"
|
||||
@search="onSearch"
|
||||
@pressEnter="onSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input-search>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import {
|
||||
HomeOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ReloadOutlined,
|
||||
LaptopOutlined,
|
||||
SearchOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
|
||||
interface BreadcrumbItem {
|
||||
value: string;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
pathStack: BreadcrumbItem[];
|
||||
rootPath: string;
|
||||
loading: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits([
|
||||
"go-top",
|
||||
"go-back",
|
||||
"refresh",
|
||||
"search",
|
||||
"breadcrumb-click",
|
||||
]);
|
||||
|
||||
const searchKeyword = ref("");
|
||||
|
||||
const canGoTop = computed(() => {
|
||||
return props.pathStack.length > 1;
|
||||
});
|
||||
|
||||
const canGoBack = computed(() => {
|
||||
return props.pathStack.length > 1;
|
||||
});
|
||||
|
||||
const breadcrumbItems = computed(() => {
|
||||
return props.pathStack;
|
||||
});
|
||||
|
||||
const onSearch = () => {
|
||||
emit("search", searchKeyword.value);
|
||||
};
|
||||
|
||||
const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
|
||||
emit("breadcrumb-click", item, index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background: #e6f4ff;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.breadcrumb-item.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.breadcrumb-item.clickable:hover {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,70 +1,150 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<a-tooltip title="返回顶层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoTop"
|
||||
@click="$emit('go-top')"
|
||||
<a-row :wrap="false">
|
||||
<a-col flex="auto">
|
||||
<a-row>
|
||||
<a-col flex="100px">
|
||||
<a-row justify="start">
|
||||
<a-col :span="8"
|
||||
><a-tooltip title="返回顶层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoTop"
|
||||
@click="$emit('go-top')"
|
||||
>
|
||||
<HomeOutlined />
|
||||
</a-button> </a-tooltip
|
||||
></a-col>
|
||||
<a-col :span="8"
|
||||
><a-tooltip title="返回上层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoBack"
|
||||
@click="$emit('go-back')"
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
</a-button> </a-tooltip
|
||||
></a-col>
|
||||
<a-col :span="8"
|
||||
><a-tooltip title="刷新">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:loading="loading"
|
||||
@click="onBreadcrumbClick(breadcrumbItems[0], 0)"
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</a-button> </a-tooltip
|
||||
></a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :xs="0" :sm="0" :lg="10" flex="auto">
|
||||
<div
|
||||
class="toolbar-center"
|
||||
style="margin-top: 5px; margin-left: 10px"
|
||||
>
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbItems"
|
||||
:key="index"
|
||||
@click="onBreadcrumbClick(item, index)"
|
||||
:class="{ clickable: index < breadcrumbItems.length - 1 }"
|
||||
>
|
||||
<template v-if="index === 0">
|
||||
<LaptopOutlined style="margin-right: 4px" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<FolderOutlined style="margin-right: 4px" />
|
||||
</template>
|
||||
<span
|
||||
:style="{
|
||||
cursor:
|
||||
index < breadcrumbItems.length - 1
|
||||
? 'pointer'
|
||||
: 'default',
|
||||
color: index < breadcrumbItems.length - 1 ? '#1677ff' : '',
|
||||
}"
|
||||
>{{ item.displayName }}</span
|
||||
>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="10" :sm="10" :lg="0" flex="auto">
|
||||
<div
|
||||
v-if="viewMode == 'list'"
|
||||
style="
|
||||
margin-top: 8px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<FolderOutlined style="margin-right: 4px" />
|
||||
<span class="breadcrumb-text">{{
|
||||
breadcrumbItems.length > 0
|
||||
? breadcrumbItems[breadcrumbItems.length - 1].displayName
|
||||
: ""
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
max-width: 260px;
|
||||
min-width: 220px;
|
||||
margin-left: 20px;
|
||||
margin-top: -2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
"
|
||||
v-else
|
||||
>
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索文件名称"
|
||||
allow-clear
|
||||
@search="onSearch"
|
||||
@pressEnter="onSearch"
|
||||
>
|
||||
</a-input-search>
|
||||
<a-button size="small" type="default" @click="viewMode = 'list'" style="height: 32px;">
|
||||
<cust-icon-font size="16" type="icon-gongcheng" />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col> </a-row
|
||||
></a-col>
|
||||
<a-col :xs="0" :sm="0" :lg="10" flex="none">
|
||||
<div style="margin-bottom: 8px; margin-right: 8px">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索文件名称"
|
||||
allow-clear
|
||||
@search="onSearch"
|
||||
@pressEnter="onSearch"
|
||||
>
|
||||
<HomeOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="返回上层">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:disabled="!canGoBack"
|
||||
@click="$emit('go-back')"
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="刷新">
|
||||
<a-button
|
||||
type="text"
|
||||
class="nav-btn"
|
||||
:loading="loading"
|
||||
@click="$emit('refresh')"
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-center">
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbItems"
|
||||
:key="index"
|
||||
@click="onBreadcrumbClick(item, index)"
|
||||
:class="{ clickable: index < breadcrumbItems.length - 1 }"
|
||||
>
|
||||
<template v-if="index === 0">
|
||||
<LaptopOutlined style="margin-right: 4px" />
|
||||
</template>
|
||||
<span :style="{ cursor: index < breadcrumbItems.length - 1 ? 'pointer' : 'default',
|
||||
color: index < breadcrumbItems.length - 1 ? '#1677ff' : '' }">{{ item.displayName }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索文件名称"
|
||||
allow-clear
|
||||
style="width: 240px"
|
||||
@search="onSearch"
|
||||
@pressEnter="onSearch"
|
||||
</a-input-search>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xs="4" :sm="4" :lg="0" flex="none">
|
||||
<div
|
||||
v-if="viewMode == 'list'"
|
||||
style="
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input-search>
|
||||
</div>
|
||||
</div>
|
||||
<a-button size="small" type="default" @click="viewMode = 'search'">
|
||||
<cust-icon-font size="14" type="icon-sousuo" />
|
||||
</a-button>
|
||||
<a-button size="small" type="default" @click="">
|
||||
<cust-icon-font size="14" type="icon-help" />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -74,6 +154,7 @@ import {
|
||||
ArrowLeftOutlined,
|
||||
ReloadOutlined,
|
||||
LaptopOutlined,
|
||||
FolderOutlined,
|
||||
SearchOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
|
||||
@@ -98,6 +179,8 @@ const emit = defineEmits([
|
||||
|
||||
const searchKeyword = ref("");
|
||||
|
||||
const viewMode = ref<"search" | "list">("list");
|
||||
|
||||
const canGoTop = computed(() => {
|
||||
return props.pathStack.length > 1;
|
||||
});
|
||||
@@ -120,21 +203,6 @@ const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
@@ -166,6 +234,7 @@ const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
|
||||
.breadcrumb-item.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.breadcrumb-item.clickable:hover {
|
||||
color: #1677ff;
|
||||
}
|
||||
@@ -174,6 +243,11 @@ const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.breadcrumb-text {
|
||||
display: inline-block;
|
||||
max-width: 16ch; /* 6个字符宽度，ch 按字符计算 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user