feat: 改进页面标签组件

2026-07-28 18:04:53 +08:00
parent da90d7c356
commit a4dab891cf
3 changed files with 361 additions and 197 deletions
@@ -1,17 +1,26 @@
-import { defineComponent, type PropType } from 'vue';
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  type PropType,
+  ref,
+  watch,
+} from 'vue';
 import { message } from 'ant-design-vue';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 import type { TabView } from '@/types';
 import { renderRouteIcon } from '@/utils/routeIcon';
 import styles from './PageTabs.module.less';

+const SCROLL_STEP = 240;
+
+type TabKeyHandler = (key: string) => void;
+
 /**
 * Chrome 风格的页面标签栏组件
- * 参考 VBEN tabs-chrome 的视觉设计：
- * - 标签重叠排列（负 margin）
- * - 激活态：圆角背景 + SVG 底部曲线
- * - hover 态：浅灰背景
- * - 标签间分隔线
- * - 关闭按钮
+ * - 无滚动条，滚轮横向滚动
+ * - 溢出时显示左右导航按钮
 */
 const PageTabs = defineComponent({
  name: 'PageTabs',
@@ -21,11 +30,73 @@ const PageTabs = defineComponent({
    /** 当前激活 key */
    activeKey: { type: String, required: true },
    /** 关闭标签 */
-    onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
+    onClose: { type: Function as PropType<TabKeyHandler>, default: undefined },
    /** 切换标签 */
-    onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
+    onChange: { type: Function as PropType<TabKeyHandler>, default: undefined },
  },
  setup(props) {
+    const scrollRef = ref<HTMLElement>();
+    const tabItemRefs = ref<Record<string, HTMLElement | undefined>>({});
+    const showNavLeft = ref(false);
+    const showNavRight = ref(false);
+
+    let resizeObserver: ResizeObserver | null = null;
+
+    const updateScrollState = () => {
+      const el = scrollRef.value;
+      if (!el) {
+        showNavLeft.value = false;
+        showNavRight.value = false;
+        return;
+      }
+
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const canScroll = scrollWidth - clientWidth > 1;
+
+      showNavLeft.value = canScroll && scrollLeft > 1;
+      showNavRight.value = canScroll && scrollLeft + clientWidth < scrollWidth - 1;
+    };
+
+    const scrollByStep = (direction: -1 | 1) => {
+      const el = scrollRef.value;
+      if (!el) return;
+      el.scrollBy({ left: direction * SCROLL_STEP, behavior: 'smooth' });
+    };
+
+    const handleWheel = (e: WheelEvent) => {
+      const el = scrollRef.value;
+      if (!el || el.scrollWidth <= el.clientWidth) return;
+
+      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      if (delta === 0) return;
+
+      e.preventDefault();
+      el.scrollLeft += delta;
+      updateScrollState();
+    };
+
+    const scrollActiveTabIntoView = () => {
+      nextTick(() => {
+        tabItemRefs.value[props.activeKey]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+        updateScrollState();
+      });
+    };
+
+    watch(() => props.activeKey, scrollActiveTabIntoView);
+    watch(() => props.tabs.map((t) => t.path).join(','), scrollActiveTabIntoView);
+
+    const setTabItemRef = (path: string, el: Element | null) => {
+      if (el) {
+        tabItemRefs.value[path] = el as HTMLElement;
+      } else {
+        delete tabItemRefs.value[path];
+      }
+    };
+
    const handleClick = (key: string) => {
      if (key !== props.activeKey && props.onChange) {
        props.onChange(key);
@@ -43,48 +114,91 @@ const PageTabs = defineComponent({
      }
    };

-    return () => (
-      <div class={styles.pageTabsMain}>
-        {props.tabs.map((tab, i) => {
-          const isActive = tab.path === props.activeKey;
-          return (
-            <div
-              key={tab.path}
-              class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
-              onClick={() => handleClick(tab.path)}
-            >
-              {/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
-              <div
-                v-show={i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey}
-                class={styles.divider}
-              />
+    onMounted(() => {
+      const el = scrollRef.value;
+      if (!el) return;

-              {/* Chrome 风格背景：激活态 */}
-              <div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
-                <div class={styles.tabBgInner} />
-                {/* 左下曲线 */}
-                <svg class={styles.tabBgCurveBefore} height="7" width="7">
-                  <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
-                </svg>
-                {/* 右下曲线 */}
-                <svg class={styles.tabBgCurveAfter} height="7" width="7">
-                  <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
-                </svg>
-              </div>
+      el.addEventListener('wheel', handleWheel, { passive: false });
+      el.addEventListener('scroll', updateScrollState, { passive: true });

-              {/* 标签内容：图标 + 文字 + 关闭按钮 */}
-              <div class={styles.tabContent}>
-                {tab.icon ? (
-                  <span class={styles.tabIcon}>{renderRouteIcon(tab.icon, { size: 14 })}</span>
-                ) : null}
-                <div class={styles.tabTitle}>{tab.title}</div>
-                <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
-                  ✕
-                </div>
-              </div>
+      resizeObserver = new ResizeObserver(updateScrollState);
+      resizeObserver.observe(el);
+      updateScrollState();
+    });
+
+    onBeforeUnmount(() => {
+      const el = scrollRef.value;
+      if (el) {
+        el.removeEventListener('wheel', handleWheel);
+        el.removeEventListener('scroll', updateScrollState);
+      }
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    });
+
+    const renderTab = (tab: TabView, i: number) => {
+      const isActive = tab.path === props.activeKey;
+      const showDivider = i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey;
+
+      return (
+        <div
+          key={tab.path}
+          ref={(el) => setTabItemRef(tab.path, el as Element | null)}
+          class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
+          onClick={() => handleClick(tab.path)}
+        >
+          <div v-show={showDivider} class={styles.divider} />
+
+          <div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
+            <div class={styles.tabBgInner} />
+            <svg class={styles.tabBgCurveBefore} height="8" width="8">
+              <path d="M 0 8 A 8 8 0 0 0 8 0 L 8 8 Z" />
+            </svg>
+            <svg class={styles.tabBgCurveAfter} height="8" width="8">
+              <path d="M 0 0 A 8 8 0 0 0 8 8 L 0 8 Z" />
+            </svg>
+          </div>
+
+          <div class={styles.tabContent}>
+            {tab.icon ? (
+              <span class={styles.tabIcon}>{renderRouteIcon(tab.icon, { size: 16 })}</span>
+            ) : null}
+            <div class={styles.tabTitle}>{tab.title}</div>
+            <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
+              ✕
            </div>
-          );
-        })}
+          </div>
+        </div>
+      );
+    };
+
+    return () => (
+      <div class={styles.pageTabsWrap}>
+        {showNavLeft.value && (
+          <button
+            type="button"
+            class={[styles.navBtn, styles.navBtnLeft].join(' ')}
+            aria-label="向左滚动标签"
+            onClick={() => scrollByStep(-1)}
+          >
+            <LeftOutlined />
+          </button>
+        )}
+
+        <div ref={scrollRef} class={styles.pageTabs}>
+          {props.tabs.map((tab, i) => renderTab(tab, i))}
+        </div>
+
+        {showNavRight.value && (
+          <button
+            type="button"
+            class={[styles.navBtn, styles.navBtnRight].join(' ')}
+            aria-label="向右滚动标签"
+            onClick={() => scrollByStep(1)}
+          >
+            <RightOutlined />
+          </button>
+        )}
      </div>
    );
  },