消息模块开发完成

client/public/connectview.js

@@ -161,6 +161,16 @@ function escapeHtml(value) {
         .replace(/'/g, ''');
 }
 
+function getCurrentUserId() {
+    try {
+        const settings = JSON.parse(localStorage.getItem('userSettings') || '{}');
+        return settings.userId || settings.id || '';
+    } catch (error) {
+        console.error('Error parsing current user settings:', error);
+        return '';
+    }
+}
+
 /**
  * 显示全部在线WebSocket用户
  * @param {Array} users - 在线用户列表
@@ -212,6 +222,7 @@ function displayOnlineUsers(users) {
             const userName = user.name || user.userId || '匿名用户';
             const avatar = user.avatar || '/images/p2.png';
             const roleLabel = user.role === 'host' ? '房主' : (user.role === 'participant' ? '成员' : '大厅');
+            const isSelf = Boolean(user.userId) && user.userId === getCurrentUserId();
             const userItem = document.createElement('div');
             userItem.className = 'flex items-center justify-between rounded-lg bg-black/20 px-3 py-2';
             userItem.innerHTML = `
@@ -222,7 +233,10 @@ function displayOnlineUsers(users) {
                         <div class="text-xs text-gray-400 truncate">${escapeHtml(user.userId || user.socketId || user.participantId || '未设置ID')}</div>
                     </div>
                 </div>
-                <span class="text-xs px-2 py-1 rounded-full ${user.role === 'host' ? 'bg-indigo-500/20 text-indigo-300' : (user.role === 'participant' ? 'bg-white/10 text-gray-300' : 'bg-emerald-500/20 text-emerald-300')}">${roleLabel}</span>
+                <div class="flex items-center gap-2">
+                    <span class="text-xs px-2 py-1 rounded-full ${user.role === 'host' ? 'bg-indigo-500/20 text-indigo-300' : (user.role === 'participant' ? 'bg-white/10 text-gray-300' : 'bg-emerald-500/20 text-emerald-300')}">${roleLabel}</span>
+                    ${isSelf ? '<span class="text-xs text-gray-500">自己</span>' : ''}
+                </div>
             `;
             roomList.appendChild(userItem);
         });