---
name: style-optimizer
version: "2.0.0"
category: frontend
description: "专门优化前端HTML/CSS/JS显示效果的技能。强制执行元粟V5设计规范，包括Design Token颜色、间距、圆角、阴影、布局铁律。当需要调整页面样式、优化UI组件、统一设计语言时使用。"
triggers:
  zh: ["优化样式", "调整样式", "美化", "优化UI", "调整显示", "改样式", "样式不对", "界面优化", "卡片样式", "图表样式", "布局优化"]
  en: ["optimize style", "fix css", "improve ui", "polish ui", "style fix", "adjust layout", "visual polish"]
compatibility: Node.js >= 14
dependencies: []
metadata:
  author: "OpesPro Team"
  created: "2026-06-24"
  updated: "2026-06-29"
  status: "stable"
---

# 前端样式优化 / Style Optimizer

## Changelog / 版本履历
| 日期 | 版本 | 变更摘要 |
|------|------|---------|
| 2026-06-29 | 2.0.0 | 集成元粟V5设计规范：强制Design Token颜色/间距/圆角/阴影、布局铁律、状态覆盖检查 |
| 2026-06-24 | 1.0.0 | 初始版本 |

## Description / 描述
专门优化前端HTML/CSS/JS显示效果的技能。强制执行元粟V5企业级设计规范，覆盖CSS样式优化、动画效果、响应式布局、组件样式统一、可视化交互等。

## Triggers / 触发词
- **中文**: 优化样式, 调整样式, 美化, 优化UI, 调整显示, 改样式, 样式不对, 界面优化
- **English**: optimize style, fix css, improve ui, polish ui

## Capabilities / 能力
- **V5 Design Token 强制执行**: 颜色/字体/间距/圆角/阴影全部来自V5规范
- CSS变量管理与设计系统建立
- 组件样式模式（折叠/明细/抽屉三模式分离）
- 响应式断点优化（XL/LG/MD/SM四档）
- 迷你卡片网格布局（auto-fit minmax自适应）
- CSS箭头图标系统（替代emoji）、竖线标题装饰
- 抽屉侧滑面板样式
- 图表交互动画（高亮/过滤/过渡）
- 面包屑样式同步
- KPI数字卡片样式系统（D-DIN字体）
- 状态标签颜色系统

---

## V5 Design Token Iron Laws / V5 设计令牌铁律 (NEW v2.0)

**每次样式优化必须遵守以下规则。违反任一条 = 未通过验收。**

### Token Enforcement / 令牌强制

| # | 规则 | 检查命令 |
|---|------|---------|
| T1 | 颜色全用 CSS 变量，禁止硬编码 `#xxx` | `grep -n '#[0-9a-fA-F]\{3,6\}'` → 只允许 `:root` 内 |
| T2 | 间距仅用 4/8/12/16/24/32/48 | `grep -nP ' (margin|padding|gap):.*\d+px'` → 仅这些值 |
| T3 | 圆角仅用 `2px`(标签/按钮) 或 `8px`(卡片/模块) | `grep 'border-radius'` 验证 |
| T4 | 阴影仅用两种 V5 阴影 | `--shadow-header` / `--shadow-modal`，无其他 box-shadow |
| T5 | 字体仅用 Source Han Sans CN + D-DIN(数字) | KPI数值需 `font-family: 'D-DIN'` |
| T6 | 字号仅用 V5 9级 | 26/24/20/18/16/14/12/10/8px |

### Layout Enforcement / 布局强制

| # | 规则 | 检查命令 |
|---|------|---------|
| L1 | 仅 Flexbox，禁止 Grid | `grep 'display:\s*grid'` → 0 |
| L2 | 单位仅 px | `grep -P '\d+(vw|vh|rem|em|%)'` → 0 |
| L3 | 禁止 calc() | `grep 'calc('` → 0 |
| L4 | Flex 容器必写全: flex + flex-row/col + justify-* + items-* | 逐个容器检查 |
| L5 | 禁止 margin 做布局，用 gap/padding | 页面容器级 margin → 0 |

### Component Enforcement / 组件强制

| # | 规则 | 详情 |
|---|------|------|
| C1 | 模块标题用竖线 `::before`，禁止图标 emoji | `width:2px; background:var(--color-brand)` |
| C2 | 标题下方无 `border-bottom` | 仅靠 `padding-bottom` 间距分隔 |
| C3 | KPI 卡片无趋势箭头/折线图/描边 | 检查 `.kpi-card` 子元素 |
| C4 | 状态标签颜色用 V5 映射 | 见下表 |
| C5 | 金额右对齐 + 千分位 | `text-align:right; .toLocaleString()` 或等效 |

### State Coverage / 状态覆盖

每页/组件必须至少包含：
- **加载态**: 骨架屏 `skeleton` 或 `loading spinner`
- **空态**: 无数据占位
- **错误态**: 错误提示
- **禁用态**: `opacity:0.5; cursor:not-allowed`
- **成功反馈**: toast(2-3秒消失)

## V5 Design Token Reference / V5 设计令牌参考

