第 11 期 | Phase B: UI 与逻辑的集成构建

⏱ 预计阅读 8 分钟 更新于 2026/5/7
💡 进群学习加 wx: agentupdate
(申请发送: agentupdate)

11.1 Phase B: 集成构建

ui-dev 和 logic-dev 各自完成 Phase A 后，自动进入 Phase B。

11.1.1 logic-dev Phase B: DOM 事件绑定

// 按钮点击 → 调用纯函数
function handleButtonClick(button) {
  const btnValue = button.dataset.value;
  switch (btnValue) {
    case 'C': calculatorState.display = clear(calculatorState.display); break;
    case '=': handleEquals(); return;
    case '+/-': calculatorState.display = toggleSign(calculatorState.display); break;
    default:
      if (isOperator(btnValue)) {
        calculatorState.display = appendOperator(calculatorState.display, btnValue);
      } else {
        calculatorState.display = appendNumber(calculatorState.display, btnValue);
      }
  }
  updateDisplay();
}

// 键盘映射
const KEY_MAP = {
  '0':'btn-0', '1':'btn-1', /* ... */
  'Enter':'btn-equals', 'Backspace':'btn-backspace', 'Escape':'btn-clear'
};

// 模式切换
function toggleMode() {
  calculatorState.isSeniorMode = !calculatorState.isSeniorMode;
  document.documentElement.dataset.theme =
    calculatorState.isSeniorMode ? 'senior' : 'standard';
  localStorage.setItem('calculator-mode',
    calculatorState.isSeniorMode ? 'senior' : 'standard');
}

11.1.2 ui-dev Phase B: UI 交互样式

  • 按钮 :active 按压反馈
  • 历史面板样式
  • 老年模式音效开关 UI
  • button.pressed CSS class

11.1.3 等待 Agent 完成通知

ui-dev 和 logic-dev 并行执行 Phase A → Phase B。team-lead 需要等待两者都完成才能 spawn qa-engineer。

等待方式 1：接收 SendMessage 通知（理想但不可靠）

sequenceDiagram
    participant TL as team-lead
    participant UD as ui-dev
    participant LD as logic-dev
    
    TL->>UD: spawn (Phase A + B)
    TL->>LD: spawn (Phase A + B)
    
    Note over UD: 写 HTML/CSS
    Note over LD: 写 app.js
    
    UD->>TL: SendMessage "Phase A+B 完成"
    Note over TL: 收到 1/2 通知
    LD->>TL: SendMessage "Phase A+B 完成"
    Note over TL: 收到 2/2 通知 → 可 spawn QA

等待方式 2：主动检查 TaskList（推荐）

// 在 team-lead 会话中检查进度
TaskList()
// 确认 Task #1-4 都是 completed 状态后再 spawn qa-engineer

等待方式 3：检查文件系统（最可靠）

# 确认关键文件都存在且不为空
ls -la index.html style.css app.js
# 确认 agent inbox 中有完成消息
cat ~/.claude/teams/calc-dev/inboxes/team-lead.json | python3 -m json.tool

实际项目中发生了什么： ui-dev 和 logic-dev 都发送了完成通知到 team-lead.json inbox 文件，但由于上下文压缩和通知投递机制的延迟，team-lead 在 UI 上没有看到弹窗通知。最终通过手动检查文件和 TaskList 确认了完成状态。

11.1.4 Agent 运行在独立的 tmux Session 中

这是最容易误解的点。

你以为的架构：
calc-dev session:
  pane 0: team-lead
  pane 1: ui-dev ← agent 在这里运行
  pane 2: logic-dev ← agent 在这里运行

实际的架构：
calc-dev session:
  pane 0: zsh（空的）
  pane 1: zsh（空的）
  pane 2: zsh（空的）

session 2（Claude Code 自动创建）:
  pane 0: 2.1.118 ← ui-dev 在这里运行
  pane 1: 2.1.118 ← 其他 agent

session 4（Claude Code 自动创建）:
  pane 0: 2.1.118 ← qa-engineer 在这里运行

calc-dev session 的 pane 是 setup-team.sh 创建的空 shell，不是 agent 的运行环境。Claude Code 的 Agent 工具会自动创建新的 tmux session 来运行子 agent。

查看 agent 实际运行位置：

# 列出所有 session
tmux list-sessions

# 列出所有 pane 及其进程
tmux list-panes -a -F '#{session_name}.#{window_index}.#{pane_index} #{pane_current_command}'

# 切换到 agent 的 session
tmux switch-client -t 2

11.1.5 通知机制：为什么有时收不到

消息投递流程：

Agent A 调用 SendMessage({to: "team-lead", message: "完成"})
  → 写入 ~/.claude/teams/calc-dev/inboxes/team-lead.json
  → 如果 team-lead 会话正在处理 turn → 自动投递到对话中
  → 如果 team-lead 会话空闲等待用户输入 → 消息留在 inbox 文件中

三种情况导致"通知丢失"：

  1. 上下文压缩（最常见）：对话过长触发 autocompact，压缩时 inbox 中的未读消息可能不被回放
  2. 会话重启：/context 或 session continue 后，新 session 不会自动加载旧 inbox
  3. team-lead 不在活跃 turn：消息写入 inbox 文件但没触发 UI 通知弹窗

验证方法：

# 直接读 inbox 文件
cat ~/.claude/teams/calc-dev/inboxes/team-lead.json | python3 -m json.tool