Components / Tool & Action States
Image Generation
图像生成状态卡片：点阵画布 + 游走光斑 + shimmer 标签。仅入库不接入，已移植（1:1 aicss.dev）。
① 活体演示
光斑双椭圆 mask morph（4.2s spring 曲线）+ breathe 呼吸。四态：running（动效 + shimmer）/ ok（光斑静止、标签实色）/ error（标签 danger）/ empty。
empty 态：组件不渲染（无图像生成任务）
② 对比台
左：wb-ui 活体（上游演示数据）；右：aicss.dev 原站截图存档（2026-08-13 采集，可滚动）。
wb-ui 活体
aicss.dev 原站截图（design/reference/aicss/image-generation/screenshot.png）
③ 真实字段说明
无真实事件，仅入库不接入（契约 3.C.1 / 要素 4.4）：run event 里没有图像生成类事件（字段真源 packages/contracts/workbench-events.mjs:11-77，ACTIVITY_KIND 无 image 类）。日后可能的数据来源：runner 若透传图像生成工具活动（kind 扩展或专用事件），另立需求接真字段。
| 数据源 | 形态 | 说明 |
|---|---|---|
| （现状） | — | 无图像生成类 run event，不接入 workbench |
| （日后）image 工具活动透传 | prompt + resolution + outcome | 另立需求；本组件 API 已按此形态设计 |
④ 用在 workbench 哪个位置
暂不接入。若日后 runner 透传图像生成活动，候选位置是 nativeStepInner(:7479) 的工具步骤卡新形态；在此之前仅作为库组件存档与展示。
⑤ 复制即用代码
引入 tokens + 组件 CSS/JS。全部相对路径、零依赖。
<link rel="stylesheet" href="design/wb-ui/lib/tokens.css"> <link rel="stylesheet" href="design/wb-ui/lib/components/image-generation.css"> <script src="design/wb-ui/lib/components/image-generation.js"></script>
var h = WbUI.imageGeneration.render(el, {
prompt: "a calm mountain lake at dawn",
resolution: "1024 × 1024"
});
h.set("ok"); // 出图（光斑静止）
h.set("error"); // 生成失败
Ported from aicss.dev/components/image-generation, fetched 2026-08-13. Internal use only（上游无 license 声明，对外使用前须确认授权——docs/86 R1）。