refactor: reorganize project structure and improve code quality
- 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
This commit is contained in:
@@ -0,0 +1,193 @@
|
||||
# 系统设计
|
||||
|
||||
## 概述
|
||||
|
||||
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 + 自定义监控
|
||||
- **功能**: 错误追踪、性能监控、健康检查
|
||||
- **告警**: 实时告警、日志记录
|
||||
|
||||
## 数据流
|
||||
|
||||
### 请求流程
|
||||
1. 用户发起请求
|
||||
2. Next.js路由处理
|
||||
3. 中间件验证(认证、CSRF)
|
||||
4. API路由处理
|
||||
5. 数据库查询
|
||||
6. 响应返回
|
||||
|
||||
### 数据更新流程
|
||||
1. 用户提交表单
|
||||
2. 前端验证
|
||||
3. API路由接收
|
||||
4. 业务逻辑处理
|
||||
5. 数据库更新
|
||||
6. 响应返回
|
||||
7. 前端更新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反向代理
|
||||
- 自动备份
|
||||
|
||||
## 技术债务
|
||||
|
||||
### 已知问题
|
||||
- 数据库迁移脚本需要完善
|
||||
- 错误处理需要统一
|
||||
- 测试覆盖率需要提升
|
||||
|
||||
### 改进计划
|
||||
- 引入缓存机制
|
||||
- 优化数据库查询
|
||||
- 完善监控告警
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [Next.js文档](https://nextjs.org/docs)
|
||||
- [React文档](https://react.dev)
|
||||
- [TypeScript文档](https://www.typescriptlang.org/docs/)
|
||||
- [Drizzle ORM文档](https://orm.drizzle.team/docs/overview)
|
||||
Reference in New Issue
Block a user