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

src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue

@@ -5,6 +5,7 @@
       :key="item.path"
       :is-active="app.multiTab.activeRoute === item.fullPath"
       :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
       @click="handleClickTab(item.fullPath)"
       @close="removeMultiTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath)"
@@ -19,6 +20,7 @@
       class="mr-10px"
       :active="app.multiTab.activeRoute === item.fullPath"
       :closable="item.name !== ROUTE_HOME.name"
+      :dark-mode="theme.darkMode"
       @click="handleClickTab(item.fullPath)"
       @close="removeMultiTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath)"

src/views/dashboard/workbench/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div>
     <n-spin class="flex-y-center flex-col" :show="loading">
       <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
       <n-space>
@@ -10,13 +10,17 @@
         <n-button type="warning">Warning</n-button>
         <n-button type="error">Error</n-button>
       </n-space>
+      <n-space>
+        <n-tag>Tag</n-tag>
+        <n-tag type="primary">Primary Tag</n-tag>
+      </n-space>
     </n-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { NGradientText, NSpace, NButton, NSpin } from 'naive-ui';
+import { NGradientText, NSpace, NButton, NSpin, NTag } from 'naive-ui';
 
 const loading = ref(true);