spider/ImagesDownloader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

++

Browse Source
This commit is contained in:
jack
2025-12-17 11:59:01 +08:00
parent cfe3db8de4
commit dbfa8dcff0
6 changed files with 1583 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+73 -170
View File
@@ -1,181 +1,84 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<title>HD4K下载测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
textarea {
height: 200px;
font-family: monospace;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
background-color: #f8f9fa;
}
.success {
color: #28a745;
}
.error {
color: #dc3545;
}
.status-item {
margin: 5px 0;
padding: 5px;
border-left: 3px solid #ddd;
}
.status-success {
border-left-color: #28a745;
}
.status-skipped {
border-left-color: #ffc107;
}
.status-failed {
border-left-color: #dc3545;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HD4K 下载管理</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<h1>HD4K下载测试</h1>
<div class="container">
<header>
<h1><i class="fas fa-download"></i> HD4K 下载管理</h1>
<p class="subtitle">管理未完成的下载任务</p>
</header>
<div class="form-group">
<label for="title">标题:</label>
<input type="text" id="title" value="测试">
<div class="control-panel">
<button id="reloadBtn" class="btn btn-primary">
<i class="fas fa-sync-alt"></i> 重载下载文件夹
</button>
<button id="cleanupBtn" class="btn btn-warning">
<i class="fas fa-trash-alt"></i> 清理JSON文件
</button>
<div class="status" id="statusMessage"></div>
</div>
<div class="folders-container">
<h2><i class="fas fa-folder-open"></i> 未完成的任务</h2>
<div id="foldersList" class="folders-list">
<!-- 文件夹列表将在这里动态生成 -->
</div>
<div id="noFolders" class="no-folders">
<i class="fas fa-check-circle"></i>
<p>所有下载任务已完成！</p>
</div>
</div>
<div class="api-info">
<h3><i class="fas fa-info-circle"></i> API 信息</h3>
<p>图片下载API: <code>POST http://127.0.0.1:<span id="port">55830</span>/api/save_imgs</code></p>
<p>请求格式: <code>{"title": "漫画标题", "imgs": {"001": "url1", "002": "url2"}}</code></p>
</div>
</div>
<div class="form-group">
<label for="jsonData">JSON数据:</label>
<textarea id="jsonData">{
"title": "测试",
"imgs": {
"0001": "https://i.imgur.com/3dV1KnX1.jpg",
"0002": "https://i.imgur.com/3dV1KnX2.jpg",
"0003": "https://i.imgur.com/3dV1KnX3.jpg",
"0004": "https://i.imgur.com/3dV1KnX4.jpg"
}
}</textarea>
<!-- 下载进度模态框 -->
<div id="downloadModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">下载进度</h3>
<button class="close-btn">&times;</button>
</div>
<div class="modal-body">
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
<div class="progress-text" id="progressText">0%</div>
</div>
<div class="download-stats">
<div class="stat-item">
<span class="stat-label">总文件数:</span>
<span class="stat-value" id="totalFiles">0</span>
</div>
<div class="stat-item">
<span class="stat-label">已下载:</span>
<span class="stat-value success" id="downloadedFiles">0</span>
</div>
<div class="stat-item">
<span class="stat-label">待下载:</span>
<span class="stat-value pending" id="pendingFiles">0</span>
</div>
</div>
<div class="log-container">
<h4>下载日志</h4>
<div class="log-content" id="downloadLog"></div>
</div>
</div>
<div class="modal-footer">
<button id="closeModalBtn" class="btn btn-secondary">关闭</button>
</div>
</div>
</div>
<button onclick="downloadComic()">开始下载</button>
<div id="result" class="result" style="display: none;"></div>
<script>
async function downloadComic() {
const title = document.getElementById('title').value;
const jsonData = document.getElementById('jsonData').value;
let imgs;
try {
imgs = JSON.parse(jsonData);
} catch (e) {
showResult('error', 'JSON格式错误: ' + e.message);
return;
}
const data = {
title: title,
imgs: imgs.imgs || imgs
};
try {
const response = await fetch('http://127.0.0.1:8888/api/save_imgs', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
const result = await response.json();
showResult('success', result);
} catch (error) {
showResult('error', '请求失败: ' + error.message);
}
}
function showResult(type, result) {
const resultDiv = document.getElementById('result');
resultDiv.style.display = 'block';
if (type === 'error') {
resultDiv.innerHTML = `<div class="error"><strong>错误:</strong> ${result}</div>`;
return;
}
let html = `<div class="success"><strong>下载完成!</strong></div>`;
html += `<p><strong>标题:</strong> ${result.title}</p>`;
html += `<p><strong>文件夹:</strong> ${result.folder}</p>`;
html += `<p><strong>总计:</strong> ${result.total} 张</p>`;
html += `<p><strong>新增:</strong> ${result.saved} 张</p>`;
html += `<p><strong>跳过:</strong> ${result.skipped} 张</p>`;
html += `<p><strong>失败:</strong> ${result.failed} 张</p>`;
html += `<p><strong>消息:</strong> ${result.message}</p>`;
if (result.details && result.details.length > 0) {
html += `<h3>下载详情:</h3>`;
result.details.forEach(detail => {
let statusClass = '';
if (detail.status === 'success') statusClass = 'status-success';
else if (detail.status === 'skipped') statusClass = 'status-skipped';
else if (detail.status === 'failed') statusClass = 'status-failed';
html += `
<div class="status-item ${statusClass}">
<strong>${detail.key}:</strong> ${detail.status} - ${detail.message}
${detail.saved_as ? ` (保存为: ${detail.saved_as})` : ''}
</div>
`;
});
}
resultDiv.innerHTML = html;
}
</script>
<script src="index.js"></script>
</body>
</html>