前端实现与难点

状态：未准备（作为全栈业务闭环与前端备选素材）

实现概览

源码根目录：EinoTalk。路径均相对该目录。

• React Router 组织登录、注册、聊天和管理页面，Ant Design 提供基础 UI。
• Zustand 按认证、聊天、联系人、音视频和 UI 拆分 store。
• Axios 封装业务请求，WebSocket service / hook 处理实时连接与事件。
• 主要入口：frontend/src/App.tsx、frontend/src/stores/、frontend/src/services/websocket.ts、frontend/src/hooks/useWebSocket.ts。

难点与取舍

1. 登录态与错误处理

• 具体问题与背景：多业务模块需要共享 token，登录过期或权限不足应保持一致行为。
• 我的实现（候选，待确认）：请求拦截器附加 Bearer token；响应处理区分 401 / 403，未认证时清理本地登录信息和 store 并跳转登录。
• 备选方案：每个 API 重复处理；引入 token 自动刷新。
• 选择理由与限制：集中处理基础错误；当前代码不能据此写成无感刷新 token，localStorage token 也需要讨论 XSS 风险。
• 结果与验证方式：分别模拟 HTTP 状态码与业务 code，检查登录页跳转和 FormData 请求头。
• 代码路径 / 证据：frontend/src/api/axios.ts、frontend/src/stores/useAuthStore.ts。

2. 实时消息与会话状态同步

• 具体问题与背景：接收消息时，当前窗口、会话摘要和未读状态可能需要一起更新。
• 我的实现（候选，待确认）：结合 WebSocket 事件和聊天 store 组织状态，区分服务端回显与用户输入。
• 备选方案：定时轮询；前端先乐观插入再用服务端回执修正。
• 选择理由与限制：需和服务端回显协议匹配，不能同时无条件本地追加造成重复；去重、重连恢复等能力需逐项核对后才写进简历。
• 结果与验证方式：检查自己发出的消息只出现一次、切换会话后归属正确、历史与实时消息衔接。
• 代码路径 / 证据：frontend/src/stores/useChatStore.ts、frontend/src/services/websocket.ts、internal/service/chat/dispatch.go。

待完善项

• 运行验证 store 与服务端协议的对应行为，补具体本人改动。
• 全栈简历用一条说明前后端闭环即可；不重复展开两个项目的 WebRTC。
• 不把“长列表虚拟化、离线补偿、消息重试、可靠回执”写成已实现，除非另行找到并验证实现。