feat: 增加商品颜色匹配页面 (#294)

admin/templates/shopee/color_mappings.html

@@ -0,0 +1,104 @@
+{{define "shopee/color_mappings"}}
+{{template "header" .}}
+
+<form id="color-mapping-form" method="post" action="/shopee/color-mappings/save"
+      data-color-mapping-form data-unavailable="{{if .V.UnavailableReason}}1{{end}}">
+  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+  <input type="hidden" name="goods_id" value="{{.V.ShopeeGoodsID}}">
+  <input type="hidden" name="context_version" value="{{.V.ContextVersion}}">
+  <input type="hidden" name="return_to" value="{{.ReturnTo}}">
+</form>
+
+<div class="toolbar color-mapping-toolbar">
+  <a class="button-link" href="{{.ReturnTo}}">返回蝦皮数据</a>
+  <h1>商品颜色匹配</h1>
+  <label for="color-mapping-filter">显示</label>
+  <select id="color-mapping-filter" data-color-mapping-filter>
+    <option value="all">全部颜色</option>
+    <option value="pending">待匹配</option>
+    <option value="invalid">映射已失效</option>
+    <option value="mapped">已匹配</option>
+  </select>
+  <span class="color-mapping-change-count" data-color-mapping-change-count role="status">尚未修改</span>
+  <button type="submit" class="primary" form="color-mapping-form" data-color-mapping-save disabled>保存修改</button>
+</div>
+
+{{if .Message}}<p class="feedback success" role="status"><strong>保存成功</strong>{{.Message}}</p>{{end}}
+{{if .Alert}}<p class="feedback error" role="alert" tabindex="-1" data-color-mapping-alert><strong>未保存</strong>{{.Alert}} 你的选择仍保留在页面中。</p>{{end}}
+
+<section class="color-mapping-summary" aria-label="当前商品摘要">
+  <div class="color-mapping-summary-card">
+    <span>蝦皮商品</span>
+    <strong title="{{.V.ShopeeTitle}}">{{.V.ShopeeTitle}}</strong>
+    <small>商品 ID：{{.V.ShopeeGoodsID}}</small>
+  </div>
+  <div class="color-mapping-summary-card">
+    <span>PDD 商品</span>
+    <strong title="{{.V.PddTitle}}">{{if .V.PddGoodsID}}{{if .V.PddTitle}}{{.V.PddTitle}}{{else}}—{{end}}{{else}}未关联{{end}}</strong>
+    <small>商品 ID：{{if .V.PddGoodsID}}{{.V.PddGoodsID}}{{else}}—{{end}}{{if .V.PddDimensionKey}} · 颜色维度：{{.V.PddDimensionKey}}{{end}}</small>
+  </div>
+  <div class="color-mapping-summary-card color-mapping-progress">
+    <strong>{{.V.ValidCount}} / {{len .V.Rows}}</strong>
+    <small>当前有效映射</small>
+  </div>
+</section>
+
+{{if .V.UnavailableReason}}
+<p class="feedback error" role="alert"><strong>暂时不能维护颜色映射</strong>{{.V.UnavailableReason}}。请返回蝦皮数据页处理 PDD 关联或采集后再试。</p>
+{{else}}
+<p class="guard-note">这里只维护商品颜色关系，不修改蝦皮或 PDD 的原始规格。颜色全部匹配也不等于可以采购；系统仍会按当前可购买的完整颜色、尺码组合生成采购规格。</p>
+{{end}}
+
+<div class="table-wrap color-mapping-table-wrap">
+  <table class="color-mapping-table">
+    <thead>
+      <tr>
+        <th>蝦皮颜色</th>
+        <th>颜色来源</th>
+        <th class="color-mapping-arrow" aria-label="映射到"></th>
+        <th>PDD 可购买颜色</th>
+        <th>状态 / 维护来源</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{range .V.Rows}}
+      <tr data-color-mapping-row data-saved-status="{{.Status}}">
+        <td>
+          <strong>{{.ColorRaw}}</strong>
+          <small class="color-mapping-key">身份键：{{.ColorKey}}</small>
+        </td>
+        <td>{{if .SourceText}}{{.SourceText}}{{else}}—{{end}}</td>
+        <td class="color-mapping-arrow" aria-hidden="true">→</td>
+        <td>
+          <label class="color-mapping-target-label">为“{{.ColorRaw}}”选择 PDD 颜色
+          <select class="color-mapping-select"
+                  data-color-mapping-select data-color-key="{{.ColorKey}}" data-color-raw="{{.ColorRaw}}"
+                  data-original-value="{{.OriginalValue}}" {{if $.V.UnavailableReason}}disabled{{end}}>
+            <option value=""{{if not .SelectedValue}} selected{{end}}>请选择 PDD 颜色</option>
+            {{if .SelectedInvalid}}<option value="{{.SelectedValue}}" selected disabled>原选择已不可用：{{.SelectedValue}}</option>{{end}}
+            {{range .Groups}}
+            <optgroup label="{{.Label}}">
+              {{range .Options}}<option value="{{.Value}}" data-candidate data-base-label="{{.Label}}"{{if .Selected}} selected{{end}}>{{.Label}}</option>{{end}}
+            </optgroup>
+            {{end}}
+          </select>
+          </label>
+        </td>
+        <td>
+          <span class="status-pill status-{{.Status}}" data-color-mapping-status>{{.StatusText}}</span>
+          <small class="color-mapping-source">{{if .MappingText}}{{.MappingText}}{{else}}—{{end}}</small>
+        </td>
+        <td><button type="button" class="link-button" data-color-mapping-clear {{if or $.V.UnavailableReason (not .SelectedValue)}}disabled{{end}}>清除</button></td>
+      </tr>
+      {{else}}
+      <tr class="empty"><td colspan="6">没有可用于匹配的蝦皮颜色。请先补全正式 SKU 颜色，或等待顺运宝同步到可确定解析的颜色规格。</td></tr>
+      {{end}}
+    </tbody>
+  </table>
+</div>
+
+<p class="hint color-mapping-empty-filter" data-color-mapping-empty-filter hidden>当前筛选下没有颜色。</p>
+
+{{template "footer" .}}
+{{end}}

