diff --git a/admin/main_test.go b/admin/main_test.go index c5f8f90..0dcfbfc 100644 --- a/admin/main_test.go +++ b/admin/main_test.go @@ -18,9 +18,16 @@ func TestPaginationCSS_桌面右对齐且窄窗口不遮挡内容(t *testing.T) t.Fatal(err) } css := string(content) + statusbarRightAligned := `.statusbar { + position: fixed; + left: 0; right: 0; bottom: 0; + display: flex; + align-items: center; + justify-content: flex-end;` for _, want := range []string{ - "margin-left: auto", "flex: 0 0 auto", "@media (max-width: 760px)", - "position: static", "justify-content: flex-end", + statusbarRightAligned, "flex: 0 1 auto", "text-align: right", + "margin-left: 0", "flex: 0 0 auto", "@media (max-width: 760px)", + "position: static", ".statusbar > span:first-child { flex-basis: 100%; }", } { if !strings.Contains(css, want) { t.Fatalf("分页布局 CSS 缺少 %q", want) diff --git a/admin/static/css/app.css b/admin/static/css/app.css index ba863f5..75dff42 100644 --- a/admin/static/css/app.css +++ b/admin/static/css/app.css @@ -181,6 +181,7 @@ tr.empty small { color: #aaa; } left: 0; right: 0; bottom: 0; display: flex; align-items: center; + justify-content: flex-end; background: #2b3440; color: #c8cdd4; padding: 10px 16px; @@ -188,8 +189,9 @@ tr.empty small { color: #aaa; } gap: 12px; } .statusbar > span:first-child { - flex: 1 1 auto; + flex: 0 1 auto; min-width: 0; + text-align: right; } /* 链接和标题这类长内容截断显示,鼠标悬停看全文(title 属性)。 @@ -392,7 +394,7 @@ select { display: flex; align-items: center; gap: 6px; - margin-left: auto; + margin-left: 0; flex: 0 0 auto; } .pagination a, diff --git a/docs/admin/05-ui-specification.md b/docs/admin/05-ui-specification.md index 0131848..e4e87a3 100644 --- a/docs/admin/05-ui-specification.md +++ b/docs/admin/05-ui-specification.md @@ -106,8 +106,9 @@ 浏览器的前进后退和书签都该正常工作。 - `[必须]` 第一页时"首页 / 上一页"禁用,最后一页时"下一页 / 末页"禁用; 禁用要有**视觉 + 语义**区分(不可点的元素不要还是 ``),不能只靠颜色。 -- `[必须]` 固定底部状态条左侧显示状态和统计,分页组件稳定靠在右下角; - 窄窗口可以换成上下两行,但不得遮住状态文字、分页按钮或表格最后一行。 +- `[必须]` 固定底部状态条把状态提示和分页组件作为同一组整体靠右,状态提示 + 位于分页左侧;窄窗口可以换成上下两行,两行仍分别靠右,且不得遮住状态文字、 + 分页按钮或表格最后一行。 - `[必须]` 表格勾选只代表当前页。翻页后不保留勾选,也不提供跨页批量操作, 避免操作员看不到将被处理的记录。 - `[建议]` 不做 `1 2 3 … N` 这种页码列表。页数一多列出来没有意义,