From 1ba5c8860433b24fb1ce753eba5f4f79b0e0761c Mon Sep 17 00:00:00 2001 From: chengma Date: Thu, 13 Aug 2026 15:28:45 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E5=8E=8B=E7=BC=A9=E9=A1=BA=E8=BF=90?= =?UTF-8?q?=E5=AE=9D=E5=B7=A5=E5=85=B7=E6=9D=A1=20(#219)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin/main_test.go | 8 +++++ admin/service/syb.go | 2 +- admin/service/syb_workflow_test.go | 25 +++++++++++++- admin/static/css/app.css | 47 ++++++++++++++++++++++++++ admin/syb_interaction_template_test.go | 11 +++++- admin/templates/syb/list.html | 13 +++---- docs/admin/05-ui-specification.md | 12 +++++-- 7 files changed, 106 insertions(+), 12 deletions(-) diff --git a/admin/main_test.go b/admin/main_test.go index 6bd8d35..5300cb4 100644 --- a/admin/main_test.go +++ b/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) diff --git a/admin/service/syb.go b/admin/service/syb.go index 33c9049..a6d6de0 100644 --- a/admin/service/syb.go +++ b/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 采集中"}, diff --git a/admin/service/syb_workflow_test.go b/admin/service/syb_workflow_test.go index 45fcd76..4e42659 100644 --- a/admin/service/syb_workflow_test.go +++ b/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}, diff --git a/admin/static/css/app.css b/admin/static/css/app.css index 3cd24df..ceeb814 100644 --- a/admin/static/css/app.css +++ b/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%; } diff --git a/admin/syb_interaction_template_test.go b/admin/syb_interaction_template_test.go index adbd8b1..ec6f306 100644 --- a/admin/syb_interaction_template_test.go +++ b/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"`, - `>创建采集任务`, + `aria-label="创建采集任务">创建采集`, + `aria-label="创建采购任务">创建采购`, `

创建采集任务

`, + `

确认创建采购任务

`, + `class="toolbar syb-toolbar"`, + `class="visually-hidden" for="sync-date-from">开始日期`, + `class="syb-date-separator" aria-hidden="true">-`, + `class="visually-hidden" for="sync-date-to">结束日期`, + `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) { `SYB-READY`, `>创建 PDD 采集任务`, `

创建 PDD 采集任务

`, + `data-need-checked="collect">创建采集任务`, + `data-purchase-open>创建采购任务`, `每行只显示当前最需要完成的下一步`, `按顺运宝货运单创建日期（UTC+8）同步`, } { diff --git a/admin/templates/syb/list.html b/admin/templates/syb/list.html index c282026..f201d53 100644 --- a/admin/templates/syb/list.html +++ b/admin/templates/syb/list.html @@ -1,17 +1,18 @@ {{define "syb/list"}} {{template "header" .}} -
+
- + - + + + data-need-checked="collect" aria-label="创建采集任务">创建采集 + data-purchase-open aria-label="创建采购任务">创建采购 - +