第 7 章：并行工作 — Agent 与任务委派 — Claude Code 极客指南：用一个番茄钟掌握核心指令

在前面的章节中，我们学习了 Claude Code 的各种命令和技巧。但在实际开发中，经常会遇到需要同时处理多个独立任务的情况。本章将介绍如何利用 Agent 和并行任务来提高开发效率。

7.1 为什么需要并行

在实际的软件开发过程中，复杂的任务往往可以拆分为多个独立的子任务。例如：

UI 组件开发与数据处理逻辑可以同时进行
文档编写与代码重构可以并行处理
多个功能的测试和修复可以同时启动

并行工作有三个核心优势：

提高效率：多个任务同时进行，充分利用系统资源
不阻塞主终端：长时间运行的任务不会影响你继续工作
专业化分工：不同 agent 专注于不同领域，发挥各自优势

Claude Code 提供了三种并行模式：

模式	使用场景	优点	缺点
Agent 委派	复杂任务拆分为多个子任务	灵活、可控、可独立管理	需要手动协调
Background 分离	长时间运行的单个任务	释放终端、简单易用	只能整体后台化
Batch 批量	大规模代码变更或重构	一次性处理多个文件	缺乏交互性

7.2 `/agents` — 管理 Agent 配置

命令语法

/agents
/agents [agent-name]

功能说明

/agents 命令用于管理和查看 Claude Code 的 agent 配置。Agent 是预定义的子代理角色，具有特定的专长和指令。

Agent 配置文件位置：.claude/agents/ 目录

内置 Agent 类型：

Explore Agent：只读探索型 agent，用于代码浏览、搜索和分析
Plan Agent：规划设计型 agent，用于制定架构设计和实现计划
General-purpose Agent：通用型 agent，可处理各种编程任务

实际使用示例

示例 1：查看所有可用的 agent 配置

/agents

输出将显示 .claude/agents/ 目录下所有的 agent 文件。

示例 2：创建自定义 agent

创建文件 .claude/agents/ui-specialist.md：

# UI 专科专家

你是一个专注于用户界面设计和实现的专业开发人员。

## 核心职责
- 负责所有 UI 组件的设计和实现
- 确保界面美观、易用、响应式
- 遵循设计系统和样式规范

## 技术栈
- CSS: Tailwind CSS、CSS Modules
- 框架: React、Next.js
- 工具: Figma、Storybook

## 工作原则
1. 优先考虑用户体验
2. 保持代码简洁和可维护性
3. 确保跨浏览器兼容性
4. 实现无障碍访问标准

示例 3：在会话中使用 agent

@ui-specialist 我需要为番茄钟应用设计一个启动界面，包括：
- 倒计时显示
- 开始/暂停按钮
- 任务名称输入框
请提供完整的 React 组件代码。

示例 4：Team 协作模式

创建团队配置 .claude/teams/frontend-team.md：

# 前端开发团队

## 成员
- @ui-specialist: 负责所有 UI 组件
- @data-engineer: 负责数据层和状态管理
- @test-automation: 负责测试编写和自动化

## 协作流程
1. 首先由 @data-engineer 设计数据模型
2. 然后 @ui-specialist 实现 UI 组件
3. 最后 @test-automation 编写测试用例

## 共享约定
- 所有组件必须通过 TypeScript 类型检查
- 每个文件必须包含对应的测试文件
- 代码提交前必须运行 ESLint 和 Prettier

注意事项/技巧

Agent 配置格式：使用 Markdown 格式，可以包含指令、角色定义、技术栈等信息
命名规范：使用短横线命名法（kebab-case），如 ui-specialist.md
调用方式：在会话中使用 @agent-name 来调用特定的 agent
权限控制：agent 会继承主会话的权限设置
上下文隔离：每个 agent 有独立的上下文，但可以通过主会话协调

7.3 `/tasks` — 列出后台任务

命令语法

/tasks
/bashes

功能说明

/tasks 命令用于查看和管理当前会话中启动的所有后台任务。这些任务可能是由 agent 委派或 /background 命令创建的。

