feat: less规范化

2026-07-28 10:54:36 +08:00
parent cffe8de6b0
commit 743549600a
45 changed files with 1953 additions and 2011 deletions
@@ -0,0 +1,91 @@
+import { defineComponent, type PropType } from 'vue';
+import { message } from 'ant-design-vue';
+import type { TabView } from '@/types';
+import styles from './PageTabs.module.less';
+
+/**
+ * Chrome 风格的页面标签栏组件
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签重叠排列（负 margin）
+ * - 激活态：圆角背景 + SVG 底部曲线
+ * - hover 态：浅灰背景
+ * - 标签间分隔线
+ * - 关闭按钮
+ */
+const PageTabs = defineComponent({
+  name: 'PageTabs',
+  props: {
+    /** 标签列表 */
+    tabs: { type: Array as PropType<TabView[]>, required: true },
+    /** 当前激活 key */
+    activeKey: { type: String, required: true },
+    /** 关闭标签 */
+    onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
+    /** 切换标签 */
+    onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
+  },
+  setup(props) {
+    const handleClick = (key: string) => {
+      if (key !== props.activeKey && props.onChange) {
+        props.onChange(key);
+      }
+    };
+
+    const handleClose = (key: string, e: Event) => {
+      e.stopPropagation();
+      if (props.tabs.length <= 1) {
+        message.warning('至少保留一个标签');
+        return;
+      }
+      if (props.onClose) {
+        props.onClose(key);
+      }
+    };
+
+    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}
+              />
+
+              {/* 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>
+
+              <div class={styles.tabTitleCon}>
+                {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+                <span class={styles.tabTitle}>{tab.title}</span>
+              </div>
+
+              {/* 关闭按钮（flex 子元素，不参与 shrink） */}
+              <span class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
+                ✕
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+});
+
+export default PageTabs;