- 新增 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 样式
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
// ============================================================
|
|
// WebSocketManager — WebSocket 连接生命周期管理
|
|
// 职责:管理连接状态、消息分发
|
|
// ============================================================
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { wsClient } from "../../lib/websocket";
|
|
import type { ConnectionStatus } from "../../lib/websocket";
|
|
import type { ServerMessage } from "../../types";
|
|
|
|
export function useWebSocketManager() {
|
|
const [status, setStatus] = useState<ConnectionStatus>(wsClient.status);
|
|
const [lastMessage, setLastMessage] = useState<ServerMessage | null>(null);
|
|
|
|
useEffect(() => {
|
|
const unsubStatus = wsClient.onStatusChange(setStatus);
|
|
const unsubMessage = wsClient.onMessage(setLastMessage);
|
|
|
|
return () => {
|
|
unsubStatus();
|
|
unsubMessage();
|
|
};
|
|
}, []);
|
|
|
|
return {
|
|
status,
|
|
lastMessage,
|
|
connect: (token?: string) => wsClient.connect(token),
|
|
disconnect: () => wsClient.disconnect(),
|
|
send: wsClient.send.bind(wsClient),
|
|
};
|
|
}
|