149 lines
5.9 KiB
Markdown
149 lines
5.9 KiB
Markdown
|
---
|
|||
|
|
name: umijs-procomponents
|
|||
|
|
description: UmiJS 4 + Ant Design 5 + ProComponents 全栈开发规范。涵盖技术栈约束、组件用法、样式系统、服务层架构、国际化和图标管理。当项目使用 UmiJS + ProComponents 技术栈时，PM 必须将本 Skill 的要点注入给所有子 Agent。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# UmiJS + ProComponents 开发规范
|
|||
|
|
|
|||
|
|
## 1. 技术栈
|
|||
|
|
|
|||
|
|
- **框架**: UmiJS 4 + React 18 + TypeScript（严格模式）
|
|||
|
|
- **UI 库**: Ant Design 5 + ProComponents（ProTable, ProForm, ProLayout 等）
|
|||
|
|
- **数据流**: `useRequest`（ahooks / Umi 内置）、Umi Models
|
|||
|
|
- **路由/权限**: Umi Max 内置插件 — `access`、`initialState`、`request`、`model`、`locale`
|
|||
|
|
|
|||
|
|
## 2. ProComponents 使用规范
|
|||
|
|
|
|||
|
|
### 2.1 组件选型原则
|
|||
|
|
|
|||
|
|
- **配置优于代码**: 始终优先使用 ProComponents 的 `request` 属性处理数据加载。
|
|||
|
|
- 利用 `valueType` 进行字段自动格式化。
|
|||
|
|
- 只有在 ProComponents 无法满足极度复杂需求时才使用原生 Antd 或手动实现。
|
|||
|
|
|
|||
|
|
### 2.2 组件映射
|
|||
|
|
|
|||
|
|
| 场景 | 组件 |
|
|||
|
|
| :-------- | :------------------------------------- |
|
|||
|
|
| 列表/表格 | `ProTable` |
|
|||
|
|
| 表单 | `ProForm` / `ModalForm` / `DrawerForm` |
|
|||
|
|
| 搜索/筛选 | `QueryFilter` / `LightFilter` |
|
|||
|
|
| 布局 | `ProLayout` / `PageContainer` |
|
|||
|
|
| 详情 | `ProDescriptions` |
|
|||
|
|
|
|||
|
|
### 2.3 ⚠️ 禁止双内边距
|
|||
|
|
|
|||
|
|
- **严禁**在 `ProTable`、`QueryFilter`、`ProForm` 外层包裹 `Card` 组件。
|
|||
|
|
- **原因**: ProComponents 自带卡片样式，额外包裹导致双内边距问题。
|
|||
|
|
- **错误示例**: `<Card><ProTable /></Card>` ❌
|
|||
|
|
- **正确示例**: `<ProTable style={{ marginBottom: token.marginLG }} />` ✅
|
|||
|
|
|
|||
|
|
## 3. 搜索区域规范（Separated Card 模式）
|
|||
|
|
|
|||
|
|
### 3.1 复杂度规则
|
|||
|
|
|
|||
|
|
- **< 4 个搜索字段**: 使用 `ProTable` 内置 `search` 属性。
|
|||
|
|
- **>= 4 个搜索字段**: 使用独立 `QueryFilter` 组件，配置 `layout="vertical"`。
|
|||
|
|
|
|||
|
|
### 3.2 视觉结构
|
|||
|
|
|
|||
|
|
- 搜索区域: 直接使用 `QueryFilter`（自带白色背景和内边距）。
|
|||
|
|
- 背景色: `QueryFilter` **必须**设置白色背景（`token.colorBgContainer`）。
|
|||
|
|
- 表格区域: 直接使用 `ProTable`（自带卡片样式）。
|
|||
|
|
- 间距: `QueryFilter` 使用 `style={{ marginBottom: token.marginLG }}`。
|
|||
|
|
- **⚠️ 避免双内边距**: 不要在 `QueryFilter` 或 `ProTable` 外层再包裹 `div` 或 `Card` 添加 padding。
|
|||
|
|
|
|||
|
|
## 4. 样式系统
|
|||
|
|
|
|||
|
|
### 4.1 零 CSS 文件
|
|||
|
|
|
|||
|
|
- **严格**使用 Ant Design Design Tokens 内联样式。
|
|||
|
|
- 使用 `const { token } = theme.useToken()` 获取 token。
|
|||
|
|
- 间距调整: 使用 `style={{ marginBottom: token.marginLG }}` 而非外层容器。
|
|||
|
|
- **禁止**导入 `.module.css` 或外部样式表。
|
|||
|
|
|
|||
|
|
### 4.2 图标
|
|||
|
|
|
|||
|
|
- **统一**使用 `@ant-design/icons`。
|
|||
|
|
- 除非明确要求或用于特定品牌标志，否则不使用外部图标库、SVG 或 emoji。
|
|||
|
|
|
|||
|
|
### 4.3 UI 框架
|
|||
|
|
|
|||
|
|
- **严格**使用原生 Ant Design ProComponents。禁止自定义 UI/UX 设计工具。
|
|||
|
|
- 表单布局: 输入标签放在输入框上方（`layout="vertical"`）。
|
|||
|
|
|
|||
|
|
## 5. 服务层架构
|
|||
|
|
|
|||
|
|
### 5.1 真实服务层
|
|||
|
|
|
|||
|
|
- 所有页面逻辑必须调用 `src/services/`。禁止在 JSX 中内联 mock 数据或逻辑。
|
|||
|
|
- **强制使用 useRequest**: 所有数据交互（包括查询、提交、删除）**必须**通过 `useRequest` hook 发起。
|
|||
|
|
- **禁止直接 request**: 严禁在组件内直接手动调用 `request` 方法（除非在极特殊的底层封装中）。`useRequest` 提供了标准化的 loading、error 和 data 状态管理，手动 `request` 会导致状态管理不一致。
|
|||
|
|
|
|||
|
|
### 5.2 统一 Mocking
|
|||
|
|
|
|||
|
|
- 使用 UmiJS `mock/` 目录存放所有 mock 数据。禁止在组件中硬编码对象。
|
|||
|
|
|
|||
|
|
### 5.3 类型定义
|
|||
|
|
|
|||
|
|
- TypeScript 接口统一在 `data.d.ts` 中定义。
|
|||
|
|
|
|||
|
|
### 5.4 菜单配置
|
|||
|
|
|
|||
|
|
- 菜单图标必须在 `src/app.ts` 中配置渲染逻辑（确保图标显示为图形而非文本）。
|
|||
|
|
- 菜单文案必须配置在 `src/locales/` 中，Key 以 `menu.` 开头（如 `menu.system.user`）。
|
|||
|
|
|
|||
|
|
## 6. 国际化 (i18n)
|
|||
|
|
|
|||
|
|
### 6.1 强制规则
|
|||
|
|
|
|||
|
|
- 所有面向用户的字符串**必须**使用 `intl.formatMessage` 或 `<FormattedMessage>`。
|
|||
|
|
- **每个** `formatMessage` 或 `FormattedMessage` 调用**必须**包含 `defaultMessage` 作为后备。
|
|||
|
|
- 示例: `intl.formatMessage({ id: 'key', defaultMessage: '默认文案' })`
|
|||
|
|
- 在 `src/locales/` 中维护翻译。
|
|||
|
|
|
|||
|
|
### 6.2 双语同步
|
|||
|
|
|
|||
|
|
- **必须**同时在 `src/locales/zh-CN.ts` 和 `en-US.ts` 中定义所有使用的 Key。
|
|||
|
|
- **严禁**仅添加中文而忽略英文，或仅添加英文而忽略中文。
|
|||
|
|
|
|||
|
|
### 6.3 QA 验证
|
|||
|
|
|
|||
|
|
- 测试时必须在两种语言环境下验证页面显示。
|
|||
|
|
- 浏览器控制台不得出现 `[React Intl] Missing message` 警告。
|
|||
|
|
|
|||
|
|
## 7. Figma 图标导出规范
|
|||
|
|
|
|||
|
|
当 Figma 设计稿中包含图标元素时：
|
|||
|
|
|
|||
|
|
### 7.1 优先级原则
|
|||
|
|
|
|||
|
|
1. **优先匹配 Ant Design Icons**: 检查设计稿中的图标是否可用 `@ant-design/icons` 替代。如果视觉上高度一致，**必须使用 Ant Design 图标**。
|
|||
|
|
2. **自定义图标导出**: 仅当 Ant Design Icons 中**没有匹配或视觉差异明显**时，才从 Figma 导出。
|
|||
|
|
|
|||
|
|
### 7.2 导出流程
|
|||
|
|
|
|||
|
|
1. 使用 Figma MCP 获取图标设计详情。
|
|||
|
|
2. 导出为 **SVG 格式**，保存到 `src/assets/icons/`。
|
|||
|
|
3. 文件命名: `icon-{功能名称}.svg`（全小写，中划线分隔）。
|
|||
|
|
4. 封装为 React 组件存放 `src/components/Icons/`。
|
|||
|
|
5. 在 `src/components/Icons/index.ts` 中统一导出。
|
|||
|
|
|
|||
|
|
### 7.3 目录结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── assets/icons/
|
|||
|
|
│ ├── icon-custom-chart.svg
|
|||
|
|
│ └── icon-data-flow.svg
|
|||
|
|
└── components/Icons/
|
|||
|
|
├── index.ts
|
|||
|
|
├── CustomChartIcon.tsx
|
|||
|
|
└── DataFlowIcon.tsx
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 8. Ant Design 5 兼容性
|
|||
|
|
|
|||
|
|
- 使用 `open` 而非 `visible`。
|
|||
|
|
- 使用 `onOpenChange` 而非 `onVisibleChange`。
|
|||
|
|
- 对 Ant Design 5 更新极为警惕，避免使用废弃 API。
|