workspace/code/fms/fms-vue/src/layouts/components/AppTabs.vue

<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>