JianFeeeee
2b6eb97bc9
`rotate-verify.mjs` 10/10。途中判据自己错了两次，都记在这里： 1. `content` 选择器取 `.narrow-shell > *:not(.narrow-nav)` —— 横屏改用侧边导航后， 第一个子元素变成了 60px 侧栏 ⇒ 把侧栏当内容区来判断排布，报出一条假失败。 改成同时排除 `.bg-chrome-900`。 2. 原先只断言"排布换了"，没断言"导航在哪边" ⇒ 用户后续追问的侧边栏 根本没被判据覆盖。现在补：横屏侧栏必须 60px 且在左侧、底部导航必须不存在； 竖屏反过来（底部导航存在、无侧栏）。
87 lines
4.3 KiB
JavaScript
87 lines
4.3 KiB
JavaScript
/**
|
||
* 横竖屏自适应验收（2026-09-14 用户：「为什么窄屏的横屏和竖屏没有自适应」）。
|
||
*
|
||
* 缺陷本质：断点是**纯宽度**的（<1024 都算窄屏）⇒ 竖屏 390 与横屏 844 落在同一档
|
||
* ⇒ 布局一个像素都不变，横屏多出来的宽度全浪费。看起来就是"没自适应"。
|
||
*
|
||
* 判据：横屏必须真的改变排布（并排），竖屏必须回到覆盖式，且来回切换都不坏。
|
||
* 用法：AGENTMAIL_DIST=<dist> ADMIN_USER=.. ADMIN_PW=.. node test/manual/rotate-verify.mjs
|
||
*/
|
||
import { openApp } from './narrow-probe-helper.mjs';
|
||
|
||
const { page, ctx } = await openApp({ width: 390, height: 844 });
|
||
const results = [];
|
||
const record = (n, ok, note) => {
|
||
results.push({ n, ok });
|
||
console.log(` ${ok ? '通过' : '失败'} ${n}${note ? ' — ' + note : ''}`);
|
||
};
|
||
|
||
const snap = () =>
|
||
page.evaluate(() => {
|
||
const de = document.documentElement;
|
||
// 排除底部导航**与侧边栏**：紧凑横屏下第一个子元素是 60px 侧栏（不是内容区），
|
||
// 不排除就会把侧栏当成内容区来判断排布（判据自己的错，实测踩到）
|
||
const content = document.querySelector(
|
||
'.narrow-shell > *:not(.narrow-nav):not(.bg-chrome-900)'
|
||
);
|
||
const nav = document.querySelector('.narrow-nav')?.getBoundingClientRect();
|
||
return {
|
||
vw: innerWidth,
|
||
vh: innerHeight,
|
||
appHeight: getComputedStyle(de).getPropertyValue('--app-height').trim(),
|
||
overflowX: de.scrollWidth - de.clientWidth,
|
||
contentCls: content ? content.className.toString().slice(0, 40) : '',
|
||
navVisible: nav ? nav.bottom <= innerHeight + 1 && nav.top > 0 : false,
|
||
navInset: nav ? Math.round(nav.left) : null,
|
||
hasBottomNav: !!document.querySelector('.narrow-nav'),
|
||
sideRail: (() => {
|
||
const r = document.querySelector('.narrow-shell > .bg-chrome-900');
|
||
if (!r) return null;
|
||
const b = r.getBoundingClientRect();
|
||
return { w: Math.round(b.width), h: Math.round(b.height), x: Math.round(b.x) };
|
||
})(),
|
||
listPaneW: Math.round((document.querySelector('.comm-pane')?.getBoundingClientRect().width) ?? 0)
|
||
};
|
||
});
|
||
|
||
try {
|
||
await page.waitForSelector('.narrow-nav', { timeout: 25000 });
|
||
await page.waitForTimeout(1500);
|
||
const p1 = await snap();
|
||
record('竖屏：覆盖式排布（NarrowStack）', /relative overflow-hidden/.test(p1.contentCls), p1.contentCls);
|
||
record('竖屏：导航在**底部**（不是侧边）', p1.hasBottomNav === true && p1.sideRail === null, `底部=${p1.hasBottomNav} 侧栏=${!!p1.sideRail}`);
|
||
record('竖屏：--app-height 跟随视口', p1.appHeight === `${p1.vh}px`, `${p1.appHeight} vs ${p1.vh}`);
|
||
|
||
await page.setViewportSize({ width: 844, height: 390 });
|
||
await page.waitForTimeout(1300);
|
||
const l = await snap();
|
||
record('横屏：真的换了排布（并排，而不是原样）', /flex-1 min-h-0 flex$/.test(l.contentCls), l.contentCls);
|
||
record('横屏：--app-height 重算（旋屏后不是旧值）', l.appHeight === '390px', l.appHeight);
|
||
record('横屏：无横向溢出', l.overflowX <= 0, `溢出 ${l.overflowX}px`);
|
||
// 用户后续追问：「导航栏在窄屏横屏情况下不也应当是在侧边吗？」⇒ 横屏用侧边栏
|
||
record(
|
||
'横屏：导航在**侧边**（60px 图标栏），底部导航不存在',
|
||
!!l.sideRail && l.sideRail.w === 60 && l.sideRail.x <= 12 && l.hasBottomNav === false,
|
||
`侧栏=${l.sideRail?.w}px x=${l.sideRail?.x} 底部导航=${l.hasBottomNav}`
|
||
);
|
||
record(
|
||
'横屏：列表栏固定 320（lg:断点在 844 宽下不生效，否则会吃掉整宽）',
|
||
l.listPaneW === 320,
|
||
`列表宽=${l.listPaneW}`
|
||
);
|
||
|
||
await page.setViewportSize({ width: 390, height: 844 });
|
||
await page.waitForTimeout(1300);
|
||
const p2 = await snap();
|
||
record('旋回竖屏：恢复覆盖式（可逆）', /relative overflow-hidden/.test(p2.contentCls), p2.contentCls);
|
||
record('旋回竖屏：高度重算回 844', p2.appHeight === '844px', p2.appHeight);
|
||
} finally {
|
||
await page.close();
|
||
await ctx.close();
|
||
}
|
||
|
||
const failed = results.filter(r => !r.ok);
|
||
console.log(`\n 横竖屏自适应：${results.length - failed.length}/${results.length} 通过`);
|
||
if (failed.length) console.log(' 失败：' + failed.map(f => f.n).join('; '));
|
||
process.exitCode = failed.length ? 1 : 0;
|