style: 压缩顺运宝工具条 (#219)

admin/main_test.go

@@ -372,6 +372,14 @@ func TestSybPage_紧凑筛选和可见横向滚动(t *testing.T) {
 		`body.syb-page-body`,
 		`height: 100dvh`,
 		`body.syb-page-body > .page`,
+		`.visually-hidden`,
+		`.syb-date-separator`,
+		`@media (min-width: 1360px)`,
+		`.syb-toolbar`,
+		`flex-wrap: nowrap`,
+		`.syb-toolbar .syb-filter-form`,
+		`width: 116px`,
+		`width: 138px`,
 	} {
 		if !strings.Contains(string(css), want) {
 			t.Errorf("顺运宝紧凑列表样式缺少 %q", want)

admin/service/syb.go

@@ -1097,7 +1097,7 @@ type SybStageOption struct {
 func SybStageOptions() []SybStageOption {
 	return []SybStageOption{
 		{Value: "", Text: "全部"},
-		{Value: SybStageSpecMissing, Text: "采购数据异常：顺运宝未提供规格"},
+		{Value: SybStageSpecMissing, Text: "顺运宝未提供规格"},
 		{Value: SybStagePddMissing, Text: "未关联 PDD"},
 		{Value: SybStagePddPending, Text: "PDD 待采集"},
 		{Value: SybStagePddCollecting, Text: "PDD 采集中"},

admin/service/syb_workflow_test.go

@@ -167,12 +167,35 @@ func TestSybStageFor_全部筛选阶段与逐行推导一致(t *testing.T) {
 	}
 	for _, tc := range cases {
 		stage, text, _, action := sybStageFor(tc.context)
-		if stage != tc.want || text != SybStageLabel(tc.want) || action != tc.action {
+		wantText := SybStageLabel(tc.want)
+		if tc.want == SybStageSpecMissing {
+			// 筛选项为了工具条宽度使用短文案，行详情继续明确这是采购数据异常。
+			wantText = "采购数据异常：顺运宝未提供规格"
+		}
+		if stage != tc.want || text != wantText || action != tc.action {
 			t.Fatalf("阶段 %s 推导错误: stage=%s text=%q action=%q", tc.want, stage, text, action)
 		}
 	}
 }
 
+func TestSybStageOptions_缺规格筛选文案简洁且详情原因完整(t *testing.T) {
+	var filterText string
+	for _, option := range SybStageOptions() {
+		if option.Value == SybStageSpecMissing {
+			filterText = option.Text
+			break
+		}
+	}
+	if filterText != "顺运宝未提供规格" {
+		t.Fatalf("缺规格筛选文案错误: %q", filterText)
+	}
+	stage, stageText, help, _ := sybStageFor(repository.SybOrderContext{})
+	if stage != SybStageSpecMissing || stageText != "采购数据异常：顺运宝未提供规格" ||
+		!strings.Contains(help, "不能匹配或创建采购任务") {
+		t.Fatalf("缩短筛选项不得丢失详情原因: stage=%q text=%q help=%q", stage, stageText, help)
+	}
+}
+
 func TestSybOrderViewFor_批量动作能力按阶段隔离(t *testing.T) {
 	base := repository.SybOrderContext{
 		Order:      model.SybOrder{SybID: "SYB-1", SpecKey: "黑色,M", Quantity: 1},

admin/static/css/app.css

@@ -7,6 +7,19 @@
 
 * { box-sizing: border-box; }
 
+/* 视觉上隐藏，但继续让屏幕阅读器读取。表单控件不能只剩占位符或装饰文字。 */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 body {
   margin: 0;
   font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
@@ -155,6 +168,40 @@ body.syb-page-body > .page {
   resize: vertical;
 }
 .syb-order-search-input[aria-invalid="true"] { border-color: #b42318; }
+
+/* SYB 工具条在 1366px 桌面窗口压成一行。所有规则都限定在本页面，避免影响
+   其他主列表；窄于该断点时继续使用通用 toolbar 的自然换行。 */
+.syb-date-separator { color: #667085; }
+@media (min-width: 1360px) {
+  .syb-toolbar {
+    flex-wrap: nowrap;
+    gap: 4px;
+    padding: 8px 10px;
+  }
+  .syb-toolbar .inline { gap: 4px; }
+  .syb-toolbar button,
+  .syb-toolbar .button-link {
+    padding-right: 7px;
+    padding-left: 7px;
+  }
+  .syb-toolbar input,
+  .syb-toolbar select,
+  .syb-toolbar textarea,
+  .syb-toolbar button,
+  .syb-toolbar .button-link { font-size: 13px; }
+  .syb-toolbar .sync-range-form input[type="date"] {
+    width: 116px;
+    min-width: 116px;
+  }
+  .syb-toolbar .syb-filter-form {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .syb-toolbar .syb-filter-form select {
+    width: 138px;
+    min-width: 138px;
+  }
+}
 /* 蝦皮工具条同时放商品和店铺两个搜索框，各占剩余工具条的约 20%。
    min-width 继续由通用输入框规则提供，窄窗口时交给工具条自然换行。 */
 .toolbar input[type="text"].shopee-search-field { flex: 0 1 20%; }

admin/syb_interaction_template_test.go

@@ -86,8 +86,15 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) {
 		`data-select-action="collect"`,
 		`form="syb-collect-form"`,
 		`id="syb-collect-modal"`,
-		`>创建采集任务</button>`,
+		`aria-label="创建采集任务">创建采集</button>`,
+		`aria-label="创建采购任务">创建采购</button>`,
 		`<h2 id="syb-collect-modal-title">创建采集任务</h2>`,
+		`<h2 id="purchase-modal-title">确认创建采购任务</h2>`,
+		`class="toolbar syb-toolbar"`,
+		`class="visually-hidden" for="sync-date-from">开始日期</label>`,
+		`class="syb-date-separator" aria-hidden="true">-</span>`,
+		`class="visually-hidden" for="sync-date-to">结束日期</label>`,
+		`class="inline grow syb-filter-form"`,
 		`class="syb-search-input"`,
 		`订单号（可多条）`,
 		`textarea id="q" name="order_no" rows="1"`,
@@ -121,6 +128,8 @@ func TestSybListTemplate_区分标题图片与阶段动作(t *testing.T) {
 		`<td>SYB-READY</td>`,
 		`>创建 PDD 采集任务</button>`,
 		`<h2 id="syb-collect-modal-title">创建 PDD 采集任务</h2>`,
+		`data-need-checked="collect">创建采集任务</button>`,
+		`data-purchase-open>创建采购任务</button>`,
 		`每行只显示当前最需要完成的下一步`,
 		`按顺运宝货运单创建日期（UTC+8）同步`,
 	} {

admin/templates/syb/list.html

@@ -1,17 +1,18 @@
 {{define "syb/list"}}
 {{template "header" .}}
 
-<div class="toolbar">
+<div class="toolbar syb-toolbar">
   <form class="inline sync-range-form" method="post" action="/syb/sync" data-syb-sync-form>
     <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
     <input type="hidden" name="order_no" value="{{.Keyword}}">
     <input type="hidden" name="shop" value="{{.ShopFilter}}">
     <input type="hidden" name="stage" value="{{.StageFilter}}">
     <input type="hidden" name="page" value="{{.CurrentPage}}">
-    <label for="sync-date-from">开始日期</label>
+    <label class="visually-hidden" for="sync-date-from">开始日期</label>
     <input id="sync-date-from" type="date" name="date_from"
            value="{{.SyncDateFrom}}" max="{{.Today}}" required>
-    <label for="sync-date-to">结束日期</label>
+    <span class="syb-date-separator" aria-hidden="true">-</span>
+    <label class="visually-hidden" for="sync-date-to">结束日期</label>
     <input id="sync-date-to" type="date" name="date_to"
            value="{{.SyncDateTo}}" max="{{.Today}}" required>
     <button type="submit" class="primary" data-syb-sync-submit
@@ -30,12 +31,12 @@
   <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">创建采集任务</button>
+          data-need-checked="collect" aria-label="创建采集任务">创建采集</button>
 
   <button type="button" data-need-checked="purchase" data-modal-open="purchase-modal"
-          data-purchase-open>创建采购任务</button>
+          data-purchase-open aria-label="创建采购任务">创建采购</button>
 
-  <form class="inline grow" method="get" action="/syb">
+  <form class="inline grow syb-filter-form" method="get" action="/syb">
     <label for="stage">处理阶段</label>
     <select id="stage" name="stage">
       {{range .StageOptions}}