完善

src/App.vue

@@ -1,17 +1,70 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, computed } from 'vue'
 import { useI18nStore } from './stores/modules/i18n'
+import { useLayoutStore } from './stores/modules/layout'
 import i18n from './i18n'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import enUS from 'ant-design-vue/es/locale/en_US'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/en'
+
+// i18n store
+const i18nStore = useI18nStore()
+
+// layout store
+const layoutStore = useLayoutStore()
+
+// Ant Design Vue 语言配置
+const antLocale = computed(() => {
+	return i18nStore.currentLocale === 'zh-CN' ? zhCN : enUS
+})
+
+// 获取弹出容器
+const getPopupContainer = () => {
+	return document.body
+}
+
+// Ant Design Vue 主题配置
+const antdTheme = computed(() => {
+	return {
+		token: {
+			colorPrimary: layoutStore.themeColor,
+			borderRadius: 6,
+			fontSize: 14,
+		},
+		components: {
+			Layout: {
+				headerBg: '#fff',
+				siderBg: '#001529',
+			},
+			Menu: {
+				darkItemBg: '#001529',
+				darkItemSelectedBg: '#1890ff',
+				darkItemHoverBg: '#002140',
+			},
+		},
+	}
+})
 
 onMounted(() => {
 	// 从持久化的 store 中读取语言设置并同步到 i18n
-	const i18nStore = useI18nStore()
 	i18n.global.locale.value = i18nStore.currentLocale
+
+	// 同步 dayjs 语言
+	dayjs.locale(i18nStore.currentLocale === 'zh-CN' ? 'zh-cn' : 'en')
+
+	// 初始化主题颜色
+	if (layoutStore.themeColor) {
+		document.documentElement.style.setProperty('--primary-color', layoutStore.themeColor)
+	}
 })
 </script>
 
 <template>
-	<router-view />
+	<a-config-provider :locale="antLocale" :theme="antdTheme" :getPopupContainer="getPopupContainer">
+		<router-view />
+	</a-config-provider>
 </template>
 
 <style>

src/stores/modules/layout.js

@@ -11,6 +11,15 @@ export const useLayoutStore = defineStore(
 		// 侧边栏折叠状态
 		const sidebarCollapsed = ref(false)
 
+		// 主题颜色
+		const themeColor = ref('#1890ff')
+
+		// 显示标签栏
+		const showTags = ref(true)
+
+		// 显示面包屑
+		const showBreadcrumb = ref(true)
+
 		// 当前选中的父菜单（用于双栏布局）
 		const selectedParentMenu = ref(null)
 
@@ -55,24 +64,57 @@ export const useLayoutStore = defineStore(
 			viewTags.value = []
 		}
 
+		// 设置主题颜色
+		const setThemeColor = (color) => {
+			themeColor.value = color
+			document.documentElement.style.setProperty('--primary-color', color)
+		}
+
+		// 设置标签栏显示
+		const setShowTags = (show) => {
+			showTags.value = show
+			document.documentElement.style.setProperty('--show-tags', show ? 'block' : 'none')
+		}
+
+		// 设置面包屑显示
+		const setShowBreadcrumb = (show) => {
+			showBreadcrumb.value = show
+		}
+
+		// 重置主题设置
+		const resetTheme = () => {
+			themeColor.value = '#1890ff'
+			showTags.value = true
+			showBreadcrumb.value = true
+			document.documentElement.style.setProperty('--primary-color', '#1890ff')
+			document.documentElement.style.setProperty('--show-tags', 'block')
+		}
+
 		return {
 			layoutMode,
 			sidebarCollapsed,
 			selectedParentMenu,
 			viewTags,
+			themeColor,
+			showTags,
+			showBreadcrumb,
 			toggleSidebar,
 			setLayoutMode,
 			setSelectedParentMenu,
 			updateViewTags,
 			removeViewTags,
 			clearViewTags,
+			setThemeColor,
+			setShowTags,
+			setShowBreadcrumb,
+			resetTheme,
 		}
 	},
 	{
 		persist: {
 			key: 'layout-store',
 			storage: customStorage,
-			pick: ['layoutMode', 'sidebarCollapsed']
+			pick: ['layoutMode', 'sidebarCollapsed', 'themeColor', 'showTags', 'showBreadcrumb'],
-		}
+		},
-	}
+	},
 )