From 136ba154fe59f0c55180d9f4303c5a08ab307181 Mon Sep 17 00:00:00 2001
From: Sendya <18x@loacg.com>
Date: Fri, 22 Jul 2022 12:06:42 +0800
Subject: [PATCH] fix: layout mix not support realDark

---
 packages/pro-layout/examples/layouts/BasicLayout.vue       | 4 ++--
 packages/pro-layout/examples/main.ts                       | 4 ++--
 packages/pro-layout/examples/views/Hello.vue               | 1 -
 packages/pro-layout/examples/views/MyPage.vue              | 1 -
 packages/pro-layout/package.json                           | 2 +-
 packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx | 2 +-
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/pro-layout/examples/layouts/BasicLayout.vue b/packages/pro-layout/examples/layouts/BasicLayout.vue
index 63be7ad9..7a67c731 100644
--- a/packages/pro-layout/examples/layouts/BasicLayout.vue
+++ b/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,
diff --git a/packages/pro-layout/examples/main.ts b/packages/pro-layout/examples/main.ts
index 8f98d1f9..f93f8e92 100644
--- a/packages/pro-layout/examples/main.ts
+++ b/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);
 
diff --git a/packages/pro-layout/examples/views/Hello.vue b/packages/pro-layout/examples/views/Hello.vue
index 02d828ac..57b97be1 100644
--- a/packages/pro-layout/examples/views/Hello.vue
+++ b/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."
diff --git a/packages/pro-layout/examples/views/MyPage.vue b/packages/pro-layout/examples/views/MyPage.vue
index c196e391..0a102c05 100644
--- a/packages/pro-layout/examples/views/MyPage.vue
+++ b/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."
diff --git a/packages/pro-layout/package.json b/packages/pro-layout/package.json
index f79c0c5e..0fce6595 100644
--- a/packages/pro-layout/package.json
+++ b/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",
diff --git a/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx b/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx
index 526c6b86..7ba5e1c7 100644
--- a/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx
+++ b/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 {