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] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=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=A8=A1?=
 =?UTF-8?q?=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() {
                 <span>点击下方按钮开始对话</span>
               </div>
             )}
+            {isConnected && !isCameraOn && (
+              <div className="video-placeholder">
+                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+                  <circle cx="12" cy="13" r="4" />
+                </svg>
+                <span>摄像头未开启</span>
+                <span className="video-placeholder__hint">可在右侧聊天框打字对话</span>
+              </div>
+            )}
           </div>
 
           {/* 视频下方控制栏 */}
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
         <div className="chat-panel chat-panel--empty">
           <span className="chat-panel--empty-icon">💬</span>
           <p>点击下方按钮开始对话</p>
-          <span className="chat-panel--empty-hint">连接后可通过摄像头和麦克风与 AI 交互</span>
+          <span className="chat-panel--empty-hint">连接后可打字或语音与 AI 交互</span>
         </div>
       );
     }
     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>
+        <span className="chat-panel--empty-icon">💬</span>
+        <p>在下方输入文字开始对话</p>
+        <span className="chat-panel--empty-hint">也可以开启麦克风用语音对话</span>
       </div>
     );
   }
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]);
 
   /** 结束会话 */