Merge pull request '添加计时器，麦克风，摄像头开关' (#45) from develop-frontend8 into develop 33分钟前 #46
@@ -143,6 +143,35 @@ body {
|
||||
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 {
|
||||
@@ -154,7 +183,7 @@ body {
|
||||
/* ---- 左侧视频面板 ---- */
|
||||
|
||||
.video-panel {
|
||||
width: 400px;
|
||||
width: 420px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -216,6 +245,31 @@ body {
|
||||
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--audio { left: auto; right: 16px; color: var(--color-primary); }
|
||||
.video-indicator--error { color: var(--color-error); animation: none; }
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user