add vitepress docs

2026-09-21 16:05:14 +08:00
parent b435bf992e
commit 37cf38fe27
73 changed files with 7003 additions and 802 deletions
@@ -0,0 +1,42 @@
+# AI 对话
+
+把对话面板嵌进带标题栏的页面骨架，并自定义欢迎语与角色名。
+
+## 组合演示
+
+:::preview 完整对话 || 回答由本地假流逐块吐出，可随时点「停止」或用「清空」重开
+
+demo-preview=../demos/scenarios/ai.vue
+
+:::
+
+## 这个场景覆盖了什么
+
+- **会话接线**：`useAiChat` 提供 `messages` 与生成状态，面板只负责渲染
+- **页面骨架**：标题栏与面板组合成完整页面，`清空` 调用 `resetConversation`
+- **自定义文案**：`roleNames` 把「助手」换成「分析助手」，`welcome` 插槽替换空态
+- **流式呈现**：思考过程、工具状态、回答与引用按事件依次出现
+
+## 换成真实后端
+
+示例里的 `request` 返回的是本地构造的假流。接真实接口时只要返回一个 SSE 流式的 `Response` 即可，其余不用改：
+
+```ts
+const chat = useAiChat({
+	request: ({ message, signal }) => fetch("/api/chat", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ message }),
+		signal
+	})
+});
+```
+
+事件名与载荷字段见 [AiChatPanel](/components/ai-chat-panel) 的协议表；后端用的是另一套事件名时，用 `parseEvent` 转换。
+
+## 相关组件
+
+- [AiChatPanel](/components/ai-chat-panel)
+- [AiChatMessageList](/components/ai-chat-message-list)
+- [AiChatComposer](/components/ai-chat-composer)
+- [AiChatThinking](/components/ai-chat-thinking)