OPC/goauto
2
0
Fork 0
Code Issues 204 Pull Requests Actions Packages Projects Releases Wiki Activity

SYB 商品页在表格上方增加完整分页并移除长提示 #354

New Issue
Open
opened 2026-10-05 10:37:46 +08:00 by ila · 3 comments
ila commented 2026-10-05 10:37:46 +08:00
Owner
Copy Link
Copy Source

来源与范围（2026-10-05）

用户反馈：SYB 商品页默认每页 200 条，现有分页仅在表格最下方，不便操作；希望移除表格上方的长提示，在该位置增加完整分页。用户确认：仅 SYB 商品页增加顶部分页，其他页面不变；本单独立于 #353 店铺多选。2026-10-05 用户授权先实施本单再实施 #353；未授权合并或发布。

  • 目标：表格上方显示完整分页（总条数、每页条数、上一页、页码、下一页、跳页）；表格下方现有分页保留。两处使用相同的 page、pageSize、total 与加载逻辑。
  • 非目标：不改分页通用组件的全局展示规则，不改其他页面，不改服务端分页/API/数据库，不修改店铺筛选（#353）。
  • 前置依赖：无功能依赖；实施前基于最新 main 核对 #352，避免覆盖同一页面的其他改动。实施顺序固定 #354 → #353，同文件串行整合。

当前代码事实与设计证据（已确认低保真 v1，用户于 2026-10-05 确认）

核对 fix/352-syb-source-created 提交 1f3ce61 的 web/src/views/goauto/syb-products/index.vue：表格上方是不可关闭的长 el-alert，底部已有 <pagination>，每页选项 [20, 50, 100, 200, 500]，默认 200；load() 清空 selectedProducts 并调用表格 clearSelection()。实施前以最新 main 复核。

[筛选条件与批量操作]
[创建时间]
[本页选择：N 条]                     [共 X 条] [每页 20/50/100/200/500] [上一页] [页码] [下一页] [跳页]
┌────────────────────────────── 商品表格 ──────────────────────────────┐
└──────────────────────────────────────────────────────────────────────┘
                                [与顶部同步的完整底部分页]

设计取舍：删除原长提示；“表头全选仅当前页”缩为靠近已选数量的「本页选择」文案，不保留整行说明。沿用现有分页组件和页面视觉样式，不新建全局组件。两个实例均用组件原生 v-model:page / v-model:limit，不继续把 current-page / page-size 透传到包装组件。顶部用页面局部紧凑样式覆盖组件默认 32px 上下内边距，并设 :auto-scroll="false"，不改全局样式。顶部和底部均显示完整控件；总数为 0 时按现有分页隐藏规则处理。窄屏时分页行允许换行，不覆盖筛选或表格；加载中/请求失败保持当前状态和可见反馈。用户于 2026-10-05 确认布局与实施顺序；本低保真 v1 为已确认设计范围。

验收与验证

  1. 顶部可查看总数、切换每页条数、上一页/下一页/指定页和跳页；底部相同，两处页码、每页条数、总数始终一致。统一页面级分页处理：改每页条数先归第 1 页、一次触发一次 load；处理另一个实例因页数收缩产生的事件，不能重复请求。不要直接把组件 @pagination 的对象参数传给 load(allowNetworkRetry, waitForReadiness)。网络面板/测试核对每次换页或改页大小只有一次列表请求。
  2. 顶部或底部换页均复用原列表加载流程，清空当前页勾选与批量操作计数；表头全选仍只作用于当前页，不误以为跨页保留。
  3. 查询、重置、改变每页条数后页码与列表正确；0 条、1 页、多页、加载失败和窄屏布局可用。
  4. 原长提示移除；不把其采购前提内容搬到按钮 tooltip。顶部分页滚动不跳页顶；SYB 商品之外页面布局无变化。执行 Web 构建及相关最小界面/交互回归，并记录真实结果。

交付、风险与文档影响

仅 Web 页面布局；无 Server、Android、API、数据库、权限或状态机变更。主要风险是两个分页控件状态不同步、换页遗留勾选、窄屏拥挤；按上述验收验证。无长期 Wiki 文档影响：分页入口位置属于本页局部布局，不改变长期产品契约；工单记录实现、验证、提交哈希并待用户验收。发布线上需单独授权。Gitea MCP 本会话不可用，按仓库规则回退配置的 Gitea API 建单。

