20260813222656

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

@@ -1,190 +0,0 @@
-<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>