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

New Issue

2026-08-13T14:16:32+08:00

ila commented

2026-08-13 14:16:32 +08:00

基本信息

类型：需求
父级大工单：#14
所属 MVP / 版本：#15 / MVP 后续
阶段：顺运宝列表可用性

要解决什么

顺运宝列表列数多、店铺和规格列偏宽，内部货运单明细 ID 占据可视空间；筛选输入框和重复入口让工具栏拥挤。宽表的横向滚动条只在长表底部，采购员处理列表中部数据时难以左右移动。

做什么 / 不做什么

做什么

列表不再显示“货运单 ID”列，但内部明细 ID 继续用于选择、详情和任务关联，详情弹窗仍可查看。
店铺列最大宽度从通用 280px 收紧为 224px，规格列收紧为 140px，继续省略并保留完整值提示。
删除顺运宝工具栏中重复的“店铺管理”按钮；顶部主导航和店铺管理模块保持不变。
“创建 PDD 采集任务”按钮及确认弹窗标题统一改为“创建采集任务”，弹窗说明继续明确采集 PDD 商品。
店铺、订单号搜索框使用 SYB 专用约 140px 宽度，不影响其他页面。
在“搜索”左边增加“清除”，清除处理阶段、店铺、订单号和页码，并保留当前同步日期范围。
顺运宝表格使用有最大可视高度的独立双向滚动容器和固定表头，使横向滚动条保持在表格可视区域底部。
删除列表下方重复的操作提示语。
更新页面规范和自动化测试。

不做什么

不删除 syb_id 数据字段，不修改数据库、查询、分页、状态派生或任务关联。
不删除顶部导航中的店铺管理模块。
不修改其他模块的公共搜索框宽度和表格滚动方式。
不改变 Client 接口、同步逻辑、采集任务创建规则或采购流程。

怎么做

admin/templates/syb/list.html：调整工具栏、列头/单元格、空状态列数、专用类和清除链接。
admin/static/css/app.css：新增 SYB 专用搜索框、店铺列、规格列和滚动容器规则；表头在该容器内 sticky。
“清除”使用普通 GET 链接，不引入 JavaScript；链接只保留 date_from/date_to。
syb_id 继续存在于 checkbox、ARIA 标签、详情/采购按钮和详情弹窗。
更新 admin/syb_interaction_template_test.go、admin/main_test.go 及 docs/admin/05-ui-specification.md。

验收标准

顺运宝列表不显示货运单 ID 列，选择、详情和任务操作仍使用正确明细 ID。
店铺列最大 224px、规格列��大 140px，长内容省略且可查看完整值。
顺运宝工具栏不再显示店铺管理按钮，顶部导航入口仍存在。
顶部批量入口和确认弹窗均显示“创建采集任务”。
店铺、订单号输入框约 140px，且不影响其他模块。
“清除”位于“搜索”左侧，清除搜索条件和页码但保留同步日期。
1366×768 下长列表可以在表格可视区域底部使用横向滚动条，表头在表格内保持可见。
列表下方不再显示重复操作提示语。
Go 1.23 build、test、vet 全部通过。

怎么验证

在 admin/ 目录执行：

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

浏览器使用 1366×768 视口打开有 20 行数据的顺运宝页面，验证筛选、清除、纵向滚动、横向滚动、固定表头、勾选和详情操作。

风险和回退

风险：修改公共样式会影响其他模块；所有新增规则限定在 SYB 专用类。
风险：固定高度数据表形成独立滚动区域；只在长列表启用滚动，窄窗口回退为自然页面布局。
回退：回退模板和 SYB 专用 CSS 即可，不涉及数据回滚。

实施记录（2026-08-13）

已完成顺运宝工具条、可见列、专用宽度、清除筛选和长表滚动优化。
syb_id 仅移除可见列，复选框、详情和任务关联仍继续使用。
实现提交：40f6220
归档提交：47cdb2e
归档：docs/task/216-顺运宝列表筛选与滚动.md
验证：Go 1.23.0 下 go build ./...、go test ./... -count=1、go vet ./... 全部通过。
未验证：尚未在实际浏览器以 1366×768 和窄窗口人工检查视觉效果。
当前状态：已完成，待用户验收。

验收反馈修订（2026-08-13）

新增范围

