Files
cmautobuy/docs/task/216-顺运宝列表筛选与滚动.md
T

4.6 KiB

216 Admin:压缩顺运宝列表并优化筛选与滚动

  • 类型:需求
  • 父级大工单:#14
  • 所属 MVP / 版本:#15 / Admin MVP 后续优化
  • 状态:已完成,待用户验收
  • 日期:2026-08-13
  • Gitea 工单:#216

背景与目标

顺运宝列表列数较多,货运单明细 ID 占用可见空间,店铺和规格列偏宽;长列表滚动时 横向滚动条不容易到达。工具条还存在重复的店铺管理入口、偏宽筛选框和过时操作名称。 本次在不修改数据库及接口的前提下压缩列表,补充清除筛选入口,并改善长表滚动。

最终方案

  • 列表不再单独显示货运单明细 ID,但复选框、详情入口、采购入口和服务端提交继续使用 syb_id,详情及任务来源信息仍可查看该值。
  • 店铺列固定约 224px,规格列固定约 140px,超长内容继续省略并通过 title 查看。
  • 顺运宝店铺和订单号搜索框使用页面专用的 140px 宽度,避免影响其他模块。
  • 在“搜索”左侧增加“清除”,清空处理阶段、店铺、订单号及页码,同时保留当前同步 日期范围。
  • 顺运宝桌面页使用专用纵向 Flex 布局:导航、工具条和条件提示占实际高度,表格自动 填满到固定底部状态栏之间的剩余空间;表格内部纵横滚动并固定表头。760px 以下 窄窗口解除视口高度锁定,回到自然页面滚动。
  • 去掉工具条内重复的“店铺管理”按钮,管理员仍通过主导航进入店铺管理模块。
  • “创建 PDD 采集任务”统一改为“创建采集任务”,并删除列表底部的冗余提示语。
  • 根据首轮验收反馈,继续删除列表上方的常驻同步日期说明和可见“处理阶段”列;阶段 筛选、服务端推导、勾选门禁、操作路由和详情说明全部保留。
  • 隐藏阶段列后,待人工核对、缺少规格和数量异常分别显示“核对采购订单”、 “核对缺失规格”和“核对采购数量”,按钮 title 继续提供详细原因。

首轮方案使用固定 max-height,删除提示语后不能主动填满释放的空间。验收修订改为 Flex 剩余高度布局,不再依赖固定像素扣减;其余实现与修订后的 #216 一致。

改了哪些

  • admin/templates/partials/header.html:只为顺运宝页面输出专用视口布局类。
  • admin/templates/syb/list.html:调整工具条、搜索清除、列展示、明确操作名称和滚动区。
  • admin/static/css/app.css:增加顺运宝专用筛选框、列宽、Flex 剩余高度和固定表头样式。
  • admin/service/syb.go:让安全核对和数据异常的下一步动作文字可以直接区分。
  • admin/service/syb_workflow_test.go:验证每个阶段对应的明确动作文字。
  • admin/syb_interaction_template_test.go:验证新文案、清除入口、列结构及内部 ID 仍保留。
  • admin/main_test.go:验证顺运宝专用样式和主导航店铺入口没有被误删。
  • docs/admin/01-requirements.md:同步顺运宝工具条、可见列及滚动要求。
  • docs/admin/05-ui-specification.md:记录最终界面布局、尺寸和清除行为。

验收结果

验收标准 结果
列表不显示货运单 ID,内部选择和详情仍携带 syb_id 通过
店铺列约 224px、规格列约 140px,长内容可悬停查看 通过
工具条不再重复显示店铺管理,主导航入口保留 通过
创建按钮和弹窗标题显示“创建采集任务” 通过
两个搜索框约 140px,清除筛选时保留同步日期 通过
常驻同步日期说明已删除,条件错误和警告仍保留 通过
可见处理阶段列已删除,阶段筛选、门禁和详情逻辑保留 通过
待人工核对、缺少规格和数量异常的下一步文字可直接区分 通过
桌面端列表填满工具条与底部状态栏之间的剩余空间 通过
长列表使用固定表头的纵横滚动区,窄窗口恢复自然滚动 通过
冗余提示语已删除,空状态列数与新表格一致 通过
Admin Go 1.23 构建、测试和静态检查通过 通过

测试

  • 执行的命令:$env:GOTOOLCHAIN="go1.23.0"; go build ./...; go test ./... -count=1; go vet ./...
  • 结果:全部通过。
  • 没验证到的部分:未在实际浏览器中以 1366×768 和窄窗口人工检查视觉效果;模板、 样式和交互契约已由自动化测试覆盖。

相关提交

  • 40f6220 优化顺运宝列表筛选与滚动
  • f834f62 完善顺运宝列表紧凑布局