TinyRobot 入门常见错误全攻略

说实话，刚玩 TinyRobot 那会儿，我也踩了不少坑。

别慌，咱们慢慢聊，保证你少走弯路。

先把样式文件给引进来。

没有它，组件只剩骨架，像个光秃秃的盒子。

我当时就是这样，页面白白的。

记得在入口文件里写：

import '@opentiny/tiny-robot/dist/style.css'

别忘了这句，一行代码救命。

TinyRobot 所有 UI 组件dou有 Tr 前缀。

比如聊天气泡是 。

我曾经直接写成 ，结果报错 “Component Bubble is not resolved”。

记住：模板里小写连字符+Tr 前缀；脚本里大驼峰+Tr 前缀。

用主题切换必须把所有 Tr 组件包在 ThemeProvider 里。

我有一次把它放在根节点外面useTheme 直接返回 false，真是尴尬。

正确姿势：

SSE 数据是纯文本流，不Neng直接用 .json。

要用官方提供的 sseStreamToGenerator 把 Response 转成 AsyncGenerator。

import { sseStreamToGenerator } from '@opentiny/tiny-robot-kit'
async function responseProvider {
    const resp = await fetch('/api/chat', {
        method: 'POST',
        body: JSON.stringify,
        signal
    })
    return sseStreamToGenerator
}

TinyRobot 默认用 LocalStorage 存对话。

AFAIK 浏览器一般只Neng存几 MB，一旦对话多了就会报 “Quota exceeded”。

解决办法：换成 IndexedDB 或自定义持久化方案。

CJK 输入法里按 Enter 会选词，Ru果你自己绑了键盘事件，Enter 就会直接触发发送。

TinyRobot Yi经内置 IME 保护，你只要让它自己处理就行啦。

SSE 弹窗、DropdownMenu dou是通过 Teleport 挂到 body 的。

If you run inside Shadow DOM, those layers will escape your shadow root.

Aha，这时候要给组件加上 :append-to="shadowHost" 把层挂回去。

问：我的 TinyRobot 项目部署好后百度搜索根本搜不到啊？

答：

检查 robots.txt 有没有阻止爬虫抓取。别忘了把 User-agent: *

META 标签里Ru果有 , 百度自然不收录。

Spa 单页应用需要服务端渲染或预渲染，否则爬虫只Nengkan到空白页。Ke以考虑使用 Vite SSR 或者 prerender 插件生成静态快照。

PWA 的 manifest.json Ru果配置错误，也会影响索引。确保站点Neng正常返回 HTML 主体才行。

const { messages, sendMessage } = useMessage({
    responseProvider // Yi经实现的函数
})

useMessage // ❌ client Yi废弃