fix: 「我的」页无法滚动 —— 缺滚动容器;顺带修矮屏登录页
用户反馈「我的页面点击进入后无法滑动」。 ## 根因:AccountPage 根本没有滚动容器 窄屏外壳是 `h-full flex flex-col overflow-hidden`,页面本身是 `flex-1 min-w-0 flex flex-col`,中间缺一层 `overflow-y-auto` —— 内容超出的部分**直接被裁**,滚不到也点不到。 实测 390px 下内容(资料 + 权限 + 改密码 + 密钥 + 退出)需 860px、容器只有 795px,「退出登录」按钮连同下面 65px 一起消失;1280x800 的桌面上同样看不到。 其余六个页面级组件(AdminUsersPage / MailView / ComposePage / ThreadView / ContactPanel / MailList)都有这一层,只有它漏了 —— 上一轮把退出登录搬进这页 之后内容变高,问题才显形。 ## 顺带:登录页与初始化页在矮屏滚不到底 卡片高约 371px,而 `h-full flex items-center` 在内容超高时让它上下**同时**溢出, 溢出到顶部那段是滚不到的(`scrollTop` 最小是 0)—— 实测 568x280(横屏手机, 或软键盘弹出后的可视高度)下「登录」按钮完全在视口外,光加 `overflow-y-auto` 也够不着。 改用卡片自己的 `my-auto` 而不是容器的 `items-center`:auto margin 在空间不足时 自动退化为 0,矮屏变成正常的顶对齐可滚布局,高屏仍然垂直居中 (390x844 与 1280x800 实测 centered=true,568x280 下滚到底能看到按钮)。 ## 两侧都加了检查 - 结构断言:七个页面级组件都必须含 `overflow-y-auto`; 登录/初始化页必须有 `my-auto` 且不用 `h-full ... items-center` - 实测脚本新增 `scrollHealth()`:每页都有滚动容器,且没有内容被 `overflow-hidden` 的父级裁掉 判据刻意是「**有**滚动容器」而不是「当前正在滚动」—— 内容暂时不够高时后者 为假,但页面是健康的;真正的 bug 是根本没有那一层。 ## 验证 窄屏实测 18 项 + 宽屏回归 5 项全通过;结构断言从 28 条扩到 37 条。 生产已部署。
This commit is contained in:
@ -134,6 +134,31 @@ const thread = read('../src/components/ThreadView.tsx');
|
||||
check('对话树缩进随屏宽自适应', thread.includes('useIsNarrow') && /narrow \? 10 : 20/.test(thread));
|
||||
check('对话树窄屏有返回出口', thread.includes('<BackButton'));
|
||||
|
||||
// 5.6) 每个页面级组件都要有纵向滚动容器。
|
||||
// 窄屏外壳是 `h-full flex flex-col overflow-hidden`,页面本身是
|
||||
// `flex-1 min-w-0 flex flex-col` —— 内容超过视口时**没有任何办法滚到**,
|
||||
// 超出那段直接被裁。AccountPage 曾经就缺这个:390px 下内容需 860px、
|
||||
// 容器 795px,「退出登录」按钮连同下面 65px 一起消失。
|
||||
// 判据是「存在 overflow-y-auto」,不是「当前正在滚动」——
|
||||
// 内容暂时不够高时后者为假,但页面是健康的。
|
||||
for (const f of ['AccountPage', 'AdminUsersPage', 'MailView', 'ComposePage', 'ThreadView', 'ContactPanel', 'MailList']) {
|
||||
const src = read(`../src/components/${f}.tsx`);
|
||||
check(`${f} 有纵向滚动容器`, src.includes('overflow-y-auto'));
|
||||
}
|
||||
|
||||
// 5.7) 居中的单卡片页(登录 / 初始化)在矮屏必须能滚到底。
|
||||
// `items-center` 在内容超高时让卡片上下同时溢出,而溢出到顶部那段
|
||||
// 滚不到(scrollTop 最小是 0)—— 实测 568x280 下「登录」按钮完全在
|
||||
// 视口外。改用卡片自己的 my-auto:空间不足时 auto margin 退化为 0。
|
||||
for (const f of ['LoginPage', 'SetupPage']) {
|
||||
const src = read(`../src/components/${f}.tsx`);
|
||||
check(
|
||||
`${f} 矮屏可滚且不用 items-center 居中`,
|
||||
src.includes('overflow-y-auto') && src.includes('my-auto') &&
|
||||
!/h-full[^"]*items-center/.test(src)
|
||||
);
|
||||
}
|
||||
|
||||
// 6) 横向内边距在窄屏收窄(px-6 在 375px 屏上白吃 48px)
|
||||
const wide = ['MailView', 'ComposePage', 'ThreadView', 'AccountPage', 'AdminUsersPage'];
|
||||
for (const f of wide) {
|
||||
|
||||
Reference in New Issue
Block a user