style: 优化顺运宝列表筛选与滚动 (#216)

admin/templates/syb/list.html

@@ -21,7 +21,6 @@
   </form>
 
   <button type="button" data-modal-open="sync-history-modal">同步记录</button>
-  {{if .CurrentUser.IsAdmin}}<a class="button-link" href="/shops">店铺管理（同步 {{.EnabledSyncShopCount}}）</a>{{end}}
 
   <form id="syb-collect-form" method="post" action="/syb/collect-pdd-batch" hidden></form>
   <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" form="syb-collect-form">
@@ -31,7 +30,7 @@
   <input type="hidden" name="page" value="{{.CurrentPage}}" form="syb-collect-form">
   <button type="button" data-modal-open="syb-collect-modal" data-collect-open
           data-collect-form="syb-collect-form" data-collect-action="collect"
-          data-need-checked="collect">创建 PDD 采集任务</button>
+          data-need-checked="collect">创建采集任务</button>
 
   <button type="button" data-need-checked="purchase" data-modal-open="purchase-modal"
           data-purchase-open>创建采购任务</button>
@@ -45,12 +44,11 @@
     </select>
     <label for="shop">店铺</label>
     <input id="shop" type="text" name="shop" value="{{.ShopFilter}}"
-           class="search-narrow" placeholder="店铺名">
+           class="syb-search-input" placeholder="店铺名">
     <label for="q">订单号</label>
-    {{/* search-narrow 把搜索框收到 30%，让「搜索」按钮紧挨着它。
-         用类名而不是改 .toolbar input[type="text"]——那条被五个页面共用。 */}}
     <input id="q" type="text" name="order_no" value="{{.Keyword}}"
-           class="search-narrow" placeholder="订单号">
+           class="syb-search-input" placeholder="订单号">
+    <a class="button-link" href="/syb?date_from={{urlquery .SyncDateFrom}}&date_to={{urlquery .SyncDateTo}}">清除</a>
     <button type="submit">搜索</button>
   </form>
 
@@ -98,16 +96,15 @@
 <p class="hint">{{.LoginHint}}</p>
 {{end}}
 
-<div class="table-wrap">
+<div class="table-wrap syb-table-wrap">
 <table>
   <thead>
     <tr>
       <th class="col-check"><input type="checkbox" data-check-all></th>
-      <th>货运单 ID</th>
       <th>订单号</th>
-      <th>店铺</th>
+      <th class="syb-col-shop">店铺</th>
       <th>商品标题</th>
-      <th>规格</th>
+      <th class="syb-col-spec">规格</th>
       <th>蝦皮商品 ID</th>
       <th>数量</th>
       <th>价格</th>
@@ -129,14 +126,13 @@
                  aria-label="选择货运单明细 {{.SybID}}：{{.SelectionHint}}">
         </span>
       </td>
-      <td>{{.SybID}}</td>
       <td>{{.OrderNo}}</td>
-      <td class="truncate" title="{{.ShopName}}">{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</td>
+      <td class="truncate syb-col-shop" title="{{.ShopName}}">{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}</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 class="truncate syb-col-spec" title="{{.ProductSpec}}">{{.ProductSpec}}</td>
       <td>{{.ShopeeGoodsID}}</td>
       <td>{{.Quantity}}</td>
       <td>{{.PriceText}}</td>
@@ -165,7 +161,7 @@
     </tr>
     {{else}}
     <tr class="empty">
-      <td colspan="13">
+      <td colspan="12">
         {{if .IsFiltered}}
           当前筛选条件下没有货运单明细。<br>
           <small>换个店铺、订单号或清空筛选条件再试。<a href="/syb">查看全部</a></small>
@@ -183,7 +179,7 @@
 <div class="modal-backdrop" id="syb-collect-modal" hidden>
   <div class="modal" role="dialog" aria-modal="true" aria-labelledby="syb-collect-modal-title">
     <div class="modal-head">
-      <h2 id="syb-collect-modal-title">创建 PDD 采集任务</h2>
+      <h2 id="syb-collect-modal-title">创建采集任务</h2>
       <button type="button" class="modal-x" data-modal-close aria-label="关闭">×</button>
     </div>
     <div class="modal-body">
@@ -262,10 +258,6 @@
   </div>
 </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">