From 5544edabaf1d1a6a1d292e6744a8a16d97ab83be Mon Sep 17 00:00:00 2001
From: pi <pi@agentmail>
Date: Mon, 14 Sep 2026 19:07:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(webui):=20=E7=AA=84=E5=B1=8F=E3=80=8C?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=E3=80=8D=E9=A1=B5=E8=A1=A5=E4=B8=8A=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92=EF=BC=88=E4=B8=8E=E6=97=A5=E5=8E=86=E9=82=A3=E6=AC=A1?=
 =?UTF-8?q?=E5=90=8C=E4=B8=80=E4=B8=AA=E6=A0=B9=E5=9B=A0=EF=BC=8C=E5=8F=A6?=
 =?UTF-8?q?=E4=B8=80=E6=9D=A1=E5=88=86=E6=94=AF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户（2026-09-14）：「webui的『我的』页面，还是没有圆角」。

根因不在 AccountPage —— 在 App.tsx 的**分支**：没有列表栏的页面（我的/管理/写信）
走 `<div className="flex-1 min-h-0 flex">{main}</div>`，而 `.narrow-shell > *` 那条
圆角正落在这一层上。它是透明的、且 overflow: visible —— 有底色的是它里面的页面
根节点（`… bg-white`），内层直角从透明外壳里原样戳出来。
这与日历那次（`.narrow-stack` / `.cal-panes`）是同一条教训的**第三处**：
圆角必须给到**有底色的那一层**。

实测（390x844，真浏览器读渲染像素）：
  改前 面板 radius=0px，四角像素 255,255,255（纯白＝方角）
  改后 面板 radius=14px，四角像素 = 页面底色 249,250,251（被切掉）
  宽屏 1280 一直是好的（对照：与收件箱详情栏的四角剖面逐像素一致）

改法：那一层挂 `narrow-solo`，圆角写在 `.narrow-solo > *`（有底色的那层），
**不写 overflow:hidden**（这层下面的子元素自己就是滚动容器，与 app-shell 那段同一个坑）。
横屏紧凑的两栏（`narrow-duo`）照 `cal-panes` 只给**外沿**：首元素左两角、末元素右两角。

判据 narrow-layout 新增 3 条（规则与 JSX 按类名接得上 / 不写 overflow:hidden /
两栏只给外沿）；变异自检：把 `narrow-solo` 类名去掉，判据立刻红。
已部署（d3f6f3b·0914-1904）；.deb 与 dist 同批重打。
---
 client/electron/src/App.tsx                 |  7 ++--
 client/electron/src/index.css               | 35 ++++++++++++++++++++
 client/electron/test/narrow-layout.test.mjs | 36 +++++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/client/electron/src/App.tsx b/client/electron/src/App.tsx
