响应式状态与国际化插件应协同实现秒级换肤+多语言切换：统一用 ref 管理 theme/locale/brandColor 配置，通过 CSS 变量、data-attribute 和 i18n 动态消息联动，并在 SSR/首屏前持久化配置防闪屏。
响应式状态与国际化插件本身职责不同——前者管“怎么显示”，后者管“显示什么内容”。但二者可以协同发力，实现真正意义上的“秒级换肤+多语言切换”：核心在于把主题状态（如暗色/亮色、品牌色）和语言状态（如zh-CN/en-US）都纳入统一的响应式数据流，并通过 CSS 变量 + 动态 class + 插件 API 实现零延迟联动。
用 ref 统一管理主题与语言状态
避免分散维护 themeMode 和 locale 两个独立 ref。建议合并为一个响应式配置对象，便于 watchEffect 批量追踪：
- const appConfig = ref({ theme: 'dark', locale: 'zh-CN', brandColor: '#42b883' })
- 所有 UI 组件通过 provide/inject 或 pinia 共享该配置，确保状态唯一可信源
- 切换语言时，不只是更新 i18n.locale，也同步触发主题变量重写（例如某些语言需强制启用高对比度模式）
CSS 变量 + data-attribute 双轨驱动样式
仅靠 Vue I18n 翻译文本远远不够；视觉层必须同步响应。推荐组合策略：
- 在 :root 中定义基础变量：--text-primary: var(--text-primary-zh, #333);，为不同语言预设 fallback 值
- 用 watchEffect 监听 appConfig，动态写入变量：document.documentElement.style.setProperty('--brand-color', config.brandColor)
- 同时设置 data-locale 和 data-theme 属性：document.documentElement.setAttribute('data-locale', config.locale)，供 CSS 选择器精准作用
- 示例 CSS：[data-locale="zh-CN"][data-theme="dark"] .header { color: #e0e0e0; }
国际化插件主动适配主题逻辑
Vue I18n 支持 localeMessage 的函数式加载，可在此注入主题感知能力：
- 定义消息包时支持动态字段："button": "{theme === 'dark' ? '深色模式' : '浅色模式'}"
- 或使用 $t 的 option 参数传入上下文：$t('welcome', { theme: appConfig.value.theme })
- 在 setup 中监听 locale 变化，自动触发主题刷新逻辑（例如日语环境默认启用紧凑字体间距）
持久化与首次渲染不闪屏
用户偏好需在 SSR 或首屏渲染前就位，否则会出现“白屏→亮色→暗色”跳变：
- 服务端：读取请求头 Accept-Language + Cookie 中的 theme/locale，预注入初始配置
- 客户端：在 main.ts 中立即从 localStorage 读取并 set appConfig，再挂载应用
- 关键技巧：给 html 标签加 class="loading"，CSS 中隐藏 body 直到配置 ready，避免样式错乱
