feat: 添加下载功能的等待状态支持

electron/electron-down.js

@@ -2,16 +2,17 @@ const {BrowserWindow, screen, shell, ipcMain} = require('electron')
 const fs = require('fs');
 const path = require('path');
 const loger = require("electron-log");
-const {default: electronDl, download} = require("@dootask/electron-dl");
+const {default: electronDl, download, CancelError} = require("@dootask/electron-dl");
 const utils = require("./lib/utils");
 const {DownloadManager, DownloadStore} = require("./lib/download-manager");
 
 const downloadManager = new DownloadManager();
 
 let downloadWindow = null,
-    downloadLanguageCode = 'zh';
+    downloadLanguageCode = 'zh',
+    downloadWaiting = false;
 
-function initialize(onStarted= null) {
+function initialize(onStarted = null) {
     // 下载配置
     electronDl({
         showBadge: false,
@@ -19,6 +20,7 @@ function initialize(onStarted= null) {
 
         onStarted: (item) => {
             downloadManager.add(item);
+            downloadWaiting = false;
             syncDownloadItems();
             if (typeof onStarted === 'function') {
                 onStarted(item)
@@ -55,7 +57,8 @@ function initialize(onStarted= null) {
         switch (action) {
             case "get": {
                 return {
-                    items: downloadManager.get()
+                    items: downloadManager.get(),
+                    waiting: downloadWaiting,
                 };
             }
 
@@ -107,10 +110,32 @@ function initialize(onStarted= null) {
     });
 }
 
+async function createDownload(window_, url, options = {}) {
+    downloadWaiting = true;
+    syncDownloadItems();
+    try {
+        return await download(window_, url, options);
+    } catch (error) {
+        // electron-dl rejects with CancelError when a download is cancelled; treat it as expected.
+        const isCancelError = (typeof CancelError === 'function' && error instanceof CancelError)
+            || error?.name === 'CancelError';
+        if (!isCancelError) {
+            throw error;
+        }
+        return null;
+    } finally {
+        downloadWaiting = false;
+        syncDownloadItems();
+    }
+}
+
 function syncDownloadItems() {
     // 同步下载项到渲染进程
     if (downloadWindow) {
-        downloadWindow.webContents.send('download-items', downloadManager.get());
+        downloadWindow.webContents.send('download-items', {
+            items: downloadManager.get(),
+            waiting: downloadWaiting,
+        });
     }
 }
 
@@ -654,7 +679,7 @@ async function updateWindow(language, theme) {
 
 module.exports = {
     initialize,
-    download,
+    createDownload,
     open,
     close,
     destroy,

electron/electron.js

@@ -2947,7 +2947,7 @@ ipcMain.on("rendererReq", async (event, args) => {
                 ret = await electronDown.updateWindow(args.language, args.theme);
                 break;
             case 'createDownload':
-                ret = await electronDown.download(mainWindow, args.url, args.options || {});
+                ret = await electronDown.createDownload(mainWindow, args.url, args.options || {});
                 break;
             case 'watchFile':
                 ret = await watchFile(args.path);

electron/render/download/index.html

@@ -35,7 +35,7 @@
 
     <div class="content">
         <div class="tab-content all-tasks">
-            <div v-if="list.length === 0" class="empty-state">
+            <div v-if="list.length === 0 && waiting === false" class="empty-state">
                 <div class="empty-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
                         <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
@@ -44,6 +44,28 @@
                 <div class="empty-text">{{ query ? lang.noSearchResult : lang.noItems }}</div>
             </div>
             <div v-else class="task-list">
+                <!-- 骨架条目 -->
+                <div v-if="waiting" class="task-item skeleton-item">
+                    <div class="task-icon">
+                        <div class="skeleton-file-icon"></div>
+                    </div>
+                    <div class="task-info">
+                        <div class="task-name">
+                            <div class="skeleton-name"></div>
+                        </div>
+                        <div class="task-meta">
+                            <span class="skeleton-size"></span>
+                            <span class="skeleton-time"></span>
+                            <span class="skeleton-status"></span>
+                        </div>
+                    </div>
+                    <div class="task-actions">
+                        <div class="skeleton-btn"></div>
+                        <div class="skeleton-btn"></div>
+                        <div class="skeleton-btn"></div>
+                    </div>
+                </div>
+                <!-- 任务列表 -->
                 <div
                     v-for="(item, index) in list"
                     :key="index"
@@ -60,7 +82,7 @@
                         <div class="task-meta">
                             <!-- 大小 -->
                             <span v-if="item.state === 'progressing'" class="file-size">
-                                {{ formatBytes(item.received) }}<template v-if="item.total > 0"> / {{ formatBytes(item.total) }}</template> ({{ item.percent }}%)
+                                {{ formatBytes(item.received) }}<template v-if="item.total > 0"> / {{ formatBytes(item.total) }}</template><template v-if="item.percent >= 0"> ({{ item.percent }}%)</template>
                             </span>
                             <span v-else class="file-size">
                                 {{ formatBytes(item.total) }}
@@ -135,7 +157,10 @@
         data() {
             return {
                 query: '',
+
                 items: [],
+                waiting: false,
+
                 lang: {
                     // 语言设置
                     locale: 'zh-CN',
@@ -193,8 +218,9 @@
             this.getList();
 
             // 监听下载任务列表
-            electron?.listener('download-items', (items) => {
+            electron?.listener('download-items', ({items, waiting}) => {
                 this.items = items
+                this.waiting = waiting
             });
 
             // 接收主题
@@ -251,6 +277,7 @@
                 try {
                     const data = await this.sendAsync('get');
                     this.items = data.items || [];
+                    this.waiting = data.waiting || false;
                 } catch (e) {
                     console.error('加载下载任务失败:', e);
                 }

electron/render/download/style.css

@@ -286,6 +286,82 @@ body {
     color: var(--color-empty-text);
 }
 
+/* 骨架屏样式 */
+.skeleton-item {
+    opacity: 0.7;
+}
+
+.skeleton-item:last-child {
+    border-bottom: none;
+}
+
+/* 骨架元素基础动画 */
+@keyframes skeleton-shimmer {
+    0% {
+        background-position: -200px 0;
+    }
+    100% {
+        background-position: calc(200px + 100%) 0;
+    }
+}
+
+.skeleton-file-icon,
+.skeleton-name,
+.skeleton-size,
+.skeleton-time,
+.skeleton-status,
+.skeleton-btn {
+    background: linear-gradient(90deg, var(--color-task-item-border) 25%, var(--color-task-item-hover-bg) 50%, var(--color-task-item-border) 75%);
+    background-size: 200px 100%;
+    animation: skeleton-shimmer 1.5s infinite linear;
+    border-radius: 4px;
+}
+
+/* 骨架文件图标 */
+.skeleton-file-icon {
+    width: 32px;
+    height: 32px;
+    margin: 0 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 骨架文件名 */
+.skeleton-name {
+    height: 13px;
+    width: 60%;
+    margin: 4px 0 6px;
+    max-width: 200px;
+}
+
+/* 骨架元信息 */
+.skeleton-size {
+    height: 12px;
+    width: 80px;
+}
+
+.skeleton-time {
+    height: 12px;
+    width: 100px;
+}
+
+.skeleton-status {
+    height: 12px;
+    width: 60px;
+    padding: 2px 8px;
+    border-radius: 12px;
+}
+
+/* 骨架操作按钮 */
+.skeleton-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
 /* 任务列表 */
 .task-list {
     padding: 0;
@@ -294,7 +370,8 @@ body {
 .task-item {
     display: flex;
     align-items: center;
-    padding: 16px 24px;
+    height: 72px;
+    padding: 0 24px;
     background: var(--color-task-item-bg);
     border-bottom: 1px solid var(--color-task-item-border);
     transition: background-color 0.15s;
@@ -353,8 +430,7 @@ body {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
-    gap: 6px;
     min-width: 0;
 }
 

resources/assets/js/store/actions.js

@@ -465,6 +465,11 @@ export default {
             url = $A.urlAddParams(url, params);
         }
         if ($A.Electron) {
+            $A.Electron.request({
+                action: 'openDownloadWindow',
+                language: languageName,
+                theme: state.themeName,
+            });
             $A.Electron.request({
                 action: 'createDownload',
                 url