20260810172235

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

@@ -1,8 +1,10 @@
 <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, onMounted, onBeforeUnmount, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
 import { useAppStore } from "@/stores/app"
+import { Button } from "@/components/ui/button"
 
 const route = useRoute()
 const router = useRouter()
@@ -15,12 +17,10 @@ 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 () => {
     const meta = route.meta as { title?: string }
     if (meta.title) {
       appStore.addVisitedTab({
@@ -29,6 +29,9 @@ watch(
         closable: route.fullPath !== "/dashboard",
       })
     }
+    await nextTick()
+    revealActiveTab()
+    updateScrollState()
   },
   { immediate: true },
 )
@@ -39,13 +42,7 @@ watch(() => appStore.visitedTabs.length, async () => {
   updateScrollState()
 })
 
-onMounted(() => {
-  resizeObserver = new ResizeObserver(updateScrollState)
-  if (trackRef.value) resizeObserver.observe(trackRef.value)
-  updateScrollState()
-})
-
-onBeforeUnmount(() => resizeObserver?.disconnect())
+useResizeObserver(trackRef, updateScrollState)
 
 function changeTab(key: string) {
   if (key !== route.fullPath) router.push(key)
@@ -87,6 +84,15 @@ function scrollTabs(direction: number) {
   })
 }
 
+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
@@ -102,22 +108,29 @@ function refreshTab(key: string) {
 </script>
 
 <template>
-  <div v-if="tabs.length" class="flex shrink-0 items-center h-9 gap-0.5 px-2 border-b border-border/40">
+  <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
+    <Button
       v-if="overflowed"
       type="button"
-      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"
+      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 class="size-3.5" />
-    </button>
+      <ChevronLeft />
+    </Button>
 
     <!-- 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"
+      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"
     >
@@ -125,10 +138,14 @@ function refreshTab(key: string) {
         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
+        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'"
+          : '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)"
       >
@@ -136,7 +153,7 @@ function refreshTab(key: string) {
         <!-- 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"
+          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" />
@@ -145,14 +162,27 @@ function refreshTab(key: string) {
     </div>
 
     <!-- Right scroll button -->
-    <button
+    <Button
       v-if="overflowed"
       type="button"
-      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"
+      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 class="size-3.5" />
-    </button>
+      <ChevronRight />
+    </Button>
   </div>
 </template>
+
+<style scoped lang="scss">
+.tab-track {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>