From 00f10088d00f51360959d2833711f6edf530cd5c Mon Sep 17 00:00:00 2001
From: cfy666 <3087823110@qq.com>
Date: Sat, 13 Jun 2026 20:01:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=95=E9=83=A8=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E6=A0=8F=E6=B7=BB=E5=8A=A0=E6=91=84=E5=83=8F=E5=A4=B4/?=
 =?UTF-8?q?=E9=BA=A6=E5=85=8B=E9=A3=8E=E5=BC=80=E5=85=B3=EF=BC=8C=E8=AF=B4?=
 =?UTF-8?q?=E8=AF=9D=E6=97=B6=E9=BA=A6=E5=85=8B=E9=A3=8E=E8=84=89=E5=86=B2?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/App.css                   | 43 +++++++++++++++++++++++++-
 frontend/src/App.tsx                   | 33 +++++++++++---------
 frontend/src/hooks/useVisionSession.ts | 32 +++++++++++++++++++
 3 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index bddd055..330c48c 100644
--- a/frontend/src/App.css
+++ b/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); }
 }
 
 /* ---- 右侧聊天面板 ---- */
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4fcea63..ffd567b 100644
--- a/frontend/src/App.tsx
+++ b/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}
diff --git a/frontend/src/hooks/useVisionSession.ts b/frontend/src/hooks/useVisionSession.ts
index fd4c005..0bdab7c 100644
--- a/frontend/src/hooks/useVisionSession.ts
+++ b/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,
   };
 }