fix(components): 修复tab组件适应暗黑主题模式

src/components/custom/ButtonTab/index.vue

@@ -1,10 +1,14 @@
 <template>
-  <!--删除 bg-white 黑暗模式正常-->
   <div
-    class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
+    class="relative flex-center h-30px pl-14px border-1px rounded-2px cursor-pointer"
     :class="[
       closable ? 'pr-6px' : 'pr-14px',
-      { 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }
+      active || isHover
+        ? 'text-primary border-primary border-opacity-30'
+        : darkMode
+        ? 'border-[#ffffff3d]'
+        : 'border-[#e5e7eb]',
+      { 'bg-primary bg-opacity-10': active }
     ]"
     @mouseenter="setTrue"
     @mouseleave="setFalse"
@@ -30,6 +34,10 @@ defineProps({
   closable: {
     type: Boolean,
     default: true
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
   }
 });
 const emit = defineEmits(['close']);

src/components/custom/ChromeTab/components/SvgRadiusBg.vue

@@ -26,19 +26,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+/** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
+type FillColor = [string, string];
+
 const props = defineProps({
-  activeColor: {
-    type: String,
-    default: 'rgba(14,118,226,0.45)' // 修改原色 黑暗模式和亮色模式均可用
-  },
-  hoverColor: {
-    type: String,
-    default: 'rgba(51,99,152,0.17)'
-  },
-  defaultColor: {
-    type: String,
-    default: 'rgba(14,118,226,0.13)'
-  },
   isActive: {
     type: Boolean,
     default: false
@@ -46,15 +37,25 @@ const props = defineProps({
   isHover: {
     type: Boolean,
     default: false
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
   }
 });
 
+const defaultColor: FillColor = ['#fff', '#18181c'];
+const activeColor: FillColor = ['#eef6ff', '#1e3044'];
+const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
+
 const fill = computed(() => {
-  let color = props.defaultColor;
+  const index = Number(props.darkMode);
+  let color = defaultColor[index];
   if (props.isActive) {
-    color = props.activeColor;
-  } else if (props.isHover) {
-    color = props.hoverColor;
+    color = activeColor[index];
+  }
+  if (props.isHover) {
+    color = hoverColor[index];
   }
   return color;
 });

src/components/custom/ChromeTab/index.vue

@@ -6,7 +6,7 @@
     @mouseleave="setFalse"
   >
     <div class="absolute-lb w-full h-full overflow-hidden">
-      <svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" />
+      <svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" :dark-mode="darkMode" />
     </div>
     <span class="relative z-2">
       <slot></slot>
@@ -14,13 +14,12 @@
     <div v-if="closable" class="pl-18px">
       <icon-close :is-primary="isActive" @click="handleClose" />
     </div>
-    <!-- 删除divder防止不和谐 -->
-    <!-- <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" /> -->
+    <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
   </div>
 </template>
 
 <script setup lang="ts">
-// import { NDivider } from 'naive-ui';
+import { NDivider } from 'naive-ui';
 import { useBoolean } from '@/hooks';
 import IconClose from '../IconClose/index.vue';
 import { SvgRadiusBg } from './components';
@@ -33,6 +32,10 @@ defineProps({
   closable: {
     type: Boolean,
     default: true
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
   }
 });