梧桐设计语言v0.4.1

进度面板ProgressPanel

长任务进度面板(生成应用 2–3 分钟)。超过 40 秒不能用转圈,用户会以为卡死然后刷新,生成被打断。


  • 标题「正在生成「风机巡检记录」」+ 一行预期:「通常需要 2–3 分钟,可以先去忙别的,完成后会通知你」。
  • 分阶段清单,每步一句话说清做了什么(「识别出 9 个字段、3 个流转节点」)。已完成:success 对勾 + 耗时(meta);进行中:三个呼吸点;未开始:subtle 文字与空心圆。
  • 底部左侧「3 / 5」计数,右侧**「转后台」按钮不能省**。
  • 失败时在卡住的那一步下面放 ErrorBlock,精确说卡在哪。
  • 最后一步「启动并冒烟验证」通过才给出访问链接。

消费者提供:标题、阶段列表与各自状态 / 耗时、转后台回调。

示例

import
import { ProgressPanel, type Step } from "@wutong/ui";

生成中

超过 40 秒必须分阶段;「转后台」不能省

正在生成「风机巡检记录」

通常需要 2–3 分钟,可以先去忙别的,完成后会通知你

理解需求
识别出 9 个字段、3 个流转节点
18s
建表与索引
inspection_record 等 3 张表
31s
生成页面与表单
录入页 · 列表页 · 班组看板
进行中
挂载沉淀钩子
关单时追问处理经验
启动并冒烟验证
验证通过才会给出访问链接
2 / 5

某步失败

在卡住的那一步下面放 ErrorBlock,精确说卡在哪

正在生成「风机巡检记录」

理解需求
识别出 9 个字段、3 个流转节点
18s
建表与索引
生成页面与表单
1 / 3

API

属性类型默认说明
title / leadReactNode标题与预期时长提示
stepsStep[]{ name, desc?, state: done|running|todo|failed, time?, error? }
onBackground() => void转后台