From a3dc204b21d52b6efe990ec8b0bf32a5a354ad9a Mon Sep 17 00:00:00 2001
From: Cx330 <1487537121@qq.com>
Date: Sun, 6 Apr 2025 22:15:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=81=8A=E5=A4=A9=E6=A1=86?=
 =?UTF-8?q?=E5=BC=B9=E5=87=BAbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/chat.css      |  2 ++
 index.html        |  8 ++++---
 javascape/chat.js | 60 ++++++++++++++++++++++++++++-------------------
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/css/chat.css b/css/chat.css
index 616e0e3..968a4ff 100644
--- a/css/chat.css
+++ b/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 {
diff --git a/index.html b/index.html
index 75eff51..4bf536c 100644
--- a/index.html
+++ b/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>
diff --git a/javascape/chat.js b/javascape/chat.js
index 3a727a2..352fee2 100644
--- a/javascape/chat.js
+++ b/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);
+  }
 }
\ No newline at end of file