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>
+    );
+  },
+});
@@ -113,3 +113,21 @@
  display: flex;
  flex-direction: column;
 }
+
+// ── 顶部行：原 Header 中的三个区域（折叠按钮 / 面包屑 / 右侧账号信息）整体包成一个 row ──
+.headerRow {
+  padding: 0 16px;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+// ── 页面标签栏容器（Chrome 风格 PageTabs 的外壳） ──
+.pageTabs {
+  width: 100%;
+  padding: 4px 16px 0 16px;
+  height: 42px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}
@@ -1,5 +1,6 @@
 import { computed, defineComponent, h, ref } from 'vue';
 import type { CSSProperties } from 'vue';
+import { KeepAlive } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -16,8 +17,9 @@ import {
 } from '@ant-design/icons-vue';
 import { useMenuStore } from '@/stores/menuStore';
 import { useUserStore } from '@/stores/userStore';
+import { useTabsStore } from '@/stores/tabsStore';
 import { useState, useBreadcrumb, auth } from '@/hooks';
-import { ChangePasswordModal } from '@/components';
+import { ChangePasswordModal, PageTabs } from '@/components';
 import logoutSvg from '@/assets/img/icon/logout.svg';
 import styles from './BasicLayout.module.less';

@@ -25,11 +27,13 @@ const { Header, Sider, Content, Footer } = Layout;

 const headerStyle: CSSProperties = {
  background: '#fff',
-  padding: '0 16px',
+  padding: '0',
  display: 'flex',
-  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
  color: '#1a1a1a',
  boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
+  height: 'auto',
 };

 const siderStyle: CSSProperties = {
@@ -93,6 +97,7 @@ export default defineComponent({

    const { menuItems } = useMenuStore();
    const { phone } = useUserStore();
+    const { tabs, cachedViews, removeTab } = useTabsStore();
    const { breadcrumbs } = useBreadcrumb();

    const selectedKeys = computed<string[]>(() => [route.path]);
@@ -107,6 +112,8 @@ export default defineComponent({
      collapsed.value = !collapsed.value;
    };

+    const activeTabKey = computed(() => route.path);
+
    /** ===== 退出登录 ===== */
    const handleLogout = () => {
      Modal.confirm({
@@ -154,6 +161,17 @@ export default defineComponent({
      }
    };

+    /** ===== PageTabs 事件 ===== */
+    const handleTabChange = (key: string) => {
+      if (key !== route.path) {
+        router.push(key);
+      }
+    };
+
+    const handleTabClose = (key: string) => {
+      removeTab(key);
+    };
+
    return () => (
      <Layout class={styles.container}>
        <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
@@ -171,6 +189,12 @@ export default defineComponent({

        <Layout class={styles.main}>
          <Header style={headerStyle}>
+            {/*
+              ── 顶部行：折叠按钮 + 面包屑 + 右侧账号信息 ──
+              按需求把原来平铺在 Header 里的三块统一包到一个 row 容器内，
+              形成「行容器 + tabs 容器」的两层结构
+            */}
+            <div class={styles.headerRow}>
              <span class={styles.trigger} onClick={toggleCollapsed}>
                {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              </span>
@@ -217,10 +241,37 @@ export default defineComponent({
                  }}
                </Dropdown>
              </div>
+            </div>
+
+            {/*
+              ── Tabs 行：Chrome 风格页面标签栏 ──
+              数据来自 tabsStore，点击切换路由，关闭按钮走 store.removeTab
+            */}
+            <div class={styles.pageTabs}>
+              <PageTabs
+                tabs={tabs.value}
+                activeKey={activeTabKey.value}
+                onChange={handleTabChange}
+                onClose={handleTabClose}
+              />
+            </div>
          </Header>

+          {/*
+            ── 路由出口 ──
+            用 <KeepAlive :include="cachedViews"> 缓存已访问过的页面,
+            include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
+          */}
          <Content class={styles.content}>
-            <RouterView />
+            <RouterView
+              v-slots={{
+                default: ({ Component }: any) => (
+                  <KeepAlive include={cachedViews.value}>
+                    <Component />
+                  </KeepAlive>
+                ),
+              }}
+            />
          </Content>

          <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
@@ -1,5 +1,6 @@
 import router from '@/router';
 import { auth } from '@/hooks/useAuth';
+import { useTabsStore } from '@/stores/tabsStore';

 const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';

@@ -57,4 +58,17 @@ router.beforeEach(async (to, _from, next) => {

 router.afterEach((to) => {
  updateDocumentTitle(to.meta.title as string | undefined);
+
+  // ── 路由跳转 → tab 来源 ──
+  // 隐藏的路由（如详情页、编辑页）不进 tab，避免标签栏被噪声污染
+  // /login 也不进 tab
+  if (to.meta?.hideInMenu || to.path === '/login') return;
+  if (typeof to.name !== 'string' || typeof to.meta?.title !== 'string') return;
+
+  const { addTab } = useTabsStore();
+  addTab({
+    path: to.path,
+    name: to.name,
+    title: to.meta.title,
+  });
 });
@@ -0,0 +1,120 @@
+import { reactive, computed, toRefs } from 'vue';
+import router from '@/router';
+
+/**
+ * 单个页面标签的数据结构（标签 = 已经访问过的页面）
+ *
+ * path  唯一标识，用于路由激活态判断
+ * name  路由组件 name,用于 <keep-alive :include="cachedViews">
+ * title 展示在 tab 上的文字
+ */
+export interface TabView {
+  path: string;
+  name: string;
+  title: string;
+}
+
+interface TabsState {
+  /** 已打开的页面标签列表，按访问顺序累加 */
+  tabs: TabView[];
+  /** 需要被 keep-alive 缓存的组件 name 列表（来自每个 tab 的 name） */
+  cachedViews: string[];
+}
+
+const state = reactive<TabsState>({
+  tabs: [],
+  cachedViews: [],
+});
+
+/**
+ * 全局唯一 store 的 composable 入口
+ * 参考其他 store (menuStore / permissionStore) 的写法，保持代码风格统一
+ */
+export function useTabsStore() {
+  /**
+   * 往 tabs 列表加入一个 tab。
+   * - 已存在则忽略（根据 path 去重）
+   * - 同步把 name 加入 cachedViews，确保 <keep-alive> 能缓存该组件
+   *
+   * 通常由 router.afterEach 主动调用，所以 nav 来源 = 路由跳转。
+   */
+  const addTab = (view: TabView): void => {
+    if (!view || !view.path || !view.name) return;
+
+    if (!state.tabs.some((t) => t.path === view.path)) {
+      state.tabs.push(view);
+    }
+    if (!state.cachedViews.includes(view.name)) {
+      state.cachedViews.push(view.name);
+    }
+  };
+
+  /**
+   * 主动（程序化地）关闭一个 tab
+   * - 只剩一个标签时不允许关闭（至少保留一个）
+   * - 关闭当前激活的 tab 时，自动跳到相邻 tab
+   * - 同步从 cachedViews 里移除（关闭后下次再访问会重新挂载）
+   */
+  const removeTab = (path: string): void => {
+    if (state.tabs.length <= 1) return;
+
+    const idx = state.tabs.findIndex((t) => t.path === path);
+    if (idx === -1) return;
+
+    const target = state.tabs[idx];
+    const isActive = router.currentRoute.value.path === path;
+    const next = state.tabs[idx + 1] || state.tabs[idx - 1];
+
+    state.tabs.splice(idx, 1);
+
+    const cachedIdx = state.cachedViews.indexOf(target.name);
+    if (cachedIdx !== -1) state.cachedViews.splice(cachedIdx, 1);
+
+    if (isActive && next) {
+      router.push(next.path);
+    }
+  };
+
+  /** 关闭除 path 之外的所有 tab */
+  const removeOtherTabs = (path: string): void => {
+    state.tabs = state.tabs.filter((t) => t.path === path);
+    syncCachedViews();
+  };
+
+  /** 关闭所有 tab，保留第一个并跳转过去 */
+  const removeAllTabs = (): void => {
+    state.tabs = state.tabs.slice(0, 1);
+    syncCachedViews();
+    const first = state.tabs[0];
+    if (first) router.push(first.path);
+  };
+
+  /** 更新某个 tab 的字段（比如标题改名），按 path 定位 */
+  const updateTab = (path: string, partial: Partial<TabView>): void => {
+    const target = state.tabs.find((t) => t.path === path);
+    if (target) Object.assign(target, partial);
+  };
+
+  /** 全部清空——退出登录时调用 */
+  const clearTabs = (): void => {
+    state.tabs = [];
+    state.cachedViews = [];
+  };
+
+  /** 把 cachedViews 同步成「tabs 中仍存在的 name」 */
+  function syncCachedViews() {
+    state.cachedViews = state.cachedViews.filter((name) => state.tabs.some((t) => t.name === name));
+  }
+
+  return {
+    ...toRefs(state),
+    tabs: computed(() => state.tabs),
+    cachedViews: computed(() => state.cachedViews),
+    addTab,
+    removeTab,
+    removeOtherTabs,
+    removeAllTabs,
+    updateTab,
+    clearTabs,
+  };
+}
@@ -97,5 +97,9 @@ declare module 'vue-router' {
    permission?: string;
    /** 外链地址 */
    externalLink?: string;
+    /** 是否固定标签（不可关闭，常用于首页 dashboard） */
+    affix?: boolean;
+    /** 不参与标签缓存，即使访问过也不进 keep-alive */
+    noCache?: boolean;
  }
 }