签入版本

This commit is contained in:
小蚂蚁云
2026-10-25 17:24:27 +08:00
parent 48911cc08f
commit fdbeae092a
1010 changed files with 30682 additions and 95274 deletions
@@ -1,7 +1,7 @@
# 9.14 样式与主题定制
:::tip 概述
样式体系基于 Element Plus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
样式体系基于 ElementPlus CSS 变量 + styles/ 全局覆盖:主题色、暗黑模式、水印、动画等经 designSetting/projectSetting 在线配置。定制优先走变量覆盖而非逐组件覆盖。
:::
## 样式目录(src/styles/)
@@ -10,22 +10,22 @@
styles/
├── index.less / index.scss 入口样式
├── variables.* SCSS/Less 变量
├── element/ Element Plus 变量覆盖
├── element/ ElementPlus 变量覆盖
├── public/ 公共样式
└── ...
```
main.ts 引入顺序:Element Plus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
main.ts 引入顺序:ElementPlus 样式 → 变量覆盖 → 全局样式(覆盖生效)。
## 主题定制机制
```text
Element Plus 暴露 CSS 变量(--el-color-primary 等):
ElementPlus 暴露 CSS 变量(--el-color-primary 等):
styles/ 覆盖变量根值 → 全组件生效
运行时主题切换(designSetting store):
主题色在线更换 → 动态更新 CSS 变量 / 主题类名
暗黑模式:html 挂 dark 类 → Element Plus dark 变量集
暗黑模式:html 挂 dark 类 → ElementPlus dark 变量集
灰度/色弱:filter 类名
```
@@ -50,7 +50,7 @@ designSetting 开关 + 文案 → 布局层渲染水印(canvas/css)
## 页面样式规约
```text
1. 优先用 Element Plus 组件与 CSS 变量(勿直接写死颜色值)
1. 优先用 ElementPlus 组件与 CSS 变量(勿直接写死颜色值)
2. 页面 scoped 样式(<style scoped>);跨页公共样式进 styles/public
3. 主题相关颜色用 var(--el-color-*)(随主题切换自动适配)
4. 少用 deep 选择器覆盖(Element 升级易碎);确需覆盖集中在 element/ 目录