fix: 双列菜单模式下新增深色侧边栏和深色侧边栏子栏 (#7542)

* fix: 双列菜单模式下新增深色侧边栏和深色侧边栏子栏

* fix: 修复报错 config.test.ts.snap

* fix: 修复lint报错

* fix: 修复侧边栏菜单文本内容溢出问题

* fix: 修复lint报错

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,

packages/@core/preferences/src/config.ts

@@ -121,6 +121,7 @@ const defaultPreferences: Preferences = {
     fontSize: 16,
     semiDarkHeader: false,
     semiDarkSidebar: false,
+    semiDarkSidebarSub: false,
   },
   transition: {
     enable: true,

packages/@core/preferences/src/types.ts

@@ -253,6 +253,8 @@ interface ThemePreferences {
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
   semiDarkSidebar: boolean;
+  /** 是否开启半深色子菜单（只在theme='light'时生效） */
+  semiDarkSidebarSub: boolean;
 }
 
 interface TransitionPreferences {

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"
     />
-    <div
-      v-if="isSidebarMixed"
-      ref="asideRef"
-      :class="{
+  </aside>
+  <div
+    v-if="isSidebarMixed"
+    ref="asideRef"
+    :class="[
+      themeSub,
+      {
         'border-l': extraVisible,
-      }"
-      :style="extraStyle"
-      class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
-    >
-      <SidebarCollapseButton
-        v-if="isSidebarMixed && expandOnHover"
-        v-model:collapsed="extraCollapse"
-      />
-
-      <SidebarFixedButton
-        v-if="!extraCollapse"
-        v-model:expand-on-hover="expandOnHover"
-      />
-      <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
-        <slot name="extra-title"></slot>
-      </div>
-      <VbenScrollbar
-        :style="extraContentStyle"
-        class="border-border py-2"
-        shadow
-        shadow-border
-      >
-        <slot name="extra"></slot>
-      </VbenScrollbar>
+      },
+    ]"
+    :style="extraStyle"
+    class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
+  >
+    <SidebarCollapseButton
+      v-if="isSidebarMixed && expandOnHover"
+      v-model:collapsed="extraCollapse"
+    />
+
+    <SidebarFixedButton
+      v-if="!extraCollapse"
+      v-model:expand-on-hover="expandOnHover"
+    />
+    <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
+      <slot name="extra-title"></slot>
     </div>
-  </aside>
+    <VbenScrollbar
+      :style="extraContentStyle"
+      class="border-border py-2"
+      shadow
+      shadow-border
+    >
+      <slot name="extra"></slot>
+    </VbenScrollbar>
+  </div>
 </template>

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

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -56,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
   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')"

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

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"
       />
     </template>
     <template #side-extra-title>

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -3,8 +3,11 @@ import type { Component } from 'vue';
 
 import type { ThemeModeType } from '@vben/types';
 
+import { watch } from 'vue';
+
 import { MoonStar, Sun, SunMoon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
 
 import SwitchItem from '../switch-item.vue';
 
@@ -14,8 +17,20 @@ defineOptions({
 
 const modelValue = defineModel<string>({ default: 'auto' });
 const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
+const themeSemiDarkSidebarSub = defineModel<boolean>('themeSemiDarkSidebarSub');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
+const { layout } = usePreferences();
+
+watch(
+  () => themeSemiDarkSidebar.value,
+  () => {
+    if (!themeSemiDarkSidebar.value) {
+      themeSemiDarkSidebarSub.value = themeSemiDarkSidebar.value;
+    }
+  },
+);
+
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
     icon: Sun,
@@ -71,11 +86,27 @@ function nameView(name: string) {
 
     <SwitchItem
       v-model="themeSemiDarkSidebar"
-      :disabled="modelValue === 'dark'"
+      :disabled="
+        modelValue === 'dark' ||
+        layout === 'header-nav' ||
+        layout === 'full-content'
+      "
+      :tip="$t('preferences.theme.darkSidebarTip')"
       class="mt-6"
     >
       {{ $t('preferences.theme.darkSidebar') }}
     </SwitchItem>
+    <SwitchItem
+      v-model="themeSemiDarkSidebarSub"
+      :disabled="
+        modelValue === 'dark' ||
+        (layout !== 'header-mixed-nav' && layout !== 'sidebar-mixed-nav') ||
+        !themeSemiDarkSidebar
+      "
+      :tip="$t('preferences.theme.darkSidebarSubTip')"
+    >
+      {{ $t('preferences.theme.darkSidebarSub') }}
+    </SwitchItem>
     <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
       {{ $t('preferences.theme.darkHeader') }}
     </SwitchItem>

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -88,6 +88,7 @@ const themeMode = defineModel<ThemeModeType>('themeMode');
 const themeRadius = defineModel<string>('themeRadius');
 const themeFontSize = defineModel<number>('themeFontSize');
 const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
+const themeSemiDarkSidebarSub = defineModel<boolean>('themeSemiDarkSidebarSub');
 const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
@@ -319,6 +320,7 @@ async function handleReset() {
                 v-model="themeMode"
                 v-model:theme-semi-dark-header="themeSemiDarkHeader"
                 v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
+                v-model:theme-semi-dark-sidebar-sub="themeSemiDarkSidebarSub"
               />
             </Block>
             <Block :title="$t('preferences.theme.builtin.title')">

packages/locales/src/langs/en-US/preferences.json

@@ -127,6 +127,9 @@
     "light": "Light",
     "dark": "Dark",
     "darkSidebar": "Semi Dark Sidebar",
+    "darkSidebarTip": "It can be enabled when the theme is light, and the layout is neither 'Horizontal' nor 'Full Content'.",
+    "darkSidebarSub": "Semi Dark Sidebar Sub",
+    "darkSidebarSubTip": "It can be enabled when the theme is light, the semi dark sidebar is enabled, and the layout uses 'Two-Column' menu mode.",
     "darkHeader": "Semi Dark Header",
     "weakMode": "Weak Mode",
     "grayMode": "Gray Mode",

packages/locales/src/langs/zh-CN/preferences.json

@@ -127,6 +127,9 @@
     "light": "浅色",
     "dark": "深色",
     "darkSidebar": "深色侧边栏",
+    "darkSidebarTip": "当主题为浅色，布局不为水平菜单或不为内容全屏时可开启",
+    "darkSidebarSub": "深色侧边栏子栏",
+    "darkSidebarSubTip": "当主题为浅色，开启深色侧边栏且布局使用双列菜单模式时可开启",
     "darkHeader": "深色顶栏",
     "weakMode": "色弱模式",
     "grayMode": "灰色模式",