## 快速了解 监听选中文本并展示快捷操作浮窗。 源码位置：src/components/ai-selection/ai-selection.vue。 ### 关联组件 - **shortcut-btn** — 弹窗内快捷指令按钮/菜单项由该基础组件渲染 - **chat-input** — 划词结果常回填或触发与输入框联动的快捷指令 --- # AiSelection AI 划词选择弹窗 ## 源码事实 - **源码位置**：`src/components/ai-selection/ai-selection.vue` - **能力域**：输入交互 - **能力说明**：监听选中文本并展示快捷操作浮窗。 > **能力域**：输入交互 AI 划词选择组件，监听用户在页面中的文本选区，在选区附近弹出快捷操作菜单。支持自定义快捷指令列表、数量限制、垂直偏移以及完全自定义插槽内容。 > **注意**：`AiSelection` 通过 `document.addEventListener` 监听全局事件（`selectionchange`、`mouseup`、`mousedown`、`scroll`），**同一页面中只应挂载一个实例**，避免多实例同时响应导致事件重复和弹窗叠加。 ## 工作原理 ``` 用户选中文本 ↓ mouseup（200ms 防抖）/ selectionchange（300ms 防抖） 获取选区文本 & 坐标 → 计算弹窗位置 ↓ 通过 将弹窗渲染到 末尾 ↓ 用户点击快捷指令 → 触发 selectShortcut 事件 → 关闭弹窗 ``` 弹窗渲染在 `` 顶层，不受父级 `overflow: hidden` / `z-index` 影响，定位坐标基于视口（`position: fixed`）。 ## 弹窗关闭时机 | 触发条件 | 说明 | | ------------------ | -------------------------------- | | 点击弹窗外部区域 | `mousedown` 事件，弹窗外任意位置 | | 滚动包含选区的容器 | `scroll` 事件捕获阶段 | | 窗口大小改变 | `window.resize` | | 窗口失去焦点 | `window.blur` | | 点击快捷指令 | 触发后立即关闭并清除选区 | ## 基础用法 不传 `shortcuts` 时，使用内置默认快捷指令"问问小鲸"（`id: 'ai-chat'`）： ```vue ``` **渲染效果**（选中下方文字后弹出快捷操作菜单） ## 自定义快捷指令 通过 `shortcuts` 属性传入自定义快捷指令列表： ```vue ``` **渲染效果**（选中文字后弹出 3 个快捷操作按钮） ## 快捷指令数量限制 当快捷指令数量超过 `maxShortcutCount`（默认 `3`）时，多余的指令会收起到「更多」菜单（点击 `›` 箭头展开）。 ### `maxShortcutCount = 3`（默认） 6 个指令中前 3 个直接展示，其余 3 个收起： ```vue ``` **渲染效果**（展示 3 个，其余 3 个收起到「更多」菜单） ### `maxShortcutCount = 5` 前 5 个直接展示，仅最后 1 个收起： ```vue ``` **渲染效果**（展示 5 个，仅「生成代码」收起） ## 带图标的快捷指令 `icon` 属性支持三种形式： | 类型 | 说明 | 示例 | | --------------------------------- | --------------- | -------------------------------- | | `string`（emoji） | 直接渲染文本 | `'🌐'` | | `string`（HTTP URL） | 渲染为 `` | `'https://example.com/icon.svg'` | | `VNode \| (c: typeof h) => VNode` | 渲染为 Vue 组件 | `ThinkingIcon`（内置图标组件） | ```vue ``` ## 事件回调 `selectShortcut` 在用户点击快捷指令后触发，携带指令对象和选中文本；`selectionChange` 在选区文字内容变化时触发： ```vue ``` **渲染效果**（点击快捷指令后下方显示回调信息） ## 自定义垂直偏移 `offset` 控制弹窗与选区之间的垂直距离（单位 px），默认 `10`。弹窗优先显示在选区**上方**，空间不足时自动显示在**下方**： ```vue ``` ## 自定义插槽 默认插槽替换整个弹窗内容区，插槽参数 `shortcuts` 为**完整**快捷指令列表（未经 `maxShortcutCount` 截断）： ```vue ``` > **注意**：使用默认插槽后，`maxShortcutCount` 不再生效，「更多」菜单也不会出现，需要自行处理超出逻辑。 ## 排除区域 通过 `excludeSelectors` 指定 CSS 选择器列表，当选区位于这些选择器匹配的元素内部时，弹窗不会弹出。适用于代码块、表单输入等不需要划词弹窗的区域： ```vue ``` ## Input / Textarea 支持 组件对 `` 和 `