laoyang/FamilyBook_harmonyos
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
6 Commits 1 Branch 0 Tags
7eaa6414370861a30580a91870eaa53474cb3c37
Commit Graph
6 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
laoyang 7eaa641437 v0.6.0 图标改为开抽屉入口 + 新增底部悬浮快捷栏（照鸿蒙 6 悬浮导航规范） 
用户 2026-10-12 三条要求。

## ① 点顶栏图标 = 开抽屉
用户：「把那个图标改成这个功能吧，就是当用户点击左上角那个图标的时候，把抽屉列出来」。
⇒ `TopBar` 的 logo 加 `.onClick { drawerOpen = true }`。
⚠️ 点击直接挂在 Image 上、**不套 Button** —— Button 自带最小尺寸与内边距，
会把图标挤离左边线（用户要"图标靠左"）。
⇒ 开抽屉现有三个入口：点图标 / 应用内水平滑动 / 底部悬浮栏。

## ② 底部悬浮快捷栏 FbFloatDock（新增）
用户：「页面正下方设置几个浮动按钮…比如日程、名册、任务和笔记…
        这样用户不用拉抽屉，就可以直接点击使用。
        但一定要注意，使用浮动的方式，**不要固定在下面**，而是**浮动着的**。」

🔴 **形态照鸿蒙 6 官方设计规范的「悬浮导航（Float Navigation）」**：
「导航栏脱离底部边界，以**四周留白、圆角卡片**形态悬浮于内容之上」。
参考实现参数直接用上：`height(56) + margin({left:16,right:16,bottom:16})
+ borderRadius(28)`，材质用系统沉浸材质
`uiMaterial.ImmersiveMaterial({ style: ULTRA_THIN })`（设计规范的"超薄"档）。
⚠️ 用了 systemMaterial 就不再叠加 backgroundBlurStyle/backgroundColor ——
   材质自带模糊+边框+阴影，叠加会双重模糊发灰。

⚠️ **摆法关键**：`Index` 的根容器从 `Column` 改成
`Stack({ alignContent: Bottom })` —— 写在 Column 里它就是"占一行的固定底栏"
（老样式）；用 Stack 覆盖 ⇒ 内容从它下面穿过、它浮在上面。
（实测印证：栏体 y=2132..2307，而"我的家人"标题在 y=2336 仍可见 ⇒ 内容穿过去了。）

⚠️ 内容底部加 `FB_DOCK_RESERVE`(88vp) 预留，否则最后一屏内容会被悬浮栏压住。
12 个页面统一处理。
⚠️ 宽屏不显示（抽屉常驻，且屏宽用不上）；抽屉展开时也不显示（避免浮层叠浮层）。
⚠️ 选中项用模块主题色高亮，用户一眼知道"我在哪"。

## 验证（真机，全部通过）
· 点顶栏图标 ⇒ 抽屉打开 ✓
· 点悬浮栏「任务」⇒ 切到任务页 ✓；点「日程」⇒ 切到日程页 ✓
· 悬浮栏几何：栏体 x=21..1060、y=2132..2307（高 58vp），
  栏外 x=0..20 为纸色 ⇒ **四周留白** 符合规范 ✓
