From 81c2b64e5f66cecdb1b0fee6622959da314e269e Mon Sep 17 00:00:00 2001
From: cfy666 <3087823110@qq.com>
Date: Sun, 14 Jun 2026 13:17:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A0=E6=91=84?=
 =?UTF-8?q?=E5=83=8F=E5=A4=B4/=E9=BA=A6=E5=85=8B=E9=A3=8E=E6=97=B6?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=A1=86=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构 ChatPanel 逻辑，连接后始终显示输入框
- 将欢迎消息移入消息容器内
- 确保输入框在任何状态下都可见
---
 frontend/src/App.css                        | 26 ++++++++++++++++++
 frontend/src/components/ChatPanel/index.tsx | 30 ++++++++++-----------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4dd9ebe..1577688 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -493,6 +493,32 @@ body {
   gap: 12px;
 }
 
+.chat-panel__welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 12px;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  padding: 40px 0;
+}
+
+.chat-panel__welcome-icon {
+  font-size: 2.4rem;
+  opacity: 0.12;
+  margin-bottom: 4px;
+}
+
+.chat-panel__welcome-hint {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  max-width: 240px;
+  text-align: center;
+  line-height: 1.5;
+}
+
 .chat-panel--empty {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/ChatPanel/index.tsx b/frontend/src/components/ChatPanel/index.tsx
index f37e01c..5836226 100644
--- a/frontend/src/components/ChatPanel/index.tsx
+++ b/frontend/src/components/ChatPanel/index.tsx
@@ -51,22 +51,13 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
     setInputText("");
   };
 
-  // 空状态
-  if (messages.length === 0 && !currentReply) {
-    if (!isConnected) {
-      return (
-        <div className="chat-panel chat-panel--empty">
-          <span className="chat-panel--empty-icon">💬</span>
-          <p>点击下方按钮开始对话</p>
-          <span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
-        </div>
-      );
-    }
+  // 未连接时的空状态
+  if (!isConnected) {
     return (
       <div className="chat-panel chat-panel--empty">
         <span className="chat-panel--empty-icon">💬</span>
-        <p>在下方输入文字开始对话</p>
-        <span className="chat-panel--empty-hint">也可以开启麦克风用语音对话</span>
+        <p>点击下方按钮开始对话</p>
+        <span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
       </div>
     );
   }
@@ -74,6 +65,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
   return (
     <div className="chat-panel">
       <div className="chat-panel__messages" ref={containerRef}>
+        {/* 空状态提示 */}
+        {messages.length === 0 && !currentReply && (
+          <div className="chat-panel__welcome">
+            <span className="chat-panel__welcome-icon">💬</span>
+            <p>在下方输入文字开始对话</p>
+            <span className="chat-panel__welcome-hint">也可以开启麦克风用语音对话</span>
+          </div>
+        )}
+
         {messages.map((msg, index) => (
           <div key={index} className={`chat-message chat-message--${msg.role}`}>
             <div className="chat-message__role">
@@ -104,8 +104,8 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
         <div ref={bottomRef} />
       </div>
 
-      {/* 文本输入框 */}
-      {isConnected && onSendText && (
+      {/* 文本输入框 - 连接后始终显示 */}
+      {onSendText && (
         <form className="chat-input" onSubmit={handleSubmit}>
           <input
             type="text"