frontend/src/App.tsx

// ============================================================
// CamTalk — 主应用组件（Web 端两栏布局：视频 + 聊天）
// 侧边栏为 overlay 抽屉式，不挤压主界面空间
// ============================================================

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { useVisionSession } from "./hooks/useVisionSession";
import { useSessionList } from "./hooks/useSessionList";
import { useScenarios } from "./hooks/useScenarios";
import { VideoPreview } from "./components/VideoPreview";
import { ChatPanel } from "./components/ChatPanel";
import { ConfigPanel } from "./components/ConfigPanel";
import { SessionSidebar } from "./components/SessionSidebar";
import { ToastContainer } from "./components/Toast";
import { LandingPage } from "./components/LandingPage";
import { CreateScenarioModal } from "./components/CreateScenarioModal";
import { EditScenarioModal } from "./components/EditScenarioModal";
import { AuthProvider, useAuth } from "./lib/auth";
import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
import { I18nContext, parseLocale, t } from "./lib/i18n";
import { renderScenarioIconById } from "./lib/scenarioIcons";
import type { Locale } from "./lib/i18n";
import type { Theme } from "./types";
import type { UserScenario } from "./lib/api/scenarios";
import "./App.css";

// ---- 统一 SVG 图标系统（Feather-style，stroke-based） ----

const SVG_PROPS = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };

/** 系统情景 SVG 图标映射 */
function scenarioSvgIcon(id: string) {
  switch (id) {
    case "free_chat":
      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>);
    case "interviewer":
      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>);
    case "english_teacher":
      return (<svg {...SVG_PROPS}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>);
    case "debate":
      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h8"/><path d="M8 14h4"/></svg>);
    case "interpreter":
      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>);
    default:
      return null;
  }
}

/** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
function AppContent() {
  const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
  const [showConfig, setShowConfig] = useState(false);
  const [showCreateScenario, setShowCreateScenario] = useState(false);
  const [editingScenario, setEditingScenario] = useState<UserScenario | null>(null);
  const [theme, setTheme] = useState<Theme>(loadTheme);
  const [elapsed, setElapsed] = useState(0);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  // ---- 自建情景管理 ----
  const {
    allScenarios,
    createScenario,
    updateScenario,
    deleteScenario,
  } = useScenarios(accessToken);

  // 切换主题时更新 <html> 的 data-theme 属性
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  const handleThemeChange = useCallback((t: Theme) => {
    setTheme(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 {
    sessions,
    activeSessionId,
    isLoading: sessionsLoading,
    createSession,
    deleteSession,
    renameSession,
    selectSession,
    loadSessions,
  } = useSessionList(accessToken);

  // ---- 视觉会话 ----
  const {
    messages,
    setMessages,
    currentReply,
    isProcessing,
    isAudioPlaying,
    isSpeaking,
    isVADReady,
    vadError,
    connectionStatus,
    videoRef,
    stream,
    config,
    updateConfig,
    stats,
    startSession,
    stopSession,
    stopVideo,
    interrupt,
    isCameraOn,
    isMicOn,
    toggleCamera,
    toggleMic,
    sendTextMessage,
    cameras,
    mics,
    switchDevice,
  } = useVisionSession(accessToken, activeSessionId);

  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]);

  const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);

  // ---- 初始化：加载完成后如果没有会话，创建一个 ----
  const initializedRef = useRef(false);
  useEffect(() => {
    if (!sessionsLoading && !initializedRef.current) {
      initializedRef.current = true;
      if (sessions.length === 0) {
        createSession();
      }
    }
  }, [sessionsLoading, sessions.length, createSession]);

  // ---- 侧边栏打开时刷新会话列表 ----
  useEffect(() => {
    if (sidebarOpen) {
      loadSessions();
    }
  }, [sidebarOpen, loadSessions]);

  // ---- 侧边栏操作 ----
  const handleNewSession = useCallback(async () => {
    // 如果已连接，先断开
    if (connectionStatus === "connected") {
      await stopSession();
    }
    // 通过后端 API 创建会话
    await createSession();
    setMessages([]);
    setSidebarOpen(false);
  }, [createSession, setMessages, connectionStatus, stopSession]);

  const handleSelectSession = useCallback(async (id: string) => {
    // 如果已连接，先断开
    if (connectionStatus === "connected") {
      await stopSession();
    }
    // 从后端 API 加载目标会话的消息
    const loaded = await selectSession(id);
    setMessages(loaded);
    setSidebarOpen(false);
  }, [connectionStatus, stopSession, selectSession, setMessages]);

  const handleDeleteSession = useCallback(async (id: string) => {
    await deleteSession(id);
    if (id === activeSessionId) {
      // 断开连接并清空消息
      if (connectionStatus === "connected") {
        await stopSession();
      }
      setMessages([]);
    }
  }, [deleteSession, activeSessionId, setMessages, connectionStatus, stopSession]);

  // ---- 识别画面 ----
  const handleRecognize = useCallback(() => {
    if (isProcessing) return;
    sendTextMessage(tr("controls.recognize"));
  }, [isProcessing, sendTextMessage, tr]);

  // ---- 场景卡片点击 ----
  const handleSceneCard = useCallback((prompt: string) => {
    sendTextMessage(prompt);
  }, [sendTextMessage]);

  // ---- 情景选择 ----
  const handleSelectScenario = useCallback((scenarioId: string) => {
    const sc = allScenarios.find((s) => s.id === scenarioId);
    const updates: Partial<import("./types").SessionConfig> = { scenario: scenarioId };
    // 如果情景有默认语言，同步切换（仅系统预置情景）
    if (sc && !sc.isCustom) {
      const systemScenario = sc as any;
      if (systemScenario.defaultLanguage) {
        updates.language = systemScenario.defaultLanguage;
      }
    }
    updateConfig(updates);
    // 插入系统提示消息
    const scenarioName = sc
      ? `${sc.icon} ${sc.nameKey ? tr(sc.nameKey) : sc.name}`
      : scenarioId;
    setMessages(prev => [...prev, {
      id: uuidv4(),
      role: "system",
      content: tr("chat.scenarioSwitched").replace("{name}", scenarioName),
      timestamp: Date.now(),
    }]);
  }, [updateConfig, setMessages, tr]);

  // 当前情景对象
  const activeScenario = allScenarios.find((s) => s.id === (config.scenario || "free_chat")) || allScenarios[0];

  // ---- 键盘快捷键 ----
  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]);

  // Auth guard：未登录时显示登录页（放在所有 hooks 之后以遵守 Rules of Hooks）
  if (isLoading) {
    return (
      <div className="auth-page">
        <div className="auth-card" style={{ textAlign: "center", border: "none", background: "transparent", boxShadow: "none" }}>
          <p style={{ color: "var(--color-text-muted)", fontSize: "0.88rem" }}>Loading...</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return <LandingPage />;
  }

  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">
          <span className={`badge badge--${connectionStatus}`}>
            {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
          </span>
          <button
            className="btn-icon"
            onClick={() => setShowConfig((v) => !v)}
            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" />
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
            </svg>
          </button>
        </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}
          theme={theme}
          username={user?.username}
          allScenarios={allScenarios}
          onUpdate={updateConfig}
          onThemeChange={handleThemeChange}
          onLogout={logout}
          onClose={() => setShowConfig(false)}
          onCreateScenario={() => {
            setShowConfig(false);
            setShowCreateScenario(true);
          }}
          onEditScenario={(scenario) => {
            setShowConfig(false);
            setEditingScenario(scenario);
          }}
          onDeleteScenario={deleteScenario}
        />
      )}

      {/* 创建情景 Modal */}
      {showCreateScenario && (
        <CreateScenarioModal
          onClose={() => setShowCreateScenario(false)}
          onSubmit={async (data) => {
            await createScenario(data);
          }}
        />
      )}

      {/* 编辑情景 Modal */}
      {editingScenario && (
        <EditScenarioModal
          scenario={editingScenario}
          onClose={() => setEditingScenario(null)}
          onSubmit={async (id, data) => {
            await updateScenario(id, data);
          }}
        />
      )}

      {/* ---- 主体：视频 + 聊天（两栏） ---- */}
      <div className="workspace">
        {/* 左侧：视频预览 + 控制栏 */}
        <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>
            )}
            {/* AI 视觉状态指示 */}
            {isConnected && (
              <div className="ai-vision-indicator">
                <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>AI</span>
              </div>
            )}
            {isSpeaking && (
              <div className="video-indicator">{tr("video.listening")}</div>
            )}
            {isAudioPlaying && config.ttsEnabled && (
              <div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
            )}
            {vadError && (
              <div className="video-indicator video-indicator--error"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> {vadError}</div>
            )}
            {!isConnected && !stream && (
              <div className="video-placeholder">
                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
                  <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>{tr("video.placeholder")}</span>
              </div>
            )}
            {isConnected && !isCameraOn && (
              <div className="video-placeholder">
                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
                  <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>{tr("video.cameraOff")}</span>
                <span className="video-placeholder__hint">{tr("video.cameraOff.hint")}</span>
              </div>
            )}
          </div>

          {/* ---- 情景选择芯片条（视频下方） ---- */}
          <div className="scenario-strip">
            <span className="scenario-strip__label">{tr("settings.scenario")}</span>
            <div className="scenario-strip__scroll">
              {allScenarios.map((sc) => (
                <button
                  key={sc.id}
                  className={`scenario-chip ${config.scenario === sc.id ? "scenario-chip--active" : ""}`}
                  onClick={() => handleSelectScenario(sc.id)}
                  title={sc.description ? sc.description : sc.descKey ? tr(sc.descKey) : sc.name}
                >
                  <span className="scenario-chip__icon">
                    {scenarioSvgIcon(sc.id) || renderScenarioIconById(sc.icon, 14) || sc.icon}
                  </span>
                  <span className="scenario-chip__name">{sc.nameKey ? tr(sc.nameKey) : sc.name}</span>
                </button>
              ))}
              {/* 新建情景快捷入口 */}
              <button
                className="scenario-chip scenario-chip--add"
                onClick={() => setShowCreateScenario(true)}
                title={tr("scenario.create.button")}
              >
                <span className="scenario-chip__icon">
                  <svg {...SVG_PROPS}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                </span>
                <span className="scenario-chip__name">{tr("scenario.createChip")}</span>
              </button>
            </div>
          </div>

          {/* 视频下方控制区（三层结构） */}
          <div className="video-controls">
            {!isConnected ? (
              <>
                {/* 未连接态：主 CTA */}
                <button className="btn btn--primary btn--lg" onClick={startSession}>
                  {connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
                </button>
              </>
            ) : isCameraOn ? (
              <>
                {/* 视频通话态：核心控制工具栏 */}
                <div className="video-controls__toolbar">
                  <button
                    className={`btn-ctrl-round ${isCameraOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"}`}
                    onClick={toggleCamera}
                    title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      {isCameraOn ? (
                        <>
                          <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" />
                        </>
                      ) : (
                        <>
                          <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" />
                          <line x1="1" y1="1" x2="23" y2="23" />
                        </>
                      )}
                    </svg>
                  </button>
                  <button
                    className={`btn-ctrl-round ${isMicOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"} ${isSpeaking ? "btn-ctrl-round--speaking" : ""}`}
                    onClick={toggleMic}
                    title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      {isMicOn ? (
                        <>
                          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
                          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
                          <line x1="12" y1="19" x2="12" y2="23" />
                          <line x1="8" y1="23" x2="16" y2="23" />
                        </>
                      ) : (
                        <>
                          <line x1="1" y1="1" x2="23" y2="23" />
                          <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
                          <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.12 1.49-.34 2.17" />
                          <line x1="12" y1="19" x2="12" y2="23" />
                          <line x1="8" y1="23" x2="16" y2="23" />
                        </>
                      )}
                    </svg>
                  </button>
                  <button
                    className="btn-ctrl-pill btn-ctrl-pill--recognize"
                    onClick={handleRecognize}
                    disabled={isProcessing}
                  >
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <circle cx="11" cy="11" r="8" />
                      <line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                    {tr("controls.recognize")}
                  </button>
                  {isProcessing && (
                    <button className="btn-ctrl-pill btn-ctrl-pill--interrupt" onClick={interrupt}>
                      {tr("controls.interrupt")}
                    </button>
                  )}
                  <button className="btn-ctrl-pill btn-ctrl-pill--stop" onClick={stopVideo}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="6" y="6" width="12" height="12" rx="2" />
                    </svg>
                    {tr("controls.stopVideo")}
                  </button>
                </div>
                {/* 设备选择器 */}
                <div className="video-controls__devices">
                  <div className="device-select-wrapper">
                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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></label>
                    <select
                      className="device-select"
                      value={config.cameraDeviceId || "default"}
                      onChange={(e) => switchDevice("camera", e.target.value === "default" ? "" : e.target.value)}
                    >
                      <option value="default">{tr("controls.device.default")}</option>
                      {cameras.map((d) => (
                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
                      ))}
                    </select>
                  </div>
                  <div className="device-select-wrapper">
                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></label>
                    <select
                      className="device-select"
                      value={config.micDeviceId || "default"}
                      onChange={(e) => switchDevice("mic", e.target.value === "default" ? "" : e.target.value)}
                    >
                      <option value="default">{tr("controls.device.default")}</option>
                      {mics.map((d) => (
                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
                      ))}
                    </select>
                  </div>
                </div>
              </>
            ) : (
              <>
                {/* 文字对话态：视频已结束 */}
                <div className="video-controls__text-only">
                  <div className="video-ended-hint">
                    <span className="video-ended-hint__title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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> {tr("video.ended")}</span>
                    <span className="video-ended-hint__sub">{tr("video.ended.hint")}</span>
                  </div>
                  <div className="video-controls__toolbar">
                    <button className="btn btn--primary" onClick={startSession}>
                      {tr("controls.resumeVideo")}
                    </button>
                    <button className="btn btn--danger btn--outline" onClick={stopSession}>
                      {tr("controls.endSession")}
                    </button>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>

        {/* 右侧：聊天面板 */}
        <div className="chat-panel-wrapper">
          <div className="chat-panel-header">
            <span>{tr("chat.title")}</span>
            <div className="chat-panel-header__right">
              {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 && (
              <div className="system-message system-message--warning">
                {tr("chat.reconnecting")}
              </div>
            )}
            <ChatPanel
              messages={messages}
              currentReply={currentReply}
              connectionStatus={connectionStatus}
              currentScenario={config.scenario}
              isProcessing={isProcessing}
              isVADReady={isVADReady}
              vadError={vadError ?? undefined}
              isCameraOn={isCameraOn}
              isMicOn={isMicOn}
              isSpeaking={isSpeaking}
              onSendText={sendTextMessage}
              onToggleMic={toggleMic}
              onSceneCard={handleSceneCard}
              onSelectScenario={handleSelectScenario}
            />
          </div>
        </div>
      </div>

      <ToastContainer />
    </div>
  );
}

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}>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
    </I18nContext.Provider>
  );
}

