78 lines
2.8 KiB
Markdown
78 lines
2.8 KiB
Markdown
# 9.14 样式与主题定制
|
||
|
||
:::tip 概述
|
||
样式体系基于 Element Plus CSS 变量 + styles/ 全局覆盖：主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
|
||
:::
|
||
|
||
## 样式目录（src/styles/）
|
||
|
||
```text
|
||
styles/
|
||
├── index.less / index.scss 入口样式
|
||
├── variables.* SCSS/Less 变量
|
||
├── element/ Element Plus 变量覆盖
|
||
├── public/ 公共样式
|
||
└── ...
|
||
```
|
||
|
||
main.ts 引入顺序：Element Plus 样式 → 变量覆盖 → 全局样式（覆盖生效）。
|
||
|
||
## 主题定制机制
|
||
|
||
```text
|
||
Element Plus 暴露 CSS 变量（--el-color-primary 等）：
|
||
styles/ 覆盖变量根值 → 全组件生效
|
||
|
||
运行时主题切换（designSetting store）：
|
||
主题色在线更换 → 动态更新 CSS 变量 / 主题类名
|
||
暗黑模式：html 挂 dark 类 → Element Plus dark 变量集
|
||
灰度/色弱：filter 类名
|
||
```
|
||
|
||
## designSetting / projectSetting（settings/）
|
||
|
||
| 设置 | 内容 |
|
||
|------|------|
|
||
| designSetting.ts | 主题色、水印开关与文案、灰度/色弱、布局宽度等 |
|
||
| projectSetting.ts | 布局模式（侧栏/顶部）、标签页开关、面包屑、水印等 |
|
||
| componentSetting.ts | 组件默认（分页 sizes 等） |
|
||
| animateSetting.ts | 页面动画 |
|
||
|
||
在线配置经对应 store 持久化——用户偏好跨会话保留。
|
||
|
||
## 水印
|
||
|
||
```text
|
||
designSetting 开关 + 文案 → 布局层渲染水印（canvas/css）
|
||
用于截图防泄密/内部标识场景
|
||
```
|
||
|
||
## 页面样式规约
|
||
|
||
```text
|
||
1. 优先用 Element Plus 组件与 CSS 变量（勿直接写死颜色值）
|
||
2. 页面 scoped 样式（<style scoped>）；跨页公共样式进 styles/public
|
||
3. 主题相关颜色用 var(--el-color-*)（随主题切换自动适配）
|
||
4. 少用 deep 选择器覆盖（Element 升级易碎）；确需覆盖集中在 element/ 目录
|
||
5. 响应式：布局层已处理侧栏折叠；页面内部栅格用 el-row/el-col
|
||
6. lint：stylelint 检查样式规范（pnpm lint:stylelint）
|
||
```
|
||
|
||
## 定制品牌色流程
|
||
|
||
```text
|
||
1. styles/element 覆盖 --el-color-primary 及其 light-3/5/7/8/9 派生
|
||
2. 或 designSetting 默认主题色配置（运行时切换）
|
||
3. 图表（echarts）色板同步调整（dashboard 组件色值）
|
||
4. 图标/logo 替换（assets + 登录页/logo 配置）
|
||
```
|
||
|
||
## 排障
|
||
|
||
| 症状 | 原因 |
|
||
|------|------|
|
||
| 变量覆盖不生效 | 引入顺序问题（覆盖必须在 Element 样式之后） |
|
||
| 暗黑模式部分白块 | 第三方组件未适配 dark 变量；局部补 dark 样式 |
|
||
| 样式冲突错乱 | scoped 丢失；或与 Element 内部类名冲突 |
|
||
| 构建后样式差异 | less/scss 变量在构建期求值——运行时切换需 CSS 变量方案 |
|