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

2025-05-19 21:33:49 +08:00
parent 79d89005b6 2efacb3e5b
commit 4fd68bc083
27 changed files with 476 additions and 151 deletions
--- a/docs/src/en/guide/essentials/settings.md
+++ b/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;
 }
--- a/docs/src/guide/essentials/build.md
+++ b/docs/src/guide/essentials/build.md
@@ -214,7 +214,7 @@ server {

 使用 nginx 处理项目部署后的跨域问题

-1. 配置前端项目接口地址，在项目目录下的``.env.production`文件中配置：
+1. 配置前端项目接口地址，在项目目录下的`.env.production`文件中配置：

 ```bash
 VITE_GLOB_API_URL=/api
--- a/docs/src/guide/essentials/route.md
+++ b/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
--- a/docs/src/guide/essentials/settings.md
+++ b/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;
 }