20260816220132

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

@@ -0,0 +1,181 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { ChevronLeft, ChevronRight, X } from '@lucide/vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import Button from '@/components/ui/button/button.vue'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const trackRef = ref(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.fullPath,
+  async () => {
+    const title = route.meta?.title
+    if (title) {
+      appStore.addVisitedTab({
+        key: route.fullPath,
+        label: title,
+        closable: route.fullPath !== '/dashboard',
+      })
+    }
+    await nextTick()
+    revealActiveTab()
+    updateScrollState()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => appStore.visitedTabs.length,
+  async () => {
+    await nextTick()
+    updateScrollState()
+  },
+)
+
+/* ---- 溢出检测（替代 @vueuse/core useResizeObserver） ---- */
+let resizeObserver = null
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(updateScrollState)
+  if (trackRef.value) resizeObserver.observe(trackRef.value)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+})
+
+function changeTab(key) {
+  if (key !== route.fullPath) router.push(key)
+}
+
+function closeTab(key, e) {
+  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) {
+  const track = trackRef.value
+  if (!track) return
+  track.scrollBy({
+    left: direction * Math.max(track.clientWidth * 0.6, 120),
+    behavior: 'smooth',
+  })
+}
+
+function revealActiveTab(behavior = 'smooth') {
+  const track = trackRef.value
+  if (!track) return
+  const activeElement = Array.from(track.querySelectorAll('[data-tab-key]')).find(
+    (element) => element.dataset.tabKey === activeKey.value,
+  )
+  activeElement?.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
+}
+
+function handleWheel(e) {
+  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) {
+  appStore.refreshRoute(key)
+}
+</script>
+
+<template>
+  <div v-if="tabs.length" class="fms-tabs">
+    <!-- 左侧滚动按钮 -->
+    <Button
+      v-if="overflowed"
+      type="ghost"
+      class="fms-tabs-arrow"
+      :disabled="!canScrollLeft"
+      aria-label="向左滚动页签"
+      @click="scrollTabs(-1)"
+    >
+      <ChevronLeft />
+    </Button>
+
+    <!-- 页签轨道 -->
+    <div
+      ref="trackRef"
+      class="fms-tabs-track"
+      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="fms-tab"
+        :class="{ 'is-active': tab.key === activeKey, 'is-closable': tab.closable }"
+        @click="changeTab(tab.key)"
+        @dblclick.prevent="refreshTab(tab.key)"
+      >
+        <span class="fms-tab-label">{{ tab.label }}</span>
+        <span
+          v-if="tab.closable"
+          class="fms-tab-close"
+          aria-label="关闭页签"
+          @click="closeTab(tab.key, $event)"
+        >
+          <X />
+        </span>
+      </button>
+    </div>
+
+    <!-- 右侧滚动按钮 -->
+    <Button
+      v-if="overflowed"
+      type="ghost"
+      class="fms-tabs-arrow"
+      :disabled="!canScrollRight"
+      aria-label="向右滚动页签"
+      @click="scrollTabs(1)"
+    >
+      <ChevronRight />
+    </Button>
+  </div>
+</template>
+
+<style lang="scss">
+@use './index.scss';
+</style>