@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/knowledge/chat/preset/flutter/features/contact-list.md

@@ -0,0 +1,40 @@
+## 组件概述
+
+ContactList 是联系人列表组件，为用户提供完整的联系人管理功能。该组件支持好友列表展示、好友申请处理、群组列表管理、黑名单管理等功能，并提供了丰富的交互回调接口。
+| <strong>联系人列表</strong> | <strong>群组列表</strong> | <strong>好友申请列表</strong> |
+| --- | --- | --- |
+|  |  |  |
+
+## 组件集成
+
+`ContactList` 组件属于 TUIKit Flutter 的一部分，集成 TUIKit Flutter 即可获取并使用 `ContactList` 组件。集成方法请参考文档 TUIKit Flutter 里的集成步骤。
+
+## 组件构成
+
+`ContactList` 是联系人列表里的主组件，对应着整个联系人列表页框架：
+| <strong>方法名</strong> | <strong>参数</strong> | <strong>描述</strong> |
+| --- | --- | --- |
+| <code>ContactList</code> | <code>onGroupClick: (ContactInfo contactInfo) {}</code> | 点击群组的回调，可选参数。 |
+| <code>onContactClick: (ContactInfo contactInfo) {}</code> | 点击联系人的回调，可选参数。 |  |
+
+`ContactList` 上半部分预留了各个子视图的入口 cell，例如好友申请、群聊申请、群聊列表和黑名单列表。下半部分内嵌了联系人列表，如下图所示：
+
+## 基础用法
+
+在 `ContactList` 中点击好友申请、群聊申请、群聊列表和黑名单列表入口时，由组件自动完成路由，无需额外处理；
+
+点击群聊列表中的群组或联系人列表/黑名单中的个人时，会触发相应的回调接口 (`onGroupClick/onContactClick`)，需监听回调并实现自定义跳转。
+
+路由跳转示例图如下所示：
+
+初始化 ContactList 即可直接展示联系人列表，示例代码如下：
+``` swift
+ContactList(
+  onGroupClick: (ContactInfo contactInfo) {
+    // 处理群组点击事件
+  },
+  onContactClick: (ContactInfo contactInfo) {
+    // 处理联系人点击事件
+  },
+),
+```

package/resource/knowledge/chat/preset/flutter/features/conversation-list.md

