u

code/file-preview/.trae/documents/task_dock_optimization_plan.md

@@ -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 小时

code/file-preview/.trae/documents/upload_functionality_plan.md

@@ -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`：更新上传按钮的点击事件处理

code/file-preview/custom-file/feedback-dock-demo.html

@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Global Feedback Dock Demo</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+            color: #2c3e50;
+        }
+
+        .demo-section {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        h2 {
+            margin-bottom: 15px;
+            color: #34495e;
+            font-size: 18px;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        button:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-primary {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .btn-success {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-danger {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-warning {
+            background-color: #f39c12;
+            color: white;
+        }
+
+        .btn-info {
+            background-color: #1abc9c;
+            color: white;
+        }
+
+        /* 全局反馈 Dock 样式 */
+        .g3-feedback-dock {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 10000;
+            background: white;
+            border-bottom: 1px solid #e0e0e0;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transform: translateY(-100%);
+            transition: transform 0.3s ease;
+        }
+
+        .g3-feedback-dock.show {
+            transform: translateY(0);
+        }
+
+        .g3-feedback-dock.toast-mode {
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
+        .dock-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 20px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .dock-title {
+            font-weight: 600;
+            font-size: 14px;
+            color: #2c3e50;
+        }
+
+        .dock-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .dock-actions button {
+            padding: 4px 8px;
+            font-size: 12px;
+            background: #f5f5f5;
+            color: #666;
+            border-radius: 4px;
+        }
+
+        .dock-actions button:hover {
+            background: #e0e0e0;
+        }
+
+        .dock-body {
+            padding: 16px 20px;
+        }
+
+        .progress-line {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+            font-size: 13px;
+            color: #666;
+        }
+
+        .task-name {
+            margin-bottom: 12px;
+            font-size: 13px;
+            color: #333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .bar {
+            height: 6px;
+            background: #f0f0f0;
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 12px;
+        }
+
+        .bar-inner {
+            height: 100%;
+            background: #3498db;
+            transition: width 0.3s ease;
+            border-radius: 3px;
+        }
+
+        .task-result {
+            font-size: 12px;
+            color: #666;
+        }
+
+        /* Toast 样式 */
+        .toast-content {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .toast-icon {
+            font-size: 18px;
+        }
+
+        .toast-message {
+            flex: 1;
+            font-size: 14px;
+        }
+
+        /* Toast 类型样式 */
+        .g3-feedback-dock.toast-mode.success {
+            border-left: 4px solid #2ecc71;
+        }
+
+        .g3-feedback-dock.toast-mode.error {
+            border-left: 4px solid #e74c3c;
+        }
+
+        .g3-feedback-dock.toast-mode.warning {
+            border-left: 4px solid #f39c12;
+        }
+
+        .g3-feedback-dock.toast-mode.info {
+            border-left: 4px solid #3498db;
+        }
+
+        /* UI 锁定遮罩 */
+        .ui-lock {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255,255,255,0.7);
+            z-index: 9999;
+            display: none;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .g3-feedback-dock {
+                font-size: 13px;
+            }
+
+            .dock-header,
+            .dock-body {
+                padding: 10px 16px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Global Feedback Dock Demo</h1>
+
+        <div class="demo-section">
+            <h2>1. 任务模式（Task Mode）</h2>
+            <p>用于展示批量任务进度，如下载、上传等</p>
+            <div class="button-group">
+                <button class="btn-primary" onclick="startDownloadTask()">开始批量下载</button>
+                <button class="btn-success" onclick="startUploadTask()">开始批量上传</button>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>2. 提示模式（Toast Mode）</h2>
+            <p>用于单次操作反馈，如操作成功、失败等</p>
+            <div class="button-group">
+                <button class="btn-success" onclick="showSuccessToast()">成功提示</button>
+                <button class="btn-danger" onclick="showErrorToast()">错误提示</button>
+                <button class="btn-warning" onclick="showWarningToast()">警告提示</button>
+                <button class="btn-info" onclick="showInfoToast()">信息提示</button>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>3. 单个文件下载失败示例</h2>
+            <p>模拟单个文件下载失败的场景</p>
+            <div class="button-group">
+                <button class="btn-danger" onclick="simulateDownloadFailure()">模拟下载失败</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 全局反馈 Dock 容器 -->
+    <div class="g3-feedback-dock" id="feedbackDock">
+        <div class="dock-header">
+            <span class="dock-title">任务进行中</span>
+            <div class="dock-actions">
+                <button title="close" onclick="feedbackDock.clear()">×</button>
+            </div>
+        </div>
+        <div class="dock-body">
+            <!-- 任务模式内容 -->
+            <div class="task-content">
+                <div class="progress-line">
+                    <span class="count">0 / 0</span>
+                    <span class="percent">0%</span>
+                </div>
+                <div class="task-name"></div>
+                <div class="bar">
+                    <div class="bar-inner"></div>
+                </div>
+                <div class="task-result">
+                    总计: 0 | 成功: 0 | 失败: 0
+                </div>
+            </div>
+            <!-- Toast 模式内容 -->
+            <div class="toast-content" style="display: none;">
+                <div class="toast-icon"></div>
+                <div class="toast-message"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- UI 锁定遮罩 -->
+    <div class="ui-lock" id="uiLock"></div>
+
+    <script>
+        // 全局反馈 Dock 组件
+        class FeedbackDock {
+            constructor() {
+                this.dock = document.getElementById('feedbackDock');
+                this.uiLock = document.getElementById('uiLock');
+                this.tasks = [];
+                this.taskStats = {
+                    total: 0,
+                    success: 0,
+                    fail: 0
+                };
+                this.toastQueue = [];
+                this.isToastShowing = false;
+                this.currentMode = 'task'; // 'task' or 'toast'
+            }
+
+            // 生成唯一ID
+            generateUniqueId() {
+                return 'feedback_' + Math.random().toString(36).slice(2) + Date.now();
+            }
+
+            // 开始任务
+            startTask(taskConfig) {
+                const taskId = this.generateUniqueId();
+                const newTask = {
+                    id: taskId,
+                    name: taskConfig.name,
+                    type: taskConfig.type || 'custom',
+                    progress: 0,
+                    status: 'running'
+                };
+
+                this.tasks.push(newTask);
+                this.updateTaskStats();
+                this.switchMode('task');
+                this.show();
+                this.lockUI();
+
+                return taskId;
+            }
+
+            // 更新任务
+            updateTask(taskId, progress) {
+                const task = this.tasks.find(t => t.id === taskId);
+                if (task) {
+                    task.progress = progress;
+                    this.updateTaskDock();
+                }
+            }
+
+            // 完成任务
+            finishTask(taskId, status) {
+                const task = this.tasks.find(t => t.id === taskId);
+                if (task) {
+                    task.status = status || 'success';
+                    task.progress = 100;
+                    this.updateTaskStats();
+                    this.updateTaskDock();
+
+                    const allCompleted = this.tasks.every(
+                        t => t.status === 'success' || t.status === 'fail'
+                    );
+                    if (allCompleted) {
+                        this.unlockUI();
+                        // 3秒后自动隐藏
+                        setTimeout(() => {
+                            this.clear();
+                        }, 3000);
+                    }
+                }
+            }
+
+            // 显示 Toast
+            toast(options) {
+                const toastConfig = {
+                    type: options.type || 'info',
+                    message: options.message || '',
+                    duration: options.duration || 3000
+                };
+
+                this.toastQueue.push(toastConfig);
+                if (!this.isToastShowing) {
+                    this.showNextToast();
+                }
+            }
+
+            // 显示下一个 Toast
+            showNextToast() {
+                if (this.toastQueue.length === 0) {
+                    this.isToastShowing = false;
+                    return;
+                }
+
+                this.isToastShowing = true;
+                const toastConfig = this.toastQueue.shift();
+                this.switchMode('toast');
+                this.updateToast(toastConfig);
+                this.show();
+
+                // 自动隐藏
+                setTimeout(() => {
+                    this.hide();
+                    setTimeout(() => {
+                        this.showNextToast();
+                    }, 300);
+                }, toastConfig.duration);
+            }
+
+            // 切换模式
+            switchMode(mode) {
+                this.currentMode = mode;
+                const taskContent = this.dock.querySelector('.task-content');
+                const toastContent = this.dock.querySelector('.toast-content');
+
+                if (mode === 'task') {
+                    this.dock.classList.remove('toast-mode', 'success', 'error', 'warning', 'info');
+                    taskContent.style.display = 'block';
+                    toastContent.style.display = 'none';
+                } else {
+                    this.dock.classList.add('toast-mode');
+                    taskContent.style.display = 'none';
+                    toastContent.style.display = 'flex';
+                }
+            }
+
+            // 更新任务面板
+            updateTaskDock() {
+                if (this.tasks.length === 0) return;
+
+                // 获取当前正在运行的任务，或者最后一个任务
+                const currentTask = this.tasks.find(t => t.status === 'running') || this.tasks[this.tasks.length - 1];
+
+                if (currentTask) {
+                    const totalProgress = this.tasks.reduce((sum, task) => sum + task.progress, 0) / this.tasks.length;
+
+                    this.dock.querySelector('.dock-title').textContent = currentTask.type === 'upload' ? '上传任务' : '下载任务';
+                    this.dock.querySelector('.progress-line .count').textContent = `${this.taskStats.success + this.taskStats.fail} / ${this.taskStats.total}`;
+                    this.dock.querySelector('.progress-line .percent').textContent = `${Math.round(totalProgress)}%`;
+                    this.dock.querySelector('.task-name').textContent = currentTask.name;
+                    this.dock.querySelector('.bar .bar-inner').style.width = `${currentTask.progress}%`;
+                    this.dock.querySelector('.task-result').textContent = `总计: ${this.taskStats.total} | 成功: ${this.taskStats.success} | 失败: ${this.taskStats.fail}`;
+                }
+            }
+
+            // 更新 Toast
+            updateToast(config) {
+                const iconMap = {
+                    success: '✓',
+                    error: '✗',
+                    warning: '!',
+                    info: 'i'
+                };
+
+                this.dock.classList.remove('success', 'error', 'warning', 'info');
+                this.dock.classList.add(config.type);
+                this.dock.querySelector('.dock-title').textContent = this.getToastTitle(config.type);
+                this.dock.querySelector('.toast-icon').textContent = iconMap[config.type];
+                this.dock.querySelector('.toast-message').textContent = config.message;
+            }
+
+            // 获取 Toast 标题
+            getToastTitle(type) {
+                const titles = {
+                    success: '操作成功',
+                    error: '操作失败',
+                    warning: '警告',
+                    info: '信息'
+                };
+                return titles[type] || '信息';
+            }
+
+            // 更新任务统计
+            updateTaskStats() {
+                this.taskStats.total = this.tasks.length;
+                this.taskStats.success = this.tasks.filter(t => t.status === 'success').length;
+                this.taskStats.fail = this.tasks.filter(t => t.status === 'fail').length;
+            }
+
+            // 显示 Dock
+            show() {
+                this.dock.classList.add('show');
+            }
+
+            // 隐藏 Dock
+            hide() {
+                this.dock.classList.remove('show');
+            }
+
+            // 清空所有任务和 Toast
+            clear() {
+                this.tasks = [];
+                this.taskStats = { total: 0, success: 0, fail: 0 };
+                this.toastQueue = [];
+                this.isToastShowing = false;
+                this.hide();
+                this.unlockUI();
+            }
+
+            // 锁定 UI
+            lockUI() {
+                this.uiLock.style.display = 'block';
+            }
+
+            // 解锁 UI
+            unlockUI() {
+                this.uiLock.style.display = 'none';
+            }
+        }
+
+        // 初始化反馈 Dock
+        const feedbackDock = new FeedbackDock();
+
+        // 示例函数
+        function startDownloadTask() {
+            // 模拟批量下载任务
+            const files = ['file1.pdf', 'file2.jpg', 'file3.docx', 'file4.png', 'file5.txt'];
+            const taskIds = [];
+
+            files.forEach((file, index) => {
+                const taskId = feedbackDock.startTask({
+                    name: file,
+                    type: 'download'
+                });
+                taskIds.push(taskId);
+
+                // 模拟下载进度
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += 10;
+                    if (progress <= 100) {
+                        feedbackDock.updateTask(taskId, progress);
+                    } else {
+                        clearInterval(interval);
+                        // 模拟90%成功率
+                        const status = Math.random() > 0.1 ? 'success' : 'fail';
+                        feedbackDock.finishTask(taskId, status);
+                    }
+                }, 300);
+            });
+        }
+
+        function startUploadTask() {
+            // 模拟批量上传任务
+            const files = ['image1.png', 'document1.pdf', 'video1.mp4'];
+            const taskIds = [];
+
+            files.forEach((file, index) => {
+                const taskId = feedbackDock.startTask({
+                    name: file,
+                    type: 'upload'
+                });
+                taskIds.push(taskId);
+
+                // 模拟上传进度
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += 5;
+                    if (progress <= 100) {
+                        feedbackDock.updateTask(taskId, progress);
+                    } else {
+                        clearInterval(interval);
+                        // 模拟100%成功率
+                        feedbackDock.finishTask(taskId, 'success');
+                    }
+                }, 200);
+            });
+        }
+
+        function showSuccessToast() {
+            feedbackDock.toast({
+                type: 'success',
+                message: '操作成功！'
+            });
+        }
+
+        function showErrorToast() {
+            feedbackDock.toast({
+                type: 'error',
+                message: '操作失败，请重试！'
+            });
+        }
+
+        function showWarningToast() {
+            feedbackDock.toast({
+                type: 'warning',
+                message: '请注意，操作可能会影响其他功能！'
+            });
+        }
+
+        function showInfoToast() {
+            feedbackDock.toast({
+                type: 'info',
+                message: '这是一条信息提示。'
+            });
+        }
+
+        function simulateDownloadFailure() {
+            // 模拟单个文件下载失败
+            const fileName = 'important-document.pdf';
+            
+            // 模拟下载过程
+            setTimeout(() => {
+                // 下载失败，显示错误 Toast
+                feedbackDock.toast({
+                    type: 'error',
+                    message: `文件 ${fileName} 下载失败`
+                });
+            }, 1000);
+        }
+    </script>
+</body>
+</html>

code/file-preview/custom-file/index.css

@@ -1,21 +1,27 @@
+/* ============================================================================
+ * G3File 样式文件
+ * ============================================================================ */
+
 /* 整体布局 */
 .g3-file-container {
   height: 100%;
   display: flex;
   flex-direction: column;
-
   background: #ffffff;
-
   overflow: hidden;
 }
 
+/* 拖拽时的样式 */
+.g3-file-container.drag-over {
+  background: rgba(22, 93, 255, 0.05);
+  border: 2px dashed #165dff;
+}
+
 /* 头部样式 */
 .g3-file-container .header {
   display: flex;
   align-items: center;
-
   padding: 10px 14px;
-
   background: #fafbfc;
   border-bottom: 1px solid #eef0f2;
 }
@@ -25,18 +31,12 @@
   flex: 1;
   min-height: 0;
   padding: 4px 0px;
-
   overflow: auto;
-
   display: flex;
   flex-wrap: wrap;
-
   align-content: flex-start;
-
   border-left: 1px solid #eef0f2;
   border-right: 1px solid #eef0f2;
-
-  /* justify-content: center; */
 }
 
 .g3-file-container .main > * {
@@ -60,9 +60,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-
   padding: 10px 14px;
-
   background: #fafbfc;
   border-top: 1px solid #eee;
 }
@@ -115,11 +113,9 @@
   transition: all 0.2s ease;
   border: none;
   width: auto;
-
   height: 28px;
   line-height: 1;
   padding: 0 15px;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -155,11 +151,9 @@
   width: calc(50% - 26px);
   position: relative;
   cursor: pointer;
-
   border: 1px solid #eef0f2;
   border-radius: 8px;
   background: #fff;
-
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
@@ -228,7 +222,6 @@
   font-size: 12px;
   color: #999;
   line-height: 1.4;
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -258,7 +251,6 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
   overflow: hidden;
   border-top: 1px solid #f0f2f5;
 }
@@ -270,7 +262,6 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
-
   cursor: pointer;
   font-size: 12px;
   border-right: 1px solid #f0f2f5;
@@ -368,6 +359,45 @@
   z-index: 1;
 }
 
+/* 上传中标记 */
+.g3-file-item .g3-file-uploading-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: #165dff;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  z-index: 1;
+}
+
+/* 上传失败标记 */
+.g3-file-item .g3-file-failed-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: #ff4d4f;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  z-index: 1;
+}
+
+/* 上传成功标记 */
+.g3-file-item .g3-file-uploaded-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: #52c41a;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  z-index: 1;
+}
+
 /* 浮动删除按钮 */
 .g3-file-container .g3-file-delete-btn {
   position: absolute;
@@ -385,7 +415,6 @@
   z-index: 100;
   font-size: 12px;
   border: 1px solid #e8e8e8;
-
   transition: all 0.2s ease;
 }
 
@@ -404,14 +433,12 @@
 .g3-global-menu {
   position: absolute;
   z-index: 9999;
-
   width: 160px;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-  position: fixed; /* ⭐必须，不然一定会错位 */
+  position: fixed;
-
   visibility: hidden;
   pointer-events: none;
 }
@@ -474,7 +501,7 @@
   border-radius: 8px 8px 0 0;
 }
 
-.task-dock .dock-header .title {
+.task-dock .dock-header .dock-title {
   font-size: 14px;
   font-weight: 500;
   color: #333;
@@ -528,12 +555,6 @@
   text-overflow: ellipsis;
 }
 
-.task-dock .task-type {
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 12px;
-}
-
 .task-dock .bar {
   width: 100%;
   height: 6px;
@@ -556,6 +577,110 @@
   text-align: right;
 }
 
+/* 通知容器 */
+.notification-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* 通知样式 */
+.notification {
+  min-width: 300px;
+  max-width: 400px;
+  background: #ffffff;
+  border: 1px solid #eef0f2;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  pointer-events: auto;
+  transition: all 0.3s ease;
+}
+
+/* 通知内容 */
+.notification-content {
+  flex: 1;
+}
+
+/* 通知标题 */
+.notification-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+/* 通知消息 */
+.notification-message {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* 关闭按钮 */
+.notification-close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #666;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 12px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.notification-close:hover {
+  background: #f0f2f5;
+  color: #333;
+}
+
+/* 通知类型样式 */
+.notification-success {
+  border-left: 4px solid #52c41a;
+}
+
+.notification-warning {
+  border-left: 4px solid #faad14;
+}
+
+.notification-error {
+  border-left: 4px solid #ff4d4f;
+}
+
+.notification-info {
+  border-left: 4px solid #165dff;
+}
+
+/* 通知动画 */
+@keyframes slideIn {
+  from {
+    transform: translateX(100%) translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) translateY(0);
+    opacity: 1;
+  }
+}
+
+.notification-fade-out {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
 /* UI Lock 样式 */
 .ui-lock {
   position: fixed;

code/file-preview/index.html

@@ -64,11 +64,92 @@
 
   <script>
     $(function () {
+      // 存储权限信息
+      let userPermissions = {
+        approve: true,
+        edit: true,
+        rename: true,
+        copy: true,
+        move: true,
+        share: true,
+        history: true
+      };
+
+      // 模拟 API 请求获取权限
+      function fetchPermissions() {
+        return new Promise((resolve) => {
+          // 模拟 API 请求延迟
+          setTimeout(() => {
+            // 模拟从 API 获取的权限数据
+            const permissions = {
+              approve: true,
+              edit: true,
+              rename: true,
+              copy: true,
+              move: true,
+              share: true,
+              history: true
+            };
+            userPermissions = permissions;
+            resolve(permissions);
+          }, 500);
+        });
+      }
+
+      // 先获取权限，然后初始化组件
+      fetchPermissions().then(() => {
         const file = $('#fileContainer').G3File({
           language: 'zh-CN',
           data: [
             { name: 'test.jar', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/XI26033384.rar' },
           ],
+          uploadConfig: {
+            aliyun: {
+              // 模拟获取上传凭证的函数
+              getUploadToken: function (file) {
+                return new Promise((resolve) => {
+                  // 模拟 API 请求延迟
+                  setTimeout(() => {
+                    resolve({
+                      uploadUrl: `http://example.com/${file.name}`,
+                      // 其他阿里云上传所需的参数
+                      accessKeyId: 'test-access-key',
+                      accessKeySecret: 'test-secret-key',
+                      bucket: 'test-bucket',
+                      region: 'oss-cn-hangzhou'
+                    });
+                  }, 500);
+                });
+              }
+            },
+            // 自定义上传方法（注释掉以使用阿里云上传）
+            // customUpload: function(file) {
+            //   return new Promise((resolve, reject) => {
+            //     // 模拟上传延迟
+            //     setTimeout(() => {
+            //       // 模拟上传成功
+            //       resolve({
+            //         url: `http://custom-upload.com/${file.name}`,
+            //         uploadDate: new Date().toISOString()
+            //       });
+            //       // 模拟上传失败
+            //       // reject(new Error('上传失败'));
+            //     }, 1000);
+            //   });
+            // }
+          },
+          onUploadSuccess: function (file) {
+            console.log('上传成功:', file);
+            alert('上传成功：' + file.name);
+          },
+          onUploadError: function (file, error) {
+            console.error('上传失败:', file.name, error);
+            alert('上传失败：' + file.name);
+          },
+          onUploadComplete: function (successCount, failCount) {
+            console.log('上传完成:', successCount, '成功', failCount, '失败');
+            alert('上传完成：' + successCount + '成功，' + failCount + '失败');
+          },
           globalPermission: {
             select: true,
             upload: true,
@@ -98,6 +179,8 @@
           getActionMenu: function (file) {
             const menuItems = [];
 
+            // 根据权限添加菜单项
+            if (userPermissions.approve) {
               menuItems.push({
                 title: '审批',
                 onClick: function (f) {
@@ -105,7 +188,9 @@
                   alert('审批功能：' + f.name);
                 }
               });
+            }
 
+            if (userPermissions.edit) {
               menuItems.push({
                 title: '修改',
                 onClick: function (f) {
@@ -113,7 +198,9 @@
                   alert('修改功能：' + f.name);
                 }
               });
+            }
 
+            if (userPermissions.rename) {
               menuItems.push({
                 title: '重命名',
                 onClick: function (f) {
@@ -124,42 +211,47 @@
                   }
                 }
               });
+            }
 
+            if (userPermissions.copy) {
               menuItems.push({
                 title: '复制',
-            disabled: false,
                 onClick: function (f) {
                   console.log('复制文件:', f.name);
                   alert('复制功能：' + f.name);
                 }
               });
+            }
 
+            if (userPermissions.move) {
               menuItems.push({
                 title: '移动到文件夹',
-            disabled: false,
                 onClick: function (f) {
                   console.log('移动文件:', f.name);
                   alert('移动功能：' + f.name);
                 }
               });
+            }
 
+            if (userPermissions.share) {
               menuItems.push({
                 title: '分享',
-            disabled: false,
                 onClick: function (f) {
                   console.log('分享文件:', f.name);
                   alert('分享功能：' + f.name);
                 }
               });
+            }
 
+            if (userPermissions.history) {
               menuItems.push({
                 title: '历史版本',
-            disabled: false,
                 onClick: function (f) {
                   console.log('查看历史版本:', f.name);
                   alert('历史版本功能：' + f.name);
                 }
               });
+            }
 
             return menuItems;
           }
@@ -197,6 +289,7 @@
           }
         });
       });
+    });
   </script>
 
 </body>