Skip to main content

Web 前端

PAI 提供基于 React 的 Web 前端客户端,支持完整的对话、记账、日历等功能,并通过 WebSocket 和 SSE 实现流式响应和实时通知。

技术栈

构建工具

Vite — 快速的开发构建工具

UI 框架

Tailwind CSS — 原子化 CSS 框架

状态管理

Zustand — 轻量级状态管理

数据获取

TanStack Query — 服务端状态管理与缓存

用户认证

Web 前端使用 JWT(JSON Web Token)进行身份认证,支持邮箱注册和登录。

注册

登录

登录成功后返回 JWT Token,前端存储并在后续请求的 Authorization Header 中携带。

对话功能

HTTP 模式

通过 HTTP POST 发送消息并获取完整响应:

SSE 流式模式

添加 stream=true 参数开启 Server-Sent Events 流式响应,实现打字机效果:
响应为 SSE 事件流,逐步输出 AI 回复内容。

WebSocket 模式

通过 WebSocket 实现全双工实时通信:
WebSocket 模式适用于需要低延迟实时交互的场景。

实时通知

通过独立的 WebSocket 连接接收系统通知(如日程提醒):
通知类型包括:
  • 日程到期提醒
  • 系统消息

功能模块


部署

Web 前端作为独立服务在 Docker Compose 中构建和运行:
生产部署时建议通过 Nginx 反向代理统一处理前端静态资源和后端 API,避免跨域问题。