@@ -0,0 +1,129 @@
+## 组件概述
+
+ConversationList 是一个会话列表组件，主要用于展示和管理用户的聊天会话。该组件提供了完整的会话列表功能，包括会话展示、交互操作等核心能力。
+| <strong>会话列表</strong> | <strong>会话操作</strong> |
+| --- | --- |
+|  |  |
+
+## 组件集成
+
+ConversationList 是属于 TUIKit Flutter 的一个组件，集成 TUIKit Flutter 即可获取并使用 ConversationList，集成方法请参考文档 TUIKit Flutter 里的集成步骤。
+
+## 组件构成
+
+ConversationList 组件对外仅暴露了会话列表的初始化方法，其他逻辑均封装在 ConversationList 中。
+
+#### 对外方法
+| 方法名 | 参数 | 描述 |
+| --- | --- | --- |
+| <code>ConversationList</code> | <code>onConversationClick: (ConversationInfo conversation) {}</code> | 设置会话点击回调。 |
+| <code>config: ConversationActionConfigProtocol</code> | 初始化组件，设置会话操作菜单项，选填。 |  |
+| <code>customActions: List<ConversationCustomAction></code> | 初始化组件，设置自定义会话操作选项，选填。 |  |
+
+## 基础用法
+
+ConversationList 组件可直接初始化使用，需要传入 onConversationClick 回调。
+
+|参数名|类型|描述|
+|---------|---------|---------|
+|`onConversationClick`|`(ConversationInfo conversation) {}`|会话点击回调，当用户点击某个会话 cell 时触发。|
+
+示例代码如下：
+``` java
+Expanded(
+  child: ConversationList(
+    onConversationClick: (conversation) {
+      // 这里建议导航到聊天页面
+    },
+  ),
+),
+```
+
+## 自定义组件
+
+您可以自定义会话列表的操作项。方法如下。
+
+#### 方式 1. 局部隐藏会话操作项
+
+初始化 ConversationList 时传入自定义 config，设置是否展示某些菜单项：
+``` java
+Expanded(
+  child: ConversationList(
+    config: ChatConversationActionConfig(
+      isSupportDelete: true,
+      isSupportPin: true,
+      isSupportClearHistory: false
+    ),
+    onConversationClick: (conversation) {
+      // 点击会话 cell 跳转
+    },
+  ),
+),
+```
+
+**目前支持的菜单项开关操作**
+
+|操作类型|描述|
+|---------|---------|
+|`isSupportDelete`|是否支持删除会话。|
+|`isSupportPin`|是否支持置顶会话。|
+|`isSupportClearHistory`|是否支持清空历史消息|
+
+#### 方式 2. 局部增加会话操作项
+
+初始化 ConversationList 时传入 `customActions`，ConversationList 内部会在默认的 action 底部添加您增加的自定义选项：
+
+|参数名|类型|描述|
+|---------|---------|---------|
+|`customActions`|`List<ConversationCustomAction>`|自定义会话操作，当用户点击会话操作菜单时展示。|
+
+示例代码如下：
+``` swift
+Expanded(
+  child: ConversationList(
+    customActions: [
+      ConversationCustomAction(
+        title: 'Share',
+        action: (conversation) {
+          print('Share conversation: ${conversation.title}');
+        })
+    ],
+  ),
+),
+```
+
+#### 方式 3. 全局配置方式
+
+通过 `AppBuilder` 进行全局配置：
+``` swift
+// 在应用启动时配置，不包含则不支持
+await AppBuilder.init();
+AppBuilder.getInstance().conversationListConfig = ConversationListConfig(
+    conversationActionList: [
+      AppBuilder.CONVERSATION_ACTION_DELETE,
+      AppBuilder.CONVERSATION_ACTION_PIN,
+      AppBuilder.CONVERSATION_ACTION_CLEAR_HISTORY
+    ],
+    // ... 其他必须属性
+);
+
+// 接下来再初始化 ConversationList，所有的 ConversationList 都会遵守上面 conversationActionList 的配置
+Expanded(
+  child: ConversationList(
+    onConversationClick: (conversation) {
+      // 这里可以导航到聊天页面
+    },
+  ),
+),
+```
+
+> **注意：**
+>
+
+> 局部配置的优先级大于全局配置。
+>
+
+自定义效果如下图所示：
+| 会话操作（默认选项） | 会话操作（隐藏<strong>删除</strong>选项） | 会话操作（新增<strong>隐藏会话</strong>选项） |
+| --- | --- | --- |
+|  |  |  |

package/resource/knowledge/chat/preset/flutter/features/language.md

