@tencentcloud/sdk-mcp 1.3.0 → 1.3.2

package/resource/doc/chatuikit/flutter/integrate_tuikit_Flutter.md

@@ -1,207 +1,93 @@
-## 什么是 TUIKit
+TUIKit Flutter 是基于腾讯云 IM SDK 的一套 Flutter UI 组件库，提供了聊天、会话列表、联系人管理等即时通信功能的完整解决方案。本文介绍如何手动集成该组件并实现核心功能。
 
-TUIKit 是基于 腾讯云 IM SDK 开发的一款即时通讯 UI 组件库，包括会话、聊天、搜索、关系链、群组、音视频通话等能力。通过 TUIKit，可快速集成包含 UI 界面的全平台即时通讯应用。
+## 关键概念
 
-TUIKit 简化了基于 腾讯云 IM SDK 的应用开发过程。它不仅能助您快速实现 UI 功能，也支持调用 腾讯云 IM SDK 相应的接口实现即时通讯业务逻辑和数据处理。因此，您在使用 TUIKit 时仅需关注自身业务或个性化扩展。
+TUIKit 提供了一套完整的即时通信 UI 组件，向下依赖 AtomicXCore 数据层，向上可构建各种功能性 Page。
+- Page 层：基于 TUIKit 组件封装的完整功能页面：ChatPage、ContactsPage、ConversationsPage，您可以直接使用。
 
-**接入前，您可通过 **[Demo](https://cloud.tencent.com/document/product/269/68823)**，快速在线体验 TUIKit 各项能力。**
+- TUIKit Flutter（UI 组件层）：基于 AtomicXCore 构建的 Flutter 组件，您可将其嵌套到自己已有的 App 页面中。
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/e8b5c1be2b9011eea27e525400c56988.jpeg)
+- AtomicXCore（数据层）：提供数据管理和业务逻辑，包含各种 Store 和 Manager。
 
 
-### **概览**
+## 前提条件
+- Flutter >= 3.29.0 版本，Dart >= 3.7.0 版本，Kotlin >= 1.9版本。
 
