@tencentcloud/sdk-mcp 1.3.9 → 1.4.1

package/resource/doc/chatkit/react/components/search.md

@@ -0,0 +1,282 @@
+## 组件概述
+
+Search 是一个功能完整的搜索解决方案，包含了搜索框、搜索结果展示、高级搜索等功能的完整组件集合。适用于即时通讯、在线会议、在线教育等场景的用户、群组、消息搜索。
+
+> **说明：**
+>
+
+> 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
+>
+
+## 组件架构
+``` bash
+Search (主组件)
+├── SearchBar              # 搜索框组件
+├── SearchResults          # 搜索结果组件
+├── SearchAdvanced         # 高级搜索组件
+└── SearchResultsItem      # 搜索结果项组件
+    ├── User               # 用户结果项
+    ├── Group              # 群组结果项
+    ├── Message            # 消息结果项
+    └── Conversation       # 会话结果项
+```
+
+## 搜索模式
+| **迷你模式** | **标准模式** | **嵌入式模式** |
+| --- | --- | --- |
+| - 适用于侧边栏或小容器<br>- 显示有限结果数量<br>- 支持展开查看更多 | - 适用于全屏搜索界面<br>- 完整功能展示<br>- 支持高级搜索 | - 适用于聊天界面<br>- 专注消息搜索<br>- 优化的布局 |
+|  |  |  |
+
+## Props
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| variant | `VariantType` | `VariantType.MINI` | 搜索模式：`mini`(迷你)、`standard`(标准)、`embedded`(嵌入式) |
+| SearchBar | `React.ComponentType<SearchBarProps>` | `DefaultSearchBar` | 自定义搜索框组件 |
+| SearchResults | `React.ComponentType<SearchResultsProps>` | `DefaultSearchResults` | 自定义搜索结果组件 |
+| SearchAdvanced | `React.ComponentType<SearchAdvancedProps>` | `DefaultSearchAdvanced` | 自定义高级搜索组件 |
+| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
+| SearchResultsLoading | `React.ComponentType` | - | 加载中占位符组件 |
+| SearchResultsEmpty | `React.ComponentType` | - | 空结果占位符组件 |
+| SearchResultItem | `React.ComponentType<ResultItemProps>` | - | 自定义搜索结果项组件 |
+| debounceTime | `number` | `300` | 搜索防抖时间(毫秒) |
+| autoFocus | `boolean` | `false` | 是否自动聚焦搜索框 |
+| className | `string` | - | 自定义样式类名 |
+| style | `React.CSSProperties` | - | 自定义样式 |
+| onKeywordChange | `(keyword: string) => void` | - | 搜索关键词变化回调 |
+| onSearchComplete | `(results: Map<SearchType, SearchResult>) => void` | - | 搜索完成回调 |
+| onResultItemClick | `(data: SearchResultItem, type: SearchType) => void` | - | 搜索结果点击回调 |
+| onError | `(error: Error) => void` | - | 搜索错误回调 |
+
+## 基础使用
+``` typescript
+import { Search, VariantType } from '@tencentcloud/chat-uikit-react';
+
+function App() {
+  return (
+    <Search
+      variant={VariantType.STANDARD}
+      onResultItemClick={(data, type) => {
+        console.log('搜索结果点击:', data, type);
+      }}
+    />
+  );
+}
+```
+
+## 自定义能力
+
+`Search` 为用户自定义提供了丰富且多维度的 Props 接口，允许用户自定义功能、UI、模块等。
+
+`Search` 组件提供了多个可替换的子组件，允许用户自定义 `SearchBar`, `SearchResults`, `SearchAdvanced`, `SearchResultItem`, `SearchResultsPresearch`, `SearchResultsLoading`, `SearchResultsEmpty`, 等。同时，用户还可以利用默认子组件进行二次开发定制。
+
+【自定义 SearchBar】
+
+**Props**
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| data | `SearchResultItem` | - | 搜索结果数据 |
+| type | `SearchType` | - | 搜索结果类型 |
+| keyword | `string` | - | 搜索关键词 |
+| onClick | `(data: SearchResultItem, type: SearchType) => void` | - | 点击回调 |
+| className | `string` | - | 自定义样式类名 |
+
+**示例**
+``` typescript
+const CustomSearchBar = ({ value, onChange, onClear, placeholder }) => (
+  <div className="custom-search-bar">
+    <input
+      type="text"
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+    />
+    {value && <button onClick={onClear}>清除</button>}
+  </div>
+);
+
+<Search SearchBar={CustomSearchBar} />
+```
+
+【自定义 SearchResults】
+
+**Props**
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| results | `Map<SearchType, SearchResult>` | - | 搜索结果数据 |
+| isLoading | `boolean` | - | 是否正在加载 |
+| error | `Error \\| null` | - | 错误信息 |
+| keyword | `string` | - | 搜索关键词 |
+| typeLabels | `Record<SearchType, string>` | - | 搜索类型标签 |
+| onLoadMore | `(type: SearchType) => void` | - | 加载更多回调 |
+| onResultItemClick | `(data: SearchResultItem, type: SearchType) => void` | - | 结果项点击回调 |
+| SearchResultsLoading | `React.ComponentType` | `Loading` | 自定义加载组件 |
+| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
+| SearchResultsEmpty | `React.ComponentType` | `EmptyResult` | 空结果占位符组件 |
+| SearchResultItem | `React.ComponentType<ResultItemProps>` | `DefaultSearchResultsItem` | 自定义结果项组件 |
+| variant | `VariantType` | `VariantType.STANDARD` | 显示模式 |
+| searchType | `SearchType \\| 'all'` | `'all'` | 当前搜索类型 |
+
+**示例**
+``` typescript
+const CustomSearchResults = ({ results, keyword, onResultItemClick }) => (
+  <div className="custom-results">
+    {Array.from(results.entries()).map(([type, result]) => (
+      <div key={type}>
+        <h3>{type}</h3>
+        {result.resultList.map((item, index) => (
+          <div key={index} onClick={() => onResultItemClick(item, type)}>
+            {/* 自定义结果项 */}
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+<Search SearchResults={CustomSearchResults} />
+```
+
+【自定义 SearchAdvanced】
+
+**Props**
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| variant | `VariantType` | - | 显示模式 |
+| searchType | `SearchTabType` | - | 当前搜索类型 |
+| advancedParams | `Map<SearchType, SearchParamsMap[SearchType]>` | - | 高级搜索参数 |
+| onAdvancedParamsChange | `(type: SearchType, params: SearchParamsMap[SearchType]) => void` | - | 参数变化回调 |
+
+**示例**
+``` typescript
+const CustomSearchAdvanced = ({ variant, searchType, advancedParams, onAdvancedParamsChange }) => (
+  <div className="custom-advanced">
+  {/* 自定义高级搜索功能 */}
+  </div>
+);
+
+<Search SearchAdvanced={CustomSearchAdvanced} />
+```
+
+【自定义 SearchResultItem】
+
+**Props**
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| data | `SearchResultItem` | - | 搜索结果数据 |
+| type | `SearchType` | - | 搜索结果类型 |
+| keyword | `string` | - | 搜索关键词 |
+| onClick | `(data: SearchResultItem, type: SearchType) => void` | - | 点击回调 |
+| className | `string` | - | 自定义样式类名 |
+
+**示例**
+``` typescript
+const CustomSearchItem = ({ data, type, keyword, onClick }) => (
+  <div className="custom-item">
+    {type === SearchType.MESSAGE && (
+        <Conversation
+          data={data}
+          keyword={keyword}
+          onClick={onClick}
+        />
+      )}
+      {type === SearchType.USER && (
+        <User
+          data={data}
+          keyword={keyword}
+          onClick={onClick}
+        />
+      )}
+      {type === SearchType.GROUP && (
+        <Group
+          data={data}
+          keyword={keyword}
+          onClick={onClick}
+        />
+      )}
+      {type === SearchType.CHAT_MESSAGE && (
+        <Message
+          data={data}
+          keyword={keyword}
+          onClick={onClick}
+        />
+      )}
+  </div>
+);
+
+<Search SearchResultItem={CustomSearchItem} />
+```
+
+【自定义占位组件】
+
+**Props**
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| SearchResultsPresearch | `React.ComponentType` | - | 搜索前占位符组件 |
+| SearchResultsLoading | `React.ComponentType` | - | 加载中占位符组件 |
+| SearchResultsEmpty | `React.ComponentType` | - | 空结果占位符组件 |
+
+**示例**
+``` typescript
+<Search
+  SearchResultsPresearch={() => <div>输入关键词开始搜索</div>}
+  SearchResultsLoading={() => <div>搜索中...</div>}
+  SearchResultsEmpty={() => <div>未找到相关结果</div>}
+/>
+```
+
+## SearchState
+
+SearchState 是基于 Zustand 的搜索状态管理钩子，为 Search 组件提供完整的状态管理能力。它支持多种搜索模式（标准模式、嵌入式模式），管理搜索关键词、搜索结果、加载状态、错误处理等功能。如果自定义组件能力不能支持您的业务，可以使用 SearchState 实现您的需求。
+
+#### 数据
+| 属性名 | 类型 | 说明 |
+| --- | --- | --- |
+| keyword | `string` | 当前搜索关键词 |
+| results | `Map<SearchType, SearchResult<SearchType>>` | 搜索结果集合 |
+| isLoading | `boolean` | 是否正在搜索 |
+| error | `Error \\| null` | 搜索错误信息 |
+| searchAdvancedParams | `Map<ISearchType, SearchParamsMap[SearchType]>` | 高级搜索参数 |
+| selectedSearchType | `SearchType \\| 'all'` | 当前选中的搜索类型 |
+
+#### 操作方法
+| 方法名 | 类型 | 说明 |
+| --- | --- | --- |
+| setKeyword | `(k: string) => void` | 设置搜索关键词 |
+| loadMore | `(type?: SearchType) => Promise<void>` | 加载更多搜索结果 |
+| setSelectedType | `(type: SearchType \\| 'all') => void` | 设置搜索类型 |
+| setSearchMessageAdvancedParams | `(params: SearchCloudMessagesParams) => void` | 设置消息搜索高级参数 |
+| setSearchUserAdvancedParams | `(params: SearchCloudUsersParams) => void` | 设置用户搜索高级参数 |
+| setSearchGroupAdvancedParams | `(params: SearchCloudGroupsParams) => void` | 设置群组搜索高级参数 |
+
+## 使用示例
+``` typescript
+import { useSearchState, VariantType } from '@tencentcloud/chat-uikit-react';
+const {
+    keyword,
+    results,
+    isLoading,
+    error,
+    setKeyword,
+    setSelectedType,
+    loadMore
+  } = useSearchState(VariantType.STANDARD);
+
+```
+
+## 常见问题
+
+### Q: 如何自定义搜索结果的显示格式？
+
+A: 使用 `SearchResultItem` 属性传入自定义组件。
+
+### Q: 如何处理搜索性能问题？
+
+A: 调整 `debounceTime`，使用 React.memo，考虑结果缓存。
+
+### Q: 移动端如何优化？
+
+A: 组件自动适配移动端，也可通过 CSS 进一步定制。
+
+### Q: 如何支持多语言？
+
+A: 组件内置国际化支持，通过 `useUIKit` 获取翻译。

