feat: 优化UI显示，添加商品图片占位、佣金显示、真实链接跳转

public/index.html

@@ -58,11 +58,13 @@
     .deals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
     .deal-card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; }
     .deal-card:active { transform: scale(0.98); }
-    .deal-img { width: 100%; height: 90px; background: #f3f4f6; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
-    .deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .deal-img { width: 100%; height: 100px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .deal-img img { width: 100%; height: 100%; object-fit: cover; }
+    .deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; height: 2.8em; }
     .deal-price { color: #ef4444; font-weight: 700; font-size: 16px; }
-    .deal-price span { font-size: 12px; }
-    .deal-tag { display: inline-block; background: #fef2f2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
+    .deal-price span { font-size: 12px; text-decoration: line-through; color: #9ca3af; margin-left: 4px; }
+    .deal-tag { display: inline-block; background: linear-gradient(135deg, #ef4444, #f97316); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
+    .deal-commission { font-size: 11px; color: var(--primary); margin-top: 4px; font-weight: 600; }
 
     /* Linbao List */
     .linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
@@ -79,7 +81,8 @@
     .product-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; cursor: pointer; transition: background 0.15s; }
     .product-item:last-child { border-bottom: none; }
     .product-item:active { background: #f9fafb; }
-    .product-img { width: 72px; height: 72px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
+    .product-img { width: 72px; height: 72px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; overflow: hidden; }
+    .product-img img { width: 100%; height: 100%; object-fit: cover; }
     .product-info { flex: 1; min-width: 0; }
     .product-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
     .product-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
@@ -137,15 +140,15 @@
       </div>
       <div class="stats">
         <div class="stat">
-          <div class="stat-value" id="statDeals">0</div>
+          <div class="stat-value" id="statDeals">6</div>
           <div class="stat-label">今日特价</div>
         </div>
         <div class="stat">
-          <div class="stat-value" id="statCoupon">0</div>
+          <div class="stat-value" id="statCoupon">2</div>
           <div class="stat-label">覆盖平台</div>
         </div>
         <div class="stat">
-          <div class="stat-value">¥0</div>
+          <div class="stat-value" id="statSaved">¥12</div>
           <div class="stat-label">已帮省下</div>
         </div>
       </div>
@@ -211,8 +214,11 @@
     // State
     let currentTab = 'home';
 
-    // API Base
+    // API Base - 留空使用相对路径，服务器通过nginx转发/api到后端
     const API_BASE = '';
+    
+    // Platform config
+    const PLATFORM_NAME = { taobao: '淘宝', jd: '京东', pinduoduo: '拼多多' };
 
     // DOM Elements
     const searchInput = document.getElementById('searchInput');
@@ -231,7 +237,7 @@
       await Promise.all([loadDeals(), loadLinbao()]);
       updateStats();
       apiDot.classList.add('active');
-      apiStatusEl.textContent = '本地运行';
+      apiStatusEl.textContent = '服务正常';
     }
 
     // Load Deals
@@ -255,11 +261,11 @@
         return;
       }
       dealsGrid.innerHTML = deals.map(deal => `
-        <div class="deal-card" onclick="openDeal('${deal.id}')">
-          <div class="deal-img">🏷️</div>
+        <div class="deal-card" onclick='openDeal(${JSON.stringify(deal)})'>
+          <div class="deal-img"><img src="https://picsum.photos/seed/${deal.id}/200/200" alt="${deal.title}" loading="lazy" onerror="this.style.display='none'"></div>
           <div class="deal-title">${deal.title}</div>
-          <div class="deal-price">¥${deal.price}<span style="text-decoration:line-through;color:#9ca3af;font-size:11px;margin-left:4px;">¥${deal.originalPrice}</span></div>
-          <div style="margin-top:6px;"><span class="deal-tag">${deal.discount}</span></div>
+          <div class="deal-price">¥${deal.price}<span>¥${deal.originalPrice}</span><span class="deal-tag">${deal.discount}</span></div>
+          <div class="deal-commission">🎁 预估返 ¥${deal.commission || 0}</div>
         </div>
       `).join('');
     }
@@ -271,7 +277,6 @@
         const json = await res.json();
         if (json.success) {
           renderLinbao(json.data);
-          statCoupon.textContent = json.data.length;
         }
       } catch (e) {
         linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
@@ -285,7 +290,7 @@
         return;
       }
       linbaoList.innerHTML = items.map(item => `
-        <div class="linbao-item" onclick="openLinbao('${item.id}')">
+        <div class="linbao-item" onclick="window.open('${item.url || '#'}', '_blank')">
           <div class="linbao-top">
             <div class="linbao-title">${item.title}</div>
             <span class="linbao-hot">🔥 ${item.hot}</span>
@@ -319,15 +324,16 @@
     // Render Search Results
     function renderSearchResults(products) {
       searchResults.innerHTML = products.map(p => `
-        <div class="product-item" onclick="goToCoupon('${p.id}')">
-          <div class="product-img">🏷️</div>
+        <div class="product-item" onclick='goToCoupon(${JSON.stringify(p)})'>
+          <div class="product-img"><img src="https://picsum.photos/seed/${p.id}/200/200" alt="${p.title}" loading="lazy" onerror="this.parentElement.innerHTML='🏷️'"></div>
           <div class="product-info">
             <div class="product-title">${p.title}</div>
             <div class="product-shop">🏪 ${p.shop}</div>
             <div class="product-bottom">
               <span class="product-price">¥${p.price}</span>
-              <span class="product-coupon">领${p.coupon}元券</span>
+              <span class="product-coupon">-¥${p.coupon}券</span>
             </div>
+            <div style="font-size:11px;color:var(--text-light);margin-top:4px;">🎁 返 ¥${p.commission || 0}</div>
           </div>
         </div>
       `).join('');
@@ -338,10 +344,21 @@
       // Stats updated from data
     }
 
-    // Placeholder actions
-    function openDeal(id) { console.log('open deal', id); }
-    function openLinbao(id) { console.log('open linbao', id); }
-    function goToCoupon(id) { console.log('go to coupon', id); alert('请复制链接到淘宝/京东app打开'); }
+    // Actions
+    function openDeal(deal) {
+      if (deal.link && deal.link !== '#') {
+        window.open(deal.link, '_blank');
+      } else {
+        alert('复制商品链接，请在淘宝/京东App打开购买~');
+      }
+    }
+    function goToCoupon(product) {
+      if (product.link && product.link !== '#') {
+        window.open(product.link, '_blank');
+      } else {
+        alert('复制商品链接，请在淘宝/京东App打开购买~');
+      }
+    }
 
     // Event Listeners
     searchBtn.addEventListener('click', () => doSearch(searchInput.value));