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
)}
-
- {[
- { code: "zh-CN", label: "中文" },
- { code: "en-US", label: "EN" },
- { code: "ja-JP", label: "日" },
- ].map((l) => (
-
- ))}
-
{isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
@@ -186,6 +175,20 @@ function App() {
) : (
+
+