@qilitt-mickey/vue3-temp-skill 1.0.8

package/references/layout-theme.md

@@ -0,0 +1,540 @@
+---
+skill: layout-theme
+description: 规范设计系统（CSS 变量体系、主题色、暗黑模式、侧边栏配色、Design Tokens）、布局系统、UnoCSS 桥接、响应式适配和 PC/移动端双端 UI 适配方案。在修改布局、主题、颜色、暗黑模式、样式或使用 ui-ux-pro-max 设计输出时调用。
+scope: project
+tags: [vue3, layout, theme, dark-mode, css-variables, design-tokens, element-plus, vant, dual-ui, unocss, chroma-js, ui-ux-pro-max]
+---
+
+# 设计系统、布局与主题适配
+
+## 一、CSS 变量体系
+
+### 命名规范
+
+项目使用三层 CSS 变量体系，命名前缀 `--vts-*`（Vue3 Template Standard）：
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  第一层：全局基础变量（:root）                              │
+│  --vts-transition-duration  动画时长                      │
+│  --vts-border-color         通用边框色                     │
+│  --vts-switch-off-color     Switch 关闭态颜色              │
+│  --vts-bar-height           导航条高度                     │
+│  --vts-margin               内容区边距                     │
+│  --vts-dialog-bg            弹窗背景（支持渐变）             │
+├─────────────────────────────────────────────────────────┤
+│  第二层：侧边栏主题变量（html[data-theme]）                  │
+│  --vts-theme-menu-bg               菜单背景色              │
+│  --vts-theme-menu-text             菜单文字色              │
+│  --vts-theme-menu-hover            菜单悬停背景             │
+│  --vts-theme-sub-menu-bg           子菜单背景色             │
+│  --vts-theme-sub-menu-active-text  子菜单激活文字色         │
+│  --vts-theme-sidebar-logo          Logo 区域背景           │
+│  --vts-theme-menu-title-hover      菜单标题悬停色           │
+│  --vts-theme-menu-active-before    激活指示条颜色           │
+├─────────────────────────────────────────────────────────┤
+│  第三层：Element Plus 变量（由 JS 动态设置）                  │
+│  --el-color-primary              主题主色                   │
+│  --el-color-primary-light-1~9    主色亮色梯度（brighten）     │
+│  --el-color-primary-dark-1~2     主色暗色梯度（darken）       │
+│  --el-bg-color                   全局背景色                  │
+│  --el-text-color-primary         主文字色                   │
+│  --el-fill-color-light           填充色（表头等）             │
+│  --el-text-color-placeholder     占位文字色                  │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 变量使用规则
+
+1. **业务组件中禁止硬编码颜色值**。所有颜色必须引用 CSS 变量。
+2. `--vts-*` 变量用于全局布局相关样式，`--el-*` 变量用于 Element Plus 组件相关样式。
+3. 新增全局变量必须遵循 `--vts-` 前缀，按语义命名（如 `--vts-card-bg`、`--vts-shadow-base`）。
+4. 侧边栏相关变量必须通过 `html[data-theme='xxx']` 选择器设置，不要直接写在 `:root`。
+
+---
+
+## 二、主题色系统
+
+### 2.1 侧边栏 8 套配色预设
+
+通过 `html[data-theme='<name>']` 切换，定义在 `src/styles/theme.scss`：
+
+| 主题名 | 中文名 | 菜单背景 | 激活指示色 | 对应主色 |
+|--------|--------|---------|-----------|---------|
+| `light` | 亮白色 | `#fff` | `#4091f7` | 默认蓝 |
+| `default` | 道奇蓝 | `#001529` | `#4091f7` | `#1b2a47` |
+| `saucePurple` | 深紫罗兰 | `#130824` | `#693ac9` | `#722ed1` |
+| `pink` | 深粉色 | `#28081a` | `#d84493` | `#eb2f96` |
+| `dusk` | 猩红色 | `#2a0608` | `#e13c39` | `#f5222d` |
+| `volcano` | 橙红色 | `#2b0e05` | `#e85f33` | `#fa541c` |
+| `mingQing` | 绿宝石 | `#032121` | `#59bfc1` | `#13c2c2` |
+| `auroraGreen` | 酸橙绿 | `#0b1e15` | `#60ac80` | `#52c41a` |
+
+### 2.2 Element Plus 主色动态生成（chroma-js）
+
+`useTheme.ts` 中的 `setEpThemeColor(color)` 使用 `chroma-js` 自动生成色阶：
+
+```typescript
+// 亮色模式：brighten 变亮
+--el-color-primary-light-{1~9} = chroma(color).brighten(i * 0.32).hex()
+
+// 暗黑模式：darken 变暗
+--el-color-primary-dark-{1~2} = chroma(color).darken(i * 0.2).hex()
+```
+
+**关键逻辑**：
+- 主色通过 `document.documentElement.style.setProperty('--el-color-primary', color)` 直接设置。
+- `light` 和 `default` 主题使用配置文件中的 `EpThemeColor`，其他主题使用预设色卡中的颜色。
+- 切换暗黑模式时，如果当前主题是 `light`，会自动切到 `default`（因为亮白色在暗黑下不协调）。
+
+### 2.3 自定义主题色配置
+
+如果需要新增主题色，需要同时修改以下文件：
+
+1. `src/styles/theme.scss` — 添加 `html[data-theme='newTheme']` 的 8 个 `--vts-theme-*` 变量
+2. `src/hooks/useTheme.ts` — 在 `themeColors` 数组中添加 `{ color, themeColor, tip }` 条目
+3. 如果新主题色需要特殊的 EP 主色，还需在 `setLayoutThemeColor()` 中处理分支
+
+---
+
+## 三、暗黑模式
+
+### 3.1 切换机制
+
+- 通过 `html.dark` 类名控制，由 `useTheme.ts` 的 `dataThemeChange()` 管理。
+- 使用 **View Transitions API** 实现圆形扩散动画（不支持的浏览器降级为无动画切换）。
+- 动画以主题切换按钮为中心，计算到最远角点的距离作为 `clipPath` 半径。
+
+```typescript
+// 核心动画逻辑（只在不支持 View Transitions 的浏览器中跳过）
+const transition = document.startViewTransition(() => {
+  document.documentElement.classList.add('dark')  // 或 remove
+})
+transition.ready.then(() => {
+  // 从按钮位置向外扩散的 clipPath 动画
+  document.documentElement.animate({ clipPath }, { duration: 400, easing: 'ease-in' })
+})
+```
+
+### 3.2 暗黑模式变量覆盖
+
+定义在 `src/styles/dark.scss` 的 `html.dark {}` 块内：
+
+```scss
+html.dark {
+  // === 必须覆盖的全局变量 ===
+  --vts-border-color: rgb(253 253 253 / 12%);    // 亮色: rgb(5 5 5 / 6%)
+  --vts-switch-off-color: #ffffff3f;              // 亮色: #a6a6a6
+  --vts-dialog-bg: rgb(36 37 37);                 // 亮色: linear-gradient(...)
+
+  // === 布局区域背景 ===
+  .navbar, .tags-view, .sidebar-container,
+  .horizontal-header, ... {
+    background-color: var(--el-bg-color) !important;
+  }
+  .app-main, .app-main-nofixed-header {
+    background: #020409 !important;
+  }
+
+  // === 组件暗色适配 ===
+  // TagsView 标签页、关闭图标、弹窗关闭按钮
+  // ReSegmented 分段控制器
+  // .vts-message 自定义消息（暗色背景 + 白色文字）
+}
+```
+
+### 3.3 暗黑模式编写规则
+
+1. **新增全局样式时，必须同步在 `dark.scss` 中添加暗色覆盖**。
+2. 暗色背景优先使用 `var(--el-bg-color)` 或 `var(--el-bg-color-overlay)`，不要硬编码。
+3. 暗色文字使用 `rgb(255 255 255 / 85%)`（主文字）、`rgb(255 255 255 / 65%)`（次文字）。
+4. 暗色边框使用 `rgb(253 253 253 / 12%)` 或 `#303030`。
+5. 暗色 hover 背景使用 `rgb(255 255 255 / 12%)`。
+6. **SCSS 局部变量**（如 `dark.scss` 中的 `$border-style`、`$color-white`）只在该文件内使用，不要与 CSS 自定义属性混淆。
+
+### 3.4 已知硬编码颜色（需暗色适配）
+
+以下 `element-plus.scss` 中的硬编码颜色在暗黑模式下未做适配，新增相关样式时需要注意：
+
+| 位置 | 硬编码值 | 用途 | 建议 |
+|------|---------|------|------|
+| `.el-table__header th` | `#f2f9fc` | 表头背景 | 应使用 `var(--el-fill-color-light)` |
+| `.el-table__header th` | `#8c8f90` | 表头文字 | 应使用 `var(--el-text-color-secondary)` |
+| `.row-added` | `#e6f4ff` | 新增行背景 | 需添加暗黑覆盖 |
+| `.row-modified` | `#fff7e6` | 修改行背景 | 需添加暗黑覆盖 |
+| `.row-deleted` | `#f5f5f5` | 删除行背景 | 需添加暗黑覆盖 |
+| `.el-collapse-item__header` | `#34394d` | 折叠面板文字 | 应使用 `var(--el-text-color-primary)` |
+| `.vxe-header--row` | `#f2f9fc` / `#8c8f90` | VXE 表头 | 同上 |
+| 滚动条 | `#f9fafb` / `#e5e5e5` | 滚动条样式 | 需添加暗黑覆盖 |
+| autofill | `white` / `#333` | 输入框自动填充 | 需添加暗黑覆盖 |
+
+**规则**：新增涉及颜色的全局样式时，优先使用 CSS 变量。如果必须硬编码，必须同步在 `dark.scss` 中添加暗色覆盖。
+
+---
+
+## 四、Design Tokens（设计令牌）
+
+### 4.1 间距
+
+项目使用 `--vts-margin: 8px` 作为基础间距单元。UnoCSS 配置了 `presetRemToPx({ baseFontSize: 4 })`，因此 UnoCSS 中的间距类直接对应像素值：
+
+| UnoCSS 类 | 实际值 | 用途 |
+|-----------|--------|------|
+| `p-1` / `m-1` | 1px | 微调 |
+| `p-2` / `m-2` | 2px | 紧凑间距 |
+| `p-4` / `m-4` | 4px | 小间距 |
+| `p-8` / `m-8` | 8px | 基础间距（= --vts-margin） |
+| `p-12` / `m-12` | 12px | 中等间距 |
+| `p-16` / `m-16` | 16px | 大间距 |
+| `p-20` / `m-20` | 20px | 区块间距 |
+
+### 4.2 字号
+
+UnoCSS `theme.fontSize` 已显式定义为 px 值（避免被 `presetRemToPx` 转换）：
+
+| Token | 大小 | 行高 | 用途 |
+|-------|------|------|------|
+| `text-xs` | 12px | 16px | 辅助文字、标签 |
+| `text-sm` | 14px | 20px | 次要文字、表格 |
+| `text-base` | 16px | 24px | 正文默认 |
+| `text-lg` | 18px | 28px | 小标题 |
+| `text-xl` | 20px | 28px | 标题 |
+| `text-2xl` | 24px | 32px | 页面标题 |
+| `text-3xl` | 30px | 36px | 大标题 |
+
+### 4.3 字体
+
+全局字体在 `index.scss` 中定义：
+
+```css
+font-family: 'Alibaba PuHuiTi 3.0', 'Microsoft YaHei', Arial, sans-serif;
+```
+
+### 4.4 动画时长
+
+- 全局过渡时长：`--vts-transition-duration: 0.3s`
+- 侧边栏展开/收起动画使用此变量
+- 暗黑模式切换动画固定 400ms
+- 弹窗动画：打开 0.3s、关闭 0.2s（自定义 cubic-bezier）
+
+### 4.5 层级（z-index）
+
+| 层级 | 值 | 用途 |
+|------|-----|------|
+| 基础内容 | auto | 页面正常内容 |
+| 固定头部/侧边栏 | 999~1000 | layout 组件 |
+| 图片预览 | 110000 | `.el-image-viewer__wrapper`（覆盖富文本） |
+
+### 4.6 边框圆角
+
+项目未定义全局圆角 token，遵循 Element Plus 默认值：
+- 按钮/输入框：`4px`
+- 卡片：`8px`（`rounded-lg`）
+- 弹窗：`8px`
+
+---
+
+## 五、布局系统
+
+### 布局模式
+
+项目支持三种布局模式，通过布局配置切换：
+
+1. **垂直布局（Vertical）** — 侧边栏 210px + 顶部导航，后台管理默认布局。
+2. **水平布局（Horizontal）** — 顶部导航栏，侧边栏宽度为 0。
+3. **混合布局（Mix）** — 侧边栏 210px（一级菜单）+ 顶部导航（二级菜单）。
+
+### 布局文件结构
+
+```
+src/layout/
+├── index.vue              # 布局入口
+├── components/
+│   ├── sidebar/           # 侧边栏
+│   ├── navbar/            # 顶部导航
+│   ├── tagsview/          # 标签页
+│   └── settings/          # 设置面板
+└── hooks/
+    └── useLayout.ts       # 布局状态管理
+```
+
+### 侧边栏样式架构
+
+`src/styles/sidebar.scss` 使用 SCSS mixin `merge-style($sideBarWidth)` 定义侧边栏样式，通过传入不同宽度被调用 3 次（对应 3 种布局）：
+
+```scss
+// sidebar.scss 核心结构
+@mixin merge-style($sideBarWidth) {
+  // 侧边栏容器、菜单项、子菜单、Logo 等样式
+  // $sideBarWidth 控制展开宽度
+}
+
+// 垂直布局
+.layout-vertical .sidebar-container { @include merge-style(210px); }
+// 水平布局
+.layout-horizontal .horizontal-header { @include merge-style(0); }
+// 混合布局
+.layout-mix .sidebar-container { @include merge-style(210px); }
+```
+
+**修改侧边栏样式时**，必须检查 3 种布局模式下是否都需要调整。
+
+### 布局约定
+
+1. 页面组件通过 `<router-view>` 嵌套在布局内渲染。
+2. 布局切换通过 store 中的 `layout` 字段控制。
+3. 侧边栏菜单数据来源于路由配置中的 `meta` 信息。
+4. 标签页（TagsView）支持关闭、刷新、关闭其他等操作。
+
+---
+
+## 六、UnoCSS 桥接配置
+
+### 预设
+
+```typescript
+// uno.config.ts
+presetRemToPx({ baseFontSize: 4 })  // 所有 rem 值 × 4 = px（mt-1 → 1px）
+presetWind3()                        // Tailwind Wind 兼容
+presetAttributify()                  // 属性化模式
+presetIcons({ scale: 1.2 })         // 图标自动引入
+```
+
+### 主题色桥接
+
+UnoCSS `theme.colors` 将工具类名映射到 Element Plus CSS 变量：
+
+```typescript
+theme: {
+  colors: {
+    bg_color: 'var(--el-bg-color)',          // bg-bg_color → background: var(--el-bg-color)
+    primary: 'var(--el-color-primary)',      // text-primary → color: var(--el-color-primary)
+    text_color_primary: 'var(--el-text-color-primary)',
+  }
+}
+```
+
+### 快捷方式
+
+```typescript
+shortcuts: {
+  "flex-center": "flex items-center justify-center",
+  "flex-end": "flex items-center justify-end",
+  "flex-middle": "flex items-center",
+  "flex-between": "flex items-center justify-between",
+  "flex-col-center": "flex flex-col justify-center",
+  "break-word": "break-words break-all",
+  "ellipsis": "!whitespace-nowrap !overflow-hidden text-ellipsis",
+}
+```
+
+### UnoCSS 使用约定
+
+1. 模板中优先使用 UnoCSS 原子类，复杂样式写在 `<style scoped>` 中。
+2. 由于 `presetRemToPx` 的存在，`mt-4` = 4px（不是 1rem），注意数值换算。
+3. 字号使用 `text-sm`（14px）、`text-base`（16px）等，已被显式定义为 px。
+4. 自定义快捷方式定义在 `uno.config.ts` 的 `shortcuts` 中，命名必须语义化。
+5. `safelist` 中的类名确保不会被 PurgeCSS 清除，动态类名需要添加到 safelist。
+
+---
+
+## 七、样式文件架构
+
+### 全局样式入口
+
+```
+src/styles/
+├── index.scss          # 入口：@use 引入所有子模块 + :root 全局变量 + 通用样式
+├── theme.scss          # 8 套侧边栏配色（html[data-theme]）
+├── dark.scss           # 暗黑模式覆盖（html.dark）
+├── sidebar.scss        # 侧边栏样式（mixin × 3 布局）
+├── element-plus.scss   # Element Plus 组件全局覆盖
+├── transition.scss     # 过渡动画
+├── button.scss         # 按钮样式
+└── vant.scss           # Vant 移动端覆盖
+```
+
+### 样式编写约定
+
+1. **组件样式必须使用 `<style scoped lang="scss">`**。
+2. 需要覆盖子组件/第三方组件样式时使用 `:deep()`，不超过 3 层嵌套。
+3. 全局样式覆盖放在 `src/styles/` 对应文件中，不要在组件内写全局样式。
+4. `!important` 仅允许在覆盖第三方组件样式时使用，必须添加注释说明原因。
+5. 新增全局 SCSS 变量（如颜色常量）必须使用 `$vts-` 前缀，与 Element Plus 的 `$--` 前缀区分。
+
+---
+
+## 八、ui-ux-pro-max 设计输出衔接
+
+### 背景
+
+ui-ux-pro-max 是一个设计系统 Skill，通过 CSV 驱动的风格匹配引擎生成 UI 风格方案。生成的输出通常包含颜色方案、字体搭配、间距规则、组件样式建议等。
+
+### 衔接规则
+
+当用户使用 ui-ux-pro-max 生成设计方案后，需要将设计输出映射到本项目的代码体系中：
+
+**1. 颜色映射**
+
+ui-ux-pro-max 输出的颜色方案需要映射到项目的 CSS 变量体系：
+
+```
+设计输出中的主色 → --el-color-primary（由 chroma-js 自动生成色阶）
+设计输出中的背景色 → --el-bg-color 或 --vts-dialog-bg
+设计输出中的边框色 → --vts-border-color
+设计输出中的文字色 → --el-text-color-primary / --el-text-color-regular
+```
+
+**禁止**直接将设计稿的硬编码颜色写入组件样式，必须转换为对应的 CSS 变量。
+
+**2. 暗黑模式适配**
+
+ui-ux-pro-max 生成的风格如果是"亮色模式专用"，必须同步考虑暗黑模式下的表现：
+- 检查每个硬编码颜色是否在 `dark.scss` 中有对应覆盖
+- 背景色不能直接使用白色/浅色硬编码，必须使用 CSS 变量
+- 图表配色需要在 ECharts 的 `setOption` 中根据 `dataTheme` 值切换配色方案
+
+**3. 间距与字号**
+
+ui-ux-pro-max 输出的间距/字号建议需要适配项目的 token 体系：
+- 间距使用 UnoCSS 的 `p-*` / `m-*` 类（baseFontSize: 4，所以 p-4 = 4px）
+- 字号使用 `text-xs`~`text-9xl`（已定义为 px 值）
+- 不要引入设计稿中的 rem/em 值，统一使用 px 或 UnoCSS 类
+
+**4. 组件样式**
+
+ui-ux-pro-max 建议的组件样式（如卡片阴影、按钮圆角等）需要通过以下方式实现：
+- 优先使用 UnoCSS 原子类（`shadow-sm`、`rounded-lg` 等）
+- 复杂样式写在 `<style scoped>` 中，使用 CSS 变量引用主题色
+- 需要覆盖 Element Plus 组件样式的，放在 `src/styles/element-plus.scss` 中
+
+**5. 风格一致性检查**
+
+设计方案应用到代码后，必须检查：
+- [ ] 所有颜色是否通过 CSS 变量引用？
+- [ ] 暗黑模式下是否显示正常？（切换 `html.dark` 验证）
+- [ ] 侧边栏 8 套配色下是否协调？（至少检查 `light` 和 `default`）
+- [ ] 字号是否使用了项目定义的 token？
+- [ ] 间距是否遵循 4px 基数？
+
+---
+
+## 九、PC 端与移动端双端适配
+
+### 组件映射关系
+
+项目同时集成 Element Plus（PC）和 Vant（移动端），同一业务逻辑使用不同 UI 组件：
+
+| 功能 | PC 端 (Element Plus) | 移动端 (Vant) |
+|------|---------------------|---------------|
+| 弹窗 | `el-dialog` | `van-popup` + `van-dialog` |
+| 表格 | `ReGrid` / `el-table` | `van-list` + 卡片布局 |
+| 表单 | `el-form` | `van-form` + `van-field` |
+| 下拉选择 | `el-select` | `van-picker` + `van-popup` |
+| 级联选择 | `el-cascader` | `van-cascader` |
+| 日期选择 | `el-date-picker` | `van-date-picker` + `van-popup` |
+| 上传 | `el-upload` | `van-uploader` |
+| 分页 | `RePagination` | `van-pagination` 或触底加载 |
+| 搜索 | `el-input` + 搜索按钮 | `van-search` |
+| 消息提示 | `ElMessage` / `ElMessageBox` | `van-toast` / `van-dialog` |
+| 导航 | 侧边栏菜单 | 底部 TabBar |
+| 下拉刷新 | 无 | `van-pull-refresh` |
+
+### 双端适配策略
+
+```vue
+<!-- PC 端表格 -->
+<template v-if="!isMobile">
+  <ReGrid :data="list" :pagination="pagination">
+    <el-table-column prop="name" label="名称" />
+  </ReGrid>
+</template>
+
+<!-- 移动端卡片列表 -->
+<template v-else>
+  <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
+    <div v-for="item in list" :key="item.id" class="card-base mb-3">
+      <!-- 卡片内容 -->
+    </div>
+  </van-list>
+</template>
+```
+
+### 响应式判断
+
+```typescript
+import { useApp } from "@/hooks/useApp";
+const { isMobile } = useApp();
+// isMobile 基于断点判断：< 768px 为移动端
+```
+
+### 双端适配约定
+
+1. 新页面必须同时考虑 PC 和移动端展示，使用 `isMobile` 条件渲染。
+2. 移动端表格数据改用卡片列表 + 触底加载，不要直接复用 PC 端表格。
+3. 移动端弹窗使用 `van-popup` 包裹选择器组件。
+4. 移动端导航使用底部 TabBar，不使用侧边栏。
+5. 搜索框在移动端使用 `van-search`，支持展开/收起。
+
+---
+
+## 十、数据大屏布局
+
+### 标准尺寸
+
+数据大屏基于 1920x1080 设计稿，使用 `scale` 方案适配不同分辨率：
+
+```vue
+<script setup lang="ts">
+const scaleRef = ref({ x: 1, y: 1 });
+const screenRef = ref<HTMLDivElement>();
+
+function updateScale() {
+  const width = window.innerWidth / 1920;
+  const height = window.innerHeight / 1080;
+  scaleRef.value = { x: width, y: height };
+}
+
+onMounted(() => {
+  updateScale();
+  window.addEventListener("resize", updateScale);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", updateScale);
+});
+</script>
+
+<template>
+  <div ref="screenRef" :style="{
+    transform: `scale(${scaleRef.x}, ${scaleRef.y})`,
+    transformOrigin: 'left top',
+    width: '1920px', height: '1080px',
+  }">
+    <!-- 大屏内容 -->
+  </div>
+</template>
+```
+
+### 大屏约定
+
+1. 设计稿固定 1920x1080，使用 `scale` 等比缩放。
+2. 图表使用 ECharts，配合 `ReFlicker` 实现数据闪烁效果。
+3. 布局使用绝对定位 + 百分比，不使用 flex/grid 流式布局。
+4. 字体使用 `rem` 或 `vw/vh` 单位，确保缩放后比例正确。
+5. 大屏使用独立布局，不显示菜单/页头。
+
+---
+
+## 十一、常见反例
+
+- 硬编码颜色值而不使用 CSS 变量（暗色模式不生效）。
+- 只写了亮色样式，没有在 `dark.scss` 中添加暗色覆盖。
+- 在 `element-plus.scss` 中新增硬编码颜色但不做暗黑适配。
+- 移动端直接复用 PC 端表格（体验差、性能差）。
+- 大屏使用 `vw/vh` 百分比布局而不是 `scale` 方案。
+- 不通过 `isMobile` 判断而使用 CSS `@media` 做逻辑分支。
+- UnoCSS 快捷方式命名不语义化（如 `f-c` 而非 `flex-center`）。
+- 使用 `chroma-js` 以外的库处理颜色（如 `color`、`polished`）。
+- 直接修改 `--el-color-primary` 而不通过 `setEpThemeColor()`（导致色阶不更新）。
+- 在组件 scoped 样式中写 `:root` 或 `html.dark` 选择器（无效）。
+- 新增侧边栏样式不检查 3 种布局模式的兼容性。