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

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>

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