u
This commit is contained in:
oneao committed
1 parent
04491e14a3
commit
12fdf320c2
12 files changed
+2493
-824
No files matched your search
@@ -0,0 +1,272 @@
|
||||
# Task Dock 重构计划
|
||||
|
||||
## 1. 项目分析
|
||||
|
||||
### 1.1 当前代码结构
|
||||
|
||||
* **index.js**: 包含 G3File 构造函数和所有核心逻辑
|
||||
|
||||
* **index.css**: 包含所有样式定义
|
||||
|
||||
* **libs/**: 包含 FileSaver 和 JSZip 库
|
||||
|
||||
### 1.2 当前下载进度条实现
|
||||
|
||||
* 位于 `g3-file-container` 内部
|
||||
|
||||
* 固定在顶部的 `download-progress-bar` 元素
|
||||
|
||||
* 仅支持下载任务
|
||||
|
||||
* 显示简单的进度信息
|
||||
|
||||
## 2. 重构目标
|
||||
|
||||
### 2.1 核心目标
|
||||
|
||||
1. **移除 download-progress-bar**
|
||||
2. **新增全局 task dock**（右下角浮层）
|
||||
3. **支持所有异步任务类型**（不限定 download/upload）
|
||||
|
||||
### 2.2 功能要求
|
||||
|
||||
1. **全局任务中心**：fixed 右下角浮层
|
||||
2. **通用任务模型**：id, name, type, progress, status
|
||||
3. **批量任务支持**：多个任务同时运行，批量更新进度
|
||||
4. **结果汇总**：总任务数、成功数、失败数
|
||||
5. **UI Lock**：任务运行时禁止页面其他操作
|
||||
6. **交互要求**：close，实时进度更新
|
||||
|
||||
## 3. 实现计划
|
||||
|
||||
### 3.1 文件修改
|
||||
|
||||
#### 3.1.1 index.js 修改
|
||||
|
||||
1. **移除 download-progress-bar 相关代码**：
|
||||
|
||||
* 删除 `showDownloadProgress` 方法
|
||||
|
||||
* 删除 `updateDownloadProgress` 方法
|
||||
|
||||
* 删除 `completeDownloadProgress` 方法
|
||||
|
||||
* 删除 `$downloadProgressBar` 变量
|
||||
|
||||
2. **新增 Task 管理功能**：
|
||||
|
||||
* 新增 `tasks` 数组存储任务列表
|
||||
|
||||
* 新增 `taskStats` 对象存储统计信息
|
||||
|
||||
* 新增 `addTask` 方法
|
||||
|
||||
* 新增 `updateTask` 方法
|
||||
|
||||
* 新增 `finishTask` 方法
|
||||
|
||||
* 新增 `updateTaskStats` 方法
|
||||
|
||||
* 新增 `clearTasks` 方法
|
||||
|
||||
3. **新增 Task Dock 管理**：
|
||||
|
||||
* 新增 `renderTaskDock` 方法
|
||||
|
||||
* 新增 `updateTaskDock` 方法
|
||||
|
||||
* 新增 `showTaskDock` 方法
|
||||
|
||||
* 新增 `hideTaskDock` 方法
|
||||
|
||||
* 新增 `minimizeTaskDock` 方法
|
||||
|
||||
4. **新增 UI Lock 功能**：
|
||||
|
||||
* 新增 `lockUI` 方法
|
||||
|
||||
* 新增 `unlockUI` 方法
|
||||
|
||||
* 新增 `isUILocked` 方法
|
||||
|
||||
5. **修改现有方法**：
|
||||
|
||||
* 修改 `internalDownloadBatch` 方法使用新的任务管理
|
||||
|
||||
* 修改 `handleDownload` 方法支持任务管理
|
||||
|
||||
#### 3.1.2 index.css 修改
|
||||
|
||||
1. **移除 download-progress-bar 样式**
|
||||
2. **新增 task-dock 相关样式**：
|
||||
|
||||
* `.task-dock`：基础容器样式
|
||||
|
||||
* `.dock-header`：头部样式
|
||||
|
||||
* `.dock-body`：身体样式
|
||||
|
||||
* `.progress-line`：进度行样式
|
||||
|
||||
* `.task-name`：任务名称样式
|
||||
|
||||
* `.task-type`：任务类型样式
|
||||
|
||||
* `.bar`：进度条样式
|
||||
|
||||
* `.bar-inner`：进度条内部样式
|
||||
|
||||
* `.task-result`：结果汇总样式
|
||||
|
||||
* `.ui-lock`：UI 锁定遮罩样式
|
||||
|
||||
### 3.2 实现步骤
|
||||
|
||||
1. **步骤 1：修改 CSS 样式**
|
||||
|
||||
* 移除 `download-progress-bar` 相关样式
|
||||
|
||||
* 添加 `task-dock` 相关样式
|
||||
|
||||
* 添加 `ui-lock` 遮罩样式
|
||||
|
||||
2. **步骤 2：修改 HTML 结构**
|
||||
|
||||
* 从 `render` 方法中移除 `download-progress-bar` 元素
|
||||
|
||||
* 添加 `task-dock` 元素到页面
|
||||
|
||||
3. **步骤 3：实现 Task 管理功能**
|
||||
|
||||
* 添加任务管理相关变量
|
||||
|
||||
* 实现任务管理方法
|
||||
|
||||
4. **步骤 4：实现 Task Dock UI 管理**
|
||||
|
||||
* 实现 dock 渲染和更新方法
|
||||
|
||||
* 实现 dock 显示/隐藏/最小化方法
|
||||
|
||||
5. **步骤 5：实现 UI Lock 功能**
|
||||
|
||||
* 实现 UI 锁定和解锁方法
|
||||
|
||||
6. **步骤 6：修改现有方法**
|
||||
|
||||
* 修改 `internalDownloadBatch` 方法使用新的任务管理
|
||||
|
||||
* 确保所有异步任务都通过任务中心管理
|
||||
|
||||
7. **步骤 7：测试验证**
|
||||
|
||||
* 测试批量下载功能
|
||||
|
||||
* 测试任务状态更新
|
||||
|
||||
* 测试 UI Lock 功能
|
||||
|
||||
* 测试交互功能（close、minimize）
|
||||
|
||||
## 4. 技术实现细节
|
||||
|
||||
### 4.1 任务模型
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: "task_123",
|
||||
name: "report.pdf",
|
||||
type: "download", // download / upload / custom
|
||||
progress: 0, // 0-100
|
||||
status: "running" // running / success / fail / paused
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 统计模型
|
||||
|
||||
```javascript
|
||||
{
|
||||
total: 10,
|
||||
success: 7,
|
||||
fail: 3
|
||||
}
|
||||
```
|
||||
|
||||
### 4.3 DOM 结构
|
||||
|
||||
```html
|
||||
<div class="task-dock">
|
||||
<div class="dock-header">
|
||||
<span class="title">Task Running</span>
|
||||
<div class="dock-actions">
|
||||
<button title="minimize">−</button>
|
||||
<button title="close">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dock-body">
|
||||
<div class="progress-line">
|
||||
<span class="count">3 / 10</span>
|
||||
<span class="percent">30%</span>
|
||||
</div>
|
||||
<div class="task-name">report.pdf</div>
|
||||
<div class="task-type">download / upload / custom</div>
|
||||
<div class="bar">
|
||||
<div class="bar-inner"></div>
|
||||
</div>
|
||||
<div class="task-result">
|
||||
Total: xxx | Success: xxx | Fail: xxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 4.4 样式设计
|
||||
|
||||
* **位置**：fixed 定位在右下角
|
||||
|
||||
* **大小**：固定宽度，高度自适应
|
||||
|
||||
* **颜色**：使用与现有设计一致的配色
|
||||
|
||||
* **动画**：平滑的显示/隐藏动画
|
||||
|
||||
* **响应式**：适配不同屏幕尺寸
|
||||
|
||||
## 5. 风险评估
|
||||
|
||||
### 5.1 潜在风险
|
||||
|
||||
1. **兼容性问题**：确保新功能在所有浏览器中正常工作
|
||||
2. **性能问题**：确保任务管理不会影响页面性能
|
||||
3. **用户体验**：确保新的任务中心比原有的进度条更直观易用
|
||||
|
||||
### 5.2 风险缓解措施
|
||||
|
||||
1. **兼容性测试**：在主流浏览器中测试功能
|
||||
2. **性能优化**：使用防抖和节流技术减少 DOM 更新
|
||||
3. **用户测试**：确保新的任务中心操作流畅直观
|
||||
|
||||
## 6. 预期效果
|
||||
|
||||
1. **功能增强**：支持多种任务类型，提供更详细的任务信息
|
||||
2. **用户体验**：右下角浮层不干扰主界面操作
|
||||
3. **可扩展性**：易于添加新的任务类型和功能
|
||||
4. **代码质量**：UI 与逻辑分离，代码结构清晰
|
||||
|
||||
## 7. 时间估计
|
||||
|
||||
* **CSS 样式修改**：30 分钟
|
||||
|
||||
* **HTML 结构修改**：15 分钟
|
||||
|
||||
* **Task 管理功能实现**：60 分钟
|
||||
|
||||
* **Task Dock UI 实现**：45 分钟
|
||||
|
||||
* **UI Lock 功能实现**：30 分钟
|
||||
|
||||
* **现有方法修改**：30 分钟
|
||||
|
||||
* **测试验证**：45 分钟
|
||||
|
||||
**总时间**：约 255 分钟（4.25 小时）
|
||||
Reference in new issue
Block a user