删除“按顺运宝货运单创建日期（UTC+8）同步……”常驻提示；日期错误、同步警告、配置问题和登录提示仍按条件显示。
列表不再显示“处理阶段”列，但顶部处理阶段筛选、服务端阶段推导、勾选门禁、操作路由和详情阶段说明全部保留。
为避免隐藏阶段列后产生危险歧义，下一步动作改为明确文字：待人工核对显示“核对采购订单”，缺少规格显示“核对缺失规格”，数量异常显示“核对采购数量”。
顺运宝桌面页改为专用纵向 Flex 布局，表格使用剩余视口高度并保留固定表头及纵横滚动；窄窗口回到自然页面滚动。

新增验收标准

常驻同步说明不再占据列表上方空间，条件错误和警告仍可见。
表格不显示处理阶段列，阶段筛选及业务门禁不变。
待人工核对、缺少规格和数量异常的下一步文字可以直接区分。
桌面端表格同时向上、向下占满工具条与底部状态栏之间的剩余空间。
窄窗口不锁死页面高度，仍可自然滚动。
空状态列数、模板测试、阶段测试和界面规范与新布局一致。

修改范围补充

admin/templates/partials/header.html
admin/templates/syb/list.html
admin/static/css/app.css
admin/service/syb.go
对应测试、界面规范和 #216 本地归档

不修改数据库、Admin 接口、任务状态值、采购门禁或 Client 契约。

验收反馈实施记录（2026-08-13）

已删除常驻同步日期说明和可见处理阶段列；条件错误、警告及全部阶段业务逻辑保留。
已把待人工核对、缺少规格、数量异常的下一步改为明确文字。
已用 SYB 专用纵向 Flex 布局替代固定 max-height，桌面端表格填满剩余视口，窄窗口自然滚动。
实现提交：f834f62
更新归档提交：2ebe6bf
验证：Go 1.23.0 下 go build ./...、go test ./... -count=1、go vet ./... 全部通过。
未验证：尚未在实际浏览器以 1366×768 和窄窗口人工检查视觉效果。
当前状态：已完成，待用户验收。

