20260809223428
This commit is contained in:
oneao committed
1 parent
d72ca4193d
commit
c4891538a7
466 files changed
+21000
-3339
No files matched your search
@@ -1,393 +1,158 @@
|
||||
<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 { useAppStore } from "@/stores/app";
|
||||
import { usePermissionStore } from "@/stores/permissions";
|
||||
<script setup lang="ts">
|
||||
import { ChevronLeft, ChevronRight, X } from "@lucide/vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from "vue"
|
||||
import { useAppStore } from "@/stores/app"
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
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;
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const trackRef = ref<HTMLElement | null>(null)
|
||||
const overflowed = ref(false)
|
||||
const canScrollLeft = ref(false)
|
||||
const canScrollRight = ref(false)
|
||||
const activeKey = computed(() => route.fullPath)
|
||||
const tabs = computed(() => appStore.visitedTabs)
|
||||
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
|
||||
// Watch route changes to add tabs
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
if (route.meta.title) {
|
||||
() => {
|
||||
const meta = route.meta as { title?: string }
|
||||
if (meta.title) {
|
||||
appStore.addVisitedTab({
|
||||
key: route.fullPath,
|
||||
label: getTabLabel(),
|
||||
i18nKey: getTabI18nKey(),
|
||||
label: meta.title,
|
||||
closable: route.fullPath !== "/dashboard",
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
revealActiveTab();
|
||||
updateScrollState();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
)
|
||||
|
||||
watch(
|
||||
() => appStore.visitedTabs.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
updateScrollState();
|
||||
},
|
||||
);
|
||||
// Update scroll state when tabs change
|
||||
watch(() => appStore.visitedTabs.length, async () => {
|
||||
await nextTick()
|
||||
updateScrollState()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateScrollState);
|
||||
if (headerRef.value) resizeObserver.observe(headerRef.value);
|
||||
updateScrollState();
|
||||
revealActiveTab("auto");
|
||||
});
|
||||
resizeObserver = new ResizeObserver(updateScrollState)
|
||||
if (trackRef.value) resizeObserver.observe(trackRef.value)
|
||||
updateScrollState()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect());
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect())
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.fullPath) router.push(key);
|
||||
function changeTab(key: string) {
|
||||
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 getTabI18nKey() {
|
||||
if (route.path === "/dashboard") return "common.dashboard";
|
||||
const module = permissionStore.modules.find(
|
||||
(item) => item.b_code === route.meta.moduleId || item.b_route === route.path,
|
||||
);
|
||||
return module?.b_i18n || "";
|
||||
}
|
||||
|
||||
function getDisplayTabLabel(item) {
|
||||
return appStore.t(item.i18nKey, item.label);
|
||||
}
|
||||
|
||||
function closeTab(targetKey) {
|
||||
if (typeof targetKey !== "string" || targetKey === "/dashboard") return;
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
function closeTab(key: string, e: MouseEvent) {
|
||||
e.stopPropagation()
|
||||
if (key === "/dashboard") return
|
||||
const currentIndex = tabs.value.findIndex(t => t.key === key)
|
||||
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);
|
||||
tabs.value[currentIndex - 1] ??
|
||||
tabs.value[currentIndex + 1] ??
|
||||
tabs.value[0]
|
||||
appStore.removeVisitedTab(key)
|
||||
if (route.fullPath === key && 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 + 1;
|
||||
if (overflowed.value !== shouldOverflow) {
|
||||
overflowed.value = shouldOverflow;
|
||||
if (!shouldOverflow) track.scrollLeft = 0;
|
||||
return;
|
||||
const track = trackRef.value
|
||||
if (!track) return
|
||||
const shouldOverflow = track.scrollWidth > track.clientWidth + 1
|
||||
overflowed.value = shouldOverflow
|
||||
if (!shouldOverflow) {
|
||||
track.scrollLeft = 0
|
||||
canScrollLeft.value = false
|
||||
canScrollRight.value = false
|
||||
return
|
||||
}
|
||||
|
||||
canScrollLeft.value = shouldOverflow && track.scrollLeft > 1;
|
||||
canScrollRight.value =
|
||||
shouldOverflow && track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
|
||||
canScrollLeft.value = track.scrollLeft > 1
|
||||
canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1
|
||||
}
|
||||
|
||||
function scrollTabs(direction) {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
function scrollTabs(direction: number) {
|
||||
const track = trackRef.value
|
||||
if (!track) return
|
||||
track.scrollBy({
|
||||
left: direction * Math.max(track.clientWidth * 0.65, 120),
|
||||
left: direction * Math.max(track.clientWidth * 0.6, 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 handleWheel(e: WheelEvent) {
|
||||
const track = trackRef.value
|
||||
if (!track || track.scrollWidth <= track.clientWidth) return
|
||||
const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX
|
||||
if (!delta) return
|
||||
e.preventDefault()
|
||||
track.scrollLeft += delta
|
||||
}
|
||||
|
||||
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 refreshTab(key: string) {
|
||||
appStore.refreshRoute(key)
|
||||
}
|
||||
|
||||
function handleTabKeydown(event, index) {
|
||||
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
||||
|
||||
event.preventDefault();
|
||||
focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
|
||||
function handleWheel(event) {
|
||||
const track = trackRef.value;
|
||||
if (!track || track.scrollWidth <= track.clientWidth) return;
|
||||
const delta =
|
||||
Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
|
||||
if (!delta) return;
|
||||
event.preventDefault();
|
||||
track.scrollLeft += delta;
|
||||
}
|
||||
|
||||
function refreshTab(key) {
|
||||
appStore.refreshRoute(key);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header ref="headerRef" class="tab-header">
|
||||
<!-- 滚动按钮 -->
|
||||
<div v-if="tabs.length" class="flex shrink-0 items-center h-9 gap-0.5 px-2 border-b border-border/40">
|
||||
<!-- Left scroll button -->
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-btn"
|
||||
aria-label="向左滚动页签"
|
||||
class="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30 disabled:cursor-default transition-colors"
|
||||
:disabled="!canScrollLeft"
|
||||
@click="scrollTabs(-1)"
|
||||
>
|
||||
<ChevronLeft />
|
||||
<ChevronLeft class="size-3.5" />
|
||||
</button>
|
||||
|
||||
<!-- 标签轨道 -->
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState" @wheel="handleWheel">
|
||||
<div
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="item.key"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': item.key === activeTab, 'tab-item--closable': item.closable }"
|
||||
<!-- Tab track -->
|
||||
<div
|
||||
ref="trackRef"
|
||||
class="flex flex-1 min-w-0 gap-1.5 overflow-x-auto overflow-y-visible scrollbar-none overscroll-contain"
|
||||
@scroll.passive="updateScrollState"
|
||||
@wheel="handleWheel"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="group/tab relative flex shrink-0 items-center gap-1 h-7 rounded-md px-2.5 text-xs font-medium transition-colors cursor-pointer border"
|
||||
:class="tab.key === activeKey
|
||||
? 'bg-muted text-foreground border-border'
|
||||
: 'bg-background text-muted-foreground border-border/70 hover:border-border hover:text-foreground'"
|
||||
@click="changeTab(tab.key)"
|
||||
@dblclick.prevent="refreshTab(tab.key)"
|
||||
>
|
||||
<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)"
|
||||
@dblclick.prevent="refreshTab(item.key)"
|
||||
<span class="truncate max-w-36">{{ tab.label }}</span>
|
||||
<!-- Close button -->
|
||||
<span
|
||||
v-if="tab.closable"
|
||||
class="grid size-4 shrink-0 place-items-center rounded-sm text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/20 transition-colors"
|
||||
@click="closeTab(tab.key, $event)"
|
||||
>
|
||||
<span>{{ getDisplayTabLabel(item) }}</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>
|
||||
<X class="size-3" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Right scroll button -->
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-btn"
|
||||
aria-label="向右滚动页签"
|
||||
class="grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30 disabled:cursor-default transition-colors"
|
||||
:disabled="!canScrollRight"
|
||||
@click="scrollTabs(1)"
|
||||
>
|
||||
<ChevronRight />
|
||||
<ChevronRight class="size-3.5" />
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-header {
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ---- 滚动按钮（ghost 风格） ---- */
|
||||
.tab-btn {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #71717a;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: #3f3f46;
|
||||
background: #f4f4f5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 标签轨道 ---- */
|
||||
.tab-track {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 标签项（浅灰高亮，与侧栏选中语言统一） ---- */
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-width: 72px;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #71717a;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #e4e4e7,
|
||||
0 1px 2px rgb(0 0 0 / 6%),
|
||||
0 1px 1px rgb(0 0 0 / 4%);
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #ffffff;
|
||||
color: #3f3f46;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #e4e4e7,
|
||||
0 1px 2px rgb(0 0 0 / 6%),
|
||||
0 1px 1px rgb(0 0 0 / 4%);
|
||||
}
|
||||
|
||||
/* 选中态：浅灰高亮，无边框 */
|
||||
&--active {
|
||||
color: #27272a;
|
||||
font-weight: 500;
|
||||
background: #f4f4f5;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: #f4f4f5;
|
||||
color: #27272a;
|
||||
}
|
||||
|
||||
.tab-item__close:hover {
|
||||
background: rgb(0 0 0 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
&__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 8px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/* 有关闭按钮的 tab，缩小右侧 padding */
|
||||
&--closable &__select {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 18px;
|
||||
padding: 0;
|
||||
margin-right: 2px;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
color: #a1a1aa;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 8%);
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user