Merge pull request #1 from lingdu1234/main

fix(components): tab组件在黑暗模式下泛白的颜色问题以及chromeTab的重叠问题

.vscode/settings.json

@@ -4,7 +4,7 @@
 	},
 	"workbench.iconTheme": "material-icon-theme",
 	"workbench.colorTheme": "One Dark Pro",
-	"editor.fontSize": 15,
+	"editor.fontSize": 22,
 	"editor.tabSize": 2,
 	"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
 	"editor.fontLigatures": true,
@@ -38,7 +38,7 @@
 			"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"terminal.integrated.fontSize": 14,
-	"terminal.integrated.fontFamily": "Fira Code",
+	"terminal.integrated.fontFamily": "monospace",
 	"terminal.integrated.fontWeight": 500,
 	"i18n-ally.displayLanguage": "zh",
 	"[html]": {

src/components/custom/ButtonTab/index.vue

@@ -1,6 +1,7 @@
 <template>
+  <!--删除 bg-white 黑暗模式正常-->
   <div
-    class="relative flex-center h-30px pl-14px bg-white border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
+    class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] 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 }

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

@@ -11,11 +11,12 @@
         <rect width="100%" height="100%" x="0"></rect>
       </clipPath>
     </defs>
-    <svg width="52%" height="100%">
+    <!-- 修改为50%防止重叠颜色不一致 -->
+    <svg width="50%" height="100%">
       <use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
     </svg>
     <g transform="scale(-1, 1)">
-      <svg width="52%" height="100%" x="-100%" y="0">
+      <svg width="50%" height="100%" x="-100%" y="0">
         <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
       </svg>
     </g>
@@ -28,15 +29,15 @@ import { computed } from 'vue';
 const props = defineProps({
   activeColor: {
     type: String,
-    default: '#eef6ff'
+    default: 'rgba(14,118,226,0.45)' // 修改原色 黑暗模式和亮色模式均可用
   },
   hoverColor: {
     type: String,
-    default: '#dee1e6'
+    default: 'rgba(51,99,152,0.17)'
   },
   defaultColor: {
     type: String,
-    default: '#fff'
+    default: 'rgba(14,118,226,0.13)'
   },
   isActive: {
     type: Boolean,

src/components/custom/ChromeTab/index.vue

@@ -14,12 +14,13 @@
     <div v-if="closable" class="pl-18px">
       <icon-close :is-primary="isActive" @click="handleClose" />
     </div>
-    <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
+    <!-- 删除divder防止不和谐 -->
+    <!-- <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';