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

Slots

Events

CSS 变量

全局变量（:root）

全屏模式变量