# 元粟 V5.0 企业级设计规范 — Agent 执行摘要

> 完整规范见项目根目录 `元粟V5设计规范.md`，本文档为 Agent 页面生成用的关键规则摘要。

## 1. 强制 Design Tokens (CSS 变量)

所有颜色必须使用 CSS 变量，禁止硬编码色值：

```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-brand-medium: rgba(29,80,162,0.3);

  /* 功能色 */
  --color-success: #67c23a;
  --color-error: #ee0a24;
  --color-warning: #e6a23c;
  --color-deep-red: #c62e2e;

  /* 辅助色 */
  --color-blue: #397dff;
  --color-orange: #f9822b;
  --color-yellow: #f6ac00;
  --color-teal: #14c9c9;
  --color-red: #f56c6c;
  --color-purple: #9075f7;
  --color-green: #67c23a;
  --color-magenta: #da298b;
  --color-blue-gray: #bac4e1;

  /* 字体 */
  --font-family: 'Source Han Sans CN', 'Source Han Sans', sans-serif;
  --font-number: 'D-DIN', 'DIN', sans-serif;

  /* 字号 */
  --text-h1: 26px;
  --text-h2: 24px;
  --text-h3: 20px;
  --text-h4: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-mini: 10px;

  /* 间距 (仅用这7个值) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* 圆角 */
  --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);

  /* ECharts 色系 */
  --chart-1: #4982ef;  --chart-2: #9887da;
  --chart-3: #28b7c2;  --chart-4: #6ccdda;
  --chart-5: #f2883b;  --chart-6: #f9a654;
  --chart-7: #fac858;  --chart-8: #eb6666;
  --chart-9: #f19aa6;  --chart-10: #3ba272;
  --chart-11: #7bc656;
}
```

## 2. 布局铁律 (模式 B — HTML/CSS)

- **仅 Flexbox**，禁止 CSS Grid
- **单位仅 px**，禁止 %/vw/vh/rem/em/calc()
- **间距仅用**: 4/8/12/16/24/32/48
- **主区+次区**: 次区定宽(w-[80px]/[200px]/[240px]/[320px])，主区 flex-1
- **Flex容器必写全**: flex + flex-row/col + justify-* + items-*
- **1440 桌面稿**，内容区约 1208px
- **禁止 margin 做布局**，用 gap 和 padding

## 3. KPI 数值卡模式

```css
.kpi-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md); /* 8px */
  padding: var(--spacing-md); /* 16px */
  box-shadow: none; border: none;
  min-width: 0;
}
.kpi-card .label {
  font-size: var(--text-body-sm); /* 14px */
  color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card .value {
  font-size: 26px; font-weight: 700;
  font-family: var(--font-number);
  color: var(--color-brand);
  white-space: nowrap;
}
```

**KPI 卡片禁止**：趋势箭头、百分比涨跌、迷你折线图(sparkline)、描边(border)。

**布局**：flex-wrap:wrap，每行 6-8 个，≤8个1行、9-15个2行、≥16个3行。

## 4. 模块标题竖线装饰规范

所有卡片/模块标题前方**只用竖线**，**禁止图标**：

```css
.module-title {
  display: flex; align-items: center; gap: 8px;
  border-bottom: none; /* 禁止标题下方横线 */
}
.module-title::before {
  content: ''; display: block;
  width: 2px; height: 18px;
  border-radius: var(--radius-sm); /* 2px */
  background: var(--color-brand);
  flex-shrink: 0;
}
```

## 5. 状态标签模式

业务状态 → 对应 color token：
- 流程中/进行中 → var(--color-blue) + rgba(57,125,255,0.1)
- 已完成/成功 → var(--color-success) + rgba(103,194,58,0.1)
- 已终止/报错 → var(--color-error) + rgba(238,10,36,0.1)
- 待处理/警告 → var(--color-warning) + rgba(230,162,60,0.1)
- 审批中 → var(--color-orange) + rgba(249,130,43,0.1)

## 6. 业务数据格式

- **金额**: 千分位 `1,234,567.89`，≥1亿显示"亿"，表格内右对齐
- **日期**: `YYYY-MM-DD`，日期时间 `YYYY-MM-DD HH:mm`
- **D-DIN 字体**: KPI数值必须使用，系统无则立即通过 CDN 加载

## 7. 响应式断点

| 断点 | 宽度 | 列数 |
|------|------|------|
| mobile | 0-767px | 4列 |
| tablet | 768-1279px | 8列 |
| desktop | 1280px+ | 12列 |

## 8. 禁止事项

- ❌ 大面积渐变背景、营销式 hero、装饰插画主导
- ❌ 随机制造颜色/字号/圆角/阴影（必须用 Design Tokens）
- ❌ 卡片套卡片层级混乱
- ❌ 仅静态内容缺状态/筛选/操作/反馈
- ❌ CSS Grid（模式B）
- ❌ 标题下方有横线/描边（§5.8）
- ❌ 标题前方用图标替代竖线（§5.7）
- ❌ KPI卡片含趋势信息（§5.4）

## 9. 必须状态覆盖

每页至少：加载态(骨架屏/loading)、空态(无数据)、错误态、禁用态、成功反馈。