78 lines
4.6 KiB
Markdown
78 lines
4.6 KiB
Markdown
# 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 类型定义清晰
|