282 lines
6.3 KiB
Markdown
282 lines
6.3 KiB
Markdown
# ProComponents 双内边距规范更新总结
|
||
|
||
## 📋 更新概览
|
||
|
||
已成功为所有 Agent 配置文件添加 **ProComponents 优先使用规范**，明确禁止在 ProComponents 外层包裹 Card 组件以避免双内边距问题。
|
||
|
||
**更新时间**: 2026-02-14
|
||
**影响范围**: 所有 Agent 配置文件（OpenCode 和 Antigravity）
|
||
|
||
---
|
||
|
||
## ✅ 更新的配置文件
|
||
|
||
### OpenCode Agent 配置（`.opencode/agents/`）
|
||
|
||
| Agent 文件 | 状态 | 更新内容 |
|
||
| -------------- | --------- | ----------------------------------------- |
|
||
| `team.md` | ✅ 已更新 | 添加 ProComponents 优先原则和双内边距警告 |
|
||
| `planning.md` | ✅ 已更新 | 更新搜索区域优化规则 |
|
||
| `frontend.md` | ✅ 已更新 | 添加避免双内边距的视觉标准 |
|
||
| `umi-pro.md` | ✅ 已更新 | 更新搜索区域优化规范 |
|
||
| `code-spec.md` | ✅ 已更新 | 添加双内边距检查项到审计清单 |
|
||
| `qa-tester.md` | ✅ 已更新 | 添加双内边距问题检查到测试清单 |
|
||
|
||
### Antigravity Agent 配置（`.agent/`）
|
||
|
||
| Agent 文件 | 状态 | 更新内容 |
|
||
| ---------------------------------- | --------- | --------------------------- |
|
||
| `agent_team_coordinator_prompt.md` | ✅ 已更新 | 添加 ProComponents 优先原则 |
|
||
| `frontend_expert_agent_prompt.md` | ✅ 已更新 | 更新视觉标准规范 |
|
||
| `umi_pro_agent_prompt.md` | ✅ 已更新 | 更新搜索区域优化 |
|
||
| `code_spec_expert_prompt.md` | ✅ 已更新 | 添加双内边距检查到审计清单 |
|
||
| `qa_tester_agent_prompt.md` | ✅ 已更新 | 添加双内边距问题检查 |
|
||
|
||
**总计**: 11 个配置文件全部更新 ✅
|
||
|
||
---
|
||
|
||
## 🎯 核心规范内容
|
||
|
||
### 问题描述
|
||
|
||
使用 ProTable、QueryFilter、ProForm 等 ProComponents 时，如果在外层包裹 Card 组件，会导致**双重内边距**问题，因为 ProComponents 自带卡片样式和内边距。
|
||
|
||
### 错误模式 ❌
|
||
|
||
```tsx
|
||
// 错误：外层包裹 Card
|
||
<Card>
|
||
<ProTable />
|
||
</Card>
|
||
|
||
<Card>
|
||
<QueryFilter />
|
||
</Card>
|
||
|
||
<Card>
|
||
<ProForm />
|
||
</Card>
|
||
```
|
||
|
||
### 正确模式 ✅
|
||
|
||
```tsx
|
||
// 正确：直接使用 ProComponents，通过 style 调整间距
|
||
<ProTable
|
||
style={{ marginBottom: token.marginLG }}
|
||
/>
|
||
|
||
<QueryFilter
|
||
style={{ marginBottom: token.marginLG }}
|
||
/>
|
||
|
||
<ProForm
|
||
style={{ marginBottom: token.marginLG }}
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 各 Agent 具体更新
|
||
|
||
### 1. Team Coordinator（主 Agent）
|
||
|
||
**位置**: UI/UX Standards
|
||
**新增**:
|
||
|
||
- ProComponents 优先原则（标记为 **CRITICAL**）
|
||
- 明确禁止外层包裹 Card
|
||
- 提供错误和正确示例
|
||
- 解释双内边距问题原因
|
||
|
||
### 2. Planning Agent
|
||
|
||
**位置**: 搜索区域优化
|
||
**更新**:
|
||
|
||
- 明确要求直接使用 QueryFilter 和 ProTable
|
||
- 添加避免双内边距的说明
|
||
- 更新间距调整方式
|
||
|
||
### 3. Frontend Expert
|
||
|
||
**位置**: 视觉标准 - 搜索表格
|
||
**新增**:
|
||
|
||
- ⚠️ 避免双内边距专项说明
|
||
- 详细的错误和正确对比示例
|
||
|
||
### 4. Umi Pro Agent
|
||
|
||
**位置**: 搜索区域优化
|
||
**新增**:
|
||
|
||
- ⚠️ 避免双内边距规范
|
||
- ProComponents 使用最佳实践
|
||
|
||
### 5. Code Spec Expert
|
||
|
||
**位置**:
|
||
|
||
1. 搜索区域规范
|
||
2. 代码审计清单
|
||
|
||
**新增**:
|
||
|
||
- 双内边距检查项（标记为重要检查项）
|
||
- 错误模式识别
|
||
- 修复建议
|
||
- 审计清单中添加专项检查
|
||
|
||
### 6. QA Tester
|
||
|
||
**位置**: "Separated Card" 模式合规性
|
||
**新增**:
|
||
|
||
- 双内边距问题检查（标记为高优先级）
|
||
- 检查方法和错误模式
|
||
- 视觉后果说明
|
||
- 修复建议
|
||
|
||
---
|
||
|
||
## 🔍 检查点对比
|
||
|
||
### 更新前
|
||
|
||
- ✅ 检查 ProComponents 使用
|
||
- ✅ 检查样式 Token
|
||
- ❌ **未检查**双内边距问题
|
||
|
||
### 更新后
|
||
|
||
- ✅ 检查 ProComponents 使用
|
||
- ✅ 检查样式 Token
|
||
- ✅ **新增**双内边距问题检查
|
||
- ✅ **新增**Card 包裹检测
|
||
- ✅ **新增**修复建议
|
||
|
||
---
|
||
|
||
## 📊 影响范围统计
|
||
|
||
### 受影响的组件
|
||
|
||
- `ProTable` - 表格组件
|
||
- `QueryFilter` - 搜索过滤器
|
||
- `LightFilter` - 轻量过滤器
|
||
- `ProForm` - 表单组件
|
||
- `ModalForm` - 模态表单
|
||
|
||
### 受影响的场景
|
||
|
||
1. **列表页面**: 搜索 + 表格组合
|
||
2. **数据管理**: 过滤器 + 数据展示
|
||
3. **表单页面**: 各类表单场景
|
||
|
||
---
|
||
|
||
## ⚠️ 重要性级别
|
||
|
||
### Code Spec Expert
|
||
|
||
- 列为**关键检查项**
|
||
- 必须在代码审查时检查
|
||
- 发现问题需提供修复建议
|
||
|
||
### QA Tester
|
||
|
||
- 列为**高优先级检查**
|
||
- 视觉测试时必须验证
|
||
- 影响用户体验评分
|
||
|
||
### Team Coordinator
|
||
|
||
- 标记为 **CRITICAL**
|
||
- 属于架构级别规范
|
||
- 影响整体代码质量
|
||
|
||
---
|
||
|
||
## 🎓 培训要点
|
||
|
||
### 开发人员需要了解
|
||
|
||
1. ProComponents 自带卡片样式
|
||
2. 不要外层包裹 Card
|
||
3. 使用 style prop 调整间距
|
||
4. Token 优先原则
|
||
|
||
### Code Reviewer 需要检查
|
||
|
||
1. 扫描 `<Card>` 包裹 ProComponents 的代码
|
||
2. 验证间距调整方式
|
||
3. 提供修复建议
|
||
|
||
### QA 测试人员需要验证
|
||
|
||
1. 视觉检查内边距是否过大
|
||
2. 对比设计稿确认间距
|
||
3. 截图记录问题
|
||
|
||
---
|
||
|
||
## 🛠️ 工具支持建议
|
||
|
||
### ESLint 规则（可选）
|
||
|
||
可以考虑添加自定义 ESLint 规则检测：
|
||
|
||
```javascript
|
||
// 伪代码示例
|
||
// 检测 <Card><ProTable /></Card> 模式
|
||
```
|
||
|
||
### 代码审查清单
|
||
|
||
在 Pull Request 模板中添加：
|
||
|
||
- [ ] 确认 ProComponents 未被 Card 包裹
|
||
- [ ] 验证间距使用 style={{ marginBottom: token.marginLG }}
|
||
|
||
---
|
||
|
||
## 📚 相关文档
|
||
|
||
- [OpenCode Agent 配置](./.opencode/)
|
||
- [Antigravity Agent 配置](./.agent/)
|
||
- [Ant Design ProComponents 文档](https://procomponents.ant.design/)
|
||
- [Design Tokens 使用指南](./.agent/skills/ant-design-skill/SKILL.md)
|
||
|
||
---
|
||
|
||
## ✨ 后续建议
|
||
|
||
### 1. 代码库审计
|
||
|
||
建议对现有代码库进行一次全面审计，查找并修复已存在的双内边距问题：
|
||
|
||
```bash
|
||
# 搜索可能的问题代码
|
||
grep -r "<Card>" src/pages/ | grep "ProTable\|QueryFilter\|ProForm"
|
||
```
|
||
|
||
### 2. 文档更新
|
||
|
||
在团队 Wiki 中添加：
|
||
|
||
- ProComponents 使用最佳实践
|
||
- 常见错误模式和修复方法
|
||
- 视觉效果对比图
|
||
|
||
### 3. 设计规范同步
|
||
|
||
与设计团队同步此规范，确保设计稿中不出现双重卡片设计。
|
||
|
||
---
|
||
|
||
**更新完成时间**: 2026-02-14
|
||
**更新执行者**: Antigravity Team
|
||
**规范版本**: v1.1
|