admin/templates/shopee/detail_modal.html

@@ -18,6 +18,8 @@
     <dt>采集状态</dt><dd>{{.StatusText}}{{if .CollectMsg}}：{{.CollectMsg}}{{end}}</dd>
   </dl>
 
+  <p><a class="button-link primary" href="{{$.ColorMappingURL}}">进入颜色匹配</a></p>
+
   <form method="post" action="/shopee/save" class="form-stack">
     <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
     <input type="hidden" name="shopee_goods_id" value="{{.GoodsID}}">

admin/templates/shopee/list.html

@@ -82,6 +82,7 @@
       <th>来源</th>
       <th>PDD 商品 ID</th>
       <th>采集状态</th>
+      <th>颜色匹配</th>
       <th>更新时间</th>
     </tr>
   </thead>
@@ -103,11 +104,12 @@
       <td>{{.SourceText}}</td>
       <td{{if .PddMissing}} class="missing"{{end}}>{{if .PddMissing}}未填写{{else}}<span title="{{.PddURL}}">{{.PddGoodsID}}</span>{{end}}</td>
       <td>{{.StatusText}}</td>
+      <td><a href="/shopee/color-mappings?goods_id={{.GoodsID}}&return_to={{$.ReturnToEscaped}}">进入匹配</a></td>
       <td>{{.UpdatedAt}}</td>
     </tr>
     {{else}}
     <tr class="empty">
-      <td colspan="13">
+      <td colspan="14">
         {{if .IsFiltered}}
         当前条件下没有商品。请调整状态、分类或关键词。<br>
         <small><a href="/shopee?page_size={{.CurrentPageSize}}">清除筛选条件</a></small>