。。

src/components/layout/src/components/TopTabs.vue

@@ -26,12 +26,10 @@
 
 <script setup lang="ts">
   import IcBaselineKeyboardArrowDown from "@/components/icon/src/icons/IcBaselineKeyboardArrowDown.vue";
-
   import CarbonSubtractAlt from "@/components/icon/src/icons/CarbonSubtractAlt.vue";
   import CodiconCloseAll from "@/components/icon/src/icons/CodiconCloseAll.vue";
   import IconamoonSynchronize from "@/components/icon/src/icons/IconamoonSynchronize.vue";
   import MaterialSymbolsCancelOutline from "@/components/icon/src/icons/MaterialSymbolsCancelOutline.vue";
-
   import { INDEX_ROUTER } from "@/config/constant";
   import { type TabsMenuProps, useTabsStore } from "@/stores/tabsStore";
   import { message } from "@/utils";
@@ -39,12 +37,10 @@
   import { computed, inject, watch } from "vue";
   import { useRoute, useRouter } from "vue-router";
   import { TabsPro } from "@/components";
-
   const route = useRoute();
   const router = useRouter();
   const tabStore = useTabsStore();
   const { tabList } = storeToRefs(useTabsStore());
-
   const ts = computed(() =>
     tabList.value.map((e) => ({
       value: e.path,
@@ -53,9 +49,7 @@
       closable: e.closable,
     }))
   );
-
   const refreshCurrentPage = inject<Function>("refreshCurrentPage");
-
   //监听路由的变化防止浏览器后退/前进不变化
   watch(
     () => route.fullPath,

src/stores/settings.ts

@@ -1,4 +1,4 @@
-import { darkTheme, type GlobalTheme } from "naive-ui";
+import { darkTheme, lightTheme, type GlobalTheme } from "naive-ui";
 import { defineStore } from "pinia";
 
 export const useSettingsStore = defineStore(
@@ -6,19 +6,23 @@ export const useSettingsStore = defineStore(
   () => {
     const isDark = ref(false);
 
-    watch(isDark, (newVal) => {
+    watch(
-      // 控制根元素 class
+      isDark,
-      if (newVal) {
+      (newVal) => {
-        document.documentElement.classList.add('dark');
+        // 控制根元素 class
-        document.documentElement.setAttribute('data-theme', 'dark');
+        if (newVal) {
-      } else {
+          document.documentElement.classList.add("dark");
-        document.documentElement.classList.remove('dark');
+          document.documentElement.setAttribute("data-theme", "dark");
-        document.documentElement.setAttribute('data-theme', 'light');
+        } else {
-      }
+          document.documentElement.classList.remove("dark");
-    }, { immediate: true }); // 立即执行一次初始化
+          document.documentElement.setAttribute("data-theme", "light");
+        }
+      },
+      { immediate: true }
+    ); // 立即执行一次初始化
 
     const theme = computed<GlobalTheme | null>(() =>
-      isDark.value ? darkTheme : null
+      isDark.value ? darkTheme : lightTheme
     );
 
     function toggleTheme() {