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 ( -
- 💬 -

点击下方按钮开始对话

- 连接后可打字或语音与 AI 交互 -
- ); - } + // 未连接时的空状态 + if (!isConnected) { return (
💬 -

在下方输入文字开始对话

- 也可以开启麦克风用语音对话 +

点击下方按钮开始对话

+ 连接后可打字或语音与 AI 交互
); } @@ -74,6 +65,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText return (
+ {/* 空状态提示 */} + {messages.length === 0 && !currentReply && ( +
+ 💬 +

在下方输入文字开始对话

+ 也可以开启麦克风用语音对话 +
+ )} + {messages.map((msg, index) => (
@@ -104,8 +104,8 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
- {/* 文本输入框 */} - {isConnected && onSendText && ( + {/* 文本输入框 - 连接后始终显示 */} + {onSendText && (