# 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