Merge pull request #976 from haoxiuwen/chatuikitimage

Modify ChatUIKit Images

docs/uikit/chatuikit/android/chatuikit_overview.md

@@ -44,18 +44,68 @@
     └── widget                                   // UIKit SDK 自定义 View
 ```
 
-## 功能
+## 功能介绍
 
-单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个 Fragment 中：
+单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个 Fragment 中：Chat Fragment、Conversation Fragment 和 Contact Fragment。下图展示单群聊 UIKit 的主要功能：
 
-- Chat Fragment 提供所有聊天视图的容器。
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/main_chat.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/android/main_conversation_list.png" title="会话列表" />
+  <ImageItem src="/images/uikit/chatuikit/android/main_contact_list.png" title="通讯录" />
+  <ImageItem src="/images/uikit/chatuikit/android/main_chat_group.png" title="群聊" />
+</ImageGallery>
 
-![img](/images/uikit/chatuikit/android/page_chat.png =400x866) 
+### 聊天页面功能
 
-- Conversation Fragment 提供会话列表容器。
+Chat Fragment 提供所有聊天视图的容器。
 
-![img](/images/uikit/chatuikit/android/page_conversation.png =400x866) 
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/android/chat_detail.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/android/message_types.png" title="发送多种类型的消息" />
+  <ImageItem src="/images/uikit/chatuikit/android/message_longpress.png" title="消息长按操作" />
+  <ImageItem src="/images/uikit/chatuikit/android/message_reply.png" title="消息引用" />
+  <ImageItem src="/images/uikit/chatuikit/android/message_deliveryreceipt.png" title="已发送回执" />
+  <ImageItem src="/images/uikit/chatuikit/android/message_readreceipt.png" title="已读回执" />
+</ImageGallery>
 
-- Contact Fragment 提供联系人、群组及其详情等容器。
+### 会话列表页面功能
+
+Conversation Fragment 提供会话列表容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/conversation_longpress.png" title="会话长按操作" />
+  <ImageItem src="/images/uikit/chatuikit/android/conversation_operation.png" title="会话操作" />
+</ImageGallery>
+
+### 通讯录页面功能
+
+Contact Fragment 提供联系人、群组及其详情等容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/contact list.png" title="联系人列表" />
+  <ImageItem src="/images/uikit/chatuikit/android/contact_detail.png" title="联系人详情" />
+  <ImageItem src="/images/uikit/chatuikit/android/block_list.png" title="联系人黑名单" />
+  <ImageItem src="/images/uikit/chatuikit/android/group_list.png" title="群组列表" />
+</ImageGallery>
+
+### 群组管理页面功能
+
+群组管理页面提供以下功能：
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/android/group_detail.png" title="群详情管理" />
+  <ImageItem src="/images/uikit/chatuikit/android/group_member.png" title="群成员管理" />
+  <ImageItem src="/images/uikit/chatuikit/android/group_thread.png" title="话题" />
+  <ImageItem src="/images/uikit/chatuikit/android/group_pin.png" title="消息置顶" />
+</ImageGallery>
+
+### 页面搜索功能
+
+单群聊 UIKit 提供以下搜索功能：
+
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/android/search_conversation.png" title="搜索会话名称" />
+  <ImageItem src="/images/uikit/chatuikit/android/search_contact.png" title="搜索联系人名称" />
+  <ImageItem src="/images/uikit/chatuikit/android/search_chat_history.png" title="搜索聊天历史" />
+</ImageGallery>
 
-![img](/images/uikit/chatuikit/android/page_contact_list.png =400x866) 

docs/uikit/chatuikit/flutter/chatuikit_overview.md

@@ -192,19 +192,71 @@
     └── defines.dart // uikit 内部使用 key
 ```
 
-## 功能
+## 功能介绍
 
-单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个 View 中：
+单群聊 UIKit 中业务相关的 UI 控件主要包含三个 View 中：`MessagesView`、`ConversationsView` 和 `ContactsView`。
 
