From 32379ba4b753654f1303a14452a17620887756c4 Mon Sep 17 00:00:00 2001 From: zouawen <846027729@qq.com> Date: Wed, 11 Feb 2026 16:08:32 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=8C=E5=88=97=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=96=B0=E5=A2=9E=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E6=B7=B1=E8=89=B2=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=AD=90=E6=A0=8F=20(#7542)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 双列菜单模式下新增深色侧边栏和深色侧边栏子栏 * fix: 修复报错 config.test.ts.snap * fix: 修复lint报错 * fix: 修复侧边栏菜单文本内容溢出问题 * fix: 修复lint报错 --- .../__snapshots__/config.test.ts.snap | 1 + packages/@core/preferences/src/config.ts | 1 + packages/@core/preferences/src/types.ts | 2 + .../src/components/layout-sidebar.vue | 68 ++++++++++--------- .../@core/ui-kit/layout-ui/src/vben-layout.ts | 5 ++ .../ui-kit/layout-ui/src/vben-layout.vue | 2 + .../components/normal-menu/normal-menu.vue | 2 + packages/effects/layouts/src/basic/layout.vue | 8 ++- .../preferences/blocks/theme/theme.vue | 33 ++++++++- .../preferences/preferences-drawer.vue | 2 + .../locales/src/langs/en-US/preferences.json | 3 + .../locales/src/langs/zh-CN/preferences.json | 3 + 12 files changed, 97 insertions(+), 33 deletions(-) diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap index bccc7e92..d66f1065 100644 --- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap +++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap @@ -120,6 +120,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj "radius": "0.5", "semiDarkHeader": false, "semiDarkSidebar": false, + "semiDarkSidebarSub": false, }, "transition": { "enable": true, diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 43cc73fa..6bba8099 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -121,6 +121,7 @@ const defaultPreferences: Preferences = { fontSize: 16, semiDarkHeader: false, semiDarkSidebar: false, + semiDarkSidebarSub: false, }, transition: { enable: true, diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 6db64af2..24c41c85 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -253,6 +253,8 @@ interface ThemePreferences { semiDarkHeader: boolean; /** 是否开启半深色菜单（只在theme='light'时生效） */ semiDarkSidebar: boolean; + /** 是否开启半深色子菜单（只在theme='light'时生效） */ + semiDarkSidebarSub: boolean; } interface TransitionPreferences { diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue index 7c0e9c10..6193517a 100644 --- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue +++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue @@ -77,7 +77,10 @@ interface Props { * 主题 */ theme: string; - + /** + * 子主题 + */ + themeSub: string; /** * 宽度 */ @@ -289,35 +292,38 @@ function handleMouseleave() { v-if="showCollapseButton && !isSidebarMixed" v-model:collapsed="collapse" /> -
- - - -
- -
- - - -
+
+ + + +
+ +
+ + + +
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts index 9b77ba96..b6b41375 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.ts +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.ts @@ -146,6 +146,11 @@ interface VbenLayoutProps { * @default dark */ sidebarTheme?: ThemeModeType; + /** + * 侧边栏子栏 + * @default dark + */ + sidebarThemeSub?: ThemeModeType; /** * 侧边栏宽度 * @default 210 diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index a35ed349..b51be1e6 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -56,6 +56,7 @@ const props = withDefaults(defineProps(), { sidebarHidden: false, sidebarMixedWidth: 80, sidebarTheme: 'dark', + sidebarThemeSub: 'dark', sidebarWidth: 180, sideCollapseWidth: 60, tabbarEnable: true, @@ -502,6 +503,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT; :mixed-width="sidebarMixedWidth" :show="showSidebar" :theme="sidebarTheme" + :theme-sub="sidebarThemeSub" :width="getSidebarWidth" :z-index="sidebarZIndex" @leave="() => emit('sideMouseLeave')" diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue index 86e86c91..11661386 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue @@ -151,10 +151,12 @@ $namespace: vben; } &__name { + width: 100%; margin-top: 8px; margin-bottom: 0; font-size: calc(var(--font-size-base, 16px) * 0.75); font-weight: 400; + text-align: center; transition: all 0.25s ease; } } diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index b8912c09..687fd647 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -60,6 +60,11 @@ const sidebarTheme = computed(() => { return dark ? 'dark' : 'light'; }); +const sidebarThemeSub = computed(() => { + const dark = isDark.value || preferences.theme.semiDarkSidebarSub; + return dark ? 'dark' : 'light'; +}); + const headerTheme = computed(() => { const dark = isDark.value || preferences.theme.semiDarkHeader; return dark ? 'dark' : 'light'; @@ -240,6 +245,7 @@ const headerSlots = computed(() => { :sidebar-hidden="preferences.sidebar.hidden" :sidebar-mixed-width="preferences.sidebar.mixedWidth" :sidebar-theme="sidebarTheme" + :sidebar-theme-sub="sidebarThemeSub" :sidebar-width="preferences.sidebar.width" :side-collapse-width="preferences.sidebar.collapseWidth" :tabbar-enable="preferences.tabbar.enable" @@ -355,7 +361,7 @@ const headerSlots = computed(() => { :collapse="preferences.sidebar.extraCollapse" :menus="wrapperMenus(extraMenus)" :rounded="isMenuRounded" - :theme="sidebarTheme" + :theme="sidebarThemeSub" />