Merge pull request #1088 from haoxiuwen/doc-v2

Modify UIKit Images

docs/uikit/chatuikit/android/chatuikit_chat.md

@@ -11,7 +11,7 @@
 
 消息相关功能，详见[功能介绍文档](chatfeature_message.html)。
 
-<ImageGallery :columns="3">
+<ImageGallery>
   <ImageItem src="/images/uikit/chatuikit/android/custom_chat_detail.png" title="聊天页面" />
 </ImageGallery>
 
@@ -226,7 +226,9 @@ class CustomMessageAdapter: ChatUIKitMessagesAdapter() {
 builder.setCustomAdapter(CustomMessageAdapter())
 ```
 
-![img](/images/uikit/chatuikit/android/buble2.png =400x750)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/custom_message_type.png" title="自定义消息类型" />
+</ImageGallery>
 
 ### 列表控件相关功能设置
 
@@ -277,7 +279,10 @@ val chatExtendMenu: IChatExtendMenu? = binding?.layoutChat?.chatInputMenu?.chatE
 | setMenuOrder()     | 对指定的菜单项进行排序。 |
 | registerMenuItem() | 添加新的菜单项。         |
 
-![img](/images/uikit/chatuikit/android/editor2.png =400x700)
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/custom msg_type_list.png" title="消息类型扩展" />
+</ImageGallery>
 
 ### 监听扩展条目点击事件
 

docs/uikit/chatuikit/android/chatuikit_contactlist.md

@@ -152,7 +152,9 @@ class CustomContactListAdapter : ChatUIKitContactListAdapter() {
 builder.setCustomAdapter(CustomContactListAdapter)
 ```
 
-![img](/images/uikit/chatuikit/android/group_creating.png =350x600) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/contactlist_configurable.png" title="可选择的联系人列表" />
+</ImageGallery>
 
 ### 设置成可选择的联系人列表
 

docs/uikit/chatuikit/android/chatuikit_userinfo.md

@@ -137,7 +137,9 @@ ChatUIKitClient.setGroupProfileProvider(object : ChatUIKitGroupProfileProvider {
 })
 ```
 
-![img](/images/uikit/chatuikit/android/cvs-nick.png =450x800)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/conversation_list_custom_all.png" title="会话头像和昵称" />
+</ImageGallery>
 
 ## UIKit 信息处理逻辑
 

docs/uikit/chatuikit/flutter/chatuikit_theme.md

@@ -22,11 +22,15 @@
 
 - 浅色主题
 
-![img](/images/uikit/chatuikit/android/light_mode.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/light_mode.png" title="浅色主题" />
+</ImageGallery>
 
 - 深色主题
 
-![img](/images/uikit/chatuikit/android/dark_mode.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/dark_mode.png" title="深色主题" />
+</ImageGallery>
 
 ## 切换主题
 

docs/uikit/chatuikit/ios/chatuikit_config_item.md

@@ -10,7 +10,9 @@
 
 `Appearance.pageContainerConstraintsSize = value`：底部弹窗页面的宽度和高度。主要使用类在 Xcode 中查找到 `PageContainersDialogController.swift` 查看该属性。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/common/Appearance_pageContainerConstraintsSize.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/configurationitem/common/message_report_bottom.png" title="消息审核弹窗" />
+</ImageGallery>
 
 ## 设置 Alert 的样式
 
@@ -42,10 +44,9 @@
 
 `Appearance.actionSheetRowHeight = value`：ActionSheet Cell 的行高。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/common/Appearance_actionSheetRowHeight.png)
-
-
-
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/configurationitem/common/conversation_operation_row_height.png" title="ActionSheet Cell 的行高" />
+</ImageGallery>
 
 
 

docs/uikit/chatuikit/ios/chatuikit_custom_cell.md

@@ -142,6 +142,10 @@ let redPackageIdentifier = "redPackage"
 
 ![img](/images/uikit/chatuikit/ios/configurationitem/chat/red_package_attachment.png =350x750)
 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/red_package_attachment.png" title="红包消息" />
+</ImageGallery>
+
 ## 步骤五 增加发送新类型附件消息的方法
 
 在 `EaseChatUIKit` 的 `MessageListViewModel` 中增加发送红包消息的方法。
@@ -176,7 +180,9 @@ extension MessageListViewModel {
 
 ```
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/red_package_send.png =350x750)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/red_package_send.png" title="发送红包消息" />
+</ImageGallery>
 
 ## 步骤六 注册继承的对象
 
