feat: 增加获取图片源地址功能

entrypoints/popup/main.ts

@@ -26,11 +26,13 @@ document.getElementById('collectBtn')!.addEventListener('click', async () => {
       type: 'COLLECT_PINS',
     });
     if (response?.success) {
-      await loadAndRender();
+      await browser.storage.local.set({ collectedPins: response.pins });
+      renderPins(response.pins as PinData[]);
       showStatus(`✅ 已收集 ${response.count} 个 Pin`, 'success');
     }
-  } catch {
-    showStatus('请在花瓣网页面使用此功能', 'error');
+  } catch (e) {
+    const errMsg = e instanceof Error ? e.message : String(e);
+    showStatus(`错误: ${errMsg}`, 'error');
   }
 });
 
@@ -64,11 +66,12 @@ function renderPins(pins: PinData[]): void {
     .map(
       (pin) => `
     <div class="pin-item">
-      <img src="${pin.imgSrc}" loading="lazy" alt="${escapeHtml(pin.alt)}" />
+      <img src="${pin.imgSmallSrc}" loading="lazy" alt="${escapeHtml(pin.alt)}" />
       <div class="pin-info">
         <div class="pin-author">${escapeHtml(pin.author || '未知作者')} · ${escapeHtml(pin.time || '')}</div>
         <div class="pin-tags">${pin.tags.map(t => `#${escapeHtml(t)}`).join(' ')}</div>
-        <a class="pin-link" href="https://huaban.com${pin.url}" target="_blank">查看原图</a>
+        <a class="pin-link" href="https://huaban.com${pin.url}" target="_blank">查看详情</a>
+        <a class="pin-link" href="${escapeHtml(pin.imgSrc)}" target="_blank">查看原图</a>
       </div>
     </div>
   `
@@ -80,7 +83,7 @@ function showStatus(msg: string, type: 'info' | 'success' | 'error'): void {
   const statusEl = document.getElementById('status')!;
   statusEl.textContent = msg;
   statusEl.className = `status ${type}`;
-  setTimeout(() => (statusEl.textContent = ''), 3000);
+  setTimeout(() => (statusEl.textContent = ''), 8000);
 }
 
 function escapeHtml(str: string): string {