export default App;
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								// ============================================================
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								// CamTalk — 主应用组件（Web 端两栏布局：视频 + 聊天）
 								// 侧边栏为 overlay 抽屉式，不挤压主界面空间
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								// ============================================================
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								import { v4 as uuidv4 } from "uuid";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import { useVisionSession } from "./hooks/useVisionSession";
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								import { useSessionList } from "./hooks/useSessionList";
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								import { useScenarios } from "./hooks/useScenarios";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import { VideoPreview } from "./components/VideoPreview";
 								import { ChatPanel } from "./components/ChatPanel";
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								import { ConfigPanel } from "./components/ConfigPanel";
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								import { SessionSidebar } from "./components/SessionSidebar";
-												feat: 完善端到端对话闭环，增强消息渲染与错误处理

- ChatPanel：流式光标动画、token/延迟元数据、自动滚动、三种空状态
- Toast 组件：错误码映射为中文友好文案，3 秒自动消失
- useVisionSession：stt_result 流式更新、防重复发送、打断保存未完成内容、结束清理全部状态
- App：断线提示、视频 loading 遮罩、按钮连接中状态
- ChatMessage 增加 latencyMs、model 字段

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:43:16 +08:00
+								import { ToastContainer } from "./components/Toast";
-												feat：增加首页登录页面

											
										
										
											2026-06-20 17:35:14 +08:00
+								import { LandingPage } from "./components/LandingPage";
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								import { CreateScenarioModal } from "./components/CreateScenarioModal";
 								import { EditScenarioModal } from "./components/EditScenarioModal";
-												feat: 实现前端认证系统，WebSocket 连接携带 JWT token

- 新增 AuthContext/AuthProvider：登录/注册状态管理，JWT 自动刷新
- 新增 AuthPage 组件：登录/注册表单，支持模式切换和前端校验
- 新增 api.ts：封装 auth REST API 客户端（register/login/refresh/logout）
- WebSocket 连接时拼接 ?token=<jwt>，重连自动携带
- useVisionSession 接受 accessToken 参数并透传
- App.tsx 包裹 AuthProvider，未登录时显示登录页
- storage.ts 新增 token/user 的 localStorage 存储
- i18n 新增中/英/日三语 auth 翻译
- App.css 新增 auth 页面和用户 badge 样式

											
										
										
											2026-06-14 18:38:45 +08:00
