MailUI4Agents/client/electron/test/manual/wide-regression.mjs

/**
 * 宽屏回归：窄屏修复不能把桌面布局改坏。
 *
 * 特别是两个只该在窄屏生效的东西：
 *   - `.tap` 的伪元素命中区（桌面密排工具栏里会互相重叠）
 *   - `BackButton`（宽屏列表与详情并排，返回没有意义）
 *
 * 用法：ADMIN_PW=<密码> node client/electron/test/manual/wide-regression.mjs
 */
import { openApp, WIDE } from './narrow-probe-helper.mjs';

const { browser, page, issues } = await openApp(WIDE);
const failed = [];
const chk = (n, ok, note = '') => {
  console.log(`  ${ok ? '通过' : '失败'}  ${n}${note ? ' — ' + note : ''}`);
  if (!ok) failed.push(n);
};

console.log('宽屏回归（1280px）：');

const cols = await page.evaluate(() => {
  /*
   * 选 `.app-shell`，不是 `#root > div`。
   *
   * 壁纸层（`app-backdrop`）后来挂成了 `#root` 的第一个子节点，`#root > div`
   * 从此指向**幕布本身**（它没有子节点）—— 这条判据于是一直报「栏数=0」的假失败。
   * 假失败比没有判据更贵：看的人会去查一个本来好好的三栏布局。
   */
  const root = document.querySelector('.app-shell');
  return { n: root?.children.length, first: root?.children[0]?.className?.toString().slice(0, 30) };
});
chk('仍是三栏并排', cols.n === 3, `栏数=${cols.n} 首栏=${cols.first}`);

// 常驻侧栏是宽屏唯一的退出入口（账号页也有，两处都要在）
const side = await page.evaluate(() => {
  const s = document.querySelector('#root > div > div');
  const btns = s
    ? [...s.querySelectorAll('button')].map(b =>
        (b.getAttribute('title') || b.textContent || '').trim().slice(0, 12)
      )
    : [];
  return { w: s ? Math.round(s.getBoundingClientRect().width) : 0, btns };
});
chk('常驻侧栏仍有退出登录', side.btns.some(b => b.includes('退出')), `宽=${side.w}`);

// 宽屏不该出现返回按钮
// 邮件行是 <button class="w-full text-left ...">
const rows = page.locator('button.w-full.text-left');
if ((await rows.count()) > 0) await rows.first().click();
await page.waitForTimeout(1000);
const backN = await page.locator('button[aria-label="返回"], button[aria-label="会话"]').count();
chk('没有返回按钮', backN === 0, `${backN} 个`);

// .tap 只在 max-width:767px 生效
const tapWide = await page.evaluate(() => {
  const b = [...document.querySelectorAll('.tap')].find(x => x.getBoundingClientRect().height > 0);
  if (!b) return null;
  const cs = getComputedStyle(b, '::after');
  return { content: cs.content, w: cs.width, h: cs.height };
});
chk(
  '.tap 伪元素在宽屏不生效',
  !tapWide || tapWide.content === 'none' || tapWide.w === 'auto',
  JSON.stringify(tapWide)
);

const of = await page.evaluate(() => ({
  d: document.documentElement.clientWidth,
  s: document.documentElement.scrollWidth
}));
chk('无横向溢出', of.s <= of.d, `doc=${of.d} scroll=${of.s}`);

/*
 * 折叠策略在**宽屏**同样生效（2026-09-14 用户：「我发现宽屏布局也有邮件内容
 * 显示区域过小的问题，宽屏也同步窄屏的折叠策略吧」）。
 *
 * 为什么必须量真实的盒子：上一版宽屏是「恒展开」，而头部 139px(17%) + 回复框
 * 246px(31%) 把正文挤到只剩 385px(48%)。那时**没有任何判据会红** ——
 * narrow-layout 只判窄屏，而宽屏这边一条断言都没有。
 */
const fold = await page.evaluate(() => {
  const px = n => Math.round(n);
  const exp = document.querySelector('[aria-expanded]');
  const header = exp ? exp.closest('.glass-card') : null;
  let scroller = document.querySelector('.markdown');
  while (scroller && !['auto', 'scroll'].includes(getComputedStyle(scroller).overflowY)) {
    scroller = scroller.parentElement;
  }
  const fab = document.querySelector('[data-testid="reply-fab"]');
  const pane = document.querySelector('#root > div > div:last-child');
  const R = el => (el ? el.getBoundingClientRect() : null);
  const hb = R(header), sb = R(scroller), fb = R(fab), pb = R(pane);
  return {
    vh: px(window.innerHeight),
    expanded: exp ? exp.getAttribute('aria-expanded') : null,
    headerH: hb ? px(hb.height) : 0,
    scrollerH: sb ? px(sb.height) : 0,
    fab: fb ? { x: px(fb.x), y: px(fb.y), w: px(fb.width), h: px(fb.height) } : null,
    pane: pb ? { x: px(pb.x), y: px(pb.y), w: px(pb.width), h: px(pb.height) } : null,
    hasTextarea: !!document.querySelector('textarea')
  };
});