index 1dbe729..09d0149 100644
--- a/client/electron/src/App.tsx
+++ b/client/electron/src/App.tsx
@@ -217,7 +217,9 @@ export default function App() {
     if (!hasList) {
       return (
         <NarrowShell>
-          <div className="flex-1 min-h-0 flex">{main}</div>
+          {/* `narrow-solo`：这一层自己透明，有底色的是它里面的页面根节点 ——
+              圆角规则在 index.css（要给到有底色的那一层，理由见那里）。 */}
+          <div className="narrow-solo flex-1 min-h-0 flex">{main}</div>
         </NarrowShell>
       );
     }
@@ -226,7 +228,8 @@ export default function App() {
     if (compactTwoPane && hasList) {
       return (
         <NarrowShell sideNav>
-          <div className="flex-1 min-h-0 flex">{list}{main}</div>
+          {/* 横屏紧凑：两栏并排，圆角只能给**外沿**（`narrow-duo` 里按首/末子元素分左右） */}
+          <div className="narrow-duo flex-1 min-h-0 flex">{list}{main}</div>
         </NarrowShell>
       );
     }
diff --git a/client/electron/src/index.css b/client/electron/src/index.css
index a94c8f9..eeb43a0 100644
--- a/client/electron/src/index.css
+++ b/client/electron/src/index.css
@@ -897,6 +897,41 @@ html[data-bg='on'] .hover\:bg-gray-100:hover {
   border-radius: var(--radius-card);
 }
 
+/*
+ * ★ 窄屏「单页」容器（没有列表栏的页面：我的 / 管理 / 写信）
+ *   用户（2026-09-14）：「webui的『我的』页面，还是没有圆角」。
+ *
+ * 与 `.narrow-stack` 那次**同一个根因**，只是另一条分支：
+ * `.narrow-shell > *` 那条圆角落在这一层（透明、overflow: visible），
+ * 而真正有底色的是它里面的页面根节点（`AccountPage` 的 `… bg-white`）——
+ * 内层的直角从透明外壳里原样戳出来。
+ * 实测 390×844「我的」页：面板 computed radius = **0px**，左下/右下都是白像素。
+ *
+ * 修法照 `cal-panes` 的做法：**圆角给到有底色的那一层**（`> *`），
+ * 并且不写 `overflow: hidden` —— 这一层下面的子元素自己就是滚动容器。
+ */
+.narrow-solo > * {
+  border-radius: var(--radius-card);
+  background-clip: padding-box;
+}
+
+/*
+ * 横屏紧凑的两栏（列表 + 主区域并排）：两栏之间只有 1px 分隔线，
+ * 所以只能给**外沿** —— 左边那块给左两角、右边那块给右两角；
+ * 内侧也给会露出底色缺口（这一条与 `.cal-panes` 是同一套判断）。
+ */
+.narrow-duo > :first-child {
+  border-start-start-radius: var(--radius-card);
+  border-end-start-radius: var(--radius-card);
+  background-clip: padding-box;
+}
+
+.narrow-duo > :last-child {
+  border-start-end-radius: var(--radius-card);
+  border-end-end-radius: var(--radius-card);
+  background-clip: padding-box;
+}
+
 html[data-bg='on'] .app-shell {
   padding: var(--pane-gap);
   gap: var(--pane-gap);
diff --git a/client/electron/test/narrow-layout.test.mjs b/client/electron/test/narrow-layout.test.mjs
index 6503e17..fa9dc5d 100644
--- a/client/electron/test/narrow-layout.test.mjs
+++ b/client/electron/test/narrow-layout.test.mjs
@@ -272,6 +272,42 @@ check(
   /className="narrow-stack[^"]*overflow-hidden/.test(stack),
   '圆角落在了裁不住东西的层上：观感仍是方角（computed radius 却是 14px）'
 );
+/*
+ * 5.12) 窄屏「单页」容器（没有列表栏的页面：我的 / 管理 / 写信）
+ *
+ * 用户（2026-09-14）：「webui的『我的』页面，还是没有圆角」。
+ *
+ * 与 5.11 同一个根因、**另一条分支**：App.tsx 在 `!hasList` 时用的是
+ * `<div className="flex-1 min-h-0 flex">{main}</div>`，`.narrow-shell > *` 那条圆角
+ * 落在它身上（透明、overflow: visible），而真正有底色的是里面的页面根节点。
+ * 实测 390×844「我的」页：面板 radius **0px**，四角都是白像素（255,255,255），
+ * 而页面底色是 249,250,251。
+ *
+ * 修法照 `cal-panes`：**圆角给到有底色的那一层**（`> *`），不写 overflow:hidden
+ * （这一层下面的子元素自己就是滚动容器，见 app-shell 那段）。
+ */
+const appSrc = read('../src/App.tsx');
+const solo = (css.match(/\.narrow-solo\s*>\s*\*\s*\{[\s\S]*?\n\}/) || [''])[0];
+check(
+  '窄屏单页容器挂上了标记，且圆角给到**有底色的那一层**',
+  /className="narrow-solo[ "]/.test(appSrc) &&
+    /border-radius:\s*var\(--radius-card\)/.test(solo),
+  'CSS 有规则但 JSX 没挂类名（或反之）；或圆角又落在了透明外壳上——两种都是"computed 正常、看着还是方角"'
+);
+check(
+  '那一层不写 overflow:hidden（它的子元素自己就是滚动容器）',
+  solo !== '' && !/overflow:\s*hidden/.test(solo),
+  '在这一层裁会杀掉滚动（与 app-shell 那次同一个坑）'
+);
+const duoFirst = (css.match(/\.narrow-duo\s*>\s*:first-child\s*\{[\s\S]*?\n\}/) || [''])[0];
+const duoLast = (css.match(/\.narrow-duo\s*>\s*:last-child\s*\{[\s\S]*?\n\}/) || [''])[0];
+check(
+  '横屏紧凑两栏：外沿分左右给角（内侧不圆，否则分隔线两边露底色）',
+  /className="narrow-duo[ "]/.test(appSrc) &&
+    /border-start-start-radius/.test(duoFirst) && /border-start-end-radius/.test(duoLast),
+  '两栏并排是"一张卡两块面板"，四角全给或全不给都不对'
+);
+
 check('根视口使用 100dvh 跟随软键盘', css.includes('@supports (height: 100dvh)'));
 
 // 6) 横向内边距在窄屏收窄（px-6 在 375px 屏上白吃 48px）