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() { ) : (
+ +