449 lines
15 KiB
Plaintext
449 lines
15 KiB
Plaintext
|
/**
|
||
|
|
* 家书 FamilyBook · 日程模块（鸿蒙端）
|
||
|
|
*
|
||
|
|
* 对应 Web 端 `templates/calendar/index.php`。Web 端是「月 / 周 / 天」三视图，
|
||
|
|
* 左侧的「我的日历本」那一栏已被用户要求撤掉、功能收进右侧设置 —— 端上照此：
|
||
|
|
* 日历占满宽度，日历本显隐 / 颜色 / 导入都在页头那个齿轮里。
|
||
|
|
*
|
||
|
|
* 端上保留了月视图（月历格子）与「选中日」的日程列表上下两块：
|
||
|
|
* 手机屏幕放不下「月历 + 当天时间轴」并排，上下排列最自然。
|
||
|
|
*
|
||
|
|
* ⚠️ 月历格子用 7 列 Grid，每格显示「日号 + 该日条目数的小点」。
|
||
|
|
* 真正的周/天时间轴视图（按半小时定位）建议放到第二轮做 —— 它需要
|
||
|
|
* 手势与拖动建日程，属于交互实现，不在本轮「先出界面」的范围。
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { FbColors, FbMetric, fbPalette } from '../../common/Theme';
|
||
|
|
import { FbAppState, fbAppState } from '../../common/Store';
|
||
|
|
import { FbCalBook, FbCalEvent } from '../../model/Types';
|
||
|
|
import { FB_DEMO_CAL_BOOKS, FB_DEMO_EVENTS_SOON, FB_DEMO_EVENTS_TODAY } from '../../model/DemoData';
|
||
|
|
import { FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton } from '../../components/Widgets';
|
||
|
|
|
||
|
|
/** 月历上「非本月」日期点的灰（hex 常量：格子数据结构里存的是字符串色，不能用 Resource） */
|
||
|
|
const FB_FAINT: string = '#A8988A';
|
||
|
|
const FB_MUTED: string = '#7E6B5A';
|
||
|
|
|
||
|
|
/** 月历格子（一个日期） */
|
||
|
|
interface FbCalCell {
|
||
|
|
/** 日期数字 */
|
||
|
|
day: number;
|
||
|
|
/** 是否属于当月 */
|
||
|
|
inMonth: boolean;
|
||
|
|
/** 是否今天 */
|
||
|
|
isToday: boolean;
|
||
|
|
/** 该日的事件数（0 不显示点） */
|
||
|
|
count: number;
|
||
|
|
/** 该日第一个事件的色（画小点用） */
|
||
|
|
dotColor: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
@ComponentV2
|
||
|
|
export struct FbCalendarPage {
|
||
|
|
@Param app: FbAppState = fbAppState();
|
||
|
|
|
||
|
|
/** 模块主题色（日程 = 琥珀） */
|
||
|
|
private accent: string = '#B0763A';
|
||
|
|
private books: FbCalBook[] = FB_DEMO_CAL_BOOKS;
|
||
|
|
private todayEvents: FbCalEvent[] = FB_DEMO_EVENTS_TODAY;
|
||
|
|
private soonEvents: FbCalEvent[] = FB_DEMO_EVENTS_SOON;
|
||
|
|
|
||
|
|
/** 当前显示的月份（首次进入取本月） */
|
||
|
|
@Local showYear: number = new Date().getFullYear();
|
||
|
|
@Local showMonth: number = new Date().getMonth() + 1;
|
||
|
|
/** 选中的日期（0 = 今天） */
|
||
|
|
@Local pickedDay: number = new Date().getDate();
|
||
|
|
|
||
|
|
private weekLabels: string[] = ['一', '二', '三', '四', '五', '六', '日'];
|
||
|
|
|
||
|
|
build() {
|
||
|
|
Column() {
|
||
|
|
// ---- 页头：月份 + 视图切换 + 新建 + 设置 ----
|
||
|
|
Row({ space: 8 }) {
|
||
|
|
Column({ space: 2 }) {
|
||
|
|
Text(this.showYear.toString() + ' 年 ' + this.showMonth.toString() + ' 月')
|
||
|
|
.fontSize(FbMetric.fontTitle)
|
||
|
|
.fontWeight(FontWeight.Medium)
|
||
|
|
.fontColor(FbColors.ink)
|
||
|
|
Text(this.visibleBooks().length.toString() + ' 本日历可见 · 本月 '
|
||
|
|
+ this.monthEventCount().toString() + ' 条')
|
||
|
|
.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 }) {
|
||
|
|
|
||
|
|
// ---- 月历卡 ----
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
// 月份切换条
|
||
|
|
Row() {
|
||
|
|
this.navBtn('上一月', -1)
|
||
|
|
Blank()
|
||
|
|
Text('今天')
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontColor(this.accent)
|
||
|
|
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
|
||
|
|
.backgroundColor(fbPalette(this.accent).brand + '14')
|
||
|
|
.borderRadius(FbMetric.radiusPill)
|
||
|
|
.onClick(() => {
|
||
|
|
const d: Date = new Date();
|
||
|
|
this.showYear = d.getFullYear();
|
||
|
|
this.showMonth = d.getMonth() + 1;
|
||
|
|
this.pickedDay = d.getDate();
|
||
|
|
})
|
||
|
|
Blank()
|
||
|
|
this.navBtn('下一月', 1)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ bottom: 10 })
|
||
|
|
|
||
|
|
// 星期表头
|
||
|
|
Row() {
|
||
|
|
ForEach(this.weekLabels, (w: string) => {
|
||
|
|
Text(w)
|
||
|
|
.fontSize(FbMetric.fontTiny)
|
||
|
|
.fontColor(FbColors.faint)
|
||
|
|
.layoutWeight(1)
|
||
|
|
.textAlign(TextAlign.Center)
|
||
|
|
}, (w: string): string => 'wk_' + w)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ bottom: 6 })
|
||
|
|
|
||
|
|
// 日期网格（7 列）
|
||
|
|
Grid() {
|
||
|
|
ForEach(this.cells(), (c: FbCalCell) => {
|
||
|
|
GridItem() {
|
||
|
|
this.dayCell(c)
|
||
|
|
}
|
||
|
|
}, (c: FbCalCell): string => 'cell_' + c.day.toString() + '_'
|
||
|
|
+ (c.inMonth ? '1' : '0'))
|
||
|
|
}
|
||
|
|
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
|
||
|
|
.rowsGap(2)
|
||
|
|
.width('100%')
|
||
|
|
.height(this.gridHeight())
|
||
|
|
.scrollBar(BarState.Off)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding(FbMetric.cardPad)
|
||
|
|
.backgroundColor(FbColors.surface)
|
||
|
|
.borderRadius(FbMetric.radius)
|
||
|
|
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad })
|
||
|
|
|
||
|
|
// ---- 日历本（可见的几本，横向排列当作图例）----
|
||
|
|
Column({ space: 10 }) {
|
||
|
|
Row({ space: 8 }) {
|
||
|
|
ForEach(this.visibleBooks(), (b: FbCalBook) => {
|
||
|
|
Row({ space: 5 }) {
|
||
|
|
FbDot({ dia: 7, fillC: b.color })
|
||
|
|
Text(b.name)
|
||
|
|
.fontSize(FbMetric.fontTiny)
|
||
|
|
.fontColor(FbColors.muted)
|
||
|
|
.maxLines(1)
|
||
|
|
}
|
||
|
|
.padding({ right: 10 })
|
||
|
|
}, (b: FbCalBook): string => 'book_' + b.id.toString())
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.alignItems(VerticalAlign.Center)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 12 })
|
||
|
|
.alignItems(HorizontalAlign.Start)
|
||
|
|
|
||
|
|
// ---- 选中日的日程 ----
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
Row() {
|
||
|
|
Text(this.pickedDay.toString() + ' 日')
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontWeight(FontWeight.Medium)
|
||
|
|
.fontColor(FbColors.ink)
|
||
|
|
Blank()
|
||
|
|
Text(this.todayEvents.length.toString() + ' 条日程')
|
||
|
|
.fontSize(FbMetric.fontTiny)
|
||
|
|
.fontColor(FbColors.faint)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
|
||
|
|
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
if (this.todayEvents.length === 0) {
|
||
|
|
FbEmptyBox({
|
||
|
|
title: '这天没有安排',
|
||
|
|
hint: '在月历里点一下某天，就能在那天加日程',
|
||
|
|
icon: $r('app.media.fb_ic_calendar')
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
ForEach(this.todayEvents, (ev: FbCalEvent, idx: number) => {
|
||
|
|
this.eventRow(ev, idx === this.todayEvents.length - 1)
|
||
|
|
}, (ev: FbCalEvent): string => 'cev_' + ev.id.toString())
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.backgroundColor(FbColors.surface)
|
||
|
|
.borderRadius(FbMetric.radius)
|
||
|
|
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
|
||
|
|
|
||
|
|
// ---- 未来七天 ----
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
Row() {
|
||
|
|
Text('未来七天')
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontWeight(FontWeight.Medium)
|
||
|
|
.fontColor(FbColors.ink)
|
||
|
|
Blank()
|
||
|
|
Text('共 ' + this.soonEvents.length.toString() + ' 条')
|
||
|
|
.fontSize(FbMetric.fontTiny)
|
||
|
|
.fontColor(FbColors.faint)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
|
||
|
|
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
ForEach(this.soonEvents, (ev: FbCalEvent, idx: number) => {
|
||
|
|
this.eventRow(ev, idx === this.soonEvents.length - 1)
|
||
|
|
}, (ev: FbCalEvent): string => 'sev_' + ev.id.toString())
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.backgroundColor(FbColors.surface)
|
||
|
|
.borderRadius(FbMetric.radius)
|
||
|
|
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, 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
|
||
|
|
navBtn(label: string, delta: number) {
|
||
|
|
Text(label)
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontColor(FbColors.muted)
|
||
|
|
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
|
||
|
|
.backgroundColor(FbColors.inputBg)
|
||
|
|
.borderRadius(FbMetric.radiusPill)
|
||
|
|
.onClick(() => {
|
||
|
|
let m: number = this.showMonth + delta;
|
||
|
|
let y: number = this.showYear;
|
||
|
|
if (m < 1) {
|
||
|
|
m = 12;
|
||
|
|
y = y - 1;
|
||
|
|
} else if (m > 12) {
|
||
|
|
m = 1;
|
||
|
|
y = y + 1;
|
||
|
|
}
|
||
|
|
this.showMonth = m;
|
||
|
|
this.showYear = y;
|
||
|
|
this.pickedDay = 0;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 一个日期格子 */
|
||
|
|
@Builder
|
||
|
|
dayCell(c: FbCalCell) {
|
||
|
|
Column({ space: 3 }) {
|
||
|
|
Text(c.day.toString())
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontWeight(c.isToday || c.day === this.pickedDay ? FontWeight.Medium : FontWeight.Normal)
|
||
|
|
.fontColor(c.isToday
|
||
|
|
? Color.White
|
||
|
|
: (c.inMonth ? FbColors.ink : FbColors.faint))
|
||
|
|
.width(26)
|
||
|
|
.height(26)
|
||
|
|
.textAlign(TextAlign.Center)
|
||
|
|
.borderRadius(13)
|
||
|
|
.backgroundColor(c.isToday
|
||
|
|
? this.accent
|
||
|
|
: (c.day === this.pickedDay && c.inMonth
|
||
|
|
? fbPalette(this.accent).brand + '1F'
|
||
|
|
: Color.Transparent))
|
||
|
|
|
||
|
|
// 事件小点（最多 3 个）
|
||
|
|
Row({ space: 2 }) {
|
||
|
|
if (c.count > 0) {
|
||
|
|
ForEach(this.dots(c.count), (i: number) => {
|
||
|
|
FbDot({ dia: 4, fillC: c.dotColor })
|
||
|
|
}, (i: number): string => 'dot_' + c.day.toString() + '_' + i.toString())
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.height(5)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.height(44)
|
||
|
|
.justifyContent(FlexAlign.Center)
|
||
|
|
.alignItems(HorizontalAlign.Center)
|
||
|
|
.onClick(() => {
|
||
|
|
this.pickedDay = c.day;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 一条日程行：时间 + 色点 + 标题 + 日历本标签 */
|
||
|
|
@Builder
|
||
|
|
eventRow(ev: FbCalEvent, isLast: boolean) {
|
||
|
|
Column({ space: 0 }) {
|
||
|
|
Row({ space: 10 }) {
|
||
|
|
Text(ev.allDay ? '全天' : ev.time)
|
||
|
|
.fontSize(FbMetric.fontTiny)
|
||
|
|
.fontColor(FbColors.muted)
|
||
|
|
.width(44)
|
||
|
|
FbDot({ dia: 8, fillC: ev.color })
|
||
|
|
Text(ev.title)
|
||
|
|
.fontSize(FbMetric.fontSmall)
|
||
|
|
.fontColor(FbColors.ink)
|
||
|
|
.layoutWeight(1)
|
||
|
|
.maxLines(1)
|
||
|
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||
|
|
Text(ev.calName)
|
||
|
|
.fontSize(10)
|
||
|
|
.fontColor(Color.White)
|
||
|
|
.backgroundColor(ev.color)
|
||
|
|
.borderRadius(4)
|
||
|
|
.padding({ left: 5, right: 5, top: 1, bottom: 1 })
|
||
|
|
.maxLines(1)
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
.padding({ top: 11, bottom: 11 })
|
||
|
|
.alignItems(VerticalAlign.Center)
|
||
|
|
|
||
|
|
if (!isLast) {
|
||
|
|
Divider()
|
||
|
|
.color(FbColors.line2)
|
||
|
|
.margin({ left: 54 })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.width('100%')
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 只列「显示着的」日历本（与 Web 端 Calendar::hiddenCalendars 的反面同口径） */
|
||
|
|
private visibleBooks(): FbCalBook[] {
|
||
|
|
return this.books.filter((b: FbCalBook): boolean => b.visible);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 本月事件数（演示数据里用未来七天 + 今天的条数代表示意） */
|
||
|
|
private monthEventCount(): number {
|
||
|
|
return this.todayEvents.length + this.soonEvents.length;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 造「点」的索引数组（ForEach 需要数组，不能直接循环次数） */
|
||
|
|
private dots(count: number): number[] {
|
||
|
|
const n: number = Math.min(3, count);
|
||
|
|
const out: number[] = [];
|
||
|
|
for (let i = 0; i < n; i++) {
|
||
|
|
out.push(i);
|
||
|
|
}
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 网格高度 = 行数 × 行高（6 行时 6×46） */
|
||
|
|
private gridHeight(): number {
|
||
|
|
const rows: number = Math.ceil(this.cells().length / 7);
|
||
|
|
return rows * 46;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生成当月月历格子。
|
||
|
|
*
|
||
|
|
* 周一起始（与 Web 端一致 —— 中文日历习惯周一为第一列）。
|
||
|
|
*/
|
||
|
|
private cells(): FbCalCell[] {
|
||
|
|
const out: FbCalCell[] = [];
|
||
|
|
const y: number = this.showYear;
|
||
|
|
const m: number = this.showMonth;
|
||
|
|
|
||
|
|
const first: Date = new Date(y, m - 1, 1);
|
||
|
|
// JS 的 getDay(): 0=周日 … 6=周六 ⇒ 换算成「周一为 0」
|
||
|
|
const lead: number = (first.getDay() + 6) % 7;
|
||
|
|
const daysInMonth: number = new Date(y, m, 0).getDate();
|
||
|
|
const prevDays: number = new Date(y, m - 1, 0).getDate();
|
||
|
|
|
||
|
|
const now: Date = new Date();
|
||
|
|
const isThisMonth: boolean = now.getFullYear() === y && (now.getMonth() + 1) === m;
|
||
|
|
|
||
|
|
// 前置：上月的尾巴
|
||
|
|
for (let i = lead - 1; i >= 0; i--) {
|
||
|
|
out.push({
|
||
|
|
day: prevDays - i,
|
||
|
|
inMonth: false,
|
||
|
|
isToday: false,
|
||
|
|
count: 0,
|
||
|
|
dotColor: FB_MUTED
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 本月
|
||
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
||
|
|
const cnt: number = this.eventCountOf(d, isThisMonth);
|
||
|
|
out.push({
|
||
|
|
day: d,
|
||
|
|
inMonth: true,
|
||
|
|
isToday: isThisMonth && now.getDate() === d,
|
||
|
|
count: cnt,
|
||
|
|
dotColor: cnt > 0 ? this.accent : FB_FAINT
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 补齐到整周（补下月的头）
|
||
|
|
const tail: number = (7 - (out.length % 7)) % 7;
|
||
|
|
for (let d = 1; d <= tail; d++) {
|
||
|
|
out.push({
|
||
|
|
day: d,
|
||
|
|
inMonth: false,
|
||
|
|
isToday: false,
|
||
|
|
count: 0,
|
||
|
|
dotColor: FB_FAINT
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return out;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 某天的日程条数（演示数据：今天取 todayEvents，其余从 soonEvents 的 'MM-DD' 匹配） */
|
||
|
|
private eventCountOf(day: number, isThisMonth: boolean): number {
|
||
|
|
if (!isThisMonth) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
const now: Date = new Date();
|
||
|
|
if (now.getDate() === day) {
|
||
|
|
return this.todayEvents.length;
|
||
|
|
}
|
||
|
|
const mm: string = this.showMonth < 10
|
||
|
|
? '0' + this.showMonth.toString()
|
||
|
|
: this.showMonth.toString();
|
||
|
|
const dd: string = day < 10 ? '0' + day.toString() : day.toString();
|
||
|
|
const key: string = mm + '-' + dd;
|
||
|
|
let n: number = 0;
|
||
|
|
for (const ev of this.soonEvents) {
|
||
|
|
if (ev.date === key) {
|
||
|
|
n++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return n;
|
||
|
|
}
|
||
|
|
}
|