pinia actions 通过封装异步主题切换逻辑，实现主题配置获取、css 变量注入与持久化保存的一体化流程，并配合 loading/error 状态、class 强制重绘及错误降级策略确保样式稳定生效。
Pinia Actions 实现主题包样式的异步切换加载，核心在于把“获取主题配置”“应用 CSS 变量”“持久化保存”三个环节封装进一个 async action，并配合 loading/error 状态反馈，避免样式闪烁或状态不一致。
主题配置需提前定义在 Store 中
主题包（如 light/dark/custom）应作为静态配置写在 state 或 getters 里，不依赖接口拉取。例如：
- light、dark 是预设主题对象，含 CSS 自定义属性映射（
--bg-color、--primary-color等） - custom 主题可支持运行时动态生成，但基础结构仍需预先声明
- 当前激活的主题名（如
theme: 'dark'）是响应式字段，供 action 修改
异步 action 负责加载与应用主题
当主题需从远程 API 加载（比如用户自定义主题托管在后端），用 async action 封装请求逻辑：
- action 命名为
loadThemeByName或fetchAndApplyTheme - 先设
this.loading = true，组件可据此显示过渡态（如淡出旧主题） - 调用封装好的 API 函数（如
api.getThemeConfig(name)），而非直接写fetch - 成功后遍历返回的变量对象，用
document.documentElement.style.setProperty()批量注入 - 最后调用本地持久化方法（如
setStorage('theme', name)）保存选择
确保样式生效时机可控
CSS 变量注入后不会自动触发重绘，需注意两点：
- 在设置完所有变量后，主动触发一次 class 切换（如给
添加theme-applied类），强制浏览器重新计算样式 - 若主题包含外部 CSS 文件（如 dark.css），应在 action 中动态创建
<link rel="stylesheet">并监听onload，再执行变量注入 - 避免在 action 中直接操作 DOM 样式，全部通过 CSS 自定义属性 + class 控制，保持可维护性
错误处理与降级策略
网络请求失败时不能让界面停留在空白或错乱状态：
- 捕获异常后，回退到上一个有效主题（如缓存的
lastValidTheme字段） - 设置
this.error = '主题加载失败，请检查网络'，供 UI 展示 toast 提示 - 必要时提供“重试按钮”，绑定同一个 action，实现幂等切换
