20260716173254
This commit is contained in:
oneao committed
1 parent
704dda07b5
commit
5cd4e1e1d2
46 files changed
+3569
-528
No files matched your search
@@ -0,0 +1,322 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
|
||||
import { theme } from "antdv-next";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const { token } = theme.useToken();
|
||||
const headerRef = ref(null);
|
||||
const trackRef = ref(null);
|
||||
const overflowed = ref(false);
|
||||
const canScrollLeft = ref(false);
|
||||
const canScrollRight = ref(false);
|
||||
const activeTab = computed(() => route.fullPath);
|
||||
const tabItems = computed(() => appStore.visitedTabs);
|
||||
let resizeObserver;
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
if (route.meta.title) {
|
||||
appStore.addVisitedTab({
|
||||
key: route.fullPath,
|
||||
label: getTabLabel(),
|
||||
closable: route.fullPath !== "/dashboard",
|
||||
});
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
revealActiveTab();
|
||||
updateScrollState();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => appStore.visitedTabs.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
updateScrollState();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateScrollState);
|
||||
if (headerRef.value) resizeObserver.observe(headerRef.value);
|
||||
updateScrollState();
|
||||
revealActiveTab("auto");
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect());
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.fullPath) router.push(key);
|
||||
}
|
||||
|
||||
function getTabLabel() {
|
||||
if (route.meta.detail && route.params.id) {
|
||||
return `${route.meta.listTitle || route.meta.title} ${route.params.id}`;
|
||||
}
|
||||
|
||||
return route.meta.title;
|
||||
}
|
||||
|
||||
function closeTab(targetKey) {
|
||||
if (typeof targetKey !== "string" || targetKey === "/dashboard") return;
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
const fallback =
|
||||
appStore.visitedTabs[currentIndex - 1] ??
|
||||
appStore.visitedTabs[currentIndex + 1] ??
|
||||
appStore.visitedTabs[0];
|
||||
|
||||
appStore.removeVisitedTab(targetKey);
|
||||
if (route.fullPath === targetKey && fallback) router.push(fallback.key);
|
||||
}
|
||||
|
||||
function updateScrollState() {
|
||||
const header = headerRef.value;
|
||||
const track = trackRef.value;
|
||||
if (!header || !track) return;
|
||||
|
||||
const shouldOverflow = track.scrollWidth > header.clientWidth - 16 + 1;
|
||||
if (overflowed.value !== shouldOverflow) {
|
||||
overflowed.value = shouldOverflow;
|
||||
if (!shouldOverflow) track.scrollLeft = 0;
|
||||
nextTick(updateScrollState);
|
||||
return;
|
||||
}
|
||||
|
||||
canScrollLeft.value = shouldOverflow && track.scrollLeft > 1;
|
||||
canScrollRight.value =
|
||||
shouldOverflow && track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
|
||||
}
|
||||
|
||||
function scrollTabs(direction) {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
track.scrollBy({
|
||||
left: direction * Math.max(track.clientWidth * 0.65, 120),
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function revealActiveTab(behavior = "smooth") {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
const activeElement = Array.from(track.querySelectorAll("[data-tab-key]")).find(
|
||||
(element) => element.dataset.tabKey === activeTab.value,
|
||||
);
|
||||
activeElement?.scrollIntoView({ behavior, block: "nearest", inline: "center" });
|
||||
}
|
||||
|
||||
function focusAdjacentTab(index, offset) {
|
||||
const items = tabItems.value;
|
||||
if (!items.length) return;
|
||||
|
||||
const nextIndex = (index + offset + items.length) % items.length;
|
||||
changeTab(items[nextIndex].key);
|
||||
nextTick(() => {
|
||||
const target = Array.from(trackRef.value?.querySelectorAll("[data-tab-key]") ?? []).find(
|
||||
(element) => element.dataset.tabKey === items[nextIndex].key,
|
||||
);
|
||||
target?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function handleTabKeydown(event, index) {
|
||||
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
||||
|
||||
event.preventDefault();
|
||||
focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
ref="headerRef"
|
||||
class="tab-header"
|
||||
:style="{
|
||||
'--tabs-active-bg': token.colorPrimaryBg,
|
||||
'--tabs-active-color': token.colorPrimary,
|
||||
'--tabs-idle-bg': token.colorFillQuaternary,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向左滚动页签"
|
||||
:disabled="!canScrollLeft"
|
||||
@click="scrollTabs(-1)"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState">
|
||||
<div
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="item.key"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': item.key === activeTab }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="tab-item__select"
|
||||
role="tab"
|
||||
:data-tab-key="item.key"
|
||||
:aria-selected="item.key === activeTab"
|
||||
:tabindex="item.key === activeTab ? 0 : -1"
|
||||
@click="changeTab(item.key)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="item.closable"
|
||||
type="button"
|
||||
class="tab-item__close"
|
||||
:aria-label="`关闭${item.label}`"
|
||||
@click.stop="closeTab(item.key)"
|
||||
>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向右滚动页签"
|
||||
:disabled="!canScrollRight"
|
||||
@click="scrollTabs(1)"
|
||||
>
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-header {
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.tab-track {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-width: 64px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: var(--tabs-idle-bg);
|
||||
color: var(--fms-text-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--tabs-active-bg);
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&__select,
|
||||
&__close {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__select {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
display: grid;
|
||||
width: 18px;
|
||||
flex: none;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav-button {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
background: var(--tabs-idle-bg);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--tabs-active-color);
|
||||
background: var(--tabs-active-bg);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user