Admin：压缩顺运宝工具条并缩短操作文案 #219

New Issue

2026-08-24T11:28:16+08:00

ila commented

2026-08-24 11:28:16 +08:00

基本信息

类型：需求
父级大工单：#14
所属 MVP / 版本：#15 / Admin MVP 后续优化
阶段：顺运宝工具条压缩

要解决什么

顺运宝页面的同步、批量动作和筛选都在同一 .toolbar 中，但日期标签、按钮和处理阶段长文案占宽较大，桌面窗口下 Flex 会把筛选组换到第二行，减少列表可视高度。

做什么 / 不做什么

做：日期范围视觉改为 [开始日期] - [结束日期]，隐藏两个可见文字标签，但保留屏幕阅读器可读的完整 label；- 只是装饰分隔符。
做：页面批量按钮缩短为“创建采集”和“创建采购”，保留完整无障碍名称和弹窗标题。
做：处理阶段筛选项“采购数据异常：顺运宝未提供规格”缩短为“顺运宝未提供规格”，筛选值 spec_missing 及详情原因说明不变。
做：为 SYB 工具条增加专用 class 和桌面紧凑样式，让 1366x768 下全部工具条控件保持一行；窄窗口仍允许自然换行。
不做：不修改通用 .toolbar ��其他模块，不改数据库、接口、筛选值或业务逻辑。

怎么做

admin/templates/syb/list.html：增加 SYB 专用工具条/筛选 class；日期 label 使用视觉隐藏样式，增加 aria-hidden 分隔符；缩短两个页面按钮文字并保留完整 aria-label。
admin/static/css/app.css：增加可复用的视觉隐藏工具类，只在 SYB 工具条中压缩间距、日期和处理阶段宽度；桌面不换行，窄屏回到 wrap。
admin/service/syb.go：仅调整 SybStageOptions() 的筛选展示文字。
更新 SYB 模板/CSS/Service 自动化测试，并同步 Admin 界面规范。

验收标准

页面不再显示“开始日期”和“结束日期”文字，两个日期中间显示 -，两个 input 仍有完整可访问名称。
SYB 列表批量按钮显示“创建采集”和“创建采购”，弹窗标题及无障碍名称仍为完整“任务”语义。
spec_missing 筛选项显示“顺运宝未提供规格”，详情阶段和阻断原因不丢失。
1366x768 桌面窗口工具条保持一行、无水平溢出；窄窗口允许换行，不遮挡或截断控件。
同步、筛选、清除、删除、采集和采购表单的现有字段及状态保留不变。
Go 1.23.0 下 build、test、vet 全部通过。

怎么验证

从 admin/ 执行：

$env:GOTOOLCHAIN="go1.23.0"
go build ./...
go test ./... -count=1
go vet ./...
Remove-Item Env:GOTOOLCHAIN

补充静态模板/CSS 断言覆盖视觉文案、无障碍 label、SYB 专用不换行与窄屏回退。

风险和回退

工具条密度提高可能造成控件过度拥挤；限定在 SYB 页和桌面断点，并保留窄屏换行。
隐藏日期文字可能伤害无障碍；保留关联 label 而不使用占位符代替。
回退仅需恢复模板、展示文案和 SYB 专用 CSS，无数据回退。

实施记录

状态：已验收
实现提交：1ba5c88
归档提交：a14c2bf
归档文档：docs/task/219-顺运宝工具条压缩.md
验证：Go 1.23.0 下 go build ./...、go test ./... -count=1、go vet ./... 全部通过；1366px CSS 视口下工具条为一行且无溢出，1174px 下自然换成两行且无溢出。
未执行生产业务操作；生产发布与线上版本验证由独立部署工单跟踪。

## 基本信息 - 类型：需求 - 父级大工单：#14 - 所属 MVP / 版本：#15 / Admin MVP 后续优化 - 阶段：顺运宝工具条压缩 ## 要解决什么顺运宝页面的同步、批量动作和筛选都在同一 `.toolbar` 中，但日期标签、按钮和处理阶段长文案占宽较大，桌面窗口下 Flex 会把筛选组换到第二行，减少列表可视高度。 ## 做什么 / 不做什么 - 做：日期范围视觉改为 `[开始日期] - [结束日期]`，隐藏两个可见文字标签，但保留屏幕阅读器可读的完整 label；`-` 只是装饰分隔符。 - 做：页面批量按钮缩短为“创建采集”和“创建采购”，保留完整无障碍名称和弹窗标题。 - 做：处理阶段筛选项“采购数据异常：顺运宝未提供规格”缩短为“顺运宝未提供规格”，筛选值 `spec_missing` 及详情原因说明不变。 - 做：为 SYB 工具条增加专用 class 和桌面紧凑样式，让 1366x768 下全部工具条控件保持一行；窄窗口仍允许自然换行。 - 不做：不修改通用 `.toolbar` ��其他模块，不改数据库、接口、筛选值或业务逻辑。 ## 怎么做 - `admin/templates/syb/list.html`：增加 SYB 专用工具条/筛选 class；日期 label 使用视觉隐藏样式，增加 `aria-hidden` 分隔符；缩短两个页面按钮文字并保留完整 `aria-label`。 - `admin/static/css/app.css`：增加可复用的视觉隐藏工具类，只在 SYB 工具条中压缩间距、日期和处理阶段宽度；桌面不换行，窄屏回到 wrap。 - `admin/service/syb.go`：仅调整 `SybStageOptions()` 的筛选展示文字。 - 更新 SYB 模板/CSS/Service 自动化测试，并同步 Admin 界面规范。 ## 验收标准 - [x] 页面不再显示“开始日期”和“结束日期”文字，两个日期中间显示 `-`，两个 input 仍有完整可访问名称。 - [x] SYB 列表批量按钮显示“创建采集”和“创建采购”，弹窗标题及无障碍名称仍为完整“任务”语义。 - [x] `spec_missing` 筛选项显示“顺运宝未提供规格”，详情阶段和阻断原因不丢失。 - [x] 1366x768 桌面窗口工具条保持一行、无水平溢出；窄窗口允许换行，不遮挡或截断控件。 - [x] 同步、筛选、清除、删除、采集和采购表单的现有字段及状态保留不变。 - [x] Go 1.23.0 下 build、test、vet 全部通过。 ## 怎么验证从 `admin/` 执行： ```powershell $env:GOTOOLCHAIN="go1.23.0" go build ./... go test ./... -count=1 go vet ./... Remove-Item Env:GOTOOLCHAIN ``` 补充静态模板/CSS 断言覆盖视觉文案、无障碍 label、SYB 专用不换行与窄屏回退。 ## 风险和回退 - 工具条密度提高可能造成控件过度拥挤；限定在 SYB 页和桌面断点，并保留窄屏换行。 - 隐藏日期文字可能伤害无障碍；保留关联 label 而不使用占位符代替。 - 回退仅需恢复模板、展示文案和 SYB 专用 CSS，无数据回退。 ## 实施记录 - 状态：已验收 - 实现提交：`1ba5c88` - 归档提交：`a14c2bf` - 归档文档：`docs/task/219-顺运宝工具条压缩.md` - 验证：Go 1.23.0 下 `go build ./...`、`go test ./... -count=1`、`go vet ./...` 全部通过；1366px CSS 视口下工具条为一行且无溢出，1174px 下自然换成两行且无溢出。 - 未执行生产业务操作；生产发布与线上版本验证由独立部署工单跟踪。

ila referenced this issue

2026-08-24 11:28:17 +08:00

Admin：部署顺运宝工具条压缩版本到生产服务器 #220

ila commented

2026-08-24 11:41:42 +08:00