itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
owenchen committed 2026-09-08 17:00:03 +08:00
1 parent 3759fcc14a
commit 75dc6fc980
4 files changed
+336 -83
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WebVue/src/components/basic/Toolbar.vue
+155 -81
View File
@@ -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>