frontend/src/App.css

@@ -332,7 +332,48 @@ body {
 
 .video-controls__row {
   display: flex;
-  gap: 8px;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.btn--ctrl {
+  padding: 6px 12px;
+  font-size: 0.78rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.btn--ctrl:hover {
+  background: var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--ctrl-on {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--color-success);
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+.btn--ctrl-off {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--color-error);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.btn--speaking {
+  animation: micPulse 0.8s ease-in-out infinite;
+  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
+}
+
+@keyframes micPulse {
+  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); transform: scale(1); }
+  50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.8); transform: scale(1.05); }
 }
 
 /* ---- 右侧聊天面板 ---- */

frontend/src/App.tsx

@@ -54,6 +54,10 @@ function App() {
     startSession,
     stopSession,
     interrupt,
+    isCameraOn,
+    isMicOn,
+    toggleCamera,
+    toggleMic,
   } = useVisionSession();
 
   const isConnected = connectionStatus === "connected";
@@ -97,21 +101,6 @@ function App() {
               {stats.queryCount} 次请求 · {stats.totalTokens} tokens
             </span>
           )}
-          <div className="lang-group">
-            {[
-              { code: "zh-CN", label: "中文" },
-              { code: "en-US", label: "EN" },
-              { code: "ja-JP", label: "日" },
-            ].map((l) => (
-              <button
-                key={l.code}
-                className={`lang-btn ${config.language === l.code ? "lang-btn--active" : ""}`}
-                onClick={() => updateConfig({ language: l.code })}
-              >
-                {l.label}
-              </button>
-            ))}
-          </div>
           <span className={`badge badge--${connectionStatus}`}>
             {isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
           </span>
@@ -186,6 +175,20 @@ function App() {
               </button>
             ) : (
               <div className="video-controls__row">
+                <button
+                  className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
+                  onClick={toggleCamera}
+                  title={isCameraOn ? "关闭摄像头" : "开启摄像头"}
+                >
+                  📷
+                </button>
+                <button
+                  className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
+                  onClick={toggleMic}
+                  title={isMicOn ? "关闭麦克风" : "开启麦克风"}
+                >
+                  🎤
+                </button>
                 <button
                   className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`}
                   onClick={toggleMode}

frontend/src/hooks/useVisionSession.ts

@@ -36,6 +36,8 @@ export function useVisionSession() {
   const [config, setConfig] = useState<SessionConfig>(loadConfig);
   const [stats, setStats] = useState<SessionStats>({ queryCount: 0, totalTokens: 0 });
   const [mode, setMode] = useState<SessionMode>("dialogue");
+  const [isCameraOn, setIsCameraOn] = useState(false);
+  const [isMicOn, setIsMicOn] = useState(false);
 
   // 上一帧采样数据（用于关键帧检测）
   const prevFrameRef = useRef<Uint8ClampedArray | null>(null);
@@ -280,11 +282,13 @@ 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
     connect();
@@ -310,8 +314,32 @@ export function useVisionSession() {
     setStats({ queryCount: 0, totalTokens: 0 });
     historyRef.current = [];
     prevFrameRef.current = null;
+    setIsCameraOn(false);
+    setIsMicOn(false);
   }, [stopObserving, stopVAD, stopMic, stopCamera, disconnect]);
 
+  /** 摄像头开关 */
+  const toggleCamera = useCallback(async () => {
+    if (isCameraOn) {
+      stopCamera();
+      setIsCameraOn(false);
+    } else {
+      await startCamera();
+      setIsCameraOn(true);
+    }
+  }, [isCameraOn, startCamera, stopCamera]);
+
+  /** 麦克风开关 */
+  const toggleMic = useCallback(async () => {
+    if (isMicOn) {
+      stopMic();
+      setIsMicOn(false);
+    } else {
+      const micStream = await startMic();
+      setIsMicOn(!!micStream);
+    }
+  }, [isMicOn, startMic, stopMic]);
+
   /** 打断当前回复 */
   const interrupt = useCallback(() => {
     send({ type: "interrupt" });
@@ -351,5 +379,9 @@ export function useVisionSession() {
     startSession,
     stopSession,
     interrupt,
+    isCameraOn,
+    isMicOn,
+    toggleCamera,
+    toggleMic,
   };
 }