diff --git a/components/PageHeader.vue b/components/PageHeader.vue index a0109b7..16d9298 100644 --- a/components/PageHeader.vue +++ b/components/PageHeader.vue @@ -47,8 +47,8 @@ const goBack = () => uni.navigateBack() .page-header--root { position: relative; z-index: 3; - height: 164rpx; - padding-top: env(safe-area-inset-top); + height: calc(124rpx + var(--status-bar-height, 0px)); + padding-top: var(--status-bar-height, 0px); background-color: #b52e22; overflow: hidden; } diff --git a/docs/design/D1_安卓视觉规范与页面壳.md b/docs/design/D1_安卓视觉规范与页面壳.md index b60af91..a252014 100644 --- a/docs/design/D1_安卓视觉规范与页面壳.md +++ b/docs/design/D1_安卓视觉规范与页面壳.md @@ -162,7 +162,8 @@ 适用于:家谱总览、世系图、成员目录、人物档案。 -- 顶部 `256–288rpx`:朱砂红,左下放置低对比祠堂屋檐线描,禁止使用满屏建筑照片。 +- 顶部采用 `124rpx` 的可视朱砂导航区,外层始终额外预留真实系统状态栏高度;左下放置低对比祠堂屋檐线描,禁止使用满屏建筑照片。 +- 自定义顶部统一使用 `height: calc(124rpx + var(--status-bar-height, 0px))` 与同等 `padding-top`;纸纹或内容背景的起点使用同一计算值,不能让状态栏挤压 Logo、标题或通知入口。 - 根页面左上角放项目 Logo(祠堂屋檐 + “谱”字印章,透明 PNG,视觉 `40rpx`、触控区 `88rpx`);详情页该位置优先保留返回按钮,Logo 收入建筑纹样中的小印记。 - 搜索、通知、更多均为 `88rpx` 触控框;图标为暖白或金色线稿 PNG。通知铃铛仅在未读消息数大于 0 时显示朱砂小圆点;未读为 0 时不显示圆点和数字。 - 家谱名称位于视觉中心,最大两行;名称下可放地域或代系提示,但不能与图标重叠。 @@ -240,7 +241,7 @@ G-01 是所有设计页的公共还原样板,不等同于最终代码。 | 区域 | 尺寸 / 间距 | 约束 | | --- | --- | --- | | 系统状态栏 | `24dp` | 只预留系统空间,不放页面内容。 | -| 家祠红头 | `112dp`(含标题区) | Logo 左 `16dp`,标题居中,铃铛右 `16dp`;红头结束后不得出现大块空白。 | +| 家祠红头 | `124rpx` 可视导航区 + 真实状态栏高度 | Logo 左 `16dp`,标题居中,铃铛右 `16dp`;红头结束后不得出现大块空白。 | | 当前家谱题签 | 顶距 `16dp`,高 `136dp`,左右 `16dp` | 只展示当前家谱一次;名称、成员数、地域、身份均为真实字段。 | | 快捷入口 | 题签后 `16dp`,行高 `84dp` | 四项等宽;图标实际 `24dp`,标签 `14sp`,不使用大号装饰图。 | | 分隔与列表标题 | 上距 `16dp`,标题区 `36dp` | 细古金线 + “我创建的 / 我加入的”,不能留无内容的整屏空白。 | diff --git a/docs/design/G01_我的家谱_设计记录.md b/docs/design/G01_我的家谱_设计记录.md index 8859881..7557b6e 100644 --- a/docs/design/G01_我的家谱_设计记录.md +++ b/docs/design/G01_我的家谱_设计记录.md @@ -119,3 +119,10 @@ - 根据 HBuilderX 预览,列表第二行的地点、成员数与更新时间分别提升至可读字号,元信息图标同步放大;`320px` 继续只隐藏更新时间。 - 新建家谱按钮保留单行文字:缩小云纹和加号的占位宽度,并为按钮文字设置不换行约束,避免“新建家谱”折为两行。 - 已通过更新后的 G-01 视觉契约与编译审计;仍待下一张 HBuilderX 截图复核实际观感。 + +## 2026-07-13 第九轮顶部状态栏兼容 + +- 用户确认根页 `124rpx` 的可视朱砂导航高度符合视觉稿;不再扩大其内容区。 +- 根页头总高度改为可视导航高度加 `var(--status-bar-height, 0px)`,并以相同变量作为顶部内边距;状态栏不会压缩 Logo、标题和通知入口。 +- 宣纸纸纹起点使用同一计算高度,避免状态栏存在时红头结束处出现错层。 +- Android App 配置朱砂状态栏背景和浅色系统图标;仍需在有刘海、无刘海与三键导航 Android 真机复核。 diff --git a/manifest.json b/manifest.json index 0691a0c..7dcaebd 100644 --- a/manifest.json +++ b/manifest.json @@ -9,6 +9,11 @@ "usingComponents": true, "nvueStyleCompiler": "uni-app", "compilerVersion": 3, + "statusbar": { + "immersed": "supportedDevice", + "style": "light", + "background": "#B52E22" + }, "splashscreen": { "alwaysShowBeforeRender": true, "waiting": true, diff --git a/pages/genealogy/index.vue b/pages/genealogy/index.vue index 7875c52..67e8b85 100644 --- a/pages/genealogy/index.vue +++ b/pages/genealogy/index.vue @@ -233,7 +233,7 @@ const openShortcut = (key) => { .page-paper-texture { position: absolute; - top: 164rpx; + top: calc(124rpx + var(--status-bar-height, 0px)); right: 0; bottom: 0; left: 0; diff --git a/tests/g01-visual-contract.ps1 b/tests/g01-visual-contract.ps1 index 22b3b7e..fa3b840 100644 --- a/tests/g01-visual-contract.ps1 +++ b/tests/g01-visual-contract.ps1 @@ -48,7 +48,8 @@ if ($header -notmatch 'class="header-hall"') { throw 'Header does not isolate th if ($header -match 'background-image: url') { throw 'Header still applies hall line-art directly to the red header surface.' } if ($header -notmatch 'opacity:\s*\.29') { throw 'Header hall line-art is not visible enough for the approved eave layer.' } if ($header -notmatch 'header-cinnabar-texture-v2\.jpg') { throw 'Header does not use the approved cinnabar texture asset.' } -if ($header -notmatch 'height:\s*164rpx') { throw 'Header height does not match the approved narrow red-head proportion.' } +if ($header -notmatch 'height:\s*calc\(124rpx\s*\+\s*var\(--status-bar-height,\s*0px\)\)') { throw 'Header does not preserve the approved visual height above the system status bar.' } +if ($header -notmatch 'padding-top:\s*var\(--status-bar-height,\s*0px\)') { throw 'Header does not reserve the real system status-bar height.' } if ($tabbar -match '/static/icons/tab-') { throw 'Tabbar still references rejected legacy tab assets.' } if ($tabbar -notmatch 'safe-area-inset-bottom') { throw 'Tabbar has no Android safe-area padding.' } if ($tabbar -notmatch 'font-size:\s*30rpx') { throw 'Tabbar label size does not match the approved visual weight.' } @@ -71,6 +72,7 @@ foreach ($asset in @('paper-rice-texture-v2.jpg', 'footer-mountain-bamboo.png', if ($page -notmatch [regex]::Escape($asset)) { throw "G-01 does not consume the approved background asset: $asset" } } if ($page -match 'footer-mountain-bamboo-v2\.png') { throw 'G-01 still uses the solid mountain footer asset instead of the translucent watercolor landscape.' } +if ($page -notmatch 'top:\s*calc\(124rpx\s*\+\s*var\(--status-bar-height,\s*0px\)\)') { throw 'G-01 paper texture does not begin below the system-safe root header.' } if ($page -notmatch '(?s)\.page-footer-landscape\s*\{.*?opacity:\s*0\.5') { throw 'G-01 footer landscape does not use the approved expanded watercolor contrast.' } if ($page -match 'background:\s*rgba\(255,\s*249,\s*238,\s*\.88\)') { throw 'G-01 current genealogy card retains a rectangular pale backing behind its transparent corners.' } @@ -108,4 +110,7 @@ if ($card -notmatch '(?s)\.card-meta\s*\{.*?font-size:\s*26rpx') { throw 'G-01 l if ($card -notmatch '(?s)\.card-updated\s*\{.*?font-size:\s*22rpx') { throw 'G-01 list update date is below the approved readable size.' } if ($page -notmatch '(?s)\.create-action\s*>\s*text\s*\{.*?white-space:\s*nowrap') { throw 'G-01 create action text can wrap onto multiple lines.' } +$manifest = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'manifest.json') +if ($manifest -notmatch '"statusbar"\s*:\s*\{\s*"immersed"\s*:\s*"supportedDevice"\s*,\s*"style"\s*:\s*"light"\s*,\s*"background"\s*:\s*"#B52E22"') { throw 'Android status bar is not configured for the cinnabar root header.' } + Write-Output 'PASS G-01 visual contract'