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
+1 -16
View File
@@ -14,7 +14,7 @@
import { FbAccount, FbAnniversaryItem, FbBookItem, FbCalBook, FbCalEvent, FbGroup,
FbKinChip, FbKinRelation, FbLedgerBook, FbLedgerEntry, FbModuleCard, FbMovieItem,
FbNavLink, FbNoteItem, FbNotificationItem, FbResourceItem, FbRosterItem, FbSession,
FbNoteItem, FbNotificationItem, FbResourceItem, FbRosterItem, FbSession,
FbTaskItem, FbTripItem, FbTripNode, FbWeather, FbWeekStat } from './Types';
/** 假数据里的「我」 */
@@ -81,7 +81,6 @@ export const FB_DEMO_MODULE_CARDS: FbModuleCard[] = [
{ key: 'days', name: '纪念日', big: '6 天后', lines: ['结婚周年'], color: '#B4633C' },
{ key: 'ledger', name: '财务', big: '¥86.4 万', lines: ['3 本账(净资产)'], color: '#5E7A3C' },
{ key: 'books', name: '读书', big: '2 本在读', lines: ['31 本读完 · 48 条笔记'], color: '#6B5B95' },
{ key: 'nav', name: '导航', big: '24 个', lines: ['我的常用站点'], color: '#3E7A9E' },
{ key: 'notes', name: '笔记', big: '63 条', lines: ['最近:阳台改造清单'], color: '#7A6A4F' }
];
@@ -261,16 +260,6 @@ export const FB_DEMO_BOOKS: FbBookItem[] = [
// 导航
// ============================================================
export const FB_DEMO_NAV: FbNavLink[] = [
{ id: 1, title: 'Gitea 代码', url: 'https://code.yangyq.net', group: '开发', icon: '' },
{ id: 2, title: '阿里云控制台', url: 'https://ecs.console.aliyun.com', group: '开发', icon: '' },
{ id: 3, title: '腾讯云文档', url: 'https://docs.qq.com', group: '办公', icon: '' },
{ id: 4, title: '学校 OA', url: 'https://oa.example.edu.cn', group: '办公', icon: '' },
{ id: 5, title: '豆瓣', url: 'https://www.douban.com', group: '常用', icon: '' },
{ id: 6, title: '高德地图', url: 'https://www.amap.com', group: '常用', icon: '' },
{ id: 7, title: '知乎', url: 'https://www.zhihu.com', group: '常用', icon: '' },
{ id: 8, title: '国家气象中心', url: 'http://www.nmc.cn', group: '科研', icon: '' }
];
// ============================================================
// 笔记
@@ -339,10 +328,6 @@ export function fbGroupBook(list: FbBookItem[]): FbGroup<FbBookItem>[] {
return groups;
}
/** 按 group 分组建导航 */
export function fbGroupNav(list: FbNavLink[]): FbGroup<FbNavLink>[] {
return fbGroupBy(list, (it: FbNavLink): string => it.group);
}
/** 通用分组:保持首次出现的顺序(不做字典序,免得打乱业务排序) */
function fbGroupBy<T>(list: T[], keyOf: (it: T) => string): FbGroup<T>[] {
+13 -7
View File
@@ -30,36 +30,42 @@ export interface FbModuleDef {
}
/**
* 全部模块(顺序与 Web 端 `Module::LIST` 一致)。
* 全部模块(顺序与 Web 端 `Module::LIST` 一致,**但去掉「导航」**)。
*
* 🔴 为什么没有「导航」(用户 2026-10-11 明确要求):
* Web 端那个「个人导航」模块本质是**网站收藏夹** —— 原话「导航是专门为电脑端开发的,
* 都是网站,主要用在浏览器的主页,所以不需要」。手机上每个网站都有 App,
* 收藏夹没有使用场景,留着只会占抽屉位置。
* ⚠️ 所以本列表与 Web 端 Module::LIST **不再逐项相等**,这是**有意为之**,
* 不要"顺手补回去"。
*
* ⚠️ 主题色一律挑中低饱和、中低明度的:按钮上是白字,太浅会看不清,
* 太艳会盖过内容的纸墨底色(家书整体是宣纸米 + 砖红的暖色调)。
*/
export const FB_MODULES: FbModuleDef[] = [
{ key: 'home', name: '首页', color: '#A84A28', desc: '今天要看的东西' },
{ key: 'kin', name: '家谱', color: '#8A6B4B', desc: '以我为中心的一张网' },
{ key: 'people', name: '名册', color: '#4A7C82', desc: '家庭名册与亲友通讯录' },
{ key: 'movies', name: '观影', color: '#7A4E8C', desc: '一家人看过的电影' },
{ key: 'trips', name: '旅程', color: '#3F7D5A', desc: '去过的地方与行程' },
{ key: 'calendar', name: '日程', color: '#B0763A', desc: '日历 / 重复日程 / 提醒' },
{ key: 'resources', name: '资源', color: '#5566A8', desc: '证件 / 资料 / 附件' },
{ key: 'resources', name: '资源', color: '#5566A8', desc: '证件 / 资料 / 附件' },
{ key: 'tasks', name: '任务', color: '#A8574F', desc: '看板与待办' },
{ key: 'days', name: '纪念日', color: '#B4633C', desc: '生日与重要日子' },
{ key: 'ledger', name: '财务', color: '#5E7A3C', desc: '账本与账目' },
{ key: 'books', name: '读书', color: '#6B5B95', desc: '书架与读书笔记' },
{ key: 'nav', name: '导航', color: '#3E7A9E', desc: '我的个人导航' },
{ key: 'notes', name: '笔记', color: '#7A6A4F', desc: '随手记的分块笔记' }
];
/**
* 默认出现在抽屉里的模块(没自定义过就用它)。
*
* ⚠️ 与 Web 端 `Module::DEFAULT_NAV` 保持一致:**家谱默认不上导航条**
* (用户原话「毕竟,不需要每天都查看家谱」),但它仍在抽屉的「更多」里能勾出来。
* ⚠️ 与 Web 端 `Module::DEFAULT_NAV` 一致的部分:**家谱默认不上导航条**
* (用户原话「毕竟,不需要每天都查看家谱」),但它仍在设置页里能勾出来。
* ⚠️ 差异:这里**没有 nav**(手机端不做导航模块,原因见 FB_MODULES 的注释)。
*/
export const FB_DEFAULT_NAV: string[] = [
'home', 'people', 'movies', 'trips', 'calendar',
'resources', 'tasks', 'days', 'ledger', 'books', 'nav', 'notes'
'resources', 'tasks', 'days', 'ledger', 'books', 'notes'
];
/**
-11
View File
@@ -382,17 +382,6 @@ export interface FbBookItem {
// 导航(nav)
// ============================================================
/** 一条个人导航(nav/index.php) */
export interface FbNavLink {
id: number;
title: string;
url: string;
/** 分组名 */
group: string;
/** 图标名(web 端用 favicon,端上先留空用首字母) */
icon: string;
}
// ============================================================
// 笔记(notes)
// ============================================================