package/resource/doc/{chatuikit → chatkit}/react/components/tuikit.md

@@ -11,54 +11,33 @@ TUIKit 主要分为 ConversationList、Chat、ChatSetting、Profile 等模块，
 
 Web 端界面效果如下图所示：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/ca60ad0a7e4011ef852f52540075b605.png)
-
-
 H5 端界面效果如下图所示：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/72617d0b7e4111efa87a525400bdab9d.png)
-
-
 ## Chat 重点功能介绍
 
 Chat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息，支持文字/表情/图片/视频/文件/自定义等消息类型，同时支持消息转发/撤回/引用、查询、已读回执等功能。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/ae44c9c27e4211ef80ff525400d5f8ef.png)
-
-
 > **说明：**
-> 
+>
 
 > 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前，请您替换为自己设计或拥有版权的其他表情包。请注意，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
-> 
-
-> ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027937867/8a6f5c65391911ef933a52540055f650.png)
-> 
+>
 
+>
+>
 
 ## ConversationList 功能介绍
 
 ConversationList 主要负责会话列表的展示和编辑，包含会话置顶、会话删除等功能。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/b58134fa7e4211ef82535254002693fd.png)
-
-
 ## ChatSetting 功能介绍
 
 ChatSetting 主要负责 Chat 设置。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/f9aa50217e4211efb9d8525400f69702.png)
