携程前端训练营项目汇报文档

队伍名称：海底小纵队
队伍成员及分工：
- 邓涵杰
  - 担任队长，负责项目总体设计
  - 负责后端业务开发，数据库表设计、服务器配置
  - 负责PC端的Web管理后台开发
  - 负责用户端的登录注册业务开发
- 顾翌炜
  - 负责用户端的“我的游记”页面及其功能开发
  - 负责用户端的“游记发布”页面及其功能开发
- 邱吉尔
  - 负责用户端“游记列表”页面及功能开发
  - 负责用户端“游记详情”页面及其功能开发
项目名称：TripTrip
项目代码仓库：https://github.com/floatDreamWithSong/TripTrip
项目在线地址：
- 管理后台： https://www.daydreamer.net.cn
  - 测试用户：user,admin,reviewer，密码均为123456
- 移动端H5页面，用户端：https://trip-trip-user.vercel.app
  - 注意该站点通过vercel平台部署，国内访问较慢

技术说明

整体架构

TripTrip采用了基于pnpm workspace的monorepo结构，主要包含以下子项目：

plain

TripTrip  
├── apps  
│   ├── admin     # PC管理端  
│   ├── server    # 后端服务  
│   └── user      # 用户端(H5、小程序)  
└── commons  
    └── utils     # 公共工具库

前端技术栈

用户端（H5+小程序）：
- 框架：Taro（React）
- 状态管理：Zustand
- UI组件：Antd
管理端：
- 框架：React
- 状态管理：Zustand
- UI组件：Rsuite
- 数据可视化：Recharts

后端技术栈

服务框架：
- NestJS
数据库：
- MySQL（通过Prisma ORM访问）
- Redis（缓存）
外部服务集成：
- OpenAI API（AI辅助内容审核）
- 腾讯云COS（文件存储）

难点突破

Monorepo架构的依赖管理：
- 通过pnpm workspace解决了子项目间依赖共享问题
- 统一的构建脚本简化了开发流程
多端适配：
- 利用Taro框架实现了一套代码，多端部署
- 管理端采用响应式设计，能够方便审核人员在大部分屏幕设备上完成审核业务
AI内容审核：
- 设计了基于OpenAI标准的内容审核系统，通过Observable流式处理实现流式输出，编写了专业的系统提示词，提高了AI辅助审核的准确性
性能优化：
- 精心设计的数据模型与索引策略，并通过实体关联简化了复杂查询
- 点赞，文章综合排名等高频业务通过Redis缓存和定时计算任务进行维护
- 管理端通过骨架屏设计、图片懒加载，优化了渲染效果
业务设计
- 采用accessToken和refreshToken，当accessToken过期时采用refreshToken续签，使得用户能在本地保持较长时间的登录态并无感刷新token，又能减少token泄露后的风险持续时长