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

components/pin-collector.ts

@@ -5,6 +5,8 @@
 export interface PinData {
   /** 相对路径，如 "/pins/7118240882" */
   url: string;
+  /** 图片缩略图地址 */
+  imgSmallSrc: string;
   /** 图片源地址 */
   imgSrc: string;
   /** 图片原始宽度 */
@@ -120,9 +122,12 @@ export class PinCollector {
     const width = parseFloat(img.getAttribute('width') || '0');
     const height = parseFloat(img.getAttribute('height') || '0');
 
+    const originalSrc = img.src.replace(/_fw\d+(webp)?/, '');
+
     return {
       url: href,
-      imgSrc: img.src,
+      imgSmallSrc: img.src,
+      imgSrc: originalSrc,
       imgWidth: width,
       imgHeight: height,
       alt: altText,

entrypoints/content.ts

@@ -9,15 +9,12 @@ export default defineContentScript({
 
     const collector = new PinCollector();
     // 首次加载自动收集并存储
-    const pins = collector.collect();
-    if (pins.length > 0) {
-      collector.saveToStorage();
-    }
+
     // 允许 popup 主动触发重新收集
     browser.runtime.onMessage.addListener((msg, sender, sendResponse) => {
       if (msg.type === 'COLLECT_PINS') {
-        const updatedPins = collector.collect();
-        sendResponse({ success: true, count: updatedPins.length });
+        const pins = collector.collect();
+        sendResponse({ success: true, count: pins.length, pins });
         return true; // 异步响应
       }
     });

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 {