Files
cmautobuy/docs/task/65-admin底栏提示文字右对齐.md
T

2.3 KiB

65 Admin:底栏提示文字与分页整体右对齐

背景与目标

#64 已把六个主列表的分页组件放到公共底栏右侧,但状态提示文字仍占据左侧。此次将状态提示文字和分页组成同一个右对齐信息组,使底栏信息更加集中。

最终方案

  • 公共 .statusbar 使用 justify-content: flex-end,让状态提示和分页整体靠右。
  • 状态提示不再占满剩余空间,并使用右对齐;分页移除用于单独推到右侧的自动左边距。
  • 窄窗口继续让提示文字与分页回流为上下两行,两行分别靠右,底栏仍回到普通文档流以免遮挡表格。
  • UI/UX 规范用于确认同类信息成组、保持响应式回流和不改变键盘阅读顺序。

实际实现与建单方案一致,没有修改模板结构、分页逻辑、数据库或接口。

改了哪些

  • admin/static/css/app.css:让底栏提示文字与分页整体靠右,并保留窄窗口适配。
  • admin/main_test.go:通过完整 .statusbar 规则块检查右对齐目标,避免通用 CSS 字符串误命中其他组件。
  • docs/admin/05-ui-specification.md:更新公共底栏右对齐规范。

验收结果

验收标准 结果
宽窗口中提示文字位于分页左侧,二者整体靠右 通过(CSS 规则与自动化测试)
窄窗口换行后提示文字和分页分别靠右且不遮挡内容 通过(响应式规则与自动化测试)
六个主列表继续共用公共 footer,无页面专用样式 通过
分页、筛选、写操作和统计逻辑不变 通过
Go 1.23.0 build、test、vet 通过 通过

测试

  • 执行的命令(从 admin/):
    • $env:GOTOOLCHAIN='go1.23.0'; go build ./...
    • go test ./... -count=1
    • go vet ./...
  • 执行的命令(从仓库根目录):git diff --check -- admin docs/admin
  • 结果:全部通过。
  • 没验证到的部分:未在真实浏览器中人工检查 1366×768 和窄窗口的最终视觉效果。

相关提交

  • e9a190e 右对齐 Admin 底栏提示