+								import { AuthProvider, useAuth } from "./lib/auth";
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
 								import { I18nContext, parseLocale, t } from "./lib/i18n";
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								import { renderScenarioIconById } from "./lib/scenarioIcons";
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								import type { Locale } from "./lib/i18n";
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								import type { Theme } from "./types";
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								import type { UserScenario } from "./lib/api/scenarios";
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								import "./App.css";
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								// ---- 统一 SVG 图标系统（Feather-style，stroke-based） ----
 								const SVG_PROPS = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
 								/** 系统情景 SVG 图标映射 */
 								function scenarioSvgIcon(id: string) {
 								  switch (id) {
 								    case "free_chat":
 								      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>);
 								    case "interviewer":
 								      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>);
 								    case "english_teacher":
 								      return (<svg {...SVG_PROPS}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>);
 								    case "debate":
 								      return (<svg {...SVG_PROPS}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h8"/><path d="M8 14h4"/></svg>);
 								    case "interpreter":
 								      return (<svg {...SVG_PROPS}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>);
 								    default:
 								      return null;
 								  }
 								}
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								/** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								function AppContent() {
-												feat: 实现前端认证系统，WebSocket 连接携带 JWT token

- 新增 AuthContext/AuthProvider：登录/注册状态管理，JWT 自动刷新
- 新增 AuthPage 组件：登录/注册表单，支持模式切换和前端校验
- 新增 api.ts：封装 auth REST API 客户端（register/login/refresh/logout）
- WebSocket 连接时拼接 ?token=<jwt>，重连自动携带
- useVisionSession 接受 accessToken 参数并透传
- App.tsx 包裹 AuthProvider，未登录时显示登录页
- storage.ts 新增 token/user 的 localStorage 存储
- i18n 新增中/英/日三语 auth 翻译
- App.css 新增 auth 页面和用户 badge 样式

											
										
										
											2026-06-14 18:38:45 +08:00
+								  const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								  const [showConfig, setShowConfig] = useState(false);
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								  const [showCreateScenario, setShowCreateScenario] = useState(false);
 								  const [editingScenario, setEditingScenario] = useState<UserScenario | null>(null);
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								  const [theme, setTheme] = useState<Theme>(loadTheme);
-												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
+								  const [elapsed, setElapsed] = useState(0);
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								  const [sidebarOpen, setSidebarOpen] = useState(false);
-												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
+								  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								  // ---- 自建情景管理 ----
 								  const {
 								    allScenarios,
 								    createScenario,
 								    updateScenario,
 								    deleteScenario,
 								  } = useScenarios(accessToken);
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								  // 切换主题时更新 <html> 的 data-theme 属性
 								  useEffect(() => {
 								    document.documentElement.setAttribute("data-theme", theme);
 								  }, [theme]);
 								  const handleThemeChange = useCallback((t: Theme) => {
 								    setTheme(t);
 								    saveTheme(t);
 								  }, []);
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
-												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
+								  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")}`;
 								  };
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  // ---- 会话列表 ----
 								  const {
 								    sessions,
 								    activeSessionId,
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    isLoading: sessionsLoading,
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    createSession,
 								    deleteSession,
 								    renameSession,
 								    selectSession,
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    loadSessions,
 								  } = useSessionList(accessToken);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
 								  // ---- 视觉会话 ----
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								  const {
 								    messages,
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    setMessages,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    currentReply,
 								    isProcessing,
-												feat: 实现 TTS 语音播放，完成 MVP P0 全部用户故事

- 新增 TTSPlayer：收集流式 tts_audio 片段，is_last 时拼接解码播放
- useVisionSession 接入 TTS 播放器，interrupt/stopSession 时停止播放
- App 显示 '🔊 正在播放...' 指示器
- MVP P0 四个用户故事前端全部实现（US-01 ~ US-04）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 13:57:36 +08:00
+								    isAudioPlaying,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    isSpeaking,
-												feat: 集成 VAD 语音活动检测，打通核心交互链路

- 重写 useVAD Hook，接入 @ricky0123/vad-web 的 MicVAD
- 支持 onSpeechStart/onSpeechEnd/onVADMisfire 回调
- useVisionSession 中串联摄像头→麦克风→WebSocket→VAD 完整流程
- App.tsx 新增 VAD 加载中和错误状态的 UI 指示
- VAD 参数对齐设计文档：positiveSpeechThreshold=0.5, minSpeechMs=250

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:10:29 +08:00
+								    isVADReady,
 								    vadError,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    connectionStatus,
 								    videoRef,
 								    stream,
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								    config,
 								    updateConfig,
-												feat: 实现关键帧检测与成本控制

- EdgeProcessor：sampleFrame 降采样 160x120 + compareFrames 像素差异对比
- 重复画面跳过：similarity > 0.9 时不发送 query
- 混合采样策略：静默 5s / 用户说话 1s（docs/08-成本控制.md）
- 请求统计：queryCount + totalTokens 实时显示
- App 状态栏显示成本统计

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:38:15 +08:00
+								    stats,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    startSession,
 								    stopSession,
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								    stopVideo,
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    interrupt,
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								    isCameraOn,
 								    isMicOn,
 								    toggleCamera,
 								    toggleMic,
-												feat: 添加文字输入对话功能

- 后端 WsQuery 添加 text 字段，支持文本输入模式
- Pipeline 支持文本查询时跳过 STT 直接使用输入文本
- 前端 ChatPanel 添加文字输入框，连接状态下可用
- useVisionSession 添加 sendTextMessage 方法
- 更新接口文档，添加文本输入模式说明

											
										
										
											2026-06-14 12:52:39 +08:00
+								    sendTextMessage,
-												feat: 实现摄像头和麦克风设备选择功能

- 新增 useDeviceList hook，枚举音视频输入设备并监听热插拔
- CameraManager/MicManager 的 startCamera/startMic 支持可选 deviceId 参数
- useVisionSession 集成设备选择：授权后自动枚举、切换设备时热重启
- 连接后显示设备下拉选择器，未连接时隐藏（避免未授权时空列表）
- SessionConfig 新增 cameraDeviceId/micDeviceId 持久化到 localStorage

											
										
										
											2026-06-21 16:49:48 +08:00
+								    cameras,
 								    mics,
 								    switchDevice,
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  } = useVisionSession(accessToken, activeSessionId);
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
-												feat: 集成 VAD 语音活动检测，打通核心交互链路

- 重写 useVAD Hook，接入 @ricky0123/vad-web 的 MicVAD
- 支持 onSpeechStart/onSpeechEnd/onVADMisfire 回调
- useVisionSession 中串联摄像头→麦克风→WebSocket→VAD 完整流程
- App.tsx 新增 VAD 加载中和错误状态的 UI 指示
- VAD 参数对齐设计文档：positiveSpeechThreshold=0.5, minSpeechMs=250

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:10:29 +08:00
+								  const isConnected = connectionStatus === "connected";
-												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
+								  // 连接计时器
 								  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]);
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								  const { t: tr } = useMemo(() => ({ t: (key: string) => t(key, parseLocale(config.language)) }), [config.language]);
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  // ---- 初始化：加载完成后如果没有会话，创建一个 ----
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  const initializedRef = useRef(false);
 								  useEffect(() => {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    if (!sessionsLoading && !initializedRef.current) {
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								      initializedRef.current = true;
 								      if (sessions.length === 0) {
 								        createSession();
 								      }
 								    }
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  }, [sessionsLoading, sessions.length, createSession]);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  // ---- 侧边栏打开时刷新会话列表 ----
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  useEffect(() => {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    if (sidebarOpen) {
 								      loadSessions();
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    }
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  }, [sidebarOpen, loadSessions]);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
 								  // ---- 侧边栏操作 ----
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  const handleNewSession = useCallback(async () => {
 								    // 如果已连接，先断开
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    if (connectionStatus === "connected") {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								      await stopSession();
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    }
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    // 通过后端 API 创建会话
 								    await createSession();
 								    setMessages([]);
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								    setSidebarOpen(false);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								  }, [createSession, setMessages, connectionStatus, stopSession]);
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  const handleSelectSession = useCallback(async (id: string) => {
 								    // 如果已连接，先断开
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    if (connectionStatus === "connected") {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								      await stopSession();
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    }
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    // 从后端 API 加载目标会话的消息
 								    const loaded = await selectSession(id);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    setMessages(loaded);
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								    setSidebarOpen(false);
 								  }, [connectionStatus, stopSession, selectSession, setMessages]);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  const handleDeleteSession = useCallback(async (id: string) => {
 								    await deleteSession(id);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								    if (id === activeSessionId) {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								      // 断开连接并清空消息
 								      if (connectionStatus === "connected") {
 								        await stopSession();
 								      }
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
+								      setMessages([]);
 								    }
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								  }, [deleteSession, activeSessionId, setMessages, connectionStatus, stopSession]);
-												feat: 新增会话历史侧边栏，支持新建/切换/删除/重命名会话

类似 ChatGPT 的侧边栏布局，消息历史持久化到 localStorage。

- 新增 SessionSummary 类型和 localStorage 读写函数
- 新增 useSessionList Hook 管理会话列表 CRUD
- 新增 SessionSidebar 组件（展开/折叠、行内重命名）
- App.tsx 协调 useSessionList 和 useVisionSession
- 消息变化时自动持久化，切换/新建会话时保存并加载
- 新增 i18n 翻译 key（中/英/日）

											
										
										
											2026-06-14 15:44:25 +08:00
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								  // ---- 识别画面 ----
 								  const handleRecognize = useCallback(() => {
 								    if (isProcessing) return;
 								    sendTextMessage(tr("controls.recognize"));
 								  }, [isProcessing, sendTextMessage, tr]);
 								  // ---- 场景卡片点击 ----
 								  const handleSceneCard = useCallback((prompt: string) => {
 								    sendTextMessage(prompt);
 								  }, [sendTextMessage]);
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								  // ---- 情景选择 ----
 								  const handleSelectScenario = useCallback((scenarioId: string) => {
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								    const sc = allScenarios.find((s) => s.id === scenarioId);
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								    const updates: Partial<import("./types").SessionConfig> = { scenario: scenarioId };
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								    // 如果情景有默认语言，同步切换（仅系统预置情景）
 								    if (sc && !sc.isCustom) {
 								      const systemScenario = sc as any;
 								      if (systemScenario.defaultLanguage) {
 								        updates.language = systemScenario.defaultLanguage;
 								      }
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								    }
 								    updateConfig(updates);
 								    // 插入系统提示消息
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								    const scenarioName = sc
 								      ? `${sc.icon} ${sc.nameKey ? tr(sc.nameKey) : sc.name}`
 								      : scenarioId;
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								    setMessages(prev => [...prev, {
-												feat: 优化对话历史功能

											
										
										
											2026-06-20 19:57:36 +08:00
+								      id: uuidv4(),
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								      role: "system",
 								      content: tr("chat.scenarioSwitched").replace("{name}", scenarioName),
 								      timestamp: Date.now(),
 								    }]);
 								  }, [updateConfig, setMessages, tr]);
 								  // 当前情景对象
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								  const activeScenario = allScenarios.find((s) => s.id === (config.scenario || "free_chat")) || allScenarios[0];
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								  // ---- 键盘快捷键 ----
 								  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]);
-												feat: 实现前端认证系统，WebSocket 连接携带 JWT token

- 新增 AuthContext/AuthProvider：登录/注册状态管理，JWT 自动刷新
- 新增 AuthPage 组件：登录/注册表单，支持模式切换和前端校验
- 新增 api.ts：封装 auth REST API 客户端（register/login/refresh/logout）
- WebSocket 连接时拼接 ?token=<jwt>，重连自动携带
- useVisionSession 接受 accessToken 参数并透传
- App.tsx 包裹 AuthProvider，未登录时显示登录页
- storage.ts 新增 token/user 的 localStorage 存储
- i18n 新增中/英/日三语 auth 翻译
- App.css 新增 auth 页面和用户 badge 样式

											
										
										
											2026-06-14 18:38:45 +08:00
+								  // Auth guard：未登录时显示登录页（放在所有 hooks 之后以遵守 Rules of Hooks）
 								  if (isLoading) {
 								    return (
 								      <div className="auth-page">
 								        <div className="auth-card" style={{ textAlign: "center", border: "none", background: "transparent", boxShadow: "none" }}>
 								          <p style={{ color: "var(--color-text-muted)", fontSize: "0.88rem" }}>Loading...</p>
 								        </div>
 								      </div>
 								    );
 								  }
 								  if (!isAuthenticated) {
-												feat：增加首页登录页面

											
										
										
											2026-06-20 17:35:14 +08:00
+								    return <LandingPage />;
-												feat: 实现前端认证系统，WebSocket 连接携带 JWT token

- 新增 AuthContext/AuthProvider：登录/注册状态管理，JWT 自动刷新
- 新增 AuthPage 组件：登录/注册表单，支持模式切换和前端校验
- 新增 api.ts：封装 auth REST API 客户端（register/login/refresh/logout）
- WebSocket 连接时拼接 ?token=<jwt>，重连自动携带
- useVisionSession 接受 accessToken 参数并透传
- App.tsx 包裹 AuthProvider，未登录时显示登录页
- storage.ts 新增 token/user 的 localStorage 存储
- i18n 新增中/英/日三语 auth 翻译
- App.css 新增 auth 页面和用户 badge 样式

											
										
										
											2026-06-14 18:38:45 +08:00
+								  }
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								  return (
 								    <div className="app">
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								      {/* ---- 顶部导航栏 ---- */}
 								      <header className="header">
 								        <div className="header__left">
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								          {/* 侧边栏开关 */}
 								          <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>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          <h1 className="header__title">CamTalk</h1>
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								          <span className="header__subtitle">{tr("app.title")}</span>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        </div>
 								        <div className="header__right">
 								          <span className={`badge badge--${connectionStatus}`}>
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          </span>
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          <button
 								            className="btn-icon"
 								            onClick={() => setShowConfig((v) => !v)}
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            title={tr("settings.title")}
 								            aria-label={tr("settings.title")}
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          >
-												feat：样式美化

											
										
										
											2026-06-14 10:18:36 +08:00
