fix: layout mix not support realDark

Author: sendya

packages/pro-layout/examples/layouts/BasicLayout.vue

@@ -90,10 +90,10 @@ const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
 
 const state = reactive({
   menuData,
-  splitMenus: false,
+  splitMenus: true,
   // title: 'ProLayout',
   // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
-  navTheme: 'light',
+  navTheme: 'realDark',
   layout: 'mix',
   fixSiderbar: true,
   fixedHeader: true,

packages/pro-layout/examples/main.ts

@@ -1,5 +1,3 @@
-import '@ant-design-vue/pro-layout/style.less';
-
 import { createApp } from 'vue';
 import ProLayout, { PageContainer } from '@ant-design-vue/pro-layout';
 import App from './App.vue';
@@ -10,6 +8,8 @@ import icons from './icons';
 import 'ant-design-vue/es/result/style';
 import 'ant-design-vue/es/button/style';
 import 'ant-design-vue/es/message/style';
+import 'ant-design-vue/dist/antd.dark.less';
+import '@ant-design-vue/pro-layout/style.less';
 
 const app = createApp(App);
 

packages/pro-layout/examples/views/Hello.vue

@@ -3,7 +3,6 @@
     status="404"
     :style="{
       height: '100%',
-      background: '#fff',
     }"
     title="Hello World"
     sub-title="Sorry, you are not authorized to access this page."

packages/pro-layout/examples/views/MyPage.vue

@@ -8,7 +8,6 @@
       status="404"
       :style="{
         height: '100%',
-        background: '#fff',
       }"
       title="Hello World"
       sub-title="Sorry, you are not authorized to access this page."

packages/pro-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx

@@ -157,7 +157,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const { getPrefixCls } = context;
   const baseClassName = getPrefixCls('sider');
   const hasSplitMenu = computed(() => props.layout === 'mix' && props.splitMenus);
-  const sTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
+  const sTheme = computed(() => ((props.layout === 'mix' && props.navTheme !== 'realDark') && 'light') || props.navTheme);
   const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
   const classNames = computed(() => {
     return {