v0.1.0 界面框架：抽屉骨架 + 13 个模块页面
对应服务端 FamilyBook（家书）的鸿蒙客户端首版。本轮只做**界面框架**， 数据全部是演示数据 —— 服务端尚无客户端接口，所有增删改只做入口与样式， 不落任何数据。 ## 骨架 左侧抽屉 + 右侧内容。抽屉两套形态由窗口短边决定（≥600vp 为宽屏）： 宽屏常驻侧栏、窄屏滑出层。判据取「短边」而非「宽度」，因为短边在旋转时 不变，比例接近 1:1 的设备横竖屏布局天然一致。 ## 模块（与 Web 端 Module::LIST 一一对应，key 即路由名） 首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、 导航、笔记；另有通知消息、个人设置两个附加页。 ## 与 Web 端保持一致的几处 · 模块清单唯一来源在 model/Modules.ets，加模块只改那一处； · 模块主题色三档由主色按 HSL 压明度算出，预设色板与 Web 端逐值一致； · 术语沿用 Web 端固定下来的口径（旅程 ⊃ 行程；观影的「影院」不单独占 抽屉位，从模块内设置进）； · 页面结构照 Web 端的信息层次（首页信息面板 / 财务概览在账目之前 / 纪念日「即将到来」在顶 / 任务按状态而非按看板）。 ## 编译验证 hvigorw assembleHap --mode module -p product=default → BUILD SUCCESSFUL，0 error / 0 warning（含一次删 build 后的干净重建） 过程中修掉的编译期问题： · Circle().fill() 是 API 26 才有的重载（compatibleSdk 是 24） → 换「方块 + 圆角」画圆，零版本风险； · setWindowBackgroundColor 对 phone/tablet 不可用 → 去掉（页面已铺满同色）； · window.getLastWindow() 只有异步版 → 由 Ability 侧同步取窗存 AppStorage； · 颜色类 @Param 声明成 string 导致传 Resource 报错 → 统一改 ResourceColor； · 页面在 pages/<模块>/ 下，公共件 import 相对路径要多退一级。 （首轮编译 95 error / 18 warn，逐条定位到 5 类根因后归零。）
This commit is contained in:
@@ -0,0 +1,314 @@
|
||||
/**
|
||||
* 家书 FamilyBook · 纪念日模块（鸿蒙端）
|
||||
*
|
||||
* 对应 Web 端 `templates/days/index.php`。
|
||||
*
|
||||
* Web 端的结构：**「即将到来」横条在顶**（30 天内的纪念日，含名册里每个人的生日），
|
||||
* 下面是全部纪念日的列表（可按类别筛）。
|
||||
*
|
||||
* 端上照此，但把「即将到来」做成**大数字卡片**（还剩几天用大字），
|
||||
* 因为「还有几天」是这个模块唯一真正要一眼看到的信息。
|
||||
*/
|
||||
|
||||
import { FbColors, FbMetric } from '../../common/Theme';
|
||||
import { FbAppState, fbAppState } from '../../common/Store';
|
||||
import { FbAnniversaryItem, FbKinChip } from '../../model/Types';
|
||||
import { FB_DEMO_ANNIVERSARIES } from '../../model/DemoData';
|
||||
import { FbAvatar, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets';
|
||||
|
||||
@ComponentV2
|
||||
export struct FbDaysPage {
|
||||
@Param app: FbAppState = fbAppState();
|
||||
|
||||
/** 模块主题色（纪念日 = 陶土橙） */
|
||||
private accent: string = '#B4633C';
|
||||
private all: FbAnniversaryItem[] = FB_DEMO_ANNIVERSARIES;
|
||||
/** 类别筛选（'' = 全部） */
|
||||
@Local kindFilter: string = '';
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
// ---- 页头 ----
|
||||
Row({ space: 8 }) {
|
||||
Column({ space: 2 }) {
|
||||
Text('纪念日')
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Text('节日 / 纪念日 / 生日，都在这一条时间线上')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
|
||||
FbPrimaryButton({
|
||||
label: '添加',
|
||||
bg: this.accent,
|
||||
icon: $r('app.media.fb_ic_plus')
|
||||
})
|
||||
FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted })
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
Scroll() {
|
||||
Column({ space: 0 }) {
|
||||
|
||||
// ---- 即将到来（30 天内）----
|
||||
Column({ space: 0 }) {
|
||||
Row({ space: 8 }) {
|
||||
Text('即将到来')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Blank()
|
||||
Text('30 天内')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 4, right: 4, bottom: 10 })
|
||||
|
||||
if (this.upcoming().length === 0) {
|
||||
Text('三十天内没有纪念日')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
} else {
|
||||
// 横向排列的「大数字」卡
|
||||
Scroll() {
|
||||
Row({ space: 10 }) {
|
||||
ForEach(this.upcoming(), (a: FbAnniversaryItem) => {
|
||||
this.upcomingCard(a)
|
||||
}, (a: FbAnniversaryItem): string => 'up_' + a.id.toString())
|
||||
}
|
||||
}
|
||||
.scrollable(ScrollDirection.Horizontal)
|
||||
.scrollBar(BarState.Off)
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.padding(FbMetric.cardPad)
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
|
||||
// ---- 全部纪念日 ----
|
||||
Row({ space: 8 }) {
|
||||
this.kindChip('全部', '')
|
||||
this.kindChip('生日', 'birthday')
|
||||
this.kindChip('纪念日', 'anniversary')
|
||||
this.kindChip('节日', 'holiday')
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 14, bottom: 8 })
|
||||
|
||||
if (this.filtered().length === 0) {
|
||||
FbEmptyBox({
|
||||
title: '这里还没有纪念日',
|
||||
hint: '名册里填上生日，它就会自动出现在这儿',
|
||||
icon: $r('app.media.fb_ic_days')
|
||||
})
|
||||
} else {
|
||||
Column({ space: 0 }) {
|
||||
ForEach(this.filtered(), (a: FbAnniversaryItem, idx: number) => {
|
||||
this.annRow(a, idx === this.filtered().length - 1)
|
||||
}, (a: FbAnniversaryItem): string => 'ann_' + a.id.toString())
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, top: 4, bottom: 8 })
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 28 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.scrollBar(BarState.Off)
|
||||
.edgeEffect(EdgeEffect.Spring)
|
||||
.align(Alignment.TopStart)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor(FbColors.paper)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
|
||||
/** 即将到来的大数字卡 */
|
||||
@Builder
|
||||
upcomingCard(a: FbAnniversaryItem) {
|
||||
Column({ space: 4 }) {
|
||||
if (a.daysLeft === 0) {
|
||||
Text('今天')
|
||||
.fontSize(24)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(Color.White)
|
||||
} else {
|
||||
Row({ space: 1 }) {
|
||||
Text(a.daysLeft.toString())
|
||||
.fontSize(26)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(Color.White)
|
||||
Text('天')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor('#FFFFFFCC')
|
||||
.margin({ bottom: 4 })
|
||||
}
|
||||
.alignItems(VerticalAlign.Bottom)
|
||||
}
|
||||
|
||||
Text(a.title)
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(Color.White)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
Text(a.date)
|
||||
.fontSize(10)
|
||||
.fontColor('#FFFFFFB3')
|
||||
}
|
||||
.width(96)
|
||||
.padding(14)
|
||||
.backgroundColor(this.accent)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
|
||||
/** 一行纪念日：日期 + 标题 + 相关人 + 天数 */
|
||||
@Builder
|
||||
annRow(a: FbAnniversaryItem, isLast: boolean) {
|
||||
Column({ space: 0 }) {
|
||||
Row({ space: 12 }) {
|
||||
// 日期块
|
||||
Column({ space: 0 }) {
|
||||
Text(this.monthDay(a.date))
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Text(this.yearText(a.date))
|
||||
.fontSize(9)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width(52)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
|
||||
Column({ space: 4 }) {
|
||||
Row({ space: 6 }) {
|
||||
Text(a.title)
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.layoutWeight(1)
|
||||
FbTag({ text: this.kindName(a.kind), tone: this.kindTone(a.kind) })
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
// 相关人（生日才有）
|
||||
if (a.people.length > 0) {
|
||||
Row({ space: 6 }) {
|
||||
ForEach(a.people, (p: FbKinChip) => {
|
||||
Row({ space: 3 }) {
|
||||
FbAvatar({ name: p.shown, color: p.avatarColor, dia: 16, fontSizeVp: 9 })
|
||||
Text(p.shown)
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.muted)
|
||||
}
|
||||
.alignItems(VerticalAlign.Center)
|
||||
}, (p: FbKinChip): string => 'ap_' + a.id.toString() + '_' + p.id.toString())
|
||||
}
|
||||
}
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
|
||||
// 剩余天数
|
||||
Text(a.daysLeft === 0 ? '今天' : a.daysLeft.toString() + ' 天')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontWeight(a.daysLeft <= 7 ? FontWeight.Medium : FontWeight.Normal)
|
||||
.fontColor(a.daysLeft <= 7 ? this.accent : FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ top: 12, bottom: 12 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
if (!isLast) {
|
||||
Divider().color(FbColors.line2).margin({ left: 64 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
|
||||
@Builder
|
||||
kindChip(label: string, key: string) {
|
||||
Text(label)
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(this.kindFilter === key ? Color.White : FbColors.muted)
|
||||
.backgroundColor(this.kindFilter === key ? this.accent : FbColors.inputBg)
|
||||
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
|
||||
.borderRadius(FbMetric.radiusPill)
|
||||
.onClick(() => {
|
||||
this.kindFilter = key;
|
||||
})
|
||||
}
|
||||
|
||||
/** 'MM-DD' → '10-17'；'YYYY-MM-DD' → '11-08' */
|
||||
private monthDay(date: string): string {
|
||||
const parts: string[] = date.split('-');
|
||||
if (parts.length === 3) {
|
||||
return parts[1] + '-' + parts[2];
|
||||
}
|
||||
return date;
|
||||
}
|
||||
|
||||
/** 带年份的日期显示年份（如 '2019-11-08' → '2019'），不带则显示「每年」 */
|
||||
private yearText(date: string): string {
|
||||
const parts: string[] = date.split('-');
|
||||
if (parts.length === 3) {
|
||||
return parts[0];
|
||||
}
|
||||
return '每年';
|
||||
}
|
||||
|
||||
private kindName(kind: string): string {
|
||||
if (kind === 'birthday') {
|
||||
return '生日';
|
||||
}
|
||||
if (kind === 'holiday') {
|
||||
return '节日';
|
||||
}
|
||||
if (kind === 'solar_term') {
|
||||
return '节气';
|
||||
}
|
||||
return '纪念日';
|
||||
}
|
||||
|
||||
private kindTone(kind: string): string {
|
||||
if (kind === 'birthday') {
|
||||
return 'brand';
|
||||
}
|
||||
if (kind === 'holiday') {
|
||||
return 'red';
|
||||
}
|
||||
if (kind === 'solar_term') {
|
||||
return 'green';
|
||||
}
|
||||
return 'blue';
|
||||
}
|
||||
|
||||
private upcoming(): FbAnniversaryItem[] {
|
||||
return this.all.filter((a: FbAnniversaryItem): boolean => a.daysLeft <= 30);
|
||||
}
|
||||
|
||||
private filtered(): FbAnniversaryItem[] {
|
||||
if (this.kindFilter.length === 0) {
|
||||
return this.all;
|
||||
}
|
||||
return this.all.filter((a: FbAnniversaryItem): boolean => a.kind === this.kindFilter);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user