@blueking/chat-x 0.0.42 → 0.0.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ag-ui/types/contents.d.ts +1 -0
- package/dist/components/ai-buttons/tool-btn/tool-btn.vue.d.ts +11 -1
- package/dist/components/chat-content/flow-agent-content/flow-agent-content.vue.d.ts +1 -0
- package/dist/components/chat-content/flow-agent-content/flow-agent-state.d.ts +34 -0
- package/dist/components/chat-content/flow-agent-content/use-flow-agent.d.ts +47 -0
- package/dist/components/chat-content/flow-agent-content/use-flow-tab.d.ts +18 -0
- package/dist/composables/index.d.ts +1 -0
- package/dist/composables/use-full-screen.d.ts +17 -0
- package/dist/composables/use-message-group.d.ts +3 -0
- package/dist/directives/overflow-tips.d.ts +1 -1
- package/dist/icons/execution.d.ts +3 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/screen.d.ts +6 -0
- package/dist/index.css +1 -1
- package/dist/index.js +2124 -1949
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +4 -1
- package/dist/mcp/generated/docs/chat-container.md +28 -11
- package/dist/mcp/generated/docs/message-tools.md +3 -3
- package/dist/mcp/generated/docs/tool-btn.md +37 -6
- package/dist/mcp/generated/docs/use-full-screen.md +114 -0
- package/dist/mcp/generated/index.json +19 -1
- package/dist/types/tool.d.ts +1 -1
- package/package.json +2 -2
package/dist/lang/lang.d.ts
CHANGED
|
@@ -43,6 +43,7 @@ export declare const lang: {
|
|
|
43
43
|
readonly 失败: "Failed";
|
|
44
44
|
readonly 挂起: "Pending";
|
|
45
45
|
readonly 待执行: "To Be Executed";
|
|
46
|
+
readonly 跳过: "Skipped";
|
|
46
47
|
readonly 详情: "Details";
|
|
47
48
|
readonly 节点: "Node";
|
|
48
49
|
readonly 节点配置: "Node Config";
|
|
@@ -97,5 +98,7 @@ export declare const lang: {
|
|
|
97
98
|
readonly 清空搜索: "Clear Search";
|
|
98
99
|
readonly 搜索结果为空: "Search Result is Empty";
|
|
99
100
|
readonly 有效证据: "Valid Evidence";
|
|
101
|
+
readonly 全屏: "Full Screen";
|
|
102
|
+
readonly 退出全屏: "Exit Full Screen";
|
|
100
103
|
};
|
|
101
|
-
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Regenerating will clear the content below" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool:" | "Calling..." | "Call Success" | "Call Failed" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Details" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP:" | "More" | "Searching" | "Search Completed" | "Upload File" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload Image, up to 3 images supported, max 2.4MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "Valid Evidence" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "重新生成将清空下文内容" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具:" | "调用中" | "调用成功" | "调用失败" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "详情" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP:" | "更多" | "检索中" | "检索完成" | "上传文件" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传图片, 最多支持上传 3 个, 最大支持 2.4MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空" | "有效证据";
|
|
104
|
+
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Regenerating will clear the content below" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool:" | "Calling..." | "Call Success" | "Call Failed" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Skipped" | "Details" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP:" | "More" | "Searching" | "Search Completed" | "Upload File" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload Image, up to 3 images supported, max 2.4MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "Valid Evidence" | "Full Screen" | "Exit Full Screen" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "重新生成将清空下文内容" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具:" | "调用中" | "调用成功" | "调用失败" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "跳过" | "详情" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP:" | "更多" | "检索中" | "检索完成" | "上传文件" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传图片, 最多支持上传 3 个, 最大支持 2.4MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空" | "有效证据" | "全屏" | "退出全屏";
|
|
@@ -25,6 +25,7 @@ ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息
|
|
|
25
25
|
- **消息分组**:内置 `useMessageGroup` 自动处理消息分组、Tool 合并、Loading 注入
|
|
26
26
|
- **输入区状态推导**:传给 `MessageContainer` 与 `ChatInput` 的 `messageStatus` 为内部计算值 `inputStatus`:当分组中存在 id 为 `LOADING_MESSAGE_ID`(`'__loading__'`,由 `useMessageGroup` 注入的占位 Loading 消息)时,对内使用 `MessageStatus.Fetching`;否则使用外部传入的 `messageStatus`。用于在「已发用户消息、尚未流式」阶段与流式中一致地展示停止能力,并避免输入区重复发送
|
|
27
27
|
- **执行摘要**:侧边栏展示工具调用 / FlowAgent 执行记录,支持关键词搜索和对话定位
|
|
28
|
+
- **侧栏全屏**:Tab 栏右侧提供全屏/退出全屏按钮,基于 `useFullScreen` 将侧栏区域(`.ai-full-screen-wrapper`)以浏览器原生全屏展示;全屏时 Tippy 的 `appendTo` 自动切换为全屏容器,避免 tooltip 被遮挡
|
|
28
29
|
- **自定义 Tab**:通过 `useCustomTabProvider` 支持动态添加自定义 Tab(如节点详情)
|
|
29
30
|
- **分享模式**:内置消息多选分享流程,选中用户消息后确认分享
|
|
30
31
|
- **渲染模式注入**:`renderMode` 会通过内部 Provider 下传给后代内容组件;例如 FlowAgent 节点在 `Share` 模式下隐藏耗时和「详情」入口
|
|
@@ -37,12 +38,14 @@ ai-chat-container
|
|
|
37
38
|
├── Loading(chatLoading 时)
|
|
38
39
|
└── ResizeLayout
|
|
39
40
|
├── aside(侧边栏)
|
|
40
|
-
│ ├──
|
|
41
|
-
│ │ ├──
|
|
42
|
-
│ │
|
|
43
|
-
│ ├──
|
|
44
|
-
│
|
|
45
|
-
│
|
|
41
|
+
│ ├── .ai-full-screen-wrapper(全屏目标容器,ref=fullScreenRef)
|
|
42
|
+
│ │ ├── Tab 标签页
|
|
43
|
+
│ │ │ ├── 执行情况(默认 Tab)
|
|
44
|
+
│ │ │ ├── 自定义 Tab × N(可关闭;标签可由 `getSideTabRenderComponent` 自定义)
|
|
45
|
+
│ │ │ └── #setting 插槽 → 全屏/退出全屏 ToolBtn(FullScreenIcon / UnFullScreenIcon)
|
|
46
|
+
│ │ ├── ExecutionSummary(执行情况 Tab 内容)
|
|
47
|
+
│ │ └── 自定义 Tab 组件(`getSideRenderComponent` 优先,否则 `data.component`;可向子组件注入 #locateButton)
|
|
48
|
+
│ └── collapse-button(折叠按钮,CollapsedIcon;折叠时图标旋转,hover 高亮 #3a84ff)
|
|
46
49
|
└── main(主内容区)
|
|
47
50
|
├── MessageContainer(有消息时)
|
|
48
51
|
│ └── 消息列表 + 工具栏
|
|
@@ -138,13 +141,25 @@ ai-chat-container
|
|
|
138
141
|
|
|
139
142
|
侧边栏放置方向通过 `placement` 控制:
|
|
140
143
|
|
|
141
|
-
| `placement` | 侧边栏位置 | 折叠按钮位置 |
|
|
142
|
-
| ----------- | ------------ | ------------ |
|
|
143
|
-
| `left` | 左侧(默认) | 主区域左边缘 |
|
|
144
|
-
| `right` | 右侧 | 主区域右边缘 |
|
|
144
|
+
| `placement` | 侧边栏位置 | 折叠按钮位置 | 折叠图标旋转 |
|
|
145
|
+
| ----------- | ------------ | ------------ | ------------ |
|
|
146
|
+
| `left` | 左侧(默认) | 主区域左边缘 | 折叠时旋转 180° |
|
|
147
|
+
| `right` | 右侧 | 主区域右边缘 | 默认旋转 180°,折叠时恢复 0° |
|
|
148
|
+
|
|
149
|
+
> 折叠按钮仅展示 `CollapsedIcon`(不再显示「执行情况」文案),通过图标旋转方向指示展开/折叠状态。
|
|
145
150
|
|
|
146
151
|
**placement 对比**(左右两种布局)
|
|
147
152
|
|
|
153
|
+
## 侧栏全屏
|
|
154
|
+
|
|
155
|
+
当侧栏 Tab 区域可见时,Tab 栏右侧(`#setting` 插槽)内置全屏切换按钮:
|
|
156
|
+
|
|
157
|
+
- 点击 **全屏** 图标:调用 `useFullScreen(fullScreenRef).enter()`,将 `.ai-full-screen-wrapper` 进入浏览器原生全屏
|
|
158
|
+
- 点击 **退出全屏** 图标:调用 `exit()` 退出;用户按 ESC 退出时 `isFullScreen` 也会自动同步
|
|
159
|
+
- 全屏状态下,侧栏内 `v-overflow-tips` 的 `appendTo` 会指向全屏容器,避免 tooltip 挂载到 `document.body` 后被全屏层遮挡
|
|
160
|
+
|
|
161
|
+
该能力由内部 `useFullScreen` composable 提供,详见 [useFullScreen](../../composables/use-full-screen.md)。
|
|
162
|
+
|
|
148
163
|
## 自定义 Tab
|
|
149
164
|
|
|
150
165
|
通过 `ref` 获取组件实例后,使用 `addCustomTab` / `removeCustomTab` 动态管理侧边栏 Tab。若 **`executionGroups` 变为空且搜索词已清空**,容器会清空自定义 Tab 状态(与侧栏执行数据联动,见上文「侧边栏与执行摘要」)。
|
|
@@ -486,4 +501,6 @@ interface Shortcut {
|
|
|
486
501
|
- [ChatInput](./chat-input.md) — 输入与快捷指令
|
|
487
502
|
- [ShortcutRender](./shortcut-render.md) — 快捷指令表单
|
|
488
503
|
- [ExecutionSummary](./execution-summary.md) — 执行摘要侧栏
|
|
489
|
-
- [SelectionFooter](../atomic/selection-footer.md) — 多选操作栏
|
|
504
|
+
- [SelectionFooter](../atomic/selection-footer.md) — 多选操作栏
|
|
505
|
+
- [ToolBtn](../atomic/tool-btn.md) — 侧栏全屏按钮(自定义插槽)
|
|
506
|
+
- [useFullScreen](../../composables/use-full-screen.md) — 侧栏全屏控制
|
|
@@ -358,9 +358,9 @@ const CONST_UPDATE_TOOLS = [
|
|
|
358
358
|
import { MessageToolsStatus, type IToolBtn } from '@blueking/chat-x';
|
|
359
359
|
|
|
360
360
|
interface IToolBtn {
|
|
361
|
-
id
|
|
362
|
-
name
|
|
363
|
-
description
|
|
361
|
+
id?: keyof typeof ToolIconsMap; // 工具唯一标识;与 ToolIconsMap 匹配时显示内置图标,否则显示 name 文本
|
|
362
|
+
name?: string; // 工具名称,无对应图标时显示;也用作 tooltip fallback
|
|
363
|
+
description?: string; // tooltip 文本
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
enum MessageToolsStatus {
|
|
@@ -25,8 +25,9 @@ div.ai-tool-btn(v-tippy,flex,min-width: 20px,height: 20px,border-radiu
|
|
|
25
25
|
disabled=true → .is-disabled(color: #979ba5; cursor: not-allowed)
|
|
26
26
|
:not(.is-disabled):hover → color: #4d4f56; background: #eaebf0
|
|
27
27
|
│
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
└── <slot>(默认内容,可完全自定义)
|
|
29
|
+
├── [id && id in ToolIconsMap] → <component :is="ToolIconsMap[id]" />(SVG 图标)
|
|
30
|
+
└── [其他] → <div>{{ name }}</div>(文本回退,XSS 安全)
|
|
30
31
|
|
|
31
32
|
Tippy:content=description, theme='ai-chat-box', disabled=true 时 onShow 返回 false 不显示
|
|
32
33
|
click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
@@ -51,7 +52,7 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
51
52
|
| `activeLike` | 点赞(实心) | 激活态填充图标 |
|
|
52
53
|
| `activeUnLike` | 不满意(实心) | 激活态填充图标 |
|
|
53
54
|
|
|
54
|
-
> `id` 不在上表时,组件渲染 `<div>{{ name }}</div>`
|
|
55
|
+
> 未传入 `id`、或 `id` 不在上表时,组件渲染 `<div>{{ name }}</div>` 作为文本回退。也可通过默认插槽完全自定义按钮内容(如全屏图标),此时可不传 `id`。
|
|
55
56
|
|
|
56
57
|
## 基础用法
|
|
57
58
|
|
|
@@ -187,7 +188,31 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
187
188
|
|
|
188
189
|
## 未知 ID 的文本回退
|
|
189
190
|
|
|
190
|
-
`id` 不在 `ToolIconsMap` 时渲染 `name`
|
|
191
|
+
`id` 不在 `ToolIconsMap` 时渲染 `name` 文本,适用于自定义扩展场景:
|
|
192
|
+
|
|
193
|
+
## 自定义插槽内容
|
|
194
|
+
|
|
195
|
+
通过默认插槽可完全替换内置图标/文本,适用于预置 `ToolIconsMap` 未覆盖的图标场景(如侧栏全屏按钮):
|
|
196
|
+
|
|
197
|
+
```vue
|
|
198
|
+
<template>
|
|
199
|
+
<ToolBtn
|
|
200
|
+
description="全屏"
|
|
201
|
+
:tippy-options="{ content: '全屏' }"
|
|
202
|
+
@click="handleFullScreen"
|
|
203
|
+
>
|
|
204
|
+
<FullScreenIcon />
|
|
205
|
+
</ToolBtn>
|
|
206
|
+
</template>
|
|
207
|
+
|
|
208
|
+
<script setup lang="ts">
|
|
209
|
+
import { ToolBtn, FullScreenIcon } from '@blueking/chat-x';
|
|
210
|
+
|
|
211
|
+
const handleFullScreen = () => {
|
|
212
|
+
// 进入全屏逻辑
|
|
213
|
+
};
|
|
214
|
+
</script>
|
|
215
|
+
```
|
|
191
216
|
|
|
192
217
|
## API
|
|
193
218
|
|
|
@@ -195,7 +220,7 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
195
220
|
|
|
196
221
|
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
197
222
|
| ------------ | -------------------------------------------------------------------------- | ---- | ------ | ------------------------------------------------------------------------------------------------------------------ |
|
|
198
|
-
| id | `keyof typeof ToolIconsMap` |
|
|
223
|
+
| id | `keyof typeof ToolIconsMap` | 否 | — | 按钮标识;在 `ToolIconsMap` 中时渲染对应 SVG 图标,否则渲染 `name` 文本;使用插槽自定义内容时可省略 |
|
|
199
224
|
| name | `string` | 否 | — | 按钮名称;`id` 无对应图标时作为文本内容渲染 |
|
|
200
225
|
| description | `string` | 否 | — | Tippy tooltip 内容;`disabled=true` 时不显示 tooltip |
|
|
201
226
|
| active | `boolean` | 否 | — | 激活态;`true` 时追加 `.is-active`(字色由 `id` 决定:`like`/`activeLike` 为蓝色 `#3a84ff`,其他为红色 `#E71818`) |
|
|
@@ -208,12 +233,18 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
208
233
|
| ------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
209
234
|
| click | `(data: IToolBtn & { active?: boolean; disabled?: boolean }, event: MouseEvent)` | 点击时触发;`data` 为组件当前全量 props(含 `active`/`disabled`);`disabled=true` 时不触发 |
|
|
210
235
|
|
|
236
|
+
### Slots
|
|
237
|
+
|
|
238
|
+
| 插槽名 | 说明 |
|
|
239
|
+
| ------- | ------------------------------------------------------------------------------------------ |
|
|
240
|
+
| default | 按钮内容;传入时替换默认的图标/文本渲染逻辑,常用于自定义 SVG 图标(如全屏、退出全屏按钮) |
|
|
241
|
+
|
|
211
242
|
## 类型定义
|
|
212
243
|
|
|
213
244
|
```typescript
|
|
214
245
|
// 来自 @blueking/chat-x 导出
|
|
215
246
|
interface IToolBtn {
|
|
216
|
-
id
|
|
247
|
+
id?: keyof typeof ToolIconsMap; // 预置 ID;省略时走 name 文本或插槽
|
|
217
248
|
name?: string;
|
|
218
249
|
description?: string;
|
|
219
250
|
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
useFullScreen 将目标元素(或 document.documentElement)以浏览器原生全屏展示。 模块加载时一次性嗅探 requestFullscreen / webkitRequestFullscreen,返回 isSupported、只读 isFullScreen 与 enter/exit/toggle。 监听 fullscreenchange 同步 ESC 等外部退出;ChatContainer 侧栏全屏按钮使用此 composable。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **chat-container** — 侧栏 .ai-full-screen-wrapper 全屏切换
|
|
8
|
+
- **tool-btn** — 全屏按钮通过插槽渲染 FullScreenIcon
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
<!-- FULL DOC -->
|
|
12
|
+
|
|
13
|
+
# useFullScreen 全屏控制
|
|
14
|
+
|
|
15
|
+
> **分类**:composable
|
|
16
|
+
|
|
17
|
+
基于浏览器原生 Fullscreen API 的全屏控制组合式函数。模块加载时一次性嗅探标准 API 与 `webkit` 前缀(兼容旧版 Safari),在组件作用域销毁时自动移除事件监听。
|
|
18
|
+
|
|
19
|
+
## 工作原理
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
useFullScreen(target?)
|
|
23
|
+
│
|
|
24
|
+
├── resolveFullscreenApi()(模块级,仅执行一次)
|
|
25
|
+
│ requestFullscreen / webkitRequestFullscreen
|
|
26
|
+
│
|
|
27
|
+
├── isSupported = !!fullscreenApi
|
|
28
|
+
├── isFullScreen(readonly shallowRef,与浏览器真实状态同步)
|
|
29
|
+
│
|
|
30
|
+
├── enter() → target.requestFullscreen()
|
|
31
|
+
├── exit() → document.exitFullscreen()
|
|
32
|
+
├── toggle() → isFullScreen ? exit() : enter()
|
|
33
|
+
│
|
|
34
|
+
└── document.addEventListener(fullscreenchange, syncState)
|
|
35
|
+
syncState:指定 target 时,仅当 fullscreenElement === target 视为全屏
|
|
36
|
+
onScopeDispose 时移除监听
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
> **注意**:`enter()` 可能因缺少用户手势等原因被浏览器拒绝,内部会静默捕获异常,避免未处理的 Promise rejection。
|
|
40
|
+
|
|
41
|
+
## 基础用法
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<template>
|
|
45
|
+
<div>
|
|
46
|
+
<div ref="panelRef" class="demo-panel">
|
|
47
|
+
<p>可全屏展示的面板内容</p>
|
|
48
|
+
</div>
|
|
49
|
+
<button :disabled="!isSupported" @click="enter">进入全屏</button>
|
|
50
|
+
<button :disabled="!isFullScreen" @click="exit">退出全屏</button>
|
|
51
|
+
<span>当前状态:{{ isFullScreen ? '全屏' : '窗口' }}</span>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script setup lang="ts">
|
|
56
|
+
import { useTemplateRef } from 'vue';
|
|
57
|
+
import { useFullScreen } from '@blueking/chat-x';
|
|
58
|
+
|
|
59
|
+
const panelRef = useTemplateRef<HTMLElement>('panelRef');
|
|
60
|
+
const { isSupported, isFullScreen, enter, exit } = useFullScreen(panelRef);
|
|
61
|
+
</script>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 在 ChatContainer 中的使用
|
|
65
|
+
|
|
66
|
+
`ChatContainer` 将侧栏包裹在 `.ai-full-screen-wrapper` 中,通过 `useFullScreen(fullScreenRef)` 控制侧栏全屏;Tab 栏 `#setting` 插槽内的 `ToolBtn` 使用自定义插槽渲染 `FullScreenIcon` / `UnFullScreenIcon`。
|
|
67
|
+
|
|
68
|
+
详见 [ChatContainer 侧栏全屏](../components/molecular/chat-container.md#侧栏全屏)。
|
|
69
|
+
|
|
70
|
+
## API
|
|
71
|
+
|
|
72
|
+
### 参数
|
|
73
|
+
|
|
74
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
75
|
+
| ------ | ---- | ------ | ---- |
|
|
76
|
+
| target | `MaybeRef<HTMLElement \| null>` | — | 需要全屏的目标元素;省略时回退到 `document.documentElement` |
|
|
77
|
+
|
|
78
|
+
### 返回值
|
|
79
|
+
|
|
80
|
+
| 属性名 | 类型 | 说明 |
|
|
81
|
+
| ------ | ---- | ---- |
|
|
82
|
+
| isSupported | `boolean` | 当前环境是否支持 Fullscreen API(SSR 或不支持时为 `false`) |
|
|
83
|
+
| isFullScreen | `Readonly<ShallowRef<boolean>>` | 只读响应式全屏状态;与浏览器真实状态同步(含 ESC 退出) |
|
|
84
|
+
| enter | `() => Promise<void>` | 进入全屏;已全屏或不受支持时无操作 |
|
|
85
|
+
| exit | `() => Promise<void>` | 退出全屏;当前无全屏元素时无操作 |
|
|
86
|
+
| toggle | `() => void` | 切换全屏状态 |
|
|
87
|
+
|
|
88
|
+
## 类型定义
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
import { useFullScreen } from '@blueking/chat-x';
|
|
92
|
+
import type { MaybeRef, Readonly, ShallowRef } from 'vue';
|
|
93
|
+
|
|
94
|
+
type UseFullScreenReturn = {
|
|
95
|
+
isSupported: boolean;
|
|
96
|
+
isFullScreen: Readonly<ShallowRef<boolean>>;
|
|
97
|
+
enter: () => Promise<void>;
|
|
98
|
+
exit: () => Promise<void>;
|
|
99
|
+
toggle: () => void;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// 调用签名
|
|
103
|
+
declare function useFullScreen(target?: MaybeRef<HTMLElement | null>): UseFullScreenReturn;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## 使用场景
|
|
107
|
+
|
|
108
|
+
- `ChatContainer` 侧栏执行情况 / 自定义 Tab 区域全屏查看
|
|
109
|
+
- 任意需要将局部 DOM 区域以浏览器原生全屏展示的交互面板
|
|
110
|
+
|
|
111
|
+
## 关联组件
|
|
112
|
+
|
|
113
|
+
- [ChatContainer](../components/molecular/chat-container.md) — 内置侧栏全屏按钮
|
|
114
|
+
- [ToolBtn](../components/atomic/tool-btn.md) — 全屏按钮自定义插槽
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "2.0.0",
|
|
3
|
-
"generatedAt": "2026-06-
|
|
3
|
+
"generatedAt": "2026-06-08T08:12:22.821Z",
|
|
4
4
|
"domains": {
|
|
5
5
|
"message": {
|
|
6
6
|
"label": "消息展示",
|
|
@@ -1054,6 +1054,24 @@
|
|
|
1054
1054
|
],
|
|
1055
1055
|
"docFile": "docs/use-custom-tab.md"
|
|
1056
1056
|
},
|
|
1057
|
+
{
|
|
1058
|
+
"name": "useFullScreen",
|
|
1059
|
+
"slug": "use-full-screen",
|
|
1060
|
+
"category": "composable",
|
|
1061
|
+
"description": "基于浏览器原生 Fullscreen API 的全屏控制组合式函数,自动嗅探标准与 WebKit 前缀,状态与 ESC 退出保持同步。",
|
|
1062
|
+
"aiSummary": "useFullScreen 将目标元素(或 document.documentElement)以浏览器原生全屏展示。 模块加载时一次性嗅探 requestFullscreen / webkitRequestFullscreen,返回 isSupported、只读 isFullScreen 与 enter/exit/toggle。 监听 fullscreenchange 同步 ESC 等外部退出;ChatContainer 侧栏全屏按钮使用此 composable。",
|
|
1063
|
+
"relatedComponents": [
|
|
1064
|
+
{
|
|
1065
|
+
"slug": "chat-container",
|
|
1066
|
+
"relation": "侧栏 .ai-full-screen-wrapper 全屏切换"
|
|
1067
|
+
},
|
|
1068
|
+
{
|
|
1069
|
+
"slug": "tool-btn",
|
|
1070
|
+
"relation": "全屏按钮通过插槽渲染 FullScreenIcon"
|
|
1071
|
+
}
|
|
1072
|
+
],
|
|
1073
|
+
"docFile": "docs/use-full-screen.md"
|
|
1074
|
+
},
|
|
1057
1075
|
{
|
|
1058
1076
|
"name": "useGlobalConfig",
|
|
1059
1077
|
"slug": "use-global-config",
|
package/dist/types/tool.d.ts
CHANGED
|
@@ -7,6 +7,6 @@ export declare enum MessageToolsStatus {
|
|
|
7
7
|
export type AITippyProps = Partial<Pick<TippyOptions, 'appendTo' | 'placement' | 'zIndex'>>;
|
|
8
8
|
export interface IToolBtn {
|
|
9
9
|
description?: string;
|
|
10
|
-
id
|
|
10
|
+
id?: keyof typeof ToolIconsMap;
|
|
11
11
|
name?: string;
|
|
12
12
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.43",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI,为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"vitepress": "2.0.0-alpha.16",
|
|
79
79
|
"vitest": "^4.0.18",
|
|
80
80
|
"vue-tsc": "^3.1.4",
|
|
81
|
-
"@blueking/chat-helper": "0.0.
|
|
81
|
+
"@blueking/chat-helper": "0.0.9"
|
|
82
82
|
},
|
|
83
83
|
"scripts": {
|
|
84
84
|
"dev": "vite --config vite.config.ts",
|