From 3d1f41925d54ebe89f1bbbdfe916be59bb97c9cf Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Thu, 14 Oct 2021 18:21:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8D=E6=8C=89?=
 =?UTF-8?q?=E9=92=AETab=E8=87=AA=E9=80=82=E5=BA=94=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |  1 +
 src/components/custom/ButtonTab/index.vue     | 41 +++++++++++++++----
 src/components/custom/ChromeTab/index.vue     |  6 ++-
 src/components/custom/IconClose/index.vue     | 10 ++++-
 .../GlobalTab/components/MultiTab/index.vue   |  1 +
 src/store/modules/theme/index.ts              | 14 +++++++
 src/utils/common/color.ts                     |  8 ++++
 src/utils/common/index.ts                     |  2 +-
 src/utils/index.ts                            |  1 +
 9 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 98b3a4a3..d21b9ee5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -55,4 +55,5 @@
 			"editor.defaultFormatter": "yzhang.markdown-all-in-one"
 	},
 	"workbench.productIconTheme": "fluent-icons",
+	"vue3snippets.enable-compile-vue-file-on-did-save-code": false,
 }
diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
index 5dd4e280..46c3e23c 100644
--- a/src/components/custom/ButtonTab/index.vue
+++ b/src/components/custom/ButtonTab/index.vue
@@ -1,11 +1,18 @@
 <template>
   <div
-    class="relative flex-center h-30px pl-14px border-1px rounded-2px cursor-pointer"
-    :class="[
-      closable ? 'pr-6px' : 'pr-14px',
-      active || isHover ? 'text-primary border-primary border-opacity-30 ' : 'border-[#e5e7eb] dark:border-[#ffffff3d]',
-      { 'bg-primary bg-opacity-10': active }
-    ]"
+    class="
+      relative
+      flex-center
+      h-30px
+      pl-14px
+      border-1px
+      rounded-2px
+      cursor-pointer
+      border-[#e5e7eb]
+      dark:border-[#ffffff3d]
+    "
+    :class="[closable ? 'pr-6px' : 'pr-14px']"
+    :style="buttonStyle"
     @mouseenter="setTrue"
     @mouseleave="setFalse"
   >
@@ -13,20 +20,26 @@
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-10px">
-      <icon-close :is-primary="active || isHover" @click="handleClose" />
+      <icon-close :is-primary="active || isHover" :primary-color="primaryColor" @click="handleClose" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useBoolean } from '@/hooks';
 import { IconClose } from '@/components';
+import { shallowColor } from '@/utils';
 
-defineProps({
+const props = defineProps({
   active: {
     type: Boolean,
     default: false
   },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
+  },
   closable: {
     type: Boolean,
     default: true
@@ -40,5 +53,17 @@ function handleClose(e: MouseEvent) {
   e.stopPropagation();
   emit('close');
 }
+
+const buttonStyle = computed(() => {
+  const style: { [key: string]: string } = {};
+  if (props.active || isHover.value) {
+    style.color = props.primaryColor;
+    style.borderColor = shallowColor(props.primaryColor, 0.3);
+    if (props.active) {
+      style.backgroundColor = shallowColor(props.primaryColor, 0.1);
+    }
+  }
+  return style;
+});
 </script>
 <style scoped></style>
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
index 77ffbdf8..b7380ea3 100644
--- a/src/components/custom/ChromeTab/index.vue
+++ b/src/components/custom/ChromeTab/index.vue
@@ -12,7 +12,7 @@
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-18px">
-      <icon-close :is-primary="isActive" @click="handleClose" />
+      <icon-close :is-primary="isActive" :primary-color="primaryColor" @click="handleClose" />
     </div>
     <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
   </div>
@@ -29,6 +29,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
+  },
   closable: {
     type: Boolean,
     default: true
diff --git a/src/components/custom/IconClose/index.vue b/src/components/custom/IconClose/index.vue
index 62785257..dd58a2de 100644
--- a/src/components/custom/IconClose/index.vue
+++ b/src/components/custom/IconClose/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="relative flex-center w-18px h-18px text-14px"
-    :class="[isPrimary ? 'text-primary' : 'text-gray-400']"
+    :style="{ color: isPrimary ? primaryColor : defaultColor }"
     @mouseenter="setTrue"
     @mouseleave="setFalse"
   >
@@ -19,6 +19,14 @@ defineProps({
   isPrimary: {
     type: Boolean,
     default: false
+  },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
+  },
+  defaultColor: {
+    type: String,
+    default: '#9ca3af'
   }
 });
 
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
index 565174c8..b31f44ba 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
@@ -19,6 +19,7 @@
       :key="item.path"
       class="mr-10px"
       :active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
       :closable="item.name !== ROUTE_HOME.name"
       :dark-mode="theme.darkMode"
       @click="handleClickTab(item.fullPath)"
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index d89a9013..7c2316cd 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -3,10 +3,17 @@ import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings, defaultThemeSettings } from '@/settings';
 import { store } from '@/store';
 import type { ThemeSettings, NavMode, MultiTabMode, AnimateType, HorizontalMenuPosition } from '@/interface';
+import { shallowColor } from '@/utils';
 import { getHoverAndPressedColor } from './helpers';
 
 type ThemeState = ThemeSettings;
 
+interface relativeThemeColor {
+  hover: string;
+  pressed: string;
+  shallow: string;
+}
+
 const themeStore = defineStore({
   id: 'theme-store',
   state: (): ThemeState => ({
@@ -51,6 +58,13 @@ const themeStore = defineStore({
         }
       };
     },
+    relativeThemeColor(): relativeThemeColor {
+      const shallow = shallowColor(this.themeColor, 0.1);
+      return {
+        ...getHoverAndPressedColor(this.themeColor),
+        shallow
+      };
+    },
     isVerticalNav(): boolean {
       const { mode } = this.navStyle;
       return mode === 'vertical' || mode === 'vertical-mix';
diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
index 66493baf..26dace54 100644
--- a/src/utils/common/color.ts
+++ b/src/utils/common/color.ts
@@ -8,6 +8,14 @@ export function brightenColor(color: string) {
   return chroma(color).brighten(0.5).hex();
 }
 
+/**
+ * 更浅的颜色
+ * @param color
+ */
+export function shallowColor(color: string, alpha: number = 0.5) {
+  return chroma(color).alpha(alpha).hex();
+}
+
 /**
  * 更暗的颜色
  * @param color
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 6b9eb1bf..44140e76 100644
--- a/src/utils/common/index.ts
+++ b/src/utils/common/index.ts
@@ -12,6 +12,6 @@ export {
   isMap
 } from './typeof';
 
-export { brightenColor, darkenColor } from './color';
+export { brightenColor, shallowColor, darkenColor } from './color';
 
 export { dynamicIconRender } from './icon';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 58143d2e..4d58100d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -22,6 +22,7 @@ export {
   isSet,
   isMap,
   brightenColor,
+  shallowColor,
   darkenColor,
   dynamicIconRender
 } from './common';