feat(layouts): 添加侧边栏/头部的反转模式来增加对比度

soybeanjs · Apr 27, 2022 · 861c8b9 · 861c8b9
1 parent a782461
commit 861c8b9
Show file tree

Hide file tree

Showing 15 changed files with 56 additions and 13 deletions.
diff --git 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] dark:text-white dark: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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -155,6 +155,8 @@ declare namespace Theme {
 
   /** 头部样式 */
   interface Header {
+    /** 头部反转色 */
+    inverted: boolean;
     /** 头部高度 */
     height: number;
     /** 面包屑样式 */
@@ -190,6 +192,8 @@ declare namespace Theme {
 
   /** 侧边栏样式 */
   interface Sider {
+    /** 侧边栏反转色 */
+    inverted: boolean;
     /** 侧边栏宽度 */
     width: number;
     /** 侧边栏折叠时的宽度 */