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-2"
  >
    <!-- 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>