ke: 宽屏 app-shell 几何落地:padding/gap 10 + 面板圆角 14(WebUI 一比一)
- 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 同值)
This commit is contained in:
@ -88,3 +88,26 @@ test('④ MainPage 接线:宽屏才挂侧栏、宽屏藏底部条、断点 768
|
|||||||
// let为0(宽屏没有底部条,内容 padding 归零)
|
// let为0(宽屏没有底部条,内容 padding 归零)
|
||||||
assert.match(code_, /bottom:\s*this\.isWide \? 0 : NAV_CONTENT_RESERVE/, '宽屏内容 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 贴合全屏)');
|
||||||
|
});
|
||||||
@ -1863,8 +1863,12 @@ struct MainPage {
|
|||||||
* 底部**必须让出** NAV_CONTENT_RESERVE 的高度:条是浮在内容之上的,
|
* 底部**必须让出** NAV_CONTENT_RESERVE 的高度:条是浮在内容之上的,
|
||||||
* 不让出这一段,列表最后一行就永远压在玻璃条底下 —— 看得见、点不到。
|
* 不让出这一段,列表最后一行就永远压在玻璃条底下 —— 看得见、点不到。
|
||||||
* 宽屏没有底部导航条,所以 padding 为 0。
|
* 宽屏没有底部导航条,所以 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) {
|
if (this.isWide) {
|
||||||
WideSidebar({
|
WideSidebar({
|
||||||
currentIndex: this.currentIndex,
|
currentIndex: this.currentIndex,
|
||||||
@ -1898,10 +1902,18 @@ struct MainPage {
|
|||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
|
.borderRadius(this.isWide ? Theme.glassRadius : 0)
|
||||||
|
.clip(this.isWide)
|
||||||
.padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE })
|
.padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE })
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('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 的说明)。宽屏没有底部导航。
|
// 浮动玻璃条浮在最上层(自绘,见 NavBar 的说明)。宽屏没有底部导航。
|
||||||
if (!this.isWide) {
|
if (!this.isWide) {
|
||||||
|
|||||||
Reference in New Issue
Block a user