Merge pull request #1136 from haoxiuwen/doc-v2

Modify Chat UIKit Conversation/Message IMages

docs/document/android/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_android.png) 
 
 ## 技术原理
 

docs/document/flutter/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_cross.png) 
 
 ## 技术原理
 

docs/document/harmonyos/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_android.png) 
 
 ## 技术原理
 

docs/document/ios/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_android.png) 
 
 ## 技术原理
 

docs/document/react-native/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png)
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_cross.png)
 
 ## 技术原理
 

docs/document/unity/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_cross.png) 
 
 ## 技术原理
 

docs/document/windows/conversation_receipt.md

@@ -6,7 +6,7 @@
 
 会话已读回执的效果示例，如下图所示：
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+![img](/images/uikit/chatuikit/feature/conversation/conversation_read_android.png) 
 
 ## 技术原理
 

docs/uikit/chatuikit/android/chatfeature_conversation.md

@@ -10,28 +10,36 @@
 
 在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话已读选项，指定会话将会被置为已读。
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_read.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_read_android.png" title="会话已读" />
+</ImageGallery> 
 
 ## 会话置顶
 
 会话置顶是指用户将重要的会话固定在聊天列表顶部，方便快速访问常用或优先级别的会话。
 
 在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话置顶选项，指定会话将会被放置在会话列表前排区域。
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_pin_android.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_pin_android.png" title="会话置顶" />
+</ImageGallery>
 
 ## 会话免打扰
 
 会话免打扰是指用户暂时关闭特定会话的通知，避免被打扰。
 
 在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话免打扰选项，指定会话将不再接收通知。
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_dnd_android.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_dnd_android.png" title="会话免打扰" />
+</ImageGallery> 
 
 ## 会话删除	
 
 会话删除是指用户永久删除不再需要的会话，清理会话列表。
 
 在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话删除选项，指定会话将会被删除。
 
