feat: 采集采购页，采集与采购统一展示 (#19)

原来的采购任务页是骨架：var rows []gin.H 从不查库，页面永远为空；
TODO 写的还是只查 task_type = 'purchase'。所以 #18 建出来的采集任务
在界面上哪儿都看不到——用户点完「创建采集任务」只能盯着
collect_status 猜。

模块名定为「采集采购」（用户指定），直接点出这页装的是哪两类任务，
比泛称「任务」更能让人一眼知道点进去看什么。路由 /tasks 不变，
改路由会让已有书签和文档链接全失效，没有收益。

列不按类型并列——两种任务字段完全不同，并列会让采集任务行一半是空列。
改成固定列 + 一列「目标」把业务信息概括成一句话：
  采集  PDD 737116531267
  采购  SO-001 · M/黑色 · 2件 · ≤¥42.00
拼接逻辑在 service 层，模板只负责显示。

统计和列表共用同一个筛选条件拼装函数。分开写的话总有一天会忘了
给统计也加条件，数字和表格对不上，操作员会以为页面坏了。

无主任务的客户端列显示「—」。#17 之后采集任务默认无主，这列会大量为空。

详情弹窗只读，采购专有字段（数量、价格上限、目标规格）在采集任务里
整段不出现，不显示空行。复用 #18 的弹窗机制，app.js 无需改动。

顺带清掉 PDD 页加进来之后一直没跟上的模块计数：多处「四个模块/四个页面」
改成五个。其中 06-quality-security.md 那两处是验证清单，
照着做的人只会测四个页面，PDD 页永远不在回归范围里。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

admin/templates/partials/footer.html

@@ -1,7 +1,7 @@
 {{define "footer"}}
 </main>
 
-{{/* 底部状态条：三段式布局的第三段，四个页面都有 */}}
+{{/* 底部状态条：三段式布局的第三段，五个页面都有 */}}
 <footer class="statusbar">{{.Status}}</footer>
 
 <script src="/static/js/app.js"></script>

admin/templates/partials/header.html

@@ -13,7 +13,7 @@
   <a href="/shopee"  class="{{if eq .Active "shopee"}}active{{end}}">蝦皮数据</a>
   <a href="/pdd"     class="{{if eq .Active "pdd"}}active{{end}}">PDD 商品</a>
   <a href="/syb"     class="{{if eq .Active "syb"}}active{{end}}">顺运宝数据</a>
-  <a href="/tasks"   class="{{if eq .Active "tasks"}}active{{end}}">采购任务</a>
+  <a href="/tasks"   class="{{if eq .Active "tasks"}}active{{end}}">采集采购</a>
   <a href="/clients" class="{{if eq .Active "clients"}}active{{end}}">客户端列表</a>
 </nav>
 

admin/templates/task/detail_modal.html

@@ -0,0 +1,58 @@
+{{define "task/detail_modal"}}
+{{/* 双击一行时弹出的内容。
+     这是一个**片段**，不是整页——外面的弹窗壳子在 task/list.html 里。
+
+     `[必须]` 只读：本工单不做改派、重试、取消，弹窗里不放对应的表单和按钮，
+     见 #19。采购专有字段（目标规格/数量/价格上限）在采集任务这里
+     **整段隐藏**，不显示空行。 */}}
+{{with .D}}
+<div class="modal-head">
+  <h2>任务 {{.TaskID}}</h2>
+  <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
+</div>
+
+<div class="modal-body">
+  <dl class="detail">
+    <dt>类型</dt><dd>{{.TypeText}}</dd>
+    <dt>状态</dt><dd>{{.StatusText}}</dd>
+    <dt>分配客户端</dt><dd>{{.ClientText}}</dd>
+    <dt>领取时间</dt><dd>{{.ClaimedAt}}</dd>
+    <dt>完成时间</dt><dd>{{.FinishedAt}}</dd>
+  </dl>
+
+  <h3>执行参数</h3>
+  <dl class="detail">
+    <dt>PDD 链接</dt>
+    <dd><a href="{{.PddGoodsURL}}" target="_blank" rel="noopener noreferrer">{{.PddGoodsURL}}</a></dd>
+
+    {{/* 下面三项只有采购任务才有；采集任务这里整段不出现，不显示空行 */}}
+    {{if .IsPurchase}}
+    <dt>目标规格</dt><dd>{{.SpecText}}</dd>
+    <dt>数量</dt><dd>{{.QuantityText}}</dd>
+    <dt>价格上限</dt><dd>{{.PriceLimitText}}</dd>
+    {{end}}
+  </dl>
+
+  {{if .HasError}}
+  <h3>错误</h3>
+  <dl class="detail">
+    <dt>错误码</dt><dd>{{.ErrorCode}}</dd>
+    <dt>错误说明</dt><dd>{{.ErrorMessage}}</dd>
+  </dl>
+  {{end}}
+
+  {{if .HasResult}}
+  {{/* 完整结果默认折叠，避免一进来就糊一屏 JSON；超长时已经在 service 层
+       截断过，这里如实告诉操作员被截断了。 */}}
+  <details>
+    <summary>完整结果（result_data）</summary>
+    <pre class="result-data">{{.ResultData}}{{if .ResultTruncated}}……（已截断，仅显示前 4000 字符）{{end}}</pre>
+  </details>
+  {{end}}
+</div>
+
+<div class="modal-foot">
+  <button type="button" data-modal-close>关闭</button>
+</div>
+{{end}}
+{{end}}

admin/templates/task/list.html

@@ -1,48 +1,88 @@
 {{define "task/list"}}
 {{template "header" .}}
 
+{{/* 三段式布局的第一段：顶部工具条。
+     采集和采购放在同一页，最常被问的是"有没有卡住的任务"，
+     所以类型/状态筛选放在关键词搜索前面，见 #19。 */}}
 <div class="toolbar">
+  <form class="inline" method="get" action="/tasks">
+    <label for="type">类型</label>
+    <select id="type" name="type">
+      {{range .TypeOptions}}
+      <option value="{{.Value}}" {{if eq .Value $.TypeFilter}}selected{{end}}>{{.Text}}</option>
+      {{end}}
+    </select>
+    <label for="status">状态</label>
+    <select id="status" name="status">
+      {{range .StatusOptions}}
+      <option value="{{.Value}}" {{if eq .Value $.StatusFilter}}selected{{end}}>{{.Text}}</option>
+      {{end}}
+    </select>
+  </form>
+
   <form class="inline grow" method="get" action="/tasks">
-    <label for="q">订单号</label>
-    <input id="q" type="text" name="order_no" value="{{.Keyword}}" placeholder="订单号">
+    <input type="hidden" name="type" value="{{.TypeFilter}}">
+    <input type="hidden" name="status" value="{{.StatusFilter}}">
+    <label for="q">关键词</label>
+    <input id="q" type="text" name="q" value="{{.Keyword}}"
+           placeholder="任务编号 / 订单号 / PDD 商品 ID">
     <button type="submit">搜索</button>
   </form>
 
-  <form class="inline" method="post" action="/tasks/delete" data-confirm-delete>
-    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-    <button type="submit" class="danger" data-need-checked>删除</button>
-  </form>
+  <form id="task-form" method="post" action="/tasks/delete" hidden></form>
+  <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="task-form">
+  {{/* 把当前筛选一起带过去，删除完还停在原来的筛选上 */}}
+  <input type="hidden" name="type" value="{{.TypeFilter}}" form="task-form">
+  <input type="hidden" name="status" value="{{.StatusFilter}}" form="task-form">
+  <input type="hidden" name="q" value="{{.Keyword}}" form="task-form">
+
+  <button type="submit" form="task-form" formaction="/tasks/delete" class="danger"
+          data-need-checked
+          data-confirm-delete="将删除 {n} 条记录，不可恢复。"
+          >删除</button>
 </div>
 
+{{/* 第二段：表格。双击一行打开只读详情弹窗，见 static/js/app.js */}}
 <div class="table-wrap">
 <table>
   <thead>
     <tr>
       <th class="col-check"><input type="checkbox" data-check-all></th>
-      <th>订单号</th>
-      <th>商品标题</th>
-      <th>颜色</th>
-      <th>尺码</th>
-      <th>数量</th>
-      <th>价格上限</th>
-      <th>蝦皮 ID</th>
-      <th>分配客户端</th>
+      <th>任务编号</th>
+      <th>类型</th>
+      <th>目标</th>
       <th>状态</th>
+      <th>客户端</th>
       <th>更新时间</th>
     </tr>
   </thead>
   <tbody>
     {{range .Rows}}
-    {{/* TODO(骨架): 行渲染。
-         颜色尺码显示的是 **PDD 侧**的规格（实际要买的），不是蝦皮的。
-         价格上限显示成 ¥42.00，底层存的是整数分。
-         状态不能只靠颜色区分，必须有文字。
-         建议提供「改派」操作——没有心跳，客户端挂了要靠人工改派。 */}}
+    <tr data-detail-id="{{.TaskID}}" {{if .IsWarn}}class="row-warn"{{end}}>
+      <td class="col-check">
+        <input type="checkbox" value="{{.TaskID}}" name="ids" form="task-form"
+               aria-label="选择任务 {{.TaskID}}">
+      </td>
+      <td>{{.TaskID}}</td>
+      {{/* 类型是中文文字，不能只靠颜色区分 */}}
+      <td>{{.TypeText}}</td>
+      <td class="truncate" title="{{.Target}}">{{.Target}}</td>
+      <td>{{.StatusText}}</td>
+      <td>{{.ClientText}}</td>
+      <td>{{.UpdatedAt}}</td>
+    </tr>
     {{else}}
+    {{/* 空状态要分情况：从没建过任务 和 筛选没结果，下一步动作完全不同 */}}
     <tr class="empty">
-      <td colspan="11">
-        还没有采购任务。<br>
-        <small>到「顺运宝数据」勾选货运单，点「创建采购任务」。</small>
+      <td colspan="7">
+        {{if .IsFiltered}}
+          当前筛选条件下没有任务。<br>
+          <small>换个类型、状态或关键词再试。<a href="/tasks">查看全部</a></small>
+        {{else}}
+          还没有任务。<br>
+          <small>到「PDD 商品」勾选商品点「创建采集任务」，
+          或到「顺运宝数据」勾选货运单点「创建采购任务」。</small>
+        {{end}}
       </td>
     </tr>
     {{end}}
@@ -50,5 +90,18 @@
 </table>
 </div>
 
+<p class="hint">
+  双击任意一行可以查看这个任务的完整信息，包括分配客户端、领取/完成时间和错误详情。
+</p>
+
+{{/* ── 详情弹窗的壳子 ───────────────────────────
+     里面的内容双击行时由 /tasks/detail 返回，前端只负责放进来和显示。
+     机制复用 #18 的 setupRowDetail，不新造一套。 */}}
+<div class="modal-backdrop" id="detail-modal" data-detail-url="/tasks/detail" hidden>
+  <div class="modal" role="dialog" aria-modal="true" data-detail-slot>
+    <div class="modal-body">正在加载…</div>
+  </div>
+</div>
+
 {{template "footer" .}}
 {{end}}