v0.2.0 沉浸式 + 按手机重排版 + 去掉导航模块

三条用户反馈一次处理完。

## ① 不够沉浸:首页距顶太远 + 底部白条

根因是**重复避让 + 颜色断裂**,两处都是我自己的错:
· 早先没开全屏时,系统已把窗口推到状态栏下方,我却又加了一个等高的白色
  Column「让出安全区」⇒ 重复避让,实测顶部空出 156px;
· 状态栏底色被设成「页面底色(宣纸米)」,而顶栏是白色 ⇒ 顶部出现
  「米色状态栏 + 白色顶栏」的拼接感,看着就是"没对齐"。

改法:
· EntryAbility 调 setWindowLayoutFullScreen(true),窗口铺满整屏;
· 状态栏底色一律取**顶栏底色**,底部手势条取**页面底色** —— 各自与紧邻元素同色;
· 页面侧用 getWindowAvoidArea 自己让位(顶栏顶部内边距 = 状态栏高度,
  底色一直画到屏幕最上沿);
· 底部那条全宽白 Column 删掉。

避让值走**异步** window.getLastWindow + windowSizeChange 监听
(早先"Ability 取窗存 AppStorage 再同步读"的做法实测读不到值,恒为 0);
旋转/折叠后会自动重算。

验证(像素级,非目测):y=0..200 全为顶栏白(原先 y=0..121 是米色状态条),
底部 y=2224..2444 全为纸色、白条消失。

## ② 去掉「导航」模块

用户原话:「导航是专门为电脑端开发的,都是网站,主要用在浏览器的主页,所以不需要」。
⇒ 删掉 FbNavPage、FbNavLink 类型、FB_DEMO_NAV、fbGroupNav、图标分支与演示数据。
⚠️ 模块清单自此与 Web 端 Module::LIST **有意不等**,注释里写明了别补回去。

## ③ 排版按手机重做(不照搬电脑端)

首页:删掉 hero 招牌整块(它只重复信息面板已有的信息),信息面板升为首块
并改成**无卡片的页面头部**(问候/日期大字、天气右上、三数字贴底)——
套白卡片会在首屏就切出一块白、压缩可用高度,也破坏沉浸感。
卡片从「今天的日程」才开始用,页面层次反而更清楚。

其余按手机重排:观影两列定格(原瀑布流)、任务按状态三段(原多列看板)、
家谱圈层(原折线树)。README 里列了逐项取舍与理由。

## 编译
hvigorw assembleHap --mode module -p product=default --no-daemon
→ BUILD SUCCESSFUL,0 error / 0 warning
This commit is contained in:
2026-10-11 23:20:49 +08:00
parent 41e3aa3d95
commit 0548a45da1
11 changed files with 307 additions and 370 deletions
+29 -1
View File
@@ -15,12 +15,14 @@
| 已完成 | 说明 |
| --- | --- |
| 工程骨架 | Stage 模型 + ArkTS / ArkUI,targetSdk 26.0.0 / compatibleSdk 6.1.1(24) |
| 沉浸式 | 窗口铺满整屏,状态栏与顶栏同色融为一体、底部手势条与页面同色 |
| 左侧抽屉 | 宽屏常驻侧栏 / 窄屏滑出层,两套形态同一组件 |
| 13 个模块页面 | 首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、导航、笔记 |
| 12 个模块页面 | 首页、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、笔记(+ 家谱) |
| 附加页面 | 通知消息、个人设置 |
| 主题体系 | 宣纸米 / 砖红配色,深浅色两套资源,深浅自动跟随系统 |
| 模块主题色 | 与 Web 端 `Module::PRESET_COLORS` 同一套 12 色预设 |
| 编译验证 | `hvigorw assembleHap` **0 error / 0 warning** |
| 真机验证 | 装机成功;15 个页面逐个点开、断言渲染内容,**15/15 通过** |
| 待办(下一轮) | 说明 |
| --- | --- |
@@ -33,6 +35,32 @@
---
## 与 Web 端的取舍
数据看 Web 端,**排版按手机重做** —— 不照搬电脑端版面。
### 模块
**不做「导航」模块**(Web 端有)。用户原话:「导航是专门为电脑端开发的,都是网站,
主要用在浏览器的主页,所以不需要」。手机上每个网站都有 App,收藏夹没有使用场景。
⇒ 本工程的模块清单与 Web 端 `Module::LIST` **有意不等**,别"顺手补回去"。
**「家谱」不在抽屉里**(与 Web 端一致):它默认不上导航条(用户说过
「不需要每天都查看家谱」),走「名册 → 家谱」的分段切换进入。
### 版面
| 模块 | Web 端 | 鸿蒙端 | 为什么 |
| --- | --- | --- | --- |
| 首页 | hero 招牌 + 信息面板 + 日程/任务并排 + 我的家人 + 未来七天 + 模块卡 | 去掉 hero;信息面板作**无卡片的页面头部**;其余保持顺序上下堆叠 | hero 只重复信息面板已有的信息(家庭名 × 问候),手机首屏高度宝贵 |
| 观影 | 瀑布流海报墙 | 两列定尺寸网格 | 瀑布流列宽随图高浮动,手机上很难扫 |
| 任务 | 多列看板(拖动改状态) | 按状态分组的三段列表 | 手机宽度放不下多列;用户关心的是"做到哪一步" |
| 笔记 | 定尺寸卡片网格 | 两列定高卡片网格 | 与 Web 端一致(用户要求过"块大小要确定") |
| 家谱 | HTML 折线树 | 「以我为中心的圈层」(直系 / 其他亲属) | 折线树在窄屏排不下 |
| 财务 | 概览 + 折线图 + 账目表 | 概览(图占位)+ 按类别分组的账目 | 折线图需要图表能力,留到第二轮 |
---
## 目录结构
```