20260810223432

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

@@ -1,109 +1,109 @@
 <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"
+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 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)
+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 }
+    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()
+    await nextTick();
+    revealActiveTab();
+    updateScrollState();
   },
   { immediate: true },
-)
+);
 
 // Update scroll state when tabs change
-watch(() => appStore.visitedTabs.length, async () => {
-  await nextTick()
-  updateScrollState()
-})
+watch(
+  () => appStore.visitedTabs.length,
+  async () => {
+    await nextTick();
+    updateScrollState();
+  },
+);
 
-useResizeObserver(trackRef, updateScrollState)
+useResizeObserver(trackRef, updateScrollState);
 
 function changeTab(key: string) {
-  if (key !== route.fullPath) router.push(key)
+  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)
+  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
+  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
+    track.scrollLeft = 0;
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
   }
-  canScrollLeft.value = track.scrollLeft > 1
-  canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1
+  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
+  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 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" })
+    (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
+  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)
+  appStore.refreshRoute(key);
 }
 </script>
 
@@ -142,10 +142,12 @@ function refreshTab(key: string) {
         :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']"
+        :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)"
       >