+ /* `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)