-- MessagesView 提供所有聊天视图。
+下图展示单群聊 UIKit 的主要功能：
 
-![img](/images/uikit/chatuikit/android/page_chat.png =400x890) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_conversation_list.png" title="会话列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_contact_list.png" title="通讯录" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat_group.png" title="群聊" />
+</ImageGallery>
 
-- ConversationsView 提供会话列表。
+### 聊天页面功能
 
-![img](/images/uikit/chatuikit/android/page_conversation.png =400x850) 
+`MessagesView` 提供所有聊天视图。
 
-- ContactsView 提供联系人、群组及其详情等。
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/chat_detail.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_types.png" title="发送多种类型的消息" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_longpress.png" title="消息长按操作" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_reply.png" title="消息引用" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_deliveryreceipt.png" title="已发送回执" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_readreceipt.png" title="已读回执" />
+</ImageGallery>
+
+### 会话列表页面功能
+
+`ConversationsView` 提供会话列表。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_slide.png" title="会话左滑/右滑" />
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_operation.png" title="会话操作" />
+</ImageGallery>
+
+### 通讯录页面功能
+
+`ContactsView` 提供联系人、群组及其详情等。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_list.png" title="联系人列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_detail.png" title="联系人详情" />
+  <ImageItem src="/images/uikit/chatuikit/ios/block_list.png" title="联系人黑名单" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_list.png" title="群组列表" />
+</ImageGallery>
+
+### 群组管理页面功能
+
+群组管理页面提供以下功能：
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/group_detail.png" title="群详情管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_member.png" title="群成员管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_thread.png" title="话题" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_pin.png" title="消息置顶" />
+</ImageGallery>
+
+### 页面搜索功能
+
+单群聊 UIKit 提供以下搜索功能：
+
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/search_conversation.png" title="搜索会话名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_contact.png" title="搜索联系人名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_chat_history.png" title="搜索聊天历史" />
+</ImageGallery>
 
-![img](/images/uikit/chatuikit/android/page_contact_list.png =400x850) 
 

docs/uikit/chatuikit/ios/chatuikit_overview.md

@@ -34,18 +34,70 @@ Classes
        └─ Extension // 一些方便的系统类扩展。
  ```    
 
-## 功能
+## 功能介绍
 
-单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个模块中：
+单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个模块：Chat 模块、Conversation 模块 和 Contact 模块。
 
-- Chat 模块提供所有聊天视图的容器。
+下图展示单群聊 UIKit 的主要功能：
 
-![img](/images/uikit/chatuikit/ios/page_chat.png =400x866) 
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_conversation_list.png" title="会话列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_contact_list.png" title="通讯录" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat_group.png" title="群聊" />
+</ImageGallery>
 
-- Conversation 模块提供会话列表容器。
+### 聊天页面功能
 
-![img](/images/uikit/chatuikit/ios/page_conversation.png =400x866) 
+Chat 模块提供所有聊天视图的容器。
 
-- Contact 模块提供联系人、群组及其详情等容器。
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/chat_detail.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_types.png" title="发送多种类型的消息" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_longpress.png" title="消息长按操作" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_reply.png" title="消息引用" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_deliveryreceipt.png" title="已发送回执" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_readreceipt.png" title="已读回执" />
+</ImageGallery>
+
+### 会话列表页面功能
+
+Conversation 模块提供会话列表容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_slide.png" title="会话左滑/右滑" />
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_operation.png" title="会话操作" />
+</ImageGallery>
+
+### 通讯录页面功能
+
+Contact 模块提供联系人、群组及其详情等容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_list.png" title="联系人列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_detail.png" title="联系人详情" />
+  <ImageItem src="/images/uikit/chatuikit/ios/block_list.png" title="联系人黑名单" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_list.png" title="群组列表" />
+</ImageGallery>
+
+### 群组管理页面功能
+
+群组管理页面提供以下功能：
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/group_detail.png" title="群详情管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_member.png" title="群成员管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_thread.png" title="话题" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_pin.png" title="消息置顶" />
+</ImageGallery>
+
+### 页面搜索功能
+
+单群聊 UIKit 提供以下搜索功能：
+
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/search_conversation.png" title="搜索会话名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_contact.png" title="搜索联系人名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_chat_history.png" title="搜索聊天历史" />
+</ImageGallery>
 
-![img](/images/uikit/chatuikit/ios/page_contact_list.png =400x866) 

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

@@ -47,48 +47,97 @@
 └── tsconfig.json // 编译配置
 ```
 
