diff --git a/README.md b/README.md index 8c1150c..ccd345d 100644 --- a/README.md +++ b/README.md @@ -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 折线树 | 「以我为中心的圈层」（直系 / 其他亲属） | 折线树在窄屏排不下 | +| 财务 | 概览 + 折线图 + 账目表 | 概览（图占位）+ 按类别分组的账目 | 折线图需要图表能力，留到第二轮 | + +--- + ## 目录结构 ``` diff --git a/entry/src/main/ets/components/Drawer.ets b/entry/src/main/ets/components/Drawer.ets index f71938b..40953fd 100644 --- a/entry/src/main/ets/components/Drawer.ets +++ b/entry/src/main/ets/components/Drawer.ets @@ -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; } diff --git a/entry/src/main/ets/components/TopBar.ets b/entry/src/main/ets/components/TopBar.ets index 581d50b..cb52aa1 100644 --- a/entry/src/main/ets/components/TopBar.ets +++ b/entry/src/main/ets/components/TopBar.ets @@ -2,11 +2,16 @@ * 家书 FamilyBook · 顶栏（鸿蒙端） * * 对应 Web 端 `templates/layout.php` 的 `
`，但按手机习惯调整： - * · 左：抽屉按钮（窄屏）／模块名（宽屏，此时抽屉常驻，不需要按钮） - * · 中：当前模块名 + 一句副标题（Web 端顶栏只放 logo + 导航，端上加副标题更清楚） - * · 右：通知铃铛（带未读角标）+ 头像（点开是账号菜单） + * · 左：抽屉按钮（窄屏）／图标（宽屏，此时抽屉常驻，不需要按钮） + * · 中：当前模块名 + 一句副标题 + * · 右：通知铃铛（带未读角标）+ 头像 * - * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在头像菜单里， + * 🔴 沉浸式要点：应用开了 `setWindowLayoutFullScreen(true)`，顶栏**一直画到屏幕最上沿**， + * 状态栏那一段用 `statusBarH` 内边距让出来。这样顶栏的底色与状态栏连成一片， + * 视觉上就是「顶栏顶天」—— 这是"沉浸"的关键，也是之前那个 + * 「首页距离上面那么远」的根治办法（那时是重复避让）。 + * + * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在抽屉底部的账号区里， * 顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。 */ @@ -18,11 +23,12 @@ import { FbAvatar } from './Widgets'; @ComponentV2 export struct FbTopBar { @Param app: FbAppState = fbAppState(); + /** 状态栏高度（vp）—— 由 Index 量出来传进来，顶栏用它做顶部内边距 */ + @Param statusBarH: number = 0; /** 右侧额外操作（各模块页自己往里塞「新建」「搜索」等按钮） */ @BuilderParam actions: () => void; build() { - // 顶部安全区由外层容器统一处理（见 Index.ets），这里只占视觉高度 Row({ space: 10 }) { // ---- 左：窄屏显示抽屉按钮 ---- if (!this.app.wideLayout) { @@ -36,6 +42,7 @@ export struct FbTopBar { .width(36) .height(36) .backgroundColor(Color.Transparent) + .stateEffect(true) .onClick(() => { this.app.drawerOpen = true; }) @@ -52,13 +59,8 @@ export struct FbTopBar { .fontSize(17) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) - if (this.moduleDesc().length > 0) { - Text(this.moduleDesc()) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - } + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) @@ -78,6 +80,7 @@ export struct FbTopBar { .width(36) .height(36) .backgroundColor(Color.Transparent) + .stateEffect(true) .onClick(() => { this.app.switchModule('__notifications'); }) @@ -103,20 +106,15 @@ export struct FbTopBar { .margin({ left: 2 }) } .width('100%') - .height(FbMetric.topBarH) - .padding({ left: 8, right: 10 }) - .alignItems(VerticalAlign.Center) + // 沉浸式：顶部内边距 = 状态栏高度，底色一直画到屏幕最上沿 + .padding({ top: this.statusBarH, left: 8, right: 10 }) + .height(FbMetric.topBarH + this.statusBarH) + .alignItems(VerticalAlign.Bottom) .backgroundColor(FbColors.surface) - .border({ width: { bottom: 1 }, color: FbColors.line2 }) } private moduleName(): string { const m = fbModuleOf(this.app.activeModule); return m !== undefined ? m.name : '家书'; } - - private moduleDesc(): string { - const m = fbModuleOf(this.app.activeModule); - return m !== undefined ? m.desc : ''; - } } \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index 5dce1a8..bffcc7d 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -8,7 +8,7 @@ const DOMAIN: number = 0x0000; /** * 家书 · 应用入口。 * - * 只做三件事：加载主页面、把状态栏/导航条配色对齐主题、跟随系统深浅色重刷。 + * 只做三件事：加载主页面、开启沉浸式（窗口铺满整屏）、跟随系统深浅色刷系统栏配色。 * * ⚠️ 这里**不申请任何权限**（除 module.json5 里已声明的 INTERNET）。 * 要权限必须在用户主动点对应功能时再申请 —— 启动即弹窗会被审核驳回。 @@ -33,16 +33,26 @@ export default class EntryAbility extends UIAbility { hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err)); } - // ② 状态栏 / 导航条配色对齐主题，消除顶部和底部的异色条。 + // ② 沉浸式 + 系统栏配色。 try { const win: window.Window = windowStage.getMainWindowSync(); this.mainWindow = win; - // 顺手把窗口引用存进 AppStorage：页面侧要在 aboutToAppear 里**同步**读 - // 避让区（状态栏高度）来铺安全区，而 window.getLastWindow() 只有异步版。 + + // 🔴 关键一步：让窗口**铺满整屏**（内容延伸到状态栏 / 手势条区域）。 + // 不开这个的话，系统会把窗口整体推到状态栏下方 —— 那时如果页面再自己 + // "让出安全区"，就会**重复避让**（实测 156px 的顶部空白，用户反馈 + // 「首页距离上面那么远」就是这个原因）。 + // 开了之后：窗口占满全屏，页面用 getWindowAvoidArea 的高度自己让位， + // 于是顶栏底色能一直顶到屏幕最上沿，状态栏看起来是"融"在顶栏里的。 + win.setWindowLayoutFullScreen(true); + + // 页面侧要在 aboutToAppear 里**同步**读避让区，而 window.getLastWindow() + // 只有异步版 ⇒ 由这里存一份窗口引用进 AppStorage。 AppStorage.setOrCreate('fbMainWindow', win); + this.applySystemBars(win); } 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) => { @@ -92,18 +102,15 @@ export default class EntryAbility extends UIAbility { } /** - * 取当前主题下 page_bg 的**真实取值**（经 dark/ 限定符解析）。 - * - * ⚠️ 必须以「资源系统实际解析出的颜色」为准来刷系统栏 —— - * 如果直接读 config.colorMode 判断，会在系统切换的那一帧读到旧值， - * 结果状态栏与页面背景对不上。 + * 取某资源色的真实取值（经 dark/ 限定符解析）。以「资源系统实际解析出的颜色」 + * 为准来刷系统栏 —— 直接按 colorMode 判断会在系统切换的那一帧读到旧值。 */ - private themePageBg(): string { + private themeColor(id: number, fallback: string): string { 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'); } 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; } - /** 状态栏/导航条底色 = 页面背景色，前景按亮度取反 —— 视觉上与页面连成一片 */ + /** + * 系统栏配色。 + * + * 🔴 关键：**状态栏底色必须与它紧邻的元素同色**，否则会出现一条割裂的色带。 + * 实测教训 —— 原先这里把状态栏设为「页面底色（宣纸米 #F7F3EA）」， + * 而顶栏是白色 #FFFFFF，于是顶部出现了 + * 「一条米色状态栏 + 一条白色顶栏」的拼接感，用户体感就是 + * 「首页距离上面那么远 / 不够沉浸」。 + * ⇒ 状态栏一律取**顶栏底色**（app.color.surface），两者连成一片。 + * 底部手势条则取**页面底色**，与页面下部同色。 + * + * ⚠️ 取色都走 resourceManager（经 dark/ 限定符解析），不硬编码 —— 深色模式下一并生效。 + */ private applySystemBars(win: window.Window): void { - const bg: string = this.themePageBg(); - const fg: string = this.isDarkBg(bg) ? '#FFFFFF' : '#2C231D'; + const surfaceBg: string = this.themeColor($r('app.color.surface').id, '#FFFFFF'); + const paperBg: string = this.themeColor($r('app.color.page_bg').id, '#F7F3EA'); try { win.setWindowSystemBarProperties({ - statusBarColor: bg, - statusBarContentColor: fg, - navigationBarColor: bg, - navigationBarContentColor: fg + // 顶部：与顶栏同色（白）⇒ 状态栏"融"进顶栏 + statusBarColor: surfaceBg, + statusBarContentColor: this.isDarkBg(surfaceBg) ? '#FFFFFF' : '#2C231D', + // 底部：与页面底色同色 ⇒ 手势条不突兀 + navigationBarColor: paperBg, + navigationBarContentColor: this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D' }); } catch (err) { hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s', @@ -140,7 +161,6 @@ export default class EntryAbility extends UIAbility { } // ⚠️ 这里**不再调** `win.setWindowBackgroundColor()` —— 该 API 对 // phone / tablet 不可用（编译器告警 "This API is unavailable to phone, tablet."）， - // 而页面自身（Index.ets 的安全区 Column）已经用同色铺满整屏， - // 窗口底色这层是多余的。留着只会带来一条无意义的告警。 + // 而页面自身已经用同色铺满整屏，窗口底色这层是多余的。 } } \ No newline at end of file diff --git a/entry/src/main/ets/model/DemoData.ets b/entry/src/main/ets/model/DemoData.ets index 8ae5eda..6699d74 100644 --- a/entry/src/main/ets/model/DemoData.ets +++ b/entry/src/main/ets/model/DemoData.ets @@ -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[] { return groups; } -/** 按 group 分组建导航 */ -export function fbGroupNav(list: FbNavLink[]): FbGroup[] { - return fbGroupBy(list, (it: FbNavLink): string => it.group); -} /** 通用分组：保持首次出现的顺序（不做字典序，免得打乱业务排序） */ function fbGroupBy(list: T[], keyOf: (it: T) => string): FbGroup[] { diff --git a/entry/src/main/ets/model/Modules.ets b/entry/src/main/ets/model/Modules.ets index f073cf8..9005ff3 100644 --- a/entry/src/main/ets/model/Modules.ets +++ b/entry/src/main/ets/model/Modules.ets @@ -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' ]; /** diff --git a/entry/src/main/ets/model/Types.ets b/entry/src/main/ets/model/Types.ets index a09fe80..fc197ec 100644 --- a/entry/src/main/ets/model/Types.ets +++ b/entry/src/main/ets/model/Types.ets @@ -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） // ============================================================ diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 2c4af8a..7f57f09 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,6 +13,7 @@ import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { BusinessError } from '@kit.BasicServicesKit'; import { FbColors, FbMetric } from '../common/Theme'; import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store'; import { FbDrawerShell } from '../components/Drawer'; @@ -27,7 +28,7 @@ import { FbResourcesPage } from './resources/FbResourcesPage'; import { FbDaysPage } from './days/FbDaysPage'; import { FbLedgerPage } from './ledger/FbLedgerPage'; import { FbBooksPage } from './books/FbBooksPage'; -import { FbNavPage, FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages'; +import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages'; import { FbSettingsPage } from './settings/FbSettingsPage'; @Entry @@ -35,37 +36,120 @@ import { FbSettingsPage } from './settings/FbSettingsPage'; struct Index { /** 全局状态（抽屉 / 当前模块 / 宽窄屏） */ @Local app: FbAppState = fbAppState(); - /** 顶部安全区高度（状态栏），由窗口避让信息算出 */ - @Local topInset: number = 0; - /** 底部安全区高度（手势条） */ - @Local bottomInset: number = 0; + /** + * 状态栏高度（vp）。 + * + * 🔴 为什么需要它：EntryAbility 调了 `setWindowLayoutFullScreen(true)`，窗口**铺满整屏** + * （顶栏背景色一直画到屏幕最上沿，这才是"沉浸"）。 + * 代价是内容会钻到状态栏底下，所以顶栏必须自己让出这一段高度。 + * + * ⚠️ 曾经这里踩过一个错：那时没开全屏，系统**已经把窗口推到状态栏下方**了， + * 我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让 156px， + * 用户看到的就是「首页距离上面那么远」。开全屏之后这一段才真正必要。 + */ + @Local statusBarH: number = 0; + /** 底部手势条高度（vp）——同理，全屏后内容会压到手势条上，需要留出 */ + @Local bottomBarH: number = 0; 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() { + // 根容器铺满整屏；顶栏/内容各自让出状态栏与手势条 —— 这样顶栏的底色能一直 + // 顶到屏幕最上沿，状态栏看起来就是「融合」在顶栏里的。 Column() { - // 顶部安全区：把内容推到状态栏下方（状态栏底色由 EntryAbility 设成页面底色） - Column() - .width('100%') - .height(this.topInset) - .backgroundColor(FbColors.surface) - - // 主骨架：抽屉 + 内容 + // 主骨架：抽屉 + 内容（内部已含状态栏留白，见 mainArea） Column() { - FbDrawerShell({ app: this.app }) { + FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) { this.mainArea() } } .layoutWeight(1) .width('100%') - - // 底部安全区 - Column() - .width('100%') - .height(this.bottomInset) - .backgroundColor(FbColors.surface) } .width('100%') .height('100%') @@ -76,9 +160,8 @@ struct Index { @Builder mainArea() { Column() { - // ---- 顶栏（右侧插槽由各模块页填充；这里统一留空， - // 因为「新建/搜索」这类操作已经放进各页自己的操作条里了）---- - FbTopBar({ app: this.app }) { + // ---- 顶栏：自身含状态栏留白（底色一直画到屏幕顶），所以这里不再单独加间隔 ---- + FbTopBar({ app: this.app, statusBarH: this.statusBarH }) { } // ---- 模块页 ---- @@ -87,6 +170,16 @@ struct Index { } .layoutWeight(1) .width('100%') + + // ---- 底部手势条留白：保证内容不被手势条压住 ---- + // ⚠️ 用页面底色而不是白色 —— 之前用一个白 Column 顶在这儿， + // 用户看到的就是「下面也有一条白色的东西」。 + if (this.bottomBarH > 0) { + Column() + .width('100%') + .height(this.bottomBarH) + .backgroundColor(FbColors.paper) + } } .width('100%') .height('100%') @@ -117,8 +210,6 @@ struct Index { FbLedgerPage({ app: this.app }) } else if (this.app.activeModule === 'books') { FbBooksPage({ app: this.app }) - } else if (this.app.activeModule === 'nav') { - FbNavPage({ app: this.app }) } else if (this.app.activeModule === 'notes') { FbNotesPage({ app: this.app }) } else if (this.app.activeModule === '__notifications') { @@ -141,43 +232,4 @@ struct Index { .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('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)); - } - } -} \ No newline at end of file +} diff --git a/entry/src/main/ets/pages/home/FbHomePage.ets b/entry/src/main/ets/pages/home/FbHomePage.ets index f32653c..bd84fd1 100644 --- a/entry/src/main/ets/pages/home/FbHomePage.ets +++ b/entry/src/main/ets/pages/home/FbHomePage.ets @@ -73,99 +73,88 @@ export struct FbHomePage { Scroll() { Column({ space: 0 }) { - // ==================== ① hero ==================== - Row({ space: 12 }) { - Image($r('app.media.fb_logo')) - .width(52) - .height(52) - .borderRadius(14) - - 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 }) { + // ==================== ① 头部（问候 + 今天 + 天气）==================== + // 🔴 手机端排版要点：这一块**不套白卡片**，直接铺在纸底上 —— + // 它是"页面头部"而不是"一张内容卡"。套上卡片会在第一屏就切出一块白， + // 既压缩了首屏可用高度，也破坏了沉浸感（用户反馈「不够沉浸」）。 + // 卡片从下面的「今天的日程」才开始用，页面层次反而更清楚。 + Column({ space: 10 }) { + // 第一行：问候 + 名字（左） / 温度（右） Row() { - Column({ space: 6 }) { + Column({ space: 5 }) { Row({ space: 4 }) { Text(this.hello()) - .fontSize(FbMetric.fontBody) + .fontSize(22) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) Text('，' + this.app.session.me.name) - .fontSize(FbMetric.fontBody) - .fontColor(FbColors.muted) + .fontSize(22) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) } + .alignItems(VerticalAlign.Bottom) + + // 日期 · 星期 · 农历（一行排开，手机上一行读得完） Row({ space: 8 }) { Text(this.dateLine()) .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) + .fontColor(FbColors.muted) Text('八月廿二') - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .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) .layoutWeight(1) - // 天气靠右 - Row({ space: 8 }) { + // 天气：靠右，温度大字 + 文案小字 + Row({ space: 6 }) { + Image(this.weatherIcon()) + .width(26) + .height(26) + .renderMode(ImageRenderMode.Template) + .fillColor(FbColors.brand2) Column({ space: 0 }) { Text(this.weather().temp.toString() + '°') - .fontSize(26) + .fontSize(24) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) - Text(this.weather().text + ' · ' + this.weather().wind) + Text(this.weather().text) .fontSize(FbMetric.fontTiny) .fontColor(FbColors.muted) .maxLines(1) } .alignItems(HorizontalAlign.End) - - Image(this.weatherIcon()) - .width(30) - .height(30) - .renderMode(ImageRenderMode.Template) - .fillColor(fbPalette('#B0763A').brand) } .alignItems(VerticalAlign.Center) } .width('100%') .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({ - labelA: '未来七天日程', + labelA: '未来七天', valueA: FB_DEMO_WEEK_STAT.events.toString(), labelB: '待办', valueB: FB_DEMO_WEEK_STAT.todos.toString(), @@ -175,10 +164,13 @@ export struct FbHomePage { }) } .width('100%') - .padding(FbMetric.cardPad) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + .padding({ + left: FbMetric.pagePad, + right: FbMetric.pagePad, + top: 14, + bottom: 4 + }) + .alignItems(HorizontalAlign.Start) // ==================== ③ 今天的日程 + 近期任务 ==================== Column({ space: 0 }) { @@ -350,25 +342,6 @@ export struct FbHomePage { .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 moduleCard(c: FbModuleCard) { @@ -425,7 +398,6 @@ export struct FbHomePage { case 'days': return $r('app.media.fb_ic_days'); case 'ledger': return $r('app.media.fb_ic_ledger'); 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'); default: return $r('app.media.fb_ic_home'); } diff --git a/entry/src/main/ets/pages/misc/FbMiscPages.ets b/entry/src/main/ets/pages/misc/FbMiscPages.ets index ec12c69..eaa2793 100644 --- a/entry/src/main/ets/pages/misc/FbMiscPages.ets +++ b/entry/src/main/ets/pages/misc/FbMiscPages.ets @@ -1,145 +1,21 @@ /** - * 家书 FamilyBook · 导航 / 笔记 / 通知（鸿蒙端） + * 家书 FamilyBook · 笔记 / 通知（鸿蒙端） * - * 这三个模块的 Web 页面（`templates/nav/index.php`、`notes/index.php`、 - * `notifications/index.php`）体量都不大，端上把它们放在同一个文件里 —— - * 都是「一列条目 + 一个入口」的形态，拆成三个文件反而要重复一堆样板。 + * 这两个模块的 Web 页面（`templates/notes/index.php`、`notifications/index.php`） + * 体量都不大，端上放在同一个文件里 —— 拆成两个文件反而要重复一堆样板。 * - * ⚠️ 三个 struct 各自独立，由 Index.ets 按当前模块选一个渲染。 + * ⚠️ 两个 struct 各自独立，由 Index.ets 按当前模块选一个渲染。 + * + * 🔴 这里**曾经还有第三个：个人导航** —— 已按用户要求删除（2026-10-11）： + * 导航本质是网站收藏夹，是给电脑浏览器主页用的，手机上每个网站都有 App， + * 没有使用场景。所以本文件现在只承载「体量小、形态相近」的页面。 */ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbGroup, FbNavLink, FbNoteItem, FbNotificationItem } from '../../model/Types'; -import { - FB_DEMO_NAV, FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS, fbGroupNav -} 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) => { - 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): 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[] { - return fbGroupNav(this.all); - } -} +import { FbNoteItem, FbNotificationItem } from '../../model/Types'; +import { FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS } from '../../model/DemoData'; +import { FbAvatar, FbDot, FbEmptyBox, FbPrimaryButton, FbTag } from '../../components/Widgets'; // ============================================================ // 笔记 diff --git a/entry/src/main/ets/pages/settings/FbSettingsPage.ets b/entry/src/main/ets/pages/settings/FbSettingsPage.ets index c7b2deb..31b5e23 100644 --- a/entry/src/main/ets/pages/settings/FbSettingsPage.ets +++ b/entry/src/main/ets/pages/settings/FbSettingsPage.ets @@ -19,9 +19,9 @@ import { FbAvatar, FbDot, FbTag } from '../../components/Widgets'; export struct FbSettingsPage { @Param app: FbAppState = fbAppState(); - /** 抽屉里勾选着的模块 key */ + /** 抽屉里勾选着的模块 key（与 FB_DEFAULT_NAV 一致，不含 nav） */ @Local checked: string[] = ['home', 'people', 'movies', 'trips', 'calendar', - 'resources', 'tasks', 'days', 'ledger', 'books', 'nav', 'notes']; + 'resources', 'tasks', 'days', 'ledger', 'books', 'notes']; /** 当前展开的配色分组（'' = 都没展开） */ @Local colorOpenKey: string = ''; @@ -335,7 +335,6 @@ export struct FbSettingsPage { case 'days': return $r('app.media.fb_ic_days'); case 'ledger': return $r('app.media.fb_ic_ledger'); 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'); default: return $r('app.media.fb_ic_dot'); }