From 9ad7577e35e287f89b73c8d0dccf0d82044071fc Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sat, 24 May 2025 02:45:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=BF=E9=97=B4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=8D=E5=88=B7=E6=96=B0=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/main.js |  3 ++-
 web/room.js | 22 ++++++++++++++++------
 web/ui.js   | 26 ++++++++++++++++++--------
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/web/main.js b/web/main.js
index fd98606..6e377af 100644
--- a/web/main.js
+++ b/web/main.js
@@ -50,7 +50,8 @@ import {
  * debug: 是否开启调试模式
  */
 window.config = {
-  wsAddress: '/ws',
+  wsAddress: 'ws://127.0.0.1:8088',
+  //wsAddress: '/ws',
   debug: true
 };
 
diff --git a/web/room.js b/web/room.js
index 55800d0..1a0d609 100644
--- a/web/room.js
+++ b/web/room.js
@@ -48,8 +48,10 @@ export function switchRoom(index) {
   setSidebarAvatar(rd.myUserName);
   
   renderRooms(index);
+  // 先渲染头部信息
   renderMainHeader();
-  renderUserList(); // 确保用户列表反映私聊状态
+  // 再渲染用户列表，不再重复更新头部
+  renderUserList(false);
   renderChatArea();
   updateChatInputStyle(); // 根据新房间更新输入框样式
 }
@@ -185,9 +187,12 @@ export function handleClientList(idx, list, selfId) {
   list.forEach(u => { rd.userMap[u.clientId] = u; });
   rd.myId = selfId;
   
+  // 确保当前活动房间的界面刷新
   if (activeRoomIndex === idx) {
-    renderUserList();
-    renderMainHeader(); // 刷新顶部信息栏
+    // 先渲染用户列表，不同时更新头部信息
+    renderUserList(false);
+    // 然后单独渲染头部信息
+    renderMainHeader();
   }
   
   // 初始化计数
@@ -225,8 +230,10 @@ export function handleClientSecured(idx, user) {
   
   // 无论初始化状态如何，始终刷新当前房间UI
   if (activeRoomIndex === idx) {
-    renderUserList();
-    renderMainHeader(); // 也刷新顶部信息栏
+    // 先渲染用户列表，不同时更新头部信息
+    renderUserList(false);
+    // 然后单独渲染头部信息
+    renderMainHeader();
   }
   
   // 仅在初始化完成后才处理加入提示
@@ -281,7 +288,10 @@ export function handleClientLeft(idx, clientId) {
   delete rd.userMap[clientId];
   
   if (activeRoomIndex === idx) {
-    renderUserList();
+    // 先渲染用户列表，不同时更新头部信息
+    renderUserList(false);
+    // 然后单独渲染头部信息
+    renderMainHeader();
   }
 }
 
diff --git a/web/ui.js b/web/ui.js
index 5cb6808..6e93fac 100644
--- a/web/ui.js
+++ b/web/ui.js
@@ -133,8 +133,9 @@ export function setupMobileUIHandlers() {
 
 /**
  * 渲染在线用户列表
+ * @param {boolean} updateHeader 是否同时更新房间信息头部
  */
-export function renderUserList() {
+export function renderUserList(updateHeader = false) {
   const userListEl = $id('member-list');
   userListEl.innerHTML = '';
   
@@ -147,7 +148,10 @@ export function renderUserList() {
   if (me) userListEl.appendChild(createUserItem(me, true));
   others.forEach(u => userListEl.appendChild(createUserItem(u, false)));
   
-  renderMainHeader(); // 在线用户变化时刷新
+  // 只在需要时更新房间头部信息，避免循环调用
+  if (updateHeader) {
+    renderMainHeader();
+  }
 }
 
 /**
@@ -165,13 +169,8 @@ export function createUserItem(user, isMe) {
     // 兼容 userName/username/name
   const rawName = user.userName || user.username || user.name || '';
   const safeUserName = escapeHTML(rawName);
-    // 头像 SVG
-  const svg = createAvatarSVG(rawName);
-  // svg内容已经通过createAvatarSVG生成，通常是安全的
-  // 但为确保安全，仍应当清理任何可能的脚本内容
-  const cleanSvg = svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
-  div.querySelector('.avatar').innerHTML = cleanSvg;
   
+  // 先设置 HTML 内容
   div.innerHTML = `
     <span class="avatar"></span>
     <div class="member-info">
@@ -179,6 +178,17 @@ export function createUserItem(user, isMe) {
     </div>
   `;
   
+  // 然后找到头像元素并设置其内容
+  const avatarEl = div.querySelector('.avatar');
+  if (avatarEl) {
+    // 头像 SVG
+    const svg = createAvatarSVG(rawName);
+    // svg内容已经通过createAvatarSVG生成，通常是安全的
+    // 但为确保安全，仍应当清理任何可能的脚本内容
+    const cleanSvg = svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+    avatarEl.innerHTML = cleanSvg;
+  }
+  
   if (!isMe) {
     div.onclick = () => togglePrivateChat(user.clientId, safeUserName);
   }