-目前包含的一级组件如下：
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >组件名</td>
-
-<td rowspan="1" colSpan="1" >组件功能</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitConversation](https://cloud.tencent.com/document/product/269/70747#timuikitconversation-.E9.87.8D.E7.82.B9.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Atimuikitconversation))</td>
-
-<td rowspan="1" colSpan="1" >会话列表组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitChat](https://cloud.tencent.com/document/product/269/70747#timuikitchat-.E9.87.8D.E7.82.B9.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Atimuikitchat))</td>
-
-<td rowspan="1" colSpan="1" >核心聊天组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitAddFriend](https://cloud.tencent.com/document/product/269/70747#.E6.B7.BB.E5.8A.A0.E7.94.A8.E6.88.B7.E4.B8.8E.E7.BE.A4.E7.BB.84-.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Aadd)) / [TIMUIKitAddGroup](https://cloud.tencent.com/document/product/269/70747#.E6.B7.BB.E5.8A.A0.E7.94.A8.E6.88.B7.E4.B8.8E.E7.BE.A4.E7.BB.84-.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Aadd))</td>
-
-<td rowspan="1" colSpan="1" >添加好友组件/添加群组组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitBlackList](https://cloud.tencent.com/document/product/269/70747#132ca212-60d3-4fda-ac24-dfb1b749abe8) / [TIMUIKitNewContact](https://cloud.tencent.com/document/product/269/70747#132ca212-60d3-4fda-ac24-dfb1b749abe8)</td>
-
-<td rowspan="1" colSpan="1" >黑名单列表组件/新的联系人申请列表组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitContact](https://cloud.tencent.com/document/product/269/70747#132ca212-60d3-4fda-ac24-dfb1b749abe8) / [TIMUIKitGroup](https://cloud.tencent.com/document/product/269/70747#132ca212-60d3-4fda-ac24-dfb1b749abe8)</td>
-
-<td rowspan="1" colSpan="1" >好友列表组件/群组列表组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitProfile](https://cloud.tencent.com/document/product/269/70747#timuikitprofile-.E9.87.8D.E7.82.B9.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Atimuikitprofile)) / [TIMUIKitGroupProfile](https://cloud.tencent.com/document/product/269/70747#timuikitgroupprofile-.E9.87.8D.E7.82.B9.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Atimuikitgroupprofile))</td>
-
-<td rowspan="1" colSpan="1" >用户信息组件/群组信息组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitSearch / TIMUIKitSearchMsgDetail](https://cloud.tencent.com/document/product/269/70747#.E6.9C.AC.E5.9C.B0.E6.90.9C.E7.B4.A2-.E9.87.8D.E7.82.B9.E5.8A.9F.E8.83.BD.E4.BB.8B.E7.BB.8D.5B.5D(id.3Asearch))</td>
-
-<td rowspan="1" colSpan="1" >全局搜索组件/会话内搜索组件</td>
-</tr>
-</table>
-
-
-## 准备步骤
-
-### 环境要求
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >环境</td>
-
-<td rowspan="1" colSpan="1" >版本</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Flutter</td>
-
-<td rowspan="1" colSpan="1" >要求 Flutter 版本 >= 3.24.0，Dart >= 3.5.0 版本。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Android</td>
-
-<td rowspan="1" colSpan="1" >Android Studio Dolphin \| 2021.3.1 及以上版本，Android Gradle plugin 4.1.0 以上版本。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >iOS</td>
-
-<td rowspan="1" colSpan="1" >Xcode 12.0 及以上版本，请确保您的项目已设置有效的开发者签名。</td>
-</tr>
-</table>
-
-
-### 支持平台
-
-TUIKit 拥有自适应 UI 界面，可同时用于 **移动端 及 桌面端。**并支持以下所有平台，针对不同平台有不同的特色能力。方便您**一套代码开发全平台应用**。
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >平台</td>
-
-<td rowspan="1" colSpan="1" >支持状态</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >iOS</td>
-
-<td rowspan="1" colSpan="1" >支持</td>
-</tr>
+- Android Studio Ladybug | 2024.2.1 及以上版本，Android Gradle plugin 7.3.1 以上版本，JDK 17 版本。
 
-<tr>
-<td rowspan="1" colSpan="1" >Android</td>
+- Xcode 12.0 及以上版本。
 
-<td rowspan="1" colSpan="1" >支持</td>
-</tr>
+- 一个有效的腾讯云账号及 Chat 应用。可参考 [开通服务](https://write.woa.com/document/107052220771086336#step1) 从控制台获取以下信息：
 
-<tr>
-<td rowspan="1" colSpan="1" >Web</td>
+  - SDKAppID：App 在控制台获取的 Chat 应用的 ID，为应用的唯一标识。
 
-<td rowspan="1" colSpan="1" >支持，0.1.5版本起</td>
-</tr>
+  - SDKSecretKey：应用的密钥。
+      
 
-<tr>
-<td rowspan="1" colSpan="1" >macOS</td>
+      > **说明：**
+      > 
+>     - 本项目目前仅支持手动集成，暂不支持通过 pub.dev 集成。
+>     - 为确保构建环境稳定，请严格遵循官方兼容性要求进行配置：
+>     - Gradle、Android Gradle Plugin、JDK 与 Android Studio 的兼容性，请参阅 Android 官方文档：[版本说明](https://developer.android.com/build/releases/gradle-plugin#updating-gradle)。
+>     - Kotlin、Android Gradle Plugin 与 Gradle 的版本对应关系，请参阅 Kotlin 官方文档：[Kotlin-Gradle 插件兼容性](https://kotlinlang.org/docs/gradle-configure-project.html#apply-the-plugin)。
+>     - 使用 JDK 17 版本，其他版本可能导致编译失败，请参阅：[Java 版本切换](https://developer.android.com/build/jdks#kts)。
 
-<td rowspan="1" colSpan="1" >支持，2.0.0 版本起</td>
-</tr>
+      > 我们建议您根据上述指南，选择与项目要求完全匹配的版本组合。
+      > 
 
-<tr>
-<td rowspan="1" colSpan="1" >Windows</td>
 
-<td rowspan="1" colSpan="1" >支持，2.0.0 版本起</td>
-</tr>
+## 集成并引入组件
 
-<tr>
-<td rowspan="1" colSpan="1" >[混合开发](https://cloud.tencent.com/document/product/269/83153) （将 Flutter SDK 添加至现有原生应用）</td>
+### 下载源码
 
-<td rowspan="1" colSpan="1" >1.0.0版本起支持</td>
-</tr>
-</table>
+1. 从 GitHub 下载 [TUIKit Flutter](https://github.com/Tencent-RTC/TUIKit_Flutter) 源码：
+``` xml
+git clone https://github.com/Tencent-RTC/TUIKit_Flutter.git
+```
 
+项目目录结构说明：
+``` bash
+atomic-x/
+├── lib/                  # UI 组件源码（必需集成）
+│   ├── messagelist/      # 消息列表组件
+│   ├── messageinput/     # 消息输入组件
+│   ├── conversationlist/ # 会话列表组件
+│   ├── contactlist/      # 联系人列表组件
+│   ├── basecomponent/    # 基础组件
+│   └── ...               # 其他 UI 组件
+├── call_assets/          # call 资源文件（必需集成）
+├── chat_assets/          # chat 资源文件（必需集成）
+chat/
+├── uikit/                # Page 组件（参考实现）
+│   ├── lib/
+│      ├── chat_page.dart
+│      ├── contacts_page.dart
+│      └── conversations_page.dart
+└── demo/                 # 示例应用（可选参考）
+```
 
-### 前提条件
-1. 您已 [注册腾讯云](https://cloud.tencent.com/document/product/378/17985) 账号，并完成 [实名认证](https://cloud.tencent.com/document/product/378/3629)。
+### 集成组件
+1. 将组件目录完整复制到您的 Flutter 项目中，如下图所示，其中 flutter_demo 是示例项目，TUIKit_Flutter 是从 GitHub 上下载的组件源码：
 
-2. 参照 [创建并升级应用](https://cloud.tencent.com/document/product/269/32577) 创建应用，并记录好 `SDKAppID`。
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/b47217aac39011f0a6dd5254005ef0f7.png)
 
-3. 在 [即时通讯 IM 控制台](https://console.cloud.tencent.com/im) 选择您的应用，在左侧导航栏选择 **UserSig 生成&校验** ，创建两个 UserID 及其对应的 UserSig，复制`UserID`、`签名（Key）`、`UserSig`这三个，后续登录时会用到。
-   
+2. 在您的 pubspec.yaml 文件中添加 TUIKit Flutter 组件。注意，TUIKit_Flutter 可以放在任何位置，只要在 pubspec.yaml 中正确设置相对路径即可：
 
-   > **说明：**
-   > 
+   ``` bash
+     tuikit_atomic_x:
+       path: ../TUIKit_Flutter/atomic-x
+   ```   
 
-   > 该账户仅限开发测试使用。应用上线前，正确的 `UserSig` 签发方式是由服务器端生成，并提供面向 App 的接口，在需要 `UserSig` 时由 App 向业务服务器发起请求获取动态 `UserSig`。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
+   > **注意：**
    > 
+>   - 使用本地集成方案时，如需升级，您需要从 GitHub 获取最新的组件代码，覆盖您本地项目的 TUIKit_Flutter 目录。
+>   - 当私有化修改和远端有冲突时，需要手动合并，处理冲突。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100031390357/973d2bc4fa8a11ef83195254005ef0f7.png)
-
-
-## 接入步骤
-
-如下会介绍如何使用 Flutter TUIKit 快速构建一个简单的即时通信应用。
-
-### 步骤1：创建 Flutter 应用并添加权限
 
-请参见 [Flutter 文档](https://docs.flutter.cn/get-started/codelab) 快速创建一个 Flutter 应用。
+### 配置项目
 
-#### 配置权限
-
-由于 TUIKit 运行，需要拍摄/相册/录音/网络等权限，需要您在 Native 的文件中手动声明，才可正常使用相关能力。
-
-**Android**
-
-打开 `android/app/src/main/AndroidManifest.xml` ，在 `<manifest></manifest>`中，添加如下权限。
-``` xml
-    <uses-permission
-        android:name="android.permission.INTERNET"/>
-    <uses-permission
-        android:name="android.permission.RECORD_AUDIO"/>
-    <uses-permission
-        android:name="android.permission.FOREGROUND_SERVICE"/>
-    <uses-permission
-        android:name="android.permission.ACCESS_NETWORK_STATE"/>
-    <uses-permission
-        android:name="android.permission.VIBRATE"/>
-    <uses-permission
-        android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
-    <uses-permission
-        android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-    <uses-permission
-        android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-    <uses-permission
-        android:name="android.permission.CAMERA"/>
-    <uses-permission 
-        android:name="android.permission.READ_MEDIA_IMAGES"/>
-    <uses-permission 
-        android:name="android.permission.READ_MEDIA_VIDEO"/>
-```
-
-**iOS**
-
-打开 `ios/Podfile` ，在文件末尾新增如下权限代码。
-``` bash
+在 iOS 端添加必要的权限配置。请打开 ios/Podfile ，在文件末尾新增如下权限代码：
+``` objectivec
 post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_ios_build_settings(target)
@@ -220,1213 +106,318 @@ post_install do |installer|
         end
   end
 end
-```
-
-> **说明：**
-> 
-
-> 如您需要用到推送能力，还需要添加推送相关权限，详情可查看 [Flutter 厂商推送服务（Push）集成指南](https://cloud.tencent.com/document/product/269/101961)。
-> 
-
 
-#### 安装 TUIKit
+```
 
-TUIKit 已经内置了 IM SDK，因此您只需要安装 `tencent_cloud_chat_uikit` ，而不需要再安装基础 IM SDK。
+## 接入步骤
 
-TUIKit 已经开源，您可以引入[在线版本](https://pub.dev/packages/tencent_cloud_chat_uikit)，也可以在 [GitHub 上 fork](https://github.com/TencentCloud/chat-uikit-flutter) 后本地引入使用。在进行后续步骤之前，您可以通过我们的TUIKit介绍页或在线Demo体验来判断现有TUIKit默认样式和您预期的样式之间的差异。
+### 步骤1：配置用户鉴权
 
+在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im/tool-usersig) 根据 UserID 获取 UserSig 用于后续登录时的用户鉴权。
 
-- 如果差异不是特别大，建议您引入我们的[在线版本](https://pub.dev/packages/tencent_cloud_chat_uikit)，并使用组件开放的配置参数和builder进行微调。 
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/10e98dafc3a611f09c26525400bf7822.png)
 
-   ``` bash
-   flutter pub add tencent_cloud_chat_uikit
-   ```
-- 如果差异较大，我们更建议您fork一份我们的 [TUIKit 源码](https://github.com/TencentCloud/chat-uikit-flutter)，并直接修改fork后的版本，并将其引入您的项目中。如果需要更新至我们的最新版本，您可以使用 git upstream 的方式，将新版本的更改从我们的GitHub仓库同步到您的fork仓库中。
 
+### 步骤2：用户登录
 
-### 步骤2：初始化
+登录鉴权后才能正常使用组件的功能。您可以调用 login 接口，传入上文获取的 SDKAPPID、userID、userSig 用于登录鉴权：
+``` java
+final result = await LoginStore.shared.login(
+      sdkAppID: SDKAPPID,
+      userID: userID,
+      userSig: userSig,
+    );
+if (result.errorCode == 0) {
+    // 登录成功，可跳转聊天或会话页
+} else {
+    // 登录失败，可弹框报错
+}
+```
 
 > **注意：**
 > 
-> - 如果您需要同时使用 IM TUIKit 和 音视频通话 Callkit，请务必确保本步骤 IM 的初始化及登录完成后，再执行 Callkit 的初始化相关操作。
-> - 为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前，请您替换为自己设计或拥有版权的其他表情包。请注意，下图所示的**默认小黄脸表情包版权属于腾讯云**，您可以通过升级至 [IM 企业版套餐](https://buy.cloud.tencent.com/avc) 免费使用该表情包。
 
-> ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027937867/285442fb391811efb89a52540075b605.png)
+> 在正式的生产环境中，建议在您的服务端生成 UserSig，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 > 
 
-1. 在您应用启动时，初始化 IM。
-
-2. 请务必保证先执行 [`TIMUIKitCore.getInstance()`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitCore/getInstance.html) ，再调用初始化函数 [`init()`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitCore/init.html) ，并将您的`sdkAppID`传入。
-
-3. 为方便您获取API报错及建议提醒用户的提示语，此处建议挂载一个 onTUIKitCallbackListener 监听，[详见此部分](https://write.woa.com/#callback)。
-
-
-   示例代码如下，[全部初始化参数可参考此文档](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitCore/init.html)。
-
-   ``` dart
-   /// main.dart
-   import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
-   
-   final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
-     @override
-    void initState() {
-      _coreInstance.init(
-        sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
-        // language: LanguageEnum.en, // 界面语言配置，若不配置，则跟随系统语言
-        loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
-        onTUIKitCallbackListener:  (TIMCallback callbackValue){}, // [建议配置，详见此部分](https://cloud.tencent.com/document/product/269/70746#callback)
-        listener: V2TimSDKListener());
-      super.initState();
-    }
-   }
-   ```   
-
-   > **注意：**
-   > 
->   1. 请在本步骤 await 初始化完成后，才可执行后续步骤。
->   2. TUIKit 界面语言支持自动或手动在**简体中文/繁体中文/英文/日语/韩语**间切换。此处语言配置用法，[请参考此文档](https://cloud.tencent.com/document/product/269/84481)。
-
-
-#### 登录测试账户
-1. 此时，您可以使用最开始的时候，在控制台生成的测试账户，完成登录验证。
-
-2. 调用 [`_coreInstance.login`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitCore/login.html) 方法，登录一个测试账户。
-
-   ``` dart
-   import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
-   
-   final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
-   _coreInstance.login(userID: userID, userSig: userSig);
-   ```   
-
-   > **说明：**
-   > 
-
-   > 在下方的步骤3-5中，我们将教您如何使用我们常用组件的最基础用法，移动端和桌面端保持一致，**使用同一套代码和文件**。
-   > 
-
-   > 而在 [步骤6](https://write.woa.com/#step6) 中，我们将教您如何将这些组件拼装成一个整体，即分别搭建移动端和桌面端的整体架构。在整体架构层面，部分内容需要单独适配。
-   > 
 
+### 步骤3：构建会话列表界面
 
-### 步骤3：实现 - 会话列表页面
-
-[本小节 Demo 代码](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/conversation.dart)
-
-您可以以会话列表作为您的 IM 功能首页，其涵盖了与所有有聊天记录的用户及群聊的会话。
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/8eb1cc2ee30c11edbd56525400088f3a.png)
-
-请创建一个 `Conversation` 类，`body` 中使用 [`TIMUIKitConversation`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitConversation/TIMUIKitConversation-Implementation.html) 组件，渲染会话列表。
-
-您仅需传入一个 `onTapItem` 事件的处理函数，用于跳转至具体会话聊天页的导航。关于 `Chat` 类，会在下一步讲解。
-``` dart
-import 'package:flutter/material.dart';
-import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
-
-class Conversation extends StatelessWidget {
-const Conversation({Key? key}) : super(key: key);
-@override
-Widget build(BuildContext context) {
-return Scaffold(
-  appBar: AppBar(
-    title: const Text(
-      "Message",
-      style: TextStyle(color: Colors.black),
-    ),
-  ),
-  body: TIMUIKitConversation(
-    onTapItem: (selectedConv) {
-    // 如果需要适配桌面端，此处需要参考 Demo 代码修改。
-      Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => Chat(
-              selectedConversation: selectedConv,
-            ),
-          ));
-    },
-  ),
-);
-}
-}
-```
+您可以基于 TUIKit Flutter 中的 ConversationList 组件，构建一个会话列表页面。ConversationList 内建的功能是：
+- 展示用户的会话列表，包含单聊和群聊会话
 
-### 步骤4：实现 - 会话聊天页面
+- 支持用户操作单个会话：置顶、删除、清空会话消息等
 
-[本小节 Demo 代码](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/chat.dart)
 
-该页面由顶部主体聊天历史记录及底部发送消息模块组成。
+   您可以将 ConversationList 直接集成到现有的 App 页面中，也可以新构建一个完整的会话列表页，组装后的一种 UI 效果如下图所示：
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/bb541276e30c11ed95af525400c56988.png)
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/acbda867c3a611f08c0e52540044a08e.png)
 
-请创建一个 `Chat` 类，`body` 中使用 [`TIMUIKitChat`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChat-Implementation.html) 组件，渲染聊天页面。
 
-建议您传入一个 `onTapAvatar` 事件的处理函数，用于跳转至联系人的详细信息页。关于 `UserProfile` 类，会在下一步讲解。
-``` dart
-import 'package:flutter/material.dart';
-import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
+   将 ConversationList 封装为会话列表页，可参考 `chat/uikit/lib/conversations_page.dart` 文件里的实现，`ConversationsPage` 主要做了以下工作：
 
-class Chat extends StatelessWidget {
-final V2TimConversation selectedConversation;
-const Chat({Key? key, required this.selectedConversation}) : super(key: key);
-String? _getConvID() {
-return selectedConversation.type == 1
-    ? selectedConversation.userID
-    : selectedConversation.groupID;
-}
-@override
-Widget build(BuildContext context) {
-return TIMUIKitChat(
-  conversation: selectedConversation,
-  onTapAvatar: (_) {
-        // 如果需要适配桌面端，此处需要参考 Demo 代码修改。
-        Navigator.push(
-            context,
-            MaterialPageRoute(
-             builder: (context) => UserProfile(userID: userID),
-        ));
-  }, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.
-);
-}
-```
+1. 在 ConversationList 上方添加了 AppBar。
 
-如果您的业务场景，不是直接从 Conversation Widget 进入Chat Widget，那么将无法自动获得 上方代码中的 `V2TimConversation selectedConversation` 会话对象。此时，您可根据以下方法，手动 new 一个 `V2TimConversation` 对象实例，传入 TIMUIKitChat 组件中。
-``` plaintext
-TIMUIKitChat(  
-    conversation: V2TimConversation(
-      conversationID: "c2c_10040818", // 单聊："c2c_${对方的userID}" ； 群聊："group_${groupID}"
-      userID: "", // 仅单聊需要此字段，对方userID
-      groupID: "", // 仅群聊需要此字段，群groupID
-      showName: "", // 顶部 AppBar 显示的标题
-      type: 1, // 单聊传1，群聊传2
-      // 以上是最简化最基础的必要配置，您还可在此指定更多参数配置，根据 V2TimConversation 的注释
-     ),
-    // ......其他 TIMUIKitChat 的配置参数
-);
-```
+2. 实现点击会话列表 cell 事件。
 
-### 步骤5：实现 - 用户详情页面
+3. 支持创建会话和群组功能：
 
-[本小节 Demo 代码](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/user_profile.dart)
+  1. 点击右上角按钮可以创建新会话或群组
 
-该页面默认，可在只传入一个 `userID` 的情况下，自动根据是否是好友，生成用户详情页。
+  2. 支持从联系人列表选择好友创建单聊
 
-请创建一个 `UserProfile` 类，`body` 中使用 [`TIMUIKitProfile`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitProfile/TIMUIKitProfile-Implementation.html) 组件，渲染用户详情及关系链页面。
+  3. 支持选择多个好友创建群聊
 
-> **说明：**
-> 
 
-> 如果您希望自定义该页面，请优先考虑使用 [`profileWidgetBuilder`](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitProfile/ProfileWidgetBuilder.html) 传入需自定义的 profile 组件并配合 `profileWidgetsOrder` 确定纵向排列顺序；如果无法满足，才可使用 `builder` 。
-> 
+      核心示例代码如下所示：
 
+      ``` java
+        @override
+        Widget build(BuildContext context) {
+          return Scaffold(
+            appBar: AppBar(
+              backgroundColor: colorsTheme.bgColorOperate,
+              title: Text(atomicLocale.chat, style: TextStyle(fontSize: 34, fontWeight: FontWeight.w600)),
+              centerTitle: false,
+              scrolledUnderElevation: 0,
+              actions: [],
+            ),
+            body: Column(
+              children: [
+                Expanded(
+                  child: ConversationList(
+                    onConversationClick: (conversation) {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => ChatPage(
+                            conversation: conversation,
+                          ),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            ),
+          );
+        }
+      ```
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/705f96f1e31211edbd56525400088f3a.png)
-``` dart
-import 'package:flutter/material.dart';
-import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';
-
-class UserProfile extends StatelessWidget {
-    final String userID;
-    const UserProfile({required this.userID, Key? key}) : super(key: key);
-
-    @override
-    Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-       title: const Text(
-         "Message",
-         style: TextStyle(color: Colors.black),
-       ),
-     ),
-     body: TIMUIKitProfile(
-          userID: widget.userID,
-     ),
-    );
-  }
-}
-```
+### 步骤4：构建聊天界面
 
-此时，您的应用已经可以完成消息收发，管理好友关系，展示用户详情及展示会话列表。
+您可以基于 TUIKit Flutter 中的 MessageList、MessageInput  组件，构建一个聊天页面。
 
-### 步骤6：搭建应用整体架构
+MessageList 内建的功能是：
+- 展示单聊或群聊消息列表。
 
-在 TUIKit 2.0.0 版本之后，我们实现了自适应移动端和桌面端的 UI 布局，同时保持了组件用法的一致性。
+- 支持对单条消息操作：查看图片消息的大图、播放视频或语音消息、复制文本消息、撤回消息、删除消息等。
 
-然而，在应用架构方面，您仍需要针对移动端和桌面端两种不同的模式进行独立适配，包括组件的放置位置、组件间的跳转方式以及页面的整体布局。
 
-#### 平台识别及组件选用
+   MessageInput 内建的功能是：
 
-在深入了解本部分内容之前，我们将首先指导您如何利用 TUIKit 提供的方法进行平台识别及平台组件选择，以确保您的业务代码与我们的 TUIKit 组件内部实现的效果保持一致性。
+- 支持用户组建并发送多种类型的消息：文本、表情、图片、语音、视频、文件等。
 
-以下功能是我们为桌面端适配开发的**通用功能**，TUIKit 内部已经实现了这些功能，您可以在您的项目中直接使用。
 
-##### 屏幕类型适配方案
+   您可以将 MessageList 和  MessageInput 直接集成到现有的 App 页面中，也可以新构建一个完整的聊天页，组装后的一种 UI 效果如下图所示：
 
-**为了实现移动和桌面端的适应，我们推荐您本方案。**它可以根据屏幕是桌面宽屏还是手机竖屏来决定展示方式和务逻辑。此方案还能够完成 Web 端的适配。
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/a2c04843c3a811f0a6dd5254005ef0f7.png)
 
-您可以通过执行以下代码来判断是否为桌面端。通常情况下，无需传入 `context`，仅在应用启动后第一次执行时需要。
-``` plaintext
-import 'package:tencent_cloud_chat_uikit/ui/utils/screen_utils.dart';
 
-final isDesktopScreen = TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
-```
+   将 MessageList 和 MessageInput 组装为聊天页，可参考  `chat/uikit/lib/chat_page.dart` 文件里的实现，`ChatPage` 主要做了以下工作：
 
-##### 系统平台识别
+1. 在最上方添加了 AppBar，展示会话的名称。
 
-尽管在大多数情况下屏幕类型判断足以适配桌面端，但在某些特定场景下仍需当前系统类型例如，分别申请各系统的隐私权限，分别获取各系统的存储路径等。
+2. 按照移动端用户使用习惯，上下拼接 MessageList 和 MessageInput。
 
-此外，根据相关隐私政策，建议您不要频繁调用系统API以获取当前系统类型。因此，我们推荐您使用我们提供的系统平台识别能力进行此操作。我们仅在应用启动时获取一次系统类型，并将其存储在全局变量中，以便后续调用时直接返回该参数。
-``` plaintext
-import 'package:tencent_cloud_chat_uikit/ui/utils/platform.dart';
 
-final bool isAndroid = PlatformUtils().isAndroid; // 判断当前是否是 Android 设备
-final bool isWeb = PlatformUtils().isWeb; // 判断当前是否是网页
-final bool isIOS = PlatformUtils().isIOS; // 判断当前是否是 iOS 设备
-final bool isWindows = PlatformUtils().isWindows; // 判断当前是否是 Windows 桌面系统
-final bool isMacOS = PlatformUtils().isMacOS; // 判断当前是否是 macOS 桌面系统
-final bool isMobile = PlatformUtils().isMobile; // 判断当前是否是手机 app 应用，包含了 Android 及 iOS 设备。
-final bool isDesktop = PlatformUtils().isDesktop; // 判断当前是否是桌面端应用，包含了 Windows 及 macOS 系统。
-```
+   核心示例代码如下所示：
 
-##### 根据平台自动选择对应 Widget
+   ``` java
+     @override
+     Widget build(BuildContext context) {
+       return Scaffold(
+         appBar: AppBar(
+             backgroundColor: colorsTheme.bgColorOperate,
+             titleSpacing: 4.0,
+             centerTitle: false,
+             title: GestureDetector(
+               onTap: _onTitleTap,
+               child: Row(
+                 mainAxisSize: MainAxisSize.min,
+                 children: [
+                   Padding(
+                     padding: const EdgeInsets.only(right: 8.0),
+                     child: Avatar.image(
+                       name: widget.conversation.title,
+                       url: widget.conversation.avatarURL,
+                     ),
+                   ),
+                   Expanded(
+                     child: Text(
+                       widget.conversation.title ?? atomicLocale.chat,
+                       style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
+                       overflow: TextOverflow.ellipsis,
+                       maxLines: 1,
+                     ),
+                   ),
+                 ],
+               ),
+             ),
+             scrolledUnderElevation: 0.0,
+             leading: IconButton.buttonContent(
+               content: IconOnlyContent(Icon(Icons.arrow_back_ios, color: colorsTheme.buttonColorPrimaryDefault)),
+               type: ButtonType.noBorder,
+               size: ButtonSize.l,
+               onClick: () => Navigator.of(context).pop(),
+             ),
+             actions: []),
+         body: Column(
+           children: [
+             MessageList(
+               conversationID: widget.conversation.conversationID,
+               locateMessage: widget.message,
+               onUserClick: (String userID) => _onUserClick(userID),
+             ),
+             MessageInput(
+               conversationID: widget.conversation.conversationID,
+             ),
+           ],
+         ),
+       );
+     }
+   ```
 
-在进行桌面端与移动端适配兼容时，有时仅进行细微调整可能不够。可能需要动态展示两个不同的 `Widget`。例如，一个组件在移动端需要占据整个页面，具备相应的 `Scaffold` 和 `Appbar`，而在桌面端，仅需作为一个 `Modal` 弹窗。针对这种场景，我们开发了一个通用的 `TUIKitScreenUtils.getDeviceWidget()` 方法，传入移动端和桌面端的组件，根据平台类型自动返回对应的组件。
+### 步骤5：构建联系人界面
 
-使用该方法的示例如下：
-``` plaintext
-TUIKitScreenUtils.getDeviceWidget(  
-    desktopWidget: Container(), // 桌面端 Widget。  
-    defaultWidget: Container(), // 默认 Widget，必传。当对应平台的 Widget 没有传入时，用此 Widget 兜底。  
-    mobileWidget: Container(), // 移动端 Widget。
-);
-```
+您可以基于 TUIKit Flutter 中的 ContactList 组件，构建一个联系人页面。ContactList 内建的功能是：
+- 查看好友申请列表。
 
-假设我们想实现一个组件，在移动端需要占据整个页面，具备相应的 `Scaffold` 和 `Appbar`，而在桌面端则不需要。可以将核心组件部分抽离，使用该方法为移动端添加一个 `Scaffold` 框架，而桌面端则不需要该框。示例代码如下：
-``` plaintext
-@overrideWidget 
-build(BuildContext context) {  
-    Widget widgetBody() {    
-      return const TIMUIKitBlackList(); // 这里替换成实际需要展示的 Widget
-    }  
-    return TUIKitScreenUtils.getDeviceWidget(      
-      desktopWidget: widgetBody(), // 桌面端直接展示组件
-      defaultWidget: Scaffold(  // 如非特殊情况，移动端可以使用 defaultWidget 默认，包含 Scaffold
-        appBar: AppBar(),        
-        body: widgetBody(),      
-      )
-    );
-}
-```
+- 查看已加入的群列表。
 
-#### 整体架构设计实践
+- 处理群组邀请和申请。
 
-> **说明：**
-> 
+- 管理黑名单列表。
 
-> 如果您的应用需要一套代码同时支持移动端和桌面端，我们建议您先阅读移动端部分，再阅读桌面端部分；如果只需要特定平台，可以单独阅读相应平台的实现。
-> 
+- 查看好友。
 
 
+   您可以将 ContactList 直接集成到现有的 App 中，也可以新构建一个完整的联系人列表页，组装后的一种 UI 效果如下图所示：
 
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027325838/4bf1d883c3a911f0b35752540099c741.png)
 
-【移动端】
 
-为了获得更好的展示效果，我们的一级组件通常需要独占一整个手机页面。
+   将 ContactList 封装为联系人列表页，可参考 `chat/uikit/lib/contacts_page.dart `文件里的实现，`ContactsPage` 主要做了以下工作：
 
-但是，为了帮助您更好地完成自定义匹配您的业务需求，我们的一级组件都不会内部处理多组件间的跳转，除 `TIMUIKitChat` 外还不包含 `Scaffold` 和 `Appbar`。
+1. 在 ContactList 上方添加了 AppBar。
 
-这意味着，在使用我们的一级组件时，您需要根据业务需求决定是否以及如何配置 `Scaffold` 和 `Appbar`，并监听暴露出来的点击事件和其他需要跳转的事件，处理 `Navigator.push()` 跳转。
+2. 实现点击联系人列表 cell 事件。
 
-例如，在上方的步骤3中，我们演示了如何通过监听 `TIMUIKitConversation` 会话列表组件的 `onTapItem` 点击某个会话的事件回调，跳转至具体某个会话聊天页面。
-``` plaintext
-TIMUIKitConversation(
-  onTapItem: (selectedConv) {
-    Navigator.push(
-        context,
-        MaterialPageRoute(
-          builder: (context) => Chat(
-            selectedConversation: selectedConv,
-          ),
-        )
-      );
-   }
-);
-```
+3. 支持添加联系人和添加群组：
 
-当然，您还可以根据需要，为这些 dart 文件实现的一级组件类，可选配置  `Scaffold` 和 `Appbar`。因 `TIMUIKitChat` 的顶部 Appbar 逻辑较为复杂，例如包含 “对方正在输入中” 及 “未读数” 展示等等功能，因此`TIMUIKitChat `包含了` Scaffold` 和 `Appbar`，其余一级组件不包含。
+  1. 点击右上角 "+" 按钮可以添加联系人或群组
 
-当然，大部分从我们一级组件自动跳转进入的二级或更深层级的组件，如群管理页面组件，因导航逻辑在组件内部处理，且业务模块较为独立。因此包含了`Scaffold` 和 `Appbar`。
+  2. 支持根据 UserID 搜索目标联系人
 
-> **说明：**
-> 
+  3. 支持根据 GroupID 搜索目标群组
 
-> 对于此类 `Appbar`，您可通过[配置主题的方式](https://cloud.tencent.com/document/product/269/85902)，配置 `appbarBgColor``appbarTextColor``chatHeaderBgColor``chatHeaderTitleTextColor` 等参数以自定义颜色及样式。
-> 
 
+      核心示例代码如下所示：
 
-【桌面端】
+      ``` java
+        @override
+        Widget build(BuildContext context) {
+          AtomicLocalizations atomicLocale = AtomicLocalizations.of(context);
+          SemanticColorScheme colorsScheme = BaseThemeProvider.colorsOf(context);
+          return Scaffold(
+            appBar: AppBar(
+              backgroundColor: colorsScheme.bgColorOperate,
+              title: Text(atomicLocale.contact, style: TextStyle(fontSize: 34, fontWeight: FontWeight.w600),),
+              centerTitle: false,
+              scrolledUnderElevation: 0,
+              actions: [],
+            ),
+            body: ContactList(
+              onGroupClick: (ContactInfo contactInfo) {
+                _onGroupClick(context, contactInfo);
+              },
+              onContactClick: (ContactInfo contactInfo) {
+                _onContactClick(context, contactInfo);
+              },
+            ),
+          );
+        }
+      ```
 
-#### 整体布局
+### 步骤6：完善界面间的跳转逻辑
 
-> **说明：**
-> 
+ConversationsPage、ChatPage、ContactsPage 中实现了默认的用户点击事件，您可以自定义事件来实现页面间的交互：
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Page</td>
 
-> 本部分下方即将介绍的所有整体布局及架构实现，仅为提供一个可行的思路及[其配套 Demo 代码](https://github.com/TencentCloud/chat-demo-flutter/tree/main/lib/src/pages/cross_platform/wide_screen)。您可以根据自己的业务需要，自定义完成这些流程的开发。
-> 
+<td rowspan="1" colSpan="1" >回调</td>
 
+<td rowspan="1" colSpan="1" >建议跳转逻辑</td>
+</tr>
 
-桌面端的整体架构和移动端较为不同。
+<tr>
+<td rowspan="1" colSpan="1" >**ConversationsPage**</td>
 
-区别于移动端通过 `Navigator.push()` 导航路由的方式切换不同组件及页面，桌面端不太适合频繁进行整体的导航。
+<td rowspan="1" colSpan="1" >`onConversationClick: (conversation) {}`</td>
 
-相信大家在使用微信/新版QQ/飞书等桌面端 IM 软件中已经有所体会，所有的交互操作，都在同一个窗口中完成。通过左侧 Tab 的方式，切换右侧的核心模块。
+<td rowspan="1" colSpan="1" >点击会话列表中的会话时触发，建议跳转到聊天页面（ChatPage）。</td>
+</tr>
 
-常见的模块包括：
-<table>
 <tr>
-<td rowspan="1" colSpan="1" >左侧 Tab icon</td>
+<td rowspan="2" colSpan="1" >**ContactsPage**</td>
 
-<td rowspan="1" colSpan="1" >右侧模块内容</td>
+<td rowspan="1" colSpan="1" >`onContactClick: (ContactInfo contactInfo) {}`</td>
+
+<td rowspan="1" colSpan="1" >点击联系人 cell 时触发，建议跳转到用户信息页（C2CChatSetting）。</td>
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >聊天</td>
+<td rowspan="1" colSpan="1" >`onGroupClick: (ContactInfo contactInfo) {}`</td>
 
-<td rowspan="1" colSpan="1" >会话列表 + 每个具体的聊天 + 联系人信息 + 群组信息</td>
+<td rowspan="1" colSpan="1" >点击群组 cell 时触发，建议跳转群聊页面（ChatPage）。</td>
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >通讯录</td>
+<td rowspan="3" colSpan="1" >**ChatPage**</td>
+
+<td rowspan="1" colSpan="1" >`onUserClick: (String userID) {}`</td>
 
-<td rowspan="1" colSpan="1" >（联系人列表 or 群组列表） + （联系人 or 群组详情）</td>
+<td rowspan="1" colSpan="1" >点击消息中的用户头像或昵称时触发，建议跳转用户信息页（C2CChatSetting）。</td>
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >我的</td>
+<td rowspan="1" colSpan="1" >`onChatHeaderClick: () {}`</td>
 
-<td rowspan="1" colSpan="1" >设置 or 配置个人信息</td>
+<td rowspan="1" colSpan="1" >点击导航栏中的头像时触发，建议跳转用户信息页（C2CChatSetting）或群聊信息页（GroupChatSetting）</td>
 </tr>
 
 <tr>
-<td rowspan="1" colSpan="1" >头像</td>
+<td rowspan="1" colSpan="1" >`onBackClick: () {}`</td>
 
-<td rowspan="1" colSpan="1" >配置个人信息</td>
+<td rowspan="1" colSpan="1" >点击返回按钮时触发，建议返回上一级页面。</td>
 </tr>
 </table>
 
 
-因此，我们建议您采用，建立一个类似于我们 [Demo 的 home_page.dart 文件](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/pages/cross_platform/wide_screen/home_page.dart)，完成这个两栏式布局。维护一个 `index` 用于确定当前所在页面，左侧防止一个 [LeftBar](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/pages/cross_platform/wide_screen/left_bar.dart) 用于切换 Tab；右侧放置一个使用 `Expand` 撑开的 `IndexedStack` 放置核心页面内容。
-
-此整体架构布局的设计实践，[可参考我们的 Demo 源码桌面端适配部分代码](https://github.com/TencentCloud/chat-demo-flutter/tree/main/lib/src/pages/cross_platform/wide_screen)。![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/a2bc496ae31911edbd56525400088f3a.png)
-
-现在，基于上方提供的 Demo 源码，分别简单介绍一下几个右侧常见的页面，用于上图 `Expand(IndexedStack)` 部分，的架构布局设计实践。
-
-##### **1. 会话列表及会话聊天页面**
-
-[本部分 Demo 代码参考](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/pages/cross_platform/wide_screen/conversation_and_chat.dart)
-
-建议您，参考我们的 Demo 代码，新建一个 `dart` 文件，用于放置 `ConversationAndChat` Widget 类，用于承载本部分业务逻辑。
-
-这个类，可以引入您在前序步骤制作的 `Chat`, `Conversation`, `UserProfile` 组件，并基本保持这几个用于承载一级组件的 class 代码不变。
-
-这个类采用 Row 布局，左侧放置 `ConstrainedBox` 用于限制宽度的 `Conversation` 组件，右侧可用 `Expand` 撑开放置 `Chat` 组件。此外，还可以 `Stack` 配合 `AnimatedPositioned` 动画修改位置的形式，在最右侧浮动一个 `UserProfile` 或 `GroupProfile` 组件，用于点击查看联系人或群组详情，在点击时从屏幕外侧进入，并在用完后，回到屏幕外侧。
-
-这个 `ConversationAndChat` 类需要包含状态，记录当前的 `V2TimConversation? currentConversation` 会话。
-
-为上方步骤 3 制作的 `Conversation` Widget 类，[如此段 Demo 代码所示](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/conversation.dart#L22)，新增一个对外暴露的方法：`onConversationChanged`。用于将当前用户点击的会话回调至此。
-
-##### 监听这个 `onConversationChanged` 事件，并将当前切换至的会话，通过 `setState` 的方式，记录，并传入 `Chat` 组件，用于更改当前右侧显示的会话聊天。
-
-##### ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/0e8197c9e33911edbd56525400088f3a.png)
-
-##### 2. 联系人页面
-
-[本部分 Demo 代码参考](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/pages/cross_platform/wide_screen/contact_and_profile.dart)
-
-联系人页面，通常需要包含以下几个能力：*展示联系人列表 / 展示加入的群聊列表/ 展示新的好友申请 / 展示黑名单 / 展示联系人详情 / 展示群组详情 /  搜索联系人或群 / 跳转至会话（单聊和群聊）*。
-
-为本部分的代码新建一个 dart 文件，并新建一个 `ContactsAndProfile` Widget 类，用于承载本部分业务逻辑。
-
-本部分的结构，和上方 会话列表及会话聊天页面 类似，一样采用 Row 布局配合 `ConstrainedBox` 和 `Expand` 使用。左侧 `ConstrainedBox` 用于放置 `Contact` 及 `GroupList` 等列表组件，右侧 `Expand` 用于放置 `UserProfile` 或 `GroupProfile` 等信息组件。
-
-具体的实现方式和上方 会话列表及会话聊天页面 类似，这里不再重复阐述。您可参考[本部分的 Demo 代码](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/pages/cross_platform/wide_screen/contact_and_profile.dart)，配合阅读理解。
-
-此外，这个页面有个特殊的特性在于，您可能需要实现跳转至单聊会话或群聊会话的能力，一键进入会话。这部分代码不属于 TUIKit部分，需要您根据自己的业务需要，单独适配。Demo 效果如图所示，图片后有实现思路介绍。![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/a7eedd09e33f11ed95af525400c56988.png)
-
-以单聊为例，为您在前序步骤制作的 `UserProfile` 组件，增加[一个自定义按钮](https://github.com/TencentCloud/chat-demo-flutter/blob/main/lib/src/user_profile.dart#L107)和一个 `onClickSendMessage` 方法，用于将用户点击这个自定义按钮的点击事件抛出。
-
-同样，`ContactsAndProfile` 也需要配置一个 `onNavigateToChat` 方法，将监听到的 `onClickSendMessage` 事件加以转发。
+您可以参考上述回调说明及参考代码，实现 Page 之间交互逻辑。
 
-此时，在 home_page.dart 引入这个 `ContactsAndProfile` 组件的位置，监听这个事件，维护一份在 state 中，并转发至 `ConversationAndChat` Widget 中。
-
-ConversationAndChat 组件类中，可通过 `didUpdateWidget` 动态刷新外部传入的 `V2TimConversation` 会话，更新当前聊天页面和会话列表所在的会话。
-
-为了达到这个目的，还需要为此前制作的 `Chat` Widget 新增一个 `directToChat` 方法，让外部可以指定当前所在的会话聊天。
-
-以及，为 `Conversation` 组件类新增一个 `directToChat` 方法，让外部可以指定当前所在的会话，以更新展示当前选中的样式。（默认选中的会话是蓝色背景，未选中白色背景，置顶灰色背景）。
-
-此时，即可完成这个从通讯录跳转至会话聊天的能力开发。
-
-##### 3. 其他页面
-
-其他页面的开发思路也类似。
-
-核心还是，尽可能少的修改为每个一级组件配置的全平台通用类，而通过外部页面承载的方式，来实现桌面端适配。
-
-以达到一套代码，一次开发，一个模块全端仅一处维护的目的。
-
-您可参考我们的 [Demo 源码中，桌面端适配的部分](https://github.com/TencentCloud/chat-demo-flutter/tree/main/lib/src/pages/cross_platform/wide_screen)，完成您的开发。
-
-#### 桌面端特色能力
-
-由于桌面多种种特性，例如切换组件不导航跳转，我们为桌面端也制作了一些特色能力，**公共通用组件，供您直接使用**。
-
-##### 组件一：Modal 弹窗：您可用我们的，也可自定义 TUIKit 中所有弹窗
-
-TUIKit中，大部分在移动端用新页面组件承载的模块，在适配桌面端时，采用了 Modal 弹窗的形式进行处理。
-
-为了保证体验一致性，整个TUIKit中，所有的弹窗均使用同一个组件。该弹窗组件支持配置 *标题 / 发送按钮 / 取消按钮 / 宽高 / 位置* 等参数。可用于承载二级组件 / 小配置项修改 / 右键菜单 等模块。
-1. 您的项目可也用我们的：
-
-
-您的项目中，如果需要使用弹窗，可以直接选用我们的。保证整个程序中所有弹窗的一致性。![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/269d04a0e34711ed95af525400c56988.png)
-
-以下展示 showPopupWindow 展示 Modal 的方法的基础用法。更多自定义配置，如展示位置等，可查看该方法注释。
-``` plaintext
-import 'package:tencent_cloud_chat_uikit/ui/widgets/wide_popup.dart';
-
-TUIKitWidePopup.showPopupWindow(  
-    context: context,  
-    title: Modal名称,  
-    operationKey: TUIKitWideModalOperationKey.custom,  
-    width: MediaQuery.of(context).size.width * 0.4,  // 宽度
-    height: MediaQuery.of(context).size.width * 0.5,  //高度
-    child: (onClose) => 具体要展示的内部组件(    
-       groupID: groupID,    
-       controller: _chatController,    
-       onClosed: onClose,  
-    ),
-);
-```
-2. 自定义整个 TUIKit 中所有或部分 Modal 弹窗：
-
-
-可监听 `TIMUIKitConfig` 的 `showDesktopModalFunc` 方法，并根据提供的参数（如点击确认事件回调 /当前的操作类型 `operationKey` / 位置）等信息，构建您自己的弹窗。
-
-每次 TUIKit 内部需要弹窗前，都会触发这个回调，并通过 `operationKey` 字段给您当前弹窗的场景，如果根据 `operationKey` 判定当前弹窗类型，您需要自定义弹窗，请返回 `true` 否则返回 `false` 使用 TUIKit 默认 Modal 弹窗。
-
-##### 组件二：二次确认弹窗
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/d283c777e34811edbd56525400088f3a.png)
-
-TUIKit中的二次确认弹窗暂不支持自定义，不过如果您的业务代码有需要的话，也可以使用我们的，保证体验相近。
-
-与上方 Modal 类似，调用 `TUIKitWidePopup.showSecondaryConfirmDialog()` 方法即可。参数和配置可查看注释说明。
-
-##### 组件三：鼠标右键菜单
-
-有别与移动端的长按或侧滑出现菜单的操作，桌面端通常采用点击或鼠标右键出现菜单列表的方式，进行功能交互。如图：
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027812451/7e08777ce3dd11ed922b525400088f3a.png)
-
-配合上述组件一：`TUIKitWidePopup.showPopupWindow()` 使用。 
-
-提供 `TUIKitColumnMenu` 菜单列表组件，其中每个菜单项都是一个 `ColumnMenuItem` 组件，可以定义菜单项的显示 `label` 文字，左侧 `icon` 图标，及点击事件。并提供 `closeFunc` 方法，用于在点击事件末尾，关闭右键菜单。
-
-需要点击的按钮用 InkWell 包裹，监听 onTapDown 等可以获取到 TapDownDetails 的事件，获得点击鼠标位置，并将位置加以传入。当然，这里您还需要根据实际放置位置，考虑边界因素的影响，避免这个菜单出界，利用 min 方法和 MediaQuery.of(context).size 等参数配合决定 offset 位置。
-
-以下展示最基础用法，更多用法可参考方法注释：
-``` plaintext
-return InkWell(  
-    onTapDown: (details){    
-      TUIKitWidePopup.showPopupWindow(        
-        isDarkBackground: false,        
-         operationKey: TUIKitWideModalOperationKey.custom,        
-         borderRadius: const BorderRadius.all(            
-           Radius.circular(4)        
-         ),        
-         context: context,        
-         // 下面的 offset 需要根据实际情况及 details 加以计算。
-         offset: Offset(details.globalPosition.dx + 10, details.globalPosition.dy - 200),        
-         child: (closeFunc) => TUIKitColumnMenu(          
-           data: [            
-             ColumnMenuItem(label: TIM_t("个人中心"), onClick: (){              
-               // 你定义的点击事件            
-               closeFunc();            
-             }),            
-             ColumnMenuItem(label: TIM_t("个人中心"), onClick: (){              
-               // 你定义的点击事件 
-               closeFunc();            
-             }),          
-           ],        
-         )    
-       );  
-     },  
-     child: Container(),
-);
-```
-
-
-
-### 附加1：TUIKit 的更多能力
-
-您还可以继续使用以下 TUIKit 组件快速实现完整 IM 功能。
-- [TIMUIKitContact](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitContact/TIMUIKitContact-Implementation.html)：联系人列表页面。
-
-- [TIMUIKitGroupProfile](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitGroupProfile/TIMUIKitGroupProfile-Implementation.html)：群资料页面，使用方式与 `TIMUIKitProfile` 基本一致。
-
-- [TIMUIKitGroup](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitGroup/TIMUIKitGroup-Implementation.html)：群列表界面。
-
-- [TIMUIKitBlackList](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitBlackList/TIMUIKitBlackList-Implementation.html)：黑名单列表界面。
-
-- [TIMUIKitNewContact](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitNewContact/TIMUIKitNewContact-Implementation.html)：联系人（好友）申请列表。如需在外部显示小红点，可使用 `TIMUIKitUnreadCount` 小红点组件，其会自动挂载监听。
-
-- [本地搜索](https://cloud.tencent.com/document/product/269/79121)：`TIMUIKitSearch` 全局搜索组件，支持全局搜索联系人/群组/聊天记录，也支持使用 `TIMUIKitSearchMsgDetail` 在特定会话中搜索聊天记录。两种模式取决于是否传入 `conversation`。
-
-
-   UI 组件全貌可参见 [本全览文档](https://cloud.tencent.com/document/product/269/70747) 或 [详细文档](https://comm.qq.com/im/doc/flutter/zh/TUIKit/readme.html)。接入过程中，可以参考我们的 [Demo 源码](https://github.com/TencentCloud/chat-demo-flutter)。
-
-
-### 附加2：[选装] 使用 Controller 控制 TUIKit
-
-> **说明：**
-> 
-
->  建议在 tencent_cloud_chat_uikit 0.1.5 及以后版本中使用本功能。
-> 
-
-
-通过上述步骤的快速集成，您已经可以搭建一套可用的 IM 模块。如果您有其他额外的控制操作需求，可以使用组件配套的 controller 完成。
-
-使用场景如，在会话列表页面中，您可自定义会话 item 的侧滑菜单，提供置顶会话/删除会话/删除历史消息等功能；抑或是发送消息，满足您的额外消息发送需求，例如通过您自行开发的送礼界面发送一条礼物消息。
-
-目前我们提供三个 controller，如下：
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >组件</td>
-
-<td rowspan="1" colSpan="1" >控制器</td>
+## 常见问题
 
-<td rowspan="1" colSpan="1" >功能</td>
-</tr>
+### **集成 tuikit_atomic_x 组件后，有 **`theme_state`** 和 **`atomic_localizations`** 的报错怎么办？**
 
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitChat](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChat-Implementation.html)</td>
+组件支持主题颜色和国际化字符串切换，需要在项目根目录的 `main.dart` 文件中使用 `ComponentTheme` 来包装根 `widget`，并且需要在 `MaterialApp` 的 `localizationsDelegates` 中增加 `AtomicLocalizations.delegate` 的配置，可参考源码 Demo 中的 `main.dart` 文件的使用。
 
-<td rowspan="1" colSpan="1" >[TIMUIKitChatController](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChatController.html)</td>
+### **登录失败，提示签名错误怎么办？**
 
-<td rowspan="1" colSpan="1" >刷新历史消息列表/更新单条消息/手动发送额外的消息/为消息设置自定义字段 等</td>
-</tr>
+请检查 SDKAppID 和 UserSig 是否正确，UserSig 是否已过期。可以参考上文 [配置用户鉴权](https://write.woa.com/document/193282372365111296) 重新生成 UserSig。
 
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitConversation](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitConversation/TIMUIKitConversation-Implementation.html)</td>
+## 联系我们
 
-<td rowspan="1" colSpan="1" >[TIMUIKitConversationController](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitConversation/TIMUIKitConversationController.html)</td>
+如果您在接入或使用过程中有任何疑问或者建议，欢迎 [联系我们](https://cloud.tencent.com/document/product/269/59590) 提交反馈。
 
-<td rowspan="1" colSpan="1" >获取及刷新会话列表/会话置顶/设置会话的草稿/清空会话内所有消息/删除会话/滚动到特定会话等</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[TIMUIKitProfile](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitProfile/TIMUIKitProfile-Implementation.html)</td>
-
-<td rowspan="1" colSpan="1" >[TIMUIKitProfileController](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitProfile/TIMUIKitProfileController.html)</td>
-
-<td rowspan="1" colSpan="1" >删除联系人好友/置顶当前联系人的会话/将用户加入黑名单/修改被加好友方式/更新联系人备注名/设置联系人消息免打扰/添加联系人好友/更新自己的资料等</td>
-</tr>
-</table>
-
-
-他们的使用方式一致，以 [TIMUIKitChatController](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChatController.html) 举例用法。完整代码可[参考DEMO](https://github.com/TencentCloud/tc-chat-demo-flutter/blob/main/lib/src/chat.dart)。
-1. 在使用到 [TIMUIKitChat](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChat-Implementation.html) 的类中，实例化一个 [TIMUIKitChatController](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChatController.html) 对象。
-
-   
-   
-   【dart】
-   ``` bash
-   final TIMUIKitChatController _chatController = TIMUIKitChatController();
-   ```
-2. 将此对象传入 [TIMUIKitChat](https://comm.qq.com/im/doc/flutter/zh/TUIKit/TIMUIKitChat/TIMUIKitChat-Implementation.html)  的 `controller` 参数中。
-
-   
-   
-   【dart】
-   ``` bash
-   @override
-   Widget build(BuildContext context) {
-     return TIMUIKitChat(
-       controller: _chatController,
-     // ...其他参数
-    );
-   }
-   ```
-3. 在这个类中，即可使用控制器，完成自定义操作。例如发送一条地理位置消息：
-
-   
-   
-   【dart】
-   ``` bash
-   _sendLocationMessage(String desc, double longitude, double latitude) async {
-       final locationMessageInfo = await sdkInstance.v2TIMMessageManager
-           .createLocationMessage(
-           desc: desc,
-           longitude: longitude,
-           latitude: latitude);
-       final messageInfo = locationMessageInfo.data!.messageInfo;
-       _chatController.sendMessage(
-           receiverID: _getConvID(),
-   groupID:_getConvID(),
-           convType: _getConvType(),
-           messageInfo: messageInfo);
-   }
-   ```
-
-### 附加3：[选装] 使用更多插件丰富 TUIKit 使用体验
-
-除 TUIKit 本体基础功能外，我们还提供了四个选装插件，帮助您丰富 IM 能力。
-- [推送服务（Push）](https://write.woa.com/document/125424690534191104)：支持厂商原生离线推送能力及在线推送能力，并支持推送您的其他业务消息，帮助您提高消息触达率。
-
-- [音视频通话插件](https://cloud.tencent.com/document/product/269/72485)：支持类似微信的一对一/群组音视频通话。
-
-- [自定义表情插件](https://cloud.tencent.com/document/product/269/80882)：0.1.5版本后， TUIKit 无自带表情包，需要使用此插件，快速简便集成表情能力。支持 emoji unicode 编码及自定义图片表情。集成过程可参考我们的 [Demo](https://github.com/TencentCloud/tc-chat-demo-flutter/blob/main/lib/src/pages/app.dart)。
-   
-
-   > **说明**
-   > 
-
-   > 更多实用的插件正在开发中，如果您有好的想法及建议，欢迎随时 [联系我们](https://cloud.tencent.com/online-service?from=doc_269&source=PRESALE)。
-   > 
-
-
-## 常见问题
-
-### Android 端报错 `compileSdkVersion` 不合适怎么办？
-1. 请在您项目的 `pubspec.yaml` 文件中，指定确保如下两个插件的版本。
-
-   ``` yaml
-     video_thumbnail: ^0.5.3
-     permission_handler: ^10.0.0
-     flutter_local_notifications: 9.7.0
-   ```
-2. 修改 `android/app/build.gradle` 文件，保证 `android => compileSdkVersion 33`。
-
-   ``` gradle
-   android {
-     compileSdkVersion 33
-     ...
-   }
-   ```
-3. 执行如下命令，重新安装 Android 端依赖。
-
-   ``` shell
-   flutter pub cache clean
-   flutter pub get
-   ```
-
-### 在 Flutter 2.x 上，Android 构建报错 `Codepoint 984472 not found in font, aborting.` 怎么办？
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7d520f31cc6e11edb580525400088f3a.png)
-
-在您的编译命令中，加入 `--no-tree-shake-icons`。如：
-``` shell
-flutter build apk --no-tree-shake-icons --dart-define=SDK_APPID={您的SDKAPPID}
-```
-
-### iOS 端 Pods 依赖无法安装成功怎么办？
-
-#### **尝试方案一：**配置运行后，如果报错，可以单击 **Product** > **Clean Build Folder**，清除产物后重新 `pod install` 或 `flutter run`
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7d6f35facc6e11edb580525400088f3a.png)
-
-#### **尝试方案二：**手动删除 `ios/Pods` 文件夹，及 `ios/Podfile.lock` 文件，并执行如下命令，重新安装依赖
-1. 搭载新款 Apple Silicon 的Mac设备，例如 M1。
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7d8f70a1cc6e11edb580525400088f3a.png)
-
-   ``` shell
-   cd ios
-   sudo arch -x86_64 gem install ffi
-   arch -x86_64 pod install --repo-update
-   ```
-2. 搭载老款 Intel 芯片的 Mac 设备。
-
-   ``` shell
-   cd ios
-   sudo gem install ffi
-   pod install --repo-update
-   ```
-
-### 佩戴 Apple Watch 时，真机调试 iOS 报错怎么办？
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7da55ed9cc6e11edb580525400088f3a.png)
-
-请将您的 Apple Watch 调整至飞行模式，并将 iPhone 的蓝牙功能通过 `设置 => 蓝牙` 彻底关闭。
-
-重新启动 Xcode（若打开），并重新 `flutter run` 即可。
-
-### Flutter 环境问题如何确认？
-
-如您需得知 Flutter 的环境是否存在问题，请运行 Flutter doctor 检测 Flutter 环境是否装好。
-
-### 使用 Flutter 自动生成的项目，引入 TUIKit 后，运行 Android 端报错怎么办？
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100022348635/7dba8a59cc6e11edb580525400088f3a.png)
-1. 打开 `android\app\src\main\AndroidManifest.xml`，根据如下，补全 `xmlns:tools="http://schemas.android.com/tools"` / `android:label="@string/android_label"` 及 `tools:replace="android:label"`。
-
-   
-   
-   【xml】
-   ``` bash
-   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-       package="替换成您的 Android 端包名"
-       xmlns:tools="http://schemas.android.com/tools">
-       <application
-           android:label="@string/android_label"
-           tools:replace="android:label"
-           android:icon="@mipmap/ic_launcher" // 指定一个 icon 路径
-           android:usesCleartextTraffic="true"
-           android:requestLegacyExternalStorage="true">
-   
-   ```
-2. 打开 `android\app\build.gradle`，补全 `defaultConfig` 中 `minSdkVersion` 及 `targetSdkVersion`。
-
-   
-   
-   【gradle】
-   ``` bash
-   defaultConfig {
-     applicationId "" // 替换成您的Android端包名
-     minSdkVersion 21
-     targetSdkVersion 30
-   }
-   
-   ```
-
-### 如果国际化界面语言？
-
-国际化界面语言用法详情，或新增其他语言包，请参见 [Flutter](https://cloud.tencent.com/document/product/269/84481)。
-
-### 如何获取 API 接口调用报错/Flutter 层报错/弹窗提示信息？
-
-请在初始化 TUIKit 时，挂载 `onTUIKitCallbackListener` 监听。
-
-该监听用于返回包括：SDK API 错误 / Flutter 报错 / 一些可能需要弹窗提示用户的场景信息。
-
-通过`TIMCallbackType`确定类型。
-
-示例代码如下。您可以根据您的业务需要，修改以下代码，自定义提醒用户的逻辑，包括但不限于弹窗/横幅等。
-``` dart
-final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
-
-final isInitSuccess = await _coreInstance.init(
-  onTUIKitCallbackListener: (TIMCallback callbackValue){
-    switch(callbackValue.type) {
-      case TIMCallbackType.INFO:
-        // Shows the recommend text for info callback directly
-        Utils.toast(callbackValue.infoRecommendText!);
-        break;
-      case TIMCallbackType.API_ERROR:
-        //Prints the API error to console, and shows the error message.
-        print("Error from TUIKit: ${callbackValue.errorMsg}, Code: ${callbackValue.errorCode}");
-        if (callbackValue.errorCode == 10004 && callbackValue.errorMsg!.contains("not support @all")) {
-            Utils.toast(imt("当前群组不支持@全体成员"));
-        }else{
-          Utils.toast(callbackValue.errorMsg ?? callbackValue.errorCode.toString());
-        }
-        break;
-      case TIMCallbackType.FLUTTER_ERROR:
-      default:
-        // prints the stack trace to console or shows the catch error
-        if(callbackValue.catchError != null){
-          Utils.toast(callbackValue.catchError.toString());
-        }else{
-          print(callbackValue.stackTrace);
-        }
-    }
-  },
-);
-```
-
-下面，分别介绍这三种类型的回调：
-
-#### SDK API 错误（`TIMCallbackType.API_ERROR`）
-
-该场景下，提供 SDK API 原生`errorMsg`及`errorCode`。
-
-[错误码请参考该文档](https://cloud.tencent.com/document/product/269/1671)
-
-#### Flutter 报错（`TIMCallbackType.FLUTTER_ERROR`）
-
-该错误由监听 Flutter 原生抛出异常产生，提供错误发生时的`stackTrace`(来自`FlutterError.onError`)或`catchError`(来自 try-catch)。
-
-#### 场景信息（`TIMCallbackType.INFO`）
-
-建议根据实际情况，将这些信息弹窗提示用户。
-
-具体提示规则和弹窗样式可由您决定。
-
-提供`infoCode`场景码帮助您确定当前的场景，及默认的提示推荐语`infoRecommendText`。
-
-您可直接弹窗提示我们的推荐语，也可根据场景码自定义推荐语。推荐语语言使用系统语言语言或您指定的语言，请勿根据推荐语来判断场景。
-
-**场景码规则如下：**
-
-场景码由七位数组成，前五位数确定场景发生的组件，后两位确定具体的场景表现。
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >场景码开头</td>
-
-<td rowspan="1" colSpan="1" >对应的组件</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66601</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitAddFriend`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66602</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitAddGroup`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66603</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitBlackList`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66604</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitChat`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66605</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitContact`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66606</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitConversation`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66607</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitGroup`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66608</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitGroupProfile`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66609</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitNewContact`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66610</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitGroupProfile`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66611</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitNewContact`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66612</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitProfile`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66613</td>
-
-<td rowspan="1" colSpan="1" >`TIMUIKitSearch`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >66614</td>
-
-<td rowspan="1" colSpan="1" >通用组件</td>
-</tr>
-</table>
-
-
-**全部场景码清单如下：**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >场景码 `infoCode`</td>
-
-<td rowspan="1" colSpan="1" >推荐提示语 `infoRecommendText`</td>
-
-<td rowspan="1" colSpan="1" >场景描述</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660101</td>
-
-<td rowspan="1" colSpan="1" >好友申请已发送</td>
-
-<td rowspan="1" colSpan="1" >用户申请添加其他用户为联系人</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660102</td>
-
-<td rowspan="1" colSpan="1" >该用户已是好友</td>
-
-<td rowspan="1" colSpan="1" >用户申请添加其他已是好友的用户为好友时，触发 `onTapAlreadyFriendsItem` 回调</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660201</td>
-
-<td rowspan="1" colSpan="1" >群申请已发送</td>
-
-<td rowspan="1" colSpan="1" >用户申请加入需要管理员审批的群聊</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660202</td>
-
-<td rowspan="1" colSpan="1" >您已是群成员</td>
-
-<td rowspan="1" colSpan="1" >用户申请加群时，判断用户已经是当前群成员，触发 `onTapExistGroup` 回调</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660401</td>
-
-<td rowspan="1" colSpan="1" >无法定位到原消息</td>
-
-<td rowspan="1" colSpan="1" >当用户需要跳转至@消息或者是引用消息时，在消息列表中查不到目标消息</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660402</td>
-
-<td rowspan="1" colSpan="1" >视频保存成功</td>
-
-<td rowspan="1" colSpan="1" >用户在消息列表，点开视频消息后，选择保存视频</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660403</td>
-
-<td rowspan="1" colSpan="1" >视频保存失败</td>
-
-<td rowspan="1" colSpan="1" >用户在消息列表，点开视频消息后，选择保存视频</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660404</td>
-
-<td rowspan="1" colSpan="1" >说话时间太短</td>
-
-<td rowspan="1" colSpan="1" >用户发送了过短的语音消息</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660405</td>
-
-<td rowspan="1" colSpan="1" >发送失败,视频不能大于 100MB</td>
-
-<td rowspan="1" colSpan="1" >用户试图发送大于 100MB 的视频</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660406</td>
-
-<td rowspan="1" colSpan="1" >图片保存成功</td>
-
-<td rowspan="1" colSpan="1" >用户在消息列表，点开图片大图后，选择保存图片</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660407</td>
-
-<td rowspan="1" colSpan="1" >图片保存失败</td>
-
-<td rowspan="1" colSpan="1" >用户在消息列表，点开图片大图后，选择保存图片</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660408</td>
-
-<td rowspan="1" colSpan="1" >已复制</td>
-
-<td rowspan="1" colSpan="1" >用户在弹窗内选择复制文字消息</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660409</td>
-
-<td rowspan="1" colSpan="1" >暂未实现</td>
-
-<td rowspan="1" colSpan="1" >用户在弹窗内选择非标功能</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660410</td>
-
-<td rowspan="1" colSpan="1" >其他文件正在接收中</td>
-
-<td rowspan="1" colSpan="1" >用户点击下载文件消息时，前序下载任务还未完成</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660411</td>
-
-<td rowspan="1" colSpan="1" >正在接收中</td>
-
-<td rowspan="1" colSpan="1" >用户点击下载文件消息</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660412</td>
-
-<td rowspan="1" colSpan="1" >视频消息仅限 mp4 格式</td>
-
-<td rowspan="1" colSpan="1" >用户发送了一条非 mp4 格式的视频消息</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660413</td>
-
-<td rowspan="1" colSpan="1" >已加入待下载队列，其他文件下载中</td>
-
-<td rowspan="1" colSpan="1" >已加入待下载队列，其他文件下载中</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660414</td>
-
-<td rowspan="1" colSpan="1" >正在下载中</td>
-
-<td rowspan="1" colSpan="1" >桌面端图片/视频资源正在下载中，暂时无法打开，过一会下载好了才能打开</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6660415</td>
-
-<td rowspan="1" colSpan="1" >视频文件异常</td>
-
-<td rowspan="1" colSpan="1" >发送的视频文件资源本身是错误或被损坏，无法发送</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661001</td>
-
-<td rowspan="1" colSpan="1" >无网络连接，无法修改</td>
-
-<td rowspan="1" colSpan="1" >当用户试图在无网络环境下，修改群资料</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661002</td>
-
-<td rowspan="1" colSpan="1" >无网络连接，无法查看群成员</td>
-
-<td rowspan="1" colSpan="1" >当用户试图在无网络环境下，修改群资料</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661003</td>
-
-<td rowspan="1" colSpan="1" >成功取消管理员身份</td>
-
-<td rowspan="1" colSpan="1" >用户将群内其他用户移除管理员</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661201</td>
-
-<td rowspan="1" colSpan="1" >无网络连接，无法修改</td>
-
-<td rowspan="1" colSpan="1" >当用户试图在无网络环境下，修改自己或联系人的资料</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661202</td>
-
-<td rowspan="1" colSpan="1" >好友添加成功</td>
-
-<td rowspan="1" colSpan="1" >在资料页添加其他用户为好友，并自动添加成功，无需验证</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661203</td>
-
-<td rowspan="1" colSpan="1" >好友申请已发出</td>
-
-<td rowspan="1" colSpan="1" >在资料页添加其他用户为好友，对方设置需要验证</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661204</td>
-
-<td rowspan="1" colSpan="1" >当前用户在黑名单</td>
-
-<td rowspan="1" colSpan="1" >在资料页添加其他用户为好友，对方在自己的黑名单内</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661205</td>
-
-<td rowspan="1" colSpan="1" >好友添加失败</td>
-
-<td rowspan="1" colSpan="1" >在资料页添加其他用户为好友，添加失败，可能是由于对方禁止加好友</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661206</td>
-
-<td rowspan="1" colSpan="1" >好友删除成功</td>
-
-<td rowspan="1" colSpan="1" >在资料页删除其他用户为好友，成功</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661207</td>
-
-<td rowspan="1" colSpan="1" >好友删除失败</td>
-
-<td rowspan="1" colSpan="1" >在资料页删除其他用户为好友，失败</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661401</td>
-
-<td rowspan="1" colSpan="1" >输入不能为空</td>
-
-<td rowspan="1" colSpan="1" >当用户在录入信息时，输入了空字符串</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661402</td>
-
-<td rowspan="1" colSpan="1" >请传入离开群组生命周期函数，提供返回首页或其他页面的导航方法</td>
-
-<td rowspan="1" colSpan="1" >用户退出群或解散群时，为提供返回首页办法</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >6661403</td>
-
-<td rowspan="1" colSpan="1" >设备存储空间不足，建议清理，以获得更好使用体验</td>
-
-<td rowspan="1" colSpan="1" >在 login 成功后，会自动检测设备存储空间，如果不足1GB，会提示存储空间不足</td>
-</tr>
-</table>