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
+18 -6
View File
@@ -28,6 +28,13 @@ export struct FbDrawer {
@Param drawerW: number = FbMetric.drawerW;
/** 是否以「覆盖层」形态出现(宽屏时为 false = 常驻) */
@Param overlayMode: boolean = true;
/**
* 状态栏高度(vp)。
*
* 🔴 沉浸式后窗口铺满整屏 ⇒ 抽屉顶部的品牌区会钻到状态栏底下,必须让出这一段。
* 覆盖层形态下更要紧 —— 抽屉是贴屏幕顶的,不让位就会和状态栏的时间/信号叠在一起。
*/
@Param statusBarH: number = 0;
/** 覆盖层形态下:点遮罩关闭 */
@Event onDismiss: () => void = () => {
};
@@ -35,17 +42,17 @@ export struct FbDrawer {
/** 抽屉里列出的模块(接口接上后由 user_settings('nav_modules') 下发) */
@Local items: FbModuleDef[] = fbDefaultNavModules();
/** 品牌区:这里放阅文风格的书名(家书)+ 家庭名 */
/** 品牌区:书名(家书)+ 家庭名 */
@Builder
brandHeader() {
Row({ space: 10 }) {
Image($r('app.media.fb_logo'))
.width(34)
.height(34)
.width(32)
.height(32)
.borderRadius(9)
Column({ space: 1 }) {
Text('家书')
.fontSize(17)
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.letterSpacing(1)
@@ -58,7 +65,8 @@ export struct FbDrawer {
.layoutWeight(1)
}
.width('100%')
.padding({ left: 18, right: 12, top: 18, bottom: 14 })
// 顶部内边距 = 状态栏高度 + 一点呼吸,保证不压状态栏
.padding({ left: 18, right: 12, top: this.statusBarH + 14, bottom: 10 })
}
/** 一个模块行 */
@@ -200,6 +208,8 @@ export struct FbDrawer {
@ComponentV2
export struct FbDrawerShell {
@Param app: FbAppState = fbAppState();
/** 状态栏高度(vp),透传给抽屉(沉浸式后抽屉顶部要自己让位) */
@Param statusBarH: number = 0;
/** 内容区(由父组件通过尾随 lambda 传入) */
@BuilderParam content: () => void;
@@ -210,7 +220,8 @@ export struct FbDrawerShell {
Row() {
FbDrawer({
app: this.app,
overlayMode: false
overlayMode: false,
statusBarH: this.statusBarH
})
Column() {
this.content()
@@ -242,6 +253,7 @@ export struct FbDrawerShell {
FbDrawer({
app: this.app,
overlayMode: true,
statusBarH: this.statusBarH,
onDismiss: (): void => {
this.app.drawerOpen = false;
}