---
name: visual-standards
description: 中后台应用视觉规范（Ant Design Pro 标准）。涵盖主题色、布局、排版、间距系统及操作区规范。所有 UI 界面必须严格遵循。
---

# 视觉设计与交互规范 (Design System)

## 1. 原则与理念

- **Ant Design Only**: 严格遵循 Ant Design 5.0+ 默认视觉风格。
- **High Density**: 适用于信息密集型中后台场景，优先紧凑布局。
- **Consistency**: 同类操作必须使用相同的视觉表现。

## 2. 主题配置 (Theme)

全站统一采用 **Volcano (火山红)** 主题色，强调操作引导性与警示性。

```json
{
  "token": {
    "colorPrimary": "#fa541c",
    "colorInfo": "#fa541c",
    "wireframe": false
  }
}
```

## 3. 布局规范 (Layout)

### 3.1 页面容器

- 所有页面必须使用 `PageContainer` 包裹。
- **禁止双内边距**: 严禁在 `ProTable`、`ProForm` 外层再包裹 `Card`。ProComponents 自带卡片样式。
- **错误示例**: `<Card><ProTable /></Card>` ❌

### 3.2 搜索筛选区

- **< 4 个字段**: 使用 ProTable 内置 Search (LightFilter 风格)。(Label 左对齐)
- **>= 4 个字段**: 使用 `QueryFilter` 独立组件，配置 `layout="vertical"` (Label 在上)。
- **视觉风格**: Search 区域必须与 Table 区域在视觉上分离 (Separated Mode)，中间有间隔 (`marginLG`)。

### 3.3 数据表格

- **列对齐**:
  - 文本 (Text): **左对齐** (默认)。
  - 数字/金额 (Money/Number): **右对齐** (必须设置 `align: 'right'`)。
  - 操作 (Action): **右对齐** 或固定在右侧。
  - 状态 (Status): **左对齐**，必须使用 `Tag` 或 `Badge`。
- **操作栏**:
  - **通用规则**: 所有操作按钮必须带有 **Icon** 和 **边框** (type="default"/"primary"/"dashed")。**严禁**使用纯文本链接 (`<a>`)。
  - 主要操作 (Primary Action): 位于左上角/右上角，推荐 `type="primary"`。
  - 批量操作 (Batch Action): 位于左下角 (Alert 区域)。
  - 行操作 (Row Action): 必须使用 `Button` 组件，推荐 `type="text"` (无边框中性色，避免与红色 Delete 冲突)。若主题色为冷色调，可使用 `type="link"`。禁止直接使用 `<a>` 标签。

### 3.4 表单规范

- **模态框表单 (ModalForm)**:
  - 默认使用 **垂直布局** (`layout="vertical"`)，以适应移动端及长 Label。
  - 宽度建议：`width="600px"` (中型表单)，`width="400px"` (小型表单/简单修改)。
- **页面级表单 (ProForm)**:
  - 使用 `Grid` 布局。
  - 分组标题：使用 `ProCard` 或 `ProForm.Group`。

## 4. 样式系统 (Styling)

### 4.1 零 CSS 策略 (Zero CSS)

- **绝对禁止**创建 `.css`, `.less`, `.scss` 文件。
- **所有样式**必须通过 `theme.useToken()` 获取 Design Token 并在 JSX 中内联。
- **常用 Token**:
  - 间距: `token.margin`, `token.padding`
  - 颜色: `token.colorBgContainer`, `token.colorTextSecondary`
  - 边框: `token.borderRadius`

### 4.2 排版 (Typography)

- 数字必须使用**等宽字体**或千分位格式化。
- 金额必须保留 2 位小数，右对齐。
- 二级文本使用 `token.colorTextSecondary`。

## 5. 交互反馈

- **危险操作** (删除/重置): 必须使用红色 (`danger`), 且必须有二次确认 (`Popconfirm` 或 `Modal`).
- **成功/失败**: 操作后必须有 `message.success` 或 `message.error` 反馈。
- **Loading**: 所有异步操作按钮必须带有 `loading` 状态。