+								            <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" />
 								              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
 								            </svg>
-												refactor: 设置面板改为右侧抽屉，修复布局跳动问题

- ConfigPanel 重写为 Drawer：右侧 320px 滑入面板 + 半透明遮罩
- 设置按钮始终可见，不依赖连接状态
- 抽屉不推挤主布局，点击遮罩或✕关闭
- 设置项分组显示，带功能描述文案

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:54:57 +08:00
+								          </button>
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								        </div>
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								      </header>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								      {/* ---- 会话历史侧边栏（Overlay 抽屉式） ---- */}
 								      <SessionSidebar
 								        sessions={sessions}
 								        activeSessionId={activeSessionId}
 								        open={sidebarOpen}
 								        onToggle={() => setSidebarOpen((v) => !v)}
 								        onNewSession={handleNewSession}
 								        onSelectSession={handleSelectSession}
 								        onDeleteSession={handleDeleteSession}
 								        onRenameSession={renameSession}
 								      />
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								      {showConfig && (
 								        <ConfigPanel
 								          config={config}
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								          theme={theme}
-												refactor: 将退出登录功能从顶部导航栏移至设置面板

											
										
										
											2026-06-14 18:42:47 +08:00
+								          username={user?.username}
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								          allScenarios={allScenarios}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          onUpdate={updateConfig}
-												feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light）
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组，主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 17:08:56 +08:00
+								          onThemeChange={handleThemeChange}
-												refactor: 将退出登录功能从顶部导航栏移至设置面板

											
										
										
											2026-06-14 18:42:47 +08:00
+								          onLogout={logout}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								          onClose={() => setShowConfig(false)}
-												feat: 实现自建情景功能

## 功能概述
- 用户可创建、编辑、删除自定义情景
- 支持自定义情景名称、图标、描述、Prompt、首句引导
- 完整的权限隔离，用户只能管理自己的情景
- 深度集成 Eino 框架，动态加载自建情景 Prompt

## 后端实现
### 数据库
- 新增 user_scenarios 表
- 支持用户配额（最多 20 个）
- 字段验证：description 可选，prompt 最小 10 字符

### API
- GET /api/scenarios - 获取用户情景列表
- POST /api/scenarios - 创建情景
- GET /api/scenarios/:id - 获取详情
- PATCH /api/scenarios/:id - 更新情景
- DELETE /api/scenarios/:id - 删除情景

### Eino 集成
- PipelineState 添加 UserID 字段
- nodes_history 动态加载用户自建情景
- GetScenarioPrompt 支持自建情景优先级

## 前端实现
### 组件
- CreateScenarioModal - 创建情景对话框
- EditScenarioModal - 编辑情景对话框
- ConfigPanel 改造 - 分组显示系统预置和自建情景

### Hook
- useScenarios - 合并系统和自建情景，提供 CRUD 接口

### 国际化
- 中文、英文、日文翻译支持

## 问题修复
- 修复 CORS 问题：使用 Vite 代理
- 统一验证规则：description 可选，prompt 最小 10 字符
- 修复数据库约束：使用 NULLIF 处理空字符串

## 文件变更
新增文件: 13 个
修改文件: 14 个

详见文档: docs/自建情景功能完整文档.md

											
										
										
											2026-06-21 15:38:28 +08:00
+								          onCreateScenario={() => {
 								            setShowConfig(false);
 								            setShowCreateScenario(true);
 								          }}
 								          onEditScenario={(scenario) => {
 								            setShowConfig(false);
 								            setEditingScenario(scenario);
 								          }}
 								          onDeleteScenario={deleteScenario}
 								        />
 								      )}
 								      {/* 创建情景 Modal */}
 								      {showCreateScenario && (
 								        <CreateScenarioModal
 								          onClose={() => setShowCreateScenario(false)}
 								          onSubmit={async (data) => {
 								            await createScenario(data);
 								          }}
 								        />
 								      )}
 								      {/* 编辑情景 Modal */}
 								      {editingScenario && (
 								        <EditScenarioModal
 								          scenario={editingScenario}
 								          onClose={() => setEditingScenario(null)}
 								          onSubmit={async (id, data) => {
 								            await updateScenario(id, data);
 								          }}
-												feat: 实现会话配置与多轮上下文

- 新增 ConfigPanel 组件：TTS 开关、detail level、语言选择
- 新增 storage.ts：配置持久化到 localStorage
- useVisionSession：连接后自动发送 config，维护最近 10 轮对话历史
- App：齿轮按钮展开配置面板，HD 角标，TTS 播放联动 ttsEnabled

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:19:47 +08:00
+								        />
 								      )}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								      {/* ---- 主体：视频 + 聊天（两栏） ---- */}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								      <div className="workspace">
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								        {/* 左侧：视频预览 + 控制栏 */}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        <div className="video-panel">
 								          <div className="video-container">
 								            <VideoPreview ref={videoRef} isStreaming={!!stream} />
