3.7 KiB
3.7 KiB
#219 Admin：压缩顺运宝工具条并缩短操作文案
- 类型：需求
- 父级大工单：#14
- 所属 MVP / 版本：#15 / 当前版本
- 状态：已完成
- 日期：2026-08-13
- Gitea 工单：http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/219
背景与目标
顺运宝数据页的日期、同步、批量操作和筛选控件在桌面宽屏下分成两行，占用了列表高度；部分按钮和筛选文案也偏长。本次在不改变同步、筛选和任务创建行为的前提下，压缩桌面工具条，并保留窄屏换行能力和表单可访问性。
最终方案
- 日期范围不再显示“开始日期”和“结束日期”文字，改为两个日期输入框之间显示短横线；两个输入框仍保留仅供屏幕阅读器读取的完整标签。
- 顺运宝列表批量按钮显示为“创建采集”和“创建采购”，同时保留完整的
aria-label，弹窗标题仍使用完整业务名称。 - 仅把处理阶段筛选项缩短为“顺运宝未提供规格”；详情中的完整异常原因和帮助文字不变。
- 为顺运宝页增加独立的桌面紧凑工具条样式。视口宽度不小于 1360px 时不换行；较窄视口继续按原有弹性布局自然换行，不影响其他模块的工具条。
- 未修改数据库结构、Admin 接口、同步逻辑和任务创建业务规则。
改了哪些
admin/templates/syb/list.html：调整日期标签与分隔符、缩短列表按钮文案、增加顺运宝工具条专用类和可访问名称。admin/static/css/app.css：增加隐藏可访问标签、日期分隔符和桌面紧凑布局样式。admin/service/syb.go：缩短缺规格筛选选项文案，保留详情阶段完整说明。admin/syb_interaction_template_test.go：覆盖工具条结构、短按钮文案、完整可访问名称和弹窗标题。admin/main_test.go：覆盖顺运宝工具条关键 CSS 约束。admin/service/syb_workflow_test.go：覆盖筛选短文案与详情完整文案的分工。docs/admin/05-ui-specification.md：同步桌面单行、窄屏换行、可访问标签和文案规范。
验收结果
| 验收标准 | 结果 |
|---|---|
| 页面不再显示“开始日期”，“结束日期”位置改为日期间短横线 | 通过 |
| 日期输入仍有可访问名称，短横线不被屏幕阅读器当作标签 | 通过 |
| 列表按钮显示“创建采集”“创建采购”，弹窗和可访问名称仍表达完整动作 | 通过 |
| 缺规格筛选显示“顺运宝未提供规格”，详情原因仍保持完整 | 通过 |
| 1366px CSS 视口下工具条为一行且无横向溢出 | 通过：工具条高 49px，scrollWidth 与 clientWidth 均为 1332px |
| 窄屏下允许换行且无横向溢出 | 通过：1174px CSS 视口下自然换成两行，无横向溢出 |
| 其他模块工具条不受顺运宝专用样式影响 | 通过：规则均限定在 .syb-toolbar 内 |
| Go 构建、测试和静态检查通过 | 通过 |
测试
- 执行的命令：
go test ./service . -run 'TestSyb(Stage|List|Page)' -count=1 -v$env:GOTOOLCHAIN='go1.23.0'; go build ./...; go test ./... -count=1; go vet ./...git diff --check- Microsoft Edge 无头浏览器分别以 1366px 和 1174px CSS 视口测量工具条行数、宽度和溢出，并检查 1366px 截图。
- 结果：目标测试、全量构建、全量测试、
go vet和差异格式检查全部通过；浏览器布局检查通过。 - 没验证到的部分：尚未在生产环境登录后手工点击同步、筛选和两个批量创建按钮；这些行为未改动，将在独立部署工单中验证生产页面和静态资源版本，不执行真实业务操作。
相关提交
1ba5c88style: 压缩顺运宝工具条 (#219)