@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

package/resource/doc/chatkit/vue/components/tuikit.md

@@ -0,0 +1,45 @@
+## TUIKit 介绍
+
+TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。
+基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
+TUIKit 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。
+
+## TUIKit 主要功能介绍
+
+TUIKit 主要分为 Chat、ConversationList、 ChatSetting 、ContactList、Search 几个 UI 子组件，每个 UI 组件负责展示不同的内容。
+TUIKit Web 端界面效果如下图所示：
+
+## Chat 重点功能介绍
+
+TUIChat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息，支持文字/表情/图片/视频/文件/自定义等消息类型，同时您还可以利用它对消息长按进行转发/撤回/引用、查询消息已读回执详情等。TUIChat Web 端界面效果如下图所示：
+| 消息界面 | 消息引用/撤回/转发 |
+| --- | --- |
+|  |  |
+
+| 消息快捷操作 | 消息已读回执 |
+| --- | --- |
+|  |  |
+
+## ConversationList 重点功能介绍
+
+ConversationList 主要负责会话列表的展示和编辑，包括会话置顶、会话消息免打扰、会话删除等功能。TUIConversation Web 端界面效果如下图所示：
+| 会话菜单 | 在线状态 |
+| --- | --- |
+|  |  |
+
+## Search 重点功能介绍
+
+| 全局搜索 | 会话内搜索 |
+| --- | --- |
+| 通过全局搜索，搜索所有包含“你好”的相关文本 | 搜索指定会话内所有文件消息 |
+
+## ChatSetting 重点功能介绍
+
+ChatSetting 主要负责群资料、群成员、群组权限的管理。TUIGroup Web 端界面效果如下图所示：
+| 群资料及管理 | 群成员管理 |
+| --- | --- |
+|  |  |
+
+## ContactList 重点功能介绍
+
+TUIContact 主要负责联系人的展示、权限设置等。TUIContact Web 端界面效果如下图所示：

package/resource/doc/{chatuikit → chatkit}/vue/components/userpicker.md