-## 功能
+## 功能介绍
 
 环信即时通讯 `Chat UIKit SDK` 提供的主要功能包括：主题、国际化、多媒体处理、联系人页面、会话列表、会话详情、错误处理等。
 
-核心组件介绍如下：
+### 核心组件
 
-| 组件集合名称 | 描述                                                                                                                 |
-| ------------ | -------------------------------------------------------------------------------------------------------------------- |
-| Container    | 入口组件，在应用程序入口使用，设置全局配置和初始化 UI 组件库。                                                       |
-| Theme        | 主题组件，由 `Palette` 和 `Theme` 组成，可以配置 UI 组件的颜色和样式。                                               |
-| i18n         | 国际化组件，默认提供中英文 UI 组件的国际化内容，支持更改内容和自定义目标语言。                                       |
+| 组件集合名称 | 描述     |
+| ------------ | ------------ |
+| Container    | 入口组件，在应用程序入口使用，设置全局配置和初始化 UI 组件库。         |
+| Theme        | 主题组件，由 `Palette` 和 `Theme` 组成，可以配置 UI 组件的颜色和样式。      |
+| i18n         | 国际化组件，默认提供中英文 UI 组件的国际化内容，支持更改内容和自定义目标语言。     |
 | biz          | 页面级业务组件集合。包括`ConversationList`,`ContactList`,`GroupList`, `GroupParticipantList`和`ConversationDetail`等 |
-| chat         | 消息服务组件。所有关于消息的非页面处理都在这里。                                                                     |
-| config       | 配置服务组件。全局配置设置都在这里。                                                                                 |
-| dispatch     | 事件分发组件。可以进行组件之间通信。                                                                                 |
-| error        | 对错对象。`uikit`里面的错误错误对象都在这里定义。                                                                    |
-| hook         | 自定义的钩子组件。为其它组件服务。                                                                                   |
-
-| 页面级组件名称       | 描述                                                                                                                 |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| ConversationList     | 会话列表组件，提供显示和管理会话列表。                                                                               |
+| chat         | 消息服务组件。所有关于消息的非页面处理都在这里。     |
+| config       | 配置服务组件。全局配置设置都在这里。     |
+| dispatch     | 事件分发组件。可以进行组件之间通信。     |
+| error        | 对错对象。`uikit`里面的错误错误对象都在这里定义。         |
+| hook         | 自定义的钩子组件。为其它组件服务。         |
+
+| 页面级组件名称       | 描述   |
+| -------------------- | ------------- |
+| ConversationList     | 会话列表组件，提供显示和管理会话列表。    |
 | ContactList          | 联系人列表组件，提供显示和管理联系人列表。在联系人列表、新会话、创建群组、添加群成员、分享名片、转发消息页面中复用。 |
