cmautobuy/docs/task/243-分页每页条数切换后自动刷新.md

243 Admin：分页每页条数切换后自动刷新

• 类型：缺陷
• 父级大工单：#14
• 所属 MVP / 版本：#15 Admin 四模块可用闭环
• 状态：已完成，待用户验收
• 日期：2026-08-15
• Gitea 工单：#243

背景与目标

#242 增加了每页 20、50、100 条选择器，但原实现是普通 GET 表单。用户切换到 50 条时， 浏览器只修改了表单值，必须再点击“应用”才会提交，所以页面看起来没有刷新；同时模块 状态白名单遗漏了 page_size，切换模块后也可能丢失已选容量。

本任务让容量选择立即生效，并保留无 JavaScript 环境下的正常表单回退。

最终方案

• 在公共分页表单上增加稳定的数据属性，选择 20、50、100 后立即提交原 GET 表单。
• 提交期间给表单设置 aria-busy，禁用“应用”按钮并显示“加载中…”，避免重复提交。
• 不禁用容量选择器，确保浏览器仍会把 page_size 带入 GET 请求。
• 保留“应用”按钮；JavaScript 不可用时，用户仍可手动提交表单。
• 把 page_size 加入七个可恢复列表模块的查询参数白名单，切换模块后保留选定容量。
• 不修改后端分页规则、数据库结构、接口或 Client。

改了哪些

• admin/templates/partials/footer.html：为公共分页表单、选择器和回退按钮增加数据属性。
• admin/static/js/app.js：增加容量切换自动提交、加载反馈、重复提交保护，并完善模块状态白名单。
• admin/main_test.go、admin/inner_code_template_test.go：补充自动提交、无脚本回退和状态保留回归测试。
• docs/admin/05-ui-specification.md：记录容量选择立即刷新及渐进增强规则。

验收结果

验收标准	结果
选择 20、50、100 后立即提交分页 GET 表单	通过
提交期间显示加载状态并防止重复提交	通过
禁用 JavaScript 后仍可使用“应用”按钮提交	通过（模板回退检查）
切换模块后保留 page_size	通过
既有默认值、白名单和回到第 1 页规则不变	通过
固定 Go 1.23.0 测试、构建和静态检查通过	通过

测试

• 执行的命令：

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

• 结果：全部通过；git diff --check 通过。
• 没验证到的部分：未在登录后的真实浏览器中人工切换 20、50、100；未实际禁用 JavaScript 操作回退按钮。两条路径已由模板和脚本回归测试覆盖。

相关提交

• 8e4239b fix: 分页条数切换后自动刷新 (#243)