Spaces:

Ethscriptions
/

Tomato-Novel-Downloader-web

Running

App Files Files Community

Nanny7 commited on Jul 5, 2025

Commit

2c8ad05

1 Parent(s): 2aa9e85

前端美化

Browse files

Files changed (2) hide show

__pycache__/server.cpython-313.pyc +0 -0
server.py +611 -78

__pycache__/server.cpython-313.pyc CHANGED Viewed

Binary files a/__pycache__/server.cpython-313.pyc and b/__pycache__/server.cpython-313.pyc differ

server.py CHANGED Viewed

@@ -60,66 +60,485 @@ def root():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>番茄小说下载器</title>
     <style>
-        body { background: url("https://bing.img.run/rand_uhd.php") no-repeat center center fixed; background-size: cover; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; margin: 0; padding: 0; }
-        .container { background: rgba(255, 255, 255, 0.9); width: 90%; max-width: 800px; margin: 20px auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); color: #333; }
-        textarea, input[type="text"], button { width: 100%; font-size: 16px; margin-top: 10px; padding: 12px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; }
-        input[type="text"] { background: #fff; color: #333; }
-        button { background: #0078D7; color: #fff; cursor: pointer; }
-        button:hover { background: #005A9E; }
-        progress { width: 100%; margin-top: 10px; }
-        a.download-link { color: #0078D7; text-decoration: none; display: block; margin-top: 10px; }
-        @media (max-width: 600px) {
-            .container { margin: 10px auto; padding: 10px; }
-            textarea, input[type="text"], button { font-size: 14px; padding: 8px; }
         }
-    </style>
 </head>
 <body>
-    <div class="container">
-    <h1>番茄小说下载器</h1>
-    <label for=\"book_ids\">小说ID列表（逗号或空格分隔）：</label><br/>
-    <textarea id=\"book_ids\" rows=\"4\" cols=\"50\"></textarea><br/>
-    <button id="downloadBtn">排队下载</button>
-    <div id=\"progress\" style=\"display:none;margin-top:10px;\">\n        <progress id=\"progBar\" value=\"0\" max=\"100\"></progress>\n        <span id=\"progText\">0%</span>\n    </div>\n    <div id="downloadResult" style="margin-top:10px;"></div>
-    <div id="queueSection" style="margin-top:20px;">
-        <h2>下载队列</h2>
-        <ul id="taskList"></ul>
-        <button id="refreshTasks" style="margin-top:5px;">刷新队列</button>
     </div>
-    <div id="completedSection" style="margin-top:20px;">
-        <h2>已下载小说</h2>
-        <input type="text" id="searchInput" placeholder="搜索已下载小说" style="width:70%; padding:8px; border:none; border-radius:4px;"/> <button id="searchBtn" style="padding:8px; margin-left:5px;">搜索</button>
-        <ul id="completedList"></ul>
-        <div id="pagination" style="margin-top:5px;">
-            <button id="prevPage">上一页</button> <span id="pageInfo">第1/1页</span> <button id="nextPage">下一页</button>
         </div>
-        <button id="refreshCompleted" style="margin-top:5px;">刷新已下载</button>
     </div>
     <script>
-    document.getElementById('downloadBtn').addEventListener('click', async function(){ // 动态排队或下载
-        const book_ids = document.getElementById('book_ids').value;
-        if (!book_ids) return;
-        // 根据当前队列决定是否排队
-        const tasks = await fetch('/tasks').then(res => res.json());
-        if (tasks.filter(t => t.status !== 'done').length > 0) {
-            const ids = book_ids.split(/[\s,;]+/).filter(id => id);
-            ids.forEach(bid => {
-                fetch(`/enqueue?book_id=${encodeURIComponent(bid)}`)
-                    .then(res => res.json())
-                    .then(() => fetchTasks())
-                    .catch(console.error);
-            });
             return;
         }
-        document.getElementById('progress').style.display = 'block';
-        fetch(`/download?book_ids=${encodeURIComponent(book_ids)}`).then(response=>{
             const total = response.headers.get('Content-Length');
             const reader = response.body.getReader();
             let received = 0;
             const chunks = [];
             function read() {
                 return reader.read().then(({done, value})=>{
                     if (done) {
@@ -131,36 +550,88 @@ def root():
                             const match = cd.match(/filename="?(.+)"?/);
                             if (match) filename = match[1];
                         }
-                        // 生成下载链接并展示
                         const link = document.createElement('a');
                         link.href = url;
                         link.download = filename;
-                        link.innerText = `下载完成：点击此处下载 ${filename}`;
-                        link.style.display = 'block';
-                        link.style.marginTop = '10px';
-                        document.getElementById('downloadResult').appendChild(link);
                         return;
                     }
                     chunks.push(value);
                     received += value.length;
                     if (total) {
                         const percent = Math.round(received / total * 100);
-                        document.getElementById('progBar').value = percent;
                         document.getElementById('progText').innerText = percent + '%';
                     }
                     return read();
                 });
             }
             read();
-        });
     });
     // 刷新队列和已下载列表
     function fetchTasks() {
         fetch('/tasks').then(res => res.json()).then(data => {
-            const ul = document.getElementById('taskList'); ul.innerHTML = '';
-            data.filter(task => task.status !== 'done').forEach(task => { const li = document.createElement('li'); li.textContent = `${task.name || task.book_id}: ${task.status}`; ul.appendChild(li); });
         });
     }
     // 分页和搜索设置
     let currentPage = 0;
     const pageSize = 10;
@@ -169,66 +640,128 @@ def root():
         const url = name ? `/search?name=${encodeURIComponent(name)}` : '/search';
         fetch(url).then(res => res.json()).then(data => {
             renderCompleted(data);
         });
     }
     function renderCompleted(data) {
-        const ul = document.getElementById('completedList');
-        ul.innerHTML = '';
         const total = data.length;
         const totalPages = Math.ceil(total / pageSize) || 1;
         if (currentPage >= totalPages) currentPage = totalPages - 1;
         const slice = data.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
         slice.forEach(item => {
-            const li = document.createElement('li');
-            const a = document.createElement('a');
-            a.href = item.url;
-            a.download = item.name;
-            a.textContent = item.name;
-            a.className = 'download-link';
-            li.appendChild(a);
-            ul.appendChild(li);
         });
         document.getElementById('pageInfo').innerText = `第${currentPage+1}/${totalPages}页`;
         document.getElementById('prevPage').disabled = currentPage === 0;
         document.getElementById('nextPage').disabled = currentPage + 1 >= totalPages;
     }
     document.getElementById('searchBtn').addEventListener('click', () => {
         currentPage = 0;
-        const name = document.getElementById('searchInput').value;
         fetchCompleted(name);
     });
     document.getElementById('prevPage').addEventListener('click', () => {
         if (currentPage > 0) {
             currentPage--;
-            const name = document.getElementById('searchInput').value;
             fetchCompleted(name);
         }
     });
     document.getElementById('nextPage').addEventListener('click', () => {
         currentPage++;
-        const name = document.getElementById('searchInput').value;
         fetchCompleted(name);
     });
-    // 初始化
-    fetchTasks();
-    fetchCompleted();
     document.getElementById('refreshCompleted').addEventListener('click', () => {
-        const name = document.getElementById('searchInput').value;
         fetchCompleted(name);
     });
-    // 自动刷新已下载（当无搜索时）
-    setInterval(() => {
-        if (!document.getElementById('searchInput').value) fetchCompleted();
-    }, 5000);
-    // 自动刷新队列
-    setInterval(fetchTasks, 2000);
     </script>
-    </div>
 </body>
 </html>
 """

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>🍅 番茄小说下载器</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+            line-height: 1.6;
+        }
+        .header {
+            text-align: center;
+            padding: 2rem 0;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            margin-bottom: 2rem;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: white;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            margin-bottom: 0.5rem;
+        }
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 1.1rem;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+        .card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+        }
+        .card-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #2d3748;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .card-title i {
+            color: #667eea;
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-label {
+            display: block;
+            font-weight: 500;
+            color: #4a5568;
+            margin-bottom: 0.5rem;
+        }
+        .form-input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: white;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .form-textarea {
+            resize: vertical;
+            min-height: 120px;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+        }
+        .btn-secondary {
+            background: #f7fafc;
+            color: #4a5568;
+            border: 2px solid #e2e8f0;
+        }
+        .btn-secondary:hover {
+            background: #edf2f7;
+            border-color: #cbd5e0;
+        }
+        .btn-small {
+            padding: 0.5rem 1rem;
+            font-size: 0.9rem;
+        }
+        .progress-container {
+            margin-top: 1rem;
+            display: none;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e2e8f0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-bottom: 0.5rem;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            border-radius: 4px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        .progress-text {
+            text-align: center;
+            font-size: 0.9rem;
+            color: #4a5568;
+        }
+        .download-result {
+            margin-top: 1rem;
+        }
+        .download-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1rem;
+            background: #f0fff4;
+            color: #22543d;
+            text-decoration: none;
+            border-radius: 8px;
+            border: 1px solid #9ae6b4;
+            margin-top: 0.5rem;
+            transition: all 0.3s ease;
+        }
+        .download-link:hover {
+            background: #c6f6d5;
+            transform: translateX(5px);
+        }
+        .list-container {
+            background: white;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .list-item {
+            padding: 1rem;
+            border-bottom: 1px solid #e2e8f0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: background 0.2s ease;
+        }
+        .list-item:hover {
+            background: #f7fafc;
+        }
+        .list-item:last-child {
+            border-bottom: none;
+        }
+        .status-badge {
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+        .status-queued {
+            background: #fef5e7;
+            color: #744210;
+        }
+        .status-progress {
+            background: #e6fffa;
+            color: #234e52;
+        }
+        .status-done {
+            background: #f0fff4;
+            color: #22543d;
+        }
+        .status-error {
+            background: #fed7d7;
+            color: #742a2a;
+        }
+        .search-container {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        .pagination {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: #f7fafc;
+        }
+        .full-width {
+            grid-column: 1 / -1;
+        }
+        @media (max-width: 768px) {
+            .grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .card {
+                padding: 1.5rem;
+            }
+            .search-container {
+                flex-direction: column;
+            }
         }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
 </head>
 <body>
+    <div class="header">
+        <h1><i class="fas fa-book"></i> 番茄小说下载器</h1>
+        <p>高效、便捷的小说下载工具</p>
     </div>
+    <div class="container">
+        <div class="grid">
+            <!-- 下载区域 -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-download"></i>
+                    开始下载
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="book_ids">
+                        <i class="fas fa-list"></i> 小说ID列表
+                    </label>
+                    <textarea
+                        id="book_ids"
+                        class="form-input form-textarea"
+                        placeholder="请输入小说ID，支持多个ID用逗号、分号或空格分隔&#10;例如：12345, 67890"
+                    ></textarea>
+                </div>
+                <button id="downloadBtn" class="btn btn-primary" style="width: 100%;">
+                    <i class="fas fa-rocket"></i>
+                    开始下载
+                </button>
+                <div id="progress" class="progress-container">
+                    <div class="progress-bar">
+                        <div id="progBar" class="progress-fill"></div>
+                    </div>
+                    <div id="progText" class="progress-text">0%</div>
+                </div>
+                <div id="downloadResult" class="download-result"></div>
+            </div>
+            <!-- 下载队列 -->
+            <div class="card">
+                <div class="card-title">
+                    <i class="fas fa-clock"></i>
+                    下载队列
+                    <button id="refreshTasks" class="btn btn-secondary btn-small" style="margin-left: auto;">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+                <div id="taskList" class="list-container">
+                    <div class="list-item">
+                        <span style="color: #a0aec0;">暂无下载任务</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 已下载小说 -->
+        <div class="card full-width">
+            <div class="card-title">
+                <i class="fas fa-check-circle"></i>
+                已下载小说
+                <button id="refreshCompleted" class="btn btn-secondary btn-small" style="margin-left: auto;">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+            </div>
+            <div class="search-container">
+                <input
+                    type="text"
+                    id="searchInput"
+                    class="form-input"
+                    placeholder="🔍 搜索已下载的小说..."
+                    style="flex: 1;"
+                />
+                <button id="searchBtn" class="btn btn-secondary">
+                    <i class="fas fa-search"></i>
+                    搜索
+                </button>
+            </div>
+            <div id="completedList" class="list-container">
+                <div class="list-item">
+                    <span style="color: #a0aec0;">暂无已下载小说</span>
+                </div>
+            </div>
+            <div class="pagination">
+                <button id="prevPage" class="btn btn-secondary btn-small">
+                    <i class="fas fa-chevron-left"></i>
+                    上一页
+                </button>
+                <span id="pageInfo">第1/1页</span>
+                <button id="nextPage" class="btn btn-secondary btn-small">
+                    下一页
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
         </div>
     </div>
     <script>
+    // 工具函数
+    function showNotification(message, type = 'info') {
+        // 简单的通知显示，可以后续扩展
+        console.log(`${type.toUpperCase()}: ${message}`);
+    }
+    function setButtonLoading(button, loading = true) {
+        if (loading) {
+            button.disabled = true;
+            const icon = button.querySelector('i');
+            if (icon) {
+                icon.className = 'fas fa-spinner fa-spin';
+            }
+        } else {
+            button.disabled = false;
+            const icon = button.querySelector('i');
+            if (icon && icon.classList.contains('fa-spinner')) {
+                icon.className = 'fas fa-rocket';
+            }
+        }
+    }
+    document.getElementById('downloadBtn').addEventListener('click', async function(){
+        const book_ids = document.getElementById('book_ids').value.trim();
+        if (!book_ids) {
+            showNotification('请输入小说ID', 'warning');
             return;
         }
+        const btn = this;
+        setButtonLoading(btn, true);
+        try {
+            // 根据当前队列决定是否排队
+            const tasks = await fetch('/tasks').then(res => res.json());
+            if (tasks.filter(t => t.status !== 'done').length > 0) {
+                const ids = book_ids.split(/[\s,;]+/).filter(id => id);
+                for (const bid of ids) {
+                    await fetch(`/enqueue?book_id=${encodeURIComponent(bid)}`);
+                }
+                fetchTasks();
+                showNotification(`已添加 ${ids.length} 个任务到队列`, 'success');
+                setButtonLoading(btn, false);
+                return;
+            }
+            // 显示进度条
+            const progressContainer = document.getElementById('progress');
+            progressContainer.style.display = 'block';
+            progressContainer.classList.add('fade-in');
+            const response = await fetch(`/download?book_ids=${encodeURIComponent(book_ids)}`);
             const total = response.headers.get('Content-Length');
             const reader = response.body.getReader();
             let received = 0;
             const chunks = [];
             function read() {
                 return reader.read().then(({done, value})=>{
                     if (done) {
                             const match = cd.match(/filename="?(.+)"?/);
                             if (match) filename = match[1];
                         }
+                        // 生成下载链接
                         const link = document.createElement('a');
                         link.href = url;
                         link.download = filename;
+                        link.className = 'download-link fade-in';
+                        link.innerHTML = `<i class="fas fa-download"></i> ${filename}`;
+                        const resultDiv = document.getElementById('downloadResult');
+                        resultDiv.innerHTML = '';
+                        resultDiv.appendChild(link);
+                        setButtonLoading(btn, false);
+                        progressContainer.style.display = 'none';
+                        showNotification('下载完成！', 'success');
                         return;
                     }
                     chunks.push(value);
                     received += value.length;
                     if (total) {
                         const percent = Math.round(received / total * 100);
+                        document.getElementById('progBar').style.width = percent + '%';
                         document.getElementById('progText').innerText = percent + '%';
                     }
                     return read();
                 });
             }
             read();
+        } catch (error) {
+            setButtonLoading(btn, false);
+            document.getElementById('progress').style.display = 'none';
+            showNotification('下载失败：' + error.message, 'error');
+        }
     });
     // 刷新队列和已下载列表
     function fetchTasks() {
         fetch('/tasks').then(res => res.json()).then(data => {
+            const container = document.getElementById('taskList');
+            const activeTasks = data.filter(task => task.status !== 'done');
+            if (activeTasks.length === 0) {
+                container.innerHTML = '<div class="list-item"><span style="color: #a0aec0;"><i class="fas fa-check"></i> 暂无下载任务</span></div>';
+                return;
+            }
+            container.innerHTML = '';
+            activeTasks.forEach(task => {
+                const div = document.createElement('div');
+                div.className = 'list-item fade-in';
+                const statusClass = {
+                    'queued': 'status-queued',
+                    'in-progress': 'status-progress',
+                    'error': 'status-error'
+                }[task.status] || 'status-queued';
+                const statusIcon = {
+                    'queued': 'fas fa-clock',
+                    'in-progress': 'fas fa-spinner fa-spin',
+                    'error': 'fas fa-exclamation-triangle'
+                }[task.status] || 'fas fa-clock';
+                const statusText = {
+                    'queued': '排队中',
+                    'in-progress': '下载中',
+                    'error': '失败'
+                }[task.status] || '未知';
+                div.innerHTML = `
+                    <span><i class="fas fa-book"></i> ${task.name || task.book_id}</span>
+                    <span class="status-badge ${statusClass}">
+                        <i class="${statusIcon}"></i> ${statusText}
+                    </span>
+                `;
+                container.appendChild(div);
+            });
+        }).catch(error => {
+            console.error('获取任务列表失败:', error);
         });
     }
     // 分页和搜索设置
     let currentPage = 0;
     const pageSize = 10;
         const url = name ? `/search?name=${encodeURIComponent(name)}` : '/search';
         fetch(url).then(res => res.json()).then(data => {
             renderCompleted(data);
+        }).catch(error => {
+            console.error('获取已下载列表失败:', error);
         });
     }
     function renderCompleted(data) {
+        const container = document.getElementById('completedList');
+        if (data.length === 0) {
+            container.innerHTML = '<div class="list-item"><span style="color: #a0aec0;"><i class="fas fa-inbox"></i> 暂无已下载小说</span></div>';
+            document.getElementById('pageInfo').innerText = '第1/1页';
+            document.getElementById('prevPage').disabled = true;
+            document.getElementById('nextPage').disabled = true;
+            return;
+        }
         const total = data.length;
         const totalPages = Math.ceil(total / pageSize) || 1;
         if (currentPage >= totalPages) currentPage = totalPages - 1;
+        if (currentPage < 0) currentPage = 0;
         const slice = data.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+        container.innerHTML = '';
         slice.forEach(item => {
+            const div = document.createElement('div');
+            div.className = 'list-item fade-in';
+            const link = document.createElement('a');
+            link.href = item.url;
+            link.download = item.name;
+            link.className = 'download-link';
+            link.innerHTML = `<i class="fas fa-download"></i> ${item.name}`;
+            link.style.textDecoration = 'none';
+            link.style.color = 'inherit';
+            div.appendChild(link);
+            container.appendChild(div);
         });
         document.getElementById('pageInfo').innerText = `第${currentPage+1}/${totalPages}页`;
         document.getElementById('prevPage').disabled = currentPage === 0;
         document.getElementById('nextPage').disabled = currentPage + 1 >= totalPages;
     }
+    // 事件监听器
     document.getElementById('searchBtn').addEventListener('click', () => {
         currentPage = 0;
+        const name = document.getElementById('searchInput').value.trim();
         fetchCompleted(name);
     });
+    document.getElementById('searchInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            currentPage = 0;
+            const name = e.target.value.trim();
+            fetchCompleted(name);
+        }
+    });
     document.getElementById('prevPage').addEventListener('click', () => {
         if (currentPage > 0) {
             currentPage--;
+            const name = document.getElementById('searchInput').value.trim();
             fetchCompleted(name);
         }
     });
     document.getElementById('nextPage').addEventListener('click', () => {
+        if (document.getElementById('nextPage').disabled) return;
         currentPage++;
+        const name = document.getElementById('searchInput').value.trim();
         fetchCompleted(name);
     });
+    document.getElementById('refreshTasks').addEventListener('click', () => {
+        const btn = document.getElementById('refreshTasks');
+        const icon = btn.querySelector('i');
+        icon.classList.add('fa-spin');
+        fetchTasks();
+        setTimeout(() => {
+            icon.classList.remove('fa-spin');
+        }, 1000);
+    });
     document.getElementById('refreshCompleted').addEventListener('click', () => {
+        const btn = document.getElementById('refreshCompleted');
+        const icon = btn.querySelector('i');
+        icon.classList.add('fa-spin');
+        const name = document.getElementById('searchInput').value.trim();
         fetchCompleted(name);
+        setTimeout(() => {
+            icon.classList.remove('fa-spin');
+        }, 1000);
     });
+    // 初始化
+    document.addEventListener('DOMContentLoaded', () => {
+        fetchTasks();
+        fetchCompleted();
+        // 自动刷新已下载（当无搜索时）
+        setInterval(() => {
+            if (!document.getElementById('searchInput').value.trim()) {
+                fetchCompleted();
+            }
+        }, 10000);
+        // 自动刷新队列
+        setInterval(fetchTasks, 3000);
+        // 添加一些交互效果
+        document.querySelectorAll('.card').forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.style.transform = 'translateY(-2px)';
+            });
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = 'translateY(0)';
+            });
+        });
+    });
     </script>
 </body>
 </html>
 """