组件 / AI 模式
生成状态
排队、生成、完成、取消和错误状态。
结构
组成部分
- 01AI 标识
- 02主要内容
- 03状态反馈
- 04用户控制
预览
交互调整
强调色使用受限
尚未开始
<GenerationState />外观
视觉样式
- 中性
- 加载
- 完成
- 错误
尺寸
规格
- 小
- 中
- 大
状态
交互状态
内容
使用规则
建议
- 明确标识 AI 参与。
- 提供停止、重试、编辑或撤销。
避免
- 不要用渐变代替状态说明。
- 不要把模型输出表述为确定事实。
Token
组件映射
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
component.aigenerationstate.background.rest生成状态默认背景 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
component.aigenerationstate.background.hover生成状态悬停背景 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
component.aigenerationstate.background.selected生成状态选中背景 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
component.aigenerationstate.text.default生成状态文字 | color | oklch(0.2 0.001 255) | oklch(0.98 0 255) | |
component.aigenerationstate.border.default生成状态边框 | color | oklch(0.82 0.004 255) | oklch(0.47 0.01 255) | |
component.aigenerationstate.radius生成状态圆角 | dimension | 0.625rem | 0.625rem | Aa |
component.aigenerationstate.motion.duration生成状态交互动效 | duration | 120ms | 120ms | Aa |
无障碍
语义与键盘
无障碍
- 生成状态通过 aria-live="polite" 实时区域更新。
- 停止和重试使用明确的动作标签。
键盘
- Tab 到达输入和动作。
- 在多行输入中使用 Ctrl/Command+Enter 提交。
- Escape 关闭临时浮层。
属性与接口
公开接口
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
disabled | boolean | false | 禁用交互。 |
className | string | — | 附加样式类。 |
aria-label | string | — | 无可见标签时提供名称。 |
<GenerationState />