用TinyRobot组件打造AI助手贴心欢迎页

用 TinyRobot Welcome 组件打造贴心的 AI 助手欢迎页

你是否想过，当用户第一次打开你的 AI 助手时，看到的不是空荡荡的输入框，而是一张充满温度、具有明确引导的欢迎页？那种“空白画布焦虑”真实存在——用户往往不知从何问起、能问什么，很可能就在沉默中悄然流失。简单来说，第一印象就是用户体验的起跑线，而一个精心设计的欢迎页面能够有效消除这种困惑。

一张设计得当的欢迎页，能瞬间拉近用户与 AI 之间的距离：一句温暖的问候让人感受到被关注，一段清晰的功能描述有助于明确能力边界，一组引导性提示词则打消“不知从何问起”的顾虑。TinyRobot 的 TrWelcome 组件正是为此而生——它提供了标题、描述、图标、对齐方式和底部扩展插槽，帮助开发者快速组装出专业又贴心的 AI 助手欢迎页。

基本用法

TrWelcome 的核心逻辑其实非常简洁：通过 title 和 description 两个必填属性，分别设置欢迎标题和功能描述。

 复制代码

只需填写两行属性，一个居中对齐、带默认图标的欢迎页就呈现在眼前。标题突出、描述清晰，用户一眼就能理解这个 AI 助手的核心用途。

对齐方向

容器布局不同，对齐方式也需要相应调整。侧边栏对话面板中，内容左对齐更自然；居中弹窗里，居中对齐更协调。TrWelcome 的 align 属性支持三种对齐模式，能够覆盖绝大多数应用场景。

 复制代码

align 接受 'left'、'center'、'right' 三种值，默认为 'center'。在实际的 AI 对话界面中，居中对齐是最常见的对称布局搭配。

自定义图标

默认图标虽简洁，但品牌特色往往藏在细节中。icon 属性接受 VNode 类型，你可以传入任意 Vue 组件或 JSX，将欢迎图标打造成品牌专属的模样。

 复制代码

你可以使用 @opentiny/tiny-robot-svgs 中现成的图标，也可以自行传入任何 SVG 组件，甚至通过 h() 函数创建内联元素——例如使用 emoji 或自定义渐变背景：

 复制代码

Footer 插槽：搭配 Prompts 组件

这是 TrWelcome 最实用的特性——footer 插槽允许你在欢迎信息下方添加引导性提示词。配合 TrPrompts 组件，用户只需一键点击即可开启对话，彻底告别“不知从何问起”的尴尬。

 复制代码

用户只需轻点提示卡片，就能直接开始对话，完全无需在空白输入框前犹豫。TrPrompts 还提供了 vertical（纵向排列）、wrap（自动换行）、size（尺寸调整）等属性，可以根据容器空间灵活调整布局。

综合实战：搭配 Container 构建完整对话布局

TrWelcome 最常见的应用场景是作为对话容器的初始状态——对话开始前显示欢迎页，用户发送第一条消息后切换为对话列表。结合 TrContainer，你可以在几分钟内搭建出一个完整的 AI 对话界面。

 复制代码

这个示例展示的架构非常清晰：

1. 初始状态：TrWelcome + TrPrompts 构建欢迎引导页，用户点击提示词即可快速开始对话
2. 对话状态：自动切换为消息列表，展示用户与 AI 的对话内容
3. 输入区域：TrSender 固定在容器底部，始终保持可操作状态
4. 全屏适配：通过 fullscreen 类名控制大屏下的内容宽度

API 参考

Props

Slots