本次发布授权（2026-10-05）

用户要求将 #353、#354、#355 更新到线上服务，授权合并并配套发布 Server/Web 至 122.228.200.167。无需数据库迁移或 Android 更新；保留任务和定时任务原状态。发布前排除运行中的任务，发布证据完成后回写；用户未明确验收前不关闭。当前会话仍无 Gitea MCP，沿用已记录的 REST API 回退。

## 来源与范围（2026-10-05） 用户反馈：SYB 商品页默认每页 200 条，现有分页仅在表格最下方，不便操作；希望移除表格上方的长提示，在该位置增加完整分页。用户确认：**仅 SYB 商品页增加顶部分页**，其他页面不变；本单独立于 #353 店铺多选。2026-10-05 用户授权先实施本单再实施 #353；未授权合并或发布。 - 目标：表格上方显示完整分页（总条数、每页条数、上一页、页码、下一页、跳页）；表格下方现有分页保留。两处使用相同的 `page`、`pageSize`、`total` 与加载逻辑。 - 非目标：不改分页通用组件的全局展示规则，不改其他页面，不改服务端分页/API/数据库，不修改店铺筛选（#353）。 - 前置依赖：无功能依赖；实施前基于最新 main 核对 #352，避免覆盖同一页面的其他改动。实施顺序固定 #354 → #353，同文件串行整合。 ## 当前代码事实与设计证据（已确认低保真 v1，用户于 2026-10-05 确认） 核对 `fix/352-syb-source-created` 提交 `1f3ce61` 的 `web/src/views/goauto/syb-products/index.vue`：表格上方是不可关闭的长 `el-alert`，底部已有 `<pagination>`，每页选项 `[20, 50, 100, 200, 500]`，默认 200；`load()` 清空 `selectedProducts` 并调用表格 `clearSelection()`。实施前以最新 main 复核。 ```text [筛选条件与批量操作] [创建时间] [本页选择：N 条] [共 X 条] [每页 20/50/100/200/500] [上一页] [页码] [下一页] [跳页] ┌────────────────────────────── 商品表格 ──────────────────────────────┐ └──────────────────────────────────────────────────────────────────────┘ [与顶部同步的完整底部分页] ``` 设计取舍：删除原长提示；“表头全选仅当前页”缩为靠近已选数量的「本页选择」文案，不保留整行说明。沿用现有分页组件和页面视觉样式，不新建全局组件。两个实例均用组件原生 `v-model:page` / `v-model:limit`，不继续把 `current-page` / `page-size` 透传到包装组件。顶部用页面局部紧凑样式覆盖组件默认 32px 上下内边距，并设 `:auto-scroll="false"`，不改全局样式。顶部和底部均显示完整控件；总数为 0 时按现有分页隐藏规则处理。窄屏时分页行允许换行，不覆盖筛选或表格；加载中/请求失败保持当前状态和可见反馈。用户于 2026-10-05 确认布局与实施顺序；本低保真 v1 为已确认设计范围。 ## 验收与验证 1. 顶部可查看总数、切换每页条数、上一页/下一页/指定页和跳页；底部相同，两处页码、每页条数、总数始终一致。统一页面级分页处理：改每页条数先归第 1 页、一次触发一次 `load`；处理另一个实例因页数收缩产生的事件，不能重复请求。不要直接把组件 `@pagination` 的对象参数传给 `load(allowNetworkRetry, waitForReadiness)`。网络面板/测试核对每次换页或改页大小只有一次列表请求。 2. 顶部或底部换页均复用原列表加载流程，清空当前页勾选与批量操作计数；表头全选仍只作用于当前页，不误以为跨页保留。 3. 查询、重置、改变每页条数后页码与列表正确；0 条、1 页、多页、加载失败和窄屏布局可用。 4. 原长提示移除；不把其采购前提内容搬到按钮 tooltip。顶部分页滚动不跳页顶；SYB 商品之外页面布局无变化。执行 Web 构建及相关最小界面/交互回归，并记录真实结果。 ## 交付、风险与文档影响 仅 Web 页面布局；无 Server、Android、API、数据库、权限或状态机变更。主要风险是两个分页控件状态不同步、换页遗留勾选、窄屏拥挤；按上述验收验证。无长期 Wiki 文档影响：分页入口位置属于本页局部布局，不改变长期产品契约；工单记录实现、验证、提交哈希并待用户验收。发布线上需单独授权。Gitea MCP 本会话不可用，按仓库规则回退配置的 Gitea API 建单。 ## 本次发布授权（2026-10-05） 用户要求将 #353、#354、#355 更新到线上服务，授权合并并配套发布 Server/Web 至 122.228.200.167。无需数据库迁移或 Android 更新；保留任务和定时任务原状态。发布前排除运行中的任务，发布证据完成后回写；用户未明确验收前不关闭。当前会话仍无 Gitea MCP，沿用已记录的 REST API 回退。
ila commented 2026-10-05 10:45:35 +08:00
Author
Owner
Copy Link
Copy Source

