Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

docs/src/en/guide/essentials/settings.md

@@ -186,6 +186,12 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 16,
+    contentPaddingBottom: 16,
+    contentPaddingLeft: 16,
+    contentPaddingRight: 16,
+    contentPaddingTop: 16,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
     defaultHomePath: '/analytics',
@@ -200,6 +206,7 @@ const defaultPreferences: Preferences = {
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -220,9 +227,11 @@ const defaultPreferences: Preferences = {
   footer: {
     enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
     menuAlign: 'start',
     mode: 'fixed',
@@ -248,11 +257,14 @@ const defaultPreferences: Preferences = {
     collapsed: false,
     collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
     extraCollapse: false,
+    extraCollapsedWidth: 60,
     fixedButton: true,
     hidden: false,
+    mixedWidth: 80,
     width: 224,
   },
   tabbar: {
@@ -319,6 +331,18 @@ interface AppPreferences {
   compact: boolean;
   /** Whether to enable content compact mode */
   contentCompact: ContentCompactType;
+  /** Content compact width */
+  contentCompactWidth: number;
+  /** Content padding */
+  contentPadding: number;
+  /** Content bottom padding */
+  contentPaddingBottom: number;
+  /** Content left padding */
+  contentPaddingLeft: number;
+  /** Content right padding */
+  contentPaddingRight: number;
+  /** Content top padding */
+  contentPaddingTop: number;
   // /** Default application avatar */
   defaultAvatar: string;
   /** Default homepage path */
@@ -349,6 +373,8 @@ interface AppPreferences {
    * @zh_CN Whether to enable watermark
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 interface BreadcrumbPreferences {
   /** Whether breadcrumbs are enabled */
@@ -385,11 +411,15 @@ interface FooterPreferences {
   enable: boolean;
   /** Whether the footer is fixed */
   fixed: boolean;
+  /** Footer height */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** Whether the header is enabled */
   enable: boolean;
+  /** Header height */
+  height: number;
   /** Whether the header is hidden, css-hidden */
   hidden: boolean;
   /** Header menu alignment */
@@ -422,16 +452,22 @@ interface SidebarPreferences {
   collapsedButton: boolean;
   /** Whether to show title when sidebar is collapsed */
   collapsedShowTitle: boolean;
+  /** Sidebar collapse width */
+  collapseWidth: number;
   /** Whether the sidebar is visible */
   enable: boolean;
   /** Menu auto-expand state */
   expandOnHover: boolean;
   /** Whether the sidebar extension area is collapsed */
   extraCollapse: boolean;
+  /** Sidebar extension area collapse width */
+  extraCollapsedWidth: number;
   /** Whether the sidebar fixed button is visible */
   fixedButton: boolean;
   /** Whether the sidebar is hidden - css */
   hidden: boolean;
+  /** Mixed sidebar width */
+  mixedWidth: number;
   /** Sidebar width */
   width: number;
 }

docs/src/guide/essentials/build.md

@@ -214,7 +214,7 @@ server {
 
 使用 nginx 处理项目部署后的跨域问题
 
-1. 配置前端项目接口地址，在项目目录下的``.env.production`文件中配置：
+1. 配置前端项目接口地址，在项目目录下的`.env.production`文件中配置：
 
 ```bash
 VITE_GLOB_API_URL=/api

docs/src/guide/essentials/route.md

@@ -339,6 +339,10 @@ interface RouteMeta {
     | 'success'
     | 'warning'
     | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
   /**
    * 当前路由的子级在菜单中不展现
    * @default false
@@ -502,6 +506,13 @@ interface RouteMeta {
 
 用于配置页面的徽标颜色。
 
+### fullPathKey
+
+- 类型：`boolean`
+- 默认值：`true`
+
+是否将路由的完整路径作为tab key（默认true）
+
 ### activePath
 
 - 类型：`string`
@@ -602,3 +613,32 @@ const { refresh } = useRefresh();
 refresh();
 </script>
 ```
+
+## 标签页与路由控制
+
+在某些场景下，需要单个路由打开多个标签页，或者修改路由的query不打开新的标签页
+
+每个标签页Tab使用唯一的key标识，设置Tab key有三种方式，优先级由高到低：
+
+- 使用路由query参数pageKey
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+// 跳转路由
+const router = useRouter();
+router.push({
+  path: 'path',
+  query: {
+    pageKey: 'key',
+  },
+});
+```
+
+- 路由的完整路径作为key
+
+`meta` 属性中的 `fullPathKey`不为false，则使用路由`fullPath`作为key
+
+- 路由的path作为key
+
+`meta` 属性中的 `fullPathKey`为false，则使用路由`path`作为key

docs/src/guide/essentials/settings.md

@@ -185,6 +185,12 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 16,
+    contentPaddingBottom: 16,
+    contentPaddingLeft: 16,
+    contentPaddingRight: 16,
+    contentPaddingTop: 16,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
     defaultHomePath: '/analytics',
@@ -199,6 +205,7 @@ const defaultPreferences: Preferences = {
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -219,9 +226,11 @@ const defaultPreferences: Preferences = {
   footer: {
     enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
     menuAlign: 'start',
     mode: 'fixed',
@@ -247,11 +256,14 @@ const defaultPreferences: Preferences = {
     collapsed: false,
     collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
     extraCollapse: false,
+    extraCollapsedWidth: 60,
     fixedButton: true,
     hidden: false,
+    mixedWidth: 80,
     width: 224,
   },
   tabbar: {
@@ -318,6 +330,18 @@ interface AppPreferences {
   compact: boolean;
   /** 是否开启内容紧凑模式 */
   contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
   // /** 应用默认头像 */
   defaultAvatar: string;
   /** 默认首页地址 */
@@ -348,6 +372,8 @@ interface AppPreferences {
    * @zh_CN 是否开启水印
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 
 interface BreadcrumbPreferences {
@@ -385,11 +411,15 @@ interface FooterPreferences {
   enable: boolean;
   /** 底栏是否固定 */
   fixed: boolean;
+  /** 底栏高度 */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** 顶栏是否启用 */
   enable: boolean;
+  /** 顶栏高度 */
+  height: number;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
   /** 顶栏菜单位置 */
@@ -423,16 +453,22 @@ interface SidebarPreferences {
   collapsedButton: boolean;
   /** 侧边栏折叠时，是否显示title */
   collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
   /** 侧边栏是否可见 */
   enable: boolean;
   /** 菜单自动展开状态 */
   expandOnHover: boolean;
   /** 侧边栏扩展区域是否折叠 */
   extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
   /** 侧边栏固定按钮是否可见 */
   fixedButton: boolean;
   /** 侧边栏是否隐藏 - css */
   hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
   /** 侧边栏宽度 */
   width: number;
 }

internal/tailwind-config/package.json

@@ -12,7 +12,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "stub": "pnpm unbuild"
+    "stub": "pnpm unbuild --stub"
   },
   "files": [
     "dist"

packages/@core/base/typings/src/tabs.ts

@@ -1,3 +1,8 @@
 import type { RouteLocationNormalized } from 'vue-router';
 
-export type TabDefinition = RouteLocationNormalized;
+export interface TabDefinition extends RouteLocationNormalized {
+  /**
+   * 标签页的key
+   */
+  key?: string;
+}

packages/@core/base/typings/src/vue-router.d.ts

@@ -43,6 +43,10 @@ interface RouteMeta {
     | 'success'
     | 'warning'
     | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
   /**
    * 当前路由的子级在菜单中不展现
    * @default false

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -10,6 +10,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "colorWeakMode": false,
     "compact": false,
     "contentCompact": "wide",
+    "contentCompactWidth": 1200,
+    "contentPadding": 16,
+    "contentPaddingBottom": 16,
+    "contentPaddingLeft": 16,
+    "contentPaddingRight": 16,
+    "contentPaddingTop": 16,
     "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
     "defaultHomePath": "/analytics",
     "dynamicTitle": true,
@@ -23,6 +29,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "name": "Vben Admin",
     "preferencesButtonPosition": "auto",
     "watermark": false,
+    "zIndex": 200,
   },
   "breadcrumb": {
     "enable": true,
@@ -43,9 +50,11 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   "footer": {
     "enable": false,
     "fixed": false,
+    "height": 32,
   },
   "header": {
     "enable": true,
+    "height": 50,
     "hidden": false,
     "menuAlign": "start",
     "mode": "fixed",
@@ -68,14 +77,17 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   },
   "sidebar": {
     "autoActivateChild": false,
+    "collapseWidth": 60,
     "collapsed": false,
     "collapsedButton": true,
     "collapsedShowTitle": false,
     "enable": true,
     "expandOnHover": true,
     "extraCollapse": false,
+    "extraCollapsedWidth": 60,
     "fixedButton": true,
     "hidden": false,
+    "mixedWidth": 80,
     "width": 224,
   },
   "tabbar": {

packages/@core/preferences/src/config.ts

@@ -9,6 +9,12 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 16,
+    contentPaddingBottom: 16,
+    contentPaddingLeft: 16,
+    contentPaddingRight: 16,
+    contentPaddingTop: 16,
     defaultAvatar:
       'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
     defaultHomePath: '/analytics',
@@ -23,6 +29,7 @@ const defaultPreferences: Preferences = {
     name: 'Vben Admin',
     preferencesButtonPosition: 'auto',
     watermark: false,
+    zIndex: 200,
   },
   breadcrumb: {
     enable: true,
@@ -43,13 +50,16 @@ const defaultPreferences: Preferences = {
   footer: {
     enable: false,
     fixed: false,
+    height: 32,
   },
   header: {
     enable: true,
+    height: 50,
     hidden: false,
     menuAlign: 'start',
     mode: 'fixed',
   },
+
   logo: {
     enable: true,
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
@@ -71,11 +81,14 @@ const defaultPreferences: Preferences = {
     collapsed: false,
     collapsedButton: true,
     collapsedShowTitle: false,
+    collapseWidth: 60,
     enable: true,
     expandOnHover: true,
     extraCollapse: false,
+    extraCollapsedWidth: 60,
     fixedButton: true,
     hidden: false,
+    mixedWidth: 80,
     width: 224,
   },
   tabbar: {

packages/@core/preferences/src/types.ts

@@ -33,6 +33,18 @@ interface AppPreferences {
   compact: boolean;
   /** 是否开启内容紧凑模式 */
   contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
   // /** 应用默认头像 */
   defaultAvatar: string;
   /** 默认首页地址 */
@@ -63,6 +75,8 @@ interface AppPreferences {
    * @zh_CN 是否开启水印
    */
   watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }
 
 interface BreadcrumbPreferences {
@@ -100,11 +114,15 @@ interface FooterPreferences {
   enable: boolean;
   /** 底栏是否固定 */
   fixed: boolean;
+  /** 底栏高度 */
+  height: number;
 }
 
 interface HeaderPreferences {
   /** 顶栏是否启用 */
   enable: boolean;
+  /** 顶栏高度 */
+  height: number;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
   /** 顶栏菜单位置 */
@@ -138,16 +156,22 @@ interface SidebarPreferences {
   collapsedButton: boolean;
   /** 侧边栏折叠时，是否显示title */
   collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
   /** 侧边栏是否可见 */
   enable: boolean;
   /** 菜单自动展开状态 */
   expandOnHover: boolean;
   /** 侧边栏扩展区域是否折叠 */
   extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
   /** 侧边栏固定按钮是否可见 */
   fixedButton: boolean;
   /** 侧边栏是否隐藏 - css */
   hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
   /** 侧边栏宽度 */
   width: number;
 }

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -36,7 +36,7 @@ export interface VbenButtonGroupProps
   btnClass?: any;
   gap?: number;
   multiple?: boolean;
-  options?: { label: CustomRenderType; value: ValueType }[];
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
   showIcon?: boolean;
   size?: 'large' | 'middle' | 'small';
 }

packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue

@@ -119,7 +119,7 @@ async function onBtnClick(value: ValueType) {
         <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
         <Circle v-else />
       </div>
-      <slot name="option" :label="btn.label" :value="btn.value">
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
         <VbenRenderContent :content="btn.label" />
       </slot>
     </Button>
@@ -127,6 +127,9 @@ async function onBtnClick(value: ValueType) {
 </template>
 <style lang="scss" scoped>
 .vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
   &:deep(.size-large) button {
     .icon-wrapper {
       margin-right: 0.3rem;
@@ -159,5 +162,16 @@ async function onBtnClick(value: ValueType) {
       }
     }
   }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
 }
 </style>

packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue

@@ -224,15 +224,20 @@ defineExpose({
         :class="
           cn('cursor-pointer', getNodeClass?.(item), {
             'data-[selected]:bg-accent': !multiple,
+            'cursor-not-allowed': disabled,
+          })
+        "
+        v-bind="
+          Object.assign(item.bind, {
+            onfocus: disabled ? 'this.blur()' : undefined,
           })
         "
-        v-bind="item.bind"
         @select="
           (event) => {
             if (event.detail.originalEvent.type === 'click') {
               event.preventDefault();
             }
-            onSelect(item, event.detail.isSelected);
+            !disabled && onSelect(item, event.detail.isSelected);
           }
         "
         @toggle="
@@ -240,7 +245,7 @@ defineExpose({
             if (event.detail.originalEvent.type === 'click') {
               event.preventDefault();
             }
-            onToggle(item);
+            !disabled && onToggle(item);
           }
         "
         class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
@@ -262,10 +267,11 @@ defineExpose({
         <Checkbox
           v-if="multiple"
           :checked="isSelected"
+          :disabled="disabled"
           :indeterminate="isIndeterminate"
           @click="
             () => {
-              handleSelect();
+              !disabled && handleSelect();
               // onSelect(item, !isSelected);
             }
           "
@@ -276,7 +282,7 @@ defineExpose({
             (_event) => {
               // $event.stopPropagation();
               // $event.preventDefault();
-              handleSelect();
+              !disabled && handleSelect();
               // onSelect(item, !isSelected);
             }
           "

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -40,14 +40,14 @@ const style = computed(() => {
 
 const tabsView = computed(() => {
   return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
     const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
       affixTab: !!affixTab,
       closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
       fullPath,
       icon: icon as string,
-      key: fullPath || path,
+      key,
       meta,
       name,
       path,

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -47,14 +47,14 @@ const typeWithClass = computed(() => {
 
 const tabsView = computed(() => {
   return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
     const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
       affixTab: !!affixTab,
       closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
       fullPath,
       icon: icon as string,
-      key: fullPath || path,
+      key,
       meta,
       name,
       path,

packages/effects/hooks/src/use-design-tokens.ts

@@ -193,67 +193,107 @@ export function useElementPlusDesignTokens() {
 
         '--el-border-radius-base': getCssVariableValue('--radius', false),
         '--el-color-danger': getCssVariableValue('--destructive-500'),
-        '--el-color-danger-dark-2': getCssVariableValue('--destructive'),
+        '--el-color-danger-dark-2': isDark.value
-        '--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
+          ? getCssVariableValue('--destructive-400')
-        '--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
+          : getCssVariableValue('--destructive-600'),
-        '--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-danger-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-danger-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-danger-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
         '--el-color-danger-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--destructive-900')
           : getCssVariableValue('--destructive-100'),
         '--el-color-danger-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--destructive-950')
           : getCssVariableValue('--destructive-50'),
 
         '--el-color-error': getCssVariableValue('--destructive-500'),
-        '--el-color-error-dark-2': getCssVariableValue('--destructive'),
+        '--el-color-error-dark-2': isDark.value
-        '--el-color-error-light-3': getCssVariableValue('--destructive-400'),
+          ? getCssVariableValue('--destructive-400')
-        '--el-color-error-light-5': getCssVariableValue('--destructive-300'),
+          : getCssVariableValue('--destructive-600'),
-        '--el-color-error-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-error-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-error-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-error-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
         '--el-color-error-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--destructive-900')
           : getCssVariableValue('--destructive-100'),
         '--el-color-error-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--destructive-950')
           : getCssVariableValue('--destructive-50'),
 
+        '--el-color-info-light-5': border,
         '--el-color-info-light-8': border,
         '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
+
         '--el-color-primary': getCssVariableValue('--primary-500'),
-        '--el-color-primary-dark-2': getCssVariableValue('--primary'),
+        '--el-color-primary-dark-2': isDark.value
-        '--el-color-primary-light-3': getCssVariableValue('--primary-400'),
+          ? getCssVariableValue('--primary-400')
-        '--el-color-primary-light-5': getCssVariableValue('--primary-300'),
+          : getCssVariableValue('--primary-600'),
+        '--el-color-primary-light-3': isDark.value
+          ? getCssVariableValue('--primary-600')
+          : getCssVariableValue('--primary-400'),
+        '--el-color-primary-light-5': isDark.value
+          ? getCssVariableValue('--primary-700')
+          : getCssVariableValue('--primary-300'),
         '--el-color-primary-light-7': isDark.value
-          ? border
+          ? getCssVariableValue('--primary-800')
           : getCssVariableValue('--primary-200'),
         '--el-color-primary-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--primary-900')
           : getCssVariableValue('--primary-100'),
         '--el-color-primary-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--primary-950')
           : getCssVariableValue('--primary-50'),
 
         '--el-color-success': getCssVariableValue('--success-500'),
-        '--el-color-success-dark-2': getCssVariableValue('--success'),
+        '--el-color-success-dark-2': isDark.value
-        '--el-color-success-light-3': getCssVariableValue('--success-400'),
+          ? getCssVariableValue('--success-400')
-        '--el-color-success-light-5': getCssVariableValue('--success-300'),
+          : getCssVariableValue('--success-600'),
-        '--el-color-success-light-7': getCssVariableValue('--success-200'),
+        '--el-color-success-light-3': isDark.value
+          ? getCssVariableValue('--success-600')
+          : getCssVariableValue('--success-400'),
+        '--el-color-success-light-5': isDark.value
+          ? getCssVariableValue('--success-700')
+          : getCssVariableValue('--success-300'),
+        '--el-color-success-light-7': isDark.value
+          ? getCssVariableValue('--success-800')
+          : getCssVariableValue('--success-200'),
         '--el-color-success-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--success-900')
           : getCssVariableValue('--success-100'),
         '--el-color-success-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--success-950')
           : getCssVariableValue('--success-50'),
 
         '--el-color-warning': getCssVariableValue('--warning-500'),
-        '--el-color-warning-dark-2': getCssVariableValue('--warning'),
+        '--el-color-warning-dark-2': isDark.value
-        '--el-color-warning-light-3': getCssVariableValue('--warning-400'),
+          ? getCssVariableValue('--warning-400')
-        '--el-color-warning-light-5': getCssVariableValue('--warning-300'),
+          : getCssVariableValue('--warning-600'),
-        '--el-color-warning-light-7': getCssVariableValue('--warning-200'),
+        '--el-color-warning-light-3': isDark.value
+          ? getCssVariableValue('--warning-600')
+          : getCssVariableValue('--warning-400'),
+        '--el-color-warning-light-5': isDark.value
+          ? getCssVariableValue('--warning-700')
+          : getCssVariableValue('--warning-300'),
+        '--el-color-warning-light-7': isDark.value
+          ? getCssVariableValue('--warning-800')
+          : getCssVariableValue('--warning-200'),
         '--el-color-warning-light-8': isDark.value
-          ? border
+          ? getCssVariableValue('--warning-900')
           : getCssVariableValue('--warning-100'),
         '--el-color-warning-light-9': isDark.value
-          ? accent
+          ? getCssVariableValue('--warning-950')
           : getCssVariableValue('--warning-50'),
 
         '--el-fill-color': getCssVariableValue('--accent'),

packages/effects/hooks/src/use-tabs.ts

@@ -1,3 +1,4 @@
+import type { ComputedRef } from 'vue';
 import type { RouteLocationNormalized } from 'vue-router';
 
 import { useTabbarStore } from '@vben/stores';
@@ -52,7 +53,24 @@ export function useTabs() {
     await tabbarStore.closeTabByKey(key, router);
   }
 
-  async function setTabTitle(title: string) {
+  /**
+   * 设置当前标签页的标题
+   *
+   * @description 支持设置静态标题字符串或动态计算标题
+   * @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
+   *
+   * @param title - 标题内容
+   *   - 静态标题: 直接传入字符串
+   *   - 动态标题: 传入 ComputedRef
+   *
+   * @example
+   * // 静态标题
+   * setTabTitle('标签页')
+   *
+   * // 动态标题(多语言)
+   * setTabTitle(computed(() => t('page.title')))
+   */
+  async function setTabTitle(title: ComputedRef<string> | string) {
     tabbarStore.setUpdateTime();
     await tabbarStore.setTabTitle(route, title);
   }

packages/effects/layouts/src/authentication/authentication.vue

@@ -38,7 +38,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
 
 <template>
   <div
-    :class="[isDark]"
+    :class="[isDark ? 'dark' : '']"
     class="flex min-h-full flex-1 select-none overflow-x-hidden"
   >
     <template v-if="toolbar">

packages/effects/layouts/src/authentication/index.ts

@@ -1 +1,2 @@
 export { default as AuthPageLayout } from './authentication.vue';
+export * from './types';

packages/effects/layouts/src/basic/content/content.vue

@@ -9,7 +9,7 @@ import { computed } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben/preferences';
-import { storeToRefs, useTabbarStore } from '@vben/stores';
+import { getTabKey, storeToRefs, useTabbarStore } from '@vben/stores';
 
 import { IFrameRouterView } from '../../iframe';
 
@@ -115,13 +115,13 @@ function transformComponent(
             :is="transformComponent(Component, route)"
             v-if="renderRouteView"
             v-show="!route.meta.iframeSrc"
-            :key="route.fullPath"
+            :key="getTabKey(route)"
           />
         </KeepAlive>
         <component
           :is="Component"
           v-else-if="renderRouteView"
-          :key="route.fullPath"
+          :key="getTabKey(route)"
         />
       </Transition>
       <template v-else>
@@ -134,13 +134,13 @@ function transformComponent(
             :is="transformComponent(Component, route)"
             v-if="renderRouteView"
             v-show="!route.meta.iframeSrc"
-            :key="route.fullPath"
+            :key="getTabKey(route)"
           />
         </KeepAlive>
         <component
           :is="Component"
           v-else-if="renderRouteView"
-          :key="route.fullPath"
+          :key="getTabKey(route)"
         />
       </template>
     </RouterView>

packages/effects/layouts/src/basic/layout.vue

@@ -180,8 +180,16 @@ const headerSlots = computed(() => {
   <VbenAdminLayout
     v-model:sidebar-extra-visible="sidebarExtraVisible"
     :content-compact="preferences.app.contentCompact"
+    :content-compact-width="preferences.app.contentCompactWidth"
+    :content-padding="preferences.app.contentPadding"
+    :content-padding-bottom="preferences.app.contentPaddingBottom"
+    :content-padding-left="preferences.app.contentPaddingLeft"
+    :content-padding-right="preferences.app.contentPaddingRight"
+    :content-padding-top="preferences.app.contentPaddingTop"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
+    :footer-height="preferences.footer.height"
+    :header-height="preferences.header.height"
     :header-hidden="preferences.header.hidden"
     :header-mode="preferences.header.mode"
     :header-theme="headerTheme"
@@ -196,11 +204,15 @@ const headerSlots = computed(() => {
     :sidebar-fixed-button="preferences.sidebar.fixedButton"
     :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
     :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
     :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-mixed-width="preferences.sidebar.mixedWidth"
     :sidebar-theme="sidebarTheme"
     :sidebar-width="preferences.sidebar.width"
+    :side-collapse-width="preferences.sidebar.collapseWidth"
     :tabbar-enable="preferences.tabbar.enable"
     :tabbar-height="preferences.tabbar.height"
+    :z-index="preferences.app.zIndex"
     @side-mouse-leave="handleSideMouseLeave"
     @toggle-sidebar="toggleSidebar"
     @update:sidebar-collapse="

packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -140,7 +140,10 @@ function useMixedMenu() {
   watch(
     () => route.path,
     (path) => {
-      const currentPath = (route?.meta?.activePath as string) ?? path;
+      const currentPath = route?.meta?.activePath ?? route?.meta?.link ?? path;
+      if (willOpenedByWindow(currentPath)) {
+        return;
+      }
       calcSideMenus(currentPath);
       if (rootMenuPath.value)
         defaultSubMap.set(rootMenuPath.value, currentPath);

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -30,7 +30,7 @@ const {
 } = useTabbar();
 
 const menus = computed(() => {
-  const tab = tabbarStore.getTabByPath(currentActive.value);
+  const tab = tabbarStore.getTabByKey(currentActive.value);
   const menus = createContextMenus(tab);
   return menus.map((item) => {
     return {

packages/effects/layouts/src/basic/tabbar/use-tabbar.ts

@@ -22,7 +22,7 @@ import {
   X,
 } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
-import { useAccessStore, useTabbarStore } from '@vben/stores';
+import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
 import { filterTree } from '@vben/utils';
 
 export function useTabbar() {
@@ -44,8 +44,11 @@ export function useTabbar() {
     toggleTabPin,
   } = useTabs();
 
+  /**
+   * 当前路径对应的tab的key
+   */
   const currentActive = computed(() => {
-    return route.fullPath;
+    return getTabKey(route);
   });
 
   const { locale } = useI18n();
@@ -73,7 +76,8 @@ export function useTabbar() {
 
   // 点击tab,跳转路由
   const handleClick = (key: string) => {
-    router.push(key);
+    const { fullPath, path } = tabbarStore.getTabByKey(key);
+    router.push(fullPath || path);
   };
 
   // 关闭tab
@@ -100,7 +104,7 @@ export function useTabbar() {
   );
 
   watch(
-    () => route.path,
+    () => route.fullPath,
     () => {
       const meta = route.matched?.[route.matched.length - 1]?.meta;
       tabbarStore.addTab({

packages/stores/src/modules/tabbar.test.ts

@@ -22,12 +22,13 @@ describe('useAccessStore', () => {
     const tab: any = {
       fullPath: '/home',
       meta: {},
+      key: '/home',
       name: 'Home',
       path: '/home',
     };
-    store.addTab(tab);
+    const addNewTab = store.addTab(tab);
     expect(store.tabs.length).toBe(1);
-    expect(store.tabs[0]).toEqual(tab);
+    expect(store.tabs[0]).toEqual(addNewTab);
   });
 
   it('adds a new tab if it does not exist', () => {
@@ -38,20 +39,22 @@ describe('useAccessStore', () => {
       name: 'New',
       path: '/new',
     };
-    store.addTab(newTab);
+    const addNewTab = store.addTab(newTab);
-    expect(store.tabs).toContainEqual(newTab);
+    expect(store.tabs).toContainEqual(addNewTab);
   });
 
   it('updates an existing tab instead of adding a new one', () => {
     const store = useTabbarStore();
     const initialTab: any = {
       fullPath: '/existing',
-      meta: {},
+      meta: {
+        fullPathKey: false,
+      },
       name: 'Existing',
       path: '/existing',
       query: {},
     };
-    store.tabs.push(initialTab);
+    store.addTab(initialTab);
     const updatedTab = { ...initialTab, query: { id: '1' } };
     store.addTab(updatedTab);
     expect(store.tabs.length).toBe(1);
@@ -60,9 +63,12 @@ describe('useAccessStore', () => {
 
   it('closes all tabs', async () => {
     const store = useTabbarStore();
-    store.tabs = [
+    store.addTab({
-      { fullPath: '/home', meta: {}, name: 'Home', path: '/home' },
+      fullPath: '/home',
-    ] as any;
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
     router.replace = vi.fn();
 
     await store.closeAllTabs(router);
@@ -157,7 +163,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store._bulkCloseByPaths(['/home', '/contact']);
+    await store._bulkCloseByKeys(['/home', '/contact']);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('About');
@@ -183,9 +189,8 @@ describe('useAccessStore', () => {
       name: 'Contact',
       path: '/contact',
     };
-    store.addTab(targetTab);
+    const addTargetTab = store.addTab(targetTab);
-
+    await store.closeLeftTabs(addTargetTab);
-    await store.closeLeftTabs(targetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('Contact');
@@ -205,7 +210,7 @@ describe('useAccessStore', () => {
       name: 'About',
       path: '/about',
     };
-    store.addTab(targetTab);
+    const addTargetTab = store.addTab(targetTab);
     store.addTab({
       fullPath: '/contact',
       meta: {},
@@ -213,7 +218,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store.closeOtherTabs(targetTab);
+    await store.closeOtherTabs(addTargetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('About');
@@ -227,7 +232,7 @@ describe('useAccessStore', () => {
       name: 'Home',
       path: '/home',
     };
-    store.addTab(targetTab);
+    const addTargetTab = store.addTab(targetTab);
     store.addTab({
       fullPath: '/about',
       meta: {},
@@ -241,7 +246,7 @@ describe('useAccessStore', () => {
       path: '/contact',
     } as any);
 
-    await store.closeRightTabs(targetTab);
+    await store.closeRightTabs(addTargetTab);
 
     expect(store.tabs).toHaveLength(1);
     expect(store.tabs[0]?.name).toBe('Home');

packages/stores/src/modules/tabbar.ts

@@ -1,4 +1,9 @@
-import type { Router, RouteRecordNormalized } from 'vue-router';
+import type { ComputedRef } from 'vue';
+import type {
+  RouteLocationNormalized,
+  Router,
+  RouteRecordNormalized,
+} from 'vue-router';
 
 import type { TabDefinition } from '@vben-core/typings';
 
@@ -52,23 +57,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
     /**
      * Close tabs in bulk
      */
-    async _bulkCloseByPaths(paths: string[]) {
+    async _bulkCloseByKeys(keys: string[]) {
-      this.tabs = this.tabs.filter((item) => {
+      const keySet = new Set(keys);
-        return !paths.includes(getTabPath(item));
+      this.tabs = this.tabs.filter(
-      });
+        (item) => !keySet.has(getTabKeyFromTab(item)),
+      );
 
-      this.updateCacheTabs();
+      await this.updateCacheTabs();
     },
     /**
      * @zh_CN 关闭标签页
      * @param tab
      */
     _close(tab: TabDefinition) {
-      const { fullPath } = tab;
       if (isAffixTab(tab)) {
         return;
       }
-      const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
       index !== -1 && this.tabs.splice(index, 1);
     },
     /**
@@ -101,14 +106,17 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @zh_CN 添加标签页
      * @param routeTab
      */
-    addTab(routeTab: TabDefinition) {
+    addTab(routeTab: TabDefinition): TabDefinition {
-      const tab = cloneTab(routeTab);
+      let tab = cloneTab(routeTab);
+      if (!tab.key) {
+        tab.key = getTabKey(routeTab);
+      }
       if (!isTabShown(tab)) {
-        return;
+        return tab;
       }
 
-      const tabIndex = this.tabs.findIndex((tab) => {
+      const tabIndex = this.tabs.findIndex((item) => {
-        return getTabPath(tab) === getTabPath(routeTab);
+        return equalTab(item, tab);
       });
 
       if (tabIndex === -1) {
@@ -154,10 +162,11 @@ export const useTabbarStore = defineStore('core-tabbar', {
             mergedTab.meta.newTabTitle = curMeta.newTabTitle;
           }
         }
-
+        tab = mergedTab;
         this.tabs.splice(tabIndex, 1, mergedTab);
       }
       this.updateCacheTabs();
+      return tab;
     },
     /**
      * @zh_CN 关闭所有标签页
@@ -173,65 +182,63 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async closeLeftTabs(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
 
       if (index < 1) {
         return;
       }
 
       const leftTabs = this.tabs.slice(0, index);
-      const paths: string[] = [];
+      const keys: string[] = [];
 
       for (const item of leftTabs) {
         if (!isAffixTab(item)) {
-          paths.push(getTabPath(item));
+          keys.push(item.key as string);
         }
       }
-      await this._bulkCloseByPaths(paths);
+      await this._bulkCloseByKeys(keys);
     },
     /**
      * @zh_CN 关闭其他标签页
      * @param tab
      */
     async closeOtherTabs(tab: TabDefinition) {
-      const closePaths = this.tabs.map((item) => getTabPath(item));
+      const closeKeys = this.tabs.map((item) => getTabKeyFromTab(item));
 
-      const paths: string[] = [];
+      const keys: string[] = [];
 
-      for (const path of closePaths) {
+      for (const key of closeKeys) {
-        if (path !== tab.fullPath) {
+        if (key !== tab.key) {
-          const closeTab = this.tabs.find((item) => getTabPath(item) === path);
+          const closeTab = this.tabs.find(
+            (item) => getTabKeyFromTab(item) === key,
+          );
           if (!closeTab) {
             continue;
           }
           if (!isAffixTab(closeTab)) {
-            paths.push(getTabPath(closeTab));
+            keys.push(closeTab.key as string);
           }
         }
       }
-      await this._bulkCloseByPaths(paths);
+      await this._bulkCloseByKeys(keys);
     },
     /**
      * @zh_CN 关闭右侧标签页
      * @param tab
      */
     async closeRightTabs(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
 
       if (index !== -1 && index < this.tabs.length - 1) {
         const rightTabs = this.tabs.slice(index + 1);
 
-        const paths: string[] = [];
+        const keys: string[] = [];
         for (const item of rightTabs) {
           if (!isAffixTab(item)) {
-            paths.push(getTabPath(item));
+            keys.push(item.key as string);
           }
         }
-        await this._bulkCloseByPaths(paths);
+        await this._bulkCloseByKeys(keys);
       }
     },
 
@@ -242,15 +249,14 @@ export const useTabbarStore = defineStore('core-tabbar', {
      */
     async closeTab(tab: TabDefinition, router: Router) {
       const { currentRoute } = router;
-
       // 关闭不是激活选项卡
-      if (getTabPath(currentRoute.value) !== getTabPath(tab)) {
+      if (getTabKey(currentRoute.value) !== getTabKeyFromTab(tab)) {
         this._close(tab);
         this.updateCacheTabs();
         return;
       }
       const index = this.getTabs.findIndex(
-        (item) => getTabPath(item) === getTabPath(currentRoute.value),
+        (item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
       );
 
       const before = this.getTabs[index - 1];
@@ -277,7 +283,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
     async closeTabByKey(key: string, router: Router) {
       const originKey = decodeURIComponent(key);
       const index = this.tabs.findIndex(
-        (item) => getTabPath(item) === originKey,
+        (item) => getTabKeyFromTab(item) === originKey,
       );
       if (index === -1) {
         return;
@@ -290,12 +296,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
     },
 
     /**
-     * 根据路径获取标签页
+     * 根据tab的key获取tab
-     * @param path
+     * @param key
      */
-    getTabByPath(path: string) {
+    getTabByKey(key: string) {
       return this.getTabs.find(
-        (item) => getTabPath(item) === path,
+        (item) => getTabKeyFromTab(item) === key,
       ) as TabDefinition;
     },
     /**
@@ -311,22 +317,19 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async pinTab(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
+      if (index === -1) {
-      );
+        return;
-      if (index !== -1) {
-        const oldTab = this.tabs[index];
-        tab.meta.affixTab = true;
-        tab.meta.title = oldTab?.meta?.title as string;
-        // this.addTab(tab);
-        this.tabs.splice(index, 1, tab);
       }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = true;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
       // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
       const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
       // 获得固定tabs的index
-      const newIndex = affixTabs.findIndex(
+      const newIndex = affixTabs.findIndex((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
       // 交换位置重新排序
       await this.sortTabs(index, newIndex);
     },
@@ -371,9 +374,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
       if (tab?.meta?.newTabTitle) {
         return;
       }
-      const findTab = this.tabs.find(
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
       if (findTab) {
         findTab.meta.newTabTitle = undefined;
         await this.updateCacheTabs();
@@ -401,13 +402,24 @@ export const useTabbarStore = defineStore('core-tabbar', {
 
     /**
      * @zh_CN 设置标签页标题
-     * @param tab
+     *
-     * @param title
+     * @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
+     * @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
+     * @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
+     *
+     * @param {TabDefinition} tab - 标签页对象
+     * @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
+     *
+     * @example
+     * // 设置静态标题
+     * setTabTitle(tab, '新标签页');
+     *
+     * @example
+     * // 设置动态标题
+     * setTabTitle(tab, computed(() => t('common.dashboard')));
      */
-    async setTabTitle(tab: TabDefinition, title: string) {
+    async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
-      const findTab = this.tabs.find(
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
-      );
 
       if (findTab) {
         findTab.meta.newTabTitle = title;
@@ -448,17 +460,15 @@ export const useTabbarStore = defineStore('core-tabbar', {
      * @param tab
      */
     async unpinTab(tab: TabDefinition) {
-      const index = this.tabs.findIndex(
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
-        (item) => getTabPath(item) === getTabPath(tab),
+      if (index === -1) {
-      );
+        return;
-
-      if (index !== -1) {
-        const oldTab = this.tabs[index];
-        tab.meta.affixTab = false;
-        tab.meta.title = oldTab?.meta?.title as string;
-        // this.addTab(tab);
-        this.tabs.splice(index, 1, tab);
       }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = false;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
       // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
       const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
       // 获得固定tabs的index,使用固定tabs的下一个位置也就是活动tabs的第一个位置
@@ -591,11 +601,49 @@ function isTabShown(tab: TabDefinition) {
 }
 
 /**
- * @zh_CN 获取标签页路径
+ * 从route获取tab页的key
  * @param tab
  */
-function getTabPath(tab: RouteRecordNormalized | TabDefinition) {
+function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
-  return decodeURIComponent((tab as TabDefinition).fullPath || tab.path);
+  const {
+    fullPath,
+    path,
+    meta: { fullPathKey } = {},
+    query = {},
+  } = tab as RouteLocationNormalized;
+  // pageKey可能是数组（查询参数重复时可能出现）
+  const pageKey = Array.isArray(query.pageKey)
+    ? query.pageKey[0]
+    : query.pageKey;
+  let rawKey;
+  if (pageKey) {
+    rawKey = pageKey;
+  } else {
+    rawKey = fullPathKey === false ? path : (fullPath ?? path);
+  }
+  try {
+    return decodeURIComponent(rawKey);
+  } catch {
+    return rawKey;
+  }
+}
+
+/**
+ * 从tab获取tab页的key
+ * 如果tab没有key,那么就从route获取key
+ * @param tab
+ */
+function getTabKeyFromTab(tab: TabDefinition): string {
+  return tab.key ?? getTabKey(tab);
+}
+
+/**
+ * 比较两个tab是否相等
+ * @param a
+ * @param b
+ */
+function equalTab(a: TabDefinition, b: TabDefinition) {
+  return getTabKeyFromTab(a) === getTabKeyFromTab(b);
 }
 
 function routeToTab(route: RouteRecordNormalized) {
@@ -603,5 +651,8 @@ function routeToTab(route: RouteRecordNormalized) {
     meta: route.meta,
     name: route.name,
     path: route.path,
+    key: getTabKey(route),
   } as TabDefinition;
 }
+
+export { getTabKey };

playground/src/views/examples/button-group/index.vue

@@ -19,7 +19,7 @@ const checkValue = ref(['a', 'b']);
 
 const options = [
   { label: '选项1', value: 'a' },
-  { label: '选项2', value: 'b' },
+  { label: '选项2', value: 'b', num: 999 },
   { label: '选项3', value: 'c' },
   { label: '选项4', value: 'd' },
   { label: '选项5', value: 'e' },
@@ -168,10 +168,11 @@ function onBtnClick(value: any) {
           :options="options"
           v-bind="compProps"
         >
-          <template #option="{ label, value }">
+          <template #option="{ label, value, data }">
             <div class="flex items-center">
               <span>{{ label }}</span>
               <span class="ml-2 text-gray-400">{{ value }}</span>
+              <span v-if="data.num" class="white ml-2">{{ data.num }}</span>
             </div>
           </template>
         </VbenCheckButtonGroup>