From ed1ae02441edfe422561d479a7dd0bde38356bdb Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Sun, 20 Sep 2026 11:14:05 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B7=A8=E7=AB=AF:=20=E5=AE=BD=E5=B1=8F?= =?UTF-8?q?=E4=B8=A4=E6=A0=8F=E5=90=84=E8=87=AA=E5=9C=86=E8=A7=92=EF=BC=88?= =?UTF-8?q?=E5=8E=9F=E6=9D=A5=E5=8F=AA=E6=9C=89=E5=A4=96=E5=A3=B3=E6=9C=89?= =?UTF-8?q?=EF=BC=8C=E5=86=85=E9=83=A8=E4=B8=A4=E5=8D=8A=E6=98=AF=E7=9B=B4?= =?UTF-8?q?=E8=A7=92=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「同时邮件展示左侧没有圆角」。 WebUI 宽屏的真结构是**三个独立圆角面板并排**（App.tsx:262）：
← padding/gap = 10px {list} {main} ← 每个子元素各自 border-radius:14px
（index.css:968 的 .app-shell > * 统一给 border-radius，第 1070 行在壁纸态再加 overflow:hidden + 阴影）。所以列表栏与详情栏**各有自己的四个圆角**， 中间的缝里透出壁纸。 我们这边是一个 Navigation，由系统 Split 成 navBar + content 两半， 圆角只加在**外壳**上 ⇒ 内部这两半是直角。实测（模拟器 3184×2232）： 详情栏白区左缘在 y=145 与 y=2195 都是 x=1152 —— **完全垂直，没有圆角**。 修法：给两栏**各自**补圆角 + 裁切（与 WebUI 的 .app-shell > * 逐条对应）， 左栏在 navBar 内容根、右栏在 NavDestination 上。 修后实测白区左缘：y=145→x=1178、y=165→1156、y=185→1152（圆弧正确）， 下角同理（y=2190→1165、y=2196→1172）。 ★ 顺带给 MailDetailDestination 补 bgActive 参数（圆角要在壁纸开启时才有 —— 与 WebUI 一致：非壁纸态 .app-shell > * 也圆角，但那时底色是实心的， 圆角看不出来；壁纸态才需要圆角把缝让出来）。 --- .../entry/src/main/ets/pages/MainPage.ets | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/client/harmony/entry/src/main/ets/pages/MainPage.ets b/client/harmony/entry/src/main/ets/pages/MainPage.ets index 57337a8..9ca275e 100644 --- a/client/harmony/entry/src/main/ets/pages/MainPage.ets +++ b/client/harmony/entry/src/main/ets/pages/MainPage.ets @@ -123,6 +123,8 @@ struct MailDetailDestination { @State accountId: string = ''; /** 底部悬浮条高度（窄屏非 0）——透传给详情页，让它的回复球抬过条 */ @Prop navReserve: number = 0; + /** 壁纸是否开启。宽屏下本栏要**自己**有圆角（WebUI `app-shell > *` 的对应物） */ + @Prop bgActive: boolean = false; private pathStack: NavPathStack = new NavPathStack(); handleReady(ctx: NavDestinationContext): void { @@ -150,6 +152,26 @@ struct MailDetailDestination { } } .hideTitleBar(true) + /* + * ★★ 2026-09-20 修（用户：「邮件展示左侧没有圆角」）。 + * + * WebUI 宽屏的真结构是**三个独立圆角面板并排**（`App.tsx:262`）： + * + *
← padding/gap = 10px + * {list} {main} ← 每个子元素各自 border-radius:14px + *
+ * + * 所以列表栏和详情栏**各有自己的四个圆角**，中间的缝里透出壁纸。 + * + * 我们这边是一个 `Navigation`，由系统 Split 成 navBar + content 两半， + * 圆角只加在**外壳**（那个 `Row` 里的内容列）上 ⇒ 内部这两半变成直角， + * 实测详情栏白区左缘在 y=145 与 y=2195 都是 `x=1152`（**完全垂直、无圆角**）。 + * + * 修法：给**右栏**（`NavDestination`）自己补上圆角 + 裁切， + * 与 WebUI 的 `app-shell > *` 逐条对应；左栏（navBar 内容）在它的根容器上补。 + */ + .borderRadius(this.bgActive ? Theme.glassRadius : 0) + .clip(this.bgActive) .onReady((ctx: NavDestinationContext) => { this.handleReady(ctx); }) } } @@ -1456,7 +1478,7 @@ struct CommPage { @Builder DestinationBuilder(name: string, param: Object) { if (name === MAIL_DETAIL_ROUTE) { - MailDetailDestination({ navReserve: this.navReserve }) + MailDetailDestination({ navReserve: this.navReserve, bgActive: this.bgActive }) } } @@ -1516,6 +1538,21 @@ struct CommPage { * `.bg-white .bg-white { backdrop-filter: none }` 明确禁止的事。 */ .attributeModifier(PaneModifier.of(this.bgActive)) + /* + * ★★ 2026-09-20（用户：「邮件展示左侧没有圆角」）。 + * + * 这一层是**左栏（列表）**的根。WebUI 宽屏是三个**独立圆角面板**并排 + * （`App.tsx:262` 的 `.app-shell` 下 `{list}{main}`， + * `index.css:968` 给 `.app-shell > *` 统一 `border-radius` + 裁切）， + * 所以列表栏与详情栏**各自有四个圆角**，中间的缝里透出壁纸。 + * + * 我们这边列表在 `Navigation` 的 navBar 里、详情在 content 里， + * 系统只给一条分割线 ⇒ 内部两栏是直角。实测详情栏白区左缘 + * 在 y=145 与 y=2195 都是 `x=1152`（完全垂直，无圆角）。 + * 这里给左栏补上，与右栏那处成对。 + */ + .borderRadius(this.bgActive ? Theme.glassRadius : 0) + .clip(this.bgActive) /* * 悬浮的圆形加号（用户点名要的形状）：56 圆、品牌色、右下角。 @@ -1760,7 +1797,7 @@ struct ContactsTab { @Builder DestinationBuilder(name: string, param: Object) { if (name === MAIL_DETAIL_ROUTE) { - MailDetailDestination({ navReserve: this.navReserve }) + MailDetailDestination({ navReserve: this.navReserve, bgActive: this.bgActive }) } }