122 lines
3.9 KiB
Plaintext
122 lines
3.9 KiB
Plaintext
|
/**
|
||
|
|
* 家书 FamilyBook · 顶栏（鸿蒙端）
|
||
|
|
*
|
||
|
|
* 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`，但按手机习惯调整：
|
||
|
|
* · 左：抽屉按钮（窄屏）／模块名（宽屏，此时抽屉常驻，不需要按钮）
|
||
|
|
* · 中：当前模块名 + 一句副标题（Web 端顶栏只放 logo + 导航，端上加副标题更清楚）
|
||
|
|
* · 右：通知铃铛（带未读角标）+ 头像（点开是账号菜单）
|
||
|
|
*
|
||
|
|
* ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在头像菜单里，
|
||
|
|
* 顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { FbColors, FbIcon, FbMetric } from '../common/Theme';
|
||
|
|
import { FbAppState, fbAppState } from '../common/Store';
|
||
|
|
import { fbModuleOf } from '../model/Modules';
|
||
|
|
import { FbAvatar } from './Widgets';
|
||
|
|
|
||
|
|
@ComponentV2
|
||
|
|
export struct FbTopBar {
|
||
|
|
@Param app: FbAppState = fbAppState();
|
||
|
|
/** 右侧额外操作（各模块页自己往里塞「新建」「搜索」等按钮） */
|
||
|
|
@BuilderParam actions: () => void;
|
||
|
|
|
||
|
|
build() {
|
||
|
|
// 顶部安全区由外层容器统一处理（见 Index.ets），这里只占视觉高度
|
||
|
|
Row({ space: 10 }) {
|
||
|
|
// ---- 左：窄屏显示抽屉按钮 ----
|
||
|
|
if (!this.app.wideLayout) {
|
||
|
|
Button({ type: ButtonType.Circle }) {
|
||
|
|
Image(FbIcon.ui('menu'))
|
||
|
|
.width(18)
|
||
|
|
.height(18)
|
||
|
|
.renderMode(ImageRenderMode.Template)
|
||
|
|
.fillColor(FbColors.ink)
|
||
|
|
}
|
||
|
|
.width(36)
|
||
|
|
.height(36)
|
||
|
|
.backgroundColor(Color.Transparent)
|
||
|
|
.onClick(() => {
|
||
|
|
this.app.drawerOpen = true;
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
Image($r('app.media.fb_logo'))
|
||
|
|
.width(28)
|
||
|
|
.height(28)
|
||
|
|
.borderRadius(8)
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- 中：当前模块名 ----
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
Text(this.moduleName())
|
||
|
|
.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 })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.alignItems(HorizontalAlign.Start)
|
||
|
|
.layoutWeight(1)
|
||
|
|
|
||
|
|
// ---- 右：各模块自己的操作 ----
|
||
|
|
this.actions()
|
||
|
|
|
||
|
|
// 通知铃铛（未读角标）
|
||
|
|
Stack({ alignContent: Alignment.TopEnd }) {
|
||
|
|
Button({ type: ButtonType.Circle }) {
|
||
|
|
Image(FbIcon.ui('bell'))
|
||
|
|
.width(18)
|
||
|
|
.height(18)
|
||
|
|
.renderMode(ImageRenderMode.Template)
|
||
|
|
.fillColor(FbColors.muted)
|
||
|
|
}
|
||
|
|
.width(36)
|
||
|
|
.height(36)
|
||
|
|
.backgroundColor(Color.Transparent)
|
||
|
|
.onClick(() => {
|
||
|
|
this.app.switchModule('__notifications');
|
||
|
|
})
|
||
|
|
|
||
|
|
if (this.app.unread > 0) {
|
||
|
|
Text(this.app.unread > 99 ? '99+' : this.app.unread.toString())
|
||
|
|
.fontSize(10)
|
||
|
|
.fontColor(Color.White)
|
||
|
|
.backgroundColor(FbColors.red)
|
||
|
|
.borderRadius(FbMetric.radiusPill)
|
||
|
|
.padding({ left: 5, right: 5, top: 1, bottom: 1 })
|
||
|
|
.margin({ top: 2, right: 0 })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 头像（点开账号菜单）
|
||
|
|
FbAvatar({
|
||
|
|
name: this.app.session.me.name,
|
||
|
|
color: this.app.session.me.avatarColor,
|
||
|
|
dia: 32,
|
||
|
|
fontSizeVp: 14
|
||
|
|
})
|
||
|
|
.margin({ left: 2 })
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.height(FbMetric.topBarH)
|
||
|
|
.padding({ left: 8, right: 10 })
|
||
|
|
.alignItems(VerticalAlign.Center)
|
||
|
|
.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 : '';
|
||
|
|
}
|
||
|
|
}
|