-												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
+								            {isConnected && (
 								              <div className="live-badge">
 								                <span className="live-badge__dot" />
 								                LIVE {formatTime(elapsed)}
 								              </div>
 								            )}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            {config.detailLevel === "high" && (
 								              <div className="detail-badge">HD</div>
 								            )}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								            {/* AI 视觉状态指示 */}
-												refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分，后端无感知，实际使用中价值不大：
- 纯聊天模式名不副实（VAD 仍附带摄像头帧）
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为：语音带图 + 手动识别按钮，UI 更简洁。

											
										
										
											2026-06-21 16:24:09 +08:00
+								            {isConnected && (
 								              <div className="ai-vision-indicator">
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                <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>
-												refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分，后端无感知，实际使用中价值不大：
- 纯聊天模式名不副实（VAD 仍附带摄像头帧）
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为：语音带图 + 手动识别按钮，UI 更简洁。

											
										
										
											2026-06-21 16:24:09 +08:00
+								                <span>AI</span>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              </div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {isSpeaking && (
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="video-indicator">{tr("video.listening")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {isAudioPlaying && config.ttsEnabled && (
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								              <div className="video-indicator video-indicator--audio">{tr("video.playing")}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {vadError && (
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								              <div className="video-indicator video-indicator--error"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> {vadError}</div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								            {!isConnected && !stream && (
 								              <div className="video-placeholder">
-												feat：样式美化

											
										
										
											2026-06-14 10:18:36 +08:00
+								                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
 								                  <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>
-												feat: 聊天框与视频功能解耦，输入文字即可开始对话

之前必须点击「开始对话」连接 WebSocket 后才能使用聊天框。
现在聊天输入框始终可用，输入文字自动连接 WebSocket 并发送消息；
左侧按钮改为「开始视频通话」，单独控制摄像头/麦克风。

- ChatPanel 移除 !isConnected early return，始终显示输入框
- useVisionSession 新增待发消息队列，sendTextMessage 支持自动连接
- startSession 改为仅负责视频（摄像头 + 麦克风 + VAD）
- 修复 statusRef 在 useWebSocketManager 之前声明导致的 TDZ 错误
- 更新 i18n 翻译（新增 controls.startVideo、video.placeholder）

											
										
										
											2026-06-14 15:07:39 +08:00
+								                <span>{tr("video.placeholder")}</span>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								              </div>
 								            )}
-												feat: 支持无摄像头/麦克风模式打字聊天

- 修改 startSession 逻辑，摄像头和麦克风为可选
- 连接成功后始终显示聊天输入框
- 更新 UI 提示文字，引导用户打字对话

											
										
										
											2026-06-14 13:13:29 +08:00
+								            {isConnected && !isCameraOn && (
 								              <div className="video-placeholder">
 								                <svg className="video-placeholder__icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
 								                  <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>
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                <span>{tr("video.cameraOff")}</span>
 								                <span className="video-placeholder__hint">{tr("video.cameraOff.hint")}</span>
-												feat: 支持无摄像头/麦克风模式打字聊天

- 修改 startSession 逻辑，摄像头和麦克风为可选
- 连接成功后始终显示聊天输入框
- 更新 UI 提示文字，引导用户打字对话

											
										
										
											2026-06-14 13:13:29 +08:00
+								              </div>
 								            )}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          </div>
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
-												refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

											
										
										
											2026-06-21 23:23:22 +08:00
+								          {/* ---- 情景选择芯片条（视频下方） ---- */}
 								          <div className="scenario-strip">
 								            <span className="scenario-strip__label">{tr("settings.scenario")}</span>
 								            <div className="scenario-strip__scroll">
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								              {allScenarios.map((sc) => (
 								                <button
 								                  key={sc.id}
-												refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

											
										
										
											2026-06-21 23:23:22 +08:00
+								                  className={`scenario-chip ${config.scenario === sc.id ? "scenario-chip--active" : ""}`}
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                  onClick={() => handleSelectScenario(sc.id)}
 								                  title={sc.description ? sc.description : sc.descKey ? tr(sc.descKey) : sc.name}
 								                >
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								                  <span className="scenario-chip__icon">
 								                    {scenarioSvgIcon(sc.id) || renderScenarioIconById(sc.icon, 14) || sc.icon}
 								                  </span>
-												refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

											
										
										
											2026-06-21 23:23:22 +08:00
+								                  <span className="scenario-chip__name">{sc.nameKey ? tr(sc.nameKey) : sc.name}</span>
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                </button>
 								              ))}
-												refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

											
										
										
											2026-06-21 23:23:22 +08:00
+								              {/* 新建情景快捷入口 */}
 								              <button
 								                className="scenario-chip scenario-chip--add"
 								                onClick={() => setShowCreateScenario(true)}
 								                title={tr("scenario.create.button")}
 								              >
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								                <span className="scenario-chip__icon">
 								                  <svg {...SVG_PROPS}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
 								                </span>
-												refactor: 情景选择从卡片网格改为横向滚动芯片条

- 将 scenario-picker 网格布局改为 scenario-strip 横向滚动芯片条
- 新增「新建情景」快捷入口芯片（+按钮）
- 新增 scenario.createChip 三语言翻译键

											
										
										
											2026-06-21 23:23:22 +08:00
+								                <span className="scenario-chip__name">{tr("scenario.createChip")}</span>
 								              </button>
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								            </div>
 								          </div>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								          {/* 视频下方控制区（三层结构） */}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          <div className="video-controls">
 								            {!isConnected ? (
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              <>
 								                {/* 未连接态：主 CTA */}
 								                <button className="btn btn--primary btn--lg" onClick={startSession}>
 								                  {connectionStatus === "connecting" ? tr("controls.connecting") : tr("controls.startVideo")}
-												feat: 底部控制栏添加摄像头/麦克风开关，说话时麦克风脉冲动画

- useVisionSession 新增 isCameraOn/isMicOn 状态 + toggleCamera/toggleMic
- 底部控制栏添加 📷🎤 图标按钮，开启绿色/关闭红色
- 说话时麦克风按钮绿色脉冲缩放动画（micPulse）
- 按钮样式优化：nowrap 防换行，flex-wrap 自适应

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 20:01:37 +08:00
+								                </button>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              </>
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								            ) : isCameraOn ? (
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              <>
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								                {/* 视频通话态：核心控制工具栏 */}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                <div className="video-controls__toolbar">
 								                  <button
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    className={`btn-ctrl-round ${isCameraOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"}`}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                    onClick={toggleCamera}
 								                    title={isCameraOn ? tr("controls.cameraOff") : tr("controls.cameraOn")}
 								                  >
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 								                      {isCameraOn ? (
 								                        <>
 								                          <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" />
 								                        </>
 								                      ) : (
 								                        <>
 								                          <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" />
 								                          <line x1="1" y1="1" x2="23" y2="23" />
 								                        </>
 								                      )}
 								                    </svg>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                  </button>
 								                  <button
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    className={`btn-ctrl-round ${isMicOn ? "btn-ctrl-round--on" : "btn-ctrl-round--off"} ${isSpeaking ? "btn-ctrl-round--speaking" : ""}`}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                    onClick={toggleMic}
 								                    title={isMicOn ? tr("controls.micOff") : tr("controls.micOn")}
 								                  >
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 								                      {isMicOn ? (
 								                        <>
 								                          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
 								                          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
 								                          <line x1="12" y1="19" x2="12" y2="23" />
 								                          <line x1="8" y1="23" x2="16" y2="23" />
 								                        </>
 								                      ) : (
 								                        <>
 								                          <line x1="1" y1="1" x2="23" y2="23" />
 								                          <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
 								                          <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.12 1.49-.34 2.17" />
 								                          <line x1="12" y1="19" x2="12" y2="23" />
 								                          <line x1="8" y1="23" x2="16" y2="23" />
 								                        </>
 								                      )}
 								                    </svg>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                  </button>
-												refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分，后端无感知，实际使用中价值不大：
- 纯聊天模式名不副实（VAD 仍附带摄像头帧）
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为：语音带图 + 手动识别按钮，UI 更简洁。

											
										
										
											2026-06-21 16:24:09 +08:00
+								                  <button
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    className="btn-ctrl-pill btn-ctrl-pill--recognize"
-												refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分，后端无感知，实际使用中价值不大：
- 纯聊天模式名不副实（VAD 仍附带摄像头帧）
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为：语音带图 + 手动识别按钮，UI 更简洁。

											
										
										
											2026-06-21 16:24:09 +08:00
+								                    onClick={handleRecognize}
 								                    disabled={isProcessing}
 								                  >
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 								                      <circle cx="11" cy="11" r="8" />
 								                      <line x1="21" y1="21" x2="16.65" y2="16.65" />
 								                    </svg>
 								                    {tr("controls.recognize")}
-												refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分，后端无感知，实际使用中价值不大：
- 纯聊天模式名不副实（VAD 仍附带摄像头帧）
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为：语音带图 + 手动识别按钮，UI 更简洁。

											
										
										
											2026-06-21 16:24:09 +08:00
+								                  </button>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                  {isProcessing && (
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                    <button className="btn-ctrl-pill btn-ctrl-pill--interrupt" onClick={interrupt}>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                      {tr("controls.interrupt")}
 								                    </button>
 								                  )}
-												refactor: 重构视频面板 UI，情景选择改为卡片网格，控制按钮改为 SVG 图标

- 情景选择从 ChatPanel header 下拉菜单迁移至视频面板下方卡片网格
- 摄像头/麦克风按钮改为圆形 SVG 图标按钮
- 识别/中断/停止按钮改为药丸形状 SVG 图标按钮
- 设备选择器改为水平布局，优化空间利用
- 移除 ChatPanel 空状态中重复的情景卡片
- .gitignore 忽略 .claudian/ 和笔记目录

											
										
										
											2026-06-21 22:58:02 +08:00
+								                  <button className="btn-ctrl-pill btn-ctrl-pill--stop" onClick={stopVideo}>
 								                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 								                      <rect x="6" y="6" width="12" height="12" rx="2" />
 								                    </svg>
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								                    {tr("controls.stopVideo")}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								                  </button>
 								                </div>
-												feat: 实现摄像头和麦克风设备选择功能

- 新增 useDeviceList hook，枚举音视频输入设备并监听热插拔
- CameraManager/MicManager 的 startCamera/startMic 支持可选 deviceId 参数
- useVisionSession 集成设备选择：授权后自动枚举、切换设备时热重启
- 连接后显示设备下拉选择器，未连接时隐藏（避免未授权时空列表）
- SessionConfig 新增 cameraDeviceId/micDeviceId 持久化到 localStorage

											
										
										
											2026-06-21 16:49:48 +08:00
+								                {/* 设备选择器 */}
 								                <div className="video-controls__devices">
 								                  <div className="device-select-wrapper">
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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></label>
-												feat: 实现摄像头和麦克风设备选择功能

- 新增 useDeviceList hook，枚举音视频输入设备并监听热插拔
- CameraManager/MicManager 的 startCamera/startMic 支持可选 deviceId 参数
- useVisionSession 集成设备选择：授权后自动枚举、切换设备时热重启
- 连接后显示设备下拉选择器，未连接时隐藏（避免未授权时空列表）
- SessionConfig 新增 cameraDeviceId/micDeviceId 持久化到 localStorage

											
										
										
											2026-06-21 16:49:48 +08:00
+								                    <select
 								                      className="device-select"
 								                      value={config.cameraDeviceId || "default"}
 								                      onChange={(e) => switchDevice("camera", e.target.value === "default" ? "" : e.target.value)}
 								                    >
 								                      <option value="default">{tr("controls.device.default")}</option>
 								                      {cameras.map((d) => (
 								                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
 								                      ))}
 								                    </select>
 								                  </div>
 								                  <div className="device-select-wrapper">
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								                    <label className="device-select-label"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></label>
-												feat: 实现摄像头和麦克风设备选择功能

- 新增 useDeviceList hook，枚举音视频输入设备并监听热插拔
- CameraManager/MicManager 的 startCamera/startMic 支持可选 deviceId 参数
- useVisionSession 集成设备选择：授权后自动枚举、切换设备时热重启
- 连接后显示设备下拉选择器，未连接时隐藏（避免未授权时空列表）
- SessionConfig 新增 cameraDeviceId/micDeviceId 持久化到 localStorage

											
										
										
											2026-06-21 16:49:48 +08:00
+								                    <select
 								                      className="device-select"
 								                      value={config.micDeviceId || "default"}
 								                      onChange={(e) => switchDevice("mic", e.target.value === "default" ? "" : e.target.value)}
 								                    >
 								                      <option value="default">{tr("controls.device.default")}</option>
 								                      {mics.map((d) => (
 								                        <option key={d.deviceId} value={d.deviceId}>{d.label}</option>
 								                      ))}
 								                    </select>
 								                  </div>
 								                </div>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              </>
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								            ) : (
 								              <>
 								                {/* 文字对话态：视频已结束 */}
 								                <div className="video-controls__text-only">
 								                  <div className="video-ended-hint">
-												refactor: 将情景图标和设备选择器的 emoji 统一替换为 SVG 图标

- 新增 scenarioIcons.tsx 提取情景图标渲染逻辑
- 情景芯片、设备选择器、警告提示等 emoji 全部改为 Feather-style SVG
- 调整 CSS 确保 SVG 图标居中对齐

											
										
										
											2026-06-21 23:50:27 +08:00
+								                    <span className="video-ended-hint__title"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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> {tr("video.ended")}</span>
-												feat: 结束视频后保留对话，支持继续文字聊天

- useVisionSession 新增 stopVideo 回调（停媒体流，保持连接和消息）
- App.tsx 控制区从二态改为三态（initial/video/textOnly）
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式（video-ended-hint、btn--outline）
- 新增 i18n key（stopVideo/endSession/resumeVideo/video.ended）
- 新增设计方案文档

											
										
										
											2026-06-20 13:48:26 +08:00
+								                    <span className="video-ended-hint__sub">{tr("video.ended.hint")}</span>
 								                  </div>
 								                  <div className="video-controls__toolbar">
 								                    <button className="btn btn--primary" onClick={startSession}>
 								                      {tr("controls.resumeVideo")}
 								                    </button>
 								                    <button className="btn btn--danger btn--outline" onClick={stopSession}>
 								                      {tr("controls.endSession")}
 								                    </button>
 								                  </div>
 								                </div>
 								              </>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            )}
 								          </div>
-												feat: 实现关键帧检测与成本控制

- EdgeProcessor：sampleFrame 降采样 160x120 + compareFrames 像素差异对比
- 重复画面跳过：similarity > 0.9 时不发送 query
- 混合采样策略：静默 5s / 用户说话 1s（docs/08-成本控制.md）
- 请求统计：queryCount + totalTokens 实时显示
- App 状态栏显示成本统计

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 14:38:15 +08:00
+								        </div>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								        {/* 右侧：聊天面板 */}
 								        <div className="chat-panel-wrapper">
 								          <div className="chat-panel-header">
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								            <span>{tr("chat.title")}</span>
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								            <div className="chat-panel-header__right">
 								              {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>
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								          </div>
 								          <div className="chat-panel-body">
 								            {connectionStatus === "disconnected" && messages.length > 0 && (
 								              <div className="system-message system-message--warning">
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								                {tr("chat.reconnecting")}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								              </div>
 								            )}
 								            <ChatPanel
 								              messages={messages}
 								              currentReply={currentReply}
 								              connectionStatus={connectionStatus}
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								              currentScenario={config.scenario}
-												feat：语音对话优化

											
										
										
											2026-06-14 19:54:22 +08:00
+								              isProcessing={isProcessing}
 								              isVADReady={isVADReady}
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								              vadError={vadError ?? undefined}
-												fix: 修复文字对话态误显「正在初始化语音检测」

ChatPanel VAD 初始化提示条件增加 isCameraOn 判断，
视频结束后不再显示语音检测初始化提示。

											
										
										
											2026-06-20 14:04:20 +08:00
+								              isCameraOn={isCameraOn}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              isMicOn={isMicOn}
 								              isSpeaking={isSpeaking}
-												feat: 添加文字输入对话功能

- 后端 WsQuery 添加 text 字段，支持文本输入模式
- Pipeline 支持文本查询时跳过 STT 直接使用输入文本
- 前端 ChatPanel 添加文字输入框，连接状态下可用
- useVisionSession 添加 sendTextMessage 方法
- 更新接口文档，添加文本输入模式说明

											
										
										
											2026-06-14 12:52:39 +08:00
+								              onSendText={sendTextMessage}
-												style: 样式优化

											
										
										
											2026-06-14 16:31:23 +08:00
+								              onToggleMic={toggleMic}
 								              onSceneCard={handleSceneCard}
-												feat：添加对话情景功能

											
										
										
											2026-06-14 20:32:30 +08:00
+								              onSelectScenario={handleSelectScenario}
-												style: 重构为 Web 端双栏布局，突出对话展示

- 重构 App.tsx 为双栏布局：左侧视频面板 + 右侧聊天面板
- 左侧 340px 固定宽度视频区（4:3 比例）
- 右侧对话区 flex:1 占满剩余空间
- Header 改为导航栏风格：标题+副标题+状态标签+设置按钮
- 视频下方控制栏：观察模式/打断/结束对话按钮
- 优化间距、字号、配色，适配桌面端

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 16:16:37 +08:00
+								            />
 								          </div>
 								        </div>
 								      </div>
-												feat: 完善端到端对话闭环，增强消息渲染与错误处理

- ChatPanel：流式光标动画、token/延迟元数据、自动滚动、三种空状态
- Toast 组件：错误码映射为中文友好文案，3 秒自动消失
- useVisionSession：stt_result 流式更新、防重复发送、打断保存未完成内容、结束清理全部状态
- App：断线提示、视频 loading 遮罩、按钮连接中状态
- ChatMessage 增加 latencyMs、model 字段

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-13 11:43:16 +08:00
 								      <ToastContainer />
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								    </div>
 								  );
 								}
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								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}>
-												feat: 实现前端认证系统，WebSocket 连接携带 JWT token

- 新增 AuthContext/AuthProvider：登录/注册状态管理，JWT 自动刷新
- 新增 AuthPage 组件：登录/注册表单，支持模式切换和前端校验
- 新增 api.ts：封装 auth REST API 客户端（register/login/refresh/logout）
- WebSocket 连接时拼接 ?token=<jwt>，重连自动携带
- useVisionSession 接受 accessToken 参数并透传
- App.tsx 包裹 AuthProvider，未登录时显示登录页
- storage.ts 新增 token/user 的 localStorage 存储
- i18n 新增中/英/日三语 auth 翻译
- App.css 新增 auth 页面和用户 badge 样式

											
										
										
											2026-06-14 18:38:45 +08:00
+								      <AuthProvider>
 								        <AppContent />
 								      </AuthProvider>
-												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 变化

											
										
										
											2026-06-14 14:34:30 +08:00
+								    </I18nContext.Provider>
 								  );
 								}
-												feat: 初始化前端项目，搭建 React + TypeScript + Vite 工程结构

- 创建 Vite + React 18 + TypeScript 项目（严格模式）
- 安装 @ricky0123/vad-web、onnxruntime-web、uuid 依赖
- 定义全部 WebSocket 消息类型和数据模型（对齐接口文档）
- 实现 WebSocket 连接管理（心跳保活、指数退避重连）
- 实现音频编码工具（PCM↔Base64、DataURL 转换）
- 创建组件骨架：CameraManager、MicManager、EdgeProcessor、WebSocketManager、ChatPanel、VideoPreview
- 实现核心 useVisionSession Hook 骨架
- 配置 ESLint（_前缀变量忽略规则）

Co-Authored-By: Claude <noreply@anthropic.com>

											
										
										
											2026-06-12 17:46:25 +08:00
+								export default App;