v61:顶栏标题=模块名 / 抽屉瘦身 + 头像进个人设置 / 删除按钮红底 / 浮层动画 / 日程卡片与手势

用户这一批九条,逐条对应:

1)「页面上左上角的标题,不再是家书了,而是切换到那个模块,就显示哪个模块的标题。
   这样在页面内容部,就不再出现模块的名字标题了。」
   → TopBar 主标题改读 moduleName()(通知/设置/个人设置三个非模块路由也有名字);
     观影/纪念日/读书/笔记/通知五处页内大标题删掉。

2)「按钮,也需要和主题色保持一致,出现文字的时候,例如观影模块,
   在左上角出现的时候,颜色也需要和主题色保持一致。」
   → 标题色走 fbModuleColor(app.activeModule)(一处算,11 个页面不用各写)。

3)「弹框的外圈颜色,跟模块的主题色保持一致。」
   → 日程详情原来传 bookColor(日历本色)⇒ 改 accentColor();
     7 个模块设置浮层补传 accent: this.accent。

4)「删除按钮全部用红色背景。」
   → 日程编辑/人员编辑从红描边改红底白字;详情「删除联系人」从浅红底改红底白字;
     两处确认框统一 FbColors.red。

5)「做几个动画,例如,点击名册列表,应该有一个过渡动画出现弹框,
   点击详情,框变大了,也应该有一个过渡动画,点编辑,也有动画。」
   → 新建 common/FbAnim.ets(fbMaskTransition / fbSheetTransition /
     fbSheetGrowTransition / fbViewTransition),9 个页面共 17 遮罩 + 16 浮层挂上;
     简要卡→详情用 0.96→1 的"继续长大"(0.94 会先缩一下)。

6)「左侧抽屉,把通知消息、个人设置、修改密码、系统设置,都去掉,
   放在个人设置页,就是在点击右侧头像那里。消息通知不用放进去,
   直接在头像旁边那里就可以了。」
   → 抽屉底部那四行整块删除(抽屉只剩品牌区 + 模块列表);
     新建 pages/account/FbAccountPage.ets(整页,__account 分发),
     点头像 switchModule('__account');改密码真打服务端新接口。

7)「日程……日期下面:12本日历可见,本月124条,这句话去掉。
   点击日程弹出的框,编辑按钮也颜色也要修改。
   全天日程,例如农历,上面显示无标题,读不到这条日程,这个有问题。」
   → 删统计行;编辑按钮从写死名册青 #4A7C82 改模块主题色;
     真根因:衍生条目(农历/节气)的 detailFull **一直是 null**
     (它们没有 /events/<id> 可拉,原来直接 return)⇒ 垫 shellOf(),
     并把"整卡报错"改成"照常画内容 + 一行小字";
     空标题兜底从「(无标题)」改成日历本名。

8)「再做几个卡片,先做日程的,这个参考 synccalendar。」
   → FbDayEventPanel.eventRow 照 SyncCalendar:左侧 4vp 圆头色条 + 标题 +
     时间/全天 + 「↻ 重复」徽标 + 右端日历本名(限宽 30%、同色);
     一行一张独立圆角卡(12)+ 描边,卡间 space 8,不再用 Divider 连成一片。

9)「日程,有很多手势,你参考 synccalendar。」
   → 月历上滑→周视图、周条下划→月视图、周条左右滑→换周。
     真机实测两次踩空后定下写法:**竖向必须 parallelGesture(PanGesture)**
     (外层是 Scroll,SwipeGesture 的"快速划动"会被它的内置滚动先吃掉,
      gesture/priorityGesture 都不行);**横滑用 gesture(PanGesture)**
     (同一节点两条方向不同的 parallelGesture 会互相压制);
     方向按累计位移判、并要求 |dy| > |dx|。切视图走 animateTo + fbViewTransition。

