# 代码拆分计划

## 已完成

### ✅ 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