梧桐设计语言v0.4.1

像素加载PixelLoader

像素加载:3×3 像素网格 + 流光文字 + 计时。用在等待时间不确定的空窗期——用户刚发完消息、模型还没吐第一个 token。计时是关键:长任务时它是唯一能证明「没卡死」的信号。来自智算客户端(移植自 beautifului.dev)。


  • 三档等待各有归属:3 秒内 → loading 转圈或不显示;不确定的空窗 → PixelLoader;超过 40 秒且有阶段 → ProgressPanel。
  • 文案说在做什么(「正在读取知识库」),不写「加载中」。文案轮换时传 labelKey 触发淡入。
  • 像素与文字都跟 foreground / subtle,不配色。
  • prefers-reduced-motion 下不动,文案静态显示。

消费者提供:文案、是否计时。

示例

import
import { PixelLoader } from "@wutong/ui";

空窗期

文案说在做什么,计时证明没卡死

正在读取知识库0.0s
正在生成

文案轮换

labelKey 变化触发淡入

理解需求0.0s

API

属性类型默认说明
labelstring在做什么
labelKeystring | number文案轮换时传,触发淡入
roundbooleanfalse圆点
showElapsedbooleantrue计时