验证:
· 编译 BUILD SUCCESSFUL
· ArkTS 守卫 493/0;Schema 列守卫 12/0;反向验证 39/0(新增 22 条注入逐条确认能变红)
· 服务端接口 e2e 20/0(独立副本 + 真 MariaDB,5 种错误路径 + 原令牌仍有效)
· 真机 _fb_v61_verify.py 21/0(6 组全过);像素采样确认浮层主题色环实测存在
This commit is contained in:
2026-10-19 12:19:54 +08:00
parent 1a67247407
commit 853b0e0b20
22 changed files with 1252 additions and 362 deletions
+13 -75
View File
@@ -146,80 +146,6 @@ export struct FbDrawer {
})
}
/** 底部账号区(对应 Web 端右上角头像菜单里的那几项) */
@Builder
accountFooter() {
Column({ space: 2 }) {
Divider()
.color(FbColors.line2)
.margin({ bottom: 6 })
this.footerRow('fb_ic_bell', '通知消息',
this.app.unread > 0 ? this.app.unread.toString() : '', '__notifications')
this.footerRow('fb_ic_user', '个人设置', '', '__settings')
// ⚠️ 下面两项端上**还没做页面**,传空 route ⇒ 灰显、不可点。
// 别给它们绑 `__password` / `__system` —— Index.ets 没这两个分支,
// 点下去是**空白页**,比"点不动"更让人困惑。
this.footerRow('fb_ic_lock', '修改密码', '', '')
if (this.app.session.me.role === 'admin') {
this.footerRow('fb_ic_gear', '系统设置', '', '')
}
}
.width('100%')
// 🔴 bottom 给底部**手势条区域**留一点(全屏布局下抽屉会铺到屏幕最下沿,
// 底部这两行若贴着边,手指从下往上滑时容易误触到系统手势)。
.padding({ left: 12, right: 12, bottom: 10 + FB_BOTTOM_GAP })
}
/**
* 底部一行(通知消息 / 个人设置 / 修改密码 / 系统设置)。
*
* 🔴 必须带 `route` 并绑 onClick —— 之前这四行**根本没有点击处理**,
* 界面上是个死按钮(点下去毫无反应)。
* 排查记录:点「个人设置」后仍停在首页,看界面树发现该元素
* `clickable=false` 且整行没有任何可点击祖先 —— 就是这个原因。
* ⚠️ 与模块项(`moduleRow`)不同:这四项的路由 key 是 `__xxx` 形式,
* 不是 `FB_MODULES` 里的模块,走同一个 `switchModule` 分发
* (Index.ets 里用 `activeModule === '__settings'` 渲染对应页面)。
*
* ⚠️ `route` 传空串表示"**这个页面还没做**" ⇒ 不绑 onClick,且文字降为灰、
* 保持不可点。为什么不给它绑个假跳转:那会跳到**空白页**
* (Index.ets 里没有对应分支),比"点了没反应"更让人困惑。
* 现状:`__notifications` / `__settings` 已有页面;
* `修改密码` / `系统设置` **还没做**(Web 端有,端上待开发)。
*/
@Builder
footerRow(iconName: string, label: string, badge: string, route: string) {
Row({ space: 12 }) {
Image(FbIcon.ui(iconName))
.width(17)
.height(17)
.renderMode(ImageRenderMode.Template)
// 未实现的项图标也变灰,明示"暂不可用"
.colorFilter(fbTint(route === '' ? FbTint.faint : FbTint.muted))
Text(label)
.fontSize(FbMetric.fontSmall)
.fontColor(route === '' ? FbColors.faint : FbColors.ink)
.layoutWeight(1)
if (badge.length > 0) {
Text(badge)
.fontSize(FbMetric.fontTiny)
.fontColor(Color.White)
.backgroundColor(FbColors.red)
.borderRadius(FbMetric.radiusPill)
.padding({ left: 6, right: 6, top: 1, bottom: 1 })
}
}
.width('100%')
.padding({ left: 10, right: 10, top: 9, bottom: 9 })
.borderRadius(FbMetric.radiusS)
.onClick(() => {
if (route !== '') {
this.app.switchModule(route); // switchModule 内部会收起抽屉
}
})
}
/** 当前是否选中该模块 */
private isActive(key: string): boolean {
return this.app.activeModule === key;
@@ -250,7 +176,19 @@ export struct FbDrawer {
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
this.accountFooter()
/* 🔴 v61(用户 2026-10-19):「左侧抽屉,把通知消息、个人设置、
修改密码、系统设置,都去掉,放在个人设置页,就是在点击右侧头像那里。
消息通知不用放进去,直接在头像旁边那里就可以了。」
⇒ 原来这里的底部账号区(四行:通知消息 / 个人设置 /
修改密码 / 系统设置)**整块已删**:
· 通知 → 顶栏铃铛(一直在头像左边,比藏抽屉里近得多);
· 个人设置 / 修改密码 / 系统设置 → 点右上角头像进「个人设置」页。
⚠️ 抽屉现在是**纯模块导航**:品牌区 + 模块列表。
⚠️ 底部仍留手势条留白 —— 全屏布局下抽屉铺到屏幕最下沿,
最后一行的点击区贴着边缘容易被"从下往上滑"误触。 */
Column()
.width('100%')
.height(FB_BOTTOM_GAP)
}
.width(this.drawerW)
.height('100%')