import{_ as i,o as a,c as n,a4 as t}from"./chunks/framework.Cre9sSJa.js";const o=JSON.parse('{"title":"Standalone 非 Vue 宿主集成","description":"","frontmatter":{},"headers":[],"relativePath":"guide/integration-modes/standalone-bundle.md","filePath":"guide/integration-modes/standalone-bundle.md"}'),e={name:"guide/integration-modes/standalone-bundle.md"};function l(h,s,p,k,d,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`<h1 id="standalone-非-vue-宿主集成" tabindex="-1">Standalone 非 Vue 宿主集成 <a class="header-anchor" href="#standalone-非-vue-宿主集成" aria-label="Permalink to &quot;Standalone 非 Vue 宿主集成&quot;">​</a></h1><blockquote><p><strong>自 v2.1.4-beta.8 起</strong>，<code>@blueking/ai-blueking</code> 提供 <strong><code>/standalone</code></strong> 子入口：将 <strong>Vue 3 runtime</strong> 与 <strong>chat-x</strong> 等依赖打入同一 bundle，供 <strong>React、Angular、jQuery、纯 HTML</strong> 等非 Vue 页面通过 <code>mountAIBlueking</code> / <code>mountChatBot</code> 挂载小鲸，无需在宿主安装 Vue。</p></blockquote><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>说明</th></tr></thead><tbody><tr><td>遗留系统 / 多技术栈页面</td><td>主应用不是 Vue，但需要在某一 DOM 区域嵌入 AI 对话</td></tr><tr><td>无构建工具的快速接入</td><td>通过 <code>&lt;script&gt;</code> 引入 IIFE，全局变量 <code>AIBluekingStandalone</code></td></tr><tr><td>与默认入口对比</td><td>默认 <code>@blueking/ai-blueking</code> 要求宿主提供 Vue 3 + chat-x；Standalone 开箱即用，包体积更大</td></tr></tbody></table><div class="warning custom-block"><p class="custom-block-title">与 Vue 2 入口的区别</p><p>Standalone <strong>仅支持 Vue 3 运行时</strong>。Vue 2 项目请继续使用 <a href="__DOCS_BASE__/guide/integration-modes/aiblueking-floating.html"><code>@blueking/ai-blueking/vue2</code></a> 或升级宿主到 Vue 3 后再评估 Standalone。</p></div><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><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:#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</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 或 pnpm / yarn</span></span></code></pre></div><h2 id="方式一-npm-打包工具-推荐" tabindex="-1">方式一：npm + 打包工具（推荐） <a class="header-anchor" href="#方式一-npm-打包工具-推荐" aria-label="Permalink to &quot;方式一：npm + 打包工具（推荐）&quot;">​</a></h2><h3 id="引入样式" tabindex="-1">引入样式 <a class="header-anchor" href="#引入样式" aria-label="Permalink to &quot;引入样式&quot;">​</a></h3><p>Standalone 的 ES/UMD 构建会将 chat-x 与图标样式合并到独立 CSS 文件，<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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/dist/standalone/style.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="挂载完整小鲸-aiblueking" tabindex="-1">挂载完整小鲸（AIBlueking） <a class="header-anchor" href="#挂载完整小鲸-aiblueking" aria-label="Permalink to &quot;挂载完整小鲸（AIBlueking）&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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { mountAIBlueking } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/standalone&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> handle</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mountAIBlueking</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ai-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  props: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://your-aidev-url.com/api/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    enablePopup: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    requestOptions: {</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:#6F42C1;--shiki-dark:#B392F0;">getToken</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  on: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;send-message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</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;">, message),</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;sdk-error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;SDK 错误:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, error),</span></span>
<span class="line"><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;">// 编程式 API（与 Vue 模板 ref 的 expose 一致；show 在 sessionList 就绪后 resolve）</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> handle.expose?.</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;">handle.expose?.</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;">handle.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">updateProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://next-api.example.com/api/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">handle.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unmount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h3 id="仅挂载聊天区-chatbot" tabindex="-1">仅挂载聊天区（ChatBot） <a class="header-anchor" href="#仅挂载聊天区-chatbot" aria-label="Permalink to &quot;仅挂载聊天区（ChatBot）&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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { mountChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/standalone&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> chat</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mountChatBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#chat-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  props: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://your-aidev-url.com/api/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;600px&#39;</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  on: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">err</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(err),</span></span>
<span class="line"><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:#24292E;--shiki-dark:#E1E4E8;">chat.expose?.</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;Hello&#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><code>on</code> 的键支持：</p><ul><li><strong>kebab-case</strong>（与组件 <code>emit</code> 名一致）：<code>&#39;send-message&#39;</code>、<code>&#39;sdk-error&#39;</code></li><li><strong>onXxx</strong>（Vue 3 listener 形式）：<code>onSendMessage</code>、<code>onSdkError</code></li></ul><p>内部会统一映射为 Vue 的 <code>onSendMessage</code> 等 props。</p><h2 id="方式二-script-直引-iife" tabindex="-1">方式二：<code>&lt;script&gt;</code> 直引（IIFE） <a class="header-anchor" href="#方式二-script-直引-iife" aria-label="Permalink to &quot;方式二：\`&lt;script&gt;\` 直引（IIFE）&quot;">​</a></h2><p>构建产物：<code>dist/standalone/index.iife.min.js</code>，全局名 <strong><code>AIBluekingStandalone</code></strong>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/static/ai-blueking/standalone/style.css&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:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ai-root&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 100%; height: 100vh;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/static/ai-blueking/standalone/index.iife.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</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;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ai</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> AIBluekingStandalone.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mountAIBlueking</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ai-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    props: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://your-aidev-url.com/api/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      enablePopup: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    on: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(message);</span></span>
<span class="line"><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 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:#24292E;--shiki-dark:#E1E4E8;">  ai.expose </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ai.expose.</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;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="info custom-block"><p class="custom-block-title">UMD / ES 路径</p><ul><li>ESM：<code>@blueking/ai-blueking/standalone</code> → <code>dist/standalone/index.es.min.js</code></li><li>UMD：<code>dist/standalone/index.umd.min.js</code></li><li>类型：<code>dist/standalone.d.ts</code>（<code>import type { StandaloneMountHandle } from &#39;@blueking/ai-blueking/standalone&#39;</code>）</li></ul></div><h2 id="高级-自定义渲染-h-render" tabindex="-1">高级：自定义渲染（h / render） <a class="header-anchor" href="#高级-自定义渲染-h-render" aria-label="Permalink to &quot;高级：自定义渲染（h / render）&quot;">​</a></h2><p>Standalone 同时导出与 bundle <strong>同源</strong> 的 <code>h</code>、<code>render</code>、<code>createApp</code>。自定义侧栏、VNode 组合时<strong>必须</strong>从本入口导入，<strong>不要</strong>再安装一份外部 <code>vue</code>，否则会出现 VNode 不同源错误。</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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { h, render, ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/standalone&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/dist/standalone/style.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ai-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (container) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  render</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ChatBot, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://your-aidev-url.com/api/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">err</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</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;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(err),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    container,</span></span>
<span class="line"><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><p>侧栏 <code>getSideRenderComponent</code> 的 <code>createElement</code> 参数也应使用本入口的 <code>h</code>，详见 <a href="__DOCS_BASE__/guide/core-features/side-render-customization.html#standalone-宿主注意">侧栏 Tab 自定义渲染</a>。</p><h2 id="standalonemounthandle-api" tabindex="-1">StandaloneMountHandle API <a class="header-anchor" href="#standalonemounthandle-api" aria-label="Permalink to &quot;StandaloneMountHandle API&quot;">​</a></h2><table tabindex="0"><thead><tr><th>成员</th><th>说明</th></tr></thead><tbody><tr><td><code>app</code></td><td>内部 <code>createApp</code> 实例</td></tr><tr><td><code>expose</code> / <code>getExpose()</code></td><td>组件 <code>defineExpose</code> 暴露的方法（如 <code>show</code>、<code>sendMessage</code>）</td></tr><tr><td><code>updateProps(partial)</code></td><td>合并更新 props，不销毁应用</td></tr><tr><td><code>unmount()</code></td><td>卸载并清理</td></tr></tbody></table><p>类型：<code>StandaloneMountOptions</code>、<code>StandaloneMountHandle</code>、<code>StandaloneEventHandlers</code> 见 <a href="__DOCS_BASE__/api/ai-blueking/standalone.html">Standalone API</a>。</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><code>@blueking/ai-blueking</code>（默认）</th><th><code>@blueking/ai-blueking/standalone</code></th></tr></thead><tbody><tr><td>宿主要求</td><td>Vue 3 + 安装 chat-x 等 peer</td><td>无 Vue 要求</td></tr><tr><td>Vue runtime</td><td>由宿主提供</td><td>打入 bundle</td></tr><tr><td>chat-x</td><td>peerDependency</td><td>内联</td></tr><tr><td>集成方式</td><td><code>&lt;AIBlueking&gt;</code> / <code>&lt;ChatBot&gt;</code> SFC</td><td><code>mountAIBlueking</code> / <code>mountChatBot</code></td></tr><tr><td>包体积</td><td>较小</td><td>较大（约 2.5MB+ gzip 后仍显著大于默认 ES 包）</td></tr><tr><td>Vue 2</td><td><code>./vue2</code> 子入口</td><td>不支持</td></tr></tbody></table><h2 id="注意事项" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项" aria-label="Permalink to &quot;注意事项&quot;">​</a></h2><ol><li><strong>样式</strong>：ES/UMD 需手动引入 <code>dist/standalone/style.css</code>；IIFE 构建会将 CSS 注入 JS（与 Vue3 IIFE 行为一致），仍建议确认页面无样式冲突。</li><li><strong>容器</strong>：<code>container</code> 支持 CSS 选择器字符串或 <code>Element</code>；找不到节点时抛出 <code>[ai-blueking] mount container not found: ...</code>。</li><li><strong>expose 时机</strong>：挂载后建议 <code>await nextTick()</code> 或短延迟后再调用 <code>expose</code> 上的方法（与 Vue 组件一致）。</li><li><strong>Slots</strong>：非 Vue 宿主无法使用 Vue 插槽语法；需通过 <code>h</code> 传 slot 对象，或使用 <code>mountStandaloneComponent</code> 自行封装（见 API 文档）。</li></ol><h2 id="相关文档" tabindex="-1">相关文档 <a class="header-anchor" href="#相关文档" aria-label="Permalink to &quot;相关文档&quot;">​</a></h2><ul><li><a href="__DOCS_BASE__/api/ai-blueking/standalone.html">Standalone API</a></li><li><a href="__DOCS_BASE__/guide/advanced-usage/programmatic-control.html">编程式控制</a>（Vue 宿主下的 ref / expose）</li><li><a href="__DOCS_BASE__/guide/integration-modes/chatbot-embedded.html">ChatBot 页面嵌入</a>（Vue SFC 等价场景）</li><li><a href="__DOCS_BASE__/guide/integration-modes/aiblueking-floating.html">AIBlueking 浮窗模式</a></li></ul>`,36)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};
