import{_ as i,o as a,c as t,a4 as n}from"./chunks/framework.Cre9sSJa.js";const c=JSON.parse('{"title":"Standalone 子入口","description":"","frontmatter":{},"headers":[],"relativePath":"api/ai-blueking/standalone.md","filePath":"api/ai-blueking/standalone.md"}'),e={name:"api/ai-blueking/standalone.md"};function l(h,s,d,p,k,o){return a(),t("div",null,[...s[0]||(s[0]=[n(`<h1 id="standalone-子入口" tabindex="-1">Standalone 子入口 <a class="header-anchor" href="#standalone-子入口" aria-label="Permalink to &quot;Standalone 子入口&quot;">​</a></h1><blockquote><p><strong>自 v2.1.4-beta.8 起</strong> 可用。包路径：<code>@blueking/ai-blueking/standalone</code>。</p></blockquote><p>将 Vue 3、chat-x、bkui-vue 等打入独立 bundle，供非 Vue 宿主挂载 <code>AIBlueking</code> / <code>ChatBot</code>。使用说明见 <a href="__DOCS_BASE__/guide/integration-modes/standalone-bundle.html">Standalone 非 Vue 宿主集成</a>。</p><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;">// 挂载 API + 同源 Vue runtime</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mountAIBlueking,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mountChatBot,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  mountStandaloneComponent,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  h,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  render,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  createApp,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  AIBlueking,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ChatBot,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </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;">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><p>IIFE 全局：<code>window.AIBluekingStandalone</code>（与构建 <code>lib.name</code> 一致）。</p><h2 id="mountaiblueking" tabindex="-1">mountAIBlueking <a class="header-anchor" href="#mountaiblueking" aria-label="Permalink to &quot;mountAIBlueking&quot;">​</a></h2><p>在非 Vue 宿主挂载完整小鲸面板（含 Nimbus、拖拽、划词等）。</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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mountAIBlueking</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">AIBluekingProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountHandle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">AIBluekingExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">AIBluekingProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><p><code>AIBluekingProps</code> / <code>AIBluekingExpose</code> 与 <a href="__DOCS_BASE__/api/ai-blueking/aiblueking.html">AIBlueking 组件</a> 一致。</p><h2 id="mountchatbot" tabindex="-1">mountChatBot <a class="header-anchor" href="#mountchatbot" aria-label="Permalink to &quot;mountChatBot&quot;">​</a></h2><p>在非 Vue 宿主挂载 <code>ChatBot</code>。</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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mountChatBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ChatBotProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountHandle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ChatBotExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ChatBotProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><h2 id="mountstandalonecomponent" tabindex="-1">mountStandaloneComponent <a class="header-anchor" href="#mountstandalonecomponent" aria-label="Permalink to &quot;mountStandaloneComponent&quot;">​</a></h2><p>挂载任意已注册的 Vue 组件（高级用法）。</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;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mountStandaloneComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">TProps</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> object</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">TExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  component</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">TProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneMountHandle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">TExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">TProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><h2 id="standalonemountoptions" tabindex="-1">StandaloneMountOptions <a class="header-anchor" href="#standalonemountoptions" aria-label="Permalink to &quot;StandaloneMountOptions&quot;">​</a></h2><table tabindex="0"><thead><tr><th>字段</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>props</code></td><td><code>TProps</code></td><td>传给根组件的 props</td></tr><tr><td><code>on</code></td><td><code>StandaloneEventHandlers</code></td><td>事件监听；键为 emit 名（kebab-case）或 <code>onXxx</code></td></tr></tbody></table><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;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StandaloneEventHandlers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</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;">...</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">args</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> unknown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><h2 id="standalonemounthandle" tabindex="-1">StandaloneMountHandle <a class="header-anchor" href="#standalonemounthandle" aria-label="Permalink to &quot;StandaloneMountHandle&quot;">​</a></h2><table tabindex="0"><thead><tr><th>成员</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>app</code></td><td><code>App</code></td><td>Vue 应用实例</td></tr><tr><td><code>expose</code></td><td><code>TExpose | null</code></td><td>只读，当前组件 expose</td></tr><tr><td><code>getExpose()</code></td><td><code>() =&gt; TExpose | null</code></td><td>获取 expose</td></tr><tr><td><code>updateProps(partial)</code></td><td><code>(partial: Partial&lt;TProps&gt;) =&gt; void</code></td><td>合并更新 props</td></tr><tr><td><code>unmount()</code></td><td><code>() =&gt; void</code></td><td>卸载</td></tr></tbody></table><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><code>resolveMountContainer(container)</code></td><td>将选择器解析为 <code>Element</code>，失败抛错</td></tr><tr><td><code>buildStandaloneListeners(on)</code></td><td>将 <code>on</code> 转为 Vue listener props</td></tr></tbody></table><h2 id="重导出" tabindex="-1">重导出 <a class="header-anchor" href="#重导出" aria-label="Permalink to &quot;重导出&quot;">​</a></h2><p>与默认入口相同的业务 API（<code>export * from &#39;./index&#39;</code>），以及：</p><table tabindex="0"><thead><tr><th>导出</th><th>说明</th></tr></thead><tbody><tr><td><code>createApp</code>, <code>h</code>, <code>render</code></td><td>bundle 内 Vue 3 runtime，<strong>勿与外部 vue 混用</strong></td></tr><tr><td><code>AIBlueking</code>, <code>ChatBot</code></td><td>组件本身，供 <code>h(Component, props)</code> 使用</td></tr><tr><td>Managers、composables、类型等</td><td>与 <code>@blueking/ai-blueking</code> 主入口一致</td></tr></tbody></table><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><code>dist/standalone/index.es.min.js</code></td><td>ESM</td></tr><tr><td><code>dist/standalone/index.umd.min.js</code></td><td>UMD</td></tr><tr><td><code>dist/standalone/index.iife.min.js</code></td><td>IIFE（<code>AIBluekingStandalone</code>）</td></tr><tr><td><code>dist/standalone/style.css</code></td><td>样式（ES/UMD 需手动引入）</td></tr><tr><td><code>dist/standalone.d.ts</code></td><td>类型入口</td></tr></tbody></table>`,28)])])}const E=i(e,[["render",l]]);export{c as __pageData,E as default};
