feat: 前端 UI 国际化，支持中/英/日三语切换
之前语言设置只影响后端 AI 行为，前端 UI 文字始终为中文。 新增轻量 i18n 模块（React Context + 翻译字典），切换语言后所有 UI 文字即时刷新。 - 新增 i18n 核心模块和 zh-CN/en-US/ja-JP 翻译文件（约 72 个 key） - App.tsx 拆分为 App（Provider）+ AppContent（业务），确保 Hook 可访问 Context - 所有组件通过 useI18n().t() 获取翻译文本 - errors.ts 改为接受翻译函数参数 - storage.ts saveConfig 时派发事件通知 locale 变化
This commit is contained in:
@@ -2,17 +2,20 @@
|
||||
// CamTalk — 主应用组件（Web 端双栏布局）
|
||||
// ============================================================
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useVisionSession } from "./hooks/useVisionSession";
|
||||
import { VideoPreview } from "./components/VideoPreview";
|
||||
import { ChatPanel } from "./components/ChatPanel";
|
||||
import { ConfigPanel } from "./components/ConfigPanel";
|
||||
import { ToastContainer } from "./components/Toast";
|
||||
import { loadTheme, saveTheme } from "./lib/storage";
|
||||
import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
|
||||
import { I18nContext, parseLocale, t } from "./lib/i18n";
|
||||
import type { Locale } from "./lib/i18n";
|
||||
import type { Theme } from "./types";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
/** 内部组件，确保在 I18nContext.Provider 内部使用 useVisionSession */
|
||||
function AppContent() {
|
||||
const [showConfig, setShowConfig] = useState(false);
|
||||
const [theme, setTheme] = useState<Theme>(loadTheme);
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
@@ -88,28 +91,30 @@ function App() {
|
||||
return () => clearInterval(id);
|
||||
}, [isConnected]);
|
||||
|
||||
const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
{/* ---- 顶部导航栏 ---- */}
|
||||
<header className="header">
|
||||
<div className="header__left">
|
||||
<h1 className="header__title">CamTalk</h1>
|
||||
<span className="header__subtitle">AI 视觉对话助手</span>
|
||||
<span className="header__subtitle">{tr("app.title")}</span>
|
||||
</div>
|
||||
<div className="header__right">
|
||||
{isConnected && (stats.queryCount > 0 || stats.totalTokens > 0) && (
|
||||
<span className="header__stats">
|
||||
{stats.queryCount} 次请求 · {stats.totalTokens} tokens
|
||||
{stats.queryCount} {tr("app.stats.requests")} · {stats.totalTokens} tokens
|
||||
</span>
|
||||
)}
|
||||
<span className={`badge badge--${connectionStatus}`}>
|
||||
{isConnected ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
|
||||
{isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
|
||||
</span>
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => setShowConfig((v) => !v)}
|
||||
title="设置"
|
||||
aria-label="设置"
|
||||
title={tr("settings.title")}
|
||||
aria-label={tr("settings.title")}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
@@ -145,16 +150,16 @@ function App() {
|
||||
<div className="detail-badge">HD</div>
|
||||
)}
|
||||
{isObserving && (
|
||||
<div className="observation-badge">👁️ 观察中</div>
|
||||
<div className="observation-badge">{tr("video.observing")}</div>
|
||||
)}
|
||||
{isSpeaking && (
|
||||
<div className="video-indicator">🎤 正在聆听...</div>
|
||||
<div className="video-indicator">{tr("video.listening")}</div>
|
||||
)}
|
||||
{isAudioPlaying && config.ttsEnabled && (
|
||||
<div className="video-indicator video-indicator--audio">🔊 正在播放...</div>
|
||||
<div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
|
||||
)}
|
||||
{isConnected && !isVADReady && !vadError && (
|
||||
<div className="video-indicator video-indicator--loading">正在初始化语音检测...</div>
|
||||
<div className="video-indicator video-indicator--loading">{tr("video.initVad")}</div>
|
||||
)}
|
||||
{vadError && (
|
||||
<div className="video-indicator video-indicator--error">⚠️ {vadError}</div>
|
||||
@@ -170,7 +175,7 @@ function App() {
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
|
||||
<circle cx="12" cy="13" r="4" />
|
||||
</svg>
|
||||
<span>点击下方按钮开始对话</span>
|
||||
<span>{tr("video.clickToStart")}</span>
|
||||
</div>
|
||||
)}
|
||||
{isConnected && !isCameraOn && (
|
||||
@@ -179,8 +184,8 @@ function App() {
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
|
||||
<circle cx="12" cy="13" r="4" />
|
||||
</svg>
|
||||
<span>摄像头未开启</span>
|
||||
<span className="video-placeholder__hint">可在右侧聊天框打字对话</span>
|
||||
<span>{tr("video.cameraOff")}</span>
|
||||
<span className="video-placeholder__hint">{tr("video.cameraOff.hint")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -189,21 +194,21 @@ function App() {
|
||||
<div className="video-controls">
|
||||
{!isConnected ? (
|
||||
<button className="btn btn--primary btn--lg" onClick={startSession}>
|
||||
{connectionStatus === "connecting" ? "连接中..." : "🎙️ 开始对话"}
|
||||
{connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.start")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="video-controls__row">
|
||||
<button
|
||||
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
|
||||
onClick={toggleCamera}
|
||||
title={isCameraOn ? "关闭摄像头" : "开启摄像头"}
|
||||
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 ? "关闭麦克风" : "开启麦克风"}
|
||||
title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
@@ -211,15 +216,15 @@ function App() {
|
||||
className={`btn ${mode === "observation" ? "btn--active" : "btn--secondary"}`}
|
||||
onClick={toggleMode}
|
||||
>
|
||||
{mode === "observation" ? "👁️ 观察中" : "👁️ 观察模式"}
|
||||
{mode === "observation" ? tr("controls.observing") : tr("controls.observation")}
|
||||
</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>
|
||||
)}
|
||||
@@ -229,15 +234,15 @@ function App() {
|
||||
{/* 右侧：聊天面板 */}
|
||||
<div className="chat-panel-wrapper">
|
||||
<div className="chat-panel-header">
|
||||
<span>对话</span>
|
||||
<span>{tr("chat.title")}</span>
|
||||
{isConnected && mode === "observation" && (
|
||||
<span className="chat-panel-header__mode">观察模式</span>
|
||||
<span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="chat-panel-body">
|
||||
{connectionStatus === "disconnected" && messages.length > 0 && (
|
||||
<div className="system-message system-message--warning">
|
||||
连接已断开，正在重连...
|
||||
{tr("chat.reconnecting")}
|
||||
</div>
|
||||
)}
|
||||
<ChatPanel
|
||||
@@ -255,4 +260,30 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [locale, setLocale] = useState<Locale>(() => parseLocale(loadConfig().language));
|
||||
|
||||
const i18nValue = useMemo(() => ({
|
||||
locale,
|
||||
t: (key: string) => t(key, locale),
|
||||
}), [locale]);
|
||||
|
||||
// 监听配置变化以更新 locale
|
||||
useEffect(() => {
|
||||
const handler = () => {
|
||||
const cfg = loadConfig();
|
||||
setLocale(parseLocale(cfg.language));
|
||||
};
|
||||
// 自定义事件，由 saveConfig 触发
|
||||
window.addEventListener("camtalk-config-changed", handler);
|
||||
return () => window.removeEventListener("camtalk-config-changed", handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={i18nValue}>
|
||||
<AppContent />
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user