签入版本

2026-10-20 21:53:26 +08:00
parent 5cc3da657c
commit b33799aa63
427 changed files with 32547 additions and 1 deletions
@@ -0,0 +1,77 @@
+# 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 变量方案 |