feat: 展示蝦皮主图和店铺 (#142)

admin/templates/shopee/detail_modal.html

@@ -10,6 +10,10 @@
     <dt>商品名称</dt><dd>{{.Title}}</dd>
     <dt>蝦皮状态</dt><dd>{{.ShopeeStatus}}</dd>
     <dt>主商品货号</dt><dd>{{.MainSKUCode}}</dd>
+    <dt>蝦皮店铺</dt><dd>{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</dd>
+    <dt>店铺来源 / 观测时间</dt><dd>{{.ShopNameSourceText}} / {{if .ShopNameObservedAt}}{{.ShopNameObservedAt}}{{else}}—{{end}}</dd>
+    <dt>蝦皮主图</dt><dd>{{if .ImageURL}}<a href="{{.ImageURL}}" target="_blank" rel="noopener noreferrer"><img src="{{.ImageURL}}" alt="{{.Title}} 主图" class="detail-product-image" loading="lazy" referrerpolicy="no-referrer"></a>{{else}}无图{{end}}</dd>
+    <dt>图片来源 / 观测时间</dt><dd>{{.ImageSourceText}} / {{if .ImageObservedAt}}{{.ImageObservedAt}}{{else}}—{{end}}</dd>
     <dt>PDD 商品 ID</dt><dd{{if .PddMissing}} class="missing"{{end}}>{{if .PddGoodsID}}{{.PddGoodsID}}{{else}}未关联{{end}}</dd>
     <dt>采集状态</dt><dd>{{.StatusText}}{{if .CollectMsg}}：{{.CollectMsg}}{{end}}</dd>
   </dl>

admin/templates/shopee/list.html

@@ -35,7 +35,9 @@
     <tr>
       <th class="col-check"><input type="checkbox" data-check-all></th>
       <th>商品 ID</th>
+      <th>图片</th>
       <th>商品名称</th>
+      <th>蝦皮店铺</th>
       <th>颜色</th>
       <th>尺码</th>
       {{/* SKU 数是这个商品报表里实际出现过的规格条数。
@@ -57,10 +59,12 @@
     <tr data-detail-id="{{.GoodsID}}"{{if gt .PendingCount 0}} class="row-warn"{{end}}>
       <td class="col-check"><input type="checkbox" name="ids" value="{{.GoodsID}}"></td>
       <td>{{.GoodsID}}</td>
+      <td>{{if .ImageURL}}<button type="button" class="thumb-action" data-image-preview-url="{{.ImageURL}}" data-image-preview-title="{{.Title}}" title="查看蝦皮主图"><img src="{{.ImageURL}}" alt="{{.Title}} 缩略图" class="thumb" width="32" height="32" loading="lazy" referrerpolicy="no-referrer" data-image-thumb><span class="thumb-fallback" hidden data-image-thumb-fallback>加载失败</span></button>{{else}}<span class="thumb-placeholder">无图</span>{{end}}</td>
       {{/* 商品名称列收窄，用独立的 .col-title 类设 max-width（具体数值见 app.css），
            不用 flex——表格单元格和工具条的 .search-narrow 那套不一样，见 #41。
            title 属性让悬停能看完整标题，收窄之后必须留着。 */}}
       <td class="truncate col-title" title="{{.Title}}">{{.Title}}</td>
+      <td class="truncate col-shop" title="{{.ShopName}}">{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</td>
       <td>{{.ColorCount}}</td>
       <td>{{.SizeCount}}</td>
       <td>{{.SKUCount}}</td>
@@ -72,7 +76,7 @@
     </tr>
     {{else}}
     <tr class="empty">
-      <td colspan="11">
+      <td colspan="13">
         {{if .IsFiltered}}
         没有匹配的数据，换个商品 ID 或商品名称试试。
         {{else}}
@@ -86,6 +90,8 @@
 </table>
 </div>
 
+<div class="modal-backdrop" id="image-preview-modal" hidden><div class="modal image-preview-modal" role="dialog" aria-modal="true" aria-labelledby="image-preview-title"><div class="modal-head"><h2 id="image-preview-title" data-image-preview-title>蝦皮商品主图</h2><button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button></div><div class="modal-body image-preview-body"><p class="hint image-preview-status" data-image-preview-status role="status">正在加载原图…</p><img data-image-preview-image alt="" hidden></div><div class="modal-foot"><a class="button-link" data-image-preview-link href="#" target="_blank" rel="noopener noreferrer">新窗口打开原图</a><button type="button" data-modal-close>关闭</button></div></div></div>
+
 <p class="hint">
   双击任意一行可以查看这个商品的完整规格表。
 </p>