张翔
498bb3a3c8
- Move CI/CD configs to config/ci/ directory - Reorganize scripts into categorized directories (deployment, monitoring, testing, utils) - Consolidate documentation into docs/ directory with proper structure - Update linting and testing configurations - Remove obsolete test reports and performance summaries - Add new documentation for code quality tools and contact form security - Improve project organization and maintainability - Fix lint-staged config to only lint JS/TS files - Disable react/react-in-jsx-scope rule for Next.js compatibility - Ignore scripts and test config directories in ESLint
5.7 KiB
5.7 KiB
系统设计
概述
Novalon Website采用现代化的前端架构设计，基于Next.js 16的App Router，提供高性能、可扩展的企业官网解决方案。
架构层次
1. 表现层 (Presentation Layer)
- 技术: React 19 + Next.js 16
- 职责: 用户界面渲染、用户交互处理
- 组件: 页面组件、区块组件、UI组件
2. 业务逻辑层 (Business Logic Layer)
- 技术: TypeScript + Custom Hooks
- 职责: 业务逻辑处理、状态管理
- 模块: API服务、认证服务、数据处理
3. 数据访问层 (Data Access Layer)
- 技术: Drizzle ORM + SQLite
- 职责: 数据持久化、数据查询
- 模块: 数据库Schema、查询、迁移
4. 基础设施层 (Infrastructure Layer)
- 技术: Node.js + Next.js API Routes
- 职责: API接口、文件上传、邮件发送
- 模块: API路由、中间件、工具函数
技术架构图
┌─────────────────────────────────────────────────┐
│ Client Side (Browser) │
│ ┌─────────────┐ ┌──────────────────────┐ │
│ │ React UI │ │ Next.js Pages │ │
│ └─────────────┘ └──────────────────────┘ │
└────────────────────┬────────────────────────┘
│ HTTP/HTTPS
┌────────────────────┴────────────────────────┐
│ Server Side (Next.js) │
│ ┌─────────────┐ ┌──────────────────────┐ │
│ │ API Routes │ │ Middleware │ │
│ └─────────────┘ └──────────────────────┘ │
│ ┌─────────────┐ ┌──────────────────────┐ │
│ │ Server │ │ Static Assets │ │
│ │ Components │ │ │ │
│ └─────────────┘ └──────────────────────┘ │
└────────────────────┬────────────────────────┘
│
┌────────────────────┴────────────────────────┐
│ Data Layer (SQLite) │
│ ┌─────────────┐ ┌──────────────────────┐ │
│ │ Drizzle ORM │ │ Database Files │ │
│ └─────────────┘ └──────────────────────┘ │
└───────────────────────────────────────────────┘
核心模块
1. 认证模块
- 技术: NextAuth.js v5
- 功能: 用户登录、会话管理、权限控制
- 配置: 支持多种认证方式
2. 内容管理模块
- 技术: 自定义CMS
- 功能: 新闻、产品、服务、案例管理
- 特性: 富文本编辑、图片上传、版本控制
3. API模块
- 技术: Next.js API Routes
- 功能: RESTful API接口
- 安全: CSRF防护、输入验证、错误处理
4. 监控模块
- 技术: Sentry + 自定义监控
- 功能: 错误追踪、性能监控、健康检查
- 告警: 实时告警、日志记录
数据流
请求流程
- 用户发起请求
- Next.js路由处理
- 中间件验证（认证、CSRF）
- API路由处理
- 数据库查询
- 响应返回
数据更新流程
- 用户提交表单
- 前端验证
- API路由接收
- 业务逻辑处理
- 数据库更新
- 响应返回
- 前端更新UI
安全架构
1. 认证安全
- JWT Token认证
- 会话管理
- 密码加密（bcrypt）
2. 数据安全
- SQL注入防护（参数化查询）
- XSS防护（DOMPurify）
- CSRF防护（Token验证）
3. 网络安全
- HTTPS强制
- 安全头配置
- 速率限制
性能优化
1. 前端优化
- 代码分割
- 懒加载
- 图片优化
- 缓存策略
2. 后端优化
- 数据库索引
- 查询优化
- 缓存机制
- CDN加速
3. 构建优化
- Tree Shaking
- 压缩优化
- 静态资源优化
扩展性设计
1. 水平扩展
- 无状态设计
- 负载均衡
- 数据库分片
2. 垂直扩展
- 模块化设计
- 插件机制
- 配置化
监控和日志
1. 错误监控
- Sentry集成
- 错误追踪
- 用户会话回放
2. 性能监控
- Core Web Vitals
- API响应时间
- 资源加载时间
3. 日志管理
- 结构化日志
- 日志分级
- 日志轮转
部署架构
开发环境
- 本地开发服务器
- SQLite数据库
- 热重载
生产环境
- Docker容器
- Nginx反向代理
- 自动备份
技术债务
已知问题
- 数据库迁移脚本需要完善
- 错误处理需要统一
- 测试覆盖率需要提升
改进计划
- 引入缓存机制
- 优化数据库查询
- 完善监控告警