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 样式

frontend/src/App.tsx

@@ -11,6 +11,8 @@ import { ChatPanel } from "./components/ChatPanel";
 import { ConfigPanel } from "./components/ConfigPanel";
 import { SessionSidebar } from "./components/SessionSidebar";
 import { ToastContainer } from "./components/Toast";
+import { AuthPage } from "./components/AuthPage";
+import { AuthProvider, useAuth } from "./lib/auth";
 import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
 import { I18nContext, parseLocale, t } from "./lib/i18n";
 import type { Locale } from "./lib/i18n";
@@ -22,6 +24,7 @@ type VisionMode = "realtime" | "ondemand" | "chat";
 
 /** 内部组件，确保在 I18nContext.Provider 内部使用 hooks */
 function AppContent() {
+  const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
   const [showConfig, setShowConfig] = useState(false);
   const [theme, setTheme] = useState<Theme>(loadTheme);
   const [elapsed, setElapsed] = useState(0);
@@ -82,7 +85,7 @@ function AppContent() {
     toggleCamera,
     toggleMic,
     sendTextMessage,
-  } = useVisionSession();
+  } = useVisionSession(accessToken);
 
   const isConnected = connectionStatus === "connected";
 
@@ -194,6 +197,21 @@ function AppContent() {
     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 <AuthPage />;
+  }
+
   return (
     <div className="app">
       {/* ---- 顶部导航栏 ---- */}
@@ -216,6 +234,12 @@ function AppContent() {
           <span className="header__subtitle">{tr("app.title")}</span>
         </div>
         <div className="header__right">
+          <div className="header__user">
+            <span className="header__username">{user?.username}</span>
+            <button className="header__logout-btn" onClick={logout}>
+              {tr("auth.logout")}
+            </button>
+          </div>
           <span className={`badge badge--${connectionStatus}`}>
             {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
           </span>
@@ -489,7 +513,9 @@ function App() {
 
   return (
     <I18nContext.Provider value={i18nValue}>
-      <AppContent />
+      <AuthProvider>
+        <AppContent />
+      </AuthProvider>
     </I18nContext.Provider>
   );
 }