-
-
 ## Contact 重点功能介绍
 
 Contact 主要负责关系链展示以及创建会话等操作。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/8179f4907e4311efb9d8525400f69702.png)
-
-
 ## Profile 重点功能介绍
 
-Profile 主要负责用户资料的管理。 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027666621/8ac9cd7a7e4311ef80ff525400d5f8ef.png)
+Profile 主要负责用户资料的管理。

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

@@ -1,17 +1,13 @@
 TUIKit 是基于腾讯云 Chat SDK 的一款 vue3 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
 
 > **推荐使用更高效的 AI 集成助手**
-> 
+>
 
 > 我们为您提供了全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率。
-> 
+>
 
 > [点击这里，立即体验 AI 集成](https://cloud.tencent.com/document/product/269/124481)
-> 
-
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/642eec49c9ec11f0a7775254005ef0f7.png)
-
+>
 
 ## 关键概念
 
@@ -32,7 +28,6 @@ chat-uikit-react 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 8. Contact 提供联系人组件。
 
-
 ## 前提条件
 - Node.js v18 版本及以上，建议使用当前的 LTS v22 版本
 
@@ -40,15 +35,13 @@ chat-uikit-react 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 - TypeScript@^5.0.0
 
-
 ## 创建项目
 
 创建一个新的名为 **chat-example** 的 React 项目（创建项目时选择 **React 18**，并且使用 TypeScript 模板），并按照脚手架提示完成项目的初始化。
 
