From c54fdda0e83b9e92848ab32988e812031954ff5a Mon Sep 17 00:00:00 2001 From: seaislee1209 Date: Tue, 12 May 2026 21:42:36 +0800 Subject: [PATCH] =?UTF-8?q?revert(admin):=20=E6=92=A4=E6=8E=89=20sticky=20?= =?UTF-8?q?=E7=BF=BB=E9=A1=B5=20=E2=80=94=20=E7=94=A8=E6=88=B7=E5=8F=8D?= =?UTF-8?q?=E9=A6=88=20sticky=20=E8=AE=A9=E5=86=85=E5=AE=B9=E5=9C=A8?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=90=8E=E9=80=8F=E8=A7=86,=E4=B8=8D?= =?UTF-8?q?=E5=AF=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit sticky bottom: 0 的语义是"natural 位置在视口底之下时贴底,否则正常坐落"。 当 .content 滚动容器下方还有内容时,翻页按钮浮在视口底部, 表格行从它身后滚过 — 视觉上"翻页按钮下面又有表格内容"非常违和。 恢复成普通 .pagination + padding-bottom 兜底, 依赖批次 I 的根因三件套(100dvh + min-height: 0)解决 Safari 翻页被工具栏遮挡: - 100dvh 保证 .layout 高度 = 用户实际可见区(不被 Safari 工具栏吃掉) - min-height: 0 保证 .content 内部能正常 overflow-y: auto 滚动 - padding-bottom: 8px 给按钮一点缓冲 用户期望就是"滚动条能滚到最底,翻页按钮可见可点",而不是"翻页按钮固定不动"。 Co-Authored-By: Claude Opus 4.7 (1M context) --- web/src/pages/AuditLogsPage.module.css | 10 +--------- web/src/pages/LoginRecordsPage.module.css | 10 +--------- web/src/pages/RecordsPage.module.css | 10 +--------- web/src/pages/UsersPage.module.css | 10 +--------- 4 files changed, 4 insertions(+), 36 deletions(-) diff --git a/web/src/pages/AuditLogsPage.module.css b/web/src/pages/AuditLogsPage.module.css index 1ffd56f..aa517fc 100644 --- a/web/src/pages/AuditLogsPage.module.css +++ b/web/src/pages/AuditLogsPage.module.css @@ -43,15 +43,7 @@ .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } -.pagination { - display: flex; justify-content: space-between; align-items: center; - /* sticky 贴底:翻页按钮始终可见 */ - position: sticky; bottom: 0; - margin-top: 16px; - padding: 8px 0 8px; - background: var(--color-bg-page); - z-index: 10; -} +.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageButtons { display: flex; gap: 4px; } .pageButtons button { diff --git a/web/src/pages/LoginRecordsPage.module.css b/web/src/pages/LoginRecordsPage.module.css index 36eec2f..2c8b6f3 100644 --- a/web/src/pages/LoginRecordsPage.module.css +++ b/web/src/pages/LoginRecordsPage.module.css @@ -35,15 +35,7 @@ .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } -.pagination { - display: flex; justify-content: space-between; align-items: center; - /* sticky 贴底:翻页按钮始终可见 */ - position: sticky; bottom: 0; - margin-top: 16px; - padding: 8px 0 8px; - background: var(--color-bg-page); - z-index: 10; -} +.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageButtons { display: flex; gap: 4px; } .pageButtons button { diff --git a/web/src/pages/RecordsPage.module.css b/web/src/pages/RecordsPage.module.css index 3ac3d80..d9670dc 100644 --- a/web/src/pages/RecordsPage.module.css +++ b/web/src/pages/RecordsPage.module.css @@ -57,15 +57,7 @@ .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } -.pagination { - display: flex; justify-content: space-between; align-items: center; - /* sticky 贴底:翻页按钮始终可见,不用滚到最底才能点 */ - position: sticky; bottom: 0; - margin-top: 16px; - padding: 8px 0 8px; - background: var(--color-bg-page); - z-index: 10; -} +.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageButtons { display: flex; gap: 4px; } .pageButtons button { diff --git a/web/src/pages/UsersPage.module.css b/web/src/pages/UsersPage.module.css index 7249d9f..31817b8 100644 --- a/web/src/pages/UsersPage.module.css +++ b/web/src/pages/UsersPage.module.css @@ -51,15 +51,7 @@ .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } -.pagination { - display: flex; justify-content: space-between; align-items: center; - /* sticky 贴底:翻页按钮始终可见 */ - position: sticky; bottom: 0; - margin-top: 16px; - padding: 8px 0 8px; - background: var(--color-bg-page); - z-index: 10; -} +.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; } .pageInfo { color: var(--color-text-secondary); font-size: 13px; } .pageButtons { display: flex; gap: 4px; } .pageButtons button {