114 lines
4.2 KiB
Markdown
114 lines
4.2 KiB
Markdown
# 代码拆分计划
|
||
|
||
## 已完成
|
||
|
||
### ✅ 1. 会话过期时间修改
|
||
- **位置**: `lib/upload-sessions.ts`, `lib/upload-sessions-redis.ts`, `app/api/materials/upload/cleanup/route.ts`, `scripts/cleanup-upload-temp.ts`
|
||
- **修改**: 从 24 小时改为 8 小时
|
||
- **影响**: 所有上传会话现在 8 小时后自动过期
|
||
|
||
### ✅ 2. UploadModal.tsx 初步拆分
|
||
- **提取文件**:
|
||
- `components/upload/upload-constants.ts` - 常量定义
|
||
- `components/upload/upload-utils.ts` - 工具函数
|
||
- `components/upload/upload-types.ts` - 类型定义
|
||
- `hooks/useBatchUpload.ts` - 批量上传状态管理 Hook
|
||
|
||
## 待拆分的大文件
|
||
|
||
### 📦 UploadModal.tsx (3749行 → 目标: <2000行)
|
||
|
||
**建议拆分方案**:
|
||
|
||
1. **提取批量上传处理函数** (约800行)
|
||
- 创建 `components/upload/batch-upload-handlers.ts`
|
||
- 包含: `handleBatchFilesUpload`, `handleBatchMusicUpload`, `handleBatchVideoUpload` 等
|
||
- 使用自定义 Hook 管理状态
|
||
|
||
2. **提取文件处理函数** (约400行)
|
||
- 创建 `components/upload/file-handlers.ts`
|
||
- 包含: `handleZipChange`, `handleDrop`, `handleBatchFilesAdd` 等
|
||
- 包含拖拽处理逻辑
|
||
|
||
3. **提取UI组件** (约1500行)
|
||
- 创建 `components/upload/BatchFileList.tsx` - 批量文件列表组件
|
||
- 创建 `components/upload/BatchFileItem.tsx` - 单个批量文件项组件
|
||
- 创建 `components/upload/UploadProgress.tsx` - 上传进度显示组件
|
||
- 创建 `components/upload/FileDropZone.tsx` - 文件拖拽区域组件
|
||
|
||
4. **提取表单字段组件** (约500行)
|
||
- 创建 `components/upload/CategorySelector.tsx` - 分类选择器
|
||
- 创建 `components/upload/SceneSelector.tsx` - 场景选择器
|
||
- 创建 `components/upload/PreviewImageUploader.tsx` - 预览图上传组件
|
||
|
||
**拆分后结构**:
|
||
```
|
||
components/
|
||
├── UploadModal.tsx (主组件，约800行)
|
||
└── upload/
|
||
├── upload-constants.ts ✅
|
||
├── upload-utils.ts ✅
|
||
├── upload-types.ts ✅
|
||
├── batch-upload-handlers.ts (待创建)
|
||
├── file-handlers.ts (待创建)
|
||
├── BatchFileList.tsx (待创建)
|
||
├── BatchFileItem.tsx (待创建)
|
||
├── UploadProgress.tsx (待创建)
|
||
├── FileDropZone.tsx (待创建)
|
||
├── CategorySelector.tsx (待创建)
|
||
├── SceneSelector.tsx (待创建)
|
||
└── PreviewImageUploader.tsx (待创建)
|
||
```
|
||
|
||
### 📦 app/page.tsx (约2354行)
|
||
|
||
**建议拆分方案**:
|
||
|
||
1. **提取数据获取逻辑** (约400行)
|
||
- 创建 `hooks/useMaterials.ts` - 素材列表数据管理
|
||
- 创建 `hooks/useMaterialFilters.ts` - 筛选逻辑
|
||
|
||
2. **提取转码轮询逻辑** (约300行)
|
||
- 创建 `hooks/useTranscodePolling.ts` - 转码状态轮询
|
||
|
||
3. **提取UI组件** (约1000行)
|
||
- 创建 `components/material-list/MaterialGrid.tsx` - 素材网格
|
||
- 创建 `components/material-list/MaterialCard.tsx` - 素材卡片
|
||
- 创建 `components/material-list/FilterPanel.tsx` - 筛选面板
|
||
|
||
### 📦 app/admin/page.tsx (约2550行)
|
||
|
||
**建议拆分方案**:
|
||
|
||
1. **提取数据管理逻辑** (约500行)
|
||
- 创建 `hooks/useAdminData.ts` - 管理员数据管理
|
||
- 创建 `hooks/useUserManagement.ts` - 用户管理逻辑
|
||
|
||
2. **提取UI组件** (约1500行)
|
||
- 创建 `components/admin/UserList.tsx` - 用户列表
|
||
- 创建 `components/admin/MaterialList.tsx` - 素材列表
|
||
- 创建 `components/admin/StatsPanel.tsx` - 统计面板
|
||
- 创建 `components/admin/SystemStatus.tsx` - 系统状态
|
||
|
||
## 拆分优先级
|
||
|
||
1. **高优先级**: UploadModal.tsx (最大，影响开发体验)
|
||
2. **中优先级**: app/page.tsx (主页面，使用频繁)
|
||
3. **中优先级**: app/admin/page.tsx (管理页面，功能复杂)
|
||
|
||
## 拆分原则
|
||
|
||
1. **按功能拆分**: 每个文件负责一个明确的功能
|
||
2. **保持可维护性**: 拆分后的文件应该易于理解和修改
|
||
3. **避免过度拆分**: 不要为了拆分而拆分，保持合理的文件大小
|
||
4. **保持类型安全**: 使用 TypeScript 类型确保拆分后的代码类型安全
|
||
|
||
## 下一步行动
|
||
|
||
建议按以下顺序进行：
|
||
1. 继续拆分 UploadModal.tsx 的批量上传处理函数
|
||
2. 提取 UploadModal.tsx 的 UI 组件
|
||
3. 拆分 app/page.tsx
|
||
4. 拆分 app/admin/page.tsx
|
||
|