Merge pull request #565 from haoxiuwen/chatroomuikit

Modify Chatroom UIKit Docs

docs/uikit/chatroomuikit/android/roomfeature_common.md

@@ -4,7 +4,7 @@
 
 ## 创建聊天室  
 
-ChatroomUIKit 不提供创建聊天室的功能，你可以[调用即时通讯 IM SDK 的接口创建聊天室](/document/server-side/chatroom.html#创建聊天室)。
+ChatroomUIKit 不提供创建聊天室的功能，你可以[调用即时通讯 IM SDK 的 REST API 创建聊天室](/document/server-side/chatroom.html#创建聊天室)。
 
 ![img](@static/images/uikit/chatroomfeature/chatroom_create.png =500x500)
 
@@ -14,7 +14,7 @@ ChatroomUIKit 提供离开聊天室功能。聊天室中的成员可自行离开
 
 ## 销毁聊天室
 
-ChatroomUIKit 不提供销毁聊天室的功能，你可以[调用即时通讯 IM SDK 的接口销毁聊天室](/document/server-side/chatroom.html#删除聊天室)。
+ChatroomUIKit 不提供销毁聊天室的功能，你可以[调用即时通讯 IM SDK 的 REST API 销毁聊天室](/document/server-side/chatroom.html#删除聊天室)。
 
 ![img](@static/images/uikit/chatroomfeature/chatroom_destroy.png =500x500)
 

docs/uikit/chatroomuikit/android/roomuikit_config_item.md

@@ -1,8 +1,8 @@
-# 可配项
+# 可配置项
 
 <Toc />
 
-- 修改 `UiOptions` 中的可配项。例如，你可以修改 `UiOptions` 中的 `useGiftsInList` 配置消息列表上是否显示礼物。
+- 修改 `UiOptions` 中的可配置项。例如，你可以修改 `UiOptions` 中的 `useGiftsInList` 配置消息列表上是否显示礼物。
 
 ```kotlin
 val chatroomUIKitOptions = ChatroomUIKitOptions(
@@ -13,7 +13,7 @@ val chatroomUIKitOptions = ChatroomUIKitOptions(
 )
 ```
 
-- 修改 `ViewModel` 中的可配项。例如，你可以修改 `MessageListViewModel` 中的可配项，配置是否显示时间和头像。
+- 修改 `ViewModel` 中的可配置项。例如，你可以修改 `MessageListViewModel` 中的可配项，配置是否显示时间和头像。
 
 ```kotlin
 class MessageListViewModel(

docs/uikit/chatroomuikit/android/roomuikit_theme.md

@@ -32,7 +32,7 @@ fun ChatroomUIKitTheme(
 
 如果你对主题颜色，设计指南和细节有任何疑问，您可以在 Figma 设计稿中添加评论并提及我们的设计师 Stevie Jiang。
 
--[UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
+- [UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
 
--[UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
+- [UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
 

docs/uikit/chatroomuikit/flutter/roomuikit_theme.md

@@ -43,6 +43,6 @@ ChatUIKitColor({
 
 如果你对主题颜色，设计指南和细节有任何疑问，您可以在 Figma 设计稿中添加评论并提及我们的设计师 Stevie Jiang。
 
--[UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
+- [UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
 
--[UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
+- [UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。

docs/uikit/chatroomuikit/ios/roomuikit_config_item.md

@@ -1,26 +1,26 @@
-# 可配项
+# 可配置项
 
-Appearance.swift 是容纳了所有可配项的类，你需要在初始化 ChatroomView 之前修改其中的属性。
+[Appearance.swift](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift) 是容纳了所有可配置项的类，你需要在初始化 ChatroomView 之前修改其中的属性。
 
 ## 消息视图
 
-1. [Appearance.giftContainerConstraintsSize](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift)：礼物弹窗的大小。
+1. Appearance.giftContainerConstraintsSize：礼物弹窗的大小。
 
 ![img](@static/images/uikit/chatroomios/giftContainerConstraintsSize.png)
 
 2. `Appearance.giftPlaceHolder`：礼物默认图。
 
 ![img](@static/images/uikit/chatroomios/giftPlaceHolder.png)
 
-3. [Appearance.avatarPlaceHolder](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Chat/Cells/ChatBarrageCell.swift)：头像默认图。
+3. Appearance.avatarPlaceHolder：头像默认图。
 
 ![img](@static/images/uikit/chatroomios/avatarPlaceHolder.png)
 
-4. [Appearance.userIdentifyPlaceHolder](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Chat/Cells/ChatBarrageCell.swift)：用户身份标识默认图。
+4. Appearance.userIdentifyPlaceHolder：用户身份标识默认图。
 
 ![img](@static/images/uikit/chatroomios/userIdentityPlaceHolder.png)
 
-5. [Appearance.barrageCellStyle](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift)：弹幕区域 Cell 的展示样式。你可以选择对时间戳、用户标识和用户头像进行显示或隐藏。
+5. Appearance.barrageCellStyle：弹幕区域 Cell 的展示样式。你可以选择对时间戳、用户标识和用户头像进行显示或隐藏。
 
 ![img](@static/images/uikit/chatroomios/customchatbarrage.png)
 
@@ -32,31 +32,31 @@ Appearance.swift 是容纳了所有可配项的类，你需要在初始化 Chatr
 
 ![img](@static/images/uikit/chatroomios/messageActions.png)
 
-8. [`Appearance.actionSheetRowHeight`](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/DialogComponent/ActionSheet.swift)：`ActionSheet` 单行高度。
+8. `Appearance.actionSheetRowHeight`：`ActionSheet` 单行高度。
 
 ![img](@static/images/uikit/chatroomios/messageActions.png)
 
 9. `Appearance.reportTags`：消息举报弹窗内显示的非法信息类型。
 
 ![img](@static/images/uikit/chatroomios/report.png)
 
-10. [Appearance.messageTranslationLanguage](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/LanguageConvertor.swift)：目标翻译语言。你可以根据你的用户设备的语言环境设置对应的目标翻译语言，前提是需要在环信控制台开通翻译功能。目前，聊天室 UIKit 内置支持中文简体、中文繁体，英文，俄语，德语，法语，日语，韩语。 
+10. Appearance.messageTranslationLanguage：目标翻译语言。你可以根据你的用户设备的语言环境设置对应的目标翻译语言，前提是需要在环信控制台开通翻译功能。目前，聊天室 UIKit 内置支持中文简体、中文繁体，英文，俄语，德语，法语，日语，韩语。 
 
 ## 文本输入视图
 
-1. [Appearance.maxInputHeight](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Input/Views/ChatInputBar.swift)：输入框的最大高度。
+1. Appearance.maxInputHeight：输入框的最大高度。
 
 ![img](@static/images/uikit/chatroomios/maxInputHeight.png)
 
-2. [Appearance.inputPlaceHolder](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Input/Views/ChatInputBar.swift)：输入框默认显示的文字。该选项的默认值是 Aa。
+2. Appearance.inputPlaceHolder：输入框默认显示的文字。该选项的默认值是 Aa。
 
 ![img](@static/images/uikit/chatroomios/inputCorner.png)
 
-3. [Appearance.inputBarCorner](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Input/Views/ChatInputBar.swift)：输入框的圆角半径，默认为 `large`，即输入框高度的一半。
+3. Appearance.inputBarCorner：输入框的圆角半径，默认为 `large`，即输入框高度的一半。
 
 ![img](@static/images/uikit/chatroomios/inputCorner.png)
 
-4. [Appearance.emojiMap](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Components/Input/Convertor/ChatEmojiConvertor.swift)：若要替换全部的表情可以配置该 map，key 是代码注释中的固定字符串，value 可以传入不同 UIImage 对象即可。
+4. Appearance.emojiMap：若要替换全部的表情可以配置该 map，key 是代码注释中的固定字符串，value 可以传入不同 UIImage 对象即可。
 
 ![img](@static/images/uikit/chatroomios/customchatbarrage.png)
 
@@ -68,10 +68,10 @@ Appearance.swift 是容纳了所有可配项的类，你需要在初始化 Chatr
 
 ## 弹窗
 
-1. [Appearance.pageContainerTitleBarItemWidth](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift)：`PageContainerTitleBar`（各弹窗页面顶部）的单个条目的宽度。
+1. Appearance.pageContainerTitleBarItemWidth：`PageContainerTitleBar`（各弹窗页面顶部）的单个条目的宽度。
 
 ![img](@static/images/uikit/chatroomios/pageContainerTitleBarItemWidth.png)
 
-2. [Appearance.pageContainerConstraintsSize](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift)：`PageContainersDialogController` 弹窗的大小。 
+2. Appearance.pageContainerConstraintsSize：`PageContainersDialogController` 弹窗的大小。 
 
 ![img](@static/images/uikit/chatroomios/pageContainerTitleBarItemWidth.png)

docs/uikit/chatroomuikit/ios/roomuikit_theme.md

@@ -71,6 +71,6 @@ extension YourView: ThemeSwitchProtocol {
 
 如果你对主题颜色，设计指南和细节有任何疑问，您可以在 Figma 设计稿中添加评论并提及我们的设计师 Stevie Jiang。
 
--[UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
+- [UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
 
--[UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
+- [UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。

docs/uikit/chatroomuikit/react-native/roomuikit_theme.md

@@ -53,6 +53,6 @@ const palette = createPalette();
 
 如果你对主题颜色，设计指南和细节有任何疑问，您可以在 Figma 设计稿中添加评论并提及我们的设计师 Stevie Jiang。
 
--[UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
+- [UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
 
--[UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
+- [UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。

docs/uikit/chatroomuikit/web/roomuikit_best_practice.md

@@ -55,6 +55,70 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 )
 ```
 
+## 聊天室事件
+
+ChatroomUIKit 中提供了聊天室事件的监听接口。你可以通过注册聊天室监听器，获取聊天室事件，并作出相应处理。
+
+ChatroomUIKit 中主动调用 API 的事件监听如下:
+
+```javascript
+import { eventHandler } from "easemob-chat-uikit";
+
+eventHandler.addEventHandler("chatroom", {
+  onError: (error) => {
+    // 所有 API 调用失败除了回调相应的事件外都会回调 onError 事件
+  },
+  joinChatRoom: {
+    error: (err) => {},
+    success: () => {},
+  },
+  recallMessage: {
+    error: (err) => {},
+    success: () => {},
+  },
+  reportMessage: {
+    // ...
+  },
+  sendMessage: {
+    // ...
+  },
+  getChatroomMuteList: {
+    // ...
+  },
+  removeUserFromMuteList: {
+    // ...
+  },
+  unmuteChatRoomMember: {
+    // ...
+  },
+  removerChatroomMember: {
+    // ...
+  },
+});
+```
+
+从 UIKit 中获取 Chat SDK 实例来监听收到的聊天室事件:
+
+```javascript
+import React, { useEffect } from "react";
+import { useClient } from "easemob-chat-uikit";
+
+const ChatroomApp = () => {
+  const client = useClient();
+
+  useEffect(() => {
+    client.addEventHandler("chatroom", {
+      onChatroomEvent: (event: AgoraChat.EventData) => {
+        if (event.operation === "muteMember") {
+          // console.log('你已被禁言')
+        }
+        // 全部事件请参考 https://docs-im-beta.easemob.com/document/web/room_manage.html#%E7%9B%91%E5%90%AC%E8%81%8A%E5%A4%A9%E5%AE%A4%E4%BA%8B%E4%BB%B6
+      },
+    });
+  }, []);
+};
+```
+
 ## 参考
 
 若要了解以上最佳实践的详情，请访问 [GitHub 仓库](https://github.com/easemob/ChatroomDemo/tree/dev/WEB/ChatroomDemo)。

docs/uikit/chatroomuikit/web/roomuikit_config_item.md

@@ -1,4 +1,4 @@
-# 可配项
+# 可配置项
 
 <Toc />
 

docs/uikit/chatroomuikit/web/roomuikit_overview.md

@@ -32,67 +32,3 @@ ChatroomUIKit 提供以下功能：
   - 搜索成员：在聊天室中查找指定成员的功能，支持支持本地搜索和模糊匹配。
   - 禁言成员：聊天室所有者可以在聊天室中对某个特定的成员禁言。
   - 移除成员：聊天室所有者将指定成员从聊天室中踢出。
-
-## 聊天室事件
-
-ChatroomUIKit 中提供了聊天室事件的监听接口。你可以通过注册聊天室监听器，获取聊天室事件，并作出相应处理。
-
-ChatroomUIKit 中主动调用 API 的事件监听如下:
-
-```javascript
-import { eventHandler } from "easemob-chat-uikit";
-
-eventHandler.addEventHandler("chatroom", {
-  onError: (error) => {
-    // 所有 API 调用失败除了回调相应的事件外都会回调 onError 事件
-  },
-  joinChatRoom: {
-    error: (err) => {},
-    success: () => {},
-  },
-  recallMessage: {
-    error: (err) => {},
-    success: () => {},
-  },
-  reportMessage: {
-    // ...
-  },
-  sendMessage: {
-    // ...
-  },
-  getChatroomMuteList: {
-    // ...
-  },
-  removeUserFromMuteList: {
-    // ...
-  },
-  unmuteChatRoomMember: {
-    // ...
-  },
-  removerChatroomMember: {
-    // ...
-  },
-});
-```
-
-从 UIKit 中获取 Chat SDK 实例来监听收到的聊天室事件:
-
-```javascript
-import React, { useEffect } from "react";
-import { useClient } from "easemob-chat-uikit";
-
-const ChatroomApp = () => {
-  const client = useClient();
-
-  useEffect(() => {
-    client.addEventHandler("chatroom", {
-      onChatroomEvent: (event: AgoraChat.EventData) => {
-        if (event.operation === "muteMember") {
-          // console.log('你已被禁言')
-        }
-        // 全部事件请参考 https://docs-im-beta.easemob.com/document/web/room_manage.html#%E7%9B%91%E5%90%AC%E8%81%8A%E5%A4%A9%E5%AE%A4%E4%BA%8B%E4%BB%B6
-      },
-    });
-  }, []);
-};
-```

docs/uikit/chatroomuikit/web/roomuikit_theme.md

@@ -4,6 +4,8 @@
 
 ChatroomUIkit 内置浅色和深色主题，默认为浅色主题。
 
+- 浅色主题
+
 ![img](@static/images/uikit/chatroomweb/light_mode.png)
 
 - 深色主题
@@ -35,6 +37,6 @@ const ChatApp = () => {
 
 如果你对主题颜色，设计指南和细节有任何疑问，您可以在 Figma 设计稿中添加评论并提及我们的设计师 Stevie Jiang。
 
--[UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
+- [UI 设计资源](https://www.figma.com/community/file/1322495388317476706/chatroom-uikit)。
 
--[UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。
+- [UI 设计指南](https://www.figma.com/file/OX2dUdilAKHahAh9VwX8aI/Streamuikit?node-id=137)。