agent/.opencode/skills/design/visual-standards/SKILL.md

name, description

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

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

1. 原则与理念

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

2. 主题配置 (Theme)

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

{
  "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 状态。