From dffc8aa53894d46cedb70a5261a07f24f448b062 Mon Sep 17 00:00:00 2001 From: cfy666 <3087823110@qq.com> Date: Sun, 14 Jun 2026 13:13:29 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=97=A0?= =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4/=E9=BA=A6=E5=85=8B=E9=A3=8E?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=89=93=E5=AD=97=E8=81=8A=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改 startSession 逻辑，摄像头和麦克风为可选 - 连接成功后始终显示聊天输入框 - 更新 UI 提示文字，引导用户打字对话 --- frontend/src/App.css | 5 ++++ frontend/src/App.tsx | 10 +++++++ frontend/src/components/ChatPanel/index.tsx | 8 +++--- frontend/src/hooks/useVisionSession.ts | 31 ++++++++++++--------- 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index c88346b..4dd9ebe 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -265,6 +265,11 @@ body { margin-bottom: 4px; } +.video-placeholder__hint { + font-size: 0.72rem; + opacity: 0.6; +} + .video-indicator { position: absolute; bottom: 16px; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 71517d7..58ac759 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -173,6 +173,16 @@ function App() { 点击下方按钮开始对话 )} + {isConnected && !isCameraOn && ( +
+ + + + + 摄像头未开启 + 可在右侧聊天框打字对话 +
+ )} {/* 视频下方控制栏 */} diff --git a/frontend/src/components/ChatPanel/index.tsx b/frontend/src/components/ChatPanel/index.tsx index b405ef5..f37e01c 100644 --- a/frontend/src/components/ChatPanel/index.tsx +++ b/frontend/src/components/ChatPanel/index.tsx @@ -58,15 +58,15 @@ export function ChatPanel({ messages, currentReply, connectionStatus, onSendText
💬

点击下方按钮开始对话

- 连接后可通过摄像头和麦克风与 AI 交互 + 连接后可打字或语音与 AI 交互
); } return (
- 🎙️ -

对着摄像头说话即可

- AI 会自动识别你的语音并分析画面 + 💬 +

在下方输入文字开始对话

+ 也可以开启麦克风用语音对话
); } diff --git a/frontend/src/hooks/useVisionSession.ts b/frontend/src/hooks/useVisionSession.ts index 49b5891..b3e278c 100644 --- a/frontend/src/hooks/useVisionSession.ts +++ b/frontend/src/hooks/useVisionSession.ts @@ -284,21 +284,26 @@ export function useVisionSession() { /** 启动会话 */ const startSession = useCallback(async () => { - // 1. 获取摄像头和麦克风 - await startCamera(); - setIsCameraOn(true); - const micStream = await startMic(); - if (!micStream) { - showToast("无法获取麦克风权限", "error"); - return; - } - setIsMicOn(true); - - // 2. 连接 WebSocket + // 1. 连接 WebSocket（必须） connect(); - // 3. 启动 VAD（传入麦克风 stream） - await startVAD(micStream); + // 2. 尝试获取摄像头（可选） + try { + await startCamera(); + setIsCameraOn(true); + } catch { + console.warn("[Session] 无法获取摄像头权限，将以纯文本模式运行"); + } + + // 3. 尝试获取麦克风（可选） + const micStream = await startMic(); + if (micStream) { + setIsMicOn(true); + // 4. 启动 VAD（仅在麦克风可用时） + await startVAD(micStream); + } else { + console.warn("[Session] 无法获取麦克风权限，将以文本输入模式运行"); + } }, [startCamera, startMic, connect, startVAD]); /** 结束会话 */ -- 2.49.1 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 2/2] =?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 ( -
- 💬 -

点击下方按钮开始对话

- 连接后可打字或语音与 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 && (