feat: add TaskBoard demo and refactor project structure

2026-02-16 13:36:29 +08:00
parent ca828a6c7f
commit a4a68ec039
24 changed files with 976 additions and 1698 deletions
--- a/.opencode/SUMMARY.md
+++ b/.opencode/SUMMARY.md
@@ -1,224 +0,0 @@
-# OpenCode Agent 配置完成总结
-
-## ✅ 迁移完成
-
-已成功将 Antigravity 的 Agent 配置完整迁移到 OpenCode 格式，并根据 OpenCode 规范进行了优化。
-
-**完成时间**: 2026-02-14  
-**配置版本**: v1.0
-
---
-
-## 📦 交付清单
-
-### 配置文件（7 个）
-
-1. ✅ `.opencode/agents/team.md` - 主 Agent（项目经理）
-2. ✅ `.opencode/agents/planning.md` - 规划架构师（子 Agent）
-3. ✅ `.opencode/agents/frontend.md` - 前端专家（子 Agent）
-4. ✅ `.opencode/agents/umi-pro.md` - UmiJS 专家（子 Agent）
-5. ✅ `.opencode/agents/code-spec.md` - 代码规范专家（子 Agent）
-6. ✅ `.opencode/agents/qa-tester.md` - QA 测试专家（子 Agent）
-7. ✅ `opencode.json` - 统一配置文件
-
-### 文档文件（3 个）
-
-1. ✅ `.opencode/README.md` - 使用指南
-2. ✅ `.opencode/MIGRATION.md` - 迁移文档
-3. ✅ 本文件 - 完成总结
-
---
-
-## 🎯 核心特性
-
-### 1. 主-子 Agent 架构
-
-```
-Team (主 Agent)
-├── @planning (规划)
-├── @frontend (前端)
-├── @umi-pro (UmiJS)
-├── @code-spec (审查)
-└── @qa-tester (测试)
-```
-
-### 2. 统一输出格式
-
-所有子 Agent 完成任务后都输出标准格式的结果摘要：
-
- 任务描述和状态
- 完成内容清单
- 待主 Agent 确认事项
- 明确的结束标记
-
-### 3. 严格会话控制
-
- ✅ 只有主 Agent (team) 可以开始和结束会话
- ✅ 子 Agent 必须将结果交回主 Agent
- ❌ 子 Agent 禁止自行结束会话
- ❌ 子 Agent 禁止直接调用其他 Agent
-
-### 4. 移除 Model 配置
-
-所有 Agent 不再指定 model，由 OpenCode 统一管理模型选择，更加灵活。
-
-### 5. Chrome DevTools MCP 集成
-
-QA Tester 配置了 Chrome DevTools MCP 支持，用于自动化浏览器测试。
-
---
-
-## 🚀 使用方式
-
-### 直接对话（主 Agent）
-
-```
-用户：创建一个产品管理页面
-Team Agent：理解需求 → 调用 @planning → 等待批准 → 实施 → 审查 → 测试 → 交付
-```
-
-### 手动调用子 Agent
-
-```
-@planning 分析这个需求并给出实施计划
-@frontend 实现这个 UI 界面
-@umi-pro 创建服务层和 Mock 数据
-@code-spec 审查代码是否符合规范
-@qa-tester 测试所有功能
-```
-
---
-
-## 📋 工作流程
-
-### 标准开发流程
-
-1. **需求理解**: Team 与用户沟通，clarify 需求
-2. **架构规划**: Team 调用 @planning 生成详细计划
-3. **🛑 用户确认**: Team 暂停，等待用户批准计划
-4. **服务开发**: Team 调用 @umi-pro 创建服务和 Mock
-5. **UI 实施**: Team 调用 @frontend 或 @umi-pro 实现界面
-6. **代码审查**: Team 调用 @code-spec 审查代码
-7. **质量测试**: Team 调用 @qa-tester 进行测试
-8. **任务交付**: Team 整合所有结果，交付给用户
-
---
-
-## 🎨 设计规范（所有 Agent 强制遵守）
-
-### "Separated Card" 模式
-
- **< 4 搜索字段**: 使用 `ProTable` 内置 `search`
- **>= 4 搜索字段**: 独立 `QueryFilter` 组件
-
-### 强制样式 Tokens
-
-```typescript
-{
-  background: token.colorBgContainer,    // 白色
-  padding: token.paddingLG,              // 24px
-  borderRadius: token.borderRadius,      // 6px
-  marginBottom: token.marginLG,          // 24px
-  // 无 boxShadow - 扁平化设计
-}
-```
-
-### 零 CSS 文件政策
-
-所有样式必须通过 Ant Design Design Tokens 内联实现。
-
---
-
-## 🔧 技术规范
-
-### 架构层
-
- ✅ 真实服务层（`src/services/`）
- ✅ 统一 Mock（`mock/` 目录）
- ✅ TypeScript 严格（无 `any`）
-
-### UI 层
-
- ✅ ProComponents 优先
- ✅ 垂直表单布局 (`layout="vertical"`)
- ✅ Design Tokens 样式化
-
-### 数据层
-
- ✅ `useRequest` 统一数据请求
- ✅ 加载状态显示
- ✅ 防重复点击
-
-### 国际化
-
- ✅ 所有字符串使用 `intl.formatMessage`
- ✅ 包含 `defaultMessage`
-
---
-
-## 📊 配置对比
-
-### Antigravity vs OpenCode
-
-| 特性       | Antigravity             | OpenCode                 |
-| ---------- | ----------------------- | ------------------------ |
-| 调用方式   | `/plan`, `/fe`, `/umi`  | `@planning`, `@frontend` |
-| 主协调器   | Team Coordinator Prompt | Team 主 Agent            |
-| Agent 类型 | 平级 Agent              | 主-子 Agent 架构         |
-| 会话控制   | 各 Agent 自行控制       | 主 Agent 统一控制        |
-| 输出格式   | 自由格式                | 统一标准格式             |
-| Model 配置 | 每个 Agent 指定         | 统一管理                 |
-
---
-
-## ⚙️ 配置细节
-
-### 权限矩阵
-
-| Agent     | Mode     | Write | Edit | Bash | Temperature |
-| --------- | -------- | ----- | ---- | ---- | ----------- |
-| team      | primary  | ✅    | ✅   | ✅   | 0.3         |
-| planning  | subagent | ❌    | ❌   | ❌   | 0.2         |
-| frontend  | subagent | ✅    | ✅   | ✅   | 0.3         |
-| umi-pro   | subagent | ✅    | ✅   | ✅   | 0.3         |
-| code-spec | subagent | ✅    | ✅   | ❌   | 0.1         |
-| qa-tester | subagent | ❌    | ❌   | ✅   | 0.2         |
-
---
-
-## 📚 相关文档
-
- [README.md](./.opencode/README.md) - 详细使用指南
- [MIGRATION.md](./.opencode/MIGRATION.md) - 完整迁移说明
- [OpenCode 官方文档](https://opencode.ai/docs/zh-cn/agents/)
- [Antigravity 配置](./.agent/)
-
---
-
-## ✨ 下一步建议
-
-### 1. 测试配置
-
-```bash
-# 使用 OpenCode 加载此项目
-# 测试主 Agent 是否正常工作
-# 测试子 Agent 调用是否正常
-```
-
-### 2. 团队培训
-
- 向团队成员介绍新的 Agent 架构
- 说明主-子 Agent 的协作方式
- 演示标准工作流程
-
-### 3. 持续优化
-
- 根据实际使用反馈调整 Agent 配置
- 优化输出格式和提示词
- 补充更多使用示例
-
---
-
-**配置状态**: ✅ 已完成，可投入使用  
-**维护者**: Antigravity Team  
-**更新日期**: 2026-02-14
--- a/.opencode/agents/team.md
+++ b/.opencode/agents/team.md
@@ -161,6 +161,10 @@ PM 在委派任何子 Agent 时，**必须**使用以下结构化格式注入 Sk

 [逐条列出技术栈 Skill 中的关键约束，每条必须是具体可执行的]

+## 🎨 视觉标准（from design/visual-standards）
+
+[逐条列出视觉规范：主题色、布局、按钮样式、Zero CSS 策略]
+
 ## 🔧 质量红线（from code-quality）

 [逐条列出质量规范的关键约束]
@@ -169,7 +173,7 @@ PM 在委派任何子 Agent 时，**必须**使用以下结构化格式注入 Sk

 [逐条列出业务规则要点]

-## 🎨 设计规范（from Figma）（如有）
+## 🖌️ 设计原稿（from Figma）（如有）

 [列出 Figma 提取的设计约束]

@@ -189,10 +193,11 @@ PM 在委派任何子 Agent 时，**必须**使用以下结构化格式注入 Sk

 > 用户: "根据这个 Figma 开发订单管理页面" 主 Agent 阶段 0 输出:
 >
-> - **技术栈要点** (from umijs-procomponents): UmiJS 4 + ProComponents, 零 CSS, ProTable 列表, 禁止双内边距...
-> - **质量红线** (from code-quality): 禁止 any, 500 行限制, 金额用分...
-> - **业务要点** (from order-management): 订单状态机、金额用分、30 分钟超时取消
-> - **设计规范** (from Figma): 列表含 8 列、有 3 个筛选条件、主色 #1890FF
+> - **技术栈要点** (from umijs-procomponents): UmiJS 4, ProComponents, 列表需配置 request...
+> - **视觉标准** (from visual-standards): 主题色 #fa541c, 行操作使用 Text 按钮, ModalForm 垂直布局...
+> - **质量红线** (from code-quality): 禁止 any, 500 行限制...
+> - **业务要点** (from order-management): 订单状态机...
+> - **设计原稿** (from Figma): 列表含 8 列...

 ### 阶段 1: 架构规划 (@planning)

@@ -257,6 +262,7 @@ PM 在委派任何子 Agent 时，**必须**使用以下结构化格式注入 Sk
 4. **修复闭环**:
   - 如果 @code-spec 或 @qa-tester 报告问题，**必须**将具体问题分配回开发 Agent 进行修复。
   - 修复后，**必须**重新经过审查和测试，形成完整闭环。
+5. **文档维护 (日志安全)**: 任何更新 `.doc/project_record.md` 的操作，**必须**先读取原内容并采用**追加模式**。**禁止**直接 overwrite 导致历史丢失。

 ### 内部思维链

--- a/.opencode/skills/design/visual-standards/SKILL.md
+++ b/.opencode/skills/design/visual-standards/SKILL.md
@@ -0,0 +1,85 @@
+---
+name: visual-standards
+description: 中后台应用视觉规范（Ant Design Pro 标准）。涵盖主题色、布局、排版、间距系统及操作区规范。所有 UI 界面必须严格遵循。
+---
+
+# 视觉设计与交互规范 (Design System)
+
+## 1. 原则与理念
+
+- **Ant Design Only**: 严格遵循 Ant Design 5.0+ 默认视觉风格。
+- **High Density**: 适用于信息密集型中后台场景，优先紧凑布局。
+- **Consistency**: 同类操作必须使用相同的视觉表现。
+
+## 2. 主题配置 (Theme)
+
+全站统一采用 **Volcano (火山红)** 主题色，强调操作引导性与警示性。
+
+```json
+{
+  "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` 状态。
--- a/.opencode/skills/tech-stack/umijs-procomponents/SKILL.md
+++ b/.opencode/skills/tech-stack/umijs-procomponents/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: umijs-procomponents
-description: UmiJS 4 + Ant Design 5 + ProComponents 全栈开发规范。涵盖技术栈约束、组件用法、样式系统、服务层架构、国际化和图标管理。当项目使用 UmiJS + ProComponents 技术栈时，PM 必须将本 Skill 的要点注入给所有子 Agent。
+description: UmiJS 4 + Ant Design 5 + ProComponents 全栈开发规范。涵盖技术栈约束、组件用法、服务层架构、国际化和图标管理。
 ---

 # UmiJS + ProComponents 开发规范
@@ -30,97 +30,66 @@ description: UmiJS 4 + Ant Design 5 + ProComponents 全栈开发规范。涵盖
 | 布局      | `ProLayout` / `PageContainer`          |
 | 详情      | `ProDescriptions`                      |

-### 2.3 ⚠️ 禁止双内边距
+## 3. 样式与视觉规范

- **严禁**在 `ProTable`、`QueryFilter`、`ProForm` 外层包裹 `Card` 组件。
- **原因**: ProComponents 自带卡片样式，额外包裹导致双内边距问题。
- **错误示例**: `<Card><ProTable /></Card>` ❌
- **正确示例**: `<ProTable style={{ marginBottom: token.marginLG }} />` ✅
+**⚠️ 重要**: 本项目遵循严格的视觉设计系统。所有样式、布局、主题色定义请查阅 **[Visual Standards](../design/visual-standards/SKILL.md)**。

-## 3. 搜索区域规范（Separated Card 模式）
+### 3.1 零 CSS 策略 (Zero CSS)

-### 3.1 复杂度规则
+- **技术约束**: 禁止创建 CSS/Less/SCSS 文件。
+- 所有样式必须使用 Ant Design Design Token (`theme.useToken`).
+- 详见 Visual Standards 文档。

- **< 4 个搜索字段**: 使用 `ProTable` 内置 `search` 属性。
- **>= 4 个搜索字段**: 使用独立 `QueryFilter` 组件，配置 `layout="vertical"`。
+## 4. 服务层架构

-### 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 真实服务层
+### 4.1 真实服务层

 - 所有页面逻辑必须调用 `src/services/`。禁止在 JSX 中内联 mock 数据或逻辑。
 - **强制使用 useRequest**: 所有数据交互（包括查询、提交、删除）**必须**通过 `useRequest` hook 发起。
 - **禁止直接 request**: 严禁在组件内直接手动调用 `request` 方法（除非在极特殊的底层封装中）。`useRequest` 提供了标准化的 loading、error 和 data 状态管理，手动 `request` 会导致状态管理不一致。

-### 5.2 统一 Mocking
+### 4.2 统一 Mocking

 - 使用 UmiJS `mock/` 目录存放所有 mock 数据。禁止在组件中硬编码对象。

-### 5.3 类型定义
+### 4.3 类型定义

 - TypeScript 接口统一在 `data.d.ts` 中定义。

-### 5.4 菜单配置
+### 4.4 菜单配置

 - 菜单图标必须在 `src/app.ts` 中配置渲染逻辑（确保图标显示为图形而非文本）。
 - 菜单文案必须配置在 `src/locales/` 中，Key 以 `menu.` 开头（如 `menu.system.user`）。

-## 6. 国际化 (i18n)
+## 5. 国际化 (i18n)

-### 6.1 强制规则
+### 5.1 强制规则

 - 所有面向用户的字符串**必须**使用 `intl.formatMessage` 或 `<FormattedMessage>`。
 - **每个** `formatMessage` 或 `FormattedMessage` 调用**必须**包含 `defaultMessage` 作为后备。
  - 示例: `intl.formatMessage({ id: 'key', defaultMessage: '默认文案' })`
 - 在 `src/locales/` 中维护翻译。

-### 6.2 双语同步
+### 5.2 双语同步

 - **必须**同时在 `src/locales/zh-CN.ts` 和 `en-US.ts` 中定义所有使用的 Key。
 - **严禁**仅添加中文而忽略英文，或仅添加英文而忽略中文。

-### 6.3 QA 验证
+### 5.3 QA 验证

 - 测试时必须在两种语言环境下验证页面显示。
 - 浏览器控制台不得出现 `[React Intl] Missing message` 警告。

-## 7. Figma 图标导出规范
+## 6. Figma 图标导出规范

 当 Figma 设计稿中包含图标元素时：

-### 7.1 优先级原则
+### 6.1 优先级原则

 1. **优先匹配 Ant Design Icons**: 检查设计稿中的图标是否可用 `@ant-design/icons` 替代。如果视觉上高度一致，**必须使用 Ant Design 图标**。
 2. **自定义图标导出**: 仅当 Ant Design Icons 中**没有匹配或视觉差异明显**时，才从 Figma 导出。

-### 7.2 导出流程
+### 6.2 导出流程

 1. 使用 Figma MCP 获取图标设计详情。
 2. 导出为 **SVG 格式**，保存到 `src/assets/icons/`。
@@ -128,7 +97,7 @@ description: UmiJS 4 + Ant Design 5 + ProComponents 全栈开发规范。涵盖
 4. 封装为 React 组件存放 `src/components/Icons/`。
 5. 在 `src/components/Icons/index.ts` 中统一导出。

-### 7.3 目录结构
+### 6.3 目录结构

 ```
 src/
@@ -140,9 +109,3 @@ src/
    ├── CustomChartIcon.tsx
    └── DataFlowIcon.tsx
 ```
-
-## 8. Ant Design 5 兼容性
-
- 使用 `open` 而非 `visible`。
- 使用 `onOpenChange` 而非 `onVisibleChange`。
- 对 Ant Design 5 更新极为警惕，避免使用废弃 API。