489 lines
14 KiB
Markdown
489 lines
14 KiB
Markdown
# 实施计划
|
||
|
||
- [x] 1. 初始化项目结构
|
||
- 创建后端.NET 9.0解决方案，包含API、Core、Infrastructure和Application四个项目层
|
||
- 创建前端Vite+Vue 3项目，配置路由、状态管理和UI组件库
|
||
- 配置MySQL数据库连接和Entity Framework Core
|
||
- 设置开发环境配置文件（appsettings.json和.env）
|
||
- _需求: 1.1, 6.1_
|
||
|
||
- [x] 2. 实现数据库层和核心实体
|
||
|
||
|
||
- [x] 2.1 创建实体类和DbContext
|
||
|
||
|
||
|
||
- 实现Category、Product、PerformanceScore、Specification、DataSource和RankingHistory实体类
|
||
- 配置AppDbContext和实体关系映射
|
||
- 配置数据库索引（Name, Model, CategoryId, PerformanceScore字段）
|
||
- _需求: 7.1, 7.2_
|
||
- [x] 2.2 创建和执行数据库迁移
|
||
|
||
|
||
- 生成初始数据库迁移文件
|
||
- 执行迁移创建数据库表结构
|
||
- 添加种子数据（初始产品类别：手机CPU、手机GPU、电脑CPU、电脑GPU）
|
||
- _需求: 1.1, 1.2, 7.1_
|
||
|
||
- [ ] 2.3 编写实体验证单元测试
|
||
- 测试实体属性验证规则
|
||
|
||
|
||
- 测试实体关系配置
|
||
|
||
|
||
- _需求: 7.1_
|
||
|
||
- [x] 3. 实现Repository层数据访问
|
||
|
||
- [ ] 3.1 创建Repository接口和实现
|
||
- 实现ICategoryRepository和CategoryRepository
|
||
- 实现IProductRepository和ProductRepository，包含分页、搜索和筛选方法
|
||
- 实现通用Repository基类
|
||
|
||
- _需求: 2.2, 4.2, 7.2_
|
||
- [ ] 3.2 实现产品查询方法
|
||
- 实现按类别获取产品列表（支持分页和排序）
|
||
- 实现产品搜索方法（按名称、型号、品牌）
|
||
- 实现产品筛选方法（按性能分数区间、发布年份）
|
||
- _需求: 2.1, 4.2, 4.3, 4.4_
|
||
- [ ] 3.3 编写Repository层单元测试
|
||
- 使用InMemory数据库测试CRUD操作
|
||
- 测试查询和筛选逻辑
|
||
- _需求: 7.2_
|
||
|
||
- [x] 4. 实现Service层业务逻辑
|
||
|
||
- [x] 4.1 创建CategoryService
|
||
|
||
|
||
- 实现获取所有类别方法
|
||
- 实现获取单个类别详情方法
|
||
- 使用AutoMapper配置DTO映射
|
||
- _需求: 1.3, 1.4, 6.1_
|
||
- [x] 4.2 创建ProductService
|
||
|
||
|
||
- 实现获取产品排名列表方法（支持分页、排序）
|
||
- 实现获取产品详情方法（包含规格参数和性能分数）
|
||
- 实现产品搜索方法
|
||
- 实现产品筛选方法
|
||
- _需求: 2.1, 2.2, 2.3, 2.4, 4.2, 4.3, 4.4_
|
||
- [x] 4.3 创建ComparisonService
|
||
|
||
|
||
- 实现产品对比方法（接受2-4个产品ID）
|
||
- 实现对比数据处理逻辑（标识最优和最差指标）
|
||
- 生成对比矩阵数据结构
|
||
|
||
- _需求: 5.1, 5.2, 5.3, 5.4_
|
||
- [ ] 4.4 编写Service层单元测试
|
||
- 测试业务逻辑正确性
|
||
|
||
|
||
- 使用Mock测试Repository依赖
|
||
|
||
|
||
- _需求: 2.1, 4.2, 5.1_
|
||
|
||
- [x] 5. 实现API Controllers
|
||
|
||
|
||
- [x] 5.1 创建CategoriesController
|
||
|
||
|
||
|
||
- 实现GET /api/categories端点
|
||
- 实现GET /api/categories/{id}端点
|
||
- 配置响应格式和状态码
|
||
|
||
|
||
|
||
- _需求: 6.1, 6.6_
|
||
- [x] 5.2 创建ProductsController
|
||
|
||
- 实现GET /api/products端点（支持查询参数：categoryId, page, pageSize, sortBy, order）
|
||
|
||
|
||
- 实现GET /api/products/{id}端点
|
||
- 实现GET /api/products/search端点（支持查询参数：q, categoryId, manufacturer, minScore, maxScore）
|
||
- 配置FluentValidation验证查询参数
|
||
|
||
- _需求: 2.1, 2.2, 2.3, 4.2, 4.4, 6.2, 6.3, 6.4, 6.6_
|
||
- [x] 5.3 创建ComparisonController
|
||
|
||
|
||
- 实现POST /api/comparison端点
|
||
- 验证请求体（productIds数组长度2-4）
|
||
- 配置响应格式
|
||
- _需求: 5.1, 5.2, 6.5, 6.6_
|
||
- [x] 5.4 配置全局异常处理中间件
|
||
|
||
|
||
|
||
- 实现GlobalExceptionMiddleware
|
||
- 处理ValidationException、NotFoundException和通用Exception
|
||
- 返回标准化错误响应
|
||
- _需求: 6.7_
|
||
- [ ] 5.5 编写API集成测试
|
||
- 使用WebApplicationFactory测试API端点
|
||
- 测试各种查询参数组合
|
||
- 测试错误处理
|
||
- _需求: 6.1, 6.2, 6.3, 6.4, 6.5_
|
||
|
||
- [x] 6. 实现数据采集服务
|
||
|
||
|
||
|
||
|
||
- [x] 6.1 创建DataCollectionService基础结构
|
||
|
||
|
||
- 实现IDataCollectionService接口
|
||
- 配置HttpClientFactory
|
||
- 实现数据验证和转换逻辑
|
||
- _需求: 3.1, 3.2, 3.3, 3.4_
|
||
- [x] 6.2 实现GeekBench数据采集
|
||
|
||
|
||
- 实现CollectFromGeekBenchAsync方法
|
||
- 解析GeekBench API响应或爬取排行榜页面
|
||
- 提取CPU性能数据（Single-Core和Multi-Core分数）
|
||
- 更新或插入Product和PerformanceScore数据
|
||
- _需求: 3.1, 3.4_
|
||
- [x] 6.3 实现GPU数据采集
|
||
|
||
|
||
- 实现CollectGpuDataAsync方法
|
||
- 集成3DMark或GFXBench数据源
|
||
- 提取GPU性能数据
|
||
- _需求: 3.2, 3.4_
|
||
- [x] 6.4 实现AnTuTu数据采集
|
||
|
||
|
||
- 实现CollectFromAnTuTuAsync方法
|
||
- 爬取AnTuTu排行榜数据
|
||
- 提取移动设备综合性能数据
|
||
- _需求: 3.3, 3.4_
|
||
- [x] 6.5 实现排名计算服务
|
||
|
||
|
||
- 实现RecalculateRankingsAsync方法
|
||
- 按类别和性能分数计算排名
|
||
- 更新Product的CurrentRank字段
|
||
- 记录RankingHistory历史数据
|
||
- _需求: 2.5, 7.3_
|
||
- [x] 6.6 配置错误处理和重试机制
|
||
|
||
|
||
- 实现API调用失败重试逻辑（最多3次）
|
||
- 记录详细错误日志（使用Serilog）
|
||
- 实现告警通知机制
|
||
- _需求: 3.6_
|
||
- [x] 6.7 编写数据采集服务测试
|
||
|
||
|
||
- 使用Mock测试外部API调用
|
||
- 测试数据验证逻辑
|
||
- 测试排名计算准确性
|
||
- _需求: 3.4, 3.6_
|
||
|
||
- [ ] 7. 配置后台任务调度
|
||
- [x] 7.1 集成Hangfire
|
||
|
||
|
||
- 安装Hangfire NuGet包
|
||
- 配置Hangfire使用MySQL存储
|
||
|
||
- 配置Hangfire Dashboard
|
||
|
||
- _需求: 3.5_
|
||
- [x] 7.2 创建DataSyncJob
|
||
|
||
|
||
- 实现定时数据同步任务
|
||
- 配置每24小时执行一次
|
||
|
||
- 调用DataCollectionService的各个采集方法
|
||
- 记录任务执行结果
|
||
- _需求: 3.5_
|
||
- [x] 7.3 配置数据库备份任务
|
||
|
||
- 创建DatabaseBackupJob
|
||
- 配置每周执行一次
|
||
- 实现MySQL数据库备份逻辑
|
||
- _需求: 7.5_
|
||
|
||
|
||
- [x] 8. 实现前端基础架构
|
||
|
||
|
||
|
||
- [x] 8.1 配置Vue Router
|
||
- 创建路由配置文件
|
||
- 定义路由：首页、类别排名、产品详情、产品对比
|
||
|
||
- 配置路由懒加载
|
||
|
||
|
||
|
||
|
||
- _需求: 2.1, 8.1_
|
||
- [x] 8.2 配置Pinia状态管理
|
||
- 创建categoryStore（管理产品类别状态）
|
||
|
||
|
||
|
||
- 创建productStore（管理产品列表和详情状态）
|
||
|
||
|
||
- 创建comparisonStore（管理对比产品状态）
|
||
- _需求: 2.1, 4.1, 5.1_
|
||
- [x] 8.3 配置Axios和API服务层
|
||
|
||
|
||
- 创建Axios实例，配置baseURL和拦截器
|
||
|
||
|
||
|
||
|
||
- 实现请求拦截器（添加通用headers）
|
||
- 实现响应拦截器（统一错误处理）
|
||
|
||
|
||
- 创建categoryService、productService和comparisonService
|
||
|
||
|
||
- _需求: 6.1, 6.2, 6.3, 6.4, 6.5_
|
||
- [ ] 8.4 集成Element Plus和TailwindCSS
|
||
- 安装和配置Element Plus组件库
|
||
- 配置TailwindCSS
|
||
|
||
- 创建全局样式文件
|
||
- _需求: 8.1, 8.2_
|
||
|
||
- [x] 9. 实现前端布局组件
|
||
|
||
|
||
- [x] 9.1 创建Header组件
|
||
- 实现顶部导航栏
|
||
- 添加Logo和应用名称
|
||
- 添加产品类别导航菜单
|
||
- 实现响应式布局
|
||
- _需求: 1.4, 8.1, 8.2_
|
||
- [x] 9.2 创建Footer组件
|
||
- 显示数据来源说明
|
||
- 显示最后更新时间
|
||
- 添加数据源链接
|
||
- _需求: 10.1, 10.2, 10.4_
|
||
- [x] 9.3 创建主布局组件
|
||
- 组合Header和Footer
|
||
- 配置router-view
|
||
- 实现响应式容器
|
||
- _需求: 8.1, 8.2_
|
||
|
||
- [x] 10. 实现首页和类别选择
|
||
- [x] 10.1 创建Home视图
|
||
- 显示产品类别卡片网格
|
||
- 调用categoryStore获取类别列表
|
||
- 实现类别卡片点击跳转
|
||
- 显示每个类别的产品数量
|
||
- _需求: 1.1, 1.4_
|
||
- [x] 10.2 实现响应式布局
|
||
- 桌面端：4列网格
|
||
- 平板端：2列网格
|
||
- 手机端：1列网格
|
||
- _需求: 8.1, 8.2, 8.3_
|
||
|
||
- [x] 11. 实现产品排名列表页面
|
||
|
||
|
||
- [x] 11.1 创建CategoryRanking视图
|
||
|
||
|
||
- 根据路由参数获取categoryId
|
||
- 调用productStore获取产品列表
|
||
- 显示产品排名列表
|
||
- 实现分页组件
|
||
- _需求: 2.1, 2.5_
|
||
- [x] 11.2 创建ProductCard组件
|
||
|
||
- 显示产品缩略图、名称、型号
|
||
- 显示性能分数和排名
|
||
- 显示制造商和发布日期
|
||
- 实现点击跳转到详情页
|
||
- _需求: 2.2_
|
||
- [x] 11.3 创建ProductFilter组件
|
||
|
||
- 实现品牌筛选下拉框
|
||
- 实现性能分数区间滑块
|
||
- 实现发布年份筛选
|
||
- 实现筛选条件重置按钮
|
||
- _需求: 4.3, 4.5_
|
||
- [x] 11.4 创建ProductSearch组件
|
||
|
||
- 实现搜索输入框
|
||
- 实现搜索建议（防抖）
|
||
- 实现搜索结果高亮
|
||
- _需求: 4.1, 4.2_
|
||
- [x] 11.5 实现排序功能
|
||
|
||
- 添加排序下拉框（按性能分数、发布日期、价格）
|
||
- 实现升序/降序切换
|
||
- 调用API重新获取排序后的数据
|
||
- _需求: 2.4_
|
||
- [x] 11.6 实现产品对比选择
|
||
|
||
- 添加产品选择复选框
|
||
- 显示已选产品数量（最多4个）
|
||
- 添加"对比"按钮，跳转到对比页面
|
||
- _需求: 5.1_
|
||
|
||
- [x] 12. 实现产品详情页面
|
||
|
||
- [x] 12.1 创建ProductDetail视图
|
||
|
||
|
||
- 根据路由参数获取productId
|
||
- 调用productStore获取产品详情
|
||
- 显示产品基本信息（名称、型号、制造商、发布日期）
|
||
- 显示性能分数和当前排名
|
||
- _需求: 2.2, 2.3_
|
||
|
||
- [x] 12.2 显示规格参数
|
||
- 以表格形式展示Specifications
|
||
- 分组显示（如：处理器规格、图形规格）
|
||
- _需求: 2.2_
|
||
- [x] 12.3 显示性能测试分数
|
||
- 以卡片形式展示各项Benchmark分数
|
||
- 使用进度条可视化分数
|
||
- _需求: 2.2_
|
||
- [x] 12.4 显示数据来源信息
|
||
|
||
- 显示数据来源名称和链接
|
||
- 显示最后更新时间
|
||
- _需求: 10.2, 10.3, 10.4_
|
||
- [ ] 12.5 集成ECharts图表
|
||
- 安装vue-echarts
|
||
- 创建性能历史趋势折线图
|
||
- 创建性能指标雷达图
|
||
- 实现图表响应式
|
||
- _需求: 9.1, 9.3_
|
||
|
||
|
||
- [ ] 13. 实现产品对比页面
|
||
- [ ] 13.1 创建ProductComparison视图
|
||
- 从路由查询参数获取productIds
|
||
|
||
- 调用comparisonStore获取对比数据
|
||
- 显示对比产品的基本信息
|
||
- _需求: 5.1, 5.2_
|
||
- [ ] 13.2 创建ComparisonTable组件
|
||
- 以表格形式展示产品参数对比
|
||
- 高亮显示最优值（绿色）和最差值（红色）
|
||
- 支持横向滚动（移动端）
|
||
- _需求: 5.2, 5.4_
|
||
- [ ] 13.3 创建ComparisonChart组件
|
||
- 使用ECharts创建柱状图对比性能分数
|
||
- 使用雷达图对比多维度性能指标
|
||
- 实现图表交互（悬停显示详细数据）
|
||
- _需求: 5.3, 9.2_
|
||
|
||
- [ ] 14. 实现前端错误处理和加载状态
|
||
- [ ] 14.1 创建全局错误处理
|
||
- 在Axios拦截器中处理网络错误
|
||
- 显示Toast错误提示（使用Element Plus）
|
||
- 处理401/403/404/500等HTTP错误
|
||
- _需求: 8.4_
|
||
- [ ] 14.2 实现加载状态
|
||
- 在各个视图中添加Loading组件
|
||
- 使用Skeleton屏幕优化加载体验
|
||
- 实现数据加载失败重试按钮
|
||
- _需求: 8.4_
|
||
- [ ] 14.3 实现空状态处理
|
||
- 创建EmptyState组件
|
||
- 在无数据时显示友好提示
|
||
- 提供返回首页或重新加载按钮
|
||
- _需求: 8.4_
|
||
|
||
- [x] 15. 实现性能优化
|
||
- [x] 15.1 配置前端代码分割
|
||
- 配置Vite的代码分割策略
|
||
- 实现路由级别的懒加载
|
||
- 分离第三方库（vendor chunk）
|
||
- _需求: 8.4_
|
||
- [x] 15.2 实现图片优化
|
||
- 配置图片懒加载（使用Intersection Observer）
|
||
- 使用WebP格式图片（带降级方案）
|
||
- 实现图片占位符
|
||
- _需求: 8.4_
|
||
- [x] 15.3 配置后端缓存
|
||
- 安装StackExchange.Redis NuGet包
|
||
- 配置Redis连接
|
||
- 实现排名列表缓存（5分钟过期）
|
||
- 实现产品详情缓存（15分钟过期）
|
||
- _需求: 2.1, 2.3_
|
||
- [ ] 15.4 实现API响应压缩
|
||
- 配置Response Compression中间件
|
||
- 启用Gzip压缩
|
||
- _需求: 6.6_
|
||
- [ ] 15.5 配置数据库查询优化
|
||
- 使用AsNoTracking优化只读查询
|
||
- 实现Include预加载关联数据
|
||
- 避免N+1查询问题
|
||
- _需求: 7.2_
|
||
|
||
- [x] 16. 配置CORS和安全设置
|
||
- [x] 16.1 配置CORS策略
|
||
- 在Program.cs中配置CORS
|
||
- 允许前端域名访问
|
||
- 配置允许的HTTP方法和Headers
|
||
- _需求: 6.6_
|
||
- [ ] 16.2 配置API限流
|
||
- 安装AspNetCoreRateLimit NuGet包
|
||
- 配置IP限流规则（每分钟最多100请求）
|
||
- 配置端点级别限流
|
||
- _需求: 6.6_
|
||
- [ ] 16.3 配置输入验证
|
||
- 使用FluentValidation验证所有API输入
|
||
- 防止SQL注入（使用参数化查询）
|
||
- 清理和转义用户输入
|
||
- _需求: 6.7_
|
||
|
||
- [ ] 17. 配置日志和监控
|
||
- [ ] 17.1 配置Serilog
|
||
- 安装Serilog NuGet包
|
||
- 配置日志输出到文件和控制台
|
||
- 配置结构化日志格式
|
||
- 配置日志级别（Development: Debug, Production: Information）
|
||
- _需求: 3.6_
|
||
- [ ] 17.2 实现关键操作日志
|
||
- 记录数据采集任务执行日志
|
||
- 记录API错误日志
|
||
- 记录数据库操作异常日志
|
||
- _需求: 3.6_
|
||
- [ ] 17.3 配置Hangfire Dashboard监控
|
||
- 启用Hangfire Dashboard
|
||
- 配置Dashboard访问权限
|
||
- 监控后台任务执行状态
|
||
- _需求: 3.5_
|
||
|
||
- [ ] 18. 编写部署文档和配置
|
||
- [ ] 18.1 创建Docker配置
|
||
- 编写后端Dockerfile
|
||
- 编写前端Dockerfile
|
||
- 创建docker-compose.yml（包含API、前端、MySQL、Redis）
|
||
- _需求: 1.1_
|
||
- [ ] 18.2 创建环境配置文件
|
||
- 创建appsettings.Production.json
|
||
- 创建前端.env.production
|
||
- 配置生产环境数据库连接字符串
|
||
- 配置API密钥和外部服务配置
|
||
- _需求: 3.1, 3.2, 3.3_
|
||
- [ ] 18.3 编写部署文档
|
||
- 编写README.md（项目介绍、技术栈、功能特性）
|
||
- 编写DEPLOYMENT.md（部署步骤、环境要求、配置说明）
|
||
- 编写API文档（使用Swagger/OpenAPI）
|
||
- _需求: 1.1, 6.1, 6.2, 6.3, 6.4, 6.5_
|