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) | | 工程骨架 | Stage 模型 + ArkTS / ArkUI,targetSdk 26.0.0 / compatibleSdk 6.1.1(24) |
| 沉浸式 | 窗口铺满整屏,状态栏与顶栏同色融为一体、底部手势条与页面同色 |
| 左侧抽屉 | 宽屏常驻侧栏 / 窄屏滑出层,两套形态同一组件 | | 左侧抽屉 | 宽屏常驻侧栏 / 窄屏滑出层,两套形态同一组件 |
| 13 个模块页面 | 首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、导航、笔记 | | 12 个模块页面 | 首页、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、笔记(+ 家谱) |
| 附加页面 | 通知消息、个人设置 | | 附加页面 | 通知消息、个人设置 |
| 主题体系 | 宣纸米 / 砖红配色,深浅色两套资源,深浅自动跟随系统 | | 主题体系 | 宣纸米 / 砖红配色,深浅色两套资源,深浅自动跟随系统 |
| 模块主题色 | 与 Web 端 `Module::PRESET_COLORS` 同一套 12 色预设 | | 模块主题色 | 与 Web 端 `Module::PRESET_COLORS` 同一套 12 色预设 |
| 编译验证 | `hvigorw assembleHap` **0 error / 0 warning** | | 编译验证 | `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 折线树 | 「以我为中心的圈层」(直系 / 其他亲属) | 折线树在窄屏排不下 |
| 财务 | 概览 + 折线图 + 账目表 | 概览(图占位)+ 按类别分组的账目 | 折线图需要图表能力,留到第二轮 |
---
## 目录结构 ## 目录结构
``` ```
+18 -6
View File
@@ -28,6 +28,13 @@ export struct FbDrawer {
@Param drawerW: number = FbMetric.drawerW; @Param drawerW: number = FbMetric.drawerW;
/** 是否以「覆盖层」形态出现(宽屏时为 false = 常驻) */ /** 是否以「覆盖层」形态出现(宽屏时为 false = 常驻) */
@Param overlayMode: boolean = true; @Param overlayMode: boolean = true;
/**
* 状态栏高度(vp)。
*
* 🔴 沉浸式后窗口铺满整屏 ⇒ 抽屉顶部的品牌区会钻到状态栏底下,必须让出这一段。
* 覆盖层形态下更要紧 —— 抽屉是贴屏幕顶的,不让位就会和状态栏的时间/信号叠在一起。
*/
@Param statusBarH: number = 0;
/** 覆盖层形态下:点遮罩关闭 */ /** 覆盖层形态下:点遮罩关闭 */
@Event onDismiss: () => void = () => { @Event onDismiss: () => void = () => {
}; };
@@ -35,17 +42,17 @@ export struct FbDrawer {
/** 抽屉里列出的模块(接口接上后由 user_settings('nav_modules') 下发) */ /** 抽屉里列出的模块(接口接上后由 user_settings('nav_modules') 下发) */
@Local items: FbModuleDef[] = fbDefaultNavModules(); @Local items: FbModuleDef[] = fbDefaultNavModules();
/** 品牌区:这里放阅文风格的书名(家书)+ 家庭名 */ /** 品牌区:书名(家书)+ 家庭名 */
@Builder @Builder
brandHeader() { brandHeader() {
Row({ space: 10 }) { Row({ space: 10 }) {
Image($r('app.media.fb_logo')) Image($r('app.media.fb_logo'))
.width(34) .width(32)
.height(34) .height(32)
.borderRadius(9) .borderRadius(9)
Column({ space: 1 }) { Column({ space: 1 }) {
Text('家书') Text('家书')
.fontSize(17) .fontSize(16)
.fontWeight(FontWeight.Medium) .fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink) .fontColor(FbColors.ink)
.letterSpacing(1) .letterSpacing(1)
@@ -58,7 +65,8 @@ export struct FbDrawer {
.layoutWeight(1) .layoutWeight(1)
} }
.width('100%') .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 @ComponentV2
export struct FbDrawerShell { export struct FbDrawerShell {
@Param app: FbAppState = fbAppState(); @Param app: FbAppState = fbAppState();
/** 状态栏高度(vp),透传给抽屉(沉浸式后抽屉顶部要自己让位) */
@Param statusBarH: number = 0;
/** 内容区(由父组件通过尾随 lambda 传入) */ /** 内容区(由父组件通过尾随 lambda 传入) */
@BuilderParam content: () => void; @BuilderParam content: () => void;
@@ -210,7 +220,8 @@ export struct FbDrawerShell {
Row() { Row() {
FbDrawer({ FbDrawer({
app: this.app, app: this.app,
overlayMode: false overlayMode: false,
statusBarH: this.statusBarH
}) })
Column() { Column() {
this.content() this.content()
@@ -242,6 +253,7 @@ export struct FbDrawerShell {
FbDrawer({ FbDrawer({
app: this.app, app: this.app,
overlayMode: true, overlayMode: true,
statusBarH: this.statusBarH,
onDismiss: (): void => { onDismiss: (): void => {
this.app.drawerOpen = false; this.app.drawerOpen = false;
} }
+19 -21
View File
@@ -2,11 +2,16 @@
* 家书 FamilyBook · 顶栏(鸿蒙端) * 家书 FamilyBook · 顶栏(鸿蒙端)
* *
* 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`,但按手机习惯调整: * 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`,但按手机习惯调整:
* · 左:抽屉按钮(窄屏)/模块名(宽屏,此时抽屉常驻,不需要按钮) * · 左:抽屉按钮(窄屏)/图标(宽屏,此时抽屉常驻,不需要按钮)
* · 中:当前模块名 + 一句副标题(Web 端顶栏只放 logo + 导航,端上加副标题更清楚) * · 中:当前模块名 + 一句副标题
* · 右:通知铃铛(带未读角标)+ 头像(点开是账号菜单) * · 右:通知铃铛(带未读角标)+ 头像
* *
* ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致:设置收在头像菜单里, * 🔴 沉浸式要点:应用开了 `setWindowLayoutFullScreen(true)`,顶栏**一直画到屏幕最上沿**,
* 状态栏那一段用 `statusBarH` 内边距让出来。这样顶栏的底色与状态栏连成一片,
* 视觉上就是「顶栏顶天」—— 这是"沉浸"的关键,也是之前那个
* 「首页距离上面那么远」的根治办法(那时是重复避让)。
*
* ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致:设置收在抽屉底部的账号区里,
* 顶栏只留日常入口,再把管理入口顶出来会把顶栏挤满。 * 顶栏只留日常入口,再把管理入口顶出来会把顶栏挤满。
*/ */
@@ -18,11 +23,12 @@ import { FbAvatar } from './Widgets';
@ComponentV2 @ComponentV2
export struct FbTopBar { export struct FbTopBar {
@Param app: FbAppState = fbAppState(); @Param app: FbAppState = fbAppState();
/** 状态栏高度(vp)—— 由 Index 量出来传进来,顶栏用它做顶部内边距 */
@Param statusBarH: number = 0;
/** 右侧额外操作(各模块页自己往里塞「新建」「搜索」等按钮) */ /** 右侧额外操作(各模块页自己往里塞「新建」「搜索」等按钮) */
@BuilderParam actions: () => void; @BuilderParam actions: () => void;
build() { build() {
// 顶部安全区由外层容器统一处理(见 Index.ets),这里只占视觉高度
Row({ space: 10 }) { Row({ space: 10 }) {
// ---- 左:窄屏显示抽屉按钮 ---- // ---- 左:窄屏显示抽屉按钮 ----
if (!this.app.wideLayout) { if (!this.app.wideLayout) {
@@ -36,6 +42,7 @@ export struct FbTopBar {
.width(36) .width(36)
.height(36) .height(36)
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.stateEffect(true)
.onClick(() => { .onClick(() => {
this.app.drawerOpen = true; this.app.drawerOpen = true;
}) })
@@ -52,13 +59,8 @@ export struct FbTopBar {
.fontSize(17) .fontSize(17)
.fontWeight(FontWeight.Medium) .fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink) .fontColor(FbColors.ink)
if (this.moduleDesc().length > 0) { .maxLines(1)
Text(this.moduleDesc()) .textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
} }
.alignItems(HorizontalAlign.Start) .alignItems(HorizontalAlign.Start)
.layoutWeight(1) .layoutWeight(1)
@@ -78,6 +80,7 @@ export struct FbTopBar {
.width(36) .width(36)
.height(36) .height(36)
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.stateEffect(true)
.onClick(() => { .onClick(() => {
this.app.switchModule('__notifications'); this.app.switchModule('__notifications');
}) })
@@ -103,20 +106,15 @@ export struct FbTopBar {
.margin({ left: 2 }) .margin({ left: 2 })
} }
.width('100%') .width('100%')
.height(FbMetric.topBarH) // 沉浸式:顶部内边距 = 状态栏高度,底色一直画到屏幕最上沿
.padding({ left: 8, right: 10 }) .padding({ top: this.statusBarH, left: 8, right: 10 })
.alignItems(VerticalAlign.Center) .height(FbMetric.topBarH + this.statusBarH)
.alignItems(VerticalAlign.Bottom)
.backgroundColor(FbColors.surface) .backgroundColor(FbColors.surface)
.border({ width: { bottom: 1 }, color: FbColors.line2 })
} }
private moduleName(): string { private moduleName(): string {
const m = fbModuleOf(this.app.activeModule); const m = fbModuleOf(this.app.activeModule);
return m !== undefined ? m.name : '家书'; return m !== undefined ? m.name : '家书';
} }
private moduleDesc(): string {
const m = fbModuleOf(this.app.activeModule);
return m !== undefined ? m.desc : '';
}
} }
@@ -8,7 +8,7 @@ const DOMAIN: number = 0x0000;
/** /**
* 家书 · 应用入口。 * 家书 · 应用入口。
* *
* 只做三件事:加载主页面、把状态栏/导航条配色对齐主题、跟随系统深浅色重刷。 * 只做三件事:加载主页面、开启沉浸式(窗口铺满整屏)、跟随系统深浅色刷系统栏配色。
* *
* ⚠️ 这里**不申请任何权限**(除 module.json5 里已声明的 INTERNET)。 * ⚠️ 这里**不申请任何权限**(除 module.json5 里已声明的 INTERNET)。
* 要权限必须在用户主动点对应功能时再申请 —— 启动即弹窗会被审核驳回。 * 要权限必须在用户主动点对应功能时再申请 —— 启动即弹窗会被审核驳回。
@@ -33,16 +33,26 @@ export default class EntryAbility extends UIAbility {
hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err)); hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err));
} }
// ② 状态栏 / 导航条配色对齐主题,消除顶部和底部的异色条。 // ② 沉浸式 + 系统栏配色。
try { try {
const win: window.Window = windowStage.getMainWindowSync(); const win: window.Window = windowStage.getMainWindowSync();
this.mainWindow = win; this.mainWindow = win;
// 顺手把窗口引用存进 AppStorage:页面侧要在 aboutToAppear 里**同步**读
// 避让区(状态栏高度)来铺安全区,而 window.getLastWindow() 只有异步版。 // 🔴 关键一步:让窗口**铺满整屏**(内容延伸到状态栏 / 手势条区域)。
// 不开这个的话,系统会把窗口整体推到状态栏下方 —— 那时如果页面再自己
// "让出安全区",就会**重复避让**(实测 156px 的顶部空白,用户反馈
// 「首页距离上面那么远」就是这个原因)。
// 开了之后:窗口占满全屏,页面用 getWindowAvoidArea 的高度自己让位,
// 于是顶栏底色能一直顶到屏幕最上沿,状态栏看起来是"融"在顶栏里的。
win.setWindowLayoutFullScreen(true);
// 页面侧要在 aboutToAppear 里**同步**读避让区,而 window.getLastWindow()
// 只有异步版 ⇒ 由这里存一份窗口引用进 AppStorage。
AppStorage.setOrCreate<window.Window>('fbMainWindow', win); AppStorage.setOrCreate<window.Window>('fbMainWindow', win);
this.applySystemBars(win); this.applySystemBars(win);
} catch (err) { } catch (err) {
hilog.error(DOMAIN, 'FamilyBook', 'applySystemBars failed: %{public}s', JSON.stringify(err)); hilog.error(DOMAIN, 'FamilyBook', 'immersive setup failed: %{public}s', JSON.stringify(err));
} }
windowStage.loadContent('pages/Index', (err) => { windowStage.loadContent('pages/Index', (err) => {
@@ -92,18 +102,15 @@ export default class EntryAbility extends UIAbility {
} }
/** /**
* 取当前主题下 page_bg 的**真实取值**(经 dark/ 限定符解析)。 * 取某资源色的真实取值(经 dark/ 限定符解析)。以「资源系统实际解析出的颜色」
* * 为准来刷系统栏 —— 直接按 colorMode 判断会在系统切换的那一帧读到旧值。
* ⚠️ 必须以「资源系统实际解析出的颜色」为准来刷系统栏 ——
* 如果直接读 config.colorMode 判断,会在系统切换的那一帧读到旧值,
* 结果状态栏与页面背景对不上。
*/ */
private themePageBg(): string { private themeColor(id: number, fallback: string): string {
try { try {
const c: number = this.context.resourceManager.getColorSync($r('app.color.page_bg').id) >>> 0; const c: number = this.context.resourceManager.getColorSync(id) >>> 0;
return '#' + c.toString(16).padStart(8, '0'); return '#' + c.toString(16).padStart(8, '0');
} catch (err) { } catch (err) {
return '#F7F3EA'; return fallback;
} }
} }
@@ -123,16 +130,30 @@ export default class EntryAbility extends UIAbility {
return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 128; return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 128;
} }
/** 状态栏/导航条底色 = 页面背景色,前景按亮度取反 —— 视觉上与页面连成一片 */ /**
* 系统栏配色。
*
* 🔴 关键:**状态栏底色必须与它紧邻的元素同色**,否则会出现一条割裂的色带。
* 实测教训 —— 原先这里把状态栏设为「页面底色(宣纸米 #F7F3EA)」,
* 而顶栏是白色 #FFFFFF,于是顶部出现了
* 「一条米色状态栏 + 一条白色顶栏」的拼接感,用户体感就是
* 「首页距离上面那么远 / 不够沉浸」。
* ⇒ 状态栏一律取**顶栏底色**(app.color.surface),两者连成一片。
* 底部手势条则取**页面底色**,与页面下部同色。
*
* ⚠️ 取色都走 resourceManager(经 dark/ 限定符解析),不硬编码 —— 深色模式下一并生效。
*/
private applySystemBars(win: window.Window): void { private applySystemBars(win: window.Window): void {
const bg: string = this.themePageBg(); const surfaceBg: string = this.themeColor($r('app.color.surface').id, '#FFFFFF');
const fg: string = this.isDarkBg(bg) ? '#FFFFFF' : '#2C231D'; const paperBg: string = this.themeColor($r('app.color.page_bg').id, '#F7F3EA');
try { try {
win.setWindowSystemBarProperties({ win.setWindowSystemBarProperties({
statusBarColor: bg, // 顶部:与顶栏同色(白)⇒ 状态栏"融"进顶栏
statusBarContentColor: fg, statusBarColor: surfaceBg,
navigationBarColor: bg, statusBarContentColor: this.isDarkBg(surfaceBg) ? '#FFFFFF' : '#2C231D',
navigationBarContentColor: fg // 底部:与页面底色同色 ⇒ 手势条不突兀
navigationBarColor: paperBg,
navigationBarContentColor: this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D'
}); });
} catch (err) { } catch (err) {
hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s', hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s',
@@ -140,7 +161,6 @@ export default class EntryAbility extends UIAbility {
} }
// ⚠️ 这里**不再调** `win.setWindowBackgroundColor()` —— 该 API 对 // ⚠️ 这里**不再调** `win.setWindowBackgroundColor()` —— 该 API 对
// phone / tablet 不可用(编译器告警 "This API is unavailable to phone, tablet."), // phone / tablet 不可用(编译器告警 "This API is unavailable to phone, tablet."),
// 而页面自身(Index.ets 的安全区 Column)已经用同色铺满整屏, // 而页面自身已经用同色铺满整屏,窗口底色这层是多余的。
// 窗口底色这层是多余的。留着只会带来一条无意义的告警。
} }
} }
+1 -16
View File
@@ -14,7 +14,7 @@
import { FbAccount, FbAnniversaryItem, FbBookItem, FbCalBook, FbCalEvent, FbGroup, import { FbAccount, FbAnniversaryItem, FbBookItem, FbCalBook, FbCalEvent, FbGroup,
FbKinChip, FbKinRelation, FbLedgerBook, FbLedgerEntry, FbModuleCard, FbMovieItem, FbKinChip, FbKinRelation, FbLedgerBook, FbLedgerEntry, FbModuleCard, FbMovieItem,
FbNavLink, FbNoteItem, FbNotificationItem, FbResourceItem, FbRosterItem, FbSession, FbNoteItem, FbNotificationItem, FbResourceItem, FbRosterItem, FbSession,
FbTaskItem, FbTripItem, FbTripNode, FbWeather, FbWeekStat } from './Types'; 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: 'days', name: '纪念日', big: '6 天后', lines: ['结婚周年'], color: '#B4633C' },
{ key: 'ledger', name: '财务', big: '¥86.4 万', lines: ['3 本账(净资产)'], color: '#5E7A3C' }, { key: 'ledger', name: '财务', big: '¥86.4 万', lines: ['3 本账(净资产)'], color: '#5E7A3C' },
{ key: 'books', name: '读书', big: '2 本在读', lines: ['31 本读完 · 48 条笔记'], color: '#6B5B95' }, { 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' } { 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; 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>[] { 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[] = [ export const FB_MODULES: FbModuleDef[] = [
{ key: 'home', name: '首页', color: '#A84A28', desc: '今天要看的东西' }, { key: 'home', name: '首页', color: '#A84A28', desc: '今天要看的东西' },
{ key: 'kin', name: '家谱', color: '#8A6B4B', desc: '以我为中心的一张网' },
{ key: 'people', name: '名册', color: '#4A7C82', desc: '家庭名册与亲友通讯录' }, { key: 'people', name: '名册', color: '#4A7C82', desc: '家庭名册与亲友通讯录' },
{ key: 'movies', name: '观影', color: '#7A4E8C', desc: '一家人看过的电影' }, { key: 'movies', name: '观影', color: '#7A4E8C', desc: '一家人看过的电影' },
{ key: 'trips', name: '旅程', color: '#3F7D5A', desc: '去过的地方与行程' }, { key: 'trips', name: '旅程', color: '#3F7D5A', desc: '去过的地方与行程' },
{ key: 'calendar', name: '日程', color: '#B0763A', 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: 'tasks', name: '任务', color: '#A8574F', desc: '看板与待办' },
{ key: 'days', name: '纪念日', color: '#B4633C', desc: '生日与重要日子' }, { key: 'days', name: '纪念日', color: '#B4633C', desc: '生日与重要日子' },
{ key: 'ledger', name: '财务', color: '#5E7A3C', desc: '账本与账目' }, { key: 'ledger', name: '财务', color: '#5E7A3C', desc: '账本与账目' },
{ key: 'books', name: '读书', color: '#6B5B95', desc: '书架与读书笔记' }, { key: 'books', name: '读书', color: '#6B5B95', desc: '书架与读书笔记' },
{ key: 'nav', name: '导航', color: '#3E7A9E', desc: '我的个人导航' },
{ key: 'notes', name: '笔记', color: '#7A6A4F', desc: '随手记的分块笔记' } { key: 'notes', name: '笔记', color: '#7A6A4F', desc: '随手记的分块笔记' }
]; ];
/** /**
* 默认出现在抽屉里的模块(没自定义过就用它)。 * 默认出现在抽屉里的模块(没自定义过就用它)。
* *
* ⚠️ 与 Web 端 `Module::DEFAULT_NAV` 保持一致:**家谱默认不上导航条** * ⚠️ 与 Web 端 `Module::DEFAULT_NAV` 一致的部分:**家谱默认不上导航条**
* (用户原话「毕竟,不需要每天都查看家谱」),但它仍在抽屉的「更多」里能勾出来。 * (用户原话「毕竟,不需要每天都查看家谱」),但它仍在设置页里能勾出来。
* ⚠️ 差异:这里**没有 nav**(手机端不做导航模块,原因见 FB_MODULES 的注释)。
*/ */
export const FB_DEFAULT_NAV: string[] = [ export const FB_DEFAULT_NAV: string[] = [
'home', 'people', 'movies', 'trips', 'calendar', '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)
// ============================================================ // ============================================================
/** 一条个人导航(nav/index.php) */
export interface FbNavLink {
id: number;
title: string;
url: string;
/** 分组名 */
group: string;
/** 图标名(web 端用 favicon,端上先留空用首字母) */
icon: string;
}
// ============================================================ // ============================================================
// 笔记(notes) // 笔记(notes)
// ============================================================ // ============================================================
+117 -65
View File
@@ -13,6 +13,7 @@
import { display, window } from '@kit.ArkUI'; import { display, window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit'; import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { FbColors, FbMetric } from '../common/Theme'; import { FbColors, FbMetric } from '../common/Theme';
import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store'; import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store';
import { FbDrawerShell } from '../components/Drawer'; import { FbDrawerShell } from '../components/Drawer';
@@ -27,7 +28,7 @@ import { FbResourcesPage } from './resources/FbResourcesPage';
import { FbDaysPage } from './days/FbDaysPage'; import { FbDaysPage } from './days/FbDaysPage';
import { FbLedgerPage } from './ledger/FbLedgerPage'; import { FbLedgerPage } from './ledger/FbLedgerPage';
import { FbBooksPage } from './books/FbBooksPage'; import { FbBooksPage } from './books/FbBooksPage';
import { FbNavPage, FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages'; import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
import { FbSettingsPage } from './settings/FbSettingsPage'; import { FbSettingsPage } from './settings/FbSettingsPage';
@Entry @Entry
@@ -35,37 +36,120 @@ import { FbSettingsPage } from './settings/FbSettingsPage';
struct Index { struct Index {
/** 全局状态(抽屉 / 当前模块 / 宽窄屏) */ /** 全局状态(抽屉 / 当前模块 / 宽窄屏) */
@Local app: FbAppState = fbAppState(); @Local app: FbAppState = fbAppState();
/** 顶部安全区高度(状态栏),由窗口避让信息算出 */ /**
@Local topInset: number = 0; * 状态栏高度(vp)。
/** 底部安全区高度(手势条) */ *
@Local bottomInset: number = 0; * 🔴 为什么需要它:EntryAbility 调了 `setWindowLayoutFullScreen(true)`,窗口**铺满整屏**
* (顶栏背景色一直画到屏幕最上沿,这才是"沉浸")。
* 代价是内容会钻到状态栏底下,所以顶栏必须自己让出这一段高度。
*
* ⚠️ 曾经这里踩过一个错:那时没开全屏,系统**已经把窗口推到状态栏下方**了,
* 我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让 156px,
* 用户看到的就是「首页距离上面那么远」。开全屏之后这一段才真正必要。
*/
@Local statusBarH: number = 0;
/** 底部手势条高度(vp)——同理,全屏后内容会压到手势条上,需要留出 */
@Local bottomBarH: number = 0;
aboutToAppear(): void { aboutToAppear(): void {
this.measureInsets(); this.measureScreen();
this.loadWindowInsets();
}
/**
* 量屏幕断点(同步,首帧就能用)。
*/
private measureScreen(): void {
try {
const d: display.Display = display.getDefaultDisplaySync();
const density: number = d.densityPixels;
if (density <= 0) {
return;
}
// 宽窄屏:按窗口短边(短边旋转时不变,故比例接近 1:1 的设备横竖屏布局天然一致)
const shortSide: number = Math.min(d.width, d.height) / density;
this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT;
} catch (err) {
hilog.warn(0x0000, 'FamilyBook', 'measureScreen failed: %{public}s', JSON.stringify(err));
}
}
/**
* 取窗口避让区(状态栏 / 手势条高度)。
*
* ⚠️ 这里走**异步** `window.getLastWindow(ctx)`。
* 早先试过「EntryAbility 用 getMainWindowSync 取窗存进 AppStorage,页面侧同步读」——
* 实测**读不到**(Store 里存 Window 对象再取回来是不可靠的),结果 statusBarH 恒为 0。
* 代价是第一帧还没有避让值(顶栏按 0 让位),拿到后会自动重绘补上,
* 视觉上是"顶栏内容往下挪一点点",可接受。
*
* ⚠️ 避让值随**旋转 / 折叠**变化,所以同时监听 windowSizeChange 重算。
*/
private loadWindowInsets(): void {
try {
const ctx = this.getUIContext().getHostContext();
if (ctx === undefined) {
return;
}
window.getLastWindow(ctx)
.then((win: window.Window) => {
this.applyAvoidAreas(win);
// 尺寸变化(旋转、折叠展开/合上、分屏)后重算避让区
win.on('windowSizeChange', () => {
this.applyAvoidAreas(win);
});
})
.catch((err: BusinessError) => {
hilog.warn(0x0000, 'FamilyBook', 'getLastWindow failed: %{public}s',
JSON.stringify(err));
});
} catch (err) {
hilog.warn(0x0000, 'FamilyBook', 'loadWindowInsets failed: %{public}s',
JSON.stringify(err));
}
}
/** 从窗口读出避让区并换算成 vp(两个区各自 try —— 一个失败不该带下水另一个) */
private applyAvoidAreas(win: window.Window): void {
let density: number = 0;
try {
density = display.getDefaultDisplaySync().densityPixels;
} catch (err) {
hilog.warn(0x0000, 'FamilyBook', 'read density failed: %{public}s', JSON.stringify(err));
return;
}
if (density <= 0) {
return;
}
try {
const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
this.statusBarH = top.topRect.height / density;
} catch (err) {
hilog.warn(0x0000, 'FamilyBook', 'status bar inset failed: %{public}s',
JSON.stringify(err));
}
try {
const bottom: window.AvoidArea =
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
this.bottomBarH = bottom.bottomRect.height / density;
} catch (err) {
hilog.warn(0x0000, 'FamilyBook', 'nav bar inset failed: %{public}s',
JSON.stringify(err));
}
} }
build() { build() {
// 根容器铺满整屏;顶栏/内容各自让出状态栏与手势条 —— 这样顶栏的底色能一直
// 顶到屏幕最上沿,状态栏看起来就是「融合」在顶栏里的。
Column() { Column() {
// 顶部安全区:把内容推到状态栏下方(状态栏底色由 EntryAbility 设成页面底色) // 主骨架:抽屉 + 内容(内部已含状态栏留白,见 mainArea)
Column()
.width('100%')
.height(this.topInset)
.backgroundColor(FbColors.surface)
// 主骨架:抽屉 + 内容
Column() { Column() {
FbDrawerShell({ app: this.app }) { FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) {
this.mainArea() this.mainArea()
} }
} }
.layoutWeight(1) .layoutWeight(1)
.width('100%') .width('100%')
// 底部安全区
Column()
.width('100%')
.height(this.bottomInset)
.backgroundColor(FbColors.surface)
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
@@ -76,9 +160,8 @@ struct Index {
@Builder @Builder
mainArea() { mainArea() {
Column() { Column() {
// ---- 顶栏(右侧插槽由各模块页填充;这里统一留空, // ---- 顶栏:自身含状态栏留白(底色一直画到屏幕顶),所以这里不再单独加间隔 ----
// 因为「新建/搜索」这类操作已经放进各页自己的操作条里了)---- FbTopBar({ app: this.app, statusBarH: this.statusBarH }) {
FbTopBar({ app: this.app }) {
} }
// ---- 模块页 ---- // ---- 模块页 ----
@@ -87,6 +170,16 @@ struct Index {
} }
.layoutWeight(1) .layoutWeight(1)
.width('100%') .width('100%')
// ---- 底部手势条留白:保证内容不被手势条压住 ----
// ⚠️ 用页面底色而不是白色 —— 之前用一个白 Column 顶在这儿,
// 用户看到的就是「下面也有一条白色的东西」。
if (this.bottomBarH > 0) {
Column()
.width('100%')
.height(this.bottomBarH)
.backgroundColor(FbColors.paper)
}
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
@@ -117,8 +210,6 @@ struct Index {
FbLedgerPage({ app: this.app }) FbLedgerPage({ app: this.app })
} else if (this.app.activeModule === 'books') { } else if (this.app.activeModule === 'books') {
FbBooksPage({ app: this.app }) FbBooksPage({ app: this.app })
} else if (this.app.activeModule === 'nav') {
FbNavPage({ app: this.app })
} else if (this.app.activeModule === 'notes') { } else if (this.app.activeModule === 'notes') {
FbNotesPage({ app: this.app }) FbNotesPage({ app: this.app })
} else if (this.app.activeModule === '__notifications') { } else if (this.app.activeModule === '__notifications') {
@@ -141,43 +232,4 @@ struct Index {
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
}
/**
* 量安全区与宽窄屏。
*
* ⚠️ 状态栏高度**不写死数字**:不同机型(刘海、挖孔、无手势条)差很多,
* 写死必然在某些机型上错位。这里按窗口避让信息取真实值。
*
* ⚠️ 窗口引用从 EntryAbility 放进 AppStorage(`fbMainWindow`)后再取 ——
* `window.getLastWindow()` 只有异步版,在 aboutToAppear 里 await 会把
* 首帧的布局延后一帧;而 `windowStage.getMainWindowSync()` 是同步的,
* 由 Ability 侧取一次存下来最省事。
*/
private measureInsets(): void {
try {
const d: display.Display = display.getDefaultDisplaySync();
const density: number = d.densityPixels;
if (density <= 0) {
return;
}
// 宽窄屏:按窗口短边(短边旋转时不变,故比例接近 1:1 的设备横竖屏布局天然一致)
const shortSide: number = Math.min(d.width, d.height) / density;
this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT;
// 安全区:取窗口的真实避让矩形
const win: window.Window | undefined =
AppStorage.get<window.Window>('fbMainWindow');
if (win !== undefined) {
const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
this.topInset = top.topRect.height / density;
const bottom: window.AvoidArea =
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
this.bottomInset = bottom.bottomRect.height / density;
}
} catch (err) {
// 取不到就退到「只判宽窄屏、安全区按 0」—— 页面自带 12vp 顶部留白,不会贴边
hilog.warn(0x0000, 'FamilyBook', 'measureInsets failed: %{public}s', JSON.stringify(err));
}
}
}
+55 -83
View File
@@ -73,99 +73,88 @@ export struct FbHomePage {
Scroll() { Scroll() {
Column({ space: 0 }) { Column({ space: 0 }) {
// ==================== ① hero ==================== // ==================== ① 头部(问候 + 今天 + 天气)====================
Row({ space: 12 }) { // 🔴 手机端排版要点:这一块**不套白卡片**,直接铺在纸底上 ——
Image($r('app.media.fb_logo')) // 它是"页面头部"而不是"一张内容卡"。套上卡片会在第一屏就切出一块白,
.width(52) // 既压缩了首屏可用高度,也破坏了沉浸感(用户反馈「不够沉浸」)。
.height(52) // 卡片从下面的「今天的日程」才开始用,页面层次反而更清楚。
.borderRadius(14) Column({ space: 10 }) {
// 第一行:问候 + 名字(左) / 温度(右)
Column({ space: 3 }) {
Text(this.app.session.familyTitle)
.fontSize(FbMetric.fontH1)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(this.app.session.slogan)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
// 两个快捷入口:我的资料 / 我的家谱
Row({ space: 8 }) {
this.heroAction($r('app.media.fb_ic_user'), 'people')
this.heroAction($r('app.media.fb_ic_kin'), 'kin')
}
}
.width('100%')
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 16, bottom: 14 })
.alignItems(VerticalAlign.Center)
// ==================== ② 信息面板 ====================
Column({ space: 12 }) {
Row() { Row() {
Column({ space: 6 }) { Column({ space: 5 }) {
Row({ space: 4 }) { Row({ space: 4 }) {
Text(this.hello()) Text(this.hello())
.fontSize(FbMetric.fontBody) .fontSize(22)
.fontWeight(FontWeight.Medium) .fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink) .fontColor(FbColors.ink)
Text(',' + this.app.session.me.name) Text(',' + this.app.session.me.name)
.fontSize(FbMetric.fontBody) .fontSize(22)
.fontColor(FbColors.muted) .fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
} }
.alignItems(VerticalAlign.Bottom)
// 日期 · 星期 · 农历(一行排开,手机上一行读得完)
Row({ space: 8 }) { Row({ space: 8 }) {
Text(this.dateLine()) Text(this.dateLine())
.fontSize(FbMetric.fontSmall) .fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink) .fontColor(FbColors.muted)
Text('八月廿二') Text('八月廿二')
.fontSize(FbMetric.fontTiny) .fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint) .fontColor(FbColors.faint)
} }
// 日子标记(节气 / 节日 / 生日)
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => {
FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' })
.margin({ right: 6, top: 2 })
}, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk)
}
.width('100%')
} }
.alignItems(HorizontalAlign.Start) .alignItems(HorizontalAlign.Start)
.layoutWeight(1) .layoutWeight(1)
// 天气靠右 // 天气:靠右,温度大字 + 文案小字
Row({ space: 8 }) { Row({ space: 6 }) {
Image(this.weatherIcon())
.width(26)
.height(26)
.renderMode(ImageRenderMode.Template)
.fillColor(FbColors.brand2)
Column({ space: 0 }) { Column({ space: 0 }) {
Text(this.weather().temp.toString() + '°') Text(this.weather().temp.toString() + '°')
.fontSize(26) .fontSize(24)
.fontWeight(FontWeight.Medium) .fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink) .fontColor(FbColors.ink)
Text(this.weather().text + ' · ' + this.weather().wind) Text(this.weather().text)
.fontSize(FbMetric.fontTiny) .fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted) .fontColor(FbColors.muted)
.maxLines(1) .maxLines(1)
} }
.alignItems(HorizontalAlign.End) .alignItems(HorizontalAlign.End)
Image(this.weatherIcon())
.width(30)
.height(30)
.renderMode(ImageRenderMode.Template)
.fillColor(fbPalette('#B0763A').brand)
} }
.alignItems(VerticalAlign.Center) .alignItems(VerticalAlign.Center)
} }
.width('100%') .width('100%')
.alignItems(VerticalAlign.Top) .alignItems(VerticalAlign.Top)
Divider().color(FbColors.line2) // 第二行:天气地点 + 日子标记(节气 / 节日 / 生日)
Column({ space: 6 }) {
Text(this.weather().place + ' · ' + this.weather().wind)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
.width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => {
FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' })
.margin({ right: 6, top: 2 })
}, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk)
}
.width('100%')
}
.width('100%')
.alignItems(HorizontalAlign.Start)
// 第三行:三个数字(未来七天日程 / 待办 / 逾期)——
// 贴在头部末尾,作为"今天要不要操心的快速判断"
Divider().color(FbColors.line2).margin({ top: 2 })
FbStatTriple({ FbStatTriple({
labelA: '未来七天日程', labelA: '未来七天',
valueA: FB_DEMO_WEEK_STAT.events.toString(), valueA: FB_DEMO_WEEK_STAT.events.toString(),
labelB: '待办', labelB: '待办',
valueB: FB_DEMO_WEEK_STAT.todos.toString(), valueB: FB_DEMO_WEEK_STAT.todos.toString(),
@@ -175,10 +164,13 @@ export struct FbHomePage {
}) })
} }
.width('100%') .width('100%')
.padding(FbMetric.cardPad) .padding({
.backgroundColor(FbColors.surface) left: FbMetric.pagePad,
.borderRadius(FbMetric.radius) right: FbMetric.pagePad,
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) top: 14,
bottom: 4
})
.alignItems(HorizontalAlign.Start)
// ==================== ③ 今天的日程 + 近期任务 ==================== // ==================== ③ 今天的日程 + 近期任务 ====================
Column({ space: 0 }) { Column({ space: 0 }) {
@@ -350,25 +342,6 @@ export struct FbHomePage {
.align(Alignment.TopStart) .align(Alignment.TopStart)
} }
/** hero 上的方形快捷入口 */
@Builder
heroAction(icon: Resource, target: string) {
Button({ type: ButtonType.ROUNDED_RECTANGLE }) {
Image(icon)
.width(20)
.height(20)
.renderMode(ImageRenderMode.Template)
.fillColor(FbColors.muted)
}
.width(40)
.height(40)
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.onClick(() => {
this.app.switchModule(target);
})
}
/** 一块模块入口卡(图标 + 模块名 + 一句关键数字) */ /** 一块模块入口卡(图标 + 模块名 + 一句关键数字) */
@Builder @Builder
moduleCard(c: FbModuleCard) { moduleCard(c: FbModuleCard) {
@@ -425,7 +398,6 @@ export struct FbHomePage {
case 'days': return $r('app.media.fb_ic_days'); case 'days': return $r('app.media.fb_ic_days');
case 'ledger': return $r('app.media.fb_ic_ledger'); case 'ledger': return $r('app.media.fb_ic_ledger');
case 'books': return $r('app.media.fb_ic_books'); case 'books': return $r('app.media.fb_ic_books');
case 'nav': return $r('app.media.fb_ic_nav');
case 'notes': return $r('app.media.fb_ic_notes'); case 'notes': return $r('app.media.fb_ic_notes');
default: return $r('app.media.fb_ic_home'); default: return $r('app.media.fb_ic_home');
} }
+11 -135
View File
@@ -1,145 +1,21 @@
/** /**
* 家书 FamilyBook · 导航 / 笔记 / 通知(鸿蒙端) * 家书 FamilyBook · 笔记 / 通知(鸿蒙端)
* *
* 这三个模块的 Web 页面(`templates/nav/index.php`、`notes/index.php`、 * 这两个模块的 Web 页面(`templates/notes/index.php`、`notifications/index.php`)
* `notifications/index.php`)体量都不大,端上把它们放在同一个文件里 —— * 体量都不大,端上放在同一个文件里 —— 拆成两个文件反而要重复一堆样板。
* 都是「一列条目 + 一个入口」的形态,拆成三个文件反而要重复一堆样板。
* *
* ⚠️ 三个 struct 各自独立,由 Index.ets 按当前模块选一个渲染。 * ⚠️ 两个 struct 各自独立,由 Index.ets 按当前模块选一个渲染。
*
* 🔴 这里**曾经还有第三个:个人导航** —— 已按用户要求删除(2026-10-11):
* 导航本质是网站收藏夹,是给电脑浏览器主页用的,手机上每个网站都有 App,
* 没有使用场景。所以本文件现在只承载「体量小、形态相近」的页面。
*/ */
import { FbColors, FbMetric } from '../../common/Theme'; import { FbColors, FbMetric } from '../../common/Theme';
import { FbAppState, fbAppState } from '../../common/Store'; import { FbAppState, fbAppState } from '../../common/Store';
import { FbGroup, FbNavLink, FbNoteItem, FbNotificationItem } from '../../model/Types'; import { FbNoteItem, FbNotificationItem } from '../../model/Types';
import { import { FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS } from '../../model/DemoData';
FB_DEMO_NAV, FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS, fbGroupNav import { FbAvatar, FbDot, FbEmptyBox, FbPrimaryButton, FbTag } from '../../components/Widgets';
} from '../../model/DemoData';
import { FbAvatar, FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets';
// ============================================================
// 导航
// ============================================================
@ComponentV2
export struct FbNavPage {
@Param app: FbAppState = fbAppState();
/** 模块主题色(导航 = 蓝) */
private accent: string = '#3E7A9E';
private all: FbNavLink[] = FB_DEMO_NAV;
build() {
Column() {
Row({ space: 8 }) {
Column({ space: 2 }) {
Text('我的导航')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(this.all.length.toString() + ' 个站点 · 按分组排列')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
FbPrimaryButton({
label: '添加',
bg: this.accent,
icon: $r('app.media.fb_ic_plus')
})
}
.width('100%')
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
.alignItems(VerticalAlign.Center)
List({ space: 0 }) {
ForEach(this.groups(), (g: FbGroup<FbNavLink>) => {
ListItemGroup({ header: this.groupHeader(g.title, g.count + ' 个') }) {
ForEach(g.items, (n: FbNavLink) => {
ListItem() {
this.navRow(n)
}
}, (n: FbNavLink): string => 'nv_' + n.id.toString())
}
}, (g: FbGroup<FbNavLink>): string => 'ng_' + g.key)
}
.layoutWeight(1)
.width('100%')
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 })
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
}
.width('100%')
.height('100%')
.backgroundColor(FbColors.paper)
.alignItems(HorizontalAlign.Start)
}
@Builder
navRow(n: FbNavLink) {
Row({ space: 12 }) {
// 首字母方块(Web 端用站点 favicon,端上先用首字,避免引网络图)
Text(n.title.substring(0, 1))
.width(38)
.height(38)
.borderRadius(FbMetric.radiusS)
.backgroundColor(this.accent + '1A')
.fontColor(this.accent)
.fontSize(16)
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center)
Column({ space: 3 }) {
Text(n.title)
.fontSize(FbMetric.fontBody)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Text(n.url)
.fontSize(10)
.fontColor(FbColors.faint)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
Image($r('app.media.fb_ic_forward'))
.width(13)
.height(13)
.renderMode(ImageRenderMode.Template)
.fillColor(FbColors.faint)
}
.width('100%')
.padding(14)
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ bottom: 8 })
.alignItems(VerticalAlign.Center)
}
@Builder
groupHeader(title: string, count: string) {
Row({ space: 8 }) {
Text(title)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(count)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
Blank()
}
.width('100%')
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
.backgroundColor(FbColors.paper)
}
private groups(): FbGroup<FbNavLink>[] {
return fbGroupNav(this.all);
}
}
// ============================================================ // ============================================================
// 笔记 // 笔记
@@ -19,9 +19,9 @@ import { FbAvatar, FbDot, FbTag } from '../../components/Widgets';
export struct FbSettingsPage { export struct FbSettingsPage {
@Param app: FbAppState = fbAppState(); @Param app: FbAppState = fbAppState();
/** 抽屉里勾选着的模块 key */ /** 抽屉里勾选着的模块 key(与 FB_DEFAULT_NAV 一致,不含 nav) */
@Local checked: string[] = ['home', 'people', 'movies', 'trips', 'calendar', @Local checked: string[] = ['home', 'people', 'movies', 'trips', 'calendar',
'resources', 'tasks', 'days', 'ledger', 'books', 'nav', 'notes']; 'resources', 'tasks', 'days', 'ledger', 'books', 'notes'];
/** 当前展开的配色分组('' = 都没展开) */ /** 当前展开的配色分组('' = 都没展开) */
@Local colorOpenKey: string = ''; @Local colorOpenKey: string = '';
@@ -335,7 +335,6 @@ export struct FbSettingsPage {
case 'days': return $r('app.media.fb_ic_days'); case 'days': return $r('app.media.fb_ic_days');
case 'ledger': return $r('app.media.fb_ic_ledger'); case 'ledger': return $r('app.media.fb_ic_ledger');
case 'books': return $r('app.media.fb_ic_books'); case 'books': return $r('app.media.fb_ic_books');
case 'nav': return $r('app.media.fb_ic_nav');
case 'notes': return $r('app.media.fb_ic_notes'); case 'notes': return $r('app.media.fb_ic_notes');
default: return $r('app.media.fb_ic_dot'); default: return $r('app.media.fb_ic_dot');
} }