import{_ as i,o as a,c as t,a4 as e}from"./chunks/framework.Cre9sSJa.js";const n="/__DOCS_BASE__/images/guide/migration-three-layers.png",c=JSON.parse('{"title":"从 v1.x 迁移到 v2.0","description":"","frontmatter":{},"headers":[],"relativePath":"guide/migration-2.0.md","filePath":"guide/migration-2.0.md"}'),h={name:"guide/migration-2.0.md"};function l(p,s,k,d,r,o){return a(),t("div",null,[...s[0]||(s[0]=[e('<h1 id="从-v1-x-迁移到-v2-0" tabindex="-1">从 v1.x 迁移到 v2.0 <a class="header-anchor" href="#从-v1-x-迁移到-v2-0" aria-label="Permalink to &quot;从 v1.x 迁移到 v2.0&quot;">​</a></h1><p>本指南帮助你将项目从 AI 小鲸 v1.x 升级到 v2.0。v2.0 是一次重大架构升级，但我们尽可能保持了 API 的兼容性，大多数项目可以在 1-2 小时内完成迁移。</p><h2 id="架构变化概述" tabindex="-1">架构变化概述 <a class="header-anchor" href="#架构变化概述" aria-label="Permalink to &quot;架构变化概述&quot;">​</a></h2><table tabindex="0"><thead><tr><th>维度</th><th>v1.x</th><th>v2.0</th></tr></thead><tbody><tr><td>架构</td><td>单体组件，所有功能耦合在一起</td><td>三层模块化架构</td></tr><tr><td>包结构</td><td>单一包</td><td><code>ai-blueking</code> + <code>chat-x</code> + <code>chat-helper</code></td></tr><tr><td>组件</td><td>仅导出一个默认组件</td><td>导出 <code>AIBlueking</code> + <code>ChatBot</code> 两个组件</td></tr><tr><td>状态管理</td><td>组件内部状态</td><td>Manager 模式 + 响应式模块</td></tr><tr><td>事件系统</td><td>直接 Vue emit</td><td>双层事件架构（内部事件 + Vue emit）</td></tr><tr><td>可扩展性</td><td>有限，需要 fork 修改</td><td>高度可扩展，支持自定义 Manager</td></tr></tbody></table><h3 id="三层架构说明" tabindex="-1">三层架构说明 <a class="header-anchor" href="#三层架构说明" aria-label="Permalink to &quot;三层架构说明&quot;">​</a></h3><p><img src="'+n+`" alt="三层架构说明"></p><h2 id="破坏性变更总览" tabindex="-1">破坏性变更总览 <a class="header-anchor" href="#破坏性变更总览" aria-label="Permalink to &quot;破坏性变更总览&quot;">​</a></h2><ul><li><strong>导入方式</strong>改为具名导入</li><li><strong>多个属性</strong>重命名或迁移到不同组件</li><li><strong>事件名称</strong>统一规范化</li><li><strong>方法名称</strong>更加语义化</li><li><strong>请求配置</strong>统一到 <code>requestOptions</code></li></ul><h2 id="导入变更" tabindex="-1">导入变更 <a class="header-anchor" href="#导入变更" aria-label="Permalink to &quot;导入变更&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ❌ v1.x - 默认导入</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> AIBlueking </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ v2.0 - 具名导入</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBlueking, ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="新增的独立导入" tabindex="-1">新增的独立导入 <a class="header-anchor" href="#新增的独立导入" aria-label="Permalink to &quot;新增的独立导入&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 如果只需要核心对话组件（不需要窗口管理）</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 如果需要底层数据管理能力</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatHelper } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 如果需要初始化生命周期管理</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatBootstrap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="属性映射" tabindex="-1">属性映射 <a class="header-anchor" href="#属性映射" aria-label="Permalink to &quot;属性映射&quot;">​</a></h2><p>以下是 v1.x 到 v2.0 的属性映射表：</p><table tabindex="0"><thead><tr><th>v1.x 属性</th><th>v2.0 位置</th><th>说明</th></tr></thead><tbody><tr><td><code>agentUrl</code></td><td><code>ChatBot: url</code> / <code>AIBlueking: url</code></td><td>重命名为 <code>url</code></td></tr><tr><td><code>headConfig</code></td><td><code>AIBlueking: hideHeader</code></td><td>改为布尔值控制，<code>true</code> 隐藏头部</td></tr><tr><td><code>sessionConfig</code></td><td><code>AIBlueking: enableChatSession</code></td><td>简化为布尔值，<code>true</code> 启用多会话</td></tr><tr><td><code>shortcutList</code></td><td><code>ChatBot/AIBlueking: shortcuts</code></td><td>重命名为 <code>shortcuts</code></td></tr><tr><td><code>promptList</code></td><td><code>ChatBot/AIBlueking: prompts</code></td><td>重命名为 <code>prompts</code></td></tr><tr><td><code>welcomeContent</code></td><td><code>ChatBot/AIBlueking: helloText</code></td><td>重命名为 <code>helloText</code></td></tr><tr><td><code>customRequestHeaders</code></td><td><code>requestOptions.headers</code></td><td>统一到 <code>requestOptions</code> 对象</td></tr><tr><td><code>customRequestData</code></td><td><code>requestOptions.data</code></td><td>统一到 <code>requestOptions</code> 对象</td></tr></tbody></table><h3 id="属性迁移示例" tabindex="-1">属性迁移示例 <a class="header-anchor" href="#属性迁移示例" aria-label="Permalink to &quot;属性迁移示例&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- ❌ v1.x --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">AIBlueking</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  agent-url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/api/agent/chat&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head-config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;AI 助手&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, showClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">session-config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ enable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, maxCount: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shortcut-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">shortcuts</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">prompt-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prompts</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  welcome-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;你好！我是 AI 助手&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">custom-request-headers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ Authorization: token }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">custom-request-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ app_id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!-- ✅ v2.0 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;AIBlueking</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  url=&quot;/api/agent/chat&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :hide-header=&quot;false&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :enable-chat-session=&quot;true&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :shortcuts=&quot;shortcuts&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :prompts=&quot;prompts&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  hello-text=&quot;你好！我是 AI 助手&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :request-options=&quot;{</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    headers: () =&gt; ({ Authorization: token }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    data: () =&gt; ({ app_id: &#39;app&#39; }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="事件映射" tabindex="-1">事件映射 <a class="header-anchor" href="#事件映射" aria-label="Permalink to &quot;事件映射&quot;">​</a></h2><table tabindex="0"><thead><tr><th>v1.x 事件</th><th>v2.0 事件</th><th>说明</th></tr></thead><tbody><tr><td><code>message-send</code></td><td><code>send-message</code></td><td>重命名，动词前置</td></tr><tr><td><code>stream-start</code></td><td><code>receive-start</code></td><td>重命名，语义更清晰</td></tr><tr><td><code>stream-end</code></td><td><code>receive-end</code></td><td>重命名，语义更清晰</td></tr></tbody></table><h3 id="事件迁移示例" tabindex="-1">事件迁移示例 <a class="header-anchor" href="#事件迁移示例" aria-label="Permalink to &quot;事件迁移示例&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- ❌ v1.x --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">AIBlueking</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">message-send</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onMessageSend</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stream-start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onStreamStart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stream-end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onStreamEnd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!-- ✅ v2.0 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;AIBlueking</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @send-message=&quot;onSendMessage&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @receive-start=&quot;onReceiveStart&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @receive-end=&quot;onReceiveEnd&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="方法映射" tabindex="-1">方法映射 <a class="header-anchor" href="#方法映射" aria-label="Permalink to &quot;方法映射&quot;">​</a></h2><table tabindex="0"><thead><tr><th>v1.x 方法</th><th>v2.0 方法</th><th>说明</th></tr></thead><tbody><tr><td><code>send(text)</code></td><td><code>sendMessage(text)</code></td><td>重命名，更具语义</td></tr><tr><td><code>stop()</code></td><td><code>stopGeneration()</code></td><td>重命名，明确停止的是生成过程</td></tr><tr><td><code>showPanel()</code></td><td><code>show()</code></td><td>简化命名</td></tr><tr><td><code>hidePanel()</code></td><td><code>hide()</code></td><td>简化命名</td></tr></tbody></table><h3 id="方法迁移示例" tabindex="-1">方法迁移示例 <a class="header-anchor" href="#方法迁移示例" aria-label="Permalink to &quot;方法迁移示例&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ❌ v1.x</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">send</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;你好&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hidePanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ v2.0</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// AIBlueking</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiBluekingRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;你好&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiBluekingRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">aiBluekingRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ChatBot</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatBotRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;你好&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatBotRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stopGeneration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h2 id="v2-0-新功能" tabindex="-1">v2.0 新功能 <a class="header-anchor" href="#v2-0-新功能" aria-label="Permalink to &quot;v2.0 新功能&quot;">​</a></h2><p>以下是 v2.0 中新增的能力，在 v1.x 中不可用：</p><h3 id="_1-独立-chatbot-组件" tabindex="-1">1. 独立 ChatBot 组件 <a class="header-anchor" href="#_1-独立-chatbot-组件" aria-label="Permalink to &quot;1. 独立 ChatBot 组件&quot;">​</a></h3><p>v2.0 新增了 <code>ChatBot</code> 组件，可以脱离窗口管理独立使用，适合嵌入到自定义布局中：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;my-custom-layout&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Sidebar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/api/agent/chat&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;chat-area&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="_2-manager-模式" tabindex="-1">2. Manager 模式 <a class="header-anchor" href="#_2-manager-模式" aria-label="Permalink to &quot;2. Manager 模式&quot;">​</a></h3><p>通过 Manager 模式，你可以扩展和自定义业务逻辑，而无需修改组件源码。详见 <a href="./internals/manager-pattern.html">Manager 模式</a>。</p><h3 id="_3-消息属性系统" tabindex="-1">3. 消息属性系统 <a class="header-anchor" href="#_3-消息属性系统" aria-label="Permalink to &quot;3. 消息属性系统&quot;">​</a></h3><p>结构化的消息元数据支持，允许传递引用内容、快捷指令参数等。详见 <a href="./internals/message-property.html">消息属性系统</a>。</p><h3 id="_4-编程式控制" tabindex="-1">4. 编程式控制 <a class="header-anchor" href="#_4-编程式控制" aria-label="Permalink to &quot;4. 编程式控制&quot;">​</a></h3><p>更丰富的模板引用 API，支持外部精确控制组件行为。详见 <a href="./advanced-usage/programmatic-control.html">编程式控制</a>。</p><h3 id="_5-事件桥接" tabindex="-1">5. 事件桥接 <a class="header-anchor" href="#_5-事件桥接" aria-label="Permalink to &quot;5. 事件桥接&quot;">​</a></h3><p>双层事件架构，内部事件和 Vue 事件自动桥接。详见 <a href="./internals/event-system.html">事件系统</a>。</p><h3 id="_6-初始化生命周期管理" tabindex="-1">6. 初始化生命周期管理 <a class="header-anchor" href="#_6-初始化生命周期管理" aria-label="Permalink to &quot;6. 初始化生命周期管理&quot;">​</a></h3><p>状态机驱动的初始化流程，提供精细的生命周期控制。详见 <a href="./internals/chat-bootstrap.html">初始化生命周期</a>。</p><h3 id="_7-请求拦截器" tabindex="-1">7. 请求拦截器 <a class="header-anchor" href="#_7-请求拦截器" aria-label="Permalink to &quot;7. 请求拦截器&quot;">​</a></h3><p>请求和响应拦截器，用于统一的认证、日志、错误处理。详见 <a href="./advanced-usage/custom-requests.html">自定义请求</a>。</p><h2 id="逐步迁移清单" tabindex="-1">逐步迁移清单 <a class="header-anchor" href="#逐步迁移清单" aria-label="Permalink to &quot;逐步迁移清单&quot;">​</a></h2><p>按照以下步骤有序完成迁移：</p><h3 id="第一步-更新依赖" tabindex="-1">第一步：更新依赖 <a class="header-anchor" href="#第一步-更新依赖" aria-label="Permalink to &quot;第一步：更新依赖&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 更新到最新版本</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @blueking/ai-blueking@latest</span></span></code></pre></div><h3 id="第二步-修改导入语句" tabindex="-1">第二步：修改导入语句 <a class="header-anchor" href="#第二步-修改导入语句" aria-label="Permalink to &quot;第二步：修改导入语句&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 将所有默认导入改为具名导入</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Before: import AIBlueking from &#39;@blueking/ai-blueking&#39;;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// After:</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBlueking } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="第三步-更新属性名" tabindex="-1">第三步：更新属性名 <a class="header-anchor" href="#第三步-更新属性名" aria-label="Permalink to &quot;第三步：更新属性名&quot;">​</a></h3><p>按照上方的属性映射表，逐一修改组件属性：</p><ul><li>[ ] <code>agentUrl</code> → <code>url</code></li><li>[ ] <code>headConfig</code> → <code>hideHeader</code></li><li>[ ] <code>sessionConfig</code> → <code>enableChatSession</code></li><li>[ ] <code>shortcutList</code> → <code>shortcuts</code></li><li>[ ] <code>promptList</code> → <code>prompts</code></li><li>[ ] <code>welcomeContent</code> → <code>helloText</code></li><li>[ ] <code>customRequestHeaders</code> + <code>customRequestData</code> → <code>requestOptions</code></li></ul><h3 id="第四步-更新事件名" tabindex="-1">第四步：更新事件名 <a class="header-anchor" href="#第四步-更新事件名" aria-label="Permalink to &quot;第四步：更新事件名&quot;">​</a></h3><ul><li>[ ] <code>message-send</code> → <code>send-message</code></li><li>[ ] <code>stream-start</code> → <code>receive-start</code></li><li>[ ] <code>stream-end</code> → <code>receive-end</code></li></ul><h3 id="第五步-更新方法调用" tabindex="-1">第五步：更新方法调用 <a class="header-anchor" href="#第五步-更新方法调用" aria-label="Permalink to &quot;第五步：更新方法调用&quot;">​</a></h3><ul><li>[ ] <code>send()</code> → <code>sendMessage()</code></li><li>[ ] <code>stop()</code> → <code>stopGeneration()</code></li><li>[ ] <code>showPanel()</code> → <code>show()</code></li><li>[ ] <code>hidePanel()</code> → <code>hide()</code></li></ul><h3 id="第六步-更新-typescript-类型-如适用" tabindex="-1">第六步：更新 TypeScript 类型（如适用） <a class="header-anchor" href="#第六步-更新-typescript-类型-如适用" aria-label="Permalink to &quot;第六步：更新 TypeScript 类型（如适用）&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ❌ v1.x 类型</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBluekingInstance } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ v2.0 类型</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBluekingExpose, ChatBotExpose } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="第七步-测试验证" tabindex="-1">第七步：测试验证 <a class="header-anchor" href="#第七步-测试验证" aria-label="Permalink to &quot;第七步：测试验证&quot;">​</a></h3><ul><li>[ ] 组件正常渲染</li><li>[ ] 消息发送和接收正常</li><li>[ ] 会话管理正常（如启用）</li><li>[ ] 快捷指令正常（如使用）</li><li>[ ] 自定义请求头/数据正常传递</li><li>[ ] 事件回调正常触发</li><li>[ ] 编程式方法调用正常</li></ul><h2 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor" href="#常见问题" aria-label="Permalink to &quot;常见问题&quot;">​</a></h2><h3 id="_1-导入报错-找不到默认导出" tabindex="-1">1. 导入报错：找不到默认导出 <a class="header-anchor" href="#_1-导入报错-找不到默认导出" aria-label="Permalink to &quot;1. 导入报错：找不到默认导出&quot;">​</a></h3><p><strong>问题</strong>：<code>Module has no default export</code></p><p><strong>原因</strong>：v2.0 移除了默认导出，改为具名导出</p><p><strong>解决</strong>：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Before</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> AIBlueking </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// After</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBlueking } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="_2-requestoptions-中-headers-不生效" tabindex="-1">2. requestOptions 中 headers 不生效 <a class="header-anchor" href="#_2-requestoptions-中-headers-不生效" aria-label="Permalink to &quot;2. requestOptions 中 headers 不生效&quot;">​</a></h3><p><strong>问题</strong>：自定义请求头未被发送</p><p><strong>原因</strong>：v2.0 中 <code>headers</code> 必须是<strong>函数</strong>而非静态对象</p><p><strong>解决</strong>：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ❌ 错误：静态对象</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> requestOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  headers: { Authorization: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Bearer \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ 正确：返回对象的函数</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> requestOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  headers</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ Authorization: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Bearer \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><h3 id="_3-事件处理器未触发" tabindex="-1">3. 事件处理器未触发 <a class="header-anchor" href="#_3-事件处理器未触发" aria-label="Permalink to &quot;3. 事件处理器未触发&quot;">​</a></h3><p><strong>问题</strong>：之前的事件监听不再触发</p><p><strong>原因</strong>：事件名已更改</p><p><strong>解决</strong>：检查事件映射表，更新事件名。特别注意 <code>message-send</code> → <code>send-message</code> 的顺序变化。</p><h3 id="_4-headconfig-复杂配置如何迁移" tabindex="-1">4. headConfig 复杂配置如何迁移 <a class="header-anchor" href="#_4-headconfig-复杂配置如何迁移" aria-label="Permalink to &quot;4. headConfig 复杂配置如何迁移&quot;">​</a></h3><p><strong>问题</strong>：v1.x 的 <code>headConfig</code> 支持 title、showClose 等多个配置项</p><p><strong>解决</strong>：v2.0 中头部配置被简化，<code>hideHeader</code> 控制显隐，标题等信息从 Agent 配置自动获取。如需更多自定义，可使用插槽（slot）。</p><h3 id="_5-同时使用-aiblueking-和-chatbot" tabindex="-1">5. 同时使用 AIBlueking 和 ChatBot <a class="header-anchor" href="#_5-同时使用-aiblueking-和-chatbot" aria-label="Permalink to &quot;5. 同时使用 AIBlueking 和 ChatBot&quot;">​</a></h3><p><strong>问题</strong>：不确定应该使用哪个组件</p><p><strong>解决</strong>：</p><ul><li><strong>AIBlueking</strong>：带窗口管理（拖拽、缩放、显隐），适合作为浮窗助手</li><li><strong>ChatBot</strong>：纯对话组件，适合嵌入到自定义布局中</li></ul><p>两者可以在同一个项目中共存，但通常只需选择其一。</p>`,82)])])}const g=i(h,[["render",l]]);export{c as __pageData,g as default};