显示信息：

任务 ID
任务状态（运行中/完成/失败）
任务描述
启动时间
运行时长

实际使用示例

示例 1：列出所有后台任务

/tasks

输出示例：

后台任务列表:

[1] 运行中 - "为番茄钟实现本地存储功能"
     启动于: 2026-05-13 14:30:25
     运行时长: 2m 45s

[2] 完成 - "编写番茄钟 UI 组件单元测试"
     启动于: 2026-05-13 14:25:10
     运行时长: 5m 12s

示例 2：查看特定任务的输出

/tasks 1

示例 3：使用别名

/bashes

注意事项/技巧

任务状态：定期检查任务状态，及时发现失败的任务
输出查看：可以使用 /tasks [id] 查看特定任务的详细输出
自动清理：完成的任务不会自动删除，需要手动清理
并发限制：同时运行的后台任务数量受系统资源限制

7.4 `/background` — 会话后台化

命令语法

/background [prompt]
/bg [prompt]

功能说明

/background 命令将当前会话转换为后台 agent，释放终端供你使用。你可以在后台 agent 启动前发送一个最后指令。

工作流程：

当前会话变为后台进程
终端返回到交互状态
后台 agent 继续执行任务
使用 claude agents 在命令行监视所有后台会话

实际使用示例

示例 1：将当前会话后台化

/background

会话将立即切换到后台模式。

示例 2：后台化并发送最后指令

/background 完成番茄钟的所有测试用例编写，生成测试覆盖率报告

示例 3：使用别名

/bg 为番茄钟添加性能优化代码

示例 4：在命令行监视后台会话

claude agents

输出示例：

Claude Code Agents:

[agent-1] 运行中
  工作目录: /Users/eric/work/my-pomodoro
  启动时间: 2026-05-13 14:30:25
  任务: 完成番茄钟的所有测试用例编写

注意事项/技巧

与 /tasks 的区别：
- /background：启动一个新的后台 agent 会话
- /tasks：查看当前会话中的后台任务状态
会话管理：
- 使用 claude agents 查看所有后台会话
- 后台会话会持续运行直到任务完成或手动停止
输出查看：
- 后台会话的输出会写入日志文件
- 可以在日志中查看 agent 的详细执行过程
资源占用：
- 后台会话会占用系统资源
- 避免同时启动过多后台会话
使用场景：
- 长时间的代码重构
- 大规模文档生成
- 复杂的测试套件运行

7.5 并行模式详解

Agent 委派模式

工作原理：主会话通过 Agent 工具派发子任务给专门化的 agent。

优势：

精细化控制每个子任务
不同 agent 可以专注于不同领域
主会话保持交互状态

使用场景：

多个独立的功能开发
不同领域的并行处理（UI、数据层、测试等）

Background 分离模式

工作原理：整个会话切换为后台进程执行。

优势：

完全释放终端
适合长时间运行的任务
简单易用

使用场景：

一次性的大型任务
不需要频繁交互的自动化任务

Worktree 隔离模式

工作原理：每个 agent 在独立的 git worktree 中工作，互不干扰。

优势：

完全隔离的工作环境
可以独立提交和回滚
避免代码冲突

使用场景：

多人协作的开发环境
需要独立版本控制的任务

并行模式选择策略

场景	推荐模式	理由
需要同时开发多个独立功能	Agent 委派	可以精细化控制每个功能
长时间的代码重构或迁移	Background 分离	释放终端，避免阻塞
需要独立版本控制的多个任务	Worktree 隔离	避免代码冲突
大规模代码格式化	Background 分离	简单且高效
需要专业领域知识的任务	Agent 委派	利用专门化的 agent
测试套件运行	Background 分离	可以在后台持续运行
文档生成	Background 分离	通常不需要交互
紧急 bug 修复	不使用并行	专注于单个任务

7.6 动手做：并行开发番茄钟

