AgentPlan
agent-plan执行计划 · 数据驱动任务清单 + 状态图标(空心环待办/Spinner进行·行高亮/Check完成删除线/X失败) + 每步右侧 meta 槽(耗时) + bare 内嵌 · 复用 Spinner·纯皮肤RSC
用法
基础用法
数据驱动的任务清单，混合状态 + running 行自动高亮。
执行计划
- 读取现有 page.tsx确认仅用了 Button / ThemeToggler
- 核对库内可复用原语
- 逐块替换为 @hulianui/ui排版 → Heading/Text，布局 → Stack
- 补缺口组件（Dot / AI 套件）
- 截图验证明暗双主题
tsx
<AgentPlan
tasks={[
{ title: "读取现有 page.tsx", status: "done", detail: "确认仅用了 Button / ThemeToggler" },
{ title: "核对库内可复用原语", status: "done" },
{ title: "逐块替换为 @hulianui/ui", status: "running", detail: "排版 → Heading/Text" },
{ title: "补缺口组件", status: "pending" },
]}
/>含失败步骤
error 状态显示红叉，自定义 title。
部署流程
- 构建
- 推送镜像registry 超时
- 滚动发布
tsx
<AgentPlan
title="部署流程"
tasks={[
{ title: "构建", status: "done" },
{ title: "推送镜像", status: "error", detail: "registry 超时" },
{ title: "滚动发布", status: "pending" },
]}
/>执行日志（保留实色）
strikeDone={false} 让已完成项不加删除线，配合 meta 显示耗时。
执行日志
- 拉取代码120ms
- 运行测试2.4s
- 生成产物
tsx
<AgentPlan
title="执行日志"
strikeDone={false}
tasks={[
{ title: "拉取代码", status: "done", meta: "120ms" },
{ title: "运行测试", status: "done", meta: "2.4s" },
{ title: "生成产物", status: "running" },
]}
/>内嵌（bare）
bare 去掉外层边框/底色，供卡片内复用。
- 读取现有 page.tsx确认仅用了 Button / ThemeToggler
- 核对库内可复用原语
- 逐块替换为 @hulianui/ui排版 → Heading/Text，布局 → Stack
- 补缺口组件（Dot / AI 套件）
- 截图验证明暗双主题
tsx
<AgentPlan bare title={null} tasks={tasks} />何时用
数据驱动地展示 agent 的多步任务清单（每步带状态、描述、耗时）。单次工具调用用 ToolCall，自由文本推理用 ThinkingBlock；这里是结构化的步骤进度。
导入
ts
import { AgentPlan } from "@hulianui/ui"Props
AgentPlanProps：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tasks * | AgentTask[] | — | 任务清单（数据驱动） |
| bare | boolean | false | 去掉外层边框/底色/内边距，仅渲染列表，供内嵌复用（如 TaskRunner） |
| strikeDone | boolean | true | done 任务是否加删除线：计划清单语义=true；执行日志语义=false 保留实色 |
| className | string | — | 容器类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title | ReactNode | 头部标题（默认 "执行计划"）；传 null 隐藏 |
AgentTask：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| title | ReactNode | — | 任务标题 |
| status | "pending" ｜ "running" ｜ "done" ｜ "error" | "pending" | pending 待办(空心环) / running 进行中(转圈·行高亮) / done 完成(勾·删除线) / error 失败(叉) |
| detail | ReactNode | — | 次要描述（标题下方弱化） |
| meta | ReactNode | — | 行右侧 trailing 槽（右对齐弱化）：放耗时(如 180ms)/小标记 |
禁忌 / 坑
tasks是必填的纯数据数组，组件本身不维护状态——进度推进靠消费侧更新数组重渲染。- 内嵌到别的卡片（如 TaskRunner）里时传
bare去掉外层边框底色；执行日志语义下传strikeDone={false}避免完成项加删除线。
相关
ThinkingBlock · ToolCall · Dossier · Artifact · ConfirmCard · ThreadList