From aba120289286203d52ddf89f869cf221edc3731f Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Fri, 18 Apr 2025 23:25:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E8=8B=A5=E5=B9=B2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/Message.jsx | 76 +++++++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/client/ui/chat/Message.jsx b/client/ui/chat/Message.jsx
index 6d85f33..28c3f97 100644
--- a/client/ui/chat/Message.jsx
+++ b/client/ui/chat/Message.jsx
@@ -1,65 +1,81 @@
-export default function Message({ direction = 'left', children }) {
+import Avatar from "../Avatar.js"
+
+/**
+ * 一条消息
+ * @param { Object } param
+ * @param { "left" | "right" } [param.direction="left"] 消息方向
+ * @param { String } [param.avatar] 头像链接
+ * @param { String } [param.nickname] 昵称
+ * @returns { React.JSX.Element }
+ */
+export default function Message({ direction = 'left', avatar, nickname, children, ...props } = {}) {
+    let isAtRight = direction == 'right'
     return (
         <div
             slot="trigger"
             style={{
                 width: "100%",
                 display: "flex",
-                justifyContent: "flex-start",
+                justifyContent: isAtRight ? "flex-end" : "flex-start",
                 flexDirection: "column"
-            }}>
+            }}
+            {...props}>
             <div
                 style={{
                     display: "flex",
-                    justifyContent: "flex-start"
+                    justifyContent: isAtRight ? "flex-end" : "flex-start",
                 }}>
                 {
                     // 发送者昵称(左)
-                    direction == 'left' && <span
-                        style={{
-                            alignSelf: "center",
-                            fontSize: "90%"
-                        }}></span>
-                }
-                {
-                    // 发送者头像
-                }
-                <mdui-avatar
-                    style={{
-                        width: "43px",
-                        height: "43px",
-                        margin: "11px"
-                    }}>
-                </mdui-avatar>
-                {
-                    // 发送者昵称(右)
-                    direction == 'right' && <span
+                    isAtRight && <span
                         style={{
                             alignSelf: "center",
                             fontSize: "90%"
                         }}>
+                        {nickname}
+                    </span>
+                }
+                {
+                    // 发送者头像
+                }
+                <Avatar
+                    src={avatar}
+                    text={nickname}
+                    style={{
+                        width: "43px",
+                        height: "43px",
+                        margin: "11px"
+                    }} />
+                {
+                    // 发送者昵称(右)
+                    !isAtRight && <span
+                        style={{
+                            alignSelf: "center",
+                            fontSize: "90%"
+                        }}>
+                        {nickname}
                     </span>
                 }
             </div>
             <mdui-card
                 variant="elevated"
                 style={{
-                    maxWidth: (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
+                    maxWidth: 'var(--whitesilk-widget-message-maxwidth)', // (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
                     minWidth: "0%",
-                    marginLeft: "55px",
+                    [isAtRight ? "marginRight" : "marginLeft"]: "55px",
                     marginTop: "-5px",
                     padding: "15px",
-                    alignSelf: "flex-start"
+                    alignSelf: isAtRight ? "flex-end" : "flex-start",
                 }}>
-                {
-                    // 消息内容
-                    children
-                }
                 <span
                     id="msg"
                     style={{
                         fontSize: "94%"
                     }}>
+                    {
+                        // 消息内容
+                        children
+                    }
                 </span>
             </mdui-card>
         </div>