From b3ffdf8469aa5cee63797cc8346f9ca08bf9fc3f Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Wed, 1 Oct 2025 00:01:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/Message.tsx | 49 ++++++++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/client/ui/chat/Message.tsx b/client/ui/chat/Message.tsx
index 4bb6ed7..d97bc64 100644
--- a/client/ui/chat/Message.tsx
+++ b/client/ui/chat/Message.tsx
@@ -1,18 +1,27 @@
+import { alert, Dropdown } from "mdui"
+import { $ } from "mdui/jq"
 import Client from "../../api/Client.ts"
+import Data_Message from "../../api/client_data/Message.ts"
 import DataCaches from "../../api/DataCaches.ts"
 import Avatar from "../Avatar.tsx"
+import copyToClipboard from "../copyToClipboard.ts"
 import useAsyncEffect from "../useAsyncEffect.ts"
 import React from "react"
+import useEventListener from "../useEventListener.ts"
+import isMobileUI from "../isMobileUI.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     userId: string
+    rawData: string
+    renderHTML: string
+    message: Data_Message
 }
 
-export default function Message({ userId, children, ...props }: Args) {
+export default function Message({ userId, rawData, renderHTML, message, ...props }: Args) {
     const isAtRight = Client.myUserProfile?.id == userId
 
-    const [ nickName, setNickName ] = React.useState("")
-    const [ avatarUrl, setAvatarUrl ] = React.useState<string | undefined>("")
+    const [nickName, setNickName] = React.useState("")
+    const [avatarUrl, setAvatarUrl] = React.useState<string | undefined>("")
 
     useAsyncEffect(async () => {
         const user = await DataCaches.getUserProfile(userId)
@@ -20,6 +29,8 @@ export default function Message({ userId, children, ...props }: Args) {
         setAvatarUrl(user?.avatar)
     }, [userId])
 
+    const dropDownRef = React.useRef<Dropdown>(null)
+
     return (
         <div
             slot="trigger"
@@ -77,17 +88,29 @@ export default function Message({ userId, children, ...props }: Args) {
                     padding: "15px",
                     alignSelf: isAtRight ? "flex-end" : "flex-start",
                 }}>
-                <span
-                    id="msg"
-                    style={{
-                        fontSize: "94%"
-                    }}>
-                    {
-                        // 消息内容
-                        children
-                    }
-                </span>
+                <mdui-dropdown trigger={isMobileUI() ? 'click' : 'contextmenu'} ref={dropDownRef}>
+                    <span
+                        slot="trigger"
+                        id="msg"
+                        style={{
+                            fontSize: "94%"
+                        }}
+                        dangerouslySetInnerHTML={{
+                            __html: renderHTML
+                        }} />
+                    <mdui-menu>
+                        <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard($(dropDownRef.current as HTMLElement).find('#msg').text())}>複製文字</mdui-menu-item>
+                        <mdui-menu-item icon="content_copy" onClick={() => copyToClipboard(rawData)}>複製原文</mdui-menu-item>
+                        <mdui-menu-item icon="info" onClick={() => alert({
+                            headline: "消息详情",
+                            description: JSON.stringify(message),
+                            confirmText: "关闭",
+                            onConfirm: () => { },
+                        })}>查看詳情</mdui-menu-item>
+                    </mdui-menu>
+                </mdui-dropdown>
             </mdui-card>
+
         </div>
     )
 }