feat: 实现批量下载功能

This commit is contained in:
meishibiezb
2026-05-05 02:47:36 +08:00
parent a5c5b0b38c
commit f037897590
3 changed files with 107 additions and 20 deletions

View File

@@ -1,5 +1,6 @@
import './style.css';
import type { PinData } from '../../components/pin-collector';
import { startBatchDownload } from '../background';
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div class="popup">
@@ -10,11 +11,6 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<button id="start-btn">▶ 开始加载</button>
<button id="stop-btn">⏹ 停止</button>
</div>
<div class="download-options">
<label>
并行数: <input type="number" id="concurrency" value="5" min="1" max="20" style="width:50px" />
</label>
</div>
<div id="status"></div>
<div id="pinList"></div>
</div>
@@ -24,19 +20,18 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
document.getElementById('collectBtn')!.addEventListener('click', async () => {
showStatus('收集中...', 'info');
try {
const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
if (!tab?.id) {
showStatus('无法获取当前标签页', 'error');
return;
}
const response = await browser.tabs.sendMessage(tab.id, {
type: 'COLLECT_PINS',
});
if (response?.success) {
// await browser.storage.local.set({ collectedPins: response.pins });
// renderPins(response.pins as PinData[]);
await loadAndRender();
showStatus(`✅ 已收集 ${response.count} 个 Pin`, 'success');
await loadAndRender();
// 下载
const result = (await browser.storage.local.get('collectedPins')) as {
collectedPins?: PinData[];
};
const pins: PinData[] = result.collectedPins || [];
if (pins.length > 0) {
showStatus(`开始下载 ${pins.length} 张...`, 'info');
browser.runtime.sendMessage({ type: 'DOWNLOAD_PINS', pins, concurrency: 3 });
} else {
showStatus('没有可下载的图片', 'error');
}
} catch (e) {
const errMsg = e instanceof Error ? e.message : String(e);
@@ -126,4 +121,11 @@ browser.runtime.onMessage.addListener(async (msg) => {
`✅ 加载完成 · 共 ${msg.totalItems}`;
}
}
if (msg.type === 'DOWNLOAD_DONE') {
showStatus(
`✅ 下载完成: ${msg.success}/${msg.total}` +
(msg.failed > 0 ? ` (${msg.failed} 失败)` : ''),
'success'
);
}
});