# Task Board UX 对比报告：AgentTeam vs Multica

> 基于 `feat-task-board-followup` 分支与 Multica 代码分析
> 日期：2026-04-19

---

## 一、总体对比

| 维度 | AgentTeam | Multica |
|------|------|---------|
| 状态数量 | 4 个 (todo / in_progress / in_review / done) | 7 个 (backlog / todo / in_progress / in_review / done / blocked / cancelled) |
| 看板列数 | 5 列 (backlog / ready / in_progress / in_review / done) | 7 列 (每个状态一列，可隐藏) |
| 拖拽排序 | **无** | **有** (@dnd-kit, 支持跨列拖拽和列内排序) |
| 批量操作 | **无** | **有** (批量改状态/优先级/指派人/删除) |
| 截止日期 | **无** | **有** (日历选择器 + 逾期变红) |
| 父子任务 | 有子任务 (subtasks) | 有父子 issue (parent/child, 带进度环) |
| 评论/讨论 | Discussion 系统 | Comment + Thread (可折叠评论线程) |
| Reactions | **无** | **有** (issue 级别 + 评论级别 emoji) |
| 订阅者 | **无** | **有** (订阅/取消订阅, 成员管理) |
| 视图持久化 | 服务端 (API) | 客户端 (Zustand persist, 按 workspace) |
| 无限滚动 | **无** | **有** (done 列/group) |
| Agent 实时执行 | 无 (只有 status 展示) | **有** (Agent Live Card, 实时 timeline + 工具调用) |

---

## 二、AgentTeam 应该学习的 Multica UX 特性（按优先级排序）

### P0 — 核心交互缺失

#### 1. 拖拽排序 (Drag & Drop)
- **Multica**: 使用 `@dnd-kit/core` + `@dnd-kit/sortable`，5px 激活距离防误触，自定义碰撞检测避免闪烁，拖拽时卡片有旋转+缩放动画，源卡片降至 30% 透明度
- **AgentTeam**: 完全没有拖拽，只能通过右键菜单或属性面板改状态
- **建议**: 引入 `@dnd-kit`，支持跨列拖拽改状态 + 列内排序，拖拽后自动切换为 manual 排序模式

#### 2. 看板卡片内联属性编辑
- **Multica**: 卡片上直接嵌入 priority / assignee / due date 的 inline picker，用 `PickerWrapper` 防止与拖拽冲突
- **AgentTeam**: 卡片只读，修改属性需进入 detail panel
- **建议**: 至少支持在卡片上直接修改 priority 和 assignee

#### 3. 批量操作
- **Multica**: List 视图中 hover 显示 checkbox，选中后底部浮出 toolbar，支持批量改状态/优先级/指派人/删除
- **AgentTeam**: 无任何批量操作
- **建议**: List 视图中加入 checkbox + 浮动 toolbar

### P1 — 重要的体验提升

#### 4. 状态系统扩展
- **Multica**: 7 个状态，包含 backlog / blocked / cancelled，每个状态有独立的颜色、图标、看板列背景色
- **AgentTeam**: 4 个状态，backlog 和 blocked 只是通过标记模拟（unclaimed todo = backlog, blockedReason = blocked）
- **建议**:
  - 增加 **backlog** 作为真正的状态（当前通过 "unclaimed todo" 模拟的 backlog 列用户体验不佳）
  - 增加 **cancelled** 状态（替代直接删除）
  - 给每个状态设计独立的状态图标（当前 AgentTeam 只用颜色 badge，没有图标）

#### 5. 状态图标系统
- **Multica**: 14x14 SVG 自定义图标，采用圆形进度设计语言 — backlog 是点阵环、todo 是虚线环、in_progress 是半饼、in_review 是 3/4 饼、done 是满圆+勾、blocked 是禁止符号、cancelled 是 X
- **AgentTeam**: 只用颜色 badge + 文字标签，没有图标
- **建议**: 设计一套状态图标，统一用在卡片、列表、detail panel、timeline 中

#### 6. 截止日期 (Due Date)
- **Multica**: 日历选择器，逾期显示红色，detail 菜单有快捷选项（今天/明天/下周/清除）
- **AgentTeam**: 完全没有截止日期概念
- **建议**: 在 task 数据模型中增加 `dueDate` 字段，卡片和 detail 中显示，逾期时高亮

#### 7. 评论系统升级
- **Multica**:
  - 卡片式评论，支持折叠评论线程
  - 评论内可编辑/删除（仅限作者）
  - Rich text 编辑器 + 文件拖拽上传
  - emoji reactions
  - 临时评论 60% 透明度（optimistic UI）
  - 高亮评论有 ring 动画
- **AgentTeam**: Discussion 系统，功能较基础（无线程、无 reactions、无文件上传）
- **建议**: 支持 comment thread（评论可嵌套回复），增加 reactions

