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

<script setup lang="ts">
import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
import { useResizeObserver } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router";
import { computed, nextTick, ref, watch } from "vue";
import { useAppStore } from "@/stores/app";
import { Button } from "@/components/ui/button";

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

// Watch route changes to add tabs
watch(
  () => route.fullPath,
  async () => {
    const meta = route.meta as { title?: string };
    if (meta.title) {
      appStore.addVisitedTab({
        key: route.fullPath,
        label: meta.title,
        closable: route.fullPath !== "/dashboard",
      });
    }
    await nextTick();
    revealActiveTab();
    updateScrollState();
  },
  { immediate: true },
);

// Update scroll state when tabs change
watch(
  () => appStore.visitedTabs.length,
  async () => {
    await nextTick();
    updateScrollState();
  },
);

useResizeObserver(trackRef, updateScrollState);

function changeTab(key: string) {
  if (key !== route.fullPath) router.push(key);
}

function closeTab(key: string, e: MouseEvent) {
  e.stopPropagation();
  if (key === "/dashboard") return;
  const currentIndex = tabs.value.findIndex((t) => t.key === key);
  const fallback = 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 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 = track.scrollLeft > 1;
  canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
}

function scrollTabs(direction: number) {
  const track = trackRef.value;
  if (!track) return;
  track.scrollBy({
    left: direction * Math.max(track.clientWidth * 0.6, 120),
    behavior: "smooth",
  });
}

function revealActiveTab(behavior: ScrollBehavior = "smooth") {
  const track = trackRef.value;
  if (!track) return;
  const activeElement = Array.from(track.querySelectorAll<HTMLElement>("[data-tab-key]")).find(
    (element) => element.dataset.tabKey === activeKey.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 refreshTab(key: string) {
  appStore.refreshRoute(key);
}
</script>

<template>
  <div
    v-if="tabs.length"
    class="flex h-10 w-full min-w-0 shrink-0 items-center gap-0.5 overflow-hidden px-4"
  >
    <!-- Left scroll button -->
    <Button
      v-if="overflowed"
      type="button"
      variant="ghost"
      size="icon-sm"
      class="size-7 text-muted-foreground disabled:cursor-default disabled:opacity-30"
      aria-label="向左滚动页签"
      :disabled="!canScrollLeft"
      @click="scrollTabs(-1)"
    >
      <ChevronLeft />
    </Button>

    <!-- Tab track -->
    <div
      ref="trackRef"
      class="tab-track flex min-w-0 flex-1 gap-1.5 overflow-x-auto overflow-y-hidden overscroll-contain"
      role="tablist"
      @scroll.passive="updateScrollState"
      @wheel="handleWheel"
    >
      <button
        v-for="tab in tabs"
        :key="tab.key"
        type="button"
        role="tab"
        :data-tab-key="tab.key"
        :aria-selected="tab.key === activeKey"
        class="group/tab relative flex shrink-0 items-center gap-1 h-7 rounded-md pl-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',
          tab.closable ? 'pr-0' : 'pr-2.5',
        ]"
        @click="changeTab(tab.key)"
        @dblclick.prevent="refreshTab(tab.key)"
      >
        <span class="truncate max-w-36">{{ tab.label }}</span>
        <!-- Close button -->
        <span
          v-if="tab.closable"
          class="flex flex-1 items-center justify-center self-stretch px-1 rounded-sm text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/20 transition-colors"
          @click="closeTab(tab.key, $event)"
        >
          <X class="size-3" />
        </span>
      </button>
    </div>

    <!-- Right scroll button -->
    <Button
      v-if="overflowed"
      type="button"
      variant="ghost"
      size="icon-sm"
      class="size-7 text-muted-foreground disabled:cursor-default disabled:opacity-30"
      aria-label="向右滚动页签"
      :disabled="!canScrollRight"
      @click="scrollTabs(1)"
    >
      <ChevronRight />
    </Button>
  </div>
</template>

<style scoped lang="scss">
.tab-track {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>