聊天消息头像也显示已购头像框特效

- DecorationService: getDecorationsForMessage() 加入 avatar_frame 字段
- 新增 .avatar-frame-wrapper-sm 紧凑版头像框样式（适配16px小头像）
- 消息渲染时检查 msg.avatar_frame 和 senderInfo.avatar_frame，包裹头像框

app/Services/DecorationService.php

@@ -175,11 +175,11 @@ class DecorationService
     /**
      * 获取消息广播 payload 需要携带的装扮字段。
      *
-     * 消息广播只需要气泡样式（msg_bubble）、昵称颜色（msg_name_color）和文字颜色特效（msg_text_color），
-     * 头像框不需要在消息中展示。
+     * 消息广播需要气泡样式（msg_bubble）、昵称颜色（msg_name_color）、文字颜色特效（msg_text_color）
+     * 以及头像框（avatar_frame），前端据此渲染发送者头像的装饰边框。
      *
      * @param  User  $user  消息发送者
-     * @return array{msg_bubble?:string, msg_name_color?:string, msg_text_color?:string}
+     * @return array{msg_bubble?:string, msg_name_color?:string, msg_text_color?:string, avatar_frame?:string}
      */
     public function getDecorationsForMessage(User $user): array
     {
@@ -195,6 +195,9 @@ class DecorationService
         if (! empty($decorations['text_color']['style'])) {
             $result['msg_text_color'] = $decorations['text_color']['style'];
         }
+        if (! empty($decorations['avatar_frame']['style'])) {
+            $result['avatar_frame'] = $decorations['avatar_frame']['style'];
+        }
 
         return $result;
     }

resources/views/chat/partials/scripts.blade.php

@@ -334,6 +334,64 @@
         from { transform: rotate(0deg); }
         to   { transform: rotate(360deg); }
     }
+
+    /* ========== 紧凑版头像框：用于聊天消息中的小头像（16px） ========== */
+    .avatar-frame-wrapper-sm {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        width: 22px;
+        height: 22px;
+        vertical-align: middle;
+        margin-right: 2px;
+        line-height: 0;
+        flex: 0 0 22px;
+    }
+
+    .avatar-frame-wrapper-sm .avatar-frame {
+        position: absolute;
+        inset: 0;
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .avatar-frame-wrapper-sm .avatar-frame::before,
+    .avatar-frame-wrapper-sm .avatar-frame::after {
+        content: "";
+        position: absolute;
+        pointer-events: none;
+    }
+
+    .avatar-frame-wrapper-sm .avatar-frame--silver::before,
+    .avatar-frame-wrapper-sm .avatar-frame--gold::before,
+    .avatar-frame-wrapper-sm .avatar-frame--star::before,
+    .avatar-frame-wrapper-sm .avatar-frame--dragon::before {
+        inset: 2px;
+        border-radius: 50%;
+        background: #eaf3ff;
+    }
+
+    .avatar-frame-wrapper-sm .avatar-frame--dragon::after {
+        inset: 3px;
+        border-radius: 50%;
+        border: 1px dashed rgba(254, 202, 202, .82);
+    }
+
+    .avatar-frame-wrapper-sm .avatar-frame--star::after {
+        inset: -1px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.9) 0 1px, transparent 2px);
+        transform-origin: 50% 50%;
+    }
+
+    .avatar-frame-wrapper-sm img {
+        position: relative;
+        z-index: 2;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+    }
 </style>
 
 <script>
@@ -2549,8 +2607,21 @@
         if (msg.from_user.endsWith('播报') || msg.from_user === '星海小博士' || msg.from_user === '系统传音' || msg.from_user === '系统公告') {
             headImgSrc = '/images/bugle.png';
         }
-        const headImg =
-            `<img src="${headImgSrc}" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">`;
+        // ── 头像框装扮：优先取消息 payload，fallback 到在线用户数据 ──
+        var avatarFrameClass = null;
+        var avatarFrameRaw = msg.avatar_frame || (senderInfo && senderInfo.avatar_frame);
+        if (avatarFrameRaw) {
+            avatarFrameClass = 'avatar-frame--' + avatarFrameRaw.replace(/^avatar_frame_/, '');
+        }
+        var headImg = '';
+        if (avatarFrameClass) {
+            headImg = '<span class="avatar-frame-wrapper-sm">' +
+                '<span class="avatar-frame ' + avatarFrameClass + '"></span>' +
+                '<img src="' + headImgSrc + '" onerror="this.src=\'/images/headface/1.gif\'">' +
+                '</span>';
+        } else {
+            headImg = '<img src="' + headImgSrc + '" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src=\'/images/headface/1.gif\'">';
+        }
         const messageBodyHtml = buildChatMessageContent(msg, fontColor, textColorClass);
 
         let html = '';