-
 【shell】
 ``` bash
-npm create rsbuild@latest 
+npm create rsbuild@latest
 # 初始化脚手架项目
 cd chat-example
 npm i
@@ -61,7 +54,6 @@ npm run dev
 
 通过 npm 方式下载 [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用。
 
-
 【shell】
 ``` bash
 npm i @tencentcloud/chat-uikit-react
@@ -70,19 +62,12 @@ npm i @tencentcloud/chat-uikit-react
 ### 步骤 2. 引入组件
 
 > **注意：**
-> 
-> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 [步骤3](https://write.woa.com/#e0579535-1fc9-4344-8878-ed25ced85819) 中获取相关信息后进行替换。
+>
+> - 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 > - 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的**小黄脸表情包版权归腾讯云所有**，可以有偿授权使用，如需获得授权您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/ef57d018a9a111f09b75525400bf7822.png)
-
-
-
 复制以下 `App.tsx` 代码并替换原有的 `src/App.tsx` 中的内容。
 
-
-
-
 【src/App.tsx】
 ``` typescript
 import { useEffect, useLayoutEffect, useState, useMemo } from "react";
@@ -121,12 +106,12 @@ function ChatApp() {
   const [activeTab, setActiveTab] = useState<'conversations' | 'contacts'>('conversations');
   const [isChatSettingShow, setIsChatSettingShow] = useState(false);
   const [isSearchInChatShow, setIsSearchInChatShow] = useState(false);
-  
+
   const { language, theme } = useUIKit();
 
   const isDark = theme === 'dark';
 
-  const texts = useMemo(() => 
+  const texts = useMemo(() =>
     language === 'zh-CN'
       ? { emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
       : { emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'},
@@ -311,9 +296,6 @@ export default App;
 
 复制以下 `App.css` 代码并替换同级目录的 `src/App.css` 样式文件。
 
-
-
-
 【src/App.css】
 ``` java
 