在本节中，我们将通过一个实际示例来体验并行工作模式。我们将同时开发番茄钟的两个核心功能：UI 组件样式和本地存储功能。

步骤 1：查看可用的 agent 配置

首先，让我们查看当前有哪些可用的 agent 配置。

/agents

如果你还没有自定义 agent，让我们创建两个专门化的 agent：

创建 .claude/agents/ui-developer.md：

# UI 开发专家

你是一个专注于用户界面开发的工程师。

## 核心职责
- 设计和实现美观的 UI 组件
- 优化用户体验和交互
- 确保响应式设计和跨浏览器兼容性

## 技术栈
- React/Next.js
- Tailwind CSS
- CSS Modules
- Framer Motion（用于动画）

## 工作原则
1. 优先考虑用户体验
2. 代码简洁易读
3. 遵循设计系统
4. 实现无障碍访问

创建 .claude/agents/data-engineer.md：

# 数据工程师

你是一个专注于数据处理和存储的工程师。

## 核心职责
- 设计数据模型和架构
- 实现数据持久化层
- 优化数据读写性能
- 确保数据一致性和完整性

## 技术栈
- localStorage
- IndexedDB
- React Context
- TypeScript

## 工作原则
1. 确保数据安全
2. 优化性能
3. 提供清晰的 API
4. 处理边界情况

步骤 2：创建并行任务

现在我们将创建两个并行任务，分别由不同的 agent 处理。

任务 A：实现番茄钟 UI 组件样式

@ui-developer 我需要为番茄钟应用实现以下 UI 组件：

1. **主计时器组件** (`src/components/Timer.tsx`)
   - 大数字显示剩余时间（25:00 格式）
   - 平滑的倒计时动画
   - 视觉反馈（开始/暂停状态）

2. **控制按钮组件** (`src/components/Controls.tsx`)
   - 开始按钮（绿色主题）
   - 暂停按钮（黄色主题）
   - 重置按钮（红色主题）
   - 悬停和点击动画效果

3. **任务输入组件** (`src/components/TaskInput.tsx`)
   - 任务名称输入框
   - 任务列表显示
   - 添加/删除任务功能

使用 Tailwind CSS 实现响应式设计，确保在移动端和桌面端都有良好的体验。

任务 B：实现 localStorage 数据持久化层

@data-engineer 我需要为番茄钟应用实现完整的数据持久化层：

1. **数据模型定义**
   - PomodoroSession（番茄钟会话）
   - Task（任务）
   - Statistics（统计数据）

2. **localStorage 封装** (`src/lib/storage.ts`)
   - 通用的 CRUD 操作
   - 自动序列化/反序列化
   - 错误处理和日志

3. **React Context** (`src/context/PomodoroContext.tsx`)
   - 管理应用全局状态
   - 提供数据访问接口
   - 自动同步到 localStorage

4. **功能实现**
   - 保存每个番茄钟会话记录
   - 保存任务列表
   - 统计总专注时长
   - 跨会话数据持久化

使用 TypeScript 定义严格类型，确保类型安全。

步骤 3：查看任务状态

启动两个并行任务后，我们可以使用 /tasks 命令查看它们的状态：

/tasks

你应该看到类似这样的输出：

后台任务列表:

[1] 运行中 - "实现番茄钟 UI 组件样式"
     由 agent: ui-developer
     启动于: 2026-05-13 14:30:25
     运行时长: 2m 15s

[2] 运行中 - "实现 localStorage 数据持久化层"
     由 agent: data-engineer
     启动于: 2026-05-13 14:30:30
     运行时长: 2m 10s

步骤 4：等待任务完成

两个 agent 会并行工作，各自专注于自己的任务。根据任务复杂度，这可能需要几分钟时间。

你可以继续使用终端进行其他工作，或者等待任务完成。

定期检查任务状态：

/tasks

当任务完成后，状态会变为"完成"。

步骤 5：在主会话中整合代码

当两个任务都完成后，我们需要在主会话中整合它们的工作成果。

首先，查看生成的文件结构：

