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

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

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

* fix: 修复lint报错

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

* fix: 修复lint报错

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="{
-        '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>
-    </div>
   </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>
+  </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;
   }
 }