### P2 — 锦上添花

#### 8. 看板列设计优化
- **Multica**:
  - 每列 280px 固定宽度，水平滚动
  - 列有状态色背景 tint（如 in_progress 列是淡黄色）
  - 列头有状态图标 + badge + 数量 + 直接创建按钮
  - 可隐藏/显示列，隐藏列在末尾有汇总面板
- **AgentTeam**: 响应式 grid 布局，列没有背景色区分，不能隐藏列
- **建议**:
  - 给列加微妙的背景色 tint，增强视觉区分
  - 列头加 "+" 快捷创建按钮
  - 支持列的隐藏/显示

#### 9. 优先级图标
- **Multica**: 柱状图标，urgent 有脉冲动画，视觉冲击力强
- **AgentTeam**: 优先级只是文字标签
- **建议**: 设计优先级图标（可以用更简单的方案，如信号格或颜色点）

#### 10. 父子任务进度环
- **Multica**: 12px SVG 环形进度指示器，完成时变蓝色，在卡片/列表/detail 中统一使用
- **AgentTeam**: 子任务进度用文字 "done/total" 显示
- **建议**: 用环形进度指示器替代文字进度

#### 11. Reactions (Emoji 反应)
- **Multica**: issue 级别和评论级别都可以加 emoji reaction，有 quick picker，optimistic UI
- **AgentTeam**: 没有 reactions
- **建议**: 在 discussion entry 和 task 上加入 emoji reaction

#### 12. 订阅者管理
- **Multica**: 订阅/取消订阅，头像组显示（最多4个 + "+N"），popover 管理成员订阅
- **AgentTeam**: 无订阅机制
- **建议**: 考虑加入任务订阅，用户可以选择关注特定任务的变更

#### 13. 无限滚动 (Done 列)
- **Multica**: done 列/group 使用 IntersectionObserver 实现无限滚动加载
- **AgentTeam**: 一次性加载所有 done 任务，done 列可折叠
- **建议**: done 任务多时加入无限滚动

#### 14. 创建流程优化
- **Multica**:
  - 可展开/收起的 modal（紧凑模式 vs 扩展模式）
  - 底部工具栏有 pill 形状 picker（状态/优先级/指派人/日期/项目）
  - Draft store 持久化草稿
  - 创建后显示 toast 通知（含状态图标 + 编号 + 标题 + "View issue" 链接）
  - 子 issue 创建（预填 parent）
- **AgentTeam**: 创建 modal 有三种模式（create / assign / start），但没有草稿持久化和创建后 toast
- **建议**:
  - 加入创建后的 toast 通知
  - 考虑草稿持久化

#### 15. 空状态设计
- **Multica**: 居中大图标 + 描述文字，每列 "No issues"
- **AgentTeam**: 虚线边框 + placeholder 文字
- **建议**: 优化空状态视觉，使用更大更明显的图标

---

## 三、AgentTeam 已有的优势（应保留）

1. **Review 系统**: AgentTeam 有完整的 review workflow（request / approve / reject / reassign / mark not reviewable），这是 Multica 没有的深度功能
2. **Execution Summary**: 4 卡片执行摘要（Driving now / Blocker / Latest deliverable / Next step）是很好的 UX 创新
3. **Checkpoint 系统**: 比简单的子任务更灵活
4. **Property Rail**: 可拖拽调整宽度的属性侧栏，交互设计优秀
5. **Focus Mode**: 专注模式隐藏侧栏，实用
6. **Workspace-wide Task Hub**: 跨 channel 聚合视图，按 channel 分组
7. **Configurable Card Properties**: 用户可自定义卡片上显示哪些属性

---

## 四、实施建议优先级

| 优先级 | 特性 | 预估工作量 | 影响面 |
|--------|------|-----------|--------|
| P0 | 拖拽排序 (dnd-kit) | 大 | 看板 + 数据模型 |
| P0 | 卡片内联编辑 | 中 | 卡片组件 |
| P0 | 批量操作 | 中 | 列表视图 + 新组件 |
| P1 | 状态图标系统 | 小 | 全局组件 |
| P1 | 看板列背景色 + 列头 "+" 按钮 | 小 | 列组件 |
| P1 | 截止日期 | 中 | 数据模型 + 卡片 + detail |
| P1 | 状态扩展 (backlog/blocked/cancelled) | 大 | 后端 + 前端全局 |
| P1 | 评论线程 + reactions | 大 | discussion 系统 |
| P2 | 进度环 | 小 | 子任务展示 |
| P2 | 优先级图标 | 小 | 全局组件 |
| P2 | 创建后 toast | 小 | 创建流程 |
| P2 | 无限滚动 (done) | 中 | 看板 + 列表 |
| P2 | 订阅者 | 大 | 后端 + 前端 |