lishican/agent

Fork 0

Files

ken e10747feac initial commit

2026-02-16 12:46:37 +08:00

6.3 KiB

Raw Blame History

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 自带卡片样式和内边距。

错误模式 ❌

// 错误：外层包裹 Card
<Card>
  <ProTable />
</Card>

<Card>
  <QueryFilter />
</Card>

<Card>
  <ProForm />
</Card>

正确模式 ✅

// 正确：直接使用 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

位置:

搜索区域规范
代码审计清单

新增:

双内边距检查项（标记为重要检查项）
错误模式识别
修复建议
审计清单中添加专项检查

6. QA Tester

位置: "Separated Card" 模式合规性
新增:

双内边距问题检查（标记为高优先级）
检查方法和错误模式
视觉后果说明
修复建议

🔍 检查点对比

更新前

✅ 检查 ProComponents 使用
✅ 检查样式 Token
❌ 未检查双内边距问题

更新后

✅ 检查 ProComponents 使用
✅ 检查样式 Token
✅ 新增双内边距问题检查
✅ 新增Card 包裹检测
✅ 新增修复建议

📊 影响范围统计

受影响的组件

ProTable - 表格组件
QueryFilter - 搜索过滤器
LightFilter - 轻量过滤器
ProForm - 表单组件
ModalForm - 模态表单

受影响的场景

列表页面: 搜索 + 表格组合
数据管理: 过滤器 + 数据展示
表单页面: 各类表单场景

⚠️ 重要性级别

Code Spec Expert

列为关键检查项
必须在代码审查时检查
发现问题需提供修复建议

QA Tester

列为高优先级检查
视觉测试时必须验证
影响用户体验评分

Team Coordinator

标记为 CRITICAL
属于架构级别规范
影响整体代码质量

🎓 培训要点

开发人员需要了解

ProComponents 自带卡片样式
不要外层包裹 Card
使用 style prop 调整间距
Token 优先原则

Code Reviewer 需要检查

扫描 <Card> 包裹 ProComponents 的代码
验证间距调整方式
提供修复建议

QA 测试人员需要验证

视觉检查内边距是否过大
对比设计稿确认间距
截图记录问题

🛠️ 工具支持建议

ESLint 规则（可选）

可以考虑添加自定义 ESLint 规则检测：

// 伪代码示例
// 检测 <Card><ProTable /></Card> 模式

代码审查清单

在 Pull Request 模板中添加：

确认 ProComponents 未被 Card 包裹
验证间距使用 style={{ marginBottom: token.marginLG }}

📚 相关文档

✨ 后续建议

1. 代码库审计

建议对现有代码库进行一次全面审计，查找并修复已存在的双内边距问题：

# 搜索可能的问题代码
grep -r "<Card>" src/pages/ | grep "ProTable\|QueryFilter\|ProForm"

2. 文档更新

在团队 Wiki 中添加：

ProComponents 使用最佳实践
常见错误模式和修复方法
视觉效果对比图

3. 设计规范同步

与设计团队同步此规范，确保设计稿中不出现双重卡片设计。

更新完成时间: 2026-02-14
更新执行者: Antigravity Team
规范版本: v1.1

6.3 KiB Raw Blame History Unescape Escape