修复聊天框弹出bug

css/chat.css

@@ -13,6 +13,7 @@
 
 .chat-box {
     width: 90%;
+    min-height: 20px;
     max-height: 50vh;
     overflow-y: auto;
     background: #f5f5f5;
@@ -21,6 +22,7 @@
     border-radius: 8px;
     position: relative;
     z-index: 10;
+    display: none;
 }
 
 .chat-box.show {

index.html

@@ -53,10 +53,12 @@
         <div id="chatContainer" class="chat-box hide"></div>
         
         <div class="input-row">
-            <input type="text" id="userInput" placeholder="输入你的消息..." onfocus="toggleChat(true)">
-            <button onclick="sendMessage()">发送</button>
+          <!-- 改用 onclick，顺带阻止冒泡 -->
+          <input type="text" id="userInput" placeholder="输入你的消息..."
+                 onclick="openChat(event)" />
+          <button onclick="sendMessage()">发送</button>
         </div>
-    </div>
+      </div>
 
     <footer>
         <p>&copy; 2025 DreamLife 版权所有</p>

javascape/chat.js

@@ -6,38 +6,50 @@ document.getElementById('userInput').addEventListener('keydown', function(event)
 });
 
 // 控制聊天框显示和隐藏
+const chatBox = document.getElementById('chatContainer');
+const inputBox = document.getElementById('userInput');
+
+// 点击输入框时打开聊天框
+function openChat(e) {
+  e.stopPropagation();        // 阻止这次点击冒泡到 document
+  toggleChat(true);
+}
+
 function toggleChat(show) {
-    const chatBox = document.getElementById('chatContainer');
+  if (show) {
+    if (chatBox.classList.contains('show')) return;
 
-    if (show) {
-        // 如果已经显示就不重复处理
-        if (chatBox.classList.contains('show')) return;
+    // 先显示动画前状态
+    chatBox.style.display = 'block';
+    chatBox.classList.remove('hide');
+    chatBox.classList.add('show');
 
-        chatBox.style.display = 'block'; // 确保先显示再动画
-        chatBox.classList.remove('hide');
-        chatBox.classList.add('show');
+    // 延迟到下一轮事件循环再加 document 监听，避免捕获当前点击
+    setTimeout(() => {
+      document.addEventListener('click', outsideClickListener);
+    }, 0);
 
-        document.addEventListener('click', outsideClickListener);
-    } else {
-        if (!chatBox.classList.contains('show')) return;
+    // 聊天框内部点击也不要冒泡
+    chatBox.addEventListener('click', e => e.stopPropagation());
+  } else {
+    if (!chatBox.classList.contains('show')) return;
 
-        chatBox.classList.remove('show');
-        chatBox.classList.add('hide');
+    chatBox.classList.remove('show');
+    chatBox.classList.add('hide');
 
-        chatBox.addEventListener('animationend', function handler() {
-            chatBox.style.display = 'none';
-            chatBox.removeEventListener('animationend', handler);
-        });
+    // 动画结束后真正隐藏
+    chatBox.addEventListener('animationend', function handler() {
+      chatBox.style.display = 'none';
+      chatBox.removeEventListener('animationend', handler);
+    });
 
-        document.removeEventListener('click', outsideClickListener);
-    }
+    document.removeEventListener('click', outsideClickListener);
+  }
 }
 
 function outsideClickListener(event) {
-    const chatBox = document.getElementById('chatContainer');
-    const inputBox = document.getElementById('userInput');
-
-    if (!chatBox.contains(event.target) && !inputBox.contains(event.target)) {
-        toggleChat(false);
-    }
+  // 点击目标既不在聊天框也不在输入框里，就收起
+  if (!chatBox.contains(event.target) && !inputBox.contains(event.target)) {
+    toggleChat(false);
+  }
 }