-![img](/images/uikit/chatuikit/feature/conversation/conversation_delete_android.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_delete_android.png" title="会话删除" />
+</ImageGallery>

docs/uikit/chatuikit/android/chatfeature_message.md

@@ -10,25 +10,33 @@
 
 消息复制是指用户可以将一条消息复制到剪贴板。消息复制可以帮助用户将消息保存到其他地方，或将其粘贴到其他应用程序中。
 
-![img](/images/uikit/chatuikit/feature/message/message_copy.png =600x600) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_copy_android.png" title="消息复制" />
+</ImageGallery>
 
 ## 消息删除	
 
 消息删除是指用户可以删除一条消息。消息删除可以帮助用户删除错误发送的消息，或删除不想保留的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_delete.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_delete_android.png" title="消息删除" />
+</ImageGallery>
 
 ## 消息撤回
 
 消息撤回是指用户可以撤回一条已发送的消息。消息撤回可以帮助用户撤回错误发送的消息，或撤回不想让其他用户看到的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_recall.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_recall_android.png" title="消息撤回" />
+</ImageGallery>
 
 ## 消息编辑
 
 消息编辑是指用户可以编辑一条已发送的消息。消息编辑可以帮助用户纠正错误，或添加新信息。无论单聊还是群组聊天，该特性只支持用户编辑自己发送的消息，不能编辑其他用户发送的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_edit.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_edit_android.png" title="消息编辑" />
+</ImageGallery>
 
 ## 消息引用	
 
@@ -39,7 +47,9 @@
 - `ChatUIKitExtendMessageReplyView`：底部输入框组件上方展示的引用消息自定义 View。
 - `ChatUIKitMessageReplyController`：控制引用功能的显示、隐藏、跳转等逻辑。
 
-![img](/images/uikit/chatuikit/feature/message/message_reply.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_reply_android.png" title="消息引用" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -65,7 +75,9 @@
 
 - 长按消息气泡弹出的显示和隐藏翻译菜单的逻辑在 `ChatUIKitMessageTranslationController` 中。
 
-![img](/images/uikit/chatuikit/feature/message/message_translate.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_translate_android.png" title="消息翻译" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -112,7 +124,9 @@
 
 - 消息气泡中添加 view 以及显示和隐藏 Reaction 布局的逻辑在 `ChatUIKitAddExtendFunctionViewController` 中的 `addReactionViewToMessage`方法。
 
-![img](/images/uikit/chatuikit/feature/message/message_reactions.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_reactions_android.png" title="表情回复" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -132,7 +146,9 @@
 
 单群聊 UIKit 中实现了 Thread 页面 `ChatUIKitThreadActivity`，开发者只需要调用 `ChatUIKitThreadActivity.actionStart` 启动该页面传入需要的参数即可。
 
-![img](/images/uikit/chatuikit/feature/message/message_thread.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_thread_android.png" title="消息话题" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -172,7 +188,9 @@ class ChatThreadActivity:ChatUIKitThreadActivity() {
 - `Forward ChatUIKitMessageMultipleSelectController`：处理 UI 布局变更(隐藏/显示 `ChatUIKitLayout` 中的 `ChatUIKitInputMenu` 输入菜单)以及转发和删除的逻辑。
 - `Forward ChatUIKitMessageMultiSelectHelper`：消息选择帮助类用于记录选中的消息信息并提供获取方法。
 
-![img](/images/uikit/chatuikit/feature/message/message_forward.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_forward_android.png" title="消息合并转发" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -198,7 +216,9 @@ class ChatThreadActivity:ChatUIKitThreadActivity() {
 - `ChatUIKitPinTextMessageViewHolder`：置顶消息文本类型展示样式。
 - `ChatUIKitPinImageMessageViewHolder`：置顶消息图片类型展示样式。
 
-![img](/images/uikit/chatuikit/feature/message/message_pin.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_pin_android.png" title="消息置顶" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -270,9 +290,10 @@ class ChatThreadActivity:ChatUIKitThreadActivity() {
   - 输入状态投递为透传消息，接收到透传消息后，通过 `UIKitChatFragment.Builder` 提供的 `setOnPeerTypingListener` 监听对方输入状态。
   - 输入状态回调为 `onPeerTyping(action: String?)`，其中 `action` 代表状态 `ChatUIKitLayout.ACTION_TYPING_BEGI` ｜ `ChatUIKitLayout.ACTION_TYPING_END`。
 
-| 开启输入状态提示            | 关闭输入状态提示   | 
-| :-------------- | :----- | 
-| <img src=/images/uikit/chatuikit/feature/common/typing_indicator_enable.png width="300"/> |<img src=/images/uikit/chatuikit/feature/common/typing_indicator_disable.png  width="300"/>  | 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/typing_indicator_enable_android.png" title="开启输入状态提示" />
+  <ImageItem src="/images/uikit/chatuikit/feature/message/typing_indicator_disable_android.png" title="关闭输入状态提示" />
+</ImageGallery>
 
 #### 如何使用
 

docs/uikit/chatuikit/flutter/chatfeature_conversation.md

@@ -1,6 +1,45 @@
----
-{
-    pageUri: "/uikit/chatuikit/android/chatfeature_conversation.html",
-    title: "会话列表"
-}
----
+# 会话特性
+
+本文介绍会话相关特性，包括会话已读、置顶、免打扰和删除功能。
+
+<Toc />
+
+## 会话已读	
+
+会话已读是指显示用户是否已阅读过含有未读消息的特定会话。
+
+在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话已读选项，指定会话将会被置为已读。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_read_cross.png" title="会话已读" />
+</ImageGallery> 
+
+## 会话置顶
+
+会话置顶是指用户将重要的会话固定在聊天列表顶部，方便快速访问常用或优先级别的会话。
+
+在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话置顶选项，指定会话将会被放置在会话列表前排区域。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_pin_cross.png" title="会话置顶" />
+</ImageGallery>
+
+## 会话免打扰
+
+会话免打扰是指用户暂时关闭特定会话的通知，避免被打扰。
+
+在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话免打扰选项，指定会话将不再接收通知。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_dnd_cross.png" title="会话免打扰" />
+</ImageGallery> 
+
+## 会话删除	
+
+会话删除是指用户永久删除不再需要的会话，清理会话列表。
+
+在单群聊 UIKit 中，用户可以通过长按会话的操作触发会话拓展功能菜单，选择会话删除选项，指定会话将会被删除。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/conversation/conversation_delete_cross.png" title="会话删除" />
+</ImageGallery>

docs/uikit/chatuikit/flutter/chatfeature_message.md

@@ -10,19 +10,25 @@
 
 消息复制是指用户可以将一条消息复制到剪贴板。消息复制可以帮助用户将消息保存到其他地方，或将其粘贴到其他应用程序中。
 
-![img](/images/uikit/chatuikit/feature/message/message_copy.png =600x600) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_copy_ios.png" title="消息复制" />
+</ImageGallery>
 
 ## 消息删除	
 
 消息删除是指用户可以删除一条消息。消息删除可以帮助用户删除错误发送的消息，或删除不想保留的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_delete.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_delete_ios.png" title="消息删除" />
+</ImageGallery>
 
 ## 消息撤回
 
 消息撤回是指消息的发送方可以在规定时间内对发送的消息进行撤回的操作。消息撤回可以帮助用户撤回错误发送的消息，或撤回不想让其他用户看到的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_recall.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_recall_ios.png" title="消息撤回" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -42,7 +48,9 @@ ChatUIKitSettings.recallExpandTime = 120;
 
 消息编辑是指用户可以编辑一条已发送的消息。消息编辑可以帮助用户纠正错误，或添加新信息。无论单聊还是群组聊天，该特性只支持用户编辑自己发送的消息，不能编辑其他用户发送的消息。
 
-![img](/images/uikit/chatuikit/feature/message/message_edit.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_edit_ios.png" title="消息编辑" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -56,7 +64,9 @@ ChatUIKitSettings.enableMessageEdit = false;
 
 消息引用指用户可以引用一条已发送的消息。消息引用可以帮助用户回复特定的消息，或强调特定的信息。
 
-![img](/images/uikit/chatuikit/feature/message/message_reply.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_reply_ios.png" title="消息引用" />
+</ImageGallery>
 
 目前，单群聊 UIKit 支持引用消息进行回复。消息引用 UI 和逻辑结构如下：
 
@@ -81,7 +91,9 @@ ChatUIKitSettings.enableMessageReply = false;
 
 - 消息翻译的 UI 布局在 `ChatUIKitTextMessageWidget` 中。
 
-![img](/images/uikit/chatuikit/feature/message/message_translate.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_translate_ios.png" title="消息翻译" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -117,7 +129,9 @@ ChatUIKitSettings.translateTargetLanguage = 'zh-Hans';
 
 - Reaction 表情列表的弹窗 `ChatUIKitMessageReactionInfo`。
 
-![img](/images/uikit/chatuikit/feature/message/message_reactions.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_reactions_ios.png" title="表情回复" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -133,7 +147,9 @@ ChatUIKitSettings.enableMessageReaction = true;
 
 消息话题（即 `Thread`）指用户可以在群组聊天中根据一条消息创建话题进行深入探讨，讨论和追踪特定项目任务，而不影响其他聊天内容。
 
-![img](/images/uikit/chatuikit/feature/message/message_thread.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_thread_ios.png" title="消息话题" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -155,7 +171,9 @@ ChatUIKitSettings.enableMessageThread = true;
 
 - 选择转发消息接收人页面 `ForwardMessageSelectView`。
 
-![img](/images/uikit/chatuikit/feature/message/message_forward.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_forward_ios.png" title="消息合并转发" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -187,7 +205,9 @@ ChatUIKitSettings.enableMessageForward = false;
 
 消息置顶指用户将重要信息固定在会话顶部，有助于用户快速访问关键会话，避免遗漏重要内容。该特性尤其适用于处理紧急事务或持续跟进的项目，帮助高效管理重要会话。
 
-![img](/images/uikit/chatuikit/feature/message/message_pin.png) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/message_pin_ios.png" title="消息置顶" />
+</ImageGallery>
 
 #### 如何使用
 
@@ -205,9 +225,10 @@ ChatUIKitSettings.enablePinMsg = false;
 
 本功能使用 SDK 的透传消息实现，详见 [SDK 相关文档](/document/product/typing_indication.html)。
 
-| 开启输入状态提示            | 关闭输入状态提示   | 
-| :-------------- | :----- | 
-| <img src=/images/uikit/chatuikit/feature/flutter/typing_indicator_enable.png width="300"/> |<img src=/images/uikit/chatuikit/feature/flutter/typing_indicator_disable.png width="300"/>  | 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/feature/message/typing_indicator_enable_ios.png" title="开启输入状态提示" />
+  <ImageItem src="/images/uikit/chatuikit/feature/message/typing_indicator_disable_ios.png" title="关闭输入状态提示" />
+</ImageGallery>
 
 #### 如何使用