- 三档等待各有归属:3 秒内 →
loading转圈或不显示;不确定的空窗 → PixelLoader;超过 40 秒且有阶段 → ProgressPanel。 - 文案说在做什么(「正在读取知识库」),不写「加载中」。文案轮换时传
labelKey触发淡入。 - 像素与文字都跟
foreground/subtle,不配色。 prefers-reduced-motion下不动,文案静态显示。
消费者提供:文案、是否计时。
像素加载:3×3 像素网格 + 流光文字 + 计时。用在等待时间不确定的空窗期——用户刚发完消息、模型还没吐第一个 token。计时是关键:长任务时它是唯一能证明「没卡死」的信号。来自智算客户端(移植自 beautifului.dev)。
loading 转圈或不显示;不确定的空窗 → PixelLoader;超过 40 秒且有阶段 → ProgressPanel。labelKey 触发淡入。foreground / subtle,不配色。prefers-reduced-motion 下不动,文案静态显示。消费者提供:文案、是否计时。
import { PixelLoader } from "@wutong/ui";
文案说在做什么,计时证明没卡死
labelKey 变化触发淡入
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
| label | string | — | 在做什么 |
| labelKey | string | number | — | 文案轮换时传,触发淡入 |
| round | boolean | false | 圆点 |
| showElapsed | boolean | true | 计时 |