u

2026-04-27 22:11:59 +08:00
1 parent 3a951f764c
commit ae6ccad238
@@ -0,0 +1,116 @@
+# Task Dock 优化计划
+
+## 1. 需求分析
+
+### 1.1 现有功能
+
+- 当前 `task-dock` 是一个固定在右下角的任务面板
+- 主要用于显示文件下载任务的进度和结果
+- 包含任务标题、进度条、任务名称和结果统计
+- 支持动画效果和基本交互
+
+### 1.2 优化目标
+
+- 将 `task-dock` 封装为通用的通知组件，类似 Element Plus 的 Notification
+- 支持自定义 content，包括 success、warning、error、info 等类型
+- 保留现有的 task 结构和功能
+- 提供更灵活的配置选项
+
+## 2. 技术方案
+
+### 2.1 组件结构优化
+
+1. **重命名和重构**：将 `task-dock` 重命名为更通用的 `notification` 或 `toast` 组件
+2. **类型支持**：添加不同类型的样式和图标支持
+3. **配置选项**：提供更灵活的配置选项，如位置、持续时间、可关闭性等
+4. **内容自定义**：支持自定义内容，包括 HTML 内容
+
+### 2.2 核心功能扩展
+
+1. **通知类型**：支持 success、warning、error、info 等类型
+2. **任务模式**：保留现有的任务模式，用于显示进度和结果
+3. **自动关闭**：支持设置自动关闭时间
+4. **手动关闭**：支持手动关闭通知
+5. **堆叠显示**：支持多个通知堆叠显示
+
+### 2.3 样式优化
+
+1. **类型样式**：为不同类型的通知添加不同的样式和图标
+2. **动画效果**：优化动画效果，支持淡入淡出和滑动效果
+
+   <br />
+
+   3\. 实现步骤
+
+### 3.1 修改 HTML 结构
+
+1. 重构 `task-dock` 的 HTML 结构，使其更通用
+2. 添加类型相关的 CSS 类和图标
+3. 支持自定义内容的容器
+
+### 3.2 扩展 JavaScript 功能
+
+1. 创建通用的通知方法，如 `showNotification`、`showTask` 等
+2. 添加类型支持和配置选项
+3. 实现通知的创建、更新和销毁逻辑
+4. 保留现有的任务管理功能
+
+### 3.3 优化 CSS 样式
+
+1. 为不同类型的通知添加样式
+2. 优化动画效果
+3. 确保样式的可扩展性和可定制性
+
+### 3.4 测试和验证
+
+1. 测试不同类型的通知显示
+2. 测试任务模式的功能
+3. 测试通知的堆叠和自动关闭功能
+4. 验证与现有功能的兼容性
+
+## 4. 预期效果
+
+### 4.1 通用通知功能
+
+- 支持不同类型的通知显示
+- 支持自定义内容和配置
+- 支持自动关闭和手动关闭
+- 支持多个通知堆叠显示
+
+### 4.2 任务管理功能
+
+- 保留现有的任务进度显示
+- 支持任务结果统计
+- 与通用通知功能无缝集成
+
+### 4.3 视觉效果
+
+- 现代化的设计风格
+- 流畅的动画效果
+- 清晰的视觉层次
+- 响应式布局
+
+## 5. 风险评估
+
+### 5.1 潜在风险
+
+- 现有功能可能受到影响
+- 样式冲突可能出现
+- 性能问题（多个通知同时显示）
+
+### 5.2 风险缓解措施
+
+- 保持向后兼容性
+- 仔细测试现有功能
+- 优化通知的创建和销毁逻辑
+- 限制同时显示的通知数量
+
+## 6. 时间估计
+
+- 设计和规划：1 小时
+- HTML 结构修改：1 小时
+- JavaScript 功能扩展：2 小时
+- CSS 样式优化：1 小时
+- 测试和验证：1 小时
+
+总计：6 小时
@@ -0,0 +1,135 @@
+# 上传功能实现计划
+
+## 1. 需求分析
+
+### 1.1 现有功能
+- 当前 `G3File` 组件的上传功能通过 `onUpload` 回调函数处理
+- 上传按钮点击时，会获取所有状态为 `pending` 的文件并调用 `onUpload` 回调
+- 没有内置的上传实现，完全依赖外部回调
+
+### 1.2 需求目标
+- 实现阿里云内部上传方法
+- 保留外部方法，允许用户动态获取阿里云key等信息
+- 支持外部自定义上传方法
+- 只上传未上传（状态为 `pending`）的文件
+- 上传成功后，将上传成功的 fileitem 传给外部调用，上传成功一个就触发一次
+
+## 2. 技术方案
+
+### 2.1 核心功能设计
+1. **上传配置**：添加上传相关的配置选项，包括阿里云上传配置和自定义上传方法
+2. **上传方法**：实现阿里云内部上传方法和外部自定义上传方法的支持
+3. **上传流程**：优化上传流程，只上传未上传的文件，上传成功后触发回调
+4. **状态管理**：管理文件的上传状态，包括 `pending`、`uploading`、`uploaded`、`failed` 等
+
+### 2.2 配置选项
+- `uploadConfig`：上传配置对象，包含阿里云上传配置和自定义上传方法
+- `onUploadSuccess`：上传成功回调，上传成功一个文件就触发一次
+- `onUploadError`：上传失败回调
+- `onUploadComplete`：所有文件上传完成回调
+
+### 2.3 上传流程
+1. 用户点击上传按钮
+2. 组件获取所有状态为 `pending` 的文件
+3. 检查是否配置了自定义上传方法，如果有则使用自定义方法
+4. 如果没有自定义上传方法，则使用阿里云内部上传方法
+5. 逐个上传文件，更新文件状态为 `uploading`
+6. 上传成功后，更新文件状态为 `uploaded`，并触发 `onUploadSuccess` 回调
+7. 上传失败后，更新文件状态为 `failed`，并触发 `onUploadError` 回调
+8. 所有文件上传完成后，触发 `onUploadComplete` 回调
+
+## 3. 实现步骤
+
+### 3.1 修改 HTML 结构
+- 无需修改 HTML 结构，使用现有的上传按钮
+
+### 3.2 扩展 JavaScript 功能
+1. **添加上传配置选项**：在 `defaults` 中添加上传相关的配置选项
+2. **实现上传方法**：
+   - `internalUpload`：内部上传方法，支持阿里云上传
+   - `handleUpload`：处理上传逻辑，支持自定义上传方法
+3. **更新上传流程**：修改 `$btnUpload` 的点击事件处理，使用新的上传逻辑
+4. **添加回调方法**：实现 `onUploadSuccess`、`onUploadError`、`onUploadComplete` 回调
+
+### 3.3 优化 CSS 样式
+- 为上传状态添加相应的样式，如上传中、上传失败等
+
+### 3.4 测试和验证
+1. 测试阿里云内部上传功能
+2. 测试外部自定义上传方法
+3. 测试上传状态管理
+4. 测试回调函数触发
+
+## 4. 预期效果
+
+### 4.1 上传功能
+- 支持阿里云内部上传
+- 支持外部自定义上传方法
+- 只上传未上传的文件
+- 上传成功后触发回调
+
+### 4.2 状态管理
+- 清晰的上传状态管理
+- 上传中、上传成功、上传失败等状态的视觉反馈
+
+### 4.3 回调机制
+- 上传成功一个文件就触发一次 `onUploadSuccess` 回调
+- 上传失败触发 `onUploadError` 回调
+- 所有文件上传完成触发 `onUploadComplete` 回调
+
+## 5. 风险评估
+
+### 5.1 潜在风险
+- 阿里云上传配置复杂，可能出现配置错误
+- 自定义上传方法可能与内部上传逻辑冲突
+- 上传过程中可能出现网络错误
+
+### 5.2 风险缓解措施
+- 提供详细的配置文档
+- 确保自定义上传方法与内部上传逻辑的兼容性
+- 添加错误处理和重试机制
+
+## 6. 实现细节
+
+### 6.1 上传配置
+```javascript
+uploadConfig: {
+  aliyun: {
+    // 阿里云配置是可选的
+    // getUploadToken 是必须的，用于动态获取上传凭证
+    getUploadToken: null // 动态获取上传凭证的函数，返回 Promise
+  },
+  customUpload: null // 自定义上传方法
+}
+```
+
+### 6.2 回调函数
+```javascript
+onUploadSuccess: function(file) {
+  // 上传成功回调
+},
+onUploadError: function(file, error) {
+  // 上传失败回调
+},
+onUploadComplete: function(successCount, failCount) {
+  // 所有文件上传完成回调
+}
+```
+
+### 6.3 上传方法
+- `internalUpload(file, callback)`：内部上传方法
+- `handleUpload(files)`：处理上传逻辑
+
+## 7. 代码结构
+
+### 7.1 主要修改文件
+- `custom-file/index.js`：扩展上传功能
+
+### 7.2 新增方法
+- `internalUpload`：内部上传方法
+- `handleUpload`：处理上传逻辑
+- `updateFileStatus`：更新文件状态
+
+### 7.3 修改方法
+- `init`：初始化上传配置
+- `bindEvents`：更新上传按钮的点击事件处理