@@ -0,0 +1,104 @@
+TUIKit Flutter 默认自带 **简体中文/繁体中文/英文/日语/韩语/阿拉伯语** 语言包，作为界面展示语言，通过简单的配置，开发者可以轻松实现语言的动态切换。
+| 简体中文 | 繁体中文 | 英文 | 日语 | 韩语 | 阿拉伯语 |
+| --- | --- | --- | --- | --- | --- |
+|  |  |  |  |  |  |
+
+## 使用自带语言
+
+### 配置语言
+
+按照 [TUIKit Flutter](https://cloud.tencent.com/document/product/269/125903) 里的集成步骤集成组件后，可以使用 `LocaleProvider` 和 `AtomicLocalizations` 配置国际化语言。需要在您的应用的主入口使用 `MultiProvider` 包装，并在 `MaterialApp` 中做如下配置，可以参考 [demo](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/chat/demo/lib/main.dart) 实现：
+``` javascript
+
+  @override
+  Widget build(BuildContext context) {
+    return ComponentTheme(
+      child: MultiProvider(
+        providers: [
+          // 切换语言的 provider，可监听语言变化并通知组件动态切换语言
+          ChangeNotifierProvider.value(value: LocaleProvider()),
+        ],
+        child: Builder(builder: (context) {
+          final themeState = BaseThemeProvider.of(context);
+          final isDarkMode = themeState.isDarkMode;
+          // 获取语言 provider
+          final localeProvider = Provider.of<LocaleProvider>(context);
+          return MaterialApp(
+            // ...... 省略其他配置
+            localizationsDelegates: const [
+              AtomicLocalizations.delegate,
+            // ...... 可以添加其他组件的国际化语言
+            ],
+            supportedLocales: AtomicLocalizations.supportedLocales, // 添加应用支持的语言
+            locale: localeProvider.locale, // 设置当前语言
+          );
+        }),
+      ),
+    );
+```
+
+### 跟随系统语言
+
+配置语言后，插件内部会默认跟随系统语言自适应。
+
+### 实时动态修改
+
+组件的` LocaleProvider`提供了切换语言的方法 `changeLanguage`，并且会把上一次选择的语言缓存在本地，当应用再次启动时可以获取 `locale` 字段得到前一次选择的语言。
+
+参考 demo 的 [设置界面](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/chat/demo/lib/pages/settings_page.dart) 来实现，获取 `LocaleProvider` 对象，调用 `changeLanguage` 方法切换语言：
+``` javascript
+final localeProvider = Provider.of<LocaleProvider>(context, listen: false);
+// 切换语言：英文
+localeProvider.changeLanguage('en');
+```
+
+切换语言后，`StatefulWidget` 界面的`State` 子类会执行生命周期方法 `didChangeDependencies`，在该方法中初始化 `AtomicLocalizations` 对象，并使用自带的国际化词条。
+
+示例代码如下：
+``` javascript
+class ContactList extends StatefulWidget {
+  const ContactList({
+    super.key,
+  });
+
+  @override
+  State<ContactList> createState() => _ContactListState();
+}
+
+class _ContactListState extends State<ContactList> {
+  late AtomicLocalizations atomicLocale;
+  // 省略其他代码
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    // 动态初始化
+    atomicLocale = AtomicLocalizations.of(context);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // 根据语言变化，选择 addFriend 词条对应的语言
+    return Text(atomicLocale.addFriend);
+  }
+}
+```
+
+## 自定义国际化语言
+
+要实现自定义国际化语言，则需采用 [TUIKit Flutter](https://cloud.tencent.com/document/product/269/125903) 源码集成 tuikit_atomic_x 组件的方式。
+
+### 新增语言资源文件
+
+国际化词条存储于 [l10n](https://github.com/Tencent-RTC/TUIKit_Flutter/tree/main/atomic-x/lib/base_component/l10n) 目录的 `.arb` 文件中。扩展新语言的核心工作是：创建一个对应语言编码的新 `.arb` 文件，并完成词条翻译。
+- 创建文件：复制任一现有语言文件，并重命名为 `l10n_<语言代码>.arb`（例如西班牙语：`l10n_es.arb`）。
+
+- 翻译内容：将新文件中的所有词条翻译为对应的目标语言。
+
+   然后在组件根目录执行 `flutter gen-l10n` 命令后，localizations 目录下会增加该语言文件。
+
+   在 `locale_provider.dart` 中增加西班牙语缓存到本地的逻辑，调用 `changeLanguage('es')`方法即可切换为西班牙语。
+
+### 个性化自定义翻译
+
+在 l10n 目录下不同语言资源文件中语言的 key 是相同的，具体内容可以自定义翻译或者增加，然后在组件根目录执行 `flutter gen-l10n` 命令即可。

package/resource/knowledge/chat/preset/flutter/features/message-input.md

@@ -0,0 +1,54 @@
+## 组件概述
+
+MessageInput 是消息输入组件，为用户提供完整的消息编辑和发送功能。该组件支持多种消息类型的输入和发送，包括文本消息、图片、视频、文件、语音等，同时提供表情选择等增强功能，支持多种样式配置和自定义选项。
+| <strong>消息输入界面</strong> | <strong>表情选择器</strong> |
+| --- | --- |
+|  |  |
+
+## 组件集成
+
+MessageInput 组件属于 TUIKit Flutter 的一部分，集成 TUIKit Flutter 即可获取并使用 MessageInput 组件。集成方法请参考文档 TUIKit Flutter 里的集成步骤。
+
+## 组件构成
+
+MessageInput 组件包含消息输入核心组件和样式配置协议，提供了消息输入功能，并支持自定义。
+
+#### 初始化参数
+
+|参数名|类型|描述|
+|---------|---------|---------|
+|`conversationID`|`String`|会话 ID，用于标识当前聊天会话|
+|`config`|`MessageInputConfigProtocol`|输入样式配置，控制各功能按钮的显示|
+
+## 基础用法
+
+MessageInput 组件可直接初始化使用，需要提供会话 ID。
+``` swift
+Column(
+  children: [
+    MessageInput(
+      conversationID: 'conversation_123',
+    ),
+  ],
+);
+```
+
+## 自定义组件
+
+您可以自定义决定是否显示输入栏上的功能入口：
+``` swift
+// 自定义显示哪些功能按钮
+MessageInput(
+  conversationID: widget.conversation.conversationID,
+  config: ChatMessageInputConfig(
+    isShowAudioRecorder: false,  // 隐藏语音录制
+    isShowPhotoTaker: true,      // 显示拍照功能
+    isShowMore: true,            // 显示更多功能
+  ),
+),
+```
+
+自定义效果如下图所示：
+| 默认输入框 | 隐藏输入框上的语音录制功能 | 隐藏输入框上的全部功能 |
+| --- | --- | --- |
+|  |  |  |

package/resource/knowledge/chat/preset/flutter/features/message-list.md

@@ -0,0 +1,163 @@
+## 组件概述
+
+MessageList 是消息列表组件，主要用于展示和管理聊天消息。该组件提供了完整的消息类型展示功能：
+- 消息类型支持：文本、图片、视频、语音、文件、系统消息、表情消息等。
+
+- 消息操作：支持长按菜单操作，例如复制、删除、撤回、以及自定义操作。
+
+- 高度可定制：支持多种样式配置（例如气泡颜色、圆角、字体）和自定义操作项。
+
+| <strong>聊天消息列表</strong> | <strong>消息长按菜单</strong> |
+| --- | --- |
+|  |  |
+
+## 组件集成
+
+MessageList 是属于 TUIKit Flutter 的一个组件，集成 TUIKit Flutter 即可获取并使用 MessageList，集成方法请参考文档 TUIKit Flutter 里的集成步骤。
+
+## 组件构成
+
+MessageList 组件对外仅暴露了消息列表的初始化方法，其他逻辑均封装在 MessageList 中。
+
+#### 对外方法
+| 方法名 | 参数 | 描述 |
+| --- | --- | --- |
+| <code>MessageList</code> | <code>conversationID: String</code> | 初始化组件，设置会话 ID。如果是单聊，组成方式为 c2c_userID。如果是群聊，组成方式为 group_groupID。 |
+| <code>config: MessageListConfigProtocol</code> | 初始化组件，设置消息列表样式。 |  |
+| <code>customActions: List<MessageCustomAction></code> | 初始化组件，设置自定义消息菜单选项。 |  |
+| <code>locateMessage: MessageInfo?</code> | 初始化组件，设置定位消息。通常用于从消息搜索结果页跳转到消息页同时定位到目标消息。 |  |
+| <code>onUserClick: (String userID) {}</code> | 初始化组件，设置点击用户头像跳转响应事件。 |  |
+
+## 基础用法
+
+MessageList 组件可直接初始化使用，需要提供会话 ID。除此之外，我们还建议您在初始化方法中实现 onUserClick。
+``` swift
+MessageList(
+  conversationID: 'conversation_123',
+  onUserClick: (String userID) {
+    // 点击用户头像响应事件
+  },
+),
+```
+
+## 自定义组件
+
+您可以自定义消息列表的样式和操作项。方法如下。
+
+#### 自定义样式
+
+您可以实现 `MessageListConfigProtocol` 来创建完全自定义的样式：
+``` swift
+class MyCustomConfig extends MessageListConfigProtocol {
+  @override
+  String get alignment => AppBuilder.MESSAGE_ALIGNMENT_TWO_SIDED;
+
+  @override
+  bool get isShowTimeMessage => true;
+
+  @override
+  bool get isShowLeftAvatar => true;
+
+  @override
+  bool get isShowLeftNickname => true;
+
+  @override
+  bool get isShowRightAvatar => true;
+
+  @override
+  bool get isShowRightNickname => true;
+
+  // ... 其他必须属性
+}
+
+// 使用自定义样式
+MessageList(
+  conversationID: 'conversation_123',
+  config: MyCustomConfig(),
+);
+
+```
+
+`MessageListConfigProtocol` 属性说明：
+| 属性名 | 类型 | 描述 | 备注 |
+| --- | --- | --- | --- |
+| <code>alignment</code> | <code>String</code> | 消息对齐方式。 | - <code>MessageAlignment.LEFT</code>：左对齐。<br>- <code>MessageAlignment.RIGHT</code>：右对齐。<br>- <code>MessageAlignment.TWO_SIDED</code>：左右对齐。 |
+| <code>isShowTimeMessage</code> | <code>bool</code> | 是否显示时间消息。 | 控制是否显示消息时间戳。 |
+| <code>isShowLeftAvatar</code> | <code>bool</code> | 是否显示左侧头像。 | 控制接收消息时是否显示发送者头像。 |
+| <code>isShowLeftNickname</code> | <code>bool</code> | 是否显示左侧昵称。 | 控制接收消息时是否显示发送者昵称。 |
+| <code>isShowRightAvatar</code> | <code>bool</code> | 是否显示右侧头像。 | 控制发送消息时是否显示自己头像。 |
+| <code>isShowRightNickname</code> | <code>bool</code> | 是否显示右侧昵称。 | 控制发送消息时是否显示自己昵称。 |
+| <code>isShowTimeInBubble</code> | <code>bool</code> | 是否在气泡内显示时间。 | 控制时间戳是否显示在消息气泡内部。 |
+| <code>cellSpacing</code> | <code>double</code> | 消息间距。 | 控制相邻消息之间的间距。 |
+| <code>isShowSystemMessage</code> | <code>bool</code> | 是否显示系统消息。 | 控制是否显示系统通知类消息。 |
+| <code>isShowUnsupportMessage</code> | <code>bool</code> | 是否显示不支持的消息。 | 控制是否显示不支持类型的消息。 |
+| <code>horizontalPadding</code> | <code>double</code> | 水平内边距。 | 控制消息列表的左右内边距。 |
+| <code>avatarSpacing</code> | <code>double</code> | 头像间距。 | 控制头像与消息内容之间的间距。 |
+| <code>isSupportCopy</code> | <code>bool</code> | 消息操作菜单是否支持复制。 | - |
+| <code>isSupportDelete</code> | <code>bool</code> | 消息操作菜单是否支持删除。 | - |
+| <code>isSupportRecall</code> | <code>bool</code> | 消息操作菜单是否支持撤回。 | - |
+
+### **自定义操作项**
+
+您可以采用多种方式自定义长按消息菜单项。
+
+#### 方式 1. 局部隐藏/显示操作项
+
+初始化 MessageList 时，通过设置 config 中的 `isSupportCopy`、`isSupportDelete`、`isSupportRecall` 来显示操作项：
+``` swift
+MessageList(
+  conversationID: 'conversation_123',
+  config: ChatMessageListConfig(isSupportCopy: false),
+);
+
+```
+
+#### 方式 2. 局部增加操作项
+
+初始化 MessageList 时传入 `customActions`，MessageList 内部会在默认的 action 底部添加您增加的自定义选项：
+``` swift
+MessageList(
+  conversationID: 'conversation_123',
+  customActions: [
+    MessageCustomAction(
+      title: 'Share',
+      systemIconFallback: Icons.share,
+      action: (MessageInfo messageInfo) {
+        print('share message');
+      },
+    )
+  ],
+);
+```
+
+#### **方式 3. 全局配置操作项**
+
+通过 `AppBuilderConfig` 进行全局配置：
+``` swift
+// 在应用启动时配置
+await AppBuilder.init();
+AppBuilder.getInstance().messageListConfig = MessageListConfig(
+  messageActionList: [
+    AppBuilder.MESSAGE_ACTION_COPY,
+    AppBuilder.MESSAGE_ACTION_DELETE,
+    AppBuilder.MESSAGE_ACTION_RECALL,
+  ],
+  // 其他配置
+);
+
+// 接下来再初始化 MessageList，所有的 MessageList 都会遵守上面的配置
+MessageList(
+  conversationID: 'conversation_123',
+);
+```
+
+> **注意：**
+>
+
+> 局部配置的优先级大于全局配置。
+>
+
+自定义效果如下图所示：
+| 消息列表操作（默认选项） | 消息列表操作（隐藏<strong>复制</strong>选项） | 消息列表操作（新增<strong>分享</strong>选项） |
+| --- | --- | --- |
+|  |  |  |

package/resource/knowledge/chat/preset/flutter/features/search.md

@@ -0,0 +1,59 @@
+## **组件概述**
+
+Search 是搜索组件，为用户提供搜索框、搜索结果展示、界面跳转等功能的完整组件集合。该组件支持用户搜索、群组搜索、消息搜索等功能，并提供了丰富的交互回调接口。
+
+> **说明：**
+>
+
+> 搜索为旗舰版或企业版功能，购买旗舰版或企业版套餐包 后可使用，详情请参见 [价格说明](https://cloud.tencent.com/document/product/269/81908#FUNCDetail)。
+>
+
+| <strong>搜索入口</strong> | <strong>搜索结果</strong> |
+| --- | --- |
+|  |  |
+
+## 组件集成
+
+Search 组件属于 TUIKit Flutter 的一部分，集成 TUIKit Flutter 即可获取并使用 Search 组件。集成方法请参考文档 [TUIKit Flutter ](https://cloud.tencent.com/document/product/269/125903)里的集成步骤，完成登录操作。
+
+## 组件构成
+
+`SearchBar` 是搜索的入口 Widget，您可以将其放置在 Scaffold body 的顶部，对外仅暴露了搜索组件的初始化方法，其他逻辑均封装在 `SearchBar` 中。
+| 方法名 | 参数 | 描述 |
+| --- | --- | --- |
+| SearchBar | <code>onContactSelect: (</code><a href="https://pub.dev/documentation/atomic_x_core/latest/api_search_search_store/FriendSearchInfo-class.html">FriendSearchInfo</a><code> selectedContact) {}</code> | 点击搜索到的联系人条目时的回调，可选参数。 |
+| <code>onGroupSelect: (</code><a href="https://pub.dev/documentation/atomic_x_core/latest/api_search_search_store/GroupSearchInfo-class.html">GroupSearchInfo</a><code> selectedGroup) {}</code> | 点击搜索到的群组条目时的回调，可选参数。 |  |
+| <code>onConversationSelect: (</code><a href="https://pub.dev/documentation/atomic_x_core/latest/api_search_search_store/MessageSearchResultItem-class.html">MessageSearchResultItem</a><code> selectedConversation) {}</code> | 点击搜索到的会话条目时的回调，可选参数。 |  |
+| <code>onMessageSelect: (</code><a href="https://pub.dev/documentation/atomic_x_core/latest/api_message_message_list_store/MessageInfo-class.html">MessageInfo</a><code> selectedMessage) {}</code> | 点击搜索到的消息条目时的回调，可选参数。 |  |
+
+## 基础用法
+
+`SearchBar` 的搜索结果路由跳转如下：
+- 自动路由：在搜索结果界面中，点击**更多**或聊天记录列表时，组件内部会通过 Navigator 自动完成页面跳转。
+
+- 自定义路由：当用户点击具体的联系人、群组、会话或消息时，组件会触发相应的回调`onContactSelect/onGroupSelect/onConversationSelect/onMessageSelect`，需在回调中实现自定义跳转（例如跳转到您的自定义聊天界面）。
+
+   如下图所示：
+
+   `SearchBar`组件可直接初始化使用，示例代码如下：
+
+   ``` java
+
+   SearchBar(
+     onContactSelect: (FriendSearchInfo selectedContact) {
+       // 联系人点击响应事件
+     },
+
+     onGroupSelect: (GroupSearchInfo selectedGroup) {
+       // 群组点击响应事件
+     },
+
+     onConversationSelect: (MessageSearchResultItem selectedConversation) {
+       // 会话点击响应事件
+     },
+
+     onMessageSelect: (MessageInfo selectedMessage) {
+       // 消息点击响应事件
+     },
+   ),
+   ```

package/resource/{doc/chatkit → knowledge/chat/preset}/flutter/features/theme.md

@@ -1,7 +1,7 @@
 TUIKit Flutter 提供了强大的外观定制能力，支持自定义应用的主题模式（浅色/深色/跟随系统）和主题色。通过简单的配置，开发者可以轻松实现应用级别的主题切换和品牌色定制。
 
 以消息列表为例，自定义主题模式和主题色的效果如下图所示：
-| **浅色 + 默认颜色** | **浅色 + 橘黄色** | **深色 + 默认颜色** | **深色 + 绿色主题** |
+| <strong>浅色 + 默认颜色</strong> | <strong>浅色 + 橘黄色</strong> | <strong>深色 + 默认颜色</strong> | <strong>深色 + 绿色主题</strong> |
 | --- | --- | --- | --- |
 |  |  |  |  |
 
@@ -31,13 +31,14 @@ TUIKit Flutter 提供了强大的外观定制能力，支持自定义应用的
 ### 设置主题模式
 | 方法 | 参数 | 返回值 | 说明 |
 | --- | --- | --- | --- |
-| `setThemeMode` | `ThemeType` | `void` | 设置显示模式，自动保存并刷新。<br>• `ThemeType.SYSTEM`：跟随系统外观。<br>• `ThemeType.LIGHT`：强制使用浅色模式。<br>• `ThemeType.DARK`：强制使用深色模式。 |
+| <code>setThemeMode</code> | <code>ThemeType</code> | <code>void</code> | 设置显示模式，自动保存并刷新。<br>- <code>ThemeType.SYSTEM</code>：跟随系统外观。<br>- <code>ThemeType.LIGHT</code>：强制使用浅色模式。<br>- <code>ThemeType.DARK</code>：强制使用深色模式。 |
 
 ### 设置主题色
-| 方法 | 参数 | 返回值 | 说明 |
-| --- | --- | --- | --- |
-| `setPrimaryColor` | `String` | `Unit` | 设置主题色，需要 Hex 格式（例如 "#1C66E5"）。 |
-| `clearPrimaryColor` | 无 | `Unit` | 清除自定义主题色，恢复默认蓝色。 |
+
+|方法|参数|返回值|说明|
+|---------|---------|---------|---------|
+|`setPrimaryColor`|`String`|`Unit`|设置主题色，需要 Hex 格式（例如 "#1C66E5"）。|
+|`clearPrimaryColor`|无|`Unit`|清除自定义主题色，恢复默认蓝色。|
 
 > **说明：**
 >
@@ -48,26 +49,52 @@ TUIKit Flutter 提供了强大的外观定制能力，支持自定义应用的
 ### 查询 ThemeState 信息
 
 通过以下只读属性可以查询当前的主题配置状态和信息：
-| 属性 | 类型 | 说明 |
-| --- | --- | --- |
-| `currentMode` | `ThemeType` | 当前主题模式。 |
-| `currentPrimaryColor` | `String?` | 当前主题色（Hex 格式）。 |
-| `hasCustomPrimaryColor` | `Boolean` | 是否设置了自定义主题色。 |
-| `isDarkMode` | `Boolean` | 当前是否为深色模式。 |
+
+|属性|类型|说明|
+|---------|---------|---------|
+|`currentMode`|`ThemeType`|当前主题模式。|
+|`currentPrimaryColor`|`String?`|当前主题色（Hex 格式）。|
+|`hasCustomPrimaryColor`|`Boolean`|是否设置了自定义主题色。|
+|`isDarkMode`|`Boolean`|当前是否为深色模式。|
 
 ## 使用方式
 
 本章节介绍如何在您的应用中集成和使用主题、主题色定制功能，按照从简单到复杂的顺序提供三种方式。
 
+### 配置项目
+
+首先需要在您的应用的主入口使用 `ComponentTheme` 包装，并在 `MaterialApp` 中做如下配置，可以参考 [demo](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/chat/demo/lib/main.dart) 实现：
+``` java
+  @override
+  Widget build(BuildContext context) {
+    return ComponentTheme(
+      child: MultiProvider(
+        providers: [
+          ChangeNotifierProvider.value(value: LocaleProvider()),
+        ],
+        child: Builder(builder: (context) {
+          final themeState = BaseThemeProvider.of(context);
+          final isDarkMode = themeState.isDarkMode;
+          // ...... 省略其他配置
+          return MaterialApp(
+            themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
+            // ...... 省略其他配置
+          );
+        }),
+      ),
+    );
+
+```
+
 ### 方式一：使用 AppBuilder 配置（推荐）
 
 AppBuilder是一个便捷式功能及 UI 自定义配置工具，通过 JSON 配置文件统一管理，适用于 Web + Native 双端应用需要保持统一外观的场景。
 
-您可以在 [Chat Web 体验馆](https://trtc.io/demo/homepage/#/detail?scene=messenger) 体验 AppBuilder 功能，体验入口：
+您可以在 [Chat Web 体验馆](https://trtc.io/demo/homepage/#/detail) 体验 AppBuilder 功能，体验入口：
 
 虽然 Chat Web 体验馆上暂时无法实时观看移动端的配置效果，但移动端已经预先支持了 AppBuilder 的配置能力。
 
-接下来为您介绍在 Web 体验馆设置 AppBuilder 后，如何在移动端项目中应用该自定义配置。操作步骤比较简单，只有 2 步：
+接下来为您介绍在 Web 体验馆设置 AppBuilder 后，如何在移动端项目中应用该自定义配置。操作步骤比较简单，只有三步：
 1. 下载配置文件。
 
 2. 将配置文件 appConfig.json 拖入您的 Flutter 项目中。
@@ -76,7 +103,7 @@ AppBuilder是一个便捷式功能及 UI 自定义配置工具，通过 JSON 配
 
 #### 步骤1：下载配置文件
 
-访问 [Chat Web 体验馆](https://trtc.io/demo/homepage/#/detail?scene=messenger)，下载配置文件 appConfig.json。下载路径为：
+访问 [Chat Web 体验馆](https://trtc.io/demo/homepage/#/detail)，下载配置文件 appConfig.json。下载路径为：
 
 `appConfig.json`文件内容如下所示，与 AppBuilder 页面的配置项一一对应，与定义外观相关的配置是 `theme`及其子字段：
 ``` json
@@ -119,10 +146,11 @@ AppBuilder是一个便捷式功能及 UI 自定义配置工具，通过 JSON 配
 ```
 
 **配置选项说明**
-| 参数说明 | 类型 | 可选值 | 说明 |
-| --- | --- | --- | --- |
-| `mode` | String | `"system"`、`"light"`、`"dark"` | 主题模式 |
-| `primaryColor` | String | Hex 颜色值，例如 `"#0ABF77"` | 主题色 |
+
+|参数说明|类型|可选值|说明|
+|---------|---------|---------|---------|
+|`mode`|String|`"system"`、`"light"`、`"dark"`|主题模式|
+|`primaryColor`|String|Hex 颜色值，例如 `"#0ABF77"`|主题色|
 
 #### 步骤2：将配置文件拖入项目中