41 lines
1.4 KiB
Markdown
41 lines
1.4 KiB
Markdown
# 9.15 样式与主题定制
|
|
|
|
:::tip 概述
|
|
样式分三层：ElementPlus 主题变量覆盖、全局样式（styles/）、组件 scoped 样式。主题配色与布局参数经 designSetting store 运行时切换并持久化。
|
|
:::
|
|
|
|
## 样式目录
|
|
|
|
```text
|
|
ui/src/styles/
|
|
├── index.scss 入口（引入各分片）
|
|
├── variables.scss SCSS 变量（间距、层级、断点）
|
|
├── element.scss ElementPlus 变量覆盖
|
|
└── transition.scss 过渡动画
|
|
```
|
|
|
|
## 主题定制方式
|
|
|
|
| 方式 | 适用 |
|
|
|---|---|
|
|
| element.scss 覆盖 CSS 变量 | 主题色、圆角、组件尺寸全局调整 |
|
|
| designSetting store | 运行时切换配色方案（用户偏好，持久化） |
|
|
| 页面 scoped 样式 | 局部调整（不污染全局） |
|
|
| variables.scss | 间距/层级等设计 token |
|
|
|
|
## 规约
|
|
|
|
- **优先变量**：颜色/间距用变量而非硬编码，换主题不改业务样式
|
|
- **不深层嵌套覆盖**：避免 `!important` 大战，改用变量或类名隔离
|
|
- **公共组件样式进组件**：不进全局 styles（防全局污染）
|
|
- **暗色模式**：经主题变量体系统一适配，不单独写一套选择器
|
|
|
|
## 与后端无关的说明
|
|
|
|
主题纯前端行为，不涉及后端接口；水印、页签等开关在 projectSetting store。
|
|
|
|
## 相关
|
|
|
|
- [9.16 布局系统](/zh/frontend/layout.html)
|
|
- [附录 H 前端组件速查](/zh/appendix/components.html)
|