chk('宽屏头部也默认收起', fold.expanded === 'false', String(fold.expanded));
chk(
  '宽屏正文占视口 80% 以上',
  fold.scrollerH / fold.vh >= 0.8,
  `${Math.round((fold.scrollerH / fold.vh) * 100)}%（收起态实测 90%）`
);
chk('宽屏回复框也默认收起、只剩悬浮球', fold.fab !== null && !fold.hasTextarea);
chk(
  '悬浮球在详情栏内（不是视口右下角）',
  fold.fab && fold.pane &&
    fold.fab.x >= fold.pane.x && fold.fab.y >= fold.pane.y &&
    fold.fab.x + fold.fab.w <= fold.pane.x + fold.pane.w + 1 &&
    fold.fab.y + fold.fab.h <= fold.pane.y + fold.pane.h + 1,
  `球=${JSON.stringify(fold.fab)} 栏=${JSON.stringify(fold.pane)}`
);

// 点标题行要真的展开（“默认收起”不能变成“永远打不开”）
await page.locator('[aria-expanded]').click();
await page.waitForTimeout(500);
const afterExpand = await page.evaluate(() => ({
  expanded: document.querySelector('[aria-expanded]')?.getAttribute('aria-expanded'),
  hasFrom: document.body.innerText.includes('发件')
}));
chk('宽屏点标题行能展开并看到收发件人', afterExpand.expanded === 'true' && afterExpand.hasFrom);

// 点悬浮球要能打开输入框
await page.locator('[data-testid="reply-fab"]').click();
await page.waitForTimeout(500);
chk('宽屏点悬浮球能展开输入框（带焦点）', await page.evaluate(() => document.activeElement?.tagName === 'TEXTAREA'));

/*
 * 日历的圆角（用户 2026-09-14：「日历页面还没有添加圆角」）。
 *
 * 为什么在这里验、而不是只验 CSS：那一族的形态是**「computed style 里
 * border-radius 就是 14px，看上去却是方角」** —— 圆角加在一个**没有底色**的
 * 外层上，白底的内层面板用直角原地把它盖掉了。
 * 光看 `getComputedStyle(panel).borderRadius` 也区分不了：真正决定观感的是
 * **角上那 2px 到底是谁在画**。所以从 elementFromPoint 起往上走，找第一个
 * 自带底色的元素 —— 它必须就是那个圆角面板本身。
 */
await page.locator('button:has-text("日历")').first().click();
await page.waitForSelector('.cal-panes', { timeout: 20000 });
await page.waitForTimeout(600);
const cal = await page.evaluate(() => {
  const w = document.querySelector('.cal-panes');
  if (!w) return { found: false };
  const first = w.firstElementChild;
  const last = w.lastElementChild;
  const lastInner = last.firstElementChild;
  const painterAt = (x, y) => {
    let e = document.elementFromPoint(x, y);
    while (e) {
      const bg = getComputedStyle(e).backgroundColor;
      if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return e;
      e = e.parentElement;
    }
    return null;
  };
  const rf = first.getBoundingClientRect();
  const rl = last.getBoundingClientRect();
  return {
    found: true,
    firstRadius: getComputedStyle(first).borderRadius,
    lastRadius: lastInner ? getComputedStyle(lastInner).borderRadius : null,
    tl: painterAt(rf.x + 2, rf.y + 2) === first,
    bl: painterAt(rf.x + 2, rf.bottom - 3) === first,
    tr: painterAt(rl.right - 3, rl.y + 2) === lastInner,
    br: painterAt(rl.right - 3, rl.bottom - 3) === lastInner
  };
});
chk('日历布局挂上了面板栈标记', cal.found);
chk(
  '日历四个外角由**自带底色的那层面板**画（不是透明外壳）',
  cal.found && cal.tl && cal.bl && cal.tr && cal.br,
  `左栏 radius=${cal.firstRadius} 右栏 radius=${cal.lastRadius} 角=${JSON.stringify({ tl: cal.tl, bl: cal.bl, tr: cal.tr, br: cal.br })}`
);

console.log('\nissues:', issues.length ? issues : '无');
console.log(failed.length === 0 ? '\n宽屏回归：全部通过' : `\n宽屏回归：${failed.length} 项失败`);

await page.close();
await browser.close();
process.exit(failed.length === 0 ? 0 : 1);