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

.vscode/settings.json

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

package.json

@@ -18,12 +18,12 @@
     "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
   },
   "dependencies": {
-    "@vueuse/core": "^6.4.1",
+    "@vueuse/core": "^6.5.3",
     "axios": "^0.21.4",
     "chroma-js": "^2.1.2",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
-    "naive-ui": "^2.19.1",
+    "naive-ui": "^2.19.2",
     "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
     "vue": "^3.2.10",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.405",
+    "@iconify/json": "^1.1.406",
     "@iconify/vue": "^3.0.0",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
@@ -46,8 +46,8 @@
     "@vicons/ionicons5": "^0.11.0",
     "@vicons/material": "^0.11.0",
     "@vicons/tabler": "^0.11.0",
-    "@vitejs/plugin-vue": "^1.9.0",
-    "@vue/compiler-sfc": "^3.2.14",
+    "@vitejs/plugin-vue": "^1.9.2",
+    "@vue/compiler-sfc": "^3.2.19",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "commitizen": "^4.2.4",
@@ -67,13 +67,13 @@
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
     "typescript": "^4.4.3",
-    "unplugin-icons": "^0.11.1",
-    "unplugin-vue-components": "^0.15.2",
+    "unplugin-icons": "^0.11.4",
+    "unplugin-vue-components": "^0.15.4",
     "vite": "^2.5.10",
     "vite-plugin-html": "^2.1.0",
-    "vite-plugin-windicss": "^1.4.4",
+    "vite-plugin-windicss": "^1.4.7",
     "vue-tsc": "^0.3.0",
-    "vueuc": "^0.4.10",
+    "vueuc": "^0.4.12",
     "windicss": "^3.1.7"
   },
   "config": {

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