From f376de2b48a3296fea35564fee825be133324a38 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Wed, 1 Oct 2025 11:51:28 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=BE=AE=E8=AA=BF=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E8=8F=9C=E5=96=AE=20*=20=E4=BB=BF=E7=85=A7=E9=9B=BB=E5=A0=B1?=
 =?UTF-8?q?=E9=82=8F=E8=BC=AF=20*=20=E6=B7=BB=E5=8A=A0=20JsonView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/ChatFragment.tsx         |  1 -
 client/ui/chat/Message.tsx              | 31 ++++++++++++++++++-------
 client/ui/custom-elements/chat-image.ts |  3 ++-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 4ee3fec..52d2b55 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -14,7 +14,6 @@ import useAsyncEffect from "../useAsyncEffect.ts"
 import * as marked from 'marked'
 import DOMPurify from 'dompurify'
 import randomUUID from "../../randomUUID.ts"
-import { time } from "node:console";
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
diff --git a/client/ui/chat/Message.tsx b/client/ui/chat/Message.tsx
index d97bc64..6e4693b 100644
--- a/client/ui/chat/Message.tsx
+++ b/client/ui/chat/Message.tsx
@@ -1,4 +1,4 @@
-import { alert, Dropdown } from "mdui"
+import { Dropdown, Dialog } from "mdui"
 import { $ } from "mdui/jq"
 import Client from "../../api/Client.ts"
 import Data_Message from "../../api/client_data/Message.ts"
@@ -6,9 +6,11 @@ import DataCaches from "../../api/DataCaches.ts"
 import Avatar from "../Avatar.tsx"
 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'
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     userId: string
@@ -30,10 +32,23 @@ export default function Message({ userId, rawData, renderHTML, message, ...props
     }, [userId])
 
     const dropDownRef = React.useRef<Dropdown>(null)
+    const messageJsonDialogRef = React.useRef<Dialog>(null)
+    
+    const [isDropDownOpen, setDropDownOpen] = React.useState(false)
 
     return (
         <div
             slot="trigger"
+            onContextMenu={(e) => {
+                if (isMobileUI()) return
+                e.preventDefault()
+                setDropDownOpen(!isDropDownOpen)
+            }}
+            onClick={(e) => {
+                if (!isMobileUI()) return
+                e.preventDefault()
+                setDropDownOpen(!isDropDownOpen)
+            }}
             style={{
                 width: "100%",
                 display: "flex",
@@ -88,7 +103,10 @@ export default function Message({ userId, rawData, renderHTML, message, ...props
                     padding: "15px",
                     alignSelf: isAtRight ? "flex-end" : "flex-start",
                 }}>
-                <mdui-dropdown trigger={isMobileUI() ? 'click' : 'contextmenu'} ref={dropDownRef}>
+                <mdui-dialog close-on-overlay-click close-on-esc ref={messageJsonDialogRef}>
+                    <ReactJson src={message} />
+                </mdui-dialog>
+                <mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
                     <span
                         slot="trigger"
                         id="msg"
@@ -98,15 +116,10 @@ export default function Message({ userId, rawData, renderHTML, message, ...props
                         dangerouslySetInnerHTML={{
                             __html: renderHTML
                         }} />
-                    <mdui-menu>
+                    <mdui-menu onClick={(e) => e.stopPropagation()}>
                         <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-item icon="info" onClick={() => messageJsonDialogRef.current.open = true}>查看詳情</mdui-menu-item>
                     </mdui-menu>
                 </mdui-dropdown>
             </mdui-card>
diff --git a/client/ui/custom-elements/chat-image.ts b/client/ui/custom-elements/chat-image.ts
index 9c28d06..0aae214 100644
--- a/client/ui/custom-elements/chat-image.ts
+++ b/client/ui/custom-elements/chat-image.ts
@@ -29,7 +29,8 @@ customElements.define('chat-image', class extends HTMLElement {
             })
         }
         e.src = $(this).attr('src') as string
-        e.onclick = () => {
+        e.onclick = (event) => {
+            event.stopPropagation()
             openImageViewer($(this).attr('src') as string)
         }
         this.appendChild(e)