· 栏内呈半透材质色(#EFEBE2) ⇒ `ImmersiveMaterial` 生效 ✓
· 14 页遍历 **14/14**；深验 **12/12**；编译 **0 error / 0 warning**

## 过程中的一个坑
给 12 个页面补 `FB_DOCK_RESERVE` 的 import 时，脚本统一写成
`'../components/FloatDock'` —— 但**页面在 `pages/<模块>/` 下，需要 `../../`**
（`Index.ets` 在 `pages/` 下才是 `../`）。批量改 import 路径要按**文件深度**区分。
 2026-10-12 12:06:00 +08:00
laoyang 705a65ae2e v0.5.0 抽屉改「应用内左右滑动」触发 + 去掉汉堡按钮 + 统一区块边距 
用户 2026-10-12 三条反馈。

## ① 抽屉改「应用内水平滑动」触发（关键更正）

用户实测指出：「左滑右滑不是从边上滑，而是在应用的内部从左往右滑或者从右往左滑。
如果从边上往里边滑的话，它是系统手势，我们是没有办法去控制它的。」

⇒ **这是之前手势完全没生效的根因**：屏幕边缘是系统手势区（返回/侧边栏），
  从边缘往里滑的事件根本轮不到应用。判据改为「在应用内部水平滑动」：
  · 向右滑 ⇒ 抽屉从左边出；· 向左滑 ⇒ 抽屉从右边出。
  （左手持机往右划、右手持机往左划，单手都顺。）

🔴 同时修掉一个真 bug：**`offsetX` 的单位是 vp**（SDK 原文 "in vp"），
   我之前又除以 density，把位移缩到 1/3 ⇒ 阈值永远达不到。
⚠️ 用 `parallelGesture`（不是 gesture）：内容区还有竖向滚动与
   纪念日/财务/任务的横向滚动条，用 gesture 会把它们抢掉。
   阈值 80vp，轻扫横向列表不会误开。

## ② 去掉顶栏汉堡按钮
用户：「那个三个点、三个横线的按钮就不要了，图标靠左，显得更好看一些」。
⇒ TopBar 删掉按钮，`padding.left` 由 14 改为 `pagePad`，图标与下方内容左边线对齐。

## ③ 🔴 统一区块边距（修掉 15 处真 bug）
用户：「页面里的方框大小不一样，有的左右充满，有的有缝隙 —— 最好都留一点距离」。

实测界面树 + 像素采样找到根因：**卡片同时写了 `.width('100%')` 和
`.margin({left, right})` ⇒ width 先把宽度占满、margin 失效，卡片顶到屏幕两侧**。
（首页个人信息卡实测 x=0..1080 满宽，而别的区块是留边 17vp 的。）

全项目扫出 **15 处**同款写法（calendar 3 / days 2 / ledger 2 / movies 1 /
people 2 / settings 5），**全是卡片**（backgroundColor+borderRadius+margin）。
统一删掉那条 `.width('100%')`，宽度交给 margin 撑出。

### 验证（真机）
· 手势：向右滑 ⇒ 抽屉「家书」x=187（贴左）；向左滑 ⇒ x=442（贴右）—— 双向 ✓
· 边距：像素级逐行采样，17 行里 15 行左右均 50px（17vp）完全一致；
  另 2 行是"标题文字起点"（文字有额外缩进），不是边距问题 ✓
· 14 页遍历 **14/14**；深验（每页特征文本）**12/12**
· 编译 **0 error / 0 warning**

### 工具链修复（都很关键）
· 🔴 `hdc file recv` 在 **Git Bash** 下会被路径转换改写：`/data/local/tmp/x`
  被当成 `C:/.../tmp/x` ⇒ **静默失败、界面树永远抓不到**。
  三个验证脚本已统一注入 `MSYS_NO_PATHCONV=1`。
· 探针不再点汉堡按钮开抽屉（按钮已删），改用「应用内向右滑」。
· 修探针一处误判：顶栏与抽屉**都有**「家书」，原来没区分 ⇒
  两种滑动都读到顶栏那个固定 x，误报"手势没生效"（其实生效了）。
 2026-10-12 11:37:45 +08:00
laoyang 0816e25988 v0.4.0 顶栏改白色 + 通知栏同色 + 顶栏随页面滚动 
用户 08:56 的三条要求：
  1. 家书标题栏用浅色（下面色块的背景色）；
  2. 上面通知栏也是浅色，两者融为一体；
  3. 向上滑动时标题栏跟着向上滑，不固定在原位。
（追问确认：顶栏底色 = 白；「品牌条 + 页面标题条」一起随滚动消失。）

## ① 系统栏改「不透明 + 与顶栏同色」，弃用透明方案
原来走「系统栏全透明 + 让紧邻元素透出同底色」。这版顶栏要用白色，
若仍走透明方案就得再造一层"白色压条"去刷白状态栏，太绕。
⇒ 直接 `statusBarColor = surface`（白）、`navigationBarColor = page_bg`（纸色）。
这是**配置出来的同色**，比"指望紧邻元素恰好同色"稳得多（后者顶栏一改底色就出色带）。
副产品：不再需要 `setWindowBackgroundColor` ⇒ 连那条 unavailable 告警也消失，
编译回到 **0 error / 0 warning**。

## ② 顶栏随滚动：整页包进 Scroll，顶栏作为内容第一个元素
原来 `Column { 页头; List/Grid(layoutWeight 1) }` —— 顶栏在滚动区**外面**，
所以固定不动。改为 `Scroll { Column { this.topBar(); 页头; 列表 } }`。
顶栏由 Index 以 `@BuilderParam topBar` 插槽下发（`topBarSlot`），13 个页面全部接入。

⚠️ 同步必须处理的两点：
· 列表的 `.layoutWeight(1)` 要删 —— Scroll>Column 里高度由内容决定，
  layoutWeight 会去分"剩余空间"(=0) ⇒ 列表塌成 0 高、整页只剩顶栏和页头；
· List/Grid 不能自己再滚动（去 scrollBar/edgeEffect）—— 两层滚动容器会抢手势。
⚠️ ArkUI 限制：带尾随 lambda 的组件只能有 1 个 `@BuilderParam`
（首页原有闲置的 topActions 已删）。

## ③ 顶栏白色 + logo 可辨认
logo 是「米色底(74%) + 砖红图案(24%)」的实心方图，放在米色上底板隐形、
只剩图案发飘（用户说"看不清"）。今加一层极浅描边把底板"托"出来。
顶栏高度 56→48vp。

## 验证（真机，全部通过）
· 沉浸式：状态栏色 `#FFFFFF` == 顶栏色 `#FFFFFF` ✓
· 顶栏随滚动：「家书」标题 y=140 → 滑动后**已滚出可视区** ✓
· 顶栏滚走后状态栏仍为 `#FFFFFF`（未露出页面内容）✓
· 14 个页面遍历 **14/14**；深验（每页特征文本）**12/12**
· 编译 **0 error / 0 warning**

## 过程记录：批量改 12 个文件失败两次（已回滚重做）
第 1 版按缩进正则切分 ⇒ 闭合括号错乱；第 2 版跳字符时**没消费 Column 的
修饰符链** ⇒ 吃掉 `@Builder` 声明、**636 个报错**。
第 3 版改为**按行 + 括号深度解析**，且**改完立刻做结构断言**
（括号配平、`this.topBar()` 恰好 +1），不满足就不写入；先单页试跑再推广。
教训：批量改多文件时正则不可靠，必须配结构自检 + 单页试点。

配套修掉 `_tooling/familybook_harmonyos_run.sh` 一个"假成功"：
`hdc list targets` 无设备时输出字面量 `[Empty]`，原来"非空即通过"
⇒ 拿 `[Empty]` 当序列号去装、还打印「✓ 设备：[Empty]」。已显式排除并 die。
 2026-10-12 10:06:55 +08:00
laoyang d6bda758d8 v0.3.0 沉浸式按 SyncCalendar 重做（通知栏与页面完全同色）+ 个人信息卡改白块 
## ① 沉浸式：改用本机 SyncCalendar 的方案（用户指定参考）

用户原话：「上面那一块的颜色和通知栏的颜色完全融为一体；
紧接着就是应用图标和标题，尽量靠上」。

三件套（缺一不可）：
1. 系统栏涂**全透明** `#00000000`；
2. `setWindowBackgroundColor(页面底色)` 供透明系统栏透出；
3. **紧邻系统栏的元素不设自己的背景色** + 根容器 `expandSafeArea`。

🔴 第三件是最关键、也是我先前漏掉的一环：
我原来给顶栏设了白色 `backgroundColor`，于是状态栏（透出纸色）与顶栏（白）
仍上下拼接。读 SyncCalendar 源码发现它的 `header()` **根本没有 backgroundColor**
—— 这才是"融为一体"的真正机制。已在代码里写明原因，防止回退。

配套简化：删掉自己算安全区的那套（`statusBarH`/`bottomBarH`/
`loadWindowInsets`/`applyAvoidAreas`，共约 110 行）—— 不再手算，也就不会算错。

## ② 顶栏改「图标 + 标题」

按用户要求：应用图标 + 「家书」标题（下行小字显示当前模块）贴左上，
右侧铃铛与头像。顶栏高度 56 → 48vp，上下内边距压到 4，内容整体上移。

## ③ 个人信息卡恢复为白色卡片

用户明确要求（"还是得用一个白色的块，这样显得好看"）。
曾一度做成"不套卡片的头部"（理由是省首屏高度），现按用户观感改回白卡。
⚠️ 与顶栏的区别：顶栏**不能**有背景色（否则与状态栏割裂），
而这张卡在顶栏下方、与状态栏不相邻，套白卡没有这个问题。

## 验证（全部基于真机）

逐行像素采样（`_tooling/familybook_immersion_check.py`，
模型读不了图 ⇒ 用数字裁定，不靠目测）：
· `y=0..271` 全为 `#F7F3EA` ⇒ **状态栏与顶栏同色，融为一体** ✓
· 底部 `y=2224..2444` 为纸色，无异常条 ✓

真机界面遍历（`_tooling/familybook_harmonyos_probe.py`）：
· A 组抽屉 11 个模块 **11/11**
· B 组家谱 **1/1**；C 组通知/设置 **2/2**
· D 组深验（特征文本）**12/12**
合计 **14 个页面全通过**。

⚠️ 顺带修掉探针自身两个坑（都记进注释了）：
· `nodes_of` 原来只收集**有文字**的节点 ⇒ 找不到纯图标的汉堡按钮，
  导致"抽屉打不开"、10 个模块连锁失败（看着像应用坏了，其实是探针瞎了）；
· 汉堡按钮坐标写死 ⇒ 顶栏变矮后点空。改为在界面树里动态探测、
  并**排除系统状态栏区域**（那里也有可点击元素，曾误取到 (103,56)）。

## 编译
0 error（保留 1 条 `setWindowBackgroundColor` 的 unavailable 告警，它是透明方案的必需组成）
 2026-10-12 08:43:32 +08:00
laoyang 0548a45da1 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
 2026-10-11 23:20:49 +08:00
laoyang 41e3aa3d95 v0.1.0 界面框架：抽屉骨架 + 13 个模块页面 
对应服务端 FamilyBook（家书）的鸿蒙客户端首版。本轮只做**界面框架**，
数据全部是演示数据 —— 服务端尚无客户端接口，所有增删改只做入口与样式，
不落任何数据。

## 骨架
左侧抽屉 + 右侧内容。抽屉两套形态由窗口短边决定（≥600vp 为宽屏）：
宽屏常驻侧栏、窄屏滑出层。判据取「短边」而非「宽度」，因为短边在旋转时
不变，比例接近 1:1 的设备横竖屏布局天然一致。

## 模块（与 Web 端 Module::LIST 一一对应，key 即路由名）
首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、
导航、笔记；另有通知消息、个人设置两个附加页。

## 与 Web 端保持一致的几处
· 模块清单唯一来源在 model/Modules.ets，加模块只改那一处；
· 模块主题色三档由主色按 HSL 压明度算出，预设色板与 Web 端逐值一致；
· 术语沿用 Web 端固定下来的口径（旅程 ⊃ 行程；观影的「影院」不单独占
  抽屉位，从模块内设置进）；
· 页面结构照 Web 端的信息层次（首页信息面板 / 财务概览在账目之前 /
  纪念日「即将到来」在顶 / 任务按状态而非按看板）。

## 编译验证
hvigorw assembleHap --mode module -p product=default
→ BUILD SUCCESSFUL，0 error / 0 warning（含一次删 build 后的干净重建）

过程中修掉的编译期问题：
· Circle().fill() 是 API 26 才有的重载（compatibleSdk 是 24）
  → 换「方块 + 圆角」画圆，零版本风险；
· setWindowBackgroundColor 对 phone/tablet 不可用 → 去掉（页面已铺满同色）；
· window.getLastWindow() 只有异步版 → 由 Ability 侧同步取窗存 AppStorage；
· 颜色类 @Param 声明成 string 导致传 Resource 报错 → 统一改 ResourceColor；
· 页面在 pages/<模块>/ 下，公共件 import 相对路径要多退一级。

（首轮编译 95 error / 18 warn，逐条定位到 5 类根因后归零。）
 2026-10-11 22:07:48 +08:00