-| ConversationDetail   | 消息页面组件，可以收发消息、加载历史消息，支持单群聊。在聊天、搜索、话题、创建话题页面中复用。                       |
-| GroupList            | 群组列表组件，提供显示和管理群组列表。                                                                               |
-| GroupParticipantList | 群成员列表组件，提供显示和管理群成员列表。在添加成员、删除成员、修改群拥有者、多人音视频中复用。                     |
-| NewRequests          | 新通知列表组件，接收和处理好友请求处理。                                                                             |
-| CreateGroup          | 创建群组组件。                                                                                                       |
-| ContactInfo          | 联系人详情组件。                                                                                                     |
-| GroupInfo            | 群组详情组件。                                                                                                       |
+| ConversationDetail   | 消息页面组件，可以收发消息、加载历史消息，支持单群聊。在聊天、搜索、话题、创建话题页面中复用。   |
+| GroupList            | 群组列表组件，提供显示和管理群组列表。  |
+| GroupParticipantList | 群成员列表组件，提供显示和管理群成员列表。在添加成员、删除成员、修改群拥有者、多人音视频中复用。    |
+| NewRequests          | 新通知列表组件，接收和处理好友请求处理。     |
+| CreateGroup          | 创建群组组件。       |
+| ContactInfo          | 联系人详情组件。     |
+| GroupInfo            | 群组详情组件。     |
 
-## 组件样例
+### 主要功能界面
 
-单群聊 UIKit 中业务相关的 UI 控件主要包含在以下三个组件中：
+单群聊 UIKit 中业务相关的 UI 控件主要包含在 `ConversationDetail`、`ConversationList` 和 `ContactList` 三个组件中，主要提供以下功能界面：
 
-- `ConversationDetail` 提供会话列表容器。
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_conversation_list.png" title="会话列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_contact_list.png" title="通讯录" />
+  <ImageItem src="/images/uikit/chatuikit/ios/main_chat_group.png" title="群聊" />
+</ImageGallery>
 
-![img](/images/uikit/chatuikit/android/page_chat.png =400x890)
+### 聊天页面功能
 
-- `ConversationList` 提供所有聊天视图的容器。
+`ConversationDetail` 提供所有聊天视图的容器。
 
-![img](/images/uikit/chatuikit/android/page_conversation.png =400x850)
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/chat_detail.png" title="聊天页面" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_types.png" title="发送多种类型的消息" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_longpress.png" title="消息长按操作" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_reply.png" title="消息引用" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_deliveryreceipt.png" title="已发送回执" />
+  <ImageItem src="/images/uikit/chatuikit/ios/message_readreceipt.png" title="已读回执" />
+</ImageGallery>
 
-- `ContactList` 提供联系人、群组及其详情等容器。
+### 会话列表页面功能
 
-![img](/images/uikit/chatuikit/android/page_contact_list.png =400x850)
+`ConversationList` 提供会话列表容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_slide.png" title="会话左滑/右滑" />
+  <ImageItem src="/images/uikit/chatuikit/ios/conversation_operation.png" title="会话操作" />
+</ImageGallery>
+
+### 通讯录页面功能
+
+`ContactList` 提供联系人、群组及其详情等容器。
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_list.png" title="联系人列表" />
+  <ImageItem src="/images/uikit/chatuikit/ios/contact_detail.png" title="联系人详情" />
+  <ImageItem src="/images/uikit/chatuikit/ios/block_list.png" title="联系人黑名单" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_list.png" title="群组列表" />
+</ImageGallery>
+
+### 群组管理页面功能
+
+群组管理页面提供以下功能：
+
+<ImageGallery>
+  <ImageItem src="/images/uikit/chatuikit/ios/group_detail.png" title="群详情管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_member.png" title="群成员管理" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_thread.png" title="话题" />
+  <ImageItem src="/images/uikit/chatuikit/ios/group_pin.png" title="消息置顶" />
+</ImageGallery>
+
+### 页面搜索功能
+
+单群聊 UIKit 提供以下搜索功能：
+
+<ImageGallery :columns="3">
+  <ImageItem src="/images/uikit/chatuikit/ios/search_conversation.png" title="搜索会话名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_contact.png" title="搜索联系人名称" />
+  <ImageItem src="/images/uikit/chatuikit/ios/search_chat_history.png" title="搜索聊天历史" />
+</ImageGallery>