From 3c8dd772f89d2b656a42c4f7164e581acdb2b1a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=83=E5=AE=B6=E6=80=BF?= <jiayi.yuan@luckincoffee.com>
Date: Wed, 27 Apr 2022 16:39:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(layouts):=20=E6=B7=BB=E5=8A=A0=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F/=E5=A4=B4=E9=83=A8=E7=9A=84=E5=8F=8D?=
 =?UTF-8?q?=E8=BD=AC=E6=A8=A1=E5=BC=8F=E6=9D=A5=E5=A2=9E=E5=8A=A0=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DarkModeContainer.vue          | 12 ++++++++++--
 .../common/GlobalHeader/components/FullScreen.vue    |  2 +-
 .../common/GlobalHeader/components/GithubSite.vue    |  4 ++--
 .../common/GlobalHeader/components/HeaderMenu.vue    | 11 +++++++++--
 .../common/GlobalHeader/components/UserAvatar.vue    |  2 +-
 src/layouts/common/GlobalHeader/index.vue            |  2 +-
 src/layouts/common/GlobalSearch/index.vue            |  9 +++++++--
 .../components/VerticalMixSider/index.vue            |  2 +-
 .../VerticalSider/components/VerticalMenu.vue        |  1 +
 .../GlobalSider/components/VerticalSider/index.vue   |  2 +-
 .../SettingDrawer/components/PageFunc/index.vue      |  6 ++++++
 src/settings/theme.json                              |  2 ++
 src/settings/theme.ts                                |  2 ++
 src/store/modules/theme/index.ts                     |  8 ++++++++
 src/typings/system.d.ts                              |  4 ++++
 15 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/common/DarkModeContainer.vue b/src/components/common/DarkModeContainer.vue
index 28827c9d..c0dc3715 100644
--- a/src/components/common/DarkModeContainer.vue
+++ b/src/components/common/DarkModeContainer.vue
@@ -1,10 +1,18 @@
 <template>
   <div
-    class="bg-white text-[#333639] dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+    class="dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
   >
     <slot></slot>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+  inverted?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  inverted: false
+});
+</script>
 <style scoped></style>
diff --git a/src/layouts/common/GlobalHeader/components/FullScreen.vue b/src/layouts/common/GlobalHeader/components/FullScreen.vue
index b72248f2..5b763aee 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="全屏" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
     <icon-gridicons-fullscreen v-else class="text-18px" />
   </hover-container>
diff --git a/src/layouts/common/GlobalHeader/components/GithubSite.vue b/src/layouts/common/GlobalHeader/components/GithubSite.vue
index 0d567e80..a24b151a 100644
--- a/src/layouts/common/GlobalHeader/components/GithubSite.vue
+++ b/src/layouts/common/GlobalHeader/components/GithubSite.vue
@@ -1,7 +1,7 @@
 <template>
-  <hover-container tooltip-content="github" class="w-40px h-full">
+  <hover-container tooltip-content="github" class="w-40px h-full" content-class="hover:text-primary">
     <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
-      <icon-mdi-github class="text-20px text-[#666]" />
+      <icon-mdi-github class="text-20px" />
     </a>
   </hover-container>
 </template>
diff --git a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
index 226cf452..22feb27a 100644
--- a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
+++ b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -1,16 +1,23 @@
 <template>
-  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+  <n-menu
+    :value="activeKey"
+    mode="horizontal"
+    :options="menus"
+    :inverted="theme.header.inverted"
+    @update:value="handleUpdateMenu"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
-import { useRouteStore } from '@/store';
+import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
 const route = useRoute();
 const routeStore = useRouteStore();
+const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
 const menus = computed(() => routeStore.menus as GlobalMenuOption[]);
diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
index f66ecadc..342a56aa 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">
+    <hover-container class="px-12px" content-class="hover:text-primary">
       <icon-custom-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>
diff --git a/src/layouts/common/GlobalHeader/index.vue b/src/layouts/common/GlobalHeader/index.vue
index 1672bc3d..1e84ef30 100644
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/src/layouts/common/GlobalHeader/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <dark-mode-container class="global-header flex-y-center h-full">
+  <dark-mode-container class="global-header flex-y-center h-full" :inverted="theme.header.inverted">
     <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
     <div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
       <menu-collapse v-if="showMenuCollapse" />
