Welcome
展示会话空状态、能力和起始任务。中文惯用名：欢迎页。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.welcome |
| 名称 | Welcome |
| 二级分类 | AI 与会话（ai-chat） |
| 用途 | 展示会话空状态、能力和起始任务 |
| 描述 | 中文惯用名：欢迎页。 |
预览
静态结构：居中 hero（主色大图标 + text-xl 主标题 + muted 副标题）+ 起始任务卡片栅格（grid-cols-1 sm:grid-cols-2，复用 Prompt）；点击卡片经 onSelect 传出 value。
DSL 结构
{
"type": "Welcome",
"props": {
"title": "有什么可以帮你？",
"description": "我可以分析数据、生成报表与起草文案",
"prompts": [
{
"title": "生成月报",
"icon": "chart",
"value": "generate-monthly-report"
},
{
"title": "总结会议纪要",
"icon": "file"
}
]
}
}何时用
何时使用
- 展示会话空状态、能力和起始任务：新会话落地页。
何时不用
- 非会话空状态：使用 Empty / Result。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 默认 | 图标 + 标题 + 副标题 | 通用空状态 |
| 带起始任务 | 2 列 Prompt 栅格 | 引导首次任务 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | 有什么可以帮你？ | 主标题 |
description | string | — | 副标题（能力说明） |
icon | string | 'chat' | 主图标名（Icon 白名单） |
prompts | WelcomePromptItem[] | [] | 起始任务：{ title, description?, icon?, value? } |
onSelect | event | — | 起始任务选择事件（${event}） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 起始任务 2~4 个，选最能体现能力的场景。
正例
- ✓ 新会话页：Welcome + 4 个起始任务，点击即发起首轮提问。
反例
- ✕ 在消息流中间插入 Welcome（仅用于空状态）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。