@tencentcloud/sdk-mcp 1.0.8 → 1.1.0
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/package.json +1 -1
- package/resource/doc/chatuikit/faq/vue_qa.md +0 -344
- package/resource/doc/chatuikit/react/create-group.md +22 -0
- package/resource/doc/chatuikit/react/login.md +2 -2
- package/resource/doc/chatuikit/vue/components/chat.md +5 -0
- package/resource/doc/chatuikit/vue/components/chatheader.md +3 -1
- package/resource/doc/chatuikit/vue/components/conversation-list.md +3 -0
- package/resource/doc/chatuikit/vue/components/message-input.md +4 -0
- package/resource/doc/chatuikit/vue/create-group.md +26 -0
- package/resource/doc/chatuikit/vue/init.md +35 -0
- package/resource/doc/chatuikit/vue/integration.md +7 -1
- package/tools/chat/create-group.js +29 -0
- package/tools/chat/create-group.js.map +1 -0
- package/tools/chat/get-web-chat-component-detail.js +0 -1
- package/tools/chat/get-web-chat-component-detail.js.map +1 -1
- package/tools/chat/get-web-chat-integration.js +1 -1
- package/tools/chat/get-web-chat-integration.js.map +1 -1
- package/tools/chat/{get-web-chat-uikit-login.js → get-web-chat-uikit-init.js} +5 -5
- package/tools/chat/get-web-chat-uikit-init.js.map +1 -0
- package/tools/common/present-framework-choice.js +9 -18
- package/tools/common/present-framework-choice.js.map +1 -1
- package/tools/common/record-prompt.js +3 -4
- package/tools/common/record-prompt.js.map +1 -1
- package/tools/common/record-result.js +4 -4
- package/tools/common/record-result.js.map +1 -1
- package/tools/index.js +4 -2
- package/tools/index.js.map +1 -1
- package/utils/handle-component-name.js +2 -2
- package/utils/handle-component-name.js.map +1 -1
- package/resource/doc/chatuikit/vue/components/MessageInput.md +0 -546
- package/resource/doc/chatuikit/vue/components/login.md +0 -29
- package/resource/doc/chatuikit/vue/login.md +0 -29
- package/resource/doc/chatuikit/vue3/components/MessageInput.md +0 -546
- package/resource/doc/chatuikit/vue3/components/MessageList.md +0 -385
- package/resource/doc/chatuikit/vue3/components/avatar.md +0 -105
- package/resource/doc/chatuikit/vue3/components/chatheader.md +0 -153
- package/resource/doc/chatuikit/vue3/components/component-list.md +0 -88
- package/resource/doc/chatuikit/vue3/components/userpicker.md +0 -256
- package/resource/doc/chatuikit/vue3/integration.md +0 -218
- package/tools/call/get-native-call-integration-guide.js +0 -35
- package/tools/call/get-native-call-integration-guide.js.map +0 -1
- package/tools/call/get-web-call-integration-guide.js +0 -34
- package/tools/call/get-web-call-integration-guide.js.map +0 -1
- package/tools/chat/get-native-chat-integration-guide.js +0 -33
- package/tools/chat/get-native-chat-integration-guide.js.map +0 -1
- package/tools/chat/get-web-chat-integration-guide.js +0 -42
- package/tools/chat/get-web-chat-integration-guide.js.map +0 -1
- package/tools/chat/get-web-chat-uikit-login.js.map +0 -1
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
# atomicx 组件库清单与组件的适用场景与注意事项
|
|
2
|
-
|
|
3
|
-
## 组件清单
|
|
4
|
-
|
|
5
|
-
共 25 个组件:
|
|
6
|
-
|
|
7
|
-
### 适用于聊天场景的组件
|
|
8
|
-
|
|
9
|
-
1. ConversationList
|
|
10
|
-
会话列表组件,适用于聊天场景,以纵向列表形态,可以通过点击切换会话,如果仅需要聊天不需要该组件
|
|
11
|
-
2. MessageInput
|
|
12
|
-
消息输入组件,聊天场景的核心组件,可以发送聊天消息,需要发送消息则必须使用该组件
|
|
13
|
-
3. MessageList
|
|
14
|
-
消息列表组件,聊天场景的核心组件,可以显示聊天消息列表,支持消息的上下滑动,聊天场景必须使用该组件
|
|
15
|
-
4. ContactList
|
|
16
|
-
联系人列表组件,适用于聊天场景,可以显示和管理用户联系人,如果仅需要聊天不需要该组件
|
|
17
|
-
5. ChatSetting
|
|
18
|
-
聊天设置组件,适用于聊天场景,管理聊天相关配置,比如置顶、免打扰,群聊加人、踢人、管理员管理、禁言等,如果仅需要聊天不需要该组件
|
|
19
|
-
6. Search
|
|
20
|
-
搜索组件,用于搜索消息、用户等内容,如果仅需要聊天不需要该组件
|
|
21
|
-
|
|
22
|
-
### 适用于会议场景的组件
|
|
23
|
-
|
|
24
|
-
1. CameraButton
|
|
25
|
-
摄像头控制按钮,仅适用于会议场景,用于开启/关闭摄像头
|
|
26
|
-
2. StreamView
|
|
27
|
-
视频流显示组件,仅适用于会议场景,用于显示视频流
|
|
28
|
-
3. UserList
|
|
29
|
-
用户列表组件,仅适用于会议场景,显示会议或房间中的用户
|
|
30
|
-
4. VideoSetting
|
|
31
|
-
视频设置组件,仅适用于会议场景,用于摄像头、画质等视频配置
|
|
32
|
-
5. VideoSettingPanel
|
|
33
|
-
视频设置面板,仅适用于会议场景,提供完整的视频配置界面
|
|
34
|
-
6. AudioSetting
|
|
35
|
-
音频设置组件,仅适用于会议场景,可以设置麦克风、音量等音频设备配置
|
|
36
|
-
7. AudioSettingPanel
|
|
37
|
-
音频设置面板,仅适用于会议场景,提供完整的音频配置界面
|
|
38
|
-
8. BarrageInput
|
|
39
|
-
弹幕输入组件,适用于会议、直播场景,用于发送直播弹幕消息
|
|
40
|
-
9. BarrageList
|
|
41
|
-
弹幕列表组件,适用于会议、直播场景,显示直播间的弹幕消息
|
|
42
|
-
10. UserPicker
|
|
43
|
-
用户选择器,适用于会议、直播场景,用于邀请用户或分配权限
|
|
44
|
-
11. MicButton
|
|
45
|
-
麦克风控制按钮,适用于会议、直播场景,用于静音/取消静音
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
### 适用于直播场景的组件
|
|
49
|
-
|
|
50
|
-
1. CoGuestPanel
|
|
51
|
-
连麦嘉宾管理面板,仅适用于直播场景,用于直播连麦功能
|
|
52
|
-
2. LiveAudienceList
|
|
53
|
-
直播观众列表,仅适用于直播场景,显示当前直播间的观众
|
|
54
|
-
3. LiveList
|
|
55
|
-
直播房间列表,仅适用于直播场景,展示可用的直播房间
|
|
56
|
-
4. LiveMonitorView
|
|
57
|
-
直播监控视图,仅适用于直播场景,用于直播管理和监控
|
|
58
|
-
5. LiveScenePanel
|
|
59
|
-
直播场景控制面板,仅适用于直播场景,管理直播场景和效果
|
|
60
|
-
6. LiveStreamView
|
|
61
|
-
直播视频流显示组件,仅适用于直播场景,播放直播画面
|
|
62
|
-
7. StreamMixer
|
|
63
|
-
流混合器组件,仅适用于直播场景,用于多路视频流合成
|
|
64
|
-
8. BarrageInput
|
|
65
|
-
弹幕输入组件,适用于会议、直播场景,用于发送直播弹幕消息
|
|
66
|
-
9. BarrageList
|
|
67
|
-
弹幕列表组件,适用于会议、直播场景,显示直播间的弹幕消息
|
|
68
|
-
10. UserPicker
|
|
69
|
-
用户选择器,适用于会议、直播场景,用于邀请用户或分配权限
|
|
70
|
-
11. MicButton
|
|
71
|
-
麦克风控制按钮,适用于会议、直播场景,用于静音/取消静音
|
|
72
|
-
|
|
73
|
-
### 通用组件
|
|
74
|
-
|
|
75
|
-
1. Avatar
|
|
76
|
-
通用头像组件,显示用户头像/在线状态/消息未读数
|
|
77
|
-
2. UserPicker
|
|
78
|
-
用户选择器,用于发起群聊、发起群视频、群语音等选择用户的场景
|
|
79
|
-
|
|
80
|
-
## 注意事项
|
|
81
|
-
|
|
82
|
-
在开始集成任何组件到真实项目之前,**必须**首先确保已经调用以下工具获取到了集成文档,并根据文档进行集成:
|
|
83
|
-
|
|
84
|
-
1. 当创建真实的项目时,请调用 MCP Tools get_atomicx_integration_guide(framework) 的组件集成文档
|
|
85
|
-
2. 当选择使用的组件时,应先考虑满足需求的最少组件,再考虑推荐可额外使用的扩展组件,不要放大需求
|
|
86
|
-
3. 不同场景适用的组件有交集
|
|
87
|
-
4. 根据用户需求,判断有没有可能是一个综合场景,比如聊天 + 直播,概率较低,应该谨慎
|
|
88
|
-
5. 如需了解具体组件的使用方法,请询问用户:"你可以问 ${componentname} 怎么用?" 这样的问题
|
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
## 概述
|
|
2
|
-
|
|
3
|
-
UserPicker 是一个功能强大的用户选择器组件,支持列表和树形两种显示模式。组件提供了搜索、多选、懒加载、自定义渲染等功能,适用于用户选择、组织架构选择、权限分配等业务场景。组件内置了选择状态管理、搜索过滤、树形展开等复杂逻辑,提供了简洁易用的 API 接口。
|
|
4
|
-
|
|
5
|
-
## Props 速查表
|
|
6
|
-
|
|
7
|
-
| 字段 | 类型 | 默认值 | 描述 |
|
|
8
|
-
| -------------------- | -------------------------------------------- | -------------------------- | ----------- |
|
|
9
|
-
| displayMode | `'list' \| 'tree'` | 必填 | 显示模式,列表或树形 |
|
|
10
|
-
| dataSource | `UserPickerDataSource<T>` | `[]` | 数据源 |
|
|
11
|
-
| defaultSelectedItems | `Array<{ key: string; [key: string]: any }>` | `[]` | 默认选中项 |
|
|
12
|
-
| lockedItems | `Array<{ key: string; [key: string]: any }>` | `[]` | 锁定项(不可取消选择) |
|
|
13
|
-
| maxCount | `number` | `Number.POSITIVE_INFINITY` | 最大选择数量 |
|
|
14
|
-
| minCount | `number` | `0` | 最小选择数量 |
|
|
15
|
-
| enableSearch | `boolean` | `true` | 是否启用搜索功能 |
|
|
16
|
-
| searchPlaceholder | `string` | `undefined` | 搜索框占位符 |
|
|
17
|
-
| renderItem | `Function` | `undefined` | 自定义渲染函数 |
|
|
18
|
-
| onSelectedChange | `Function` | `undefined` | 选择变化回调 |
|
|
19
|
-
| onMaxCountExceed | `Function` | `undefined` | 超出最大数量回调 |
|
|
20
|
-
| onSearch | `Function` | `undefined` | 搜索回调 |
|
|
21
|
-
| onReachEnd | `Function` | `undefined` | 列表模式滚动到底部回调 |
|
|
22
|
-
| onExpand | `Function` | `undefined` | 树形模式展开回调 |
|
|
23
|
-
|
|
24
|
-
## Ref expose 方法速查表
|
|
25
|
-
|
|
26
|
-
|方法名 | 参数 | 返回值 | 描述 |
|
|
27
|
-
| -------- | ---- | ---- | ---- |
|
|
28
|
-
| getSelectedItems | 无 | UserPickerResult<T> | 获取当前选中的项目 |
|
|
29
|
-
| updateTreeData | nodeKey: string, partialNode: Partial<UserPickerNode<T>> | void | 更新树形模式节点数据
|
|
30
|
-
|
|
31
|
-
## Props 详细介绍
|
|
32
|
-
|
|
33
|
-
### displayMode
|
|
34
|
-
|
|
35
|
-
- `类型`: `'list' | 'tree'`
|
|
36
|
-
- `描述`:组件的显示模式。`list` 模式显示平铺列表,`tree` 模式显示树形结构,支持层级展开和懒加载。
|
|
37
|
-
|
|
38
|
-
### dataSource
|
|
39
|
-
|
|
40
|
-
- `类型`: `UserPickerDataSource<T>`
|
|
41
|
-
- `描述`:组件的数据源,根据 displayMode 的不同接受不同的数据结构,默认值为 `[]`。
|
|
42
|
-
|
|
43
|
-
```typescript
|
|
44
|
-
// 列表模式数据结构
|
|
45
|
-
interface UserPickerRow<T = unknown> {
|
|
46
|
-
key: string; // 唯一标识符
|
|
47
|
-
label: string; // 显示名称
|
|
48
|
-
avatarUrl?: string; // 头像URL
|
|
49
|
-
extraData?: T; // 扩展数据
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// 树形模式数据结构
|
|
53
|
-
interface UserPickerNode<T = unknown> {
|
|
54
|
-
key: string; // 唯一标识符
|
|
55
|
-
label: string; // 显示名称
|
|
56
|
-
isLeafNode: boolean; // 是否为叶子节点
|
|
57
|
-
avatarUrl?: string; // 头像URL
|
|
58
|
-
lazyLoad?: boolean; // 是否支持懒加载
|
|
59
|
-
children?: Array<UserPickerNode<T>>; // 子节点
|
|
60
|
-
extraData?: T; // 扩展数据
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export type UserPickerDataSource<T = unknown> = Array<UserPickerRow<T>> | Array<UserPickerNode<T>>;
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
#### Example 1: 列表模式数据源
|
|
67
|
-
|
|
68
|
-
```vue
|
|
69
|
-
<template>
|
|
70
|
-
<UserPicker
|
|
71
|
-
display-mode="list"
|
|
72
|
-
:data-source="listData"
|
|
73
|
-
@selected-change="handleSelectionChange"
|
|
74
|
-
/>
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<script setup lang="ts">
|
|
78
|
-
import { ref } from 'vue';
|
|
79
|
-
import { UserPicker } from 'tuikit-atomicx-vue3';
|
|
80
|
-
import type { UserPickerRow } from 'tuikit-atomicx-vue3/types';
|
|
81
|
-
|
|
82
|
-
// 用户列表数据
|
|
83
|
-
const listData = ref<UserPickerRow[]>([
|
|
84
|
-
{
|
|
85
|
-
key: 'user1',
|
|
86
|
-
label: '张三',
|
|
87
|
-
avatarUrl: 'https://example.com/avatar1.jpg',
|
|
88
|
-
extraData: { department: '技术部', role: '前端工程师' }
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
key: 'user2',
|
|
92
|
-
label: '李四',
|
|
93
|
-
avatarUrl: 'https://example.com/avatar2.jpg',
|
|
94
|
-
extraData: { department: '产品部', role: '产品经理' }
|
|
95
|
-
}
|
|
96
|
-
]);
|
|
97
|
-
|
|
98
|
-
const handleSelectionChange = (selectedItems: any[]) => {
|
|
99
|
-
console.log('选中的用户:', selectedItems);
|
|
100
|
-
};
|
|
101
|
-
</script>
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### defaultSelectedItems
|
|
105
|
-
|
|
106
|
-
- `类型`: `Array<{ key: string; [key: string]: any }>`
|
|
107
|
-
- `描述`:默认选中的项目列表,通过 key 字段标识选中项,默认值为 `[]`。
|
|
108
|
-
|
|
109
|
-
### lockedItems
|
|
110
|
-
|
|
111
|
-
- `类型`: `Array<{ key: string; [key: string]: any }>`
|
|
112
|
-
- `描述`:锁定的项目列表,这些项目将被强制选中且用户无法取消选择,默认值为 `[]`。
|
|
113
|
-
|
|
114
|
-
### maxCount
|
|
115
|
-
|
|
116
|
-
- `类型`: `number`
|
|
117
|
-
- `描述`:允许选择的最大数量限制,超出时会触发 onMaxCountExceed 回调,默认值为 `Number.POSITIVE_INFINITY`。
|
|
118
|
-
|
|
119
|
-
### minCount
|
|
120
|
-
|
|
121
|
-
- `类型`: `number`
|
|
122
|
-
- `描述`:要求选择的最小数量,用于表单验证等场景,默认值为 `0`。
|
|
123
|
-
|
|
124
|
-
### enableSearch
|
|
125
|
-
|
|
126
|
-
- `类型`: `boolean`
|
|
127
|
-
- `描述`:是否启用搜索功能,启用后会显示搜索框,默认值为 `true`。
|
|
128
|
-
|
|
129
|
-
### searchPlaceholder
|
|
130
|
-
|
|
131
|
-
- `类型`: `string`
|
|
132
|
-
- `描述`:搜索框的占位符文本,如果不设置则使用默认的国际化文本,默认值为 `undefined`。
|
|
133
|
-
|
|
134
|
-
### renderItem
|
|
135
|
-
|
|
136
|
-
- `类型`: `(data: UserPickerRow<T> | UserPickerNode<T>) => any`
|
|
137
|
-
- `描述`:自定义项目渲染函数,可以自定义每个选项的显示内容和样式,默认值为 `undefined`。
|
|
138
|
-
|
|
139
|
-
```typescript
|
|
140
|
-
type RenderItemFunction<T> = (data: UserPickerRow<T> | UserPickerNode<T>) => VNode | string;
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
#### Example: 自定义渲染函数
|
|
144
|
-
|
|
145
|
-
```vue
|
|
146
|
-
<template>
|
|
147
|
-
<UserPicker
|
|
148
|
-
display-mode="list"
|
|
149
|
-
:data-source="userData"
|
|
150
|
-
:render-item="customRenderItem"
|
|
151
|
-
/>
|
|
152
|
-
</template>
|
|
153
|
-
|
|
154
|
-
<script setup lang="ts">
|
|
155
|
-
import { h } from 'vue';
|
|
156
|
-
import { UserPicker } from 'tuikit-atomicx-vue3';
|
|
157
|
-
import type { UserPickerRow } from 'tuikit-atomicx-vue3/types';
|
|
158
|
-
|
|
159
|
-
const userData = ref<UserPickerRow[]>([
|
|
160
|
-
{
|
|
161
|
-
key: 'user1',
|
|
162
|
-
label: '张三',
|
|
163
|
-
extraData: { status: 'online', department: '技术部' }
|
|
164
|
-
}
|
|
165
|
-
]);
|
|
166
|
-
|
|
167
|
-
// 自定义渲染函数,显示用户状态和部门信息
|
|
168
|
-
const customRenderItem = (data: UserPickerRow) => {
|
|
169
|
-
return h('div', { class: 'custom-user-item' }, [
|
|
170
|
-
h('div', { class: 'user-name' }, data.label),
|
|
171
|
-
h('div', { class: 'user-info' }, [
|
|
172
|
-
h('span', {
|
|
173
|
-
class: `status ${data.extraData?.status}`
|
|
174
|
-
}, data.extraData?.status === 'online' ? '在线' : '离线'),
|
|
175
|
-
h('span', { class: 'department' }, data.extraData?.department)
|
|
176
|
-
])
|
|
177
|
-
]);
|
|
178
|
-
};
|
|
179
|
-
</script>
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
### onSelectedChange
|
|
183
|
-
|
|
184
|
-
- `类型`: `(selectedItems: UserPickerResult<T>) => void`
|
|
185
|
-
- `描述`:选择状态变化时的回调函数,会传入当前选中的所有项目,默认值为 `undefined`。应该尽量减少使用避免频繁的触发回调函数。
|
|
186
|
-
|
|
187
|
-
```typescript
|
|
188
|
-
interface UserPickerResultItem<T = unknown> {
|
|
189
|
-
key: string;
|
|
190
|
-
label: string;
|
|
191
|
-
avatarUrl?: string;
|
|
192
|
-
isLeafNode?: boolean; // 仅树形模式有意义
|
|
193
|
-
extraData?: T;
|
|
194
|
-
path?: string[]; // 仅树形模式有意义,记录节点路径
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
type UserPickerResult<T = unknown> = Array<UserPickerResultItem<T>>;
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
### onMaxCountExceed
|
|
201
|
-
|
|
202
|
-
- `类型`: `(selectedItems: UserPickerResult<T>) => void`
|
|
203
|
-
- `描述`:当选择数量超出 maxCount 限制时触发的回调函数,默认值为 `undefined`。
|
|
204
|
-
|
|
205
|
-
### onSearch
|
|
206
|
-
|
|
207
|
-
- `类型`: `(value: string) => void`
|
|
208
|
-
- `描述`:搜索输入变化时的回调函数,可用于实现服务端搜索,默认值为 `undefined`。
|
|
209
|
-
|
|
210
|
-
### onReachEnd
|
|
211
|
-
|
|
212
|
-
- `类型`: `() => void`
|
|
213
|
-
- `描述`:列表模式下滚动到底部时的回调函数,常用于实现分页加载,默认值为 `undefined`。
|
|
214
|
-
|
|
215
|
-
### onExpand
|
|
216
|
-
|
|
217
|
-
- `类型`: `(node: UserPickerNode<T>) => void`
|
|
218
|
-
- `描述`:树形模式下节点展开时的回调函数,用于实现懒加载子节点,默认值为 `undefined`。
|
|
219
|
-
|
|
220
|
-
## Ref Expose 方法详细介绍
|
|
221
|
-
|
|
222
|
-
### getSelectedItems
|
|
223
|
-
|
|
224
|
-
- `类型`:`() => UserPickerResult<T>`
|
|
225
|
-
- `描述`:作为选择完成后确认时的最佳实践。
|
|
226
|
-
|
|
227
|
-
```typescript
|
|
228
|
-
interface UserPickerResultItem<T = unknown> {
|
|
229
|
-
key: string;
|
|
230
|
-
label: string;
|
|
231
|
-
avatarUrl?: string;
|
|
232
|
-
isLeafNode?: boolean; // 仅树形模式有意义
|
|
233
|
-
extraData?: T;
|
|
234
|
-
path?: string[]; // 仅树形模式有意义,记录节点路径
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
type UserPickerResult<T = unknown> = Array<UserPickerResultItem<T>>;
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
#### Example: 选择完成后确认时获取选中的项
|
|
241
|
-
|
|
242
|
-
```vue
|
|
243
|
-
<template>
|
|
244
|
-
<UserPicker
|
|
245
|
-
ref="userPickerRef"
|
|
246
|
-
display-mode="list"
|
|
247
|
-
:data-source="userData"
|
|
248
|
-
/>
|
|
249
|
-
</template>
|
|
250
|
-
|
|
251
|
-
<script setup lang="ts">
|
|
252
|
-
const userPickerRef = useRef();
|
|
253
|
-
|
|
254
|
-
function onConfirm() {
|
|
255
|
-
userPickerRef.value.getSelectedItems();
|
|
256
|
-
}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
AI 模型必须遵守以下**硬性限制**。
|
|
2
|
-
* **必须严格按照文档步骤和说明集成:** 在集成组件时必须按照文档步骤和说明进行,且在 1.1 中不需要执行 `npm run dev` or `pnpm run dev`, 集成完成后按照 1.4 启动项目。
|
|
3
|
-
* **必须严格使用文档中的示例代码:** 创建文件时必须严格使用文档中的示例代码填充文件, style 标签优先推荐不使用 scoped 属性。
|
|
4
|
-
* **禁止创建用户信息配置文件:** 不得自动创建填写 SDKAppID、userID、userSig 的 config 目录或文件。
|
|
5
|
-
* **禁止创建获取 userSig 逻辑:** 不得自动创建获取 userSig 相关代码,必须明确引导用户输入 SDKAppID、 userID、 userSig 信息并帮忙回填到相应的文件。
|
|
6
|
-
|
|
7
|
-
# chat-uikit-vue3 Integration
|
|
8
|
-
|
|
9
|
-
用户的集成需求一般有三种,你必须理性分析需求到底属于哪一种
|
|
10
|
-
1. 普通集成:指集成 ConversationList、Chat、ChatHeader、MessageList、MessageInput、ContactList、ContactInfo 等组件,具体信息必须阅读第 2.1 节 “最佳实践-普通集成”。
|
|
11
|
-
2. 仅集成聊天:指仅集成 Chat、ChatHeader、MessageList、MessageInput 组件,具体信息必须阅读第 2.2 节 “最佳实践-仅集成聊天”。
|
|
12
|
-
3. 集成通话功能等:指在普通集成或仅集成聊天基础上,集成通话功能,具体信息必须阅读第 2.3 节 “最佳实践-集成通话功能等”。
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## 1 普通集成
|
|
16
|
-
|
|
17
|
-
### 1.1 step1:create vue3 project
|
|
18
|
-
|
|
19
|
-
if you don't have a vue3 project, you can use vite create a vue3 project. otherwise, you can skip this step.
|
|
20
|
-
|
|
21
|
-
requirement: vue3: ^3.0.0, nodejs: ^22.0.0.
|
|
22
|
-
|
|
23
|
-
if it is a new project, guide the user to use vite to create a vue3 project manually, and then continue with step 1.2. if it is an existing project, skip this step and continue with step 1.2.
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
pnpm create vite@latest
|
|
27
|
-
# skip some settings
|
|
28
|
-
cd ${your-vue-project-name}
|
|
29
|
-
pnpm install
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### 1.2 step2: install chat-uikit-vue3
|
|
33
|
-
|
|
34
|
-
use npm or pnpm to install @tencentcloud/chat-uikit-vue3@latest @tencentcloud/call-uikit-vue@latest
|
|
35
|
-
|
|
36
|
-
### 1.3 step3: add main content to your project
|
|
37
|
-
|
|
38
|
-
```vue
|
|
39
|
-
<template>
|
|
40
|
-
<UIKitProvider language="zh-CN">
|
|
41
|
-
<div class="chat-layout">
|
|
42
|
-
<div class="sidebar" style="width: 300px;">
|
|
43
|
-
<div class="tab-header">
|
|
44
|
-
<button
|
|
45
|
-
:class="['tab-button', { active: activeTab === 'conversations' }]"
|
|
46
|
-
@click="activeTab = 'conversations'"
|
|
47
|
-
>
|
|
48
|
-
会话
|
|
49
|
-
</button>
|
|
50
|
-
<button
|
|
51
|
-
:class="['tab-button', { active: activeTab === 'contacts' }]"
|
|
52
|
-
@click="activeTab = 'contacts'"
|
|
53
|
-
>
|
|
54
|
-
联系人
|
|
55
|
-
</button>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<div class="tab-content">
|
|
59
|
-
<ConversationList v-if="activeTab === 'conversations'" />
|
|
60
|
-
<ContactList v-else />
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<Chat style="flex: 1;" v-if="activeTab === 'conversations'">
|
|
65
|
-
<ChatHeader />
|
|
66
|
-
<MessageList />
|
|
67
|
-
<MessageInput />
|
|
68
|
-
</Chat>
|
|
69
|
-
<ContactInfo v-else style="flex: 1;" @send-message="handleSendMessage" @enter-group="handleSendMessage" />
|
|
70
|
-
</div>
|
|
71
|
-
<Teleport to="body">
|
|
72
|
-
<TUICallKit style="position: fixed; z-index: 1000;"/>
|
|
73
|
-
</Teleport>
|
|
74
|
-
</UIKitProvider>
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<script setup lang="ts">
|
|
78
|
-
import { ref } from 'vue';
|
|
79
|
-
import {
|
|
80
|
-
ConversationList,
|
|
81
|
-
Chat,
|
|
82
|
-
MessageList,
|
|
83
|
-
MessageInput,
|
|
84
|
-
ChatHeader,
|
|
85
|
-
ContactList,
|
|
86
|
-
ContactInfo,
|
|
87
|
-
UIKitProvider,
|
|
88
|
-
useLoginState,
|
|
89
|
-
} from '@tencentcloud/chat-uikit-vue3';
|
|
90
|
-
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
|
|
91
|
-
|
|
92
|
-
const userID = ''; // TODO: Replace with your userID
|
|
93
|
-
const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
|
|
94
|
-
const userSig = ''; // TODO: Replace with your userSig
|
|
95
|
-
|
|
96
|
-
const { login } = useLoginState();
|
|
97
|
-
|
|
98
|
-
const activeTab = ref<'conversations' | 'contacts'>('conversations');
|
|
99
|
-
|
|
100
|
-
login({
|
|
101
|
-
sdkAppId : SDKAppID,
|
|
102
|
-
userId: userID,
|
|
103
|
-
userSig: userSig,
|
|
104
|
-
})
|
|
105
|
-
.then(() => {})
|
|
106
|
-
|
|
107
|
-
.catch(() => {});
|
|
108
|
-
const handleSendMessage = () => {
|
|
109
|
-
activeTab.value = 'conversations';
|
|
110
|
-
}
|
|
111
|
-
</script>
|
|
112
|
-
|
|
113
|
-
<style>
|
|
114
|
-
#app{margin:0;padding:0;text-align:left;}.chat-layout{width:100vw;height:100vh;display:flex;}.sidebar{display:flex;flex-direction:column;border-right:1px solid #e5e7eb;}.tab-header{display:flex;border-bottom:1px solid #e5e7eb;}.tab-button{flex:1;padding:12px 16px;background:none;border:none;cursor:pointer;font-size:14px;color:#6b7280;transition:all 0.2s;}.tab-button.active{color:#3b82f6;background-color:#eff6ff;border-bottom:2px solid #3b82f6;}.tab-content{flex:1;overflow:hidden;}
|
|
115
|
-
</style>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### 1.4 step4: start your project
|
|
119
|
-
```bash
|
|
120
|
-
pnpm run dev
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
## 2. 最佳实践
|
|
124
|
-
|
|
125
|
-
以下提到的组件通过 MCP Tools get_component_detail ${componenetname.tolowercase()} 获取。
|
|
126
|
-
以下提到的 state 通过 MCP Tools get_state_detail ${statename.tolowercase()} 获取。
|
|
127
|
-
|
|
128
|
-
### 2.1 最佳实践-普通集成
|
|
129
|
-
|
|
130
|
-
普通集成参考 1.3 节中的的代码示例。
|
|
131
|
-
|
|
132
|
-
重点:
|
|
133
|
-
1. 如果需要集成 ChatSetting 组件,请阅读 ChatHeader 的 ChatHeaderRight 插槽说明。
|
|
134
|
-
|
|
135
|
-
### 2.2 最佳实践-仅集成聊天
|
|
136
|
-
|
|
137
|
-
仅集成聊天视为普通集成但是仅保留 Chat 部分,参考 1.3 节中的的代码示例。但是仅保留 UIKitProvider、Chat、ChatHeader、MessageList、MessageInput 组件:
|
|
138
|
-
|
|
139
|
-
```vue
|
|
140
|
-
<template>
|
|
141
|
-
<UIKitProvider>
|
|
142
|
-
<Chat style="flex: 1;">
|
|
143
|
-
<ChatHeader />
|
|
144
|
-
<MessageList />
|
|
145
|
-
<MessageInput />
|
|
146
|
-
</Chat>
|
|
147
|
-
</UIKitProvider>
|
|
148
|
-
</template>
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
重点:
|
|
152
|
-
1. 由于仅集成聊天不使用 ConversationList,你需要使用 ConversationListState 的 useConversationListState 获取 activeConversation,然后调用 setActiveConversation 设置 activeConversation。
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
```vue
|
|
156
|
-
<script setup lang="ts">
|
|
157
|
-
import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
|
|
158
|
-
|
|
159
|
-
const { setActiveConversation } = useConversationListState();
|
|
160
|
-
|
|
161
|
-
const conversationID = ref(''); // define by yourself
|
|
162
|
-
|
|
163
|
-
onMounted(() => {
|
|
164
|
-
setActiveConversation(conversationID.value);
|
|
165
|
-
});
|
|
166
|
-
</script>
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
重点:
|
|
170
|
-
2. 如果需要集成 ChatSetting 组件,请阅读 ChatHeader 的 ChatHeaderRight 插槽说明。
|
|
171
|
-
|
|
172
|
-
### 2.3 最佳实践-集成通话功能等
|
|
173
|
-
|
|
174
|
-
集成通话功能需要在普通集成或仅集成聊天基础上,添加通话功能的代码。
|
|
175
|
-
|
|
176
|
-
引入 TUICallKit 组件:
|
|
177
|
-
```vue
|
|
178
|
-
<script setup lang="ts">
|
|
179
|
-
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
|
|
180
|
-
</script>
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
在合适的位置添加 TUICallKit 组件:
|
|
184
|
-
```vue
|
|
185
|
-
<Teleport to="body">
|
|
186
|
-
<TUICallKit style="position: fixed; z-index: 1000;"/>
|
|
187
|
-
</Teleport>
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
重点:
|
|
191
|
-
1. 需要在 ChatHeader 组件的 ChatHeaderRight 插槽中添加通话按钮。
|
|
192
|
-
2. 点击通话按钮调用以下方法:
|
|
193
|
-
2.1 阅读 ConversationListState 文档,通过 activeConversation 判断当前是单聊还是群聊。
|
|
194
|
-
2.2 如果是单聊,通过 `import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';` 引入 TUICallKitService 服务。通过 TUICallKitService 的 `calls` 方法发起通话。
|
|
195
|
-
```ts
|
|
196
|
-
try {
|
|
197
|
-
await TUICallKitServer.calls({
|
|
198
|
-
userIDList: [activeConversation.value.userProfile.userID],
|
|
199
|
-
type: TUICallType.VIDEO_CALL, // or TUICallType.AUDIO_CALL
|
|
200
|
-
});
|
|
201
|
-
} catch (error: any) {
|
|
202
|
-
console.error(`[TUICallKit] Failed to call the groupCall API. Reason:${error}`);
|
|
203
|
-
}
|
|
204
|
-
```
|
|
205
|
-
2.3 如果是群聊,需要阅读 UserPicker 组件文档,建议结合 Dialog 组件,弹出 UserPicker 组件。
|
|
206
|
-
阅读 GroupSettingState 文档,结合 GroupSettingState 的 `getGroupMemberList`、`allMembers` 等属性,获取群成员列表。
|
|
207
|
-
```ts
|
|
208
|
-
try {
|
|
209
|
-
await TUICallKitServer.calls({
|
|
210
|
-
userIDList: selectedItems.map((item: any) => item.key),
|
|
211
|
-
type: TUICallType.VIDEO_CALL, // or TUICallType.AUDIO_CALL
|
|
212
|
-
});
|
|
213
|
-
} catch (error: any) {
|
|
214
|
-
console.error(`[TUICallKit] Failed to call the groupCall API. Reason:${error}`);
|
|
215
|
-
}
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
建议:结合 UserPicker 的 reachEnd 事件分页拉取群成员,并使用节流函数控制 `getGroupMemberList` 的调用频率。
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import { getDocContent } from '../../utils/get-doc-content.js';
|
|
3
|
-
import { aegisClient } from '../../utils/aegis-client.js';
|
|
4
|
-
const description = `
|
|
5
|
-
|
|
6
|
-
This is a tool specifically designed for creating native mobile audio and video call applications. With the tool, you can achieve the following functions: | 这是一个专门负责创建移动端 native 音视频通话应用的工具,通过工具您可以实现以下功能:\n
|
|
7
|
-
1. Create a native audio and video calling app with functionality and UI similar to the audio and video calling capabilities in WeChat or WeChat for Business. | 1. 创建一个 native 音视频通话应用,功能和 UI 界面类似微信(WeChat)或者企业微信(企微)中音视频通话能力 \n
|
|
8
|
-
2. The tool provides Call UIKit component integration solutions for multiple platforms or frameworks, including flutter (cross-platform), android (native), and ios (native). You can choose one of these platforms or frameworks to build a mobile native audio and video call project. | 2. 工具提供 flutter(跨平台)、android(原生)、ios(原生) 多种平台或框架的 Call UIKit 组件集成方案,您可以根据需要选择其中一个平台或框架搭建一个移动端 native 音视频通话项目 \n
|
|
9
|
-
3. If no specific platform or framework is specified, to implement the function, you must first use the tools tool present_framework_choice to display the framework type selection interface | 3. 在没有指定特定平台或框架的情况下,要实现功能,必须优先使用 tools 工具 present_framework_choice 展示选择框架类型界面 \n
|
|
10
|
-
`;
|
|
11
|
-
function getResultText(params) {
|
|
12
|
-
const { sdkAppId = '', framework = '' } = params;
|
|
13
|
-
aegisClient.report({
|
|
14
|
-
name: 'get_native_call_uikit_integration',
|
|
15
|
-
ext1: sdkAppId,
|
|
16
|
-
ext2: framework,
|
|
17
|
-
});
|
|
18
|
-
return getDocContent(['tuicallkit', `${framework}`]);
|
|
19
|
-
}
|
|
20
|
-
const registryGetNativeCallIntegrationGuideTool = (mcpServer) => {
|
|
21
|
-
mcpServer.tool('get_native_call_uikit_integration', description, {
|
|
22
|
-
framework: z.enum(['flutter', 'android', 'ios']).describe('The platform type of the native call UIKit component library. You first need to choose which platform to use to create your chat application. Currently supported frameworks are: Flutter, Android, and iOS. | native call uikit 组件库的平台类型,您首先需要选择使用哪一种来平台来创建您的聊天应用,目前支持的框架有:flutter, android, ios。'),
|
|
23
|
-
sdkAppId: z.string().describe(`Your application's SDKAppID. | 您的应用的 SDKAppID。`),
|
|
24
|
-
secretKey: z.string().describe(`The secretKey of your SDKAppID. |您的 SDKAppID 的 secretKey。`),
|
|
25
|
-
}, (params) => ({
|
|
26
|
-
content: [
|
|
27
|
-
{
|
|
28
|
-
type: 'text',
|
|
29
|
-
text: getResultText(params),
|
|
30
|
-
}
|
|
31
|
-
]
|
|
32
|
-
}));
|
|
33
|
-
};
|
|
34
|
-
export { registryGetNativeCallIntegrationGuideTool };
|
|
35
|
-
//# sourceMappingURL=get-native-call-integration-guide.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-native-call-integration-guide.js","sourceRoot":"","sources":["../../../src/tools/call/get-native-call-integration-guide.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;;;CAMnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAG,SAAS,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAClD,WAAW,CAAC,MAAM,CAAC;QACjB,IAAI,EAAE,mCAAmC;QACzC,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,MAAM,yCAAyC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACzE,SAAS,CAAC,IAAI,CACZ,mCAAmC,EACnC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,oSAAoS,CAAC;QAC/V,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,gDAAgD,CAAC;QAC/E,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,2DAA2D,CAAC;KAC5F,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,yCAAyC,EAAE,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import { getDocContent } from '../../utils/get-doc-content.js';
|
|
3
|
-
import { aegisClient } from '../../utils/aegis-client.js';
|
|
4
|
-
const description = `
|
|
5
|
-
This is a tool specifically designed for creating web audio and video call applications. With the tool, you can achieve the following functions: | 这是一个专门负责创建 web 音视频通话应用的工具,通过工具您可以实现以下功能:\n
|
|
6
|
-
1. Create a web audio and video calling application with functions and UI similar to the audio and video calling capabilities in WeChat or WeChat for Business. | 1. 创建一个 web 音视频通话应用,功能和 UI 界面类似微信(WeChat)或者企业微信(企微)中音视频通话能力。 \n
|
|
7
|
-
2. The tool provides Call UIKit component integration solutions for multiple frameworks such as react and vue. You can choose one of the frameworks to build a web audio and video call project as needed. | 2. 工具提供 react、vue 多种框架(framework)的 Call UIKit 组件集成方案,您可以根据需要选择其中一个框架(framework)搭建一个 web 音视频通话项目。 \n
|
|
8
|
-
3. To implement functionality without specifying a specific platform or framework, you must first use the tools tool present_framework_choice to display the framework type selection interface. | 3. 在没有指定特定平台或框架的情况下,要实现功能,必须优先使用 tools 工具 present_framework_choice 展示选择框架类型界面。\n
|
|
9
|
-
`;
|
|
10
|
-
function getResultText(params) {
|
|
11
|
-
const { sdkAppId = '', framework = '' } = params;
|
|
12
|
-
aegisClient.report({
|
|
13
|
-
name: 'get_web_call_uikit_integration',
|
|
14
|
-
ext1: sdkAppId,
|
|
15
|
-
ext2: framework,
|
|
16
|
-
});
|
|
17
|
-
return getDocContent(['tuicallkit', `${framework}`]);
|
|
18
|
-
}
|
|
19
|
-
const registryGetWebCallIntegrationGuideTool = (mcpServer) => {
|
|
20
|
-
mcpServer.tool('get_web_call_uikit_integration', description, {
|
|
21
|
-
framework: z.enum(['react', 'vue']).describe('The platform type of the web call UIKit component library. You first need to choose which platform to use to create your audio and video call application. Currently supported frameworks are: React and Vue. | web call uikit 组件库的平台类型,您首先需要选择使用哪一种来平台来创建您的音视频通话应用,目前支持的框架有:react、 vue。'),
|
|
22
|
-
sdkAppId: z.string().optional().describe(`Your application's SDKAppID. | 您的应用的 SDKAppID。`),
|
|
23
|
-
// secretKey: z.string().describe(`The secretKey of your SDKAppID. |您的 SDKAppID 的 secretKey。`),
|
|
24
|
-
}, (params) => ({
|
|
25
|
-
content: [
|
|
26
|
-
{
|
|
27
|
-
type: 'text',
|
|
28
|
-
text: getResultText(params),
|
|
29
|
-
}
|
|
30
|
-
]
|
|
31
|
-
}));
|
|
32
|
-
};
|
|
33
|
-
export { registryGetWebCallIntegrationGuideTool };
|
|
34
|
-
//# sourceMappingURL=get-web-call-integration-guide.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-web-call-integration-guide.js","sourceRoot":"","sources":["../../../src/tools/call/get-web-call-integration-guide.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;;CAKnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAG,SAAS,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChD,WAAW,CAAC,MAAM,CAAC;QACnB,IAAI,EAAE,gCAAgC;QACtC,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,MAAM,sCAAsC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACtE,SAAS,CAAC,IAAI,CACZ,gCAAgC,EAChC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,0RAA0R,CAAC;QACxU,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,gDAAgD,CAAC;QAC1F,+FAA+F;KAChG,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,sCAAsC,EAAE,CAAC"}
|