feat: 区分顺运宝标题与图片交互 (#105)

admin/templates/syb/list.html

@@ -101,20 +101,30 @@
   </thead>
   <tbody>
     {{range .Rows}}
-    <tr data-detail-id="{{.SybID}}" {{if .NeedsAttention}}class="row-warn"{{end}}>
+    <tr {{if .NeedsAttention}}class="row-warn"{{end}}>
       <td class="col-check">
         <input type="checkbox" value="{{.SybID}}" name="ids" {{if not .CanPurchase}}disabled{{end}}
                aria-label="选择货运单明细 {{.SybID}}">
       </td>
       <td>{{.SybID}}</td>
       <td>{{.OrderNo}}</td>
-      <td class="truncate" title="{{.Title}}">{{.Title}}</td>
+      <td class="truncate" title="{{.Title}}">
+        <button type="button" class="table-title-action" data-detail-open-id="{{.SybID}}"
+                title="打开商品处理详情">{{.Title}}</button>
+      </td>
       <td class="truncate" title="{{.ProductSpec}}">{{.ProductSpec}}</td>
       <td>{{.ShopeeGoodsID}}</td>
       <td>{{.Quantity}}</td>
       <td>{{.PriceText}}</td>
       <td>
-        {{if .ImageURL}}<img src="{{.ImageURL}}" alt="" class="thumb">{{else}}—{{end}}
+        {{if .ImageURL}}
+        <button type="button" class="thumb-action" data-image-preview-url="{{.ImageURL}}"
+                data-image-preview-title="{{.Title}}" title="查看商品原图"
+                aria-label="查看 {{.Title}} 的原图">
+          <img src="{{.ImageURL}}" alt="{{.Title}} 缩略图" class="thumb"
+               width="32" height="32" loading="lazy">
+        </button>
+        {{else}}—{{end}}
       </td>
       <td><span class="status-pill">{{.StageText}}</span><br><small>{{.StageHelp}}</small></td>
       <td><button type="button" data-detail-open-id="{{.SybID}}">{{.ActionText}}</button></td>
@@ -201,9 +211,28 @@
 </div>
 
 <p class="hint">
-  每行只显示当前最需要完成的下一步；双击行或点击“下一步”按钮可以打开处理详情。
+  每行只显示当前最需要完成的下一步；点击商品标题进入处理详情，点击图片查看原图。
 </p>
 
+<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>
+
 <div class="modal-backdrop" id="detail-modal" data-detail-url="{{.DetailURL}}" hidden>
   <div class="modal modal-wide" role="dialog" aria-modal="true" data-detail-slot>
     <div class="modal-body">正在加载…</div>