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 01/61] =?UTF-8?q?fix:=20=E5=8F=8C=E5=88=97=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=96=B0=E5=A2=9E=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E4=BE=A7=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 bccc7e922..d66f1065f 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 43cc73fac..6bba8099e 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 6db64af2a..24c41c850 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 7c0e9c100..6193517a0 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 9b77ba96e..b6b413751 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 a35ed349c..b51be1e66 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 86e86c914..11661386f 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 b8912c095..687fd6479 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" /> From 03ebbea46aed722f6999c7cda6834452b9edfe88 Mon Sep 17 00:00:00 2001 From: AxiosLeo <13862149+AxiosLeo@users.noreply.github.com> Date: Thu, 12 Feb 2026 22:22:53 +0800 Subject: [PATCH 04/61] fix(menu): update hover color variable to use the correct reference (#7544) * fix(menu): update hover color variable to use the correct reference Medium Severity In the horizontal .is-light menu section, --menu-item-hover-color is set to hsl(var(--menu-item-color)), but --menu-item-color is already defined as hsl(var(--accent-foreground)). This results in hsl(hsl(...)) at computed-value time, which is invalid CSS. The non-horizontal .is-light block correctly uses var(--menu-item-color) without the extra hsl() wrapper. * fix(menu): simplify hover styles by removing redundant nested hover rules Low Severity The SCSS &:not(.is-active):hover { &:hover { ... } } compiles to a :hover:hover pseudo-class chain, which is functionally identical to a single :hover. The inner &:hover nesting is redundant and adds unnecessary complexity compared to placing styles directly inside the &:not(.is-active):hover block. --- .../ui-kit/menu-ui/src/components/menu.vue | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 4d3ed6174..d7894a177 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -536,7 +536,7 @@ $namespace: vben; --menu-background-color: hsl(var(--menu)); --menu-item-color: hsl(var(--accent-foreground)); --menu-item-background-color: var(--menu-background-color); - --menu-item-hover-color: hsl(var(--menu-item-color)); + --menu-item-hover-color: var(--menu-item-color); --menu-item-hover-background-color: hsl(var(--accent)); --menu-item-active-color: hsl(var(--primary)); --menu-item-active-background-color: hsl(var(--primary) / 15%); @@ -871,16 +871,14 @@ $namespace: vben; } &:not(.is-active):hover { - &:hover { - //color: var(--menu-submenu-hover-color); - text-decoration: none; - cursor: pointer; - background: var(--menu-submenu-hover-background-color) !important; + //color: var(--menu-submenu-hover-color); + text-decoration: none; + cursor: pointer; + background: var(--menu-submenu-hover-background-color) !important; - // svg { - // fill: var(--menu-submenu-hover-color); - // } - } + // svg { + // fill: var(--menu-submenu-hover-color); + // } } } From 57cf6cbc9e9fd8a6e3ce3a786de532bb8943940b Mon Sep 17 00:00:00 2001 From: zouawen <846027729@qq.com> Date: Wed, 25 Feb 2026 17:50:19 +0800 Subject: [PATCH 05/61] =?UTF-8?q?feature:=20=E7=AE=80=E6=98=93=E7=89=88?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AE=BD=E5=BA=A6=E6=8B=96=E6=8B=BD=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layout-sidebar.vue | 36 +++++++++++++++++-- .../ui-kit/layout-ui/src/vben-layout.vue | 11 +++++- packages/effects/layouts/src/basic/layout.vue | 9 +++++ 3 files changed, 53 insertions(+), 3 deletions(-) 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 76ba74d14..dddb282b7 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 @@ -1,7 +1,7 @@