import{_ as s,o as a,c as i,a4 as e}from"./chunks/framework.Cre9sSJa.js";const c=JSON.parse('{"title":"UI 组件 (chat-x)","description":"","frontmatter":{},"headers":[],"relativePath":"api/chat-x/components.md","filePath":"api/chat-x/components.md"}'),d={name:"api/chat-x/components.md"};function h(n,t,l,o,r,k){return a(),i("div",null,[...t[0]||(t[0]=[e(`<h1 id="ui-组件-chat-x" tabindex="-1">UI 组件 (chat-x) <a class="header-anchor" href="#ui-组件-chat-x" aria-label="Permalink to &quot;UI 组件 (chat-x)&quot;">​</a></h1><p><code>@blueking/chat-x</code> 是 AI 小鲸的纯 UI 组件层，不包含任何业务逻辑。所有组件均可独立使用或自由组合。</p><h2 id="chatinput" tabindex="-1">ChatInput <a class="header-anchor" href="#chatinput" aria-label="Permalink to &quot;ChatInput&quot;">​</a></h2><p>聊天输入框组件，支持文本输入、快捷指令、资源引用、文件上传等功能。</p><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>modelValue</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>输入框内容（<code>v-model</code>）</td></tr><tr><td><code>cite</code></td><td><code>string</code></td><td>-</td><td>引用文本</td></tr><tr><td><code>messageStatus</code></td><td><code>MessageStatus</code></td><td>-</td><td>当前消息状态（控制发送/停止按钮）</td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>-</td><td>输入框占位符</td></tr><tr><td><code>prompts</code></td><td><code>string[]</code></td><td>-</td><td>预设提示词列表（<code>/</code> 触发）</td></tr><tr><td><code>resources</code></td><td><code>IAiSlashMenuItem[]</code></td><td><code>[]</code></td><td>资源列表（<code>@</code> 触发）</td></tr><tr><td><code>shortcuts</code></td><td><code>IShortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表</td></tr><tr><td><code>shortcutId</code></td><td><code>string</code></td><td>-</td><td>当前选中的快捷指令 ID</td></tr><tr><td><code>supportUpload</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否支持文件上传</td></tr><tr><td><code>onSendMessage</code></td><td><code>(message: string) =&gt; void</code></td><td>-</td><td>发送消息回调</td></tr><tr><td><code>onStopSending</code></td><td><code>() =&gt; void</code></td><td>-</td><td>停止发送回调</td></tr><tr><td><code>onUpload</code></td><td><code>(file: File) =&gt; void</code></td><td>-</td><td>文件上传回调</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>select-shortcut</code></td><td><code>(shortcut: IShortcut)</code></td><td>选择快捷指令</td></tr><tr><td><code>delete-shortcut</code></td><td>-</td><td>删除当前快捷指令</td></tr></tbody></table><h3 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><table tabindex="0"><thead><tr><th>插槽名</th><th>说明</th></tr></thead><tbody><tr><td><code>top</code></td><td>输入框上方区域</td></tr><tr><td><code>input-header</code></td><td>输入框头部区域</td></tr><tr><td><code>attachment</code></td><td>附件区域</td></tr><tr><td><code>send-icon</code></td><td>自定义发送按钮图标</td></tr></tbody></table><h3 id="expose" tabindex="-1">Expose <a class="header-anchor" href="#expose" aria-label="Permalink to &quot;Expose&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>focus</code></td><td><code>() =&gt; void</code></td><td>聚焦输入框</td></tr></tbody></table><h3 id="快捷键" tabindex="-1">快捷键 <a class="header-anchor" href="#快捷键" aria-label="Permalink to &quot;快捷键&quot;">​</a></h3><table tabindex="0"><thead><tr><th>快捷键</th><th>说明</th></tr></thead><tbody><tr><td><code>Enter</code></td><td>发送消息</td></tr><tr><td><code>Shift + Enter</code></td><td>换行</td></tr><tr><td><code>/</code></td><td>触发提示词选择</td></tr><tr><td><code>@</code></td><td>触发资源选择</td></tr><tr><td><code>↑</code> / <code>↓</code></td><td>在提示词/资源列表中导航</td></tr><tr><td><code>Esc</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:#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;">ChatInput</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    v-model</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;">inputText</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;">message-status</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;">status</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;">shortcuts</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:#6F42C1;--shiki-dark:#B392F0;">    placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;输入你的问题...&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">send-message</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;">onSend</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;">stop-sending</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;">onStop</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 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><h2 id="messagecontainer" tabindex="-1">MessageContainer <a class="header-anchor" href="#messagecontainer" aria-label="Permalink to &quot;MessageContainer&quot;">​</a></h2><p>消息列表容器，负责渲染消息列表和管理消息选择。</p><h3 id="props-1" tabindex="-1">Props <a class="header-anchor" href="#props-1" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>messages</code></td><td><code>Message[]</code></td><td><code>[]</code></td><td>消息列表</td></tr><tr><td><code>messageStatus</code></td><td><code>MessageStatus</code></td><td>-</td><td>当前消息状态</td></tr><tr><td><code>messageToolsStatus</code></td><td><code>MessageToolsStatus</code></td><td>-</td><td>消息工具栏状态</td></tr><tr><td><code>enableSelection</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否启用多选模式</td></tr><tr><td><code>onAgentAction</code></td><td><code>(tool, message) =&gt; void</code></td><td>-</td><td>Agent 消息工具栏点击回调</td></tr><tr><td><code>onAgentFeedback</code></td><td><code>(tool, message, reasons, other) =&gt; void</code></td><td>-</td><td>Agent 反馈回调</td></tr><tr><td><code>onUserAction</code></td><td><code>(tool, message) =&gt; void</code></td><td>-</td><td>用户消息工具栏点击回调</td></tr><tr><td><code>onUserInputConfirm</code></td><td><code>(message, content) =&gt; void</code></td><td>-</td><td>用户编辑消息确认回调</td></tr><tr><td><code>onUserShortcutConfirm</code></td><td><code>(message, formData) =&gt; void</code></td><td>-</td><td>用户快捷指令表单确认回调</td></tr></tbody></table><h3 id="v-model" tabindex="-1">v-model <a class="header-anchor" href="#v-model" aria-label="Permalink to &quot;v-model&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>selectedMessages</code></td><td><code>Message[]</code></td><td>选中的消息列表（多选模式下）</td></tr></tbody></table><h3 id="events-1" tabindex="-1">Events <a class="header-anchor" href="#events-1" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>stopStreaming</code></td><td>-</td><td>停止流式输出</td></tr></tbody></table><h3 id="slots-1" tabindex="-1">Slots <a class="header-anchor" href="#slots-1" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><table tabindex="0"><thead><tr><th>插槽名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>{ message }</code></td><td>自定义单条消息渲染</td></tr></tbody></table><h3 id="expose-1" tabindex="-1">Expose <a class="header-anchor" href="#expose-1" aria-label="Permalink to &quot;Expose&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法/属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>isAllSelected</code></td><td><code>ComputedRef&lt;boolean&gt;</code></td><td>是否已全选</td></tr><tr><td><code>selectAll</code></td><td><code>() =&gt; void</code></td><td>全选所有消息</td></tr><tr><td><code>deselectAll</code></td><td><code>() =&gt; void</code></td><td>取消全选</td></tr></tbody></table><h3 id="用法示例-1" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-1" 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:#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;">MessageContainer</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">messages</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;">messages</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;">message-status</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;">status</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;">enable-selection</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;">isSelectionMode</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">selected-messages</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;">selectedMsgs</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;">stop-streaming</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;">onStop</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 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><h2 id="messagerender" tabindex="-1">MessageRender <a class="header-anchor" href="#messagerender" aria-label="Permalink to &quot;MessageRender&quot;">​</a></h2><p>单条消息渲染组件，根据消息角色自动选择对应的渲染方式。</p><h3 id="props-2" tabindex="-1">Props <a class="header-anchor" href="#props-2" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>message</code></td><td><code>Partial&lt;Message&gt;</code></td><td>-</td><td>消息对象</td></tr><tr><td><code>onAction</code></td><td><code>(tool, message) =&gt; void</code></td><td>-</td><td>工具栏操作回调</td></tr></tbody></table><h3 id="slots-2" tabindex="-1">Slots <a class="header-anchor" href="#slots-2" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><table tabindex="0"><thead><tr><th>插槽名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>{ content, status }</code></td><td>自定义消息内容渲染</td></tr></tbody></table><h3 id="角色与组件映射" tabindex="-1">角色与组件映射 <a class="header-anchor" href="#角色与组件映射" aria-label="Permalink to &quot;角色与组件映射&quot;">​</a></h3><table tabindex="0"><thead><tr><th>角色 (<code>MessageRole</code>)</th><th>渲染组件</th><th>说明</th></tr></thead><tbody><tr><td><code>User</code></td><td><code>UserMessage</code></td><td>用户消息，支持编辑</td></tr><tr><td><code>Assistant</code></td><td><code>AssistantMessage</code></td><td>AI 回复，支持 Markdown 渲染</td></tr><tr><td><code>Reasoning</code></td><td><code>ReasoningMessage</code></td><td>推理过程（思考链）</td></tr><tr><td><code>Tool</code></td><td><code>ToolMessage</code></td><td>工具调用结果</td></tr><tr><td><code>Activity</code></td><td><code>ActivityMessage</code></td><td>活动/状态消息</td></tr><tr><td><code>Info</code></td><td><code>InfoMessage</code></td><td>信息提示</td></tr><tr><td><code>System</code></td><td><code>SystemMessage</code></td><td>系统消息</td></tr></tbody></table><h3 id="用法示例-2" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-2" 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:#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;">MessageRender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">message</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;">msg</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on-action</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;">handleAction</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&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;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="shortcutrender" tabindex="-1">ShortcutRender <a class="header-anchor" href="#shortcutrender" aria-label="Permalink to &quot;ShortcutRender&quot;">​</a></h2><p>快捷指令表单渲染组件，根据快捷指令配置渲染动态表单。</p><h3 id="props-3" tabindex="-1">Props <a class="header-anchor" href="#props-3" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>-</td><td>快捷指令名称</td></tr><tr><td><code>components</code></td><td><code>ShortcutComponent[]</code></td><td><code>[]</code></td><td>表单组件列表</td></tr><tr><td><code>formModel</code></td><td><code>Record&lt;string, any&gt;</code></td><td><code>{}</code></td><td>表单数据模型</td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>-</td><td>快捷指令描述</td></tr></tbody></table><h3 id="events-2" tabindex="-1">Events <a class="header-anchor" href="#events-2" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>close</code></td><td>-</td><td>关闭快捷指令表单</td></tr><tr><td><code>submit</code></td><td><code>(formData: Record&lt;string, any&gt;)</code></td><td>提交表单数据</td></tr></tbody></table><h3 id="用法示例-3" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-3" 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:#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;">ShortcutRender</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</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;">shortcut.name</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;">components</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;">shortcut.components</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;">form-model</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;">shortcut.formModel</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;">description</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;">shortcut.description</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;">close</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;">onClose</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;">submit</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;">onSubmit</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 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><h2 id="shortcutbtns" tabindex="-1">ShortcutBtns <a class="header-anchor" href="#shortcutbtns" aria-label="Permalink to &quot;ShortcutBtns&quot;">​</a></h2><p>快捷指令按钮组，以按钮组形式展示快捷指令列表。</p><h3 id="props-4" tabindex="-1">Props <a class="header-anchor" href="#props-4" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>shortcuts</code></td><td><code>IShortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表</td></tr></tbody></table><h3 id="events-3" tabindex="-1">Events <a class="header-anchor" href="#events-3" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>selectShortcut</code></td><td><code>(shortcut: IShortcut)</code></td><td>选择快捷指令</td></tr></tbody></table><h3 id="用法示例-4" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-4" 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:#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;">ShortcutBtns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shortcuts</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">select-shortcut</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;">onSelect</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&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;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="aiselection" tabindex="-1">AiSelection <a class="header-anchor" href="#aiselection" aria-label="Permalink to &quot;AiSelection&quot;">​</a></h2><p>AI 选区组件，用于在页面中通过选区触发快捷指令。</p><h3 id="props-5" tabindex="-1">Props <a class="header-anchor" href="#props-5" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>visible</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否显示（<code>v-model</code>）</td></tr><tr><td><code>shortcuts</code></td><td><code>IShortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表</td></tr><tr><td><code>maxShortcutCount</code></td><td><code>number</code></td><td>-</td><td>最大显示快捷指令数量</td></tr><tr><td><code>offset</code></td><td><code>{ x: number; y: number }</code></td><td>-</td><td>偏移量</td></tr></tbody></table><h3 id="events-4" tabindex="-1">Events <a class="header-anchor" href="#events-4" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>selectShortcut</code></td><td><code>(shortcut: IShortcut)</code></td><td>选择快捷指令</td></tr><tr><td><code>selectionChange</code></td><td><code>(text: string)</code></td><td>选区文本变化</td></tr></tbody></table><h3 id="slots-3" tabindex="-1">Slots <a class="header-anchor" href="#slots-3" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><table tabindex="0"><thead><tr><th>插槽名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>{ shortcuts }</code></td><td>自定义快捷指令渲染</td></tr></tbody></table><h3 id="用法示例-5" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-5" 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:#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;">AiSelection</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visible</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;">showSelection</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;">shortcuts</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;">max-shortcut-count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</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;">select-shortcut</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;">onSelect</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;">selection-change</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;">onSelectionChange</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 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><h2 id="contentrender" tabindex="-1">ContentRender <a class="header-anchor" href="#contentrender" aria-label="Permalink to &quot;ContentRender&quot;">​</a></h2><p>内容渲染组件，支持 Markdown 渲染（含 v2.1.4-beta.6+ 蓝鲸行内富文本 <code>::bk{...}...:/bk::</code>，不解析任意 HTML）。</p><h3 id="props-6" tabindex="-1">Props <a class="header-anchor" href="#props-6" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>content</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>要渲染的内容（支持 Markdown 及蓝鲸行内富文本）</td></tr></tbody></table><h3 id="用法示例-6" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-6" 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:#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;">ContentRender</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;## 标题\\n这是一段 **Markdown** 内容。&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;">ContentRender</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;::bk{color=red; bold}重要:/bk::&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;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>行内富文本语法与 LLM 提示词配置见 <a href="__DOCS_BASE__/guide/core-features/markdown-inline-style.html">蓝鲸行内富文本</a>。</p>`,73)])])}const E=s(d,[["render",h]]);export{c as __pageData,E as default};
