feat: 增加设置主题色功能

src/layouts/components/SideMenu.vue

@@ -66,7 +66,7 @@ function handleMenuSelect(key, item) {
       right: 8px;
     }
     &.n-menu-item-content--selected::before {
-      border-left: 4px solid var(--primary-color);
+      border-left: 4px solid rgb(var(--primary-color));
     }
   }
 }

src/layouts/components/tab/index.vue

@@ -11,7 +11,6 @@
     <n-tabs
       :value="tabStore.activeTab"
       :closable="tabStore.tabs.length > 1"
-      :style="`--selected-bg: ${appStore.isDark ? '#1b2429' : '#eaf0f1'}`"
       type="card"
       @close="(path) => tabStore.removeTab(path)"
     >
@@ -38,10 +37,9 @@
 
 <script setup>
 import ContextMenu from './ContextMenu.vue'
-import { useTabStore, useAppStore } from '@/store'
+import { useTabStore } from '@/store'
 
 const router = useRouter()
-const appStore = useAppStore()
 const tabStore = useTabStore()
 
 const contextMenuOption = reactive({
@@ -85,12 +83,12 @@ async function handleContextMenu(e, tagItem) {
     border-radius: 4px !important;
     margin-right: 4px;
     &:hover {
-      border: 1px solid var(--primary-color) !important;
+      border: 1px solid rgb(var(--primary-color)) !important;
     }
   }
   .n-tabs-tab--active {
-    border: 1px solid var(--primary-color) !important;
-    background-color: var(--selected-bg) !important;
+    border: 1px solid rgb(var(--primary-color)) !important;
+    background-color: rgba(var(--primary-color), 0.1) !important;
   }
   .n-tabs-pad,
   .n-tabs-tab-pad,

src/layouts/full/header/index.vue

@@ -32,6 +32,9 @@
         class="i-me:gitee mr-16 cursor-pointer"
         @click="handleLinkClick('https://gitee.com/isme-admin/vue-naive-admin/tree/2.x')"
       />
+
+      <ThemeSetting class="mr-16" />
+
       <UserAvatar />
     </div>
   </AppCard>

src/layouts/normal/header/index.vue

@@ -34,6 +34,9 @@
         class="i-me:gitee mr-16 cursor-pointer"
         @click="handleLinkClick('https://gitee.com/isme-admin/vue-naive-admin/tree/2.x')"
       />
+
+      <ThemeSetting class="mr-16" />
+
       <UserAvatar />
     </div>
   </AppCard>
@@ -56,4 +59,8 @@ const { isFullscreen, toggle } = useFullscreen()
 function handleLinkClick(link) {
   window.open(link)
 }
+
+watchEffect(() => {
+  appStore.setThemeColor(appStore.primaryColor, appStore.isDark)
+})
 </script>