方案审核意见（2026-10-05，基于 origin/main 1f3ce61）

工单所述代码事实核对无误。以下四点需补入方案与验收：

1. 两个分页实例会产生重复请求

核对 Element Plus 2.14.4 pagination.mjs：改每页条数时先 size-change 加载一次；若当前页超过新的总页数，每个分页实例会各自把页码收回范围并再触发 current-change。两个实例时，一次改每页条数约发 3 次列表请求（每次 200～500 行，并附带采购就绪检查）。loadGeneration 会丢弃旧响应，数据不会错，但违反验收「无重复请求」。

  • 要求：改每页条数时先置 page=1 并只调用一次 load；另一个实例只做状态同步显示，不触发加载。验收时用网络面板确认每次操作仅一次列表请求。

2. 不要照抄现有绑定

现页面写 v-model:current-page / v-model:page-size，而 web/src/components/Pagination/index.vue 的 props 是 page / limit，目前只是经 $attrs 透传给 el-pagination 才生效。顶部分页应使用 v-model:page / v-model:limit（底部可一并改正，属本页范围）。

3. 布局

  • .pagination-container 自带 padding: 32px 16px，顶部需本页局部紧凑样式，不改全局组件。
  • 组件默认换页后 scrollTo(0)（autoScroll）；顶部实例应设 :auto-scroll="false"，避免页面跳动。

4. 长提示处理（用户 2026-10-05 确认）

删除表格上方长提示，不需要把「先保存规格匹配才能创建采购」等采购前提改放到按钮提示；仅按原方案保留简短的「本页选择」文案。

实施顺序

与 #353 同改 syb-products/index.vue，建议本单先实施，#353 在其后串行整合。

## 方案审核意见（2026-10-05，基于 origin/main `1f3ce61`） 工单所述代码事实核对无误。以下四点需补入方案与验收： ### 1. 两个分页实例会产生重复请求 核对 Element Plus 2.14.4 `pagination.mjs`：改每页条数时先 `size-change` 加载一次；若当前页超过新的总页数，**每个**分页实例会各自把页码收回范围并再触发 `current-change`。两个实例时，一次改每页条数约发 3 次列表请求（每次 200～500 行，并附带采购就绪检查）。`loadGeneration` 会丢弃旧响应，数据不会错，但违反验收「无重复请求」。 - 要求：改每页条数时先置 `page=1` 并只调用一次 `load`；另一个实例只做状态同步显示，不触发加载。验收时用网络面板确认每次操作仅一次列表请求。 ### 2. 不要照抄现有绑定 现页面写 `v-model:current-page` / `v-model:page-size`，而 `web/src/components/Pagination/index.vue` 的 props 是 `page` / `limit`，目前只是经 `$attrs` 透传给 `el-pagination` 才生效。顶部分页应使用 `v-model:page` / `v-model:limit`（底部可一并改正，属本页范围）。 ### 3. 布局 - `.pagination-container` 自带 `padding: 32px 16px`，顶部需本页局部紧凑样式，不改全局组件。 - 组件默认换页后 `scrollTo(0)`（`autoScroll`）；顶部实例应设 `:auto-scroll="false"`，避免页面跳动。 ### 4. 长提示处理（用户 2026-10-05 确认） 删除表格上方长提示，**不需要**把「先保存规格匹配才能创建采购」等采购前提改放到按钮提示；仅按原方案保留简短的「本页选择」文案。 ### 实施顺序 与 #353 同改 `syb-products/index.vue`，建议本单先实施，#353 在其后串行整合。
ila commented 2026-10-05 11:33:38 +08:00
Author
Owner
Copy Link
Copy Source

