1.4 KiB
1.4 KiB
9.15 样式与主题定制
:::tip 概述 样式分三层：ElementPlus 主题变量覆盖、全局样式（styles/）、组件 scoped 样式。主题配色与布局参数经 designSetting store 运行时切换并持久化。 :::
样式目录
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。