yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/111/MERGE
xingyu4j 2025-05-20 10:35:19 +08:00
parent 891daec857 8ac97688da
commit c88bd198d4
8 changed files with 204 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/src/en/guide/essentials/settings.md
View File

@ -186,6 +186,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 0,
contentPaddingBottom: 0,
contentPaddingLeft: 0,
contentPaddingRight: 0,
contentPaddingTop: 0,
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;
}

2
docs/src/guide/essentials/build.md
View File

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

36
docs/src/guide/essentials/settings.md
View File

@ -185,6 +185,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 0,
contentPaddingBottom: 0,
contentPaddingLeft: 0,
contentPaddingRight: 0,
contentPaddingTop: 0,
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;
}

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

@ -10,6 +10,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"colorWeakMode": false,
"compact": false,
"contentCompact": "wide",
"contentCompactWidth": 1200,
"contentPadding": 0,
"contentPaddingBottom": 0,
"contentPaddingLeft": 0,
"contentPaddingRight": 0,
"contentPaddingTop": 0,
"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": {

13
packages/@core/preferences/src/config.ts
View File

@ -9,6 +9,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 0,
contentPaddingBottom: 0,
contentPaddingLeft: 0,
contentPaddingRight: 0,
contentPaddingTop: 0,
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: {

24
packages/@core/preferences/src/types.ts
View File

@ -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;
}

100
packages/effects/hooks/src/use-design-tokens.ts
View File

@ -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-light-3': getCssVariableValue('--destructive-400'),
'--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
'--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
'--el-color-danger-dark-2': isDark.value
? getCssVariableValue('--destructive-400')
: getCssVariableValue('--destructive-600'),
'--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-light-3': getCssVariableValue('--destructive-400'),
'--el-color-error-light-5': getCssVariableValue('--destructive-300'),
'--el-color-error-light-7': getCssVariableValue('--destructive-200'),
'--el-color-error-dark-2': isDark.value
? getCssVariableValue('--destructive-400')
: getCssVariableValue('--destructive-600'),
'--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-light-3': getCssVariableValue('--primary-400'),
'--el-color-primary-light-5': getCssVariableValue('--primary-300'),
'--el-color-primary-dark-2': isDark.value
? getCssVariableValue('--primary-400')
: 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-light-3': getCssVariableValue('--success-400'),
'--el-color-success-light-5': getCssVariableValue('--success-300'),
'--el-color-success-light-7': getCssVariableValue('--success-200'),
'--el-color-success-dark-2': isDark.value
? getCssVariableValue('--success-400')
: getCssVariableValue('--success-600'),
'--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-light-3': getCssVariableValue('--warning-400'),
'--el-color-warning-light-5': getCssVariableValue('--warning-300'),
'--el-color-warning-light-7': getCssVariableValue('--warning-200'),
'--el-color-warning-dark-2': isDark.value
? getCssVariableValue('--warning-400')
: getCssVariableValue('--warning-600'),
'--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'),

12
packages/effects/layouts/src/basic/layout.vue
View File

@ -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="