Merge pull request #84 from tclyjy/main

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

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>

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');
 }

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="{ 'text-#BBBBBB': theme.header.inverted }"
           />
-          <span>{{ breadcrumb.label }}</span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ 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,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 = [
   {

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();