fix(projects): 修复vertical sider自适应主题

src/components/custom/ButtonTab/index.vue

@@ -20,7 +20,7 @@
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-10px">
-      <icon-close :is-primary="active || isHover" :primary-color="primaryColor" @click="handleClose" />
+      <icon-close :is-primary="isActive || isHover" :primary-color="primaryColor" @click="handleClose" />
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ import { IconClose } from '@/components';
 import { shallowColor } from '@/utils';
 
 const props = defineProps({
-  active: {
+  isActive: {
     type: Boolean,
     default: false
   },
@@ -43,6 +43,10 @@ const props = defineProps({
   closable: {
     type: Boolean,
     default: true
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
   }
 });
 const emit = defineEmits(['close']);
@@ -56,11 +60,12 @@ function handleClose(e: MouseEvent) {
 
 const buttonStyle = computed(() => {
   const style: { [key: string]: string } = {};
-  if (props.active || isHover.value) {
+  if (props.isActive || isHover.value) {
     style.color = props.primaryColor;
     style.borderColor = shallowColor(props.primaryColor, 0.3);
-    if (props.active) {
-      style.backgroundColor = shallowColor(props.primaryColor, 0.1);
+    if (props.isActive) {
+      const alpha = props.darkMode ? 0.15 : 0.1;
+      style.backgroundColor = shallowColor(props.primaryColor, alpha);
     }
   }
   return style;

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

@@ -11,11 +11,16 @@
         <rect width="100%" height="100%" x="0"></rect>
       </clipPath>
     </defs>
-    <!-- 修改为50%防止重叠颜色不一致 -->
+    <svg width="50%" height="100%">
+      <use xlink:href="#geometry-left" width="214" height="36" :fill="foregorund"></use>
+    </svg>
     <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="50%" height="100%" x="-100%" y="0">
+        <use xlink:href="#geometry-right" width="214" height="36" :fill="foregorund"></use>
+      </svg>
       <svg width="50%" height="100%" x="-100%" y="0">
         <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
       </svg>
@@ -25,6 +30,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { shallowColor } from '@/utils';
 
 /** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
 type FillColor = [string, string];
@@ -38,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
+  },
   darkMode: {
     type: Boolean,
     default: false
@@ -45,9 +55,9 @@ const props = defineProps({
 });
 
 const defaultColor: FillColor = ['#fff', '#18181c'];
-const activeColor: FillColor = ['#eef6ff', '#1e3044'];
 const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
 
+const foregorund = computed(() => defaultColor[Number(props.darkMode)]);
 const fill = computed(() => {
   const index = Number(props.darkMode);
   let color = defaultColor[index];
@@ -55,7 +65,8 @@ const fill = computed(() => {
     color = hoverColor[index];
   }
   if (props.isActive) {
-    color = activeColor[index];
+    const alpha = props.darkMode ? 0.15 : 0.1;
+    color = shallowColor(props.primaryColor, alpha);
   }
   return color;
 });

src/components/custom/ChromeTab/index.vue

@@ -6,7 +6,13 @@
     @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" :dark-mode="darkMode" />
+      <svg-radius-bg
+        class="w-full h-full"
+        :is-active="isActive"
+        :is-hover="isHover"
+        :dark-mode="darkMode"
+        :primary-color="primaryColor"
+      />
     </div>
     <span class="relative z-2">
       <slot></slot>