diff --git a/src/layouts/common/GlobalSearch/index.vue b/src/layouts/common/GlobalSearch/index.vue
index 28519673..f33e3f51 100644
--- a/src/layouts/common/GlobalSearch/index.vue
+++ b/src/layouts/common/GlobalSearch/index.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
-    <hover-container tooltip-content="搜索" class="w-40px h-full" @click="handleSearch">
-      <icon-uil-search class="text-20px text-[#666]" />
+    <hover-container
+      class="w-40px h-full"
+      tooltip-content="搜索"
+      content-class="hover:text-primary"
+      @click="handleSearch"
+    >
+      <icon-uil-search class="text-20px" />
     </hover-container>
     <search-modal v-model:value="show" />
   </div>
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
index a19fcfd5..9a6d94bd 100644
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <dark-mode-container class="flex h-full" @mouseleave="resetFirstDegreeMenus">
+  <dark-mode-container class="flex h-full" :inverted="theme.sider.inverted" @mouseleave="resetFirstDegreeMenus">
     <div class="flex-1 flex-col-stretch h-full">
       <global-logo :show-title="false" :style="{ height: theme.header.height + 'px' }" />
       <n-scrollbar class="flex-1-hidden">
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
index d5f1f326..be7be1be 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
@@ -8,6 +8,7 @@
       :options="routeStore.menus"
       :expanded-keys="expandedKeys"
       :indent="18"
+      :inverted="theme.sider.inverted"
       @update:value="handleUpdateMenu"
       @update:expanded-keys="handleUpdateExpandedKeys"
     />
diff --git a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
index 0adeb1a7..c18b4025 100644
--- a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <dark-mode-container class="flex-col-stretch h-full">
+  <dark-mode-container class="flex-col-stretch h-full" :inverted="theme.sider.inverted">
     <global-logo v-if="!isHorizontalMix" :show-title="showTitle" :style="{ height: theme.header.height + 'px' }" />
     <vertical-menu />
   </dark-mode-container>
diff --git a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
index ccd3e8fd..1d2fdf47 100644
--- a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
@@ -1,6 +1,12 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
+    <setting-menu label="侧边栏反转色">
+      <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
+    </setting-menu>
+    <setting-menu label="头部反转色">
+      <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
+    </setting-menu>
     <setting-menu label="固定头部和多页签">
       <n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
     </setting-menu>
diff --git a/src/settings/theme.json b/src/settings/theme.json
index d0618067..624db62f 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -59,6 +59,7 @@
 	"fixedHeaderAndTab": true,
 	"showReload": true,
 	"header": {
+		"inverted": false,
 		"height": 56,
 		"crumb": {
 			"visible": true,
@@ -82,6 +83,7 @@
 		"isCache": true
 	},
 	"sider": {
+		"inverted": false,
 		"width": 220,
 		"collapsedWidth": 64,
 		"mixWidth": 80,
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index a307536d..225d41f4 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -52,6 +52,7 @@ const defaultThemeSetting: Theme.Setting = {
   fixedHeaderAndTab: true,
   showReload: true,
   header: {
+    inverted: false,
     height: 56,
     crumb: {
       visible: true,
@@ -69,6 +70,7 @@ const defaultThemeSetting: Theme.Setting = {
     isCache: true
   },
   sider: {
+    inverted: false,
     width: 220,
     collapsedWidth: 64,
     mixWidth: 80,
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 118f1328..970d4f04 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -38,6 +38,14 @@ export const useThemeStore = defineStore('theme-store', {
     setLayoutMode(mode: EnumType.ThemeLayoutMode) {
       this.layout.mode = mode;
     },
+    /** 设置侧边栏反转色 */
+    setSiderInverted(isInverted: boolean) {
+      this.sider.inverted = isInverted;
+    },
+    /** 设置头部反转色 */
+    setHeaderInverted(isInverted: boolean) {
+      this.header.inverted = isInverted;
+    },
     /** 设置系统主题颜色 */
     setThemeColor(themeColor: string) {
       this.themeColor = themeColor;
diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
index 64d65837..11d053a5 100644
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@@ -147,6 +147,8 @@ declare namespace Theme {
 
   /** 头部样式 */
   interface Header {
+    /** 头部反转色 */
+    inverted: boolean;
     /** 头部高度 */
     height: number;
     /** 面包屑样式 */
@@ -182,6 +184,8 @@ declare namespace Theme {
 
   /** 侧边栏样式 */
   interface Sider {
+    /** 侧边栏反转色 */
+    inverted: boolean;
     /** 侧边栏宽度 */
     width: number;
     /** 侧边栏折叠时的宽度 */