@@ -88,7 +88,7 @@ const listData = ref<UserPickerRow[]>([
     extraData: { department: '技术部', role: '前端工程师' }
   },
   {
-    key: 'user2', 
+    key: 'user2',
     label: '李四',
     avatarUrl: 'https://example.com/avatar2.jpg',
     extraData: { department: '产品部', role: '产品经理' }
@@ -169,8 +169,8 @@ const customRenderItem = (data: UserPickerRow) => {
   return h('div', { class: 'custom-user-item' }, [
     h('div', { class: 'user-name' }, data.label),
     h('div', { class: 'user-info' }, [
-      h('span', { 
-        class: `status ${data.extraData?.status}` 
+      h('span', {
+        class: `status ${data.extraData?.status}`
       }, data.extraData?.status === 'online' ? '在线' : '离线'),
       h('span', { class: 'department' }, data.extraData?.department)
     ])
@@ -253,4 +253,4 @@ const userPickerRef = useRef();
 
 function onConfirm() {
   userPickerRef.value.getSelectedItems();
-}
+}

package/resource/doc/{chatuikit → chatkit}/vue/faq.md

@@ -32,4 +32,4 @@ const isChatSettingShow = ref(false);
 >
   <ChatSetting />
 </el-drawer>
-```
+```

package/resource/doc/{chatuikit → chatkit}/vue/integration.md

@@ -1,30 +1,22 @@
 TUIKit 是基于腾讯云 Chat SDK 的一款 Vue 3 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
 
 > **说明：**
-> 
+>
 
 > 您好！我们正在开发一款即时通讯产品 UIKit，它基于腾讯云 Chat SDK，是一款 Vue3 UI 组件库，能帮助您快速集成并实现核心功能。
-> 
-
-> **为了更好地提升我们的产品，了解您的需求**，特邀请您[参与本次问卷调查](https://wj.qq.com/s2/25022971/d8b4/)。
-> 
+>
 
 > 您的反馈我们会**高度重视**，本问卷填写**仅需要 30 秒**！诚邀您的参与。
-> 
-
+>
 
 > **推荐使用更高效的 AI 集成助手**
-> 
+>
 
 > 我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率。
-> 
+>
 
 > [点击这里，立即体验 AI 集成](https://cloud.tencent.com/document/product/269/124481)
-> 
-
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/38ff95e4c9ec11f0a93d52540044a08e.png)
-
+>
 
 ## 关键概念
 
@@ -45,7 +37,6 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 8. Contact 提供联系人组件。
 
-
 ## 前提条件
 - Vue.js@^3.0.0
 
@@ -53,32 +44,25 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 - Node.js（Node.js ≥ 20.0.0，建议使用目前的 LTS v22 版本）
 
-
 ## 创建项目
 
 使用 Vite 创建一个新的名称为 **chat-example** 的 Vue3 项目。
 
 > **说明：**
-> 
+>
 
 > 高版本 Vite 需要使用最新的 Node.js 版本。
-> 
-
-
+>
 
 【shell】
 ``` bash
 npm create vite@latest
 ```
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/f67b7f3a886611f0b321525400e889b2.png)
-
-
 ## 下载并导入组件
 
 创建项目完成后，切换到项目所在目录。
 
-
 【shell】
 ``` bash
 cd chat-example
@@ -87,7 +71,6 @@ npm install
 
 ### 步骤1：安装依赖
 
-
 【shell】
 ``` bash
 npm i @tencentcloud/chat-uikit-vue3
@@ -96,13 +79,12 @@ npm i @tencentcloud/chat-uikit-vue3
 ### 步骤2：引入组件
 
 > **注意：**
-> 
-> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 [步骤3](https://write.woa.com/#e0579535-1fc9-4344-8878-ed25ced85819) 中获取相关信息后进行替换。
+>
+> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 > - 为了尊重版权，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
-> ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/d9f2ac13886711f0bd05525400454e06.png)
-> 
-
+>
+>
 
 #### 2.1 搭建主界面
 
@@ -113,17 +95,17 @@ npm i @tencentcloud/chat-uikit-vue3
     <div class="chat-layout">
       <!-- 左侧导航 -->
       <SideTab :active-tab="activeTab" @tab-change="handleTabChange" />
-      
+
       <!-- 中间列表 -->
       <div class="conversation-list-panel">
         <ConversationList v-show="activeTab === 'conversations'" />
         <ContactList v-show="activeTab === 'contacts'" />
       </div>
-      
+
       <!-- 右侧聊天 -->
-      <Chat 
-        v-show="activeTab === 'conversations'" 
-        class="chat-content-panel" 
+      <Chat
+        v-show="activeTab === 'conversations'"
+        class="chat-content-panel"
         :PlaceholderEmpty="EmptyChatTpl"
       >
         <ChatHeader>
@@ -174,9 +156,9 @@ npm i @tencentcloud/chat-uikit-vue3
 
       <!-- 联系人详情 -->
       <ContactInfo
-        v-show="activeTab === 'contacts'" 
-        class="contact-detail-panel" 
-        @send-message="handleSendMessage" 
+        v-show="activeTab === 'contacts'"
+        class="contact-detail-panel"
+        @send-message="handleSendMessage"
       />
     </div>
   </UIKitProvider>
@@ -265,7 +247,7 @@ const EmptyChatTpl = h('div', { class: 'empty-placeholder' }, [
     </div>
     <!-- Tab 切换 -->
     <div class="tabs">
-      <div 
+      <div
         class="tab-item"
         :class="{ active: props.activeTab === 'conversations' }"
         @click="handleTabChange('conversations')"
@@ -273,7 +255,7 @@ const EmptyChatTpl = h('div', { class: 'empty-placeholder' }, [
       >
         <IconChatNew size="24" />
       </div>
-      <div 
+      <div
         class="tab-item"
         :class="{ active: props.activeTab === 'contacts' }"
         @click="handleTabChange('contacts')"
@@ -285,7 +267,6 @@ const EmptyChatTpl = h('div', { class: 'empty-placeholder' }, [
   </div>
 </template>
 
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useLoginState, useUIKit, Avatar } from '@tencentcloud/chat-uikit-vue3';
@@ -329,89 +310,51 @@ login({
   userSig: '', // userSig, string 类型
 });
 ```
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >参数</td>
-
-<td rowspan="1" colSpan="1" >类型</td>
-
-<td rowspan="1" colSpan="1" >说明</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SDKAppID</td>
-
-<td rowspan="1" colSpan="1" >Number</td>
-
-<td rowspan="1" colSpan="1" >SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 创建新应用，获取 SDKAppID 。<br>**说明：**<br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。<br></td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >userID</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >userSig</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br>**说明：**<br>开发环境：快速跑通 Demo，可以通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig。<br>生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。<br></td>
-</tr>
-</table>
-
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 创建新应用，获取 SDKAppID 。<br>**说明：**<br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
+| userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
+| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br>**说明：**<br>开发环境：快速跑通 Demo，可以通过 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig。<br>生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。 |
 
 > **注意：**
-> 
+>
 
 > 本文示例代码采用在[即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见[服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
-> 
+>
 
 - SDKAppID：在 [即时通信 IM 控制台 > 应用管理](https://console.cloud.tencent.com/im) 单击**创建新应用**，获取 SDKAppID。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/748bfda2886c11f088af5254005ef0f7.png)
-
 - userID：单击 [即时通信 IM 控制台 > 消息服务 Chat > 账号管理](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/b9a2b2aa886d11f0ae9d5254001c06ec.png)
-
 - userSig：单击 [即时通信 IM 控制台 > 开发工具 > UserSig生成校验](https://console.cloud.tencent.com/im/tool-usersig)，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/ea68ff91886e11f0ae9d5254001c06ec.png)
-
-
 ## 运行和测试
 
 使用以下命令运行项目
 
-
 【shell】
 ``` bash
  npm run dev
 ```
 
 > **注意：**
-> 
-> 1. 请确保 [步骤3](https://write.woa.com/#step3) 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+>
+> 1. 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
 > 2. userID 和 userSig  为一一对应关系。
 > 3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
 
-
 ## 集成更多高级特性
 
 ### 音视频通话
 
 > **说明：**
-> 
+>
 
 > TUICallKit 是腾讯云推出一款音视频通话 UI 组件，通过集成该组件，您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。
-> 
+>
 
-> 更多详细信息可参考：[音视频通话-开通服务](https://write.woa.com/document/140130594134605824)。
-> 
+> 更多详细信息可参考：音视频通话-开通服务。
+>
 
 1. 安装 `@tencentcloud/call-uikit-vue` 依赖。
 
@@ -420,7 +363,6 @@ login({
    ```
 2. 从 `@tencentcloud/call-uikit-vue` 导出 `TUICallKit`，并挂载到 DOM 节点上。
 
-
    在 `src/App.vue` 文件中继续补充下面的代码：
 
    ``` typescript
@@ -432,7 +374,7 @@ login({
        ...
      </UIKitProvider>
    <template>
-   
+
    <script setup lang="ts">
    // 导入音视频通话核心组件
    import { TUICallKit } from '@tencentcloud/call-uikit-vue';
@@ -461,26 +403,22 @@ login({
    ```
 4. 拨打语音通话。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/ce88eb5ac9f911f0a7775254005ef0f7.png)
-
-
 ### 云端搜索
 
 > **说明：**
-> 
+>
 
 > 搜索，在客服、社交、在线教育、在线医疗、OA 等场景下是刚需功能，可帮助用户快速查找群组、用户、消息，提升产品使用体验和用户粘性。
-> 
+>
 
 > 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好的满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
-> 
+>
 
-> 
-> 
+>
+>
 
 > 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
-> 
-
+>
 
 云端搜索在“步骤 2”中已经默认集成，如果需要关闭云端搜索功能，请参考以下代码：
 1. 设置 `ConversationList` 的 `enableSearch` 属性为 `false`
@@ -513,11 +451,10 @@ login({
 UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 
 > **注意：**
-> 
+>
 
 > 本文示例代码采用在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
-> 
-
+>
 
 ### 我能不能使用第三方组件库，例如 Element-Plus？
 
@@ -536,24 +473,23 @@ const isChatSettingShow = ref(false);
 ## 参考信息
 
 ### 官网文档
-- [自定义组件 - UIKitProvider](https://write.woa.com/document/187032638782849024)
-
-- [自定义组件 - Chat](https://write.woa.com/document/187778215983329280)
+- 自定义组件 - UIKitProvider
 
-- [自定义组件 - ChatHeader](https://write.woa.com/document/187852524064485376)
+- 自定义组件 - Chat
 
-- [自定义组件 - ConversationList](https://write.woa.com/document/186960319111872512)
+- 自定义组件 - ChatHeader
 
-- [自定义组件 - MessageList](https://write.woa.com/document/187036342928752640)
+- 自定义组件 - ConversationList
 
-- [自定义组件 - MessageInput](https://write.woa.com/document/187058763983568896)
+- 自定义组件 - MessageList
 
-- [自定义组件 - ChatSetting](https://write.woa.com/document/187321409859108864)
+- 自定义组件 - MessageInput
 
-- [自定义组件 - ContactList](https://write.woa.com/document/187595466274463744)
+- 自定义组件 - ChatSetting
 
-- [自定义组件 - Search](https://write.woa.com/document/187595449195040768)
+- 自定义组件 - ContactList
 
+- 自定义组件 - Search
 
 ### NPM 包
 
@@ -562,7 +498,3 @@ const isChatSettingShow = ref(false);
 ### GitHub
 
 [GitHub Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)
-
-## 联系我们
-
-如遇任何问题，可联系 [官网售后](https://cloud.tencent.com/act/event/connect-service#/) 反馈，享有专业工程师的支持，解决您的难题。