# #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` 和差异格式检查全部通过；浏览器布局检查通过。
- **没验证到的部分**：尚未在生产环境登录后手工点击同步、筛选和两个批量创建按钮；这些行为未改动，将在独立部署工单中验证生产页面和静态资源版本，不执行真实业务操作。

## 相关提交

- `1ba5c88` `style: 压缩顺运宝工具条 (#219)`