TinyRobot Container构建优雅AI对话容器

TinyRobot Container：构建优雅的 AI 对话容器

构建 AI 对话应用时，容器组件的设计看似简单，实际存在不少难点。它不仅仅是一个“外壳”——需要处理定位布局、全屏切换、响应式适配，还要为对话区域、输入框、操作栏分配恰当的空间。如果手动实现过这些功能，可能会遇到定位错乱、全屏适配困难、输入框挤压消息区域等问题。

TinyRobot 的 TrContainer 组件专门解决这些难题。开箱即用，它提供 AI 对话容器所需的一整套能力：显示/隐藏控制、全屏模式、标题栏自定义、底部输入区固定，以及丰富的 CSS 变量用于样式定制。

基本用法

TrContainer 的核心功能是通过 v-model:show 控制容器的显示与隐藏。该属性为必填项，可在任何页面中轻松切换 AI 对话面板的可见性。

通过 v-model:show 双向绑定，容器的显示状态由数据控制。当用户关闭容器时，可监听 close 事件执行清理逻辑：

全屏模式

AI 对话场景中，侧边栏与全屏模式的切换非常常见——简短对话使用侧边栏即可，深入交流时则需要全屏展示。TrContainer 通过 v-model:fullscreen 提供优雅的切换方案。

全屏模式下，Container 组件会自动添加 fullscreen 类名。利用此选择器可自定义全屏时的内容布局，例如在大屏幕上限制宽度、居中显示，避免文本过长影响阅读体验。

自定义标题与操作区

默认标题栏显示 "OpenTiny NEXT"。通过 title 属性可以修改文字，也可以使用 title 插槽完全自定义标题区域的渲染内容。operations 插槽则允许在标题栏右侧添加操作按钮，例如新建会话、查看历史记录等。

Footer 插槽：搭配 Sender 组件

footer 插槽是搭建完整对话 UI 的关键。它固定在容器底部，适合放置 TrSender 输入组件——无论对话内容滚动多长，输入框始终位于底部，方便用户随时输入。

CSS 变量定制

TrContainer 提供丰富的 CSS 变量，无需修改组件源码即可深度定制容器外观——颜色、尺寸、间距等皆可通过变量调整。

全局变量

:root {
  /* 容器尺寸和边框 */
  --tr-container-width: 600px;
  --tr-container-bg-color: #ffffff;
  --tr-container-border-color: #e5e7eb;
  --tr-container-border-width: 1px;  /* 头部区域 */
  --tr-container-header-padding: 16px 24px;
  --tr-container-header-operations-gap: 4px;  /* 标题样式 */
  --tr-container-title-color: #1f2937;
  --tr-container-title-font-size: 16px;
  --tr-container-title-font-weight: 600;
  --tr-container-title-line-height: 24px;
}

全屏模式变量

全屏模式拥有独立的 CSS 变量，可单独配置全屏时的标题大小、头部内边距等：

:root {
  --tr-container-title-font-size-fullscreen: 20px;
  --tr-container-title-line-height-fullscreen: 28px;
  --tr-container-header-padding-fullscreen: 0 200px 24px;
}

实战：暗色主题定制

:root {
  --tr-container-bg-color: #1a1a2e;
  --tr-container-border-color: #2d2d44;
  --tr-container-title-color: #e0e0ff;
  --tr-container-title-font-size: 18px;
  --tr-container-title-font-weight: 700;
  --tr-container-width: 480px;
}

API 参考

Props

属性	类型	必填	默认值	说明
model:show	boolean	是	-	是否显示容器
model:fullscreen	boolean	否	false	是否全屏模式
title	string	否	'OpenTiny NEXT'	容器标题

Slots

插槽名	说明
default	容器主体内容
title	自定义标题区域内容
operations	标题栏右侧操作区
footer	底部操作栏内容

Events

事件名	参数	说明
close	-	容器关闭时触发

CSS 变量

全局变量（:root）

变量名	说明
--tr-container-bg-color	容器背景色
--tr-container-border-color	容器边框色
--tr-container-border-width	容器边框宽度
--tr-container-header-operations-gap	操作按钮间距
--tr-container-header-padding	头部内边距
--tr-container-title-color	标题文字颜色
--tr-container-title-font-size	标题字体大小
--tr-container-title-font-weight	标题字体粗细
--tr-container-title-line-height	标题行高
--tr-container-width	容器宽度

全屏模式变量

变量名	说明
--tr-container-header-padding-fullscreen	全屏模式头部内边距
--tr-container-title-font-size-fullscreen	全屏模式标题字体大小
--tr-container-title-line-height-fullscreen	全屏模式标题行高