86 lines
3.4 KiB
Markdown
86 lines
3.4 KiB
Markdown
|
---
|
|||
|
|
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` 状态。
|