feat: 对话中打开用户的资料

client/ui/chat/ChatFragment.tsx

@@ -14,13 +14,15 @@ import useAsyncEffect from "../useAsyncEffect.ts"
 import * as marked from 'marked'
 import DOMPurify from 'dompurify'
 import randomUUID from "../../randomUUID.ts"
-import EventBus from "../../EventBus.ts";
+import EventBus from "../../EventBus.ts"
+import User from "../../api/client_data/User.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
     showReturnButton?: boolean
     openChatInfoDialog: (chat: Chat) => void
     onReturnButtonClicked?: () => void
+    openUserInfoDialog: (user: User | string) => void
 }
 
 const markedInstance = new marked.Marked({
@@ -47,7 +49,7 @@ const markedInstance = new marked.Marked({
     }
 })
 
-export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, openChatInfoDialog, ...props }: Args) {
+export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, openChatInfoDialog, openUserInfoDialog, ...props }: Args) {
     const [messagesList, setMessagesList] = React.useState([] as Message[])
     const [chatInfo, setChatInfo] = React.useState({
         title: '加載中...'
@@ -305,7 +307,8 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                         key={msg.id}
                                         slot="trigger"
                                         id={`chat_${target}_message_${msg.id}`}
-                                        userId={msg.user_id} />
+                                        userId={msg.user_id}
+                                        openUserInfoDialog={openUserInfoDialog} />
 
                                     return (
                                         <>

client/ui/chat/Message.tsx

@@ -8,18 +8,19 @@ import copyToClipboard from "../copyToClipboard.ts"
 import useAsyncEffect from "../useAsyncEffect.ts"
 import useEventListener from "../useEventListener.ts"
 import React from "react"
-import useEventListener from "../useEventListener.ts"
 import isMobileUI from "../isMobileUI.ts"
 import ReactJson from 'react-json-view'
+import User from "../../api/client_data/User.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     userId: string
     rawData: string
     renderHTML: string
     message: Data_Message
+    openUserInfoDialog: (user: User | string) => void
 }
 
-export default function Message({ userId, rawData, renderHTML, message, ...props }: Args) {
+export default function Message({ userId, rawData, renderHTML, message, openUserInfoDialog, ...props }: Args) {
     const isAtRight = Client.myUserProfile?.id == userId
 
     const [nickName, setNickName] = React.useState("")
@@ -87,7 +88,8 @@ export default function Message({ userId, rawData, renderHTML, message, ...props
                         width: "43px",
                         height: "43px",
                         margin: "11px"
-                    }} />
+                    }}
+                    onClick={() => openUserInfoDialog(userId)} />
                 {
                     // 发送者昵称(右)
                     !isAtRight && <span
@@ -128,7 +130,7 @@ export default function Message({ userId, rawData, renderHTML, message, ...props
                     }}>
                         <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard($(dropDownRef.current as HTMLElement).find('#msg').text().trim())}>複製文字</mdui-menu-item>
                         <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard(rawData)}>複製原文</mdui-menu-item>
-                        <mdui-menu-item icon="info" onClick={() => messageJsonDialogRef.current.open = true}>查看詳情</mdui-menu-item>
+                        <mdui-menu-item icon="info" onClick={() => messageJsonDialogRef.current!.open = true}>查看詳情</mdui-menu-item>
                     </mdui-menu>
                 </mdui-dropdown>
             </mdui-card>