perf: 全局样式调整

src/components/AppProvider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme-overrides="useTheme.naiveThemeOverrides">
+  <n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
     <n-loading-bar-provider>
       <LoadingBar />
       <n-dialog-provider>
@@ -17,11 +17,22 @@
 </template>
 
 <script setup>
+import { watch } from 'vue'
+import { useCssVar } from '@vueuse/core'
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
 import NotificationContent from './NotificationContent.vue'
 import { useThemeStore } from '@/store/modules/theme'
 
-const useTheme = useThemeStore()
+const themStore = useThemeStore()
+watch(
+  () => themStore.naiveThemeOverrides.common,
+  (vars) => {
+    for (const key in vars) {
+      useCssVar(`--${key}`, document.documentElement).value = vars[key]
+    }
+  },
+  { immediate: true }
+)
 </script>