feat: 添加 LIVE 计时器和语言按钮组（P0 优化）

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器 - Header 添加中文/EN/日语言按钮组，一键切换语言 - live-badge、lang-group 样式 Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-13 19:01:33 +08:00
parent f764b3a7d8
commit 188782fa66
2 changed files with 110 additions and 2 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,7 @@
 // CamTalk — 主应用组件（Web 端双栏布局）
 // ============================================================

-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useVisionSession } from "./hooks/useVisionSession";
 import { VideoPreview } from "./components/VideoPreview";
 import { ChatPanel } from "./components/ChatPanel";
@@ -15,6 +15,8 @@ import "./App.css";
 function App() {
  const [showConfig, setShowConfig] = useState(false);
  const [theme, setTheme] = useState<Theme>(loadTheme);
+  const [elapsed, setElapsed] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // 切换主题时更新 <html> 的 data-theme 属性
  useEffect(() => {
@@ -26,6 +28,12 @@ function App() {
    saveTheme(t);
  }, []);

+  const formatTime = (s: number) => {
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  };
+
  const {
    messages,
    currentReply,
@@ -50,6 +58,31 @@ function App() {

  const isConnected = connectionStatus === "connected";

+  // 连接计时器
+  const elapsedRef = useRef(0);
+  useEffect(() => {
+    if (isConnected) {
+      elapsedRef.current = 0;
+      setElapsed(0); // eslint-disable-line react-hooks/set-state-in-effect -- 连接时重置计时器
+    }
+  }, [isConnected]);
+
+  useEffect(() => {
+    if (!isConnected) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      return;
+    }
+    const id = setInterval(() => {
+      elapsedRef.current += 1;
+      setElapsed(elapsedRef.current);
+    }, 1000);
+    timerRef.current = id;
+    return () => clearInterval(id);
+  }, [isConnected]);
+
  return (
    <div className="app">
      {/* ---- 顶部导航栏 ---- */}
@@ -64,6 +97,21 @@ 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>
@@ -93,6 +141,12 @@ function App() {
        <div className="video-panel">
          <div className="video-container">
            <VideoPreview ref={videoRef} isStreaming={!!stream} />
+            {isConnected && (
+              <div className="live-badge">
+                <span className="live-badge__dot" />
+                LIVE {formatTime(elapsed)}
+              </div>
+            )}
            {config.detailLevel === "high" && (
              <div className="detail-badge">HD</div>
            )}