技术架构
系统架构
现代化的全栈架构，基于 Next.js 和 Supabase 构建
技术栈概览
前端技术
- Next.js 16 (App Router)
- React 18
- TypeScript
- Tailwind CSS
后端服务
- Supabase
- PostgreSQL
- Row Level Security
- RESTful API
开发工具
- Turbo (Monorepo)
- React Query
- Zustand
- Recharts
为什么选择这个技术栈？
- ✓快速开发：Next.js 提供开箱即用的 SSR、路由、API 等功能
- ✓类型安全：TypeScript 提供完整的类型检查，减少运行时错误
- ✓后端即服务：Supabase 提供数据库、认证、存储等后端服务
- ✓现代化 UI：Tailwind CSS 实现快速、一致的界面开发
系统架构图
前端层 (Frontend)
PM 仪表板
PL 工作台
IC 工作台
VP 仪表板
↕️ HTTP/HTTPS
API 层 (Backend)
Supabase API
认证服务
文件存储
↕️ SQL
数据层 (Database)
用户表
项目表
任务表
工时表
架构特点
Monorepo 架构
使用 Turbo 管理多个包，实现代码复用和统一构建：
- •
apps/web- 主应用 - •
packages/ui-components- 共享组件库 - •
packages/database- 数据库配置
服务端渲染 (SSR)
Next.js App Router 提供服务端渲染能力，提升首屏加载速度和 SEO 效果。 关键页面在服务端预渲染，减少客户端 JavaScript 负担。
实时数据同步
使用 React Query 管理服务端状态，自动缓存和重新验证数据。 支持乐观更新，提升用户体验。
安全性设计
多层安全防护机制：
- • Row Level Security (RLS) - 数据库行级权限控制
- • JWT 认证 - 无状态的用户认证
- • HTTPS 加密 - 传输层安全
- • 角色权限控制 - 基于角色的访问控制
部署架构
前端部署
部署在 Cloudflare Pages，享受全球 CDN 加速：
- • 300+ 全球节点
- • 自动 HTTPS
- • 免费 100,000 请求/天
- • Git 集成自动部署
后端服务
使用 Supabase 托管服务：
- • PostgreSQL 数据库
- • 自动备份
- • 99.9% 可用性
- • 全球分布式
性能指标
< 50ms
静态资源响应
< 200ms
API 查询延迟
10,000+
任务虚拟滚动
99.9%
系统可用性