From 172b510c745b5ed68ee3d559d3fd914f2ce8d83e Mon Sep 17 00:00:00 2001
From: merlin <xyf17818039334@163.com>
Date: Fri, 15 May 2026 00:00:29 +0800
Subject: [PATCH] feat: enhance group chat UI with sender names and improved
 message layout

---
 src/views/home/group.vue | 46 +++++++++++++++++++++++++++++++++++++++-
 src/views/room/index.vue | 32 +++++++---------------------
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/views/home/group.vue b/src/views/home/group.vue
index e4ae524..fdec0d4 100644
--- a/src/views/home/group.vue
+++ b/src/views/home/group.vue
@@ -52,6 +52,10 @@
                                 <!-- 原逻辑：:src="getAvatar(item.from)"（远端用户头像） -->
                                 <img :src="defaultAvatar" alt="User Avatar" />
                             </div>
+                            <div
+                                :class="{ 'message-item-sender': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
+                                {{ getSenderName(item.from) }}
+                            </div>
                             <div
                                 :class="{ 'message-item-content': true, 'left': item.from !== userinfo.user.id, 'right': item.from === userinfo.user.id }">
                                 {{ item.content }}</div>
@@ -290,6 +294,24 @@ const getAvatar = (u_id) => {
     const member = groupsMember.value.find(member => member.id === u_id);
     return member ? member.u_avatar : null; // 如果找到匹配项，返回 u_avatar，否则返回 null
 };
+
+const getSenderName = (from) => {
+    const f = from == null ? '' : String(from);
+    const selfId = userinfo.user?.id != null ? String(userinfo.user.id) : '';
+    const selfUid = userinfo.user?.u_id != null ? String(userinfo.user.u_id).trim() : '';
+    if (f && (f === selfId || (selfUid && f === selfUid))) {
+        const n = (userinfo.user?.u_name || '').trim();
+        return n || '我';
+    }
+    const m = groupsMember.value.find(
+        (x) => String(x?.id) === f || String(x?.u_id) === f
+    );
+    if (m) {
+        const n = (m.u_name || m.m_name || '').trim();
+        return n || `用户#${f}`;
+    }
+    return f ? `用户#${f}` : '未知用户';
+};
 // 监听消息
 watch(() => groupMessage.messages.length, (newLength) => {
     const msg = groupMessage.messages[newLength - 1]
@@ -425,7 +447,7 @@ onMounted(async() => {
 
 .message-item {
     padding: 10px;
-    height: 80px;
+    min-height: 96px;
     width: 100%;
     position: relative;
 }
@@ -455,6 +477,28 @@ onMounted(async() => {
     right: 20px;
 }
 
+.message-item-sender {
+    position: absolute;
+    bottom: 50px;
+    font-size: 12px;
+    color: #909399;
+    line-height: 1.2;
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.message-item-sender.left {
+    left: 90px;
+    text-align: left;
+}
+
+.message-item-sender.right {
+    right: 90px;
+    text-align: right;
+}
+
 .message-item-content {
     position: absolute;
     display: inline-block;
diff --git a/src/views/room/index.vue b/src/views/room/index.vue
index f864773..0cfd50d 100644
--- a/src/views/room/index.vue
+++ b/src/views/room/index.vue
@@ -55,13 +55,13 @@
   <el-drawer v-model="drawer" title="房间管理" direction="rtl" :before-close="handleClose">
     <el-row>
       <el-col :span="24">
-        <div style="position: absolute;right: 0;">
+        <!-- <div style="position: absolute;right: 0;">
           <h3>权限等级：</h3>
           <span v-if="role === 0">房主</span>
           <span v-else-if="role === 1">管理员</span>
           <span v-else-if="role === 2">用户</span>
           <span v-else>未知权限等级</span>
-        </div>
+        </div> -->
       </el-col>
     </el-row>
     <el-row>
@@ -209,35 +209,17 @@ const roomMessages = ref([
 
 const members = ref([
   {
-    u_id: 'U000001',
-    u_name: '1',
+    u_id: '786080115',
+    u_name: 'Merlin',
     u_avatar: 'https://merlin.xin/avatars/avatar',
     status: 'online'
   },
   {
-    u_id: 'U000002',
-    u_name: '2',
+    u_id: '208020388',
+    u_name: '匿名用户',
     u_avatar: 'https://merlin.xin/avatars/avatar',
     status: 'online'
   },
-  {
-    u_id: 'U000003',
-    u_name: '3',
-    u_avatar: 'https://merlin.xin/avatars/avatar',
-    status: 'offline'
-  },
-  {
-    u_id: 'U000004',
-    u_name: '4',
-    u_avatar: 'https://merlin.xin/avatars/avatar',
-    status: 'online'
-  },
-  {
-    u_id: 'U000003',
-    u_name: '3',
-    u_avatar: 'https://merlin.xin/avatars/avatar',
-    status: 'online'
-  }
 ])
 
 const membersInVoice = ref([
@@ -543,6 +525,8 @@ onBeforeUnmount(() => {
   position: fixed;
   left: 0;
   top: 0;
+  /* 高于主内容区，避免被后续兄弟节点（如播放器）盖住 */
+  z-index: 1500;
 }
 
 .container {