feat: 新增页面标签页组件

2026-07-27 16:29:12 +08:00
parent e238328919
commit 826a541a60
8 changed files with 529 additions and 47 deletions
@@ -4,3 +4,4 @@
 */
 export { default as HelloWorld } from './HelloWorld';
 export { default as ChangePasswordModal } from './ChangePasswordModal';
+export { default as PageTabs } from './page/PageTabs';
@@ -0,0 +1,185 @@
+/**
+ * PageTabs — Chrome 风格标签栏样式
+ *
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签间通过负 margin 重叠
+ * - 激活态使用 SVG 绘制左下/右下曲线填充，形成 Chrome tab 效果
+ * - hover 态浅灰背景
+ * - 分隔线在相邻非激活标签之间
+ */
+
+// 主色调（antd 默认蓝）
+@primary: #1677ff;
+
+.tabsWrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // 隐藏横向滚动条
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+}
+
+.tabItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  user-select: none;
+  transition: all 0.15s ease;
+  padding: 0 8px 0 14px;
+
+  &:global(:not(.dragging)) {
+    cursor: pointer;
+  }
+
+  // ── hover 态（非激活） ──
+  &:not(.active) {
+    &:hover {
+      // 自身分隔线消失
+      > .divider {
+        opacity: 0;
+      }
+      // 右侧邻居的分隔线也消失
+      & + .tabItem {
+        > .divider {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  // ── 激活态 ──
+  &.active {
+    z-index: 2;
+    // 右侧邻居的分隔线消失
+    & + .tabItem {
+      > .divider {
+        opacity: 0 !important;
+      }
+    }
+    // 文字激活色
+    .tabTitle {
+      color: @primary;
+      font-weight: 500;
+    }
+    // 背景蓝色
+    .tabBg {
+      &.tabBgActive {
+        .tabBgInner {
+          background-color: fade(@primary, 8%);
+        }
+        .tabBgCurveBefore,
+        .tabBgCurveAfter {
+          fill: fade(@primary, 8%);
+        }
+      }
+    }
+  }
+}
+
+// ── 分隔线 ──
+.divider {
+  position: absolute;
+  left: 7px;
+  top: 50%;
+  z-index: 0;
+  width: 1px;
+  height: 16px;
+  background-color: #e8e8e8;
+  transform: translateY(-50%);
+  transition: opacity 0.15s;
+}
+
+// ── Chrome 风格背景层（激活态可见，hover 态可见但偏浅） ──
+.tabBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  padding: 0 calc(7px - 1px);
+  transition: opacity 0.15s;
+}
+
+// 背景主体：顶部圆角
+.tabBgInner {
+  height: 100%;
+  border-radius: 7px 7px 0 0;
+  transition:
+    background-color 0.15s,
+    margin 0.15s,
+    border-radius 0.15s;
+}
+
+// 左下 SVG 曲线
+.tabBgCurveBefore {
+  position: absolute;
+  left: -1px;
+  bottom: 0;
+  fill: transparent;
+  transition: fill 0.15s;
+}
+
+// 右下 SVG 曲线
+.tabBgCurveAfter {
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  fill: transparent;
+  transition: fill 0.15s;
+}
+
+// ── 关闭按钮（flex 子元素，文字同行自然居中） ──
+.tabClose {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 10px;
+  text-align: center;
+  margin-right: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.85);
+    background-color: rgba(0, 0, 0, 0.06);
+  }
+}
+
+.tabTitleCon {
+  height: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+}
+
+// hover 只在非激活标签时生效
+.tabItem:not(.active) {
+  .tabTitleCon:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+  }
+}
+
+// ── 标签文字（flex 子元素，可收缩） ──
+.tabTitle {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  min-width: 0;
+  padding: 2px 8px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.65);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
@@ -0,0 +1,89 @@
+import { defineComponent, type PropType } from 'vue';
+import { message } from 'ant-design-vue';
+import type { TabView } from '@/stores/tabsStore';
+import styles from './PageTabs.module.less';
+
+/**
+ * Chrome 风格的页面标签栏组件
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签重叠排列（负 margin）
+ * - 激活态：圆角背景 + SVG 底部曲线
+ * - hover 态：浅灰背景
+ * - 标签间分隔线
+ * - 关闭按钮
+ */
+export default 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.tabsWrap}>
+        {props.tabs.map((tab, i) => {
+          const isActive = tab.path === props.activeKey;
+          return (
+            <div
+              key={tab.path}
+              class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].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 : ''].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>
+    );
+  },
+});