Fixes bug

src/layout/components/Header/ProjectSetting.vue

@@ -226,7 +226,7 @@
 
       function togNavTheme(theme) {
         settingStore.navTheme = theme;
-        if (settingStore.navMode === 'horizontal' && theme === 'light') {
+        if (settingStore.navMode === 'horizontal' && ['light'].includes(theme)) {
           settingStore.navTheme = 'dark';
         }
       }
@@ -237,11 +237,11 @@
 
       function togNavMode(mode) {
         settingStore.navMode = mode;
-        if (mode === 'horizontal') {
-          settingStore.setNavTheme('light');
-        } else {
-          settingStore.setNavTheme('dark');
-        }
+        // if (mode === 'header-dark') {
+        //   settingStore.setNavTheme('dark');
+        // } else {
+        //   settingStore.setNavTheme('light');
+        // }
       }
 
       return {

src/layout/components/Header/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layout-header" :class="{ 'layout-header-light': !(navTheme == 'header-dark') }">
+  <div class="layout-header">
     <!--顶部菜单-->
     <div class="layout-header-left" v-if="navMode === 'horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light" />
+      <AsideMenu v-model:collapsed="collapsed" :inverted="getInverted" mode="horizontal" />
     </div>
     <!--左侧菜单-->
     <div class="layout-header-left" v-else>
@@ -131,6 +131,9 @@
       collapsed: {
         type: Boolean,
       },
+      inverted: {
+        type: Boolean,
+      },
     },
     setup(props) {
       const userStore = useUserStore();
@@ -153,6 +156,11 @@
         crumbsSetting: getCrumbsSetting,
       });
 
+      const getInverted = computed(() => {
+        const navTheme = unref(getNavTheme);
+        return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
+      });
+
       const getChangeStyle = computed(() => {
         const { collapsed } = props;
         const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
@@ -305,6 +313,7 @@
         reloadPage,
         drawerSetting,
         openSetting,
+        getInverted,
       };
     },
   });
@@ -342,6 +351,10 @@
       .n-breadcrumb {
         display: inline-block;
       }
+
+      &-menu {
+        color: var(--text-color);
+      }
     }
 
     &-right {

src/layout/index.vue

@@ -19,8 +19,8 @@
     </NLayoutSider>
 
     <NLayout :inverted="inverted">
-      <NLayoutHeader :inverted="inverted" :position="fixedHeader">
-        <PageHeader v-model:collapsed="collapsed" />
+      <NLayoutHeader :inverted="getHeaderInverted" :position="fixedHeader">
+        <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
       </NLayoutHeader>
 
       <NLayoutContent
@@ -62,7 +62,6 @@
   import { MainView } from './components/Main';
   import { AsideMenu } from './components/Menu';
   import { PageHeader } from './components/Header';
-  import { PageFooter } from './components/Footer';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 
@@ -74,7 +73,6 @@
       PageHeader,
       AsideMenu,
       Logo,
-      PageFooter,
     },
     setup() {
       const { getDarkTheme } = useDesignSetting();
@@ -114,6 +112,11 @@
         return ['dark', 'header-dark'].includes(unref(getNavTheme));
       });
 
+      const getHeaderInverted = computed(() => {
+        const navTheme = unref(getNavTheme);
+        return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+      });
+
       const leftMenuWidth = computed(() => {
         const { minMenuWidth, menuWidth } = unref(getMenuSetting);
         return collapsed.value ? minMenuWidth : menuWidth;
@@ -149,6 +152,7 @@
         navMode,
         getShowFooter,
         getDarkTheme,
+        getHeaderInverted,
       };
     },
   });