From 2200a8a03ff269e73f4929e5e4c2dd7940e1b339 Mon Sep 17 00:00:00 2001 From: haoxiuwen Date: Tue, 2 Jan 2024 11:42:43 +0800 Subject: [PATCH 1/3] modify --- .../android/roomfeature_common.md | 4 +- .../chatroomuikit/android/roomuikit_theme.md | 4 +- .../chatroomuikit/flutter/roomuikit_theme.md | 4 +- .../ios/roomuikit_config_item.md | 26 ++++---- .../chatroomuikit/ios/roomuikit_theme.md | 4 +- .../web/roomuikit_best_practice.md | 64 +++++++++++++++++++ .../chatroomuikit/web/roomuikit_overview.md | 64 ------------------- .../chatroomuikit/web/roomuikit_theme.md | 6 +- 8 files changed, 89 insertions(+), 87 deletions(-) diff --git a/docs/uikit/chatroomuikit/android/roomfeature_common.md b/docs/uikit/chatroomuikit/android/roomfeature_common.md index 9f726fb41..93859dcec 100644 --- a/docs/uikit/chatroomuikit/android/roomfeature_common.md +++ b/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) diff --git a/docs/uikit/chatroomuikit/android/roomuikit_theme.md b/docs/uikit/chatroomuikit/android/roomuikit_theme.md index 948a7c08e..d78de0c1b 100644 --- a/docs/uikit/chatroomuikit/android/roomuikit_theme.md +++ b/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)。 diff --git a/docs/uikit/chatroomuikit/flutter/roomuikit_theme.md b/docs/uikit/chatroomuikit/flutter/roomuikit_theme.md index fde41d26f..15956caf8 100644 --- a/docs/uikit/chatroomuikit/flutter/roomuikit_theme.md +++ b/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)。 diff --git a/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md b/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md index 2758cb523..ccd9ca918 100644 --- a/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md +++ b/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md @@ -1,10 +1,10 @@ # 可配项 -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) @@ -12,15 +12,15 @@ Appearance.swift 是容纳了所有可配项的类，你需要在初始化 Chatr ![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,7 +32,7 @@ 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) @@ -40,23 +40,23 @@ Appearance.swift 是容纳了所有可配项的类，你需要在初始化 Chatr ![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) diff --git a/docs/uikit/chatroomuikit/ios/roomuikit_theme.md b/docs/uikit/chatroomuikit/ios/roomuikit_theme.md index 4251821f1..c0c0365c6 100644 --- a/docs/uikit/chatroomuikit/ios/roomuikit_theme.md +++ b/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)。 diff --git a/docs/uikit/chatroomuikit/web/roomuikit_best_practice.md b/docs/uikit/chatroomuikit/web/roomuikit_best_practice.md index d69189330..8c7151de1 100644 --- a/docs/uikit/chatroomuikit/web/roomuikit_best_practice.md +++ b/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)。 diff --git a/docs/uikit/chatroomuikit/web/roomuikit_overview.md b/docs/uikit/chatroomuikit/web/roomuikit_overview.md index 44c0cd3f7..104c426e3 100644 --- a/docs/uikit/chatroomuikit/web/roomuikit_overview.md +++ b/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 - }, - }); - }, []); -}; -``` diff --git a/docs/uikit/chatroomuikit/web/roomuikit_theme.md b/docs/uikit/chatroomuikit/web/roomuikit_theme.md index 75221ed08..873c29caf 100644 --- a/docs/uikit/chatroomuikit/web/roomuikit_theme.md +++ b/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)。 From 265364be81ae79116ccd65dca9db9be5e71034a6 Mon Sep 17 00:00:00 2001 From: haoxiuwen Date: Tue, 2 Jan 2024 11:49:47 +0800 Subject: [PATCH 2/3] modify --- docs/uikit/chatroomuikit/android/roomuikit_config_item.md | 6 +++--- docs/uikit/chatroomuikit/ios/roomuikit_config_item.md | 4 ++-- docs/uikit/chatroomuikit/web/roomuikit_config_item.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/uikit/chatroomuikit/android/roomuikit_config_item.md b/docs/uikit/chatroomuikit/android/roomuikit_config_item.md index ad0730071..3c602d35c 100644 --- a/docs/uikit/chatroomuikit/android/roomuikit_config_item.md +++ b/docs/uikit/chatroomuikit/android/roomuikit_config_item.md @@ -1,8 +1,8 @@ -# 可配项 +# 可配置项 -- 修改 `UiOptions` 中的可配项。例如，你可以修改 `UiOptions` 中的 `useGiftsInList` 配置消息列表上是否显示礼物。 +- 修改 `UiOptions` 中的可配置项。例如，你可以修改 `UiOptions` 中的 `useGiftsInList` 配置消息列表上是否显示礼物。 ```kotlin val chatroomUIKitOptions = ChatroomUIKitOptions( @@ -13,7 +13,7 @@ val chatroomUIKitOptions = ChatroomUIKitOptions( ) ``` -- 修改 `ViewModel` 中的可配项。例如，你可以修改 `MessageListViewModel` 中的可配项，配置是否显示时间和头像。 +- 修改 `ViewModel` 中的可配置项。例如，你可以修改 `MessageListViewModel` 中的可配项，配置是否显示时间和头像。 ```kotlin class MessageListViewModel( diff --git a/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md b/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md index ccd9ca918..fde3e25bb 100644 --- a/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md +++ b/docs/uikit/chatroomuikit/ios/roomuikit_config_item.md @@ -1,6 +1,6 @@ -# 可配项 +# 可配置项 -[Appearance.swift](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift) 是容纳了所有可配项的类，你需要在初始化 ChatroomView 之前修改其中的属性。 +[Appearance.swift](https://github.com/zjc19891106/ChatroomUIKit/blob/main/Sources/ChatroomUIKit/Classes/UI/Core/UIKit/Utils/Appearance.swift) 是容纳了所有可配置项的类，你需要在初始化 ChatroomView 之前修改其中的属性。 ## 消息视图 diff --git a/docs/uikit/chatroomuikit/web/roomuikit_config_item.md b/docs/uikit/chatroomuikit/web/roomuikit_config_item.md index a254a4134..6b698e8ff 100644 --- a/docs/uikit/chatroomuikit/web/roomuikit_config_item.md +++ b/docs/uikit/chatroomuikit/web/roomuikit_config_item.md @@ -1,4 +1,4 @@ -# 可配项 +# 可配置项 From 3d0bdc4f87d6dd761cc516027352d11719a9e156 Mon Sep 17 00:00:00 2001 From: haoxiuwen Date: Tue, 2 Jan 2024 11:51:47 +0800 Subject: [PATCH 3/3] modify --- docs/uikit/chatroomuikit/react-native/roomuikit_theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/uikit/chatroomuikit/react-native/roomuikit_theme.md b/docs/uikit/chatroomuikit/react-native/roomuikit_theme.md index 344086e99..f7976e35e 100644 --- a/docs/uikit/chatroomuikit/react-native/roomuikit_theme.md +++ b/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)。