diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md index 856d2d8c..319a9d14 100644 --- 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; } diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md index e25bad70..f76a3bbd 100644 --- 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; } diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap index 8d00137e..3fe14ae2 100644 --- 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": { diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 75972a09..a69e270c 100644 --- 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: { diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 6dfa842c..cc0fefe3 100644 --- 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; } diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index 9ae978f4..bdb3958a 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -180,8 +180,16 @@ 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="