@@ -268,4 +274,6 @@ final class MineConversationInfo: ConversationInfo {
 
 ```
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/red_package_receive.png =350x750)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/red_package_receive.png" title="接收红包消息" />
+</ImageGallery>

docs/uikit/chatuikit/ios/chatuikit_custom_chat.md

@@ -61,7 +61,10 @@
 
 你可以通过 `Appearance.chat.bubbleStyle = withArrow` 设置聊天页面消息气泡的样式，分为带箭头与多圆角两种。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_bubbleStyle.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/bubble_square.png" title="带箭头的方角气泡" />
+  <ImageItem src="/images/uikit/chatuikit/ios/bubble_circle.png" title="圆角气泡" />
+</ImageGallery>
 
 ### 设置消息气泡中的内容
 
@@ -80,13 +83,18 @@
         }
 ```
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_contentStyle.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/bubble_hiddenable.png" title="可隐藏区域" />
+  <ImageItem src="/images/uikit/chatuikit/ios/bubble_hidden.png" title="隐藏后的效果" />
+</ImageGallery>
 
 ### 设置消息文字颜色
 
 你可以通过 `Appearance.chat.receiveTextColor = value`/`Appearance.chat.sendTextColor = value` 设置聊天页面接收方/发送方的消息文字颜色。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_textColor.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/font_color.png" title="设置消息文字颜色" />
+</ImageGallery>
 
 ### 设置消息日期
 
@@ -124,22 +132,27 @@
 
 你可以通过 `Appearance.chat.audioDuration = value` 设置聊天页面语音消息录制的最大时长，默认为 60 秒。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_audioDuration.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/audio_duration.png" title="设置语音消息录制的最大时长" />
+</ImageGallery>
 
 - 设置语音消息播放时的动画
 
 1. `Appearance.chat.receiveAudioAnimationImages = value`：设置聊天页面接收方语音消息播放时的动画图片。
 2. `Appearance.chat.sendAudioAnimationImages = value`：设置聊天页面发送方语音消息播放时的动画图片。
-
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_receiveAudioAnimationImages.png)
-
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_bubbleColor.png)
+   
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/audio_animation.png" title="语音播放动画" />
+</ImageGallery>
 
 - 设置图片消息圆角
 
 你可以通过 `Appearance.chat.imageMessageCorner = value` 设置聊天页面图片消息圆角，默认为 4。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_imageMessageCorner.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/image_radius_small.png" title="小的图片圆角" />
+  <ImageItem src="/images/uikit/chatuikit/ios/image_radius_large.png" title="大的图片圆角" />
+</ImageGallery>
 
 - 设置图片/视频消息占位图
 
