From 6797dbf1b0617dcca662a25cf663d93dc4ad5807 Mon Sep 17 00:00:00 2001
From: lingdu <waong2005@126.com>
Date: Sat, 25 Sep 2021 19:18:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20tab=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=9C=A8=E9=BB=91=E6=9A=97=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=B3=9B?=
 =?UTF-8?q?=E7=99=BD=E7=9A=84=E9=A2=9C=E8=89=B2=E9=97=AE=E9=A2=98=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8AchromeTab=E7=9A=84=E9=87=8D=E5=8F=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                                 |  4 ++--
 src/components/custom/ButtonTab/index.vue             |  3 ++-
 .../custom/ChromeTab/components/SvgRadiusBg.vue       | 11 ++++++-----
 src/components/custom/ChromeTab/index.vue             |  5 +++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index af5b5325..30f442c1 100644
--- a/.vscode/settings.json
+++ b/.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]": {
diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
index fe9dfcc4..ac237aa5 100644
--- a/src/components/custom/ButtonTab/index.vue
+++ b/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 }
diff --git a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
index eef21397..32501d84 100644
--- a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
+++ b/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,
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
index 97465181..2ce4414e 100644
--- a/src/components/custom/ChromeTab/index.vue
+++ b/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';