技术选型概述
本项目采用现代化的全栈技术栈，前后端分离，使用Next.js作为主框架， 结合React生态系统和强大的工具链，提供高性能、可维护的开发体验。
高性能
SSR/SSG混合渲染，快速加载
类型安全
TypeScript全栈类型覆盖
易维护
组件化开发，代码复用
前端技术栈
Next.js 16
React全栈框架
- App Router：最新的路由系统，支持Server Components
- Server Actions：简化服务端操作，无需创建API路由
- RSC（React Server Components）：提升性能和首屏加载速度
- ISR/SSR：灵活的渲染策略，满足不同页面需求
- 内置路由保护、中间件支持
React 19
UI组件库
- Hooks：useState、useEffect、useContext等React Hooks
- Server Components：服务端组件，减少客户端JavaScript
- Concurrent Mode：并发特性，提升用户体验
TypeScript 5
类型系统
- 强类型系统：减少运行时错误，提升代码质量
- 类型推断：智能的类型推断，减少类型标注
- 接口和泛型：灵活的类型定义和复用
- ESLint集成：实时类型检查和代码规范
Tailwind CSS 4
CSS框架
- 原子化CSS：快速构建UI，减少CSS代码
- 响应式设计：内置响应式工具类
- 深色模式：开箱即用的深色模式支持
- JIT模式：按需生成CSS，减少打包体积
shadcn/ui
UI组件库
- 基于Radix UI：无障碍访问，可访问性优先
- 完全可定制：组件源码可控，样式完全自定义
- 常用组件：Button、Card、Form、Table、Dialog等
- TypeScript支持：完整的类型定义
Recharts
图表组件库
- 声明式API：简单直观的图表构建方式
- 丰富的图表类型：折线图、柱状图、饼图、面积图等
- 响应式设计：自适应容器大小
- 动画支持：流畅的过渡动画
后端技术栈
Next.js API Routes
服务端API
- RESTful API：标准的REST接口设计
- Server Actions：简化客户端调用，无需fetch
- 中间件支持：请求拦截、路由保护
- 流式响应：支持SSE和流式输出
PostgreSQL
关系型数据库
- ACID事务：确保数据一致性
- JSON支持：存储和查询JSON数据
- 全文检索：内置全文检索功能
- 索引优化：多种索引类型，提升查询性能
Drizzle ORM
ORM框架
- 类型安全：完整的TypeScript类型支持
- 轻量级：无运行时依赖，性能优异
- SQL-like语法：直观的查询API
- Schema-first：基于Schema定义模型
JWT认证
身份认证
- 无状态认证：无需服务端存储session
- 跨域支持：支持CORS请求
- Token刷新：支持Access Token和Refresh Token
- 多端登录：支持多种登录方式
第三方集成
对象存储（S3）
文件存储服务
- 七牛云：国内高速CDN，支持图片处理
- 腾讯云COS：稳定的云存储服务
- 阿里云OSS：国内主流云存储
- 文件上传、下载、管理
邮件服务
邮件发送
- SMTP协议：标准邮件发送协议
- 模板管理：动态邮件模板
- 群发功能：支持批量邮件发送
短信服务
短信发送
- 腾讯云短信：稳定可靠的短信服务
- 验证码发送：支持登录验证码
- 工资条推送：通过短信发送工资条链接
微信公众号
微信生态
- 公众号分享：支持文章、图片分享
- 模板消息：工资条模板推送
- 自定义菜单：公众号菜单配置
- 小程序：微信小程序支持
支付接口
在线支付
- 支付宝：支付宝支付接口
- 微信支付：微信支付接口
- 退款功能：支持订单退款
开发工具
pnpm
高效的包管理器，节省磁盘空间
ESLint
代码检查和格式化
Prettier
代码格式化工具
Coze CLI
项目管理和部署工具