## 基本信息 - 类型：需求 - 父级大工单：#14 - 所属 MVP / 版本：#15 / MVP 后续 - 阶段：顺运宝列表可用性 ## 要解决什么顺运宝列表列数多、店铺和规格列偏宽，内部货运单明细 ID 占据可视空间；筛选输入框和重复入口让工具栏拥挤。宽表的横向滚动条只在长表底部，采购员处理列表中部数据时难以左右移动。 ## 做什么 / 不做什么 ### 做什么 - 列表不再显示“货运单 ID”列，但内部明细 ID 继续用于选择、详情和任务关联，详情弹窗仍可查看。 - 店铺列最大宽度从通用 280px 收紧为 224px，规格列收紧为 140px，继续省略并保留完整值提示。 - 删除顺运宝工具栏中重复的“店铺管理”按钮；顶部主导航和店铺管理模块保持不变。 - “创建 PDD 采集任务”按钮及确认弹窗标题统一改为“创建采集任务”，弹窗说明继续明确采集 PDD 商品。 - 店铺、订单号搜索框使用 SYB 专用约 140px 宽度，不影响其他页面。 - 在“搜索”左边增加“清除”，清除处理阶段、店铺、订单号和页码，并保留当前同步日期范围。 - 顺运宝表格使用有最大可视高度的独立双向滚动容器和固定表头，使横向滚动条保持在表格可视区域底部。 - 删除列表下方重复的操作提示语。 - 更新页面规范和自动化测试。 ### 不做什么 - 不删除 `syb_id` 数据字段，不修改数据库、查询、分页、状态派生或任务关联。 - 不删除顶部导航中的店铺管理模块。 - 不修改其他模块的公共搜索框宽度和表格滚动方式。 - 不改变 Client 接口、同步逻辑、采集任务创建规则或采购流程。 ## 怎么做 - `admin/templates/syb/list.html`：调整工具栏、列头/单元格、空状态列数、专用类和清除链接。 - `admin/static/css/app.css`：新增 SYB 专用搜索框、店铺列、规格列和滚动容器规则；表头在该容器内 sticky。 - “清除”使用普通 GET 链接，不引入 JavaScript；链接只保留 `date_from/date_to`。 - `syb_id` 继续存在于 checkbox、ARIA 标签、详情/采购按钮和详情弹窗。 - 更新 `admin/syb_interaction_template_test.go`、`admin/main_test.go` 及 `docs/admin/05-ui-specification.md`。 ## 验收标准 - [x] 顺运宝列表不显示货运单 ID 列，选择、详情和任务操作仍使用正确明细 ID。 - [x] 店铺列最大 224px、规格列��大 140px，长内容省略且可查看完整值。 - [x] 顺运宝工具栏不再显示店铺管理按钮，顶部导航入口仍存在。 - [x] 顶部批量入口和确认弹窗均显示“创建采集任务”。 - [x] 店铺、订单号输入框约 140px，且不影响其他模块。 - [x] “清除”位于“搜索”左侧，清除搜索条件和页码但保留同步日期。 - [x] 1366×768 下长列表可以在表格可视区域底部使用横向滚动条，表头在表格内保持可见。 - [x] 列表下方不再显示重复操作提示语。 - [x] Go 1.23 build、test、vet 全部通过。 ## 怎么验证在 `admin/` 目录执行： ```powershell $env:GOTOOLCHAIN="go1.23.0" go build ./... go test ./... -count=1 go vet ./... Remove-Item Env:GOTOOLCHAIN ``` 浏览器使用 1366×768 视口打开有 20 行数据的顺运宝页面，验证筛选、清除、纵向滚动、横向滚动、固定表头、勾选和详情操作。 ## 风险和回退 - 风险：修改公共样式会影响其他模块；所有新增规则限定在 SYB 专用类。 - 风险：固定高度数据表形成独立滚动区域；只在长列表启用滚动，窄窗口回退为自然页面布局。 - 回退：回退模板和 SYB 专用 CSS 即可，不涉及数据回滚。 ## 实施记录（2026-08-13） - 已完成顺运宝工具条、可见列、专用宽度、清除筛选和长表滚动优化。 - `syb_id` 仅移除可见列，复选框、详情和任务关联仍继续使用。 - 实现提交：`40f6220` - 归档提交：`47cdb2e` - 归档：`docs/task/216-顺运宝列表筛选与滚动.md` - 验证：Go 1.23.0 下 `go build ./...`、`go test ./... -count=1`、`go vet ./...` 全部通过。 - 未验证：尚未在实际浏览器以 1366×768 和窄窗口人工检查视觉效果。 - 当前状态：已完成，待用户验收。 ## 验收反馈修订（2026-08-13） ### 新增范围 - 删除“按顺运宝货运单创建日期（UTC+8）同步……”常驻提示；日期错误、同步警告、配置问题和登录提示仍按条件显示。 - 列表不再显示“处理阶段”列，但顶部处理阶段筛选、服务端阶段推导、勾选门禁、操作路由和详情阶段说明全部保留。 - 为避免隐藏阶段列后产生危险歧义，下一步动作改为明确文字：待人工核对显示“核对采购订单”，缺少规格显示“核对缺失规格”，数量异常显示“核对采购数量”。 - 顺运宝桌面页改为专用纵向 Flex 布局，表格使用剩余视口高度并保留固定表头及纵横滚动；窄窗口回到自然页面滚动。 ### 新增验收标准 - [x] 常驻同步说明不再占据列表上方空间，条件错误和警告仍可见。 - [x] 表格不显示处理阶段列，阶段筛选及业务门禁不变。 - [x] 待人工核对、缺少规格和数量异常的下一步文字可以直接区分。 - [x] 桌面端表格同时向上、向下占满工具条与底部状态栏之间的剩余空间。 - [x] 窄窗口不锁死页面高度，仍可自然滚动。 - [x] 空状态列数、模板测试、阶段测试和界面规范与新布局一致。 ### 修改范围补充 - `admin/templates/partials/header.html` - `admin/templates/syb/list.html` - `admin/static/css/app.css` - `admin/service/syb.go` - 对应测试、界面规范和 #216 本地归档不修改数据库、Admin 接口、任务状态值、采购门禁或 Client 契约。 ## 验收反馈实施记录（2026-08-13） - 已删除常驻同步日期说明和可见处理阶段列；条件错误、警告及全部阶段业务逻辑保留。 - 已把待人工核对、缺少规格、数量异常的下一步改为明确文字。 - 已用 SYB 专用纵向 Flex 布局替代固定 `max-height`，桌面端表格填满剩余视口，窄窗口自然滚动。 - 实现提交：`f834f62` - 更新归档提交：`2ebe6bf` - 验证：Go 1.23.0 下 `go build ./...`、`go test ./... -count=1`、`go vet ./...` 全部通过。 - 未验证：尚未在实际浏览器以 1366×768 和窄窗口人工检查视觉效果。 - 当前状态：已完成，待用户验收。

ila referenced this issue

2026-08-13 14:16:47 +08:00

[Epic] Admin 采集采购管理端 #14

ila referenced this issue

2026-08-13 14:16:49 +08:00

[MVP] Admin 四模块可用闭环 #15

ila commented

2026-08-13 14:16:50 +08:00