diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index e49a8657d93..f783c8b5690 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -38,6 +38,7 @@ type BuiltinThemeType =
type ContentCompactType = 'compact' | 'wide';
type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
/**
* 登录过期模式
@@ -95,6 +96,7 @@ export type {
BreadcrumbStyleType,
BuiltinThemeType,
ContentCompactType,
+ LayoutHeaderMenuAlignType,
LayoutHeaderModeType,
LayoutType,
LoginExpiredModeType,
diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index f05a96dc3c9..87f03de69bb 100644
--- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -46,6 +46,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"header": {
"enable": true,
"hidden": false,
+ "menuAlign": "start",
"mode": "fixed",
},
"logo": {
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
index c4dce039f54..a5912a06722 100644
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -46,6 +46,7 @@ const defaultPreferences: Preferences = {
header: {
enable: true,
hidden: false,
+ menuAlign: 'start',
mode: 'fixed',
},
logo: {
diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index 59dce2e2164..f8b35242c6a 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -5,6 +5,7 @@ import type {
BuiltinThemeType,
ContentCompactType,
DeepPartial,
+ LayoutHeaderMenuAlignType,
LayoutHeaderModeType,
LayoutType,
LoginExpiredModeType,
@@ -104,6 +105,8 @@ interface HeaderPreferences {
enable: boolean;
/** 顶栏是否隐藏,css-隐藏 */
hidden: boolean;
+ /** 顶栏菜单位置 */
+ menuAlign: LayoutHeaderMenuAlignType;
/** header显示模式 */
mode: LayoutHeaderModeType;
}
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index ea7a14c05ee..9433d54836d 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -332,6 +332,7 @@ function removeMenuItem(item: MenuItemRegistered) {
is(theme, true),
is('rounded', rounded),
is('collapse', collapse),
+ is('menu-align', mode === 'horizontal'),
]"
:style="menuStyle"
role="menu"
@@ -423,6 +424,10 @@ $namespace: vben;
opacity: 1;
}
+.is-menu-align {
+ justify-content: var(--menu-align, start);
+}
+
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {
--menu-title-width: 140px;
diff --git a/packages/effects/layouts/src/basic/header/header.vue b/packages/effects/layouts/src/basic/header/header.vue
index 546342bf9b6..c271f834ab9 100644
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -133,7 +133,10 @@ function clearPreferencesAndLogout() {
>