开发预览更新于 2026-05-10

PlanCard 计划卡片

多步骤计划卡片，每步带 status (pending / active / done / failed / skipped) + 时长 + 可折叠详情；适合 Agent 行动计划或运维 runbook。

基础用法

steps 数组每项 { id, title, status, description?, duration?, detail? }。active 步骤显示 spinner；done 打勾；failed 显示 ×；skipped 半透明删除线。detail 非空时整个 title 行可点开 / 收起。

背景视口

解析用户请求32 ms
识别意图为「修复 dashboard 加载缓慢」

grep -r "fetchDashboard" packages/web/src
→ 3 matches

分析 P99 trace
正在解析 jaeger 数据，预计 12s
提议修改
运行测试

src/App.vue

<script setup lang="ts">
import { CfPlanCard, type PlanStep } from '@chufix-design/vue';

const steps: PlanStep[] = [
  {
    id: 's1',
    title: '解析用户请求',
    status: 'done',
    duration: 32,
    description: '识别意图为「修复 dashboard 加载缓慢」',
  },
  {
    id: 's2',
    title: '搜索相关代码文件',
    status: 'done',
    duration: 420,
    detail: 'grep -r "fetchDashboard" packages/web/src\n→ 3 matches',
  },
  {
    id: 's3',
    title: '分析 P99 trace',
    status: 'active',
    description: '正在解析 jaeger 数据，预计 12s',
  },
  {
    id: 's4',
    title: '提议修改',
    status: 'pending',
  },
  {
    id: 's5',
    title: '运行测试',
    status: 'pending',
  },
];
</script>
<template>
  <CfPlanCard title="oncall · dashboard 加载缓慢" :steps="steps" :initial-open-ids="['s2']" />
</template>

<script setup>
import { CfPlanCard } from '@chufix-design/vue';

const steps= [
  {
    id: 's1',
    title: '解析用户请求',
    status: 'done',
    duration: 32,
    description: '识别意图为「修复 dashboard 加载缓慢」',
  },
  {
    id: 's2',
    title: '搜索相关代码文件',
    status: 'done',
    duration: 420,
    detail: 'grep -r "fetchDashboard" packages/web/src\n→ 3 matches',
  },
  {
    id: 's3',
    title: '分析 P99 trace',
    status: 'active',
    description: '正在解析 jaeger 数据，预计 12s',
  },
  {
    id: 's4',
    title: '提议修改',
    status: 'pending',
  },
  {
    id: 's5',
    title: '运行测试',
    status: 'pending',
  },
];
</script>
<template>
  <CfPlanCard title="oncall · dashboard 加载缓慢" :steps="steps" :initial-open-ids="['s2']" />
</template>

import { CfPlanCard } from '@chufix-design/react';

export default function Demo() {
  const steps: PlanStep[] = [
    {
      id: 's1',
      title: '解析用户请求',
      status: 'done',
      duration: 32,
      description: '识别意图为「修复 dashboard 加载缓慢」',
    },
    {
      id: 's2',
      title: '搜索相关代码文件',
      status: 'done',
      duration: 420,
      detail: 'grep -r "fetchDashboard" packages/web/src\n→ 3 matches',
    },
    {
      id: 's3',
      title: '分析 P99 trace',
      status: 'active',
      description: '正在解析 jaeger 数据，预计 12s',
    },
    {
      id: 's4',
      title: '提议修改',
      status: 'pending',
    },
    {
      id: 's5',
      title: '运行测试',
      status: 'pending',
    },
  ];
  return (
    <>
      <CfPlanCard title="oncall · dashboard 加载缓慢" steps={steps} initialOpenIds={['s2']} />
    </>
  );
}

import { CfPlanCard } from '@chufix-design/react';

export default function Demo() {
  const steps= [
    {
      id: 's1',
      title: '解析用户请求',
      status: 'done',
      duration: 32,
      description: '识别意图为「修复 dashboard 加载缓慢」',
    },
    {
      id: 's2',
      title: '搜索相关代码文件',
      status: 'done',
      duration: 420,
      detail: 'grep -r "fetchDashboard" packages/web/src\n→ 3 matches',
    },
    {
      id: 's3',
      title: '分析 P99 trace',
      status: 'active',
      description: '正在解析 jaeger 数据，预计 12s',
    },
    {
      id: 's4',
      title: '提议修改',
      status: 'pending',
    },
    {
      id: 's5',
      title: '运行测试',
      status: 'pending',
    },
  ];
  return (
    <>
      <CfPlanCard title="oncall · dashboard 加载缓慢" steps={steps} initialOpenIds={['s2']} />
    </>
  );
}

API

属性	类型	默认	说明
`title`	`string`	—	卡片标题
`steps`	`PlanStep[]`	—	步骤数组
`initialOpenIds`	`string[]`	`[]`	初始展开的 step id 集合

PlanStep

字段	类型	说明
`id`	`string`	唯一
`title`	`string`	步骤标题
`description`	`string`	副标题文字
`status`	`'pending' \| 'active' \| 'done' \| 'failed' \| 'skipped'`
`duration`	`number`	耗时 ms
`detail`	`string`	折叠详情（mono 字体展示）