From ea17df855a8368105f0f71c3ff9619cb7330c493 Mon Sep 17 00:00:00 2001 From: tangtaoit Date: Fri, 1 Sep 2023 22:13:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=A2=91=E9=81=93?= =?UTF-8?q?=E5=A4=B4=E9=83=A8=E5=8F=B3=E4=BE=A7=E7=9A=84=E6=B3=A8=E5=85=A5?= =?UTF-8?q?=E7=94=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tsdaodaobase/package.json | 4 +- packages/tsdaodaobase/src/App.css | 2 + packages/tsdaodaobase/src/App.tsx | 1 - .../src/Components/Conversation/context.ts | 7 - .../src/Components/Conversation/index.tsx | 33 +-- .../src/Components/Conversation/vm.ts | 4 +- .../src/Components/WKBase/index.tsx | 32 +++ packages/tsdaodaobase/src/EndpointCommon.tsx | 59 ++++-- .../src/Messages/LottieSticker/index.tsx | 1 - .../tsdaodaobase/src/Messages/MessageCell.tsx | 5 +- .../tsdaodaobase/src/Messages/Voice/index.tsx | 1 + .../tsdaodaobase/src/Pages/Chat/index.css | 30 +++ .../tsdaodaobase/src/Pages/Chat/index.tsx | 49 +++-- packages/tsdaodaobase/src/Pages/Chat/vm.ts | 1 - packages/tsdaodaobase/src/Service/Const.ts | 14 ++ packages/tsdaodaobase/src/module.tsx | 10 +- .../tsdaodaocontacts/src/Contacts/index.tsx | 12 +- .../src/Service/ContactsListManager.tsx | 6 +- yarn.lock | 196 ++++++++++-------- 19 files changed, 288 insertions(+), 179 deletions(-) diff --git a/packages/tsdaodaobase/package.json b/packages/tsdaodaobase/package.json index 95793be..024d36a 100644 --- a/packages/tsdaodaobase/package.json +++ b/packages/tsdaodaobase/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "main": "src/index.tsx", "dependencies": { - "@douyinfe/semi-ui": "^2.23.5", + "@douyinfe/semi-ui": "^2.24.2", "@lottiefiles/lottie-player": "^1.5.5", "@types/qrcode.react": "^1.0.2", "@types/react-color": "^3.0.6", @@ -14,7 +14,7 @@ "benz-amr-recorder": "^1.1.3", "classnames": "^2.3.1", "hotkeys-js": "^3.8.7", - "wukongimjssdk": "^1.1.1", + "wukongimjssdk": "^1.1.2", "moment": "^2.29.3", "qrcode.react": "^1.0.1", "react": "^17.0.2", diff --git a/packages/tsdaodaobase/src/App.css b/packages/tsdaodaobase/src/App.css index 42ae94f..a757816 100644 --- a/packages/tsdaodaobase/src/App.css +++ b/packages/tsdaodaobase/src/App.css @@ -69,6 +69,8 @@ html { text-rendering: optimizeLegibility; background: var( --background-color); color: rgba(9,30,66,.87) ; + + --semi-color-primary: #E46342; } div { diff --git a/packages/tsdaodaobase/src/App.tsx b/packages/tsdaodaobase/src/App.tsx index 8e7533d..f994d0b 100644 --- a/packages/tsdaodaobase/src/App.tsx +++ b/packages/tsdaodaobase/src/App.tsx @@ -19,7 +19,6 @@ import RouteContext from "./Service/Context"; import { ConnectStatus } from "wukongimjssdk"; import { WKBaseContext } from "./Components/WKBase"; import StorageService from "./Service/StorageService"; -import axios from "axios"; export enum ThemeMode { light, diff --git a/packages/tsdaodaobase/src/Components/Conversation/context.ts b/packages/tsdaodaobase/src/Components/Conversation/context.ts index 12df621..cdbccdc 100644 --- a/packages/tsdaodaobase/src/Components/Conversation/context.ts +++ b/packages/tsdaodaobase/src/Components/Conversation/context.ts @@ -93,11 +93,4 @@ export default interface ConversationContext { * @param tip 是否提醒 */ locateMessage(messageSeq:number):any - - /** - * 获取消息容器id - */ - getMessageContainerId():string - - getMessageContainer():Element|undefined } \ No newline at end of file diff --git a/packages/tsdaodaobase/src/Components/Conversation/index.tsx b/packages/tsdaodaobase/src/Components/Conversation/index.tsx index 81c7dff..5e27cdc 100644 --- a/packages/tsdaodaobase/src/Components/Conversation/index.tsx +++ b/packages/tsdaodaobase/src/Components/Conversation/index.tsx @@ -1,4 +1,4 @@ -import { Channel, ChannelTypeGroup, ChannelTypePerson, ConversationAction, WKSDK, Mention, Message, MessageContent, Reminder, ReminderType, Reply, MessageText } from "wukongimjssdk"; +import { Channel, ChannelTypeGroup, ChannelTypePerson, ConversationAction, WKSDK, Mention, Message, MessageContent, Reminder, ReminderType, Reply,MessageText } from "wukongimjssdk"; import React, { Component, HTMLProps } from "react"; import Provider from "../../Service/Provider"; import ConversationVM from "./vm"; @@ -34,7 +34,6 @@ export class Conversation extends Component implements Conver scrollTimer?: NodeJS.Timer updateBrowseToMessageSeqAndReminderDoneing: boolean = false private _dragFileCallback?: (file: File) => void - private _self = this; constructor(props: any) { super(props) @@ -161,18 +160,6 @@ export class Conversation extends Component implements Conver messageInputContext(): MessageInputContext { return this._messageInputContext } - getMessageContainerId(): string { - return this.vm.messageContainerId - } - - getMessageContainer(): Element|undefined { - const el = document.getElementById(this.vm.messageContainerId) - console.log("getMessageContainer--->",el) - if (!el) { - return undefined - } - return el - } componentDidMount() { @@ -253,7 +240,7 @@ export class Conversation extends Component implements Conver this.setState({}) }} key={message.clientMsgNo} id={`${message.contentType === MessageContentTypeConst.time ? "time-" : ""}${message.clientMsgNo}`} className={classNames("wk-message-item", last ? "wk-message-item-last" : undefined, message.locateRemind ? 'wk-message-item-reminder' : undefined)} > { - MessageCell ? : null + MessageCell ? : null } @@ -263,19 +250,12 @@ export class Conversation extends Component implements Conver if (this.scrollTimer) { clearTimeout(this.scrollTimer) } - const scrollTop = e.target.scrollTop; - const scrollHeight = e.target.scrollHeight; - const clientHeight = e.clientHeight; this.scrollTimer = setTimeout(() => { this.handleScrollEnd() }, 500) - if (this.contextMenusContext) { - this.contextMenusContext.hide() - } - - const targetScrollTop = scrollTop; - const scrollOffsetTop = scrollHeight - (targetScrollTop + clientHeight); - // console.log("targetScrollTop---->",targetScrollTop,scrollOffsetTop,this.vm.loading,this.vm.pullupHasMore) + this.contextMenusContext.hide() + const targetScrollTop = e.target.scrollTop; + const scrollOffsetTop = e.target.scrollHeight - (targetScrollTop + e.target.clientHeight); if (targetScrollTop <= 250 && !this.vm.loading && !this.vm.pulldownFinished) { // 下拉 this.vm.pulldownMessages() } else if (scrollOffsetTop <= 500 && !this.vm.loading && this.vm.pullupHasMore) { // 上拉 @@ -299,7 +279,6 @@ export class Conversation extends Component implements Conver } handleScrollEnd() { - console.log("handleScrollEnd---->") this.uploadReadedIfNeed() } @@ -481,7 +460,6 @@ export class Conversation extends Component implements Conver this.vm.notifyListener() } - render() { const { chatBg, channel } = this.props @@ -501,7 +479,6 @@ export class Conversation extends Component implements Conver this.dragStart() }} className={classNames("wk-conversation-content")}> -
{ vm.messages.map((message, i) => { diff --git a/packages/tsdaodaobase/src/Components/Conversation/vm.ts b/packages/tsdaodaobase/src/Components/Conversation/vm.ts index 367e23e..0e49021 100644 --- a/packages/tsdaodaobase/src/Components/Conversation/vm.ts +++ b/packages/tsdaodaobase/src/Components/Conversation/vm.ts @@ -247,6 +247,9 @@ export default class ConversationVM extends ProviderListener { if (!message.channel.isEqual(this.channel)) { return } + if(message.contentType == MessageContentTypeConst.rtcData) { + return + } if(message.header.noPersist) { // 不存储的消息不显示 return } @@ -618,7 +621,6 @@ export default class ConversationVM extends ProviderListener { } if (change) { this.refreshNewMsgCount() - console.log("refreshNewMsgCount---->") } } diff --git a/packages/tsdaodaobase/src/Components/WKBase/index.tsx b/packages/tsdaodaobase/src/Components/WKBase/index.tsx index 4813124..df0a708 100644 --- a/packages/tsdaodaobase/src/Components/WKBase/index.tsx +++ b/packages/tsdaodaobase/src/Components/WKBase/index.tsx @@ -17,6 +17,19 @@ export interface WKBaseState { alertTitle?: string onAlertOk?: () => void conversationSelectFinished?: (channel: Channel[]) => void + + showGlobalModal?: boolean // 显示全局弹窗 + globalModalOptions?:GlobalModalOptions + +} + +export class GlobalModalOptions { + width?: string + height?: string + body?: ReactNode + footer?: ReactNode + className?: string + closable?: boolean } export interface WKBaseProps{ @@ -34,6 +47,10 @@ export interface WKBaseContext { hideUserInfo(): void // 弹出提示框 showAlert(conf:{content:string,title?:string,onOk?:()=>void}): void + + showGlobalModal(options:GlobalModalOptions):void + + hideGlobalModal():void } export default class WKBase extends Component implements WKBaseContext { @@ -76,6 +93,18 @@ export default class WKBase extends Component implemen }) } + showGlobalModal(options:GlobalModalOptions) { + this.setState({ + showGlobalModal: true, + globalModalOptions: options, + }) + } + hideGlobalModal() { + this.setState({ + showGlobalModal: false + }) + } + componentDidMount() { const { onContext } = this.props if (onContext) { @@ -143,6 +172,9 @@ export default class WKBase extends Component implemen maskClosable={false}> {alertContent} + + {this.state.globalModalOptions?.body} +
} } \ No newline at end of file diff --git a/packages/tsdaodaobase/src/EndpointCommon.tsx b/packages/tsdaodaobase/src/EndpointCommon.tsx index f1c69ec..cd1640f 100644 --- a/packages/tsdaodaobase/src/EndpointCommon.tsx +++ b/packages/tsdaodaobase/src/EndpointCommon.tsx @@ -7,8 +7,8 @@ import { EndpointManager } from "./Service/Module"; import ConversationContext from "./Components/Conversation/context"; export class MessageContextMenus { - title!:string - onClick?:()=>void + title!: string + onClick?: () => void } export class EndpointCommon { @@ -55,49 +55,62 @@ export class EndpointCommon { const channel = param.channel as Channel const conversation = WKSDK.shared().conversationManager.findConversation(channel) let initLocateMessageSeq = 0 - if(conversation && conversation.lastMessage && conversation.unread>0 && conversation.lastMessage.messageSeq > conversation.unread) { + if (conversation && conversation.lastMessage && conversation.unread > 0 && conversation.lastMessage.messageSeq > conversation.unread) { initLocateMessageSeq = conversation.lastMessage.messageSeq - conversation.unread - } + } WKApp.routeRight.replaceToRoot() }, {}) } - registerMessageContextMenus(sid: string, handle: (message: Message,context:ConversationContext) => MessageContextMenus|null,sort?:number) { + registerMessageContextMenus(sid: string, handle: (message: Message, context: ConversationContext) => MessageContextMenus | null, sort?: number) { EndpointManager.shared.setMethod(sid, (param: any) => { - return handle(param.message,param.context) + return handle(param.message, param.context) }, { category: EndpointCategory.messageContextMenus, sort: sort, }) } - messageContextMenus(message: Message,ctx:ConversationContext): MessageContextMenus[] { - return EndpointManager.shared.invokes(EndpointCategory.messageContextMenus, {message:message,context:ctx}) + messageContextMenus(message: Message, ctx: ConversationContext): MessageContextMenus[] { + return EndpointManager.shared.invokes(EndpointCategory.messageContextMenus, { message: message, context: ctx }) } - registerChatToolbar(sid:string,handle:(ctx:ConversationContext)=>React.ReactNode|undefined) { - EndpointManager.shared.setMethod(sid,(param)=>{ - return handle(param) - },{ - category: EndpointCategory.chatToolbars - }) + registerChatToolbar(sid: string, handle: (ctx: ConversationContext) => React.ReactNode | undefined) { + EndpointManager.shared.setMethod(sid, (param) => { + return handle(param) + }, { + category: EndpointCategory.chatToolbars + }) } - chatToolbars(ctx:ConversationContext) :React.ReactNode[] { - return EndpointManager.shared.invokes(EndpointCategory.chatToolbars,ctx) + chatToolbars(ctx: ConversationContext): React.ReactNode[] { + return EndpointManager.shared.invokes(EndpointCategory.chatToolbars, ctx) } + registerChannelHeaderRightItem(id: string, callback: (param: any) => JSX.Element|undefined, sort?: number) { + EndpointManager.shared.setMethod(id, (param) => { + return callback(param) + }, { + category: EndpointCategory.channelHeaderRightItems, + sort: sort, + }) +} - callOnLogin() { - const len = this._onLogins.length; - for (var i = 0; i < len; i++) { - this._onLogins[i]() - } +channelHeaderRightItems(channel:Channel): JSX.Element[] { + return EndpointManager.shared.invokes(EndpointCategory.channelHeaderRightItems,{channel:channel}) +} + + +callOnLogin() { + const len = this._onLogins.length; + for (var i = 0; i < len; i++) { + this._onLogins[i]() } +} } export class ChatToolbar { - icon!:string - onClick?:()=>void + icon!: string + onClick?: () => void } \ No newline at end of file diff --git a/packages/tsdaodaobase/src/Messages/LottieSticker/index.tsx b/packages/tsdaodaobase/src/Messages/LottieSticker/index.tsx index 8d804d3..dc1f469 100644 --- a/packages/tsdaodaobase/src/Messages/LottieSticker/index.tsx +++ b/packages/tsdaodaobase/src/Messages/LottieSticker/index.tsx @@ -5,7 +5,6 @@ import { MessageContentTypeConst } from "../../Service/Const" import MessageBase from "../Base" import { MessageCell } from "../MessageCell" import "@lottiefiles/lottie-player/dist/tgs-player"; -import LazyLoad from 'react-lazyload'; diff --git a/packages/tsdaodaobase/src/Messages/MessageCell.tsx b/packages/tsdaodaobase/src/Messages/MessageCell.tsx index a183062..68da225 100644 --- a/packages/tsdaodaobase/src/Messages/MessageCell.tsx +++ b/packages/tsdaodaobase/src/Messages/MessageCell.tsx @@ -14,15 +14,12 @@ class MessageBaseCellPropsImp implements MessageBaseCellProps { } export class MessageBaseCell

extends Component { - + } export class MessageCell

extends MessageBaseCell { - componentDidMount(): void { - } - render() { return

MessageCell
} diff --git a/packages/tsdaodaobase/src/Messages/Voice/index.tsx b/packages/tsdaodaobase/src/Messages/Voice/index.tsx index 8bc6683..2dded1f 100644 --- a/packages/tsdaodaobase/src/Messages/Voice/index.tsx +++ b/packages/tsdaodaobase/src/Messages/Voice/index.tsx @@ -8,6 +8,7 @@ import MessageTrail from "../Base/tail" import MessageBase from "../Base" import WKApp from "../../App" import { MessageContentTypeConst } from "../../Service/Const" +import { MessageWrap } from "../../Service/Model" var BenzAMRRecorder = require('benz-amr-recorder'); diff --git a/packages/tsdaodaobase/src/Pages/Chat/index.css b/packages/tsdaodaobase/src/Pages/Chat/index.css index 6177bb5..e544eab 100644 --- a/packages/tsdaodaobase/src/Pages/Chat/index.css +++ b/packages/tsdaodaobase/src/Pages/Chat/index.css @@ -210,6 +210,19 @@ body[theme-mode=dark] .wk-chat-conversation-header-channel-info-name { align-items: center; } +.wk-chat-conversation-header-right div { + margin-right: 10px; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; +} + +.wk-chat-conversation-header-right div:last-child { + margin-right: 0px; +} + .wk-chat-conversation-header-setting { display: flex; align-items: center; @@ -293,4 +306,21 @@ body[theme-mode=dark] .wk-chat-popover { .wk-chatmenuspopover-title { margin-left: 10px; font-size: 14px; +} + +.wk-chat-conversation-header-right-item { + position: relative; +} + +.wk-conversation-header-mask { + background-color: rgb(0,0,0,0.0); + position: absolute; + width: 100%; + height: 100%; + top: 0px; + border-radius: 100%; +} + +.wk-conversation-header-mask:hover { + background-color: rgb(0,0,0,0.1); } \ No newline at end of file diff --git a/packages/tsdaodaobase/src/Pages/Chat/index.tsx b/packages/tsdaodaobase/src/Pages/Chat/index.tsx index 54fd26f..f87136b 100644 --- a/packages/tsdaodaobase/src/Pages/Chat/index.tsx +++ b/packages/tsdaodaobase/src/Pages/Chat/index.tsx @@ -19,7 +19,7 @@ import ConversationContext from "../../Components/Conversation/context"; export interface ChatContentPageProps { channel: Channel - initLocateMessageSeq?:number + initLocateMessageSeq?: number } export interface ChatContentPageState { @@ -27,7 +27,7 @@ export interface ChatContentPageState { } export class ChatContentPage extends Component { channelInfoListener!: ChannelInfoListener - conversationContext!:ConversationContext + conversationContext!: ConversationContext constructor(props: any) { super(props) this.state = { @@ -51,7 +51,7 @@ export class ChatContentPage extends Component
-
- + { + WKApp.endpoints.channelHeaderRightItems(channel).map((item:any,i:number) => { + return
+ { + item + } +
+ }) + } +
+ +
+
- { + { this.conversationContext = ctx this.setState({}) - }} key={channel.getChannelKey()} chatBg={WKApp.config.themeMode === ThemeMode.dark?undefined:require("./assets/chat_bg.svg").default} channel={channel}> + }} key={channel.getChannelKey()} chatBg={WKApp.config.themeMode === ThemeMode.dark ? undefined : require("./assets/chat_bg.svg").default} channel={channel}>
@@ -140,15 +151,15 @@ export default class ChatPage extends Component {
{vm.connectTitle}
- { - vm.showAddPopover = false - }} className="wk-chat-popover" position="bottomRight" visible={vm.showAddPopover} showArrow={false} trigger="custom" content={{ - vm.showAddPopover = false + { + vm.showAddPopover = false + }} className="wk-chat-popover" position="bottomRight" visible={vm.showAddPopover} showArrow={false} trigger="custom" content={ { + vm.showAddPopover = false }}>}> -
{ +
{ vm.showAddPopover = !vm.showAddPopover }}> - +
{/*