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

admin/main_test.go

@@ -316,6 +316,63 @@ func TestSybPage_明确展示蝦皮商品Pdd关联来源(t *testing.T) {
 	}
 }
 
+func TestSybPage_紧凑筛选和可见横向滚动(t *testing.T) {
+	page, err := os.ReadFile("templates/syb/list.html")
+	if err != nil {
+		t.Fatal(err)
+	}
+	css, err := os.ReadFile("static/css/app.css")
+	if err != nil {
+		t.Fatal(err)
+	}
+	header, err := os.ReadFile("templates/partials/header.html")
+	if err != nil {
+		t.Fatal(err)
+	}
+	pageText := string(page)
+	for _, want := range []string{
+		`class="syb-search-input"`,
+		`>清除</a>`,
+		`class="table-wrap syb-table-wrap"`,
+		`class="syb-col-shop"`,
+		`class="syb-col-spec"`,
+		`colspan="12"`,
+	} {
+		if !strings.Contains(pageText, want) {
+			t.Errorf("顺运宝紧凑列表缺少 %q", want)
+		}
+	}
+	for _, removed := range []string{
+		`href="/shops">店铺管理（同步`,
+		`<th>货运单 ID</th>`,
+		`每行只显示当前最需要完成的下一步`,
+	} {
+		if strings.Contains(pageText, removed) {
+			t.Errorf("顺运宝列表仍包含已移除内容 %q", removed)
+		}
+	}
+	for _, want := range []string{
+		`.toolbar input[type="text"].syb-search-input`,
+		`flex: 0 0 140px`,
+		`.syb-col-shop`,
+		`max-width: 224px`,
+		`.syb-col-spec`,
+		`max-width: 140px`,
+		`.syb-table-wrap`,
+		`max-height: calc(100vh - 270px)`,
+		`overflow: auto`,
+		`.syb-table-wrap thead th`,
+		`position: sticky`,
+	} {
+		if !strings.Contains(string(css), want) {
+			t.Errorf("顺运宝紧凑列表样式缺少 %q", want)
+		}
+	}
+	if !strings.Contains(string(header), `href="/shops"`) {
+		t.Error("移除顺运宝工具条入口后，管理员主导航仍应保留店铺管理模块")
+	}
+}
+
 func TestShops_单一名称和状态且保护删除(t *testing.T) {
 	templateContent, err := os.ReadFile("templates/shop/list.html")
 	if err != nil {

admin/static/css/app.css

@@ -112,6 +112,11 @@ body {
    用 flex 而不是 width：工具条是 flex 布局，width 会被 flex-grow 盖掉。
    min-width 由下面那条继承，窄屏时不会缩到没法输入。 */
 .toolbar input[type="text"].search-narrow { flex: 0 0 30%; }
+/* 顺运宝一行需要容纳两个搜索框和操作按钮，固定宽度比百分比更稳定。 */
+.toolbar input[type="text"].syb-search-input {
+  flex: 0 0 140px;
+  min-width: 140px;
+}
 /* 蝦皮工具条同时放商品和店铺两个搜索框，各占剩余工具条的约 20%。
    min-width 继续由通用输入框规则提供，窄窗口时交给工具条自然换行。 */
 .toolbar input[type="text"].shopee-search-field { flex: 0 1 20%; }
@@ -240,6 +245,30 @@ tr.empty small { color: #aaa; }
   text-overflow: ellipsis;
 }
 
+/* 顺运宝列很多：限制高频短字段宽度，并让表头和横向滚动条在浏览数据时
+   始终容易找到。syb_id 仍保留在复选框和详情入口中，不作为独立列展示。 */
+.syb-col-shop {
+  width: 224px;
+  max-width: 224px;
+}
+.syb-col-spec {
+  width: 140px;
+  max-width: 140px;
+}
+.syb-table-wrap {
+  max-height: calc(100vh - 270px);
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.syb-table-wrap thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+@media (max-width: 760px) {
+  .syb-table-wrap { max-height: none; }
+}
+
 /* 蝦皮数据页商品名称列收窄，配合 .truncate 一起用（见工单 #214）。
    用独立类设 max-width，不用 flex——.search-narrow 那套是给工具条用的，
    表格单元格不是 flex 布局，flex 在这里不生效。放在 .truncate 之后，

admin/syb_interaction_template_test.go

@@ -55,6 +55,7 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) {
 		"Title": "顺运宝数据", "Active": "syb", "CSRFToken": "test-csrf",
 		"Rows": rows, "PurchaseRows": rows,
 		"DetailURL": "/syb/detail", "StageOptions": service.SybStageOptions(),
+		"SyncDateFrom": "2026-08-12", "SyncDateTo": "2026-08-13",
 	}
 	if err := tmpl.ExecuteTemplate(&output, "syb/list", data); err != nil {
 		t.Fatalf("渲染顺运宝列表失败: %v", err)
@@ -83,6 +84,15 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) {
 		`data-select-action="collect"`,
 		`form="syb-collect-form"`,
 		`id="syb-collect-modal"`,
+		`>创建采集任务</button>`,
+		`<h2 id="syb-collect-modal-title">创建采集任务</h2>`,
+		`class="syb-search-input"`,
+		`href="/syb?date_from=2026-08-12`,
+		`date_to=2026-08-13">清除</a>`,
+		`class="table-wrap syb-table-wrap"`,
+		`<th class="syb-col-shop">店铺</th>`,
+		`<th class="syb-col-spec">规格</th>`,
+		`value="SYB-READY" name="ids"`,
 		`同一 PDD 商品关联多条货运单时只创建一条任务`,
 		`title="当前阶段不能批量操作：下一步关联采购商品"`,
 	} {
@@ -93,6 +103,17 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) {
 	if strings.Contains(body, `<tr data-detail-id=`) {
 		t.Error("顺运宝列表不应继续使用含义模糊的整行双击入口")
 	}
+	for _, removed := range []string{
+		`<th>货运单 ID</th>`,
+		`<td>SYB-READY</td>`,
+		`>创建 PDD 采集任务</button>`,
+		`<h2 id="syb-collect-modal-title">创建 PDD 采集任务</h2>`,
+		`每行只显示当前最需要完成的下一步`,
+	} {
+		if strings.Contains(body, removed) {
+			t.Errorf("顺运宝列表仍包含已移除内容 %q", removed)
+		}
+	}
 }
 
 func TestSybDetailTemplate_单条采集可选执行客户端(t *testing.T) {

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">

docs/admin/01-requirements.md

@@ -208,7 +208,8 @@ PDD 商品之所以单独一个模块，是因为它在数据上就是**独立
 
 ### 4.3 顺运宝数据模块
 
-**顶部工具条：** 同步按钮、订单号搜索框、搜索按钮、创建采购任务按钮、删除按钮。
+**顶部工具条：** 日期范围、同步、同步记录、创建采集任务、创建采购任务、处理阶段、
+店铺和订单号筛选、清除、搜索、删除。店铺管理通过管理员主导航进入，不在工具条重复显示。
 
 - `[待定]` 同步按钮 MVP 阶段只做占位：点击后提示"同步功能待接入"，不发请求。
 
@@ -217,9 +218,10 @@ PDD 商品之所以单独一个模块，是因为它在数据上就是**独立
 | 列 | 说明 |
 |---|---|
 | 勾选 | 支持批量删除、批量建任务 |
-| 货运单 ID | |
 | 订单号 | |
+| 店铺 | 顺运宝货运单店铺名称，长内容省略，悬停查看全文 |
 | 商品标题 | |
+| 规格 | 顺运宝商品规格原文，长内容省略，悬停查看全文 |
 | 蝦皮商品 ID | 关联蝦皮数据模块 |
 | 数量 | |
 | 价格 | 蝦皮售价，**台币分**，见 §7 |
@@ -229,6 +231,9 @@ PDD 商品之所以单独一个模块，是因为它在数据上就是**独立
 | 更新时间 | |
 
 原始的完整货运单 JSON 存 `syb_data` 字段，**不作为表格列显示**，在详情里看。
+货运单明细 ID 继续作为勾选、详情和任务关联使用的内部标识，但不单独显示为列表列。
+桌面端列表在固定高度区域内滚动并固定表头，让横向滚动条在浏览长列表时可到达；
+窄窗口使用自然页面高度。清除筛选时保留当前同步日期范围。
 
 **双击行或点击下一步打开处理弹窗：**
 

docs/admin/05-ui-specification.md

@@ -72,9 +72,12 @@
 ### 3.1 搜索框宽度
 
 `[必须]` 搜索框加 `class="search-narrow"` 收到 30%，让「搜索」按钮紧挨着它。
-目前 **PDD 商品页、顺运宝数据页、采集采购页**在用；
+目前 **PDD 商品页、采集采购页**在用；
 蝦皮数据页和客户端列表页仍是撑满的（暂未统一）。
 
+顺运宝页一行同时有店铺和订单号两个输入框，单独使用 `syb-search-input`，桌面端
+固定约 140px；不能为了这个例外修改通用输入框规则。
+
 `[必须]` **不要去改 `.toolbar input[type="text"]` 那条通用规则**——
 五个页面共用它，改了会把没打算改的页面一起改掉。
 
@@ -472,13 +475,14 @@ Go 的 map 是无序的，不靠它定顺序的话，同一个商品每次刷新
 ### 6.1 工具条
 
 ```text
-开始日期 [2026-08-08]  结束日期 [2026-08-09] [同步] [同步记录] [店铺管理（同步 N）·管理员]
+开始日期 [2026-08-08]  结束日期 [2026-08-09] [同步] [同步记录]
-[创建 PDD 采集任务] [创建采购任务]   处理阶段 [全部] 店铺 [___] 订单号 [___] [搜索]   [删除]
+[创建采集任务] [创建采购任务]   处理阶段 [全部] 店铺 [___] 订单号 [___] [清除] [搜索]   [删除]
 ```
 
 日期始终显示在主工具条，按 UTC+8 解释且两端都包含。首次打开页面固定默认昨天
 到今天，不因覆盖游标位置自动扩大范围；需要补历史缺口时由采购员明确选择日期。
-所有账号都能看到当前启用 SYB 同步店铺数量；只有管理员显示独立“店铺管理”入口。
+所有账号都能看到当前启用 SYB 同步店铺数量；管理员通过主导航进入“店铺管理”，
+顺运宝工具条不再重复放入口。
 管理页一行一个店铺，只展示和编辑一个店铺名称，并使用一个启停状态。该名称同时用于
 SYB 同步准入和蝦皮商品关联。启用店铺不显示删除入口，服务端还要拒绝删除有关联货运单
 或蝦皮商品的停用店铺；“未登记商品 N 个”链接进入蝦皮未关联数据视图。
@@ -529,18 +533,22 @@ HTML 片段，只替换弹窗内部的表格、总数和分页。主货运单表
 时翻页链接降级为重载 `/syb` 并自动重开弹窗。本阶段不自动轮询，避免阅读历史
 记录时内容突然移动；F5 仍按浏览器默认行为刷新整个 SYB 页面。
 
-`[必须]` 搜索框宽度见 [§3.1](#31-搜索框宽度)。
+`[必须]` 店铺和订单号搜索框桌面端固定约 140px，见 [§3.1](#31-搜索框宽度)。
 店铺是独立的模糊搜索条件，可与处理阶段、订单号/商品标题组合；输入会去除首尾空白。
-翻页、同步、删除、详情内写操作、创建 PDD 采集任务和创建采购任务返回列表时都要保留店铺条件。
+“清除”位于“搜索”左侧，清空处理阶段、店铺、订单号和页码，但保留当前同步日期范围。
+翻页、同步、删除、详情内写操作、创建采集任务和创建采购任务返回列表时都要保留店铺条件。
 
 ### 6.2 表格列
 
-☐ / 货运单明细ID / 订单号 / 店铺 / 商品标题 / 规格 / 蝦皮商品ID / 数量 /
+☐ / 订单号 / 店铺 / 商品标题 / 规格 / 蝦皮商品ID / 数量 /
 价格（台币）/ 图片 / **处理阶段** / **下一步** / 更新时间
 
 - 一行对应顺运宝一张货运单的**一个商品明细**，不是一张货运单——一张货运单
   可以有多个商品，各占一行。
-- 店铺显示顺运宝货运单的 `shopName`；长名称省略显示并通过单元格 `title` 查看全文。
+- `syb_id` 仍是复选框、详情入口和服务端操作使用的内部标识，但不再单独显示成表格列；
+  详情和任务来源信息仍可查看该值。
+- 店铺显示顺运宝货运单的 `shopName`，列宽约 224px；规格列宽约 140px。长内容
+  省略显示并通过单元格 `title` 查看全文。
 - 图片显示小缩略图。点击缩略图在弹窗中按比例查看顺运宝原图，并提供新窗口打开入口；
   图片加载失败时显示可读提示。`[必须]` 只存 URL，不代理、缓存或把图片塞进数据库。
 - 处理阶段是按当前关联事实**算出来的**，不是存一份容易过期的状态字段。阶段至少区分：
@@ -557,14 +565,16 @@ HTML 片段，只替换弹窗内部的表格、总数和分页。主货运单表
   “查看采购任务”外，其余动作进入当前明细的处理弹窗。
 - 规格原文为空时不显示匹配表单，明确提示“顺运宝未提供规格”，并禁止建立映射或创建采购任务。
 - 完整货运单 JSON 不作为列显示，落在 `syb_data` 里，供后续排查用。
+- 桌面端表格使用有最大高度的内部滚动区，表头固定；横向滚动条位于该区域底部，
+  浏览长列表时不必先滚到整页末尾。窄窗口回到自然页面高度，避免可用区域过小。
 
 复选框按批量动作能力启用，不再等同于“可采购”：PDD 待采集、PDD 采集失败、
 PDD 采集中（超时）行可用于
-“创建 PDD 采集任务”，可创建采购任务行可用于“创建采购任务”，其他阶段继续禁用并通过
+“创建采集任务”，可创建采购任务行可用于“创建采购任务”，其他阶段继续禁用并通过
 `title` 和无障碍标签说明原因。混合勾选时两个按钮分别统计和提交自身兼容的行，不能把
 待采集商品带进采购确认，也不能把采购就绪商品带进采集请求。
 
-批量创建 PDD 采集任务的确认弹窗显示可采集明细数，并允许不指定客户端或选择当前账号
+批量创建采集任务的确认弹窗显示可采集明细数，并允许不指定客户端或选择当前账号
 可见客户端。同一 PDD 商品可能对应多条顺运宝明细，服务端按 PDD 商品 ID 去重，只创建
 一条采集任务；浏览器提交的全部明细必须重新校验阶段，参数过期或被篡改时整批拒绝。