refactor(layouts): layout/header 反转色样式补充

src/components/common/DarkModeSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-center text-18px hover:text-primary cursor-pointer" @click="handleSwitch">
+  <div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
     <icon-mdi-moon-waning-crescent v-if="darkMode" />
     <icon-mdi-white-balance-sunny v-else />
   </div>

src/components/common/HoverContainer.vue

@@ -2,14 +2,14 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
           <slot></slot>
         </div>
       </template>
       {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
     <slot></slot>
   </div>
 </template>
@@ -25,13 +25,20 @@ interface Props {
   placement?: FollowerPlacement;
   /** class类 */
   contentClass?: string;
+  /** 反转模式下 */
+  inverted?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   tooltipContent: '',
   placement: 'bottom',
-  contentClass: ''
+  contentClass: '',
+  inverted: false
 });
 
 const showTooltip = computed(() => Boolean(props.tooltipContent));
+
+const computedClass = computed(() =>
+  [props.contentClass, props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'].join(' ')
+);
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/FullScreen.vue

@@ -1,13 +1,15 @@
 <template>
-  <hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" :inverted="theme.header.inverted" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
     <icon-gridicons-fullscreen v-else class="text-18px" />
   </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
+import { useThemeStore } from '@/store';
 
 const { isFullscreen, toggle } = useFullscreen();
+const theme = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/GithubSite.vue

@@ -2,14 +2,17 @@
   <hover-container
     tooltip-content="github"
     class="w-40px h-full"
-    content-class="hover:text-primary"
+    :inverted="theme.header.inverted"
     @click="handleClickLink"
   >
     <icon-mdi-github class="text-20px" />
   </hover-container>
 </template>
 
 <script lang="ts" setup>
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
 function handleClickLink() {
   window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
 }

src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue

@@ -17,8 +17,9 @@
             :is="breadcrumb.icon"
             v-if="theme.header.crumb.showIcon"
             class="inline-block align-text-bottom mr-4px text-16px"
+            :class="theme.header.inverted && 'text-#BBBBBB'"
           />
-          <span>{{ breadcrumb.label }}</span>
+          <span :class="theme.header.inverted && 'text-#BBBBBB'">{{ breadcrumb.label }}</span>
         </template>
       </n-breadcrumb-item>
     </template>

src/layouts/common/GlobalHeader/components/MenuCollapse.vue

@@ -1,13 +1,14 @@
 <template>
-  <hover-container class="w-40px h-full" content-class="hover:text-primary" @click="app.toggleSiderCollapse">
+  <hover-container class="w-40px h-full" :inverted="theme.header.inverted" @click="app.toggleSiderCollapse">
     <icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" />
     <icon-line-md-menu-fold-left v-else class="text-16px" />
   </hover-container>
 </template>
 
 <script lang="ts" setup>
-import { useAppStore } from '@/store';
+import { useAppStore, useThemeStore } from '@/store';
 
 const app = useAppStore();
+const theme = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/ThemeMode.vue

@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式">
+  <hover-container class="w-40px" :inverted="theme.header.inverted" tooltip-content="主题模式">
     <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
   </hover-container>
 </template>

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -1,19 +1,20 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <hover-container class="px-12px" content-class="hover:text-primary">
+    <hover-container class="px-12px" :inverted="theme.header.inverted">
       <icon-custom-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>
   </n-dropdown>
 </template>
 
 <script lang="ts" setup>
-import { useAuthStore } from '@/store';
+import { useAuthStore, useThemeStore } from '@/store';
 import { iconifyRender } from '@/utils';
 
 type DropdownKey = 'user-center' | 'logout';
 
 const auth = useAuthStore();
+const theme = useThemeStore();
 
 const options = [
   {

src/layouts/common/GlobalSearch/index.vue

@@ -3,7 +3,7 @@
     <hover-container
       class="w-40px h-full"
       tooltip-content="搜索"
-      content-class="hover:text-primary"
+      :inverted="theme.header.inverted"
       @click="handleSearch"
     >
       <icon-uil-search class="text-20px" />
@@ -13,10 +13,12 @@
 </template>
 
 <script lang="ts" setup>
+import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import { SearchModal } from './components';
 
 const { bool: show, toggle } = useBoolean();
+const theme = useThemeStore();
 
 function handleSearch() {
   toggle();