XEngineers/CamTalk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request '添加计时器，麦克风，摄像头开关' (#45) from develop-frontend8 into develop 33分钟前 #46

Merged
huanghaosheng merged 60 commits from develop into main 2026-06-13 20:43:07 +08:00
Conversation 0 Commits 60 Files Changed 47 +110 -2
2 changed files with 110 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 188782fa66 - Show all commits

56
frontend/src/App.css
View File

@@ -143,6 +143,35 @@ body {
color: var(--color-text); color: var(--color-text);
} }
.lang-group {
display: flex;
gap: 2px;
background: var(--color-surface-2);
border-radius: var(--radius-sm);
padding: 2px;
}
.lang-btn {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 0.72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
}
.lang-btn:hover {
color: var(--color-text);
}
.lang-btn--active {
background: var(--color-primary);
color: white;
}
/* ---- Workspace (双栏) ---- */ /* ---- Workspace (双栏) ---- */
.workspace { .workspace {
@@ -154,7 +183,7 @@ body {
/* ---- 左侧视频面板 ---- */ /* ---- 左侧视频面板 ---- */
.video-panel { .video-panel {
width: 400px; width: 420px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -216,6 +245,31 @@ body {
animation: pulse 1.5s ease-in-out infinite; animation: pulse 1.5s ease-in-out infinite;
} }
.live-badge {
position: absolute;
top: 12px;
left: 12px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
color: white;
padding: 4px 12px;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.live-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
animation: pulse 1.5s ease-in-out infinite;
}
.video-indicator--loading { color: var(--color-warning); } .video-indicator--loading { color: var(--color-warning); }
.video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); } .video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); }
.video-indicator--error { color: var(--color-error); animation: none; } .video-indicator--error { color: var(--color-error); animation: none; }

56
frontend/src/App.tsx
View File

@@ -2,7 +2,7 @@
// CamTalk — 主应用组件（Web 端双栏布局） // CamTalk — 主应用组件（Web 端双栏布局）
// ============================================================ // ============================================================
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { useVisionSession } from "./hooks/useVisionSession"; import { useVisionSession } from "./hooks/useVisionSession";
import { VideoPreview } from "./components/VideoPreview"; import { VideoPreview } from "./components/VideoPreview";
import { ChatPanel } from "./components/ChatPanel"; import { ChatPanel } from "./components/ChatPanel";
@@ -15,6 +15,8 @@ import "./App.css";
function App() { function App() {
const [showConfig, setShowConfig] = useState(false); const [showConfig, setShowConfig] = useState(false);
const [theme, setTheme] = useState<Theme>(loadTheme); const [theme, setTheme] = useState<Theme>(loadTheme);
const [elapsed, setElapsed] = useState(0);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
// 切换主题时更新 <html> 的 data-theme 属性 // 切换主题时更新 <html> 的 data-theme 属性
useEffect(() => { useEffect(() => {
@@ -26,6 +28,12 @@ function App() {
saveTheme(t); 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 { const {
messages, messages,
currentReply, currentReply,
@@ -50,6 +58,31 @@ function App() {
const isConnected = connectionStatus === "connected"; 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 ( return (
<div className="app"> <div className="app">
{/* ---- 顶部导航栏 ---- */} {/* ---- 顶部导航栏 ---- */}
@@ -64,6 +97,21 @@ function App() {
{stats.queryCount} 次请求 · {stats.totalTokens} tokens {stats.queryCount} 次请求 · {stats.totalTokens} tokens
</span> </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}`}> <span className={`badge badge--${connectionStatus}`}>
{isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"} {isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
</span> </span>
@@ -93,6 +141,12 @@ function App() {
<div className="video-panel"> <div className="video-panel">
<div className="video-container"> <div className="video-container">
<VideoPreview ref={videoRef} isStreaming={!!stream} /> <VideoPreview ref={videoRef} isStreaming={!!stream} />
{isConnected && (
<div className="live-badge">
<span className="live-badge__dot" />
LIVE {formatTime(elapsed)}
</div>
)}
{config.detailLevel === "high" && ( {config.detailLevel === "high" && (
<div className="detail-badge">HD</div> <div className="detail-badge">HD</div>
)} )}