You've already forked DataMate
Jerry Yan
c8611d29ff
实现边分割边上传的流式处理，避免大文件一次性加载导致前端卡顿。 修改内容： 1. file.util.ts - 流式分割上传核心功能 - 新增 streamSplitAndUpload 函数，实现边分割边上传 - 新增 shouldStreamUpload 函数，判断是否使用流式上传 - 新增 StreamUploadOptions 和 StreamUploadResult 接口 - 优化分片大小（默认 5MB） 2. ImportConfiguration.tsx - 智能上传策略 - 大文件（>5MB）使用流式分割上传 - 小文件（≤5MB）使用传统分割方式 - 保持 UI 不变 3. useSliceUpload.tsx - 流式上传处理 - 新增 handleStreamUpload 处理流式上传事件 - 支持并发上传和更好的进度管理 4. TaskUpload.tsx - 进度显示优化 - 注册流式上传事件监听器 - 显示流式上传信息（已上传行数、当前文件等） 5. dataset.model.ts - 类型定义扩展 - 新增 StreamUploadInfo 接口 - TaskItem 接口添加 streamUploadInfo 和 prefix 字段 实现特点： - 流式读取：使用 Blob.slice 逐块读取，避免一次性加载 - 逐行检测：按换行符分割，形成完整行后立即上传 - 内存优化：buffer 只保留当前块和未完成行，不累积所有分割结果 - 并发控制：支持 3 个并发上传，提升效率 - 进度可见：实时显示已上传行数和总体进度 - 错误处理：单个文件上传失败不影响其他文件 - 向后兼容：小文件仍使用原有分割方式 优势： - 大文件上传不再卡顿，用户体验大幅提升 - 内存占用显著降低（从加载整个文件到只保留当前块） - 上传效率提升（边分割边上传，并发上传多个小文件） 相关文件： - frontend/src/utils/file.util.ts - frontend/src/pages/DataManagement/Detail/components/ImportConfiguration.tsx - frontend/src/hooks/useSliceUpload.tsx - frontend/src/pages/Layout/TaskUpload.tsx - frontend/src/pages/DataManagement/dataset.model.ts
🚀 快速开始
npm install # 安装依赖
npm run dev # 启动项目
npm run mock # 启动后台Mock服务（可选）
📁 项目结构
frontend/
├── public/ # 📖 文档中心
│ └── xxx/ # 标注工作台（可分离部署）
│
├── src/ # 🎨 前端应用
│ ├── apps/ # 多前端应用
│ │ ├── console/ # 数据工作台&运营控制台
│ │ │ ├── next.config.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ └── annotation-studio/ # 标注工作台（可分离部署）
│ │
│ ├── assets/ # 共享UI组件/SDK
│ │ ├── xxx/ # 数据工作台&运营控制台
│ │ │ ├── next.config.js
│ │ │ └── src/
│ │ │
│ │ │
│ │ └── xxx/ # 数据工作台&运营控制台
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── components/ # 构建与环境配置
│ │ ├── CardView.tsx # 数据工作台&运营控制台
│ │ ├── DetailHeader.tsx # 数据工作台&运营控制台
│ │ ├── RadioCard.tsx # 数据工作台&运营控制台
│ │ ├── SearchControls # 数据工作台&运营控制台
│ │ ├── TagList # 标注工作台（可分离部署）
│ │ └── TaskPopover # 标注工作台（可分离部署）
│ │
│ ├── hooks/ # 构建与环境配置
│ │ ├── console/ # 数据工作台&运营控制台
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ └── annotation-studio/ # 标注工作台（可分离部署）
│ │
│ ├── mock/ # 构建与环境配置
│ │ ├── console/ # 数据工作台&运营控制台
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ └── annotation-studio/ # 标注工作台（可分离部署）
│ │
│ ├── pages/ # 构建与环境配置
│ │ ├── console/ # 数据工作台&运营控制台
│ │ │ ├── next.config.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ └── annotation-studio/ # 标注工作台（可分离部署）
│ │
│ ├── providers/ # 构建与环境配置
│ │ ├── console/ # 数据工作台&运营控制台
│ │ │ ├── next.config.js
│ │ │ ├── package.json
│ │ │ └── src/
│ │ └── annotation-studio/ # 标注工作台（可分离部署）
│ │
│ ├── routes/ # 构建与环境配置
│ │ └── next.config.js
│ │
│ ├── types/ # 构建与环境配置
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ ├── next.config.js
│ │ └── next.config.js
│ │
│ └── utils/ # 构建与环境配置
│ ├── next.config.js
│ ├── next.config.js
│ └── next.config.js
│
├── eslint.config.js/ # 🔧 后端服务架构
├── index.html/ # 🔧 后端服务架构
├── package.json/ # 🔧 后端服务架构
├── README.md # 项目说明
├── tailwind.config.ts # 更新日志
├── vite.config.ts # 开源协议
└── pom.xml # Maven根配置