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:
@@ -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>[] {
|
||||
|
||||
@@ -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'
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@@ -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)
|
||||
// ============================================================
|
||||
|
||||
Reference in New Issue
Block a user