style: 样式优化
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
// ============================================================
|
||||
// CamTalk — 主应用组件（Web 端三栏布局：侧边栏 + 视频 + 聊天）
|
||||
// CamTalk — 主应用组件（Web 端两栏布局：视频 + 聊天）
|
||||
// 侧边栏为 overlay 抽屉式，不挤压主界面空间
|
||||
// ============================================================
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
@@ -16,12 +17,16 @@ import type { Locale } from "./lib/i18n";
|
||||
import type { Theme } from "./types";
|
||||
import "./App.css";
|
||||
|
||||
/** AI 视觉模式 */
|
||||
type VisionMode = "realtime" | "ondemand" | "chat";
|
||||
|
||||
/** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
|
||||
function AppContent() {
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [theme, setTheme] = useState<Theme>(loadTheme);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [visionMode, setVisionMode] = useState<VisionMode>("ondemand");
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// 切换主题时更新 <html> 的 data-theme 属性
|
||||
@@ -137,6 +142,7 @@ function AppContent() {
|
||||
if (connectionStatus === "connected") {
|
||||
stopSession();
|
||||
}
|
||||
setSidebarOpen(false);
|
||||
}, [createSession, setMessages, connectionStatus, stopSession]);
|
||||
|
||||
const handleSelectSession = useCallback((id: string) => {
|
||||
@@ -160,20 +166,56 @@ function AppContent() {
|
||||
}
|
||||
}, [deleteSession, activeSessionId, setMessages]);
|
||||
|
||||
// ---- 识别画面 ----
|
||||
const handleRecognize = useCallback(() => {
|
||||
if (isProcessing) return;
|
||||
sendTextMessage(tr("controls.recognize"));
|
||||
}, [isProcessing, sendTextMessage, tr]);
|
||||
|
||||
// ---- 场景卡片点击 ----
|
||||
const handleSceneCard = useCallback((prompt: string) => {
|
||||
sendTextMessage(prompt);
|
||||
}, [sendTextMessage]);
|
||||
|
||||
// ---- 键盘快捷键 ----
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
// Cmd/Ctrl+H: 打开/关闭历史侧边栏
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "h") {
|
||||
e.preventDefault();
|
||||
setSidebarOpen((v) => !v);
|
||||
}
|
||||
// Escape: 关闭侧边栏
|
||||
if (e.key === "Escape" && sidebarOpen) {
|
||||
setSidebarOpen(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [sidebarOpen]);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
{/* ---- 顶部导航栏 ---- */}
|
||||
<header className="header">
|
||||
<div className="header__left">
|
||||
{/* 侧边栏开关 */}
|
||||
<button
|
||||
className="header__menu-btn"
|
||||
onClick={() => setSidebarOpen((v) => !v)}
|
||||
title={tr("sidebar.expand")}
|
||||
aria-label={tr("sidebar.expand")}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="header__title">CamTalk</h1>
|
||||
<span className="header__subtitle">{tr("app.title")}</span>
|
||||
</div>
|
||||
<div className="header__right">
|
||||
{isConnected && stats.queryCount > 0 && (
|
||||
<span className="header__stats">
|
||||
{stats.queryCount} {tr("app.stats.requests")}
|
||||
</span>
|
||||
)}
|
||||
<span className={`badge badge--${connectionStatus}`}>
|
||||
{isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
|
||||
</span>
|
||||
@@ -191,6 +233,18 @@ function AppContent() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ---- 会话历史侧边栏（Overlay 抽屉式） ---- */}
|
||||
<SessionSidebar
|
||||
sessions={sessions}
|
||||
activeSessionId={activeSessionId}
|
||||
open={sidebarOpen}
|
||||
onToggle={() => setSidebarOpen((v) => !v)}
|
||||
onNewSession={handleNewSession}
|
||||
onSelectSession={handleSelectSession}
|
||||
onDeleteSession={handleDeleteSession}
|
||||
onRenameSession={renameSession}
|
||||
/>
|
||||
|
||||
{showConfig && (
|
||||
<ConfigPanel
|
||||
config={config}
|
||||
@@ -201,21 +255,9 @@ function AppContent() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ---- 主体：侧边栏 + 视频 + 聊天 ---- */}
|
||||
{/* ---- 主体：视频 + 聊天（两栏） ---- */}
|
||||
<div className="workspace">
|
||||
{/* 最左侧：会话历史侧边栏 */}
|
||||
<SessionSidebar
|
||||
sessions={sessions}
|
||||
activeSessionId={activeSessionId}
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggleCollapse={() => setSidebarCollapsed((v) => !v)}
|
||||
onNewSession={handleNewSession}
|
||||
onSelectSession={handleSelectSession}
|
||||
onDeleteSession={handleDeleteSession}
|
||||
onRenameSession={renameSession}
|
||||
/>
|
||||
|
||||
{/* 中间：视频预览 + 控制栏 */}
|
||||
{/* 左侧：视频预览 + 控制栏 */}
|
||||
<div className="video-panel">
|
||||
<div className="video-container">
|
||||
<VideoPreview ref={videoRef} isStreaming={!!stream} />
|
||||
@@ -228,8 +270,15 @@ function AppContent() {
|
||||
{config.detailLevel === "high" && (
|
||||
<div className="detail-badge">HD</div>
|
||||
)}
|
||||
{isObserving && (
|
||||
<div className="observation-badge">{tr("video.observing")}</div>
|
||||
{/* AI 视觉状态指示 */}
|
||||
{isConnected && visionMode !== "chat" && (
|
||||
<div className={`ai-vision-indicator ${isObserving ? "ai-vision-indicator--active" : ""}`}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
<span>{isObserving ? tr("video.observing") : "AI"}</span>
|
||||
</div>
|
||||
)}
|
||||
{isSpeaking && (
|
||||
<div className="video-indicator">{tr("video.listening")}</div>
|
||||
@@ -269,37 +318,110 @@ function AppContent() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 视频下方控制栏 */}
|
||||
{/* 视频下方控制区（三层结构） */}
|
||||
<div className="video-controls">
|
||||
{!isConnected ? (
|
||||
<button className="btn btn--primary btn--lg" onClick={startSession}>
|
||||
{connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="video-controls__row">
|
||||
<button
|
||||
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
|
||||
onClick={toggleCamera}
|
||||
title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
|
||||
>
|
||||
📷
|
||||
<>
|
||||
{/* 未连接态：主 CTA */}
|
||||
<button className="btn btn--primary btn--lg" onClick={startSession}>
|
||||
{connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
|
||||
onClick={toggleMic}
|
||||
title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
{isProcessing && (
|
||||
<button className="btn btn--warning" onClick={interrupt}>
|
||||
{tr("controls.interrupt")}
|
||||
{/* 设备选择器 */}
|
||||
<div className="video-controls__devices">
|
||||
<div className="device-select-wrapper">
|
||||
<label className="device-select-label">📷 {tr("controls.device.camera")}</label>
|
||||
<select className="device-select" defaultValue="default">
|
||||
<option value="default">{tr("controls.device.default")}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="device-select-wrapper">
|
||||
<label className="device-select-label">🎤 {tr("controls.device.mic")}</label>
|
||||
<select className="device-select" defaultValue="default">
|
||||
<option value="default">{tr("controls.device.default")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/* 模式切换器 */}
|
||||
<div className="video-controls__mode">
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("realtime")}
|
||||
>
|
||||
{tr("controls.mode.realtime")}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn--danger" onClick={stopSession}>
|
||||
{tr("controls.stop")}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("ondemand")}
|
||||
>
|
||||
{tr("controls.mode.ondemand")}
|
||||
</button>
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("chat")}
|
||||
>
|
||||
{tr("controls.mode.chat")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* 通话态：核心控制工具栏 */}
|
||||
<div className="video-controls__toolbar">
|
||||
<button
|
||||
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
|
||||
onClick={toggleCamera}
|
||||
title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
|
||||
>
|
||||
📷
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn--ctrl ${isMicOn ? "btn--ctrl-on" : "btn--ctrl-off"} ${isSpeaking ? "btn--speaking" : ""}`}
|
||||
onClick={toggleMic}
|
||||
title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
{/* 识别画面按钮（按需模式下显示） */}
|
||||
{visionMode === "ondemand" && (
|
||||
<button
|
||||
className="btn--recognize"
|
||||
onClick={handleRecognize}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
🔍 {tr("controls.recognize")}
|
||||
</button>
|
||||
)}
|
||||
{isProcessing && (
|
||||
<button className="btn btn--warning" onClick={interrupt}>
|
||||
{tr("controls.interrupt")}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn--danger" onClick={stopSession}>
|
||||
{tr("controls.stop")}
|
||||
</button>
|
||||
</div>
|
||||
{/* 通话态模式切换 */}
|
||||
<div className="video-controls__mode">
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("realtime")}
|
||||
>
|
||||
{tr("controls.mode.realtime")}
|
||||
</button>
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("ondemand")}
|
||||
>
|
||||
{tr("controls.mode.ondemand")}
|
||||
</button>
|
||||
<button
|
||||
className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
|
||||
onClick={() => setVisionMode("chat")}
|
||||
>
|
||||
{tr("controls.mode.chat")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -308,9 +430,18 @@ function AppContent() {
|
||||
<div className="chat-panel-wrapper">
|
||||
<div className="chat-panel-header">
|
||||
<span>{tr("chat.title")}</span>
|
||||
{isConnected && mode === "observation" && (
|
||||
<span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
|
||||
)}
|
||||
<div className="chat-panel-header__right">
|
||||
{isConnected && mode === "observation" && (
|
||||
<span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
|
||||
)}
|
||||
{isConnected && stats.queryCount > 0 && (
|
||||
<span className="chat-panel-header__stats">
|
||||
{stats.queryCount} {tr("statusbar.recognitions")}
|
||||
{stats.totalTokens > 0 && ` · ${stats.totalTokens.toLocaleString()} ${tr("statusbar.tokens")}`}
|
||||
{` · ${formatTime(elapsed)}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-panel-body">
|
||||
{connectionStatus === "disconnected" && messages.length > 0 && (
|
||||
@@ -322,7 +453,11 @@ function AppContent() {
|
||||
messages={messages}
|
||||
currentReply={currentReply}
|
||||
connectionStatus={connectionStatus}
|
||||
isMicOn={isMicOn}
|
||||
isSpeaking={isSpeaking}
|
||||
onSendText={sendTextMessage}
|
||||
onToggleMic={toggleMic}
|
||||
onSceneCard={handleSceneCard}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user