WuYongJie/gongxiangp2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
gongxiangp2/.kiro/specs/code-refactoring/requirements.md
chenpei 0ce59be34e 备份：组织架构设计方案讨论前的代码快照 
- 包含所有当前修改和新功能
- 准备开始组织架构优化实施方案
2025-12-30 13:20:26 +08:00

4.6 KiB
Raw Blame History

Requirements Document

Introduction

对项目中三个最大的代码文件进行功能拆分重构，提高代码可维护性和可读性。目标文件：

  1. components/UploadModal.tsx (2703行) - 上传弹窗组件
  2. app/admin/page.tsx (2567行) - 管理后台页面
  3. app/page.tsx (2360行) - 首页

Glossary

  • UploadModal: 素材上传弹窗组件，支持15种素材类型的单个和批量上传
  • AdminPage: 管理后台页面，包含用户管理、素材管理、分类管理等功能
  • HomePage: 首页，包含素材列表、筛选、搜索、详情弹窗等功能
  • Hook: React自定义Hook，用于封装可复用的状态逻辑
  • 子组件: 从大组件中拆分出的独立UI组件

Requirements

Requirement 1: UploadModal 组件拆分

User Story: 作为开发者，我希望将 UploadModal 组件拆分为多个小模块，以便更容易维护和理解代码。

Acceptance Criteria

  1. WHEN 拆分状态管理逻辑 THEN THE System SHALL 创建 hooks/useUploadState.ts 封装所有 useState 和 useRef
  2. WHEN 拆分分类数据获取逻辑 THEN THE System SHALL 创建 hooks/useCategoryData.ts 封装分类、场景、平台的获取逻辑
  3. WHEN 拆分批量上传逻辑 THEN THE System SHALL 创建 hooks/useBatchUpload.ts 封装批量上传状态和处理函数
  4. WHEN 拆分拖拽处理逻辑 THEN THE System SHALL 创建 hooks/useDragHandlers.ts 封装所有拖拽相关的事件处理
  5. WHEN 拆分表单UI THEN THE System SHALL 创建 components/upload/UploadForm.tsx 封装表单字段渲染
  6. WHEN 拆分特殊类型批量上传UI THEN THE System SHALL 创建 components/upload/SpecialBatchUploadUI.tsx 封装音乐、视频、买家秀等特殊类型的批量上传界面
  7. WHEN 重构完成 THEN THE UploadModal.tsx SHALL 行数减少至 500 行以内
  8. WHEN 重构完成 THEN THE System SHALL 保持所有现有功能正常工作

Requirement 2: AdminPage 页面拆分

User Story: 作为开发者，我希望将管理后台页面拆分为多个独立模块，以便更容易添加新功能和维护现有功能。

Acceptance Criteria

  1. WHEN 拆分用户管理功能 THEN THE System SHALL 创建 components/admin/UserManagement.tsx 组件
  2. WHEN 拆分素材管理功能 THEN THE System SHALL 创建 components/admin/MaterialManagement.tsx 组件
  3. WHEN 拆分分类管理功能 THEN THE System SHALL 创建 components/admin/CategoryManagement.tsx 组件
  4. WHEN 拆分系统设置功能 THEN THE System SHALL 创建 components/admin/SystemSettings.tsx 组件
  5. WHEN 拆分统计数据展示 THEN THE System SHALL 创建 components/admin/AdminStats.tsx 组件
  6. WHEN 拆分管理后台状态 THEN THE System SHALL 创建 hooks/useAdminState.ts 封装管理后台的状态逻辑
  7. WHEN 重构完成 THEN THE admin/page.tsx SHALL 行数减少至 300 行以内
  8. WHEN 重构完成 THEN THE System SHALL 保持所有现有功能正常工作

Requirement 3: HomePage 页面拆分

User Story: 作为开发者，我希望将首页拆分为多个独立模块，以便更容易维护和扩展。

Acceptance Criteria

  1. WHEN 拆分筛选器功能 THEN THE System SHALL 创建 components/home/FilterPanel.tsx 组件
  2. WHEN 拆分素材网格展示 THEN THE System SHALL 创建 components/home/MaterialGrid.tsx 组件
  3. WHEN 拆分素材详情弹窗 THEN THE System SHALL 创建 components/home/MaterialDetailModal.tsx 组件
  4. WHEN 拆分搜索功能 THEN THE System SHALL 创建 components/home/SearchBar.tsx 组件
  5. WHEN 拆分分页功能 THEN THE System SHALL 创建 components/home/Pagination.tsx 组件
  6. WHEN 拆分首页状态管理 THEN THE System SHALL 创建 hooks/useHomeState.ts 封装首页的状态逻辑
  7. WHEN 拆分素材数据获取 THEN THE System SHALL 创建 hooks/useMaterials.ts 封装素材列表的获取和筛选逻辑
  8. WHEN 重构完成 THEN THE page.tsx SHALL 行数减少至 300 行以内
  9. WHEN 重构完成 THEN THE System SHALL 保持所有现有功能正常工作

Requirement 4: 代码质量保证

User Story: 作为开发者，我希望重构后的代码保持高质量，不引入新的问题。

Acceptance Criteria

  1. WHEN 重构完成 THEN THE System SHALL 通过 TypeScript 类型检查无错误
  2. WHEN 重构完成 THEN THE System SHALL 通过 ESLint 检查无错误
  3. WHEN 重构完成 THEN THE System SHALL 能够成功构建
  4. WHEN 重构完成 THEN THE System SHALL 所有页面功能正常可用
  5. WHEN 创建新文件 THEN THE System SHALL 使用中文注释说明模块功能
  6. WHEN 拆分组件 THEN THE System SHALL 保持 props 类型定义清晰