WuYongJie/gongxiangp2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
gongxiangp2/docs/code-split-plan.md

4.2 KiB
Raw Blame History

代码拆分计划

已完成

✅ 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