@@ -237,7 +250,9 @@ override func filterMessageActions(message: MessageEntity) -> [ActionSheetItemPr
 
 你可以通过 `Appearance.chat.reportSelectionTags` 和 `Appearance.chat.reportSelectionReasons` 设置消息举报功能的举报标签数组以及对应的原因数组，key-value 格式，二者一 一对应。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_report.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/message_report.png" title="消息举报" />
+</ImageGallery>
 
 ## 设置跳转事件
 

docs/uikit/chatuikit/ios/chatuikit_custom_contact_list.md

@@ -42,13 +42,17 @@
         }
 ```
 
-![img](/images/uikit/chatuikit/ios/configurationitem/contact/Appearance_contact_listHeaderExtensionActions.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/configurationitem/contact/contact_list_header.png" title="自定义联系人列表 Header" />
+</ImageGallery>
 
 ### 设置联系人列表 Header Cell 的高度
 
 你可以通过 `Appearance.contact.headerRowHeight = value` 设置联系人列表 Header Cell 的高度。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/contact/Appearance_contact_headerRowHeight.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/configurationitem/contact/contact_header_row_height.png" title="设置联系人列表 Header Cell 的高度" />
+</ImageGallery>
 
 ## 自定义联系人列表
 
@@ -87,7 +91,9 @@
 
 你可以通过 `Appearance.contact.rowHeight = value` 设置联系人列表项（Cell）的高度。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/contact/Appearance_contact_rowHeight.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/configurationitem/contact/contact_cell_height.png" title="设置联系人列表 Cell 的高度" />
+</ImageGallery>
 
 ### 设置联系人头像
 

docs/uikit/chatuikit/ios/chatuikit_custom_conversation_list.md

@@ -149,7 +149,11 @@
 
 你可以利用 `Appearance.conversation.singlePlaceHolder = value` 设置会话列表中单聊会话头像占位图和群聊会话头像占位图。
 
-![img](/images/uikit/chatuikit/ios/configurationitem/conversation/Appearance_conversation_placeHolder.png)
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/avatar_square.png" title="方形头像" />
+  <ImageItem src="/images/uikit/chatuikit/ios/avatar_circle.png" title="圆形头像" />
+  <ImageItem src="/images/uikit/chatuikit/ios/avatar_no.png" title="无头像" />
+</ImageGallery>
 
 ### 设置会话列表项左滑和右滑菜单项
 

docs/uikit/chatuikit/react-native/chatuikit_theme.md

@@ -6,11 +6,15 @@
 
 - 浅色主题
 
-![img](/images/uikit/chatuikit/android/light_mode.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/light_mode.png" title="浅色主题" />
+</ImageGallery>
 
 - 深色主题
 
-![img](/images/uikit/chatuikit/android/dark_mode.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/dark_mode.png" title="深色主题" />
+</ImageGallery>
 
 使用默认主题，代码如下：
 

docs/uikit/chatuikit/web/chatuikit_chat.md

@@ -30,7 +30,9 @@ const ChatContainer = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/buble1.png =400x450)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/web/chat_default.png" title="聊天页面" />
+</ImageGallery>
 
 ## 自定义组件
 
@@ -76,7 +78,10 @@ const ChatContainer = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/buble2.png =400x530)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/web/custom_message_cell.png" title="头像粉红且字体为白色" />
+</ImageGallery>
+
 
 ### 设置消息日期和时间格式
 
@@ -328,7 +333,9 @@ const ChatContainer = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/custom-msg.png =400x500)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/web/custom_message.png" title="自定义消息" />
+</ImageGallery>
 
 ### 修改聊天相关的主题
 

docs/uikit/chatuikit/web/chatuikit_conversation.md

@@ -107,7 +107,9 @@ const Conversation = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/cvs-header2.png)
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/web/custom_conversation_list_header.png" title="自定义会话列表页面的 header" />
+</ImageGallery>
 
 ## 自定义会话列表项
 
@@ -161,7 +163,11 @@ const Conversation = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/cvs-nick.png =300x700)
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/web/conversation_list_avatar.png" title="会话列表带头像" />
+  <ImageItem src="/images/uikit/chatuikit/web/conversation_list_avatar_no.png" title="会话列表无头像" />
+  <ImageItem src="/images/uikit/chatuikit/web/conversation_list_avatar_color.png" title="会话列表自定义头像颜色" />
+</ImageGallery>
 
 ### 设置日期和时间格式
 
@@ -296,7 +302,11 @@ const Conversation = () => {
 };
 ```
 
-![img](/images/uikit/chatuikit/web/cvs-action.png =300x700)
+![img](/images/uikit/chatuikit/web/custom_conversation_list_action.png)
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/web/custom_conversation_list_action.png" title="自定义会话操作" />
+</ImageGallery>
 
 ### 修改会话列表相关的主题