feat: additional-settings (#6225)

* feat(preferences): 补充VbenAdminLayout传入属性(来自偏好设置) * docs(@vben/docs):update settings doc --------- Co-authored-by: wyc001122 <wangyongchao@testor.com.cn>
12 months ago · dae46abb71
6 changed files with 133 additions and 0 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/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;
 }
--- a/packages/@core/preferences/tests/snapshots/config.test.ts.snap
+++ b/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": {
--- a/packages/@core/preferences/src/config.ts
+++ b/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: {
--- a/packages/@core/preferences/src/types.ts
+++ b/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;
 }
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/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="