diff --git a/client/electron/src/components/NarrowStack.tsx b/client/electron/src/components/NarrowStack.tsx index 99c7f30..262af52 100644 --- a/client/electron/src/components/NarrowStack.tsx +++ b/client/electron/src/components/NarrowStack.tsx @@ -56,7 +56,9 @@ export default function NarrowStack({ }, [open]); return ( -
+ /* `narrow-stack`:这一层才是「能裁剪 + 包住有底色的那一层」, + 圆角加在这里底层与覆盖层才会一起被裁(详见 index.css)*/ +
{/* 底层:始终挂载。打开覆盖层时用 aria-hidden 把它从无障碍树里摘掉, 否则屏幕阅读器会读到两层内容。 diff --git a/client/electron/src/index.css b/client/electron/src/index.css index 53f7505..ae05c30 100644 --- a/client/electron/src/index.css +++ b/client/electron/src/index.css @@ -877,6 +877,26 @@ html[data-bg='on'] .hover\:bg-gray-100:hover { border-radius: var(--radius-card); } +/* + * ★ 窄屏「页面覆盖」容器(NarrowStack 的根节点) + * 用户(2026-09-14):「我这边看还是方角」—— 上一轮我只修了宽屏那条分支。 + * + * 它是窄屏上**唯一**同时具备两个条件的层: + * ① 自己 `overflow: hidden`(能裁); + * ② 包着真正有底色的那一层(底层页 / 滑入的覆盖层)。 + * + * 而 `.narrow-shell > *` 那条圆角落在它**外面**那层透明 flex 容器上 + * (App.tsx 的 `
`),那层 `overflow: visible` + * 裁不住任何东西 —— 于是白底页面的直角原样露出来。 + * 实测 390x844 日历页:左上角像素纯白(方角),面板 computed radius = 0px。 + * + * 所以圆角必须加在这一层:加给它,底层与覆盖层就**一起**被裁到圆角里。 + * (日历与收件箱详情都走这个容器,一条规则同时修好;收件箱详情以前也是方角。) + */ +.narrow-stack { + border-radius: var(--radius-card); +} + html[data-bg='on'] .app-shell { padding: var(--pane-gap); gap: var(--pane-gap); diff --git a/client/electron/test/manual/narrow-verify.mjs b/client/electron/test/manual/narrow-verify.mjs index 440019b..860f304 100644 --- a/client/electron/test/manual/narrow-verify.mjs +++ b/client/electron/test/manual/narrow-verify.mjs @@ -15,6 +15,38 @@ import { scrollHealth, SMALL } from './narrow-probe-helper.mjs'; +import { inflateSync } from 'node:zlib'; + +/** + * 取屏幕上某个 CSS 坐标的像素颜色。 + * + * # 为什么非要有“读像素”这个能力 + * + * 「圆角到底有没有生效」是**只有像素能回答**的问题。 + * + * 用户(2026-09-14):「我这边看还是方角」。当时所有别的检查都是绿的: + * - `getComputedStyle(pane).borderRadius` === `14px`(外壳那条规则确实加上了); + * - 角上 2px 处“谁在画”也指着那块面板本身(elementFromPoint 沿祖先链找底色)。 + * 但实际渲染出来是方的 —— 因为那个 14px 加在一个**没有底色、也裁不住东西**的层上, + * 白底内层用自己的直角把它原地盖掉了。 + * + * 实测两个数字就能分辨(390x844 日历页左上角): + * 方角:(255,255,255) 圆角:(249,250,251)=页面底色 + * 所以这里截 1×1 再解 PNG —— 只用到 `zlib`,不引图像库。 + */ +async function pixelAt(page, x, y) { + const buf = await page.screenshot({ clip: { x, y, width: 1, height: 1 } }); + let p = 8; + const idat = []; + while (p < buf.length) { + const len = buf.readUInt32BE(p); + const type = buf.toString('ascii', p + 4, p + 8); + if (type === 'IDAT') idat.push(buf.subarray(p + 8, p + 8 + len)); + p += 12 + len; + } + const raw = inflateSync(Buffer.concat(idat)); + return [raw[1], raw[2], raw[3]]; // [filter, R, G, B, …] +} const { browser, ctx, page, issues } = await openApp(); const failed = []; @@ -166,6 +198,45 @@ await check('320px 模型范围排序按钮命中区达标', async () => { return { ok: small.length === 0, note: `${r.length} 个,最小 ${Math.min(...r.map(x => x.hitH))}px 高` }; }); +// 面板的圆角:只有像素能回答(见文件头 pixelAt 的说明)。 +// 日历与收件箱详情都走 NarrowStack(窄屏的「页面覆盖」容器), +// 圆角必须加在它那一层 —— 它在外面那层透明 flex 容器上时,两个页面都是方角。 +await check('日历页:面板左上角真的被切掉了(像素)', async () => { + await page.click('button:has-text("日历")'); + await page.waitForTimeout(2500); + const pane = await page.evaluate(() => { + const el = [...document.querySelectorAll('div')].find(e => + /flex-1 min-w-0 flex flex-col bg-white min-h-0/.test(String(e.className)) + ); + if (!el) return null; + const r = el.getBoundingClientRect(); + return { x: Math.round(r.x), y: Math.round(r.y), radius: getComputedStyle(el).borderRadius }; + }); + if (!pane) return { ok: false, note: '找不到日历主面板' }; + const px = await pixelAt(page, pane.x + 1, pane.y + 1); + // 页面底色是 gray-50(249,250,251);方角那里会是纯白 255,255,255 + const rounded = px[0] < 253; + return { ok: rounded, note: `角上像素=${px.join(',')}(圆角≈249,250,251;方角=255,255,255)` }; +}); + +await check('收件箱详情:面板左上角真的被切掉了(像素)', async () => { + await page.click('button:has-text("通信")'); + await page.waitForTimeout(1500); + const row = page.locator('button.w-full.text-left').first(); + if ((await row.count()) === 0) return { ok: true, note: '收件箱是空的,跳过' }; + await row.click(); + await page.waitForTimeout(2000); + const pane = await page.evaluate(() => { + const el = document.querySelector('div.relative.flex-1.min-w-0.flex.flex-col.bg-white'); + if (!el) return null; + const r = el.getBoundingClientRect(); + return { x: Math.round(r.x), y: Math.round(r.y) }; + }); + if (!pane) return { ok: false, note: '找不到详情面板' }; + const px = await pixelAt(page, pane.x + 1, pane.y + 1); + return { ok: px[0] < 253, note: `角上像素=${px.join(',')}` }; +}); + console.log('\nissues:', issues.length ? issues : '无'); console.log(failed.length === 0 ? '\n窄屏实测:全部通过' : `\n窄屏实测:${failed.length} 项失败 — ${failed.join(', ')}`); diff --git a/client/electron/test/narrow-layout.test.mjs b/client/electron/test/narrow-layout.test.mjs index b468d85..6503e17 100644 --- a/client/electron/test/narrow-layout.test.mjs +++ b/client/electron/test/narrow-layout.test.mjs @@ -250,6 +250,28 @@ check( calFirst !== '' && !/\.cal-panes\s*>\s*:first-child\s*>\s*\*/.test(css), '左栏本身就是白底面板;再往下就给到了第一个子元素(工具条),圆到不该圆的东西上' ); + +// 5.11) 窄屏「页面覆盖」容器(NarrowStack)自己必须带圆角,而且它得是**能裁剪**的那一层。 +// +// 用户(2026-09-14):「我这边看还是方角」—— 上一轮我只修了宽屏那条分支。 +// 实测 390x844:日历页左上角像素是**纯白 255,255,255**(方角),面板 radius 0px; +// 而同页面的 `.narrow-stack` 祖先拿到的 radius 恰好是 14px。 +// +// 因为 `.narrow-shell > *` 那条圆角落在 NarrowStack **外面**那层透明 flex 容器上 +// (App.tsx 的 `flex-1 min-h-0 flex`),它 `overflow: visible`,裁不住任何东西; +// 真正包住白底页面、又自带 `overflow: hidden` 的是 NarrowStack 的根节点。 +// 所以这两件事必须同时成立,分开一条都不算修好 —— 所以分开钉。 +check( + '窄屏覆盖容器(NarrowStack 根)自己带上面板圆角', + /className="narrow-stack[ "]/.test(stack) && + /\.narrow-stack\s*\{[^}]*border-radius:\s*var\(--radius-card\)/.test(css), + '圆角只加在外面那层透明 flex 容器上 —— 它裁不住东西,白底直角照样露出来' +); +check( + '那一层同时具备裁剪能力(overflow:hidden)', + /className="narrow-stack[^"]*overflow-hidden/.test(stack), + '圆角落在了裁不住东西的层上:观感仍是方角(computed radius 却是 14px)' +); check('根视口使用 100dvh 跟随软键盘', css.includes('@supports (height: 100dvh)')); // 6) 横向内边距在窄屏收窄(px-6 在 375px 屏上白吃 48px)