From 31fdc1a3d8fb67cd6477c4d41b088911976f5097 Mon Sep 17 00:00:00 2001 From: JianFeeeee Date: Wed, 16 Sep 2026 07:58:13 +0800 Subject: [PATCH] =?UTF-8?q?ke:=20=E5=AE=BD=E5=B1=8F=20app-shell=20?= =?UTF-8?q?=E5=87=A0=E4=BD=95=E8=90=BD=E5=9C=B0=EF=BC=9Apadding/gap=2010?= =?UTF-8?q?=20+=20=E9=9D=A2=E6=9D=BF=E5=9C=86=E8=A7=92=2014=EF=BC=88WebUI?= =?UTF-8?q?=20=E4=B8=80=E6=AF=94=E4=B8=80=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - MainPage 宽屏 Row({ space: Theme.paneGap }) —— gap 10（窄屏无子间距，无害） - 内容面板 borderRadius(isWide ? glassRadius : 0) + clip(isWide) —— 圆角 14 仅宽屏 - 容器 padding 条件：宽屏 paneGap 10（壁纸从缝隙露出）/ 窄屏 0（贴合全屏） - Theme.glassRadius=14 / paneGap=10 已在上一提交引入，这里真正用上 - 判据：harmony-widescreen ⑤ 钉 app-shell 几何（令牌值/space/radius/clip/padding 与 WebUI 同值） --- .../electron/test/harmony-widescreen.test.mjs | 23 +++++++++++++++++++ .../entry/src/main/ets/pages/MainPage.ets | 14 ++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/client/electron/test/harmony-widescreen.test.mjs b/client/electron/test/harmony-widescreen.test.mjs index 2d3f400..d84deb7 100644 --- a/client/electron/test/harmony-widescreen.test.mjs +++ b/client/electron/test/harmony-widescreen.test.mjs @@ -87,4 +87,27 @@ test('④ MainPage 接线：宽屏才挂侧栏、宽屏藏底部条、断点 768 assert.match(code_, />=\s*768/s, '断点是 768（与 WebUI 的 lg 断点同一档）'); // let为0（宽屏没有底部条，内容 padding 归零） assert.match(code_, /bottom:\s*this\.isWide \? 0 : NAV_CONTENT_RESERVE/, '宽屏内容 padding 要归零（没有底部条了）'); +}); + +test('⑤ 宽屏 app-shell 几何：padding/gap/radius 与 WebUI 同值（一比一复刻的骨架）', () => { + const main = read('pages/MainPage.ets'); + const code_ = stripComments(main); + /* + * WebUI 的 `.app-shell`（index.css）： + * padding: var(--pane-gap) → 10px + * gap: var(--pane-gap) → 10px + * > * { border-radius: var(--radius-card) } → 14px + * 宽屏面板之间留缝（壁纸从缝隙露出）、各面板圆角 14。窄屏贴合全屏（无 padding / 无圆角）。 + */ + // 令牌值要和 WebUI 同值（14/10） + const theme = read('common/Theme.ets'); + assert.match(theme, /static readonly glassRadius: number = 14/, 'glassRadius = 14（与 WebUI --radius-card 同值）'); + assert.match(theme, /static readonly paneGap: number = 10/, 'paneGap = 10（与 WebUI --pane-gap 同值）'); + // Row 用 space=paneGap（gap） + assert.match(code_, /Row\(\{ space: Theme\.paneGap \}\)/, '宽屏 Row 用 space=paneGap（与 WebUI gap 同值）'); + // 内容面板圆角只在宽屏启用（窄屏贴合全屏） + assert.match(code_, /borderRadius\(this\.isWide \? Theme\.glassRadius : 0\)/, '内容面板圆角宽屏 14 / 窄屏 0'); + assert.match(code_, /clip\(this\.isWide\)/, '面板内容要被圆角裁剪（clip 宽屏才开）'); + // 容器 padding 宽屏 paneGap / 窄屏 0（壁纸从缝隙露出） + assert.match(code_, /left: this\.isWide \? Theme\.paneGap : 0/, '宽屏容器左右 padding paneGap（窄屏 0 贴合全屏）'); }); \ No newline at end of file diff --git a/client/harmony/entry/src/main/ets/pages/MainPage.ets b/client/harmony/entry/src/main/ets/pages/MainPage.ets index 61b0935..8ea2044 100644 --- a/client/harmony/entry/src/main/ets/pages/MainPage.ets +++ b/client/harmony/entry/src/main/ets/pages/MainPage.ets @@ -1863,8 +1863,12 @@ struct MainPage { * 底部**必须让出** NAV_CONTENT_RESERVE 的高度：条是浮在内容之上的， * 不让出这一段，列表最后一行就永远压在玻璃条底下 —— 看得见、点不到。 * 宽屏没有底部导航条，所以 padding 为 0。 + * + * ★ 2026-09-16：宽屏复刻 WebUI `app-shell` 几何 —— + * `padding: var(--pane-gap)`(10) + `gap: var(--pane-gap)`(10) + 面板 `radius: var(--radius-card)`(14)。 + * 壁纸从面板缝隙露出（`bgActive` 时）。窄屏贴合全屏（无 padding / 无圆角）。 */ - Row() { + Row({ space: Theme.paneGap }) { if (this.isWide) { WideSidebar({ currentIndex: this.currentIndex, @@ -1898,10 +1902,18 @@ struct MainPage { } .width('100%') .height('100%') + .borderRadius(this.isWide ? Theme.glassRadius : 0) + .clip(this.isWide) .padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE }) } .width('100%') .height('100%') + .padding({ + left: this.isWide ? Theme.paneGap : 0, + right: this.isWide ? Theme.paneGap : 0, + top: this.isWide ? Theme.paneGap : 0, + bottom: this.isWide ? Theme.paneGap : 0 + }) // 浮动玻璃条浮在最上层（自绘，见 NavBar 的说明）。宽屏没有底部导航。 if (!this.isWide) {