/** * 横竖屏自适应验收(2026-09-14 用户:「为什么窄屏的横屏和竖屏没有自适应」)。 * * 缺陷本质:断点是**纯宽度**的(<1024 都算窄屏)⇒ 竖屏 390 与横屏 844 落在同一档 * ⇒ 布局一个像素都不变,横屏多出来的宽度全浪费。看起来就是"没自适应"。 * * 判据:横屏必须真的改变排布(并排),竖屏必须回到覆盖式,且来回切换都不坏。 * 用法:AGENTMAIL_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; const content = document.querySelector('.narrow-shell > *:not(.narrow-nav)'); 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 }; }); 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('竖屏:--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('横屏:底部导航仍完整可见且浮着', l.navVisible && l.navInset >= 6, `left=${l.navInset}`); 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;