From 01d0bcbfd0473103f11a1345f3cbe44a4f325ce1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=83=E5=AE=B6=E6=80=BF?= <jiayi.yuan@lkcoffee.com>
Date: Fri, 29 Apr 2022 15:53:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor(layouts):=20layout/header=20?=
 =?UTF-8?q?=E5=8F=8D=E8=BD=AC=E8=89=B2=E6=A0=B7=E5=BC=8F=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DarkModeSwitch.vue            |  2 +-
 src/components/common/HoverContainer.vue            | 13 ++++++++++---
 .../common/GlobalHeader/components/FullScreen.vue   |  4 +++-
 .../common/GlobalHeader/components/GithubSite.vue   |  5 ++++-
 .../GlobalHeader/components/GlobalBreadcrumb.vue    |  3 ++-
 .../common/GlobalHeader/components/MenuCollapse.vue |  5 +++--
 .../common/GlobalHeader/components/ThemeMode.vue    |  2 +-
 .../common/GlobalHeader/components/UserAvatar.vue   |  5 +++--
 src/layouts/common/GlobalSearch/index.vue           |  4 +++-
 9 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/common/DarkModeSwitch.vue b/src/components/common/DarkModeSwitch.vue
index ab456eff..02fc106b 100644
--- a/src/components/common/DarkModeSwitch.vue
+++ b/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>
diff --git a/src/components/common/HoverContainer.vue b/src/components/common/HoverContainer.vue
index 031987c9..8fefbc7b 100644
--- a/src/components/common/HoverContainer.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/components/FullScreen.vue b/src/layouts/common/GlobalHeader/components/FullScreen.vue
index 5b763aee..8b8270fd 100644
--- a/src/layouts/common/GlobalHeader/components/FullScreen.vue
+++ b/src/layouts/common/GlobalHeader/components/FullScreen.vue
@@ -1,5 +1,5 @@
 <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>
@@ -7,7 +7,9 @@
 
 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
+import { useThemeStore } from '@/store';
 
 const { isFullscreen, toggle } = useFullscreen();
+const theme = useThemeStore();
 </script>
 <style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/GithubSite.vue b/src/layouts/common/GlobalHeader/components/GithubSite.vue
index 3e278846..2590005f 100644
--- a/src/layouts/common/GlobalHeader/components/GithubSite.vue
+++ b/src/layouts/common/GlobalHeader/components/GithubSite.vue
@@ -2,7 +2,7 @@
   <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" />
@@ -10,6 +10,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
 function handleClickLink() {
   window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
 }
diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
index c8ab5e23..5061cfee 100644
--- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
index 01fafc4c..155ef5ae 100644
--- a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/components/ThemeMode.vue b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
index 23838a9d..90ebb4f3 100644
--- a/src/layouts/common/GlobalHeader/components/ThemeMode.vue
+++ b/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>
diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
index 342a56aa..afa3dbdc 100644
--- a/src/layouts/common/GlobalHeader/components/UserAvatar.vue
+++ b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
@@ -1,6 +1,6 @@
 <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>
@@ -8,12 +8,13 @@
 </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 = [
   {
diff --git a/src/layouts/common/GlobalSearch/index.vue b/src/layouts/common/GlobalSearch/index.vue
index f33e3f51..435cc816 100644
--- a/src/layouts/common/GlobalSearch/index.vue
+++ b/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();

From 0243b2750501359a01cba57c8e2c65930f10e40a Mon Sep 17 00:00:00 2001
From: Eric_Yuan <330365043@qq.com>
Date: Fri, 29 Apr 2022 19:19:10 +0800
Subject: [PATCH 2/2] =?UTF-8?q?style(GlobalBreadcrumb):=20=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8Ffix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/GlobalHeader/components/GlobalBreadcrumb.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
index 5061cfee..8e599b35 100644
--- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
+++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -17,9 +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'"
+            :class="{ 'text-#BBBBBB': theme.header.inverted }"
           />
-          <span :class="theme.header.inverted && 'text-#BBBBBB'">{{ breadcrumb.label }}</span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
         </template>
       </n-breadcrumb-item>
     </template>