@@ -330,89 +312,51 @@ const { status } = useLoginState({
     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/797a92558a3211f0b321525400e889b2.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/796a45708a3211f0ae9d5254001c06ec.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/7991b0798a3211f0974b52540044a08e.png)
-
-
 ## 运行和测试
 
 填入登录鉴权信息后即可运行项目开始体验。
 
-
 【shell】
 ``` bash
 npm run dev
 ```
 
 > **注意：**
-> 
-> - 请确保 [步骤3](https://write.woa.com/#step3) 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
-> - userID 和 userSig  为一一对应关系，具体参见 [生成 UserSig（用户鉴权）](https://write.woa.com/document/107052240244191232)。
+>
+> - 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> - userID 和 userSig  为一一对应关系，具体参见 生成 UserSig（用户鉴权）。
 > - 如遇到项目启动失败，请检查 开发环境要求 是否满足。
 
-
 ## 集成更多高级特性
 
 ### 音视频通话
 
 > **说明：**
-> 
+>
 
 > TUICallKit 是腾讯云推出一款音视频通话 UI 组件，通过集成该组件，您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。
-> 
+>
 
-> 更多详细信息可参考：[音视频通话-开通服务](https://write.woa.com/document/140130594134605824)。
-> 
+> 更多详细信息可参考：音视频通话-开通服务。
+>
 
 1. 安装 `@trtc/calls-uikit-react` 依赖
 
@@ -421,13 +365,12 @@ npm run dev
    ```
 2. 从 `@trtc/calls-uikit-react` 导出 `TUICallKit`，并挂载到 DOM 节点上。
 
-
    在 `src/App.tsx` 文件中继续补充下面的代码：
 
    ``` typescript
    // src/App.tsx
    import { TUICallKit } from '@trtc/calls-uikit-react';
-   
+
    function App() {
      return (
        <UIKitProvider>
@@ -445,29 +388,25 @@ npm run dev
    ```
 4. 拨打语音通话
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/31eeca37c9fa11f0aedb525400454e06.png)
-
-
 ### 云端搜索
 
 > **说明：**
-> 
+>
 
 > 搜索，在客服、社交、在线教育、在线医疗、OA 等场景下是刚需功能，可帮助用户快速查找群组、用户、消息，提升产品使用体验和用户粘性。
-> 
+>
 
 > 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好的满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
-> 
+>
 
 > 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
-> 
-
+>
 
 云端搜索在“步骤 2”中已经默认集成，如果需要关闭云端搜索功能，请参考以下代码：
 1. 注释 `ChatHeader` 中 `ChatHeaderRight` 属性，和会话内搜索侧边栏相关的代码
 
    ``` typescript
-   
+
    <ChatHeader enableCall={true}
      ChatHeaderRight={
        <div className="header-actions">
@@ -495,11 +434,10 @@ npm run dev
 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)。
-> 
-
+>
 
 ### 是否支持 react 17/19 版本？
 
@@ -529,25 +467,20 @@ function onChatSettingClose() {
 ## 参考信息
 
 ### 相关文档
-- [自定义组件 - UIKitProvider](https://write.woa.com/document/157860913203511296)
+- 自定义组件 - UIKitProvider
 
-- [自定义组件 - ConversationList](https://write.woa.com/document/157860932619919360)
+- 自定义组件 - ConversationList
 
-- [自定义组件 - MessageList](https://write.woa.com/document/181344255270170624)
+- 自定义组件 - MessageList
 
-- [自定义组件 - MessageInput](https://write.woa.com/document/181344257863962624)
+- 自定义组件 - MessageInput
 
-- [自定义组件 - ContactList](https://write.woa.com/document/181344260082749440)
+- 自定义组件 - ContactList
 
-- [自定义组件 - Search](https://write.woa.com/document/181344262590197760)
+- 自定义组件 - Search
 
-- [自定义组件 - ChatSetting](https://write.woa.com/document/187957510151921664)
+- 自定义组件 - ChatSetting
 
 - [chat-uikit-react npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react)
 
 - [GitHub Demo](https://github.com/TencentCloud/chat-uikit-react)
-
-
-## 联系我们
-
-如遇任何问题，可联系 [官网售后](https://cloud.tencent.com/act/event/connect-service#/) 反馈，享有专业工程师的支持，解决您的难题。

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

@@ -23,7 +23,6 @@ Avatar 组件用于显示用户头像和状态，支持多种形状和大小的
 | isDotUnreadCount | boolean | false | 是否显示小红点 |
 | children | ReactNode | undefined | 自定义内容，优先于 src 和 alt 的内容 |
 
-
 ## Props 详细介绍
 
 ### `src`