1. 架构概述
本文档从架构设计的角度阐述项目的主题切换方案，主要关注系统各层级间的关系、数据流转以及扩展性设计，而非具体实现细节。
架构图
+-------------------------------------------+
| 用户界面层 |
| +--------------+ +---------------+ |
| | 主题切换组件 | | 用户偏好设置 | |
| +--------------+ +---------------+ |
+-------------------↑-----------------------+
|
| 触发事件/状态更新
|
+-------------------↓-----------------------+
| 状态管理层 |
| +----------------------------------+ |
| | Pinia Theme Store | |
| | +------------+ +-------------+ | |
| | | 主题状态定义 | | 主题切换行为 | | |
| | +------------+ +-------------+ | |
| +----------------------------------+ |
+-------------------↑-----------------------+
|
| 触发样式应用
|
+-------------------↓-----------------------+
| 主题适配层 |
| +----------+ +-------+ +----------+ |
| | Element+ | | AntD | | Tailwind | |
| | 适配器 | | 适配器 | | 适配器 | |
| +----------+ +-------+ +----------+ |
| +-------------+ |
| | 自定义样式适配 | |
| +-------------+ |
+-------------------↑-----------------------+
|
| 应用CSS变量
|
+-------------------↓-----------------------+
| 样式定义层 |
| +---------------+ +----------------+ |
| | 浅色主题变量定义 | | 深色主题变量定义 | |
| +---------------+ +----------------+ |
| +-------------------+ |
| | CSS变量统一管理 | |
| +-------------------+ |
+-------------------------------------------+
2. 架构分层
主题切换系统采用多层架构设计，确保关注点分离和高内聚低耦合：
2.1 存储层（Store Layer）
负责主题状态的管理和持久化，是整个架构的基础：
- 状态管理：使用 Pinia 进行集中式状态管理
- 持久化机制：通过 localStorage 实现主题设置的持久化
- 系统适配：提供与操作系统主题偏好同步的能力
// 存储层核心架构示例
const themeStore = {
// 状态定义
state: {
themeMode, currentTheme },
// 行为定义
actions: {
initTheme, setThemeMode, applySystemTheme },
// 派生状态
getters: {
isDarkMode },
};
2.2 样式定义层（Style Definition Layer）
负责定义各主题下的视觉变量和样式规则：
- 主题变量定义：统一定义主题相关的 CSS 变量
- 作用域隔离：通过选择器和属性隔离不同主题的样式
- 兼容性设计：确保样式在不同技术栈间的一致性
/* 样式定义层核心架构示例 */
:root {
/* 基础变量定义 - 适用于默认主题 */
--theme-variables: values;
}
[data-theme="dark"] {
/* 主题特定变量重写 */
--theme-variables: different-values;
}
2.3 主题适配层（Theme Adaptation Layer）
负责将主题变量应用到不同技术栈和组件库：
- 组件库适配：适配 Element Plus 和 Ant Design Vue 等组件库
- Tailwind 适配：与 Tailwind 的暗黑模式机制集成
- 自定义样式适配：提供统一的自定义样式适配策略
// 适配层架构示例
const adaptationLayer = {
// 不同技术栈的适配器
adapters: {
elementPlus: {
/* Element Plus 适配逻辑 */
},
antDesign: {
/* Ant Design 适配逻辑 */
},
tailwind: {
/* Tailwind 适配逻辑 */
},
},
// 统一应用适配
applyTheme(theme) {
Object.values(this.adapters).forEach((adapter) => adapter.apply(theme));
},
};
2.4 视图层（View Layer）
负责提供用户交互界面和呈现主题效果：
- 主题切换组件：提供用户友好的主题选择界面
- 主题状态响应：响应主题变化并更新视图呈现
- 用户偏好设置：集成到用户设置界面
3. 跨层通信机制
3.1 状态变更流程
主题状态变更遵循单向数据流原则：
- 用户交互 → 触发 View Layer 中的事件
- 事件处理 → 调用 Store Layer 的 action
- 状态更新 → Store 更新内部状态并触发 DOM 更新
- 样式应用 → 通过 CSS 变量和选择器应用新主题样式
3.2 系统事件响应
系统级事件（如操作系统主题变更）的响应流程：