ls src/components/
ls src/lib/
ls src/context/

然后，在主会话中创建应用的入口文件：

src/App.tsx：

import React from 'react';
import Timer from './components/Timer';
import Controls from './components/Controls';
import TaskInput from './components/TaskInput';
import { PomodoroProvider } from './context/PomodoroContext';

function App() {
  return (
    <PomodoroProvider>
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="container mx-auto px-4 py-8">
          <h1 className="text-4xl font-bold text-center mb-8 text-indigo-900">
            番茄钟专注助手
          </h1>
          
          <div className="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
            <TaskInput />
            <Timer />
            <Controls />
          </div>
        </div>
      </div>
    </PomodoroProvider>
  );
}

export default App;

步骤 6：验证功能

现在让我们验证应用的功能是否正常工作。

启动开发服务器：

npm run dev

在浏览器中打开应用（通常是 http://localhost:3000）
测试各个功能：
- 输入任务名称并添加到列表
- 点击开始按钮启动计时器
- 观察计时器动画
- 暂停和重置计时器
- 刷新页面，检查数据是否持久化
检查 localStorage：

// 在浏览器控制台中运行
console.log(localStorage.getItem('pomodoro_sessions'));
console.log(localStorage.getItem('tasks'));
console.log(localStorage.getItem('statistics'));

步骤 7：运行测试

如果 agent 们创建了测试文件，运行测试套件：

npm test

或者，如果你想并行运行所有测试：

/bg 运行完整的测试套件并生成覆盖率报告

结果总结

通过这个实际练习，你应该已经掌握了：

如何创建和使用专门化的 agent
如何并行执行多个独立任务
如何使用 /tasks 监视任务状态
如何在主会话中整合多个 agent 的工作成果
如何验证并行开发的成果

本章小结

本章介绍了 Claude Code 的并行工作能力，这是提高开发效率的重要工具。主要内容包括：

三种并行模式：
- Agent 委派：灵活控制子任务
- Background 分离：长时间运行的任务
- Worktree 隔离：独立的版本控制环境
核心命令：
- /agents：管理 agent 配置
- /tasks：查看后台任务状态
- /background：将会话切换到后台
实战经验：
- 创建专门化的 agent 配置
- 并行开发独立功能
- 整合多个 agent 的成果
- 验证和测试并行开发的结果

通过合理使用并行工作模式，你可以显著提高开发效率，特别是在处理复杂项目时。关键在于识别可以并行的任务，选择合适的并行模式，并有效地协调各个并行任务的进度。

在下一章中，我们将学习如何使用技能（Skills）来扩展 Claude Code 的功能，实现更高级的自动化和工作流。

第 7 章：并行工作 — Agent 与任务委派

7.1 为什么需要并行

7.2 /agents — 管理 Agent 配置

命令语法

功能说明

实际使用示例

示例 1：查看所有可用的 agent 配置

示例 2：创建自定义 agent

示例 3：在会话中使用 agent

示例 4：Team 协作模式

注意事项/技巧

7.3 /tasks — 列出后台任务

命令语法

功能说明

实际使用示例

示例 1：列出所有后台任务

示例 2：查看特定任务的输出

示例 3：使用别名

注意事项/技巧

7.4 /background — 会话后台化

命令语法

功能说明

实际使用示例

示例 1：将当前会话后台化

示例 2：后台化并发送最后指令

示例 3：使用别名

示例 4：在命令行监视后台会话

注意事项/技巧

7.5 并行模式详解

Agent 委派模式

Background 分离模式

Worktree 隔离模式

并行模式选择策略

7.6 动手做：并行开发番茄钟

步骤 1：查看可用的 agent 配置

步骤 2：创建并行任务

步骤 3：查看任务状态

步骤 4：等待任务完成

步骤 5：在主会话中整合代码

步骤 6：验证功能

步骤 7：运行测试

结果总结

本章小结

7.2 `/agents` — 管理 Agent 配置

7.3 `/tasks` — 列出后台任务

7.4 `/background` — 会话后台化