diff --git a/admin/main_test.go b/admin/main_test.go index 5969536..2e67e80 100644 --- a/admin/main_test.go +++ b/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"`, + `>清除`, + `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">店铺管理（同步`, + `货运单 ID`, + `每行只显示当前最需要完成的下一步`, + } { + 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 { diff --git a/admin/static/css/app.css b/admin/static/css/app.css index ade8e50..d84cec0 100644 --- a/admin/static/css/app.css +++ b/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 之后， diff --git a/admin/syb_interaction_template_test.go b/admin/syb_interaction_template_test.go index 579ee94..5b3c758 100644 --- a/admin/syb_interaction_template_test.go +++ b/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"`, + `>创建采集任务`, + `

创建采集任务

`, + `class="syb-search-input"`, + `href="/syb?date_from=2026-08-12`, + `date_to=2026-08-13">清除`, + `class="table-wrap syb-table-wrap"`, + `店铺`, + `规格`, + `value="SYB-READY" name="ids"`, `同一 PDD 商品关联多条货运单时只创建一条任务`, `title="当前阶段不能批量操作：下一步关联采购商品"`, } { @@ -93,6 +103,17 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) { if strings.Contains(body, `货运单 ID`, + `SYB-READY`, + `>创建 PDD 采集任务`, + `

创建 PDD 采集任务

`, + `每行只显示当前最需要完成的下一步`, + } { + if strings.Contains(body, removed) { + t.Errorf("顺运宝列表仍包含已移除内容 %q", removed) + } + } } func TestSybDetailTemplate_单条采集可选执行客户端(t *testing.T) { diff --git a/admin/templates/syb/list.html b/admin/templates/syb/list.html index fc92275..2fce0d0 100644 --- a/admin/templates/syb/list.html +++ b/admin/templates/syb/list.html @@ -21,7 +21,6 @@ - {{if .CurrentUser.IsAdmin}}店铺管理（同步 {{.EnabledSyncShopCount}}）{{end}} @@ -31,7 +30,7 @@ + data-need-checked="collect">创建采集任务 @@ -45,12 +44,11 @@ + class="syb-search-input" placeholder="店铺名"> - {{/* search-narrow 把搜索框收到 30%，让「搜索」按钮紧挨着它。 - 用类名而不是改 .toolbar input[type="text"]——那条被五个页面共用。 */}} + class="syb-search-input" placeholder="订单号"> + 清除 @@ -98,16 +96,15 @@

{{.LoginHint}}

{{end}} -
+
- - + - + @@ -129,14 +126,13 @@ aria-label="选择货运单明细 {{.SybID}}：{{.SelectionHint}}"> - - + - + @@ -165,7 +161,7 @@ {{else}} -
货运单 ID 订单号店铺店铺 商品标题规格规格 蝦皮商品 ID 数量 价格 {{.SybID}} {{.OrderNo}}{{if .ShopName}}{{.ShopName}}{{else}}—{{end}}{{if .ShopName}}{{.ShopName}}{{else}}—{{end}} {{.ProductSpec}}{{.ProductSpec}} {{.ShopeeGoodsID}} {{.Quantity}} {{.PriceText}}
+ {{if .IsFiltered}} 当前筛选条件下没有货运单明细。
换个店铺、订单号或清空筛选条件再试。查看全部 @@ -183,7 +179,7 @@