详细令牌定义见 `references/opespro-v5-design-spec.md`。

### 快速颜色映射

```css
:root {
  --color-white: #ffffff;
  --color-text-primary: #333333;
  --color-text-secondary: #646566;
  --color-text-helper: #86909c;
  --color-bg-page: #f7f8fa;
  --color-bg-selected: #f2f3f5;
  --color-bg-stripe: #f9fbfc;
  --color-bg-header: #fafbfe;
  --color-border-card: #f2f4f7;
  --color-border-divider: #e3e6ec;
  --color-overlay: rgba(0,0,0,0.5);
  --color-brand: #1d50a2;
  --color-brand-light: rgba(29,80,162,0.1);
  --color-success: #67c23a;
  --color-error: #ee0a24;
  --color-warning: #e6a23c;
  --color-blue: #397dff;        /* 流程中 */
  --color-orange: #f9822b;      /* 审批中 */
  --spacing: 4,8,12,16,24,32,48; /* 仅这7个值 */
  --radius-sm: 2px;   --radius-md: 8px;
  --shadow-header: 0px 4px 8px 0px rgba(218,218,218,0.3);
  --shadow-modal: 0px 4px 10px 0px rgba(0,0,0,0.1);
  --chart-colors: #4982ef #9887da #28b7c2 #6ccdda #f2883b #f9a654 #fac858 #eb6666 #f19aa6 #3ba272 #7bc656;
}
```

### 状态标签颜色映射

| 业务状态 | 文字色 CSS变量 | 背景色 |
|---------|---------------|--------|
| 流程中/进行中 | `--color-blue` (#397dff) | `rgba(57,125,255,0.1)` |
| 已完成/成功 | `--color-success` (#67c23a) | `rgba(103,194,58,0.1)` |
| 已终止/报错 | `--color-error` (#ee0a24) | `rgba(238,10,36,0.1)` |
| 待处理/警告 | `--color-warning` (#e6a23c) | `rgba(230,162,60,0.1)` |
| 审批中 | `--color-orange` (#f9822b) | `rgba(249,130,43,0.1)` |
| 默认/其他 | `--color-text-helper` (#86909c) | `--color-bg-selected` (#f2f3f5) |

---

## Workflow / 工作流程

1. **Read file** — 读取当前 HTML/CSS/JS 文件
2. **Identify issues** — 对照 V5 设计令牌铁律（T1-T6, L1-L5, C1-C5）逐项检查
3. **Apply CSS changes** — 使用 Edit 工具修正违规项
4. **Verify states** — 确保至少包含加载/空态/错误/禁用/成功反馈
5. **Validate** — `grep` 命令逐个验证铁律，确保无回归

## Output Format / 输出格式
- 修改文件清单（CSS/HTML/JS）
- Diff 格式变更内容
- V5 令牌合规报告（哪些规则已通过、哪些已修复）
- 响应式断点说明

## Auto-Review / 自检清单 (Updated v2.0)

| # | 检查项 | 验证命令 |
|---|--------|---------|
| 1 | 无硬编码颜色 `#xxx`（除 `:root`） | `grep -n '#[0-9a-fA-F]\{3,6\}' file.css` |
| 2 | 间距仅用 V5 7 个值 | `grep -oP '\d+px' file.css \| sort -u` |
| 3 | 无 CSS Grid | `grep 'display:\s*grid'` → 0 |
| 4 | 无 vw/vh/rem/em/% 单位 | `grep -P '\d+(vw\|vh\|rem\|em\|%)'` → 0 |
| 5 | 无 calc() | `grep 'calc('` → 0 |
| 6 | 圆角仅 2px / 8px | `grep 'border-radius'` |
| 7 | 阴影仅两种 V5 | `grep 'box-shadow'` |
| 8 | 标题用竖线::before | 逐个模块标题检查 |
| 9 | 标题下无border-bottom | `grep 'border-bottom'` 在标题容器 |
| 10 | KPI 卡片无趋势元素 | 检查 `.kpi-card` 子元素 |
| 11 | 含5种必需状态 | 加载/空态/错误/禁用/成功 |
| 12 | 移动优先响应式 | SM基础→逐级叠加 |
| 13 | CSS修改不影响JS | 功能测试 |
| 14 | `aria-label` 在图标按钮 | `grep 'aria-label'` |

## Iron Law / 核心铁律

1. **最小修改** — 只改需要的CSS行，不重写整个样式表
2. **V5 令牌优先** — 颜色/间距/圆角/阴影必须来自 V5 Design Tokens
3. **移动优先** — 响应式从 SM 基础 → 逐级叠加
4. **不破坏功能** — CSS 修改不能影响 JS 交互
5. **无硬编码值** — 所有设计值使用 CSS 变量或 V5 规定的 px 值

## References / 参考资料

| File | Contents |
|------|----------|
| `references/opespro-v5-design-spec.md` | **NEW v2.0** 元粟 V5.0 设计规范执行摘要 |
| `references/css-patterns.md` | CSS 优化模式库 |
| `references/design-system-spec.md` | 设计系统规范 |