fix(components): 修复按钮Tab自适应主题颜色

.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,
 }

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="
-    :class="[
+      relative
-      closable ? 'pr-6px' : 'pr-14px',
+      flex-center
-      active || isHover ? 'text-primary border-primary border-opacity-30 ' : 'border-[#e5e7eb] dark:border-[#ffffff3d]',
+      h-30px
-      { 'bg-primary bg-opacity-10': active }
+      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>

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

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

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)"

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

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

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

src/utils/index.ts

@@ -22,6 +22,7 @@ export {
   isSet,
   isMap,
   brightenColor,
+  shallowColor,
   darkenColor,
   dynamicIconRender
 } from './common';