#354 implementation: top pagination, synced page/size state, one list request after size change, and selection count. Removed long notice; no business filter change. Branch fix/354-syb-top-pagination, commit c6c7fbe pushed; not merged or deployed. Vite build, page ESLint, and 2 targeted Playwright tests passed. Related E2E: 23/24 passed; one pre-existing stale assertion expects collection creation enabled above its existing 100-item limit. No long-term documentation impact: page-local layout only. Pending user acceptance.

#354 implementation: top pagination, synced page/size state, one list request after size change, and selection count. Removed long notice; no business filter change. Branch fix/354-syb-top-pagination, commit c6c7fbe pushed; not merged or deployed. Vite build, page ESLint, and 2 targeted Playwright tests passed. Related E2E: 23/24 passed; one pre-existing stale assertion expects collection creation enabled above its existing 100-item limit. No long-term documentation impact: page-local layout only. Pending user acceptance.
ila commented 2026-10-05 14:03:00 +08:00
Author
Owner
Copy Link
Copy Source

验收前复核意见（2026-10-05，Claude Code）

复核对象：fix/354-syb-top-pagination @ c6c7fbe（基于 main 1f3ce61）。

结论：功能达标，可进入用户人工验收

  • 顶部完整分页与底部共用 page / pageSize / total；两处均改用组件原生 v-model:page / v-model:limit，同时修正了原底部靠 $attrs 透传生效的写法。
  • 顶部 :auto-scroll="false"，本页局部紧凑样式，未改全局组件。
  • 改每页条数时回到第 1 页且只请求一次列表（onPagination 合并两实例的事件）；新增 E2E 用请求计数验证。
  • 长提示已删除，未把采购前提改放到按钮提示，符合用户 2026-10-05 确认。

复核验证（本人实际执行）

  • 在 #353 分支（包含本单提交）上运行 syb-product-layout、syb-return-cancel、syb-return-confirm 三个 E2E 文件：24 通过，1 失败。
  • 唯一失败「去重后超过 100 个 PDD 商品时给出提示且不调用批量接口」在 main 1f3ce61 上单独运行同样失败，确认为既有问题，与本单无关。

待补手续

  • 工单正文「当前代码事实与设计证据」仍标为「待审核低保真 v1」；用户已于 2026-10-05 授权实施，请把正文更新为已确认，并写明确认人和时间。
## 验收前复核意见（2026-10-05，Claude Code） 复核对象：`fix/354-syb-top-pagination` @ `c6c7fbe`（基于 main `1f3ce61`）。 ### 结论：功能达标，可进入用户人工验收 - 顶部完整分页与底部共用 `page` / `pageSize` / `total`；两处均改用组件原生 `v-model:page` / `v-model:limit`，同时修正了原底部靠 `$attrs` 透传生效的写法。 - 顶部 `:auto-scroll="false"`，本页局部紧凑样式，未改全局组件。 - 改每页条数时回到第 1 页且只请求一次列表（`onPagination` 合并两实例的事件）；新增 E2E 用请求计数验证。 - 长提示已删除，未把采购前提改放到按钮提示，符合用户 2026-10-05 确认。 ### 复核验证（本人实际执行） - 在 #353 分支（包含本单提交）上运行 `syb-product-layout`、`syb-return-cancel`、`syb-return-confirm` 三个 E2E 文件：24 通过，1 失败。 - 唯一失败「去重后超过 100 个 PDD 商品时给出提示且不调用批量接口」在 main `1f3ce61` 上单独运行同样失败，确认为既有问题，与本单无关。 ### 待补手续 - 工单正文「当前代码事实与设计证据」仍标为「待审核低保真 v1」；用户已于 2026-10-05 授权实施，请把正文更新为已确认，并写明确认人和时间。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
admin ila
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: OPC/goauto#354