更新

src/App.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, watch, nextTick } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useI18nStore } from './stores/modules/i18n'
 import { useLayoutStore } from './stores/modules/layout'
+import { theme } from 'ant-design-vue'
 import i18n from './i18n'
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import enUS from 'ant-design-vue/es/locale/en_US'
@@ -9,12 +11,20 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/en'
 
+// 定义组件名称
+defineOptions({
+	name: 'App'
+})
+
 // i18n store
 const i18nStore = useI18nStore()
 
 // layout store
 const layoutStore = useLayoutStore()
 
+// 解构 themeColor 以确保响应式
+const { themeColor } = storeToRefs(layoutStore)
+
 // Ant Design Vue 语言配置
 const antLocale = computed(() => {
 	return i18nStore.currentLocale === 'zh-CN' ? zhCN : enUS
@@ -28,8 +38,9 @@ const getPopupContainer = () => {
 // Ant Design Vue 主题配置
 const antdTheme = computed(() => {
 	return {
+		algorithm: theme.defaultAlgorithm,
 		token: {
-			colorPrimary: layoutStore.themeColor,
+			colorPrimary: themeColor.value || '#1890ff',
 			borderRadius: 6,
 			fontSize: 14,
 		},
@@ -40,21 +51,34 @@ const antdTheme = computed(() => {
 			},
 			Menu: {
 				darkItemBg: '#001529',
-				darkItemSelectedBg: '#1890ff',
+				darkItemSelectedBg: themeColor.value || '#1890ff',
 				darkItemHoverBg: '#002140',
 			},
 		},
 	}
 })
 
-onMounted(() => {
+// 监听主题颜色变化，更新 CSS 变量
+watch(
+	themeColor,
+	(newColor) => {
+		if (newColor) {
+			document.documentElement.style.setProperty('--primary-color', newColor)
+		}
+	},
+	{ immediate: true }
+)
+
+onMounted(async () => {
+	await nextTick()
+
 	// 从持久化的 store 中读取语言设置并同步到 i18n
 	i18n.global.locale.value = i18nStore.currentLocale
 
 	// 同步 dayjs 语言
 	dayjs.locale(i18nStore.currentLocale === 'zh-CN' ? 'zh-cn' : 'en')
 
-	// 初始化主题颜色
+	// 初始化主题颜色到 CSS 变量
 	if (layoutStore.themeColor) {
 		document.documentElement.style.setProperty('--primary-color', layoutStore.themeColor)
 	}