1. 本项目如何实现主题颜色的切换？主题切换的基本原理是什么？
答案：
本项目在 web-admin/src/store/modules/theme.ts 管理主题状态，在 web-admin/src/styles/theme.css 和 index.scss 中定义了不同主题的样式变量。主题切换组件（可新建如 ThemeSwitcher.vue）通过修改全局 CSS 变量（如 :root { --primary-color: #xxx; }）或切换 className 实现主题切换。切换时，组件调用 Vuex 的 setTheme 方法，动态切换主题色，所有依赖主题变量的组件会自动响应变化。
2. 主题切换组件如何保证全局生效？如何与 Vuex 状态管理结合？
答案：
主题切换组件通过 Vuex 管理主题状态（如 theme.ts 的 state.theme），切换时分发 action 更新主题。全局样式通过 CSS 变量或根节点 className 绑定 Vuex 的主题状态。这样，任意页面或组件切换主题时，所有依赖主题的样式都会同步更新，实现全局生效。在本项目中，store/modules/theme.ts 就是主题状态的集中管理点。
3. 主题切换时如何实现平滑过渡和用户体验优化？本项目如何处理？
答案：
为提升用户体验，主题切换时可加上 CSS 过渡动画（如 transition: background-color 0.3s），避免突兀的色彩跳变。本项目可在 theme.css 或 index.scss 中为相关样式添加过渡属性。切换主题时，颜色渐变平滑，提升视觉体验。此外，可在切换按钮上加 loading 或动画反馈，增强交互感。
4. 如何实现主题的持久化？本项目如何让用户刷新后仍保留上次选择的主题？
答案：
主题持久化通常通过 localStorage 存储用户选择的主题。切换主题时，将主题名写入 localStorage，应用初始化时从 localStorage 读取并设置主题。在本项目中，可以在 theme.ts 的 setTheme action 里同步更新 localStorage，并在应用启动（如 main.ts）时读取并应用上次的主题设置，保证刷新后主题不丢失。
5. 如果要支持多套主题（如暗黑/浅色/自定义色），本项目如何扩展和维护主题系统？
答案：
本项目主题系统基于 CSS 变量和 Vuex 状态，扩展多套主题只需在 theme.css 中定义多组变量（如 .dark-theme { ... }、.light-theme { ... }），并在 Vuex 里增加主题类型和切换逻辑。主题切换组件可提供多选项，支持自定义色时可让用户选择主色并动态修改 CSS 变量。这样，主题系统易于扩展和维护，适应不同用户需求。
