laoyang/SyncCalendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改了日程的样式显示，现在按照时间轴显示。

Browse Source 
Signed-off-by: Yang Yongquan <i@yangyq.net>
This commit is contained in:
laoyang
2026-09-14 21:28:51 +08:00
parent df3928c099
commit c04a9a28cf
14 changed files with 2425 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entry/src/main/ets/pages/AccountsPage.ets
+7 -63
View File
@@ -3,7 +3,7 @@
import { router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { DavAccount, AccountStore, TYPE_KEYS, TYPE_CALDAV, TYPE_CARDDAV, TYPE_WEBDAV } from '../common/AccountStore';
import { DavAccount, AccountStore, TYPE_KEYS, TYPE_CALDAV, TYPE_CARDDAV } from '../common/AccountStore';
import { SyncEngine } from '../common/SyncEngine';
import { EditNavParams } from './EditAccountPage';
import { EventDb } from '../common/EventDb';
@@ -15,7 +15,6 @@ import { ScreenKeeper } from '../common/ScreenKeeper';
@Component
struct AccountsPage {
@State accounts: DavAccount[] = [];
@State showTypeMenu: boolean = false;
@State syncing: boolean = false;
@State syncingId: string = '';
@@ -103,9 +102,9 @@ struct AccountsPage {
}
}
private openAddPage(type: string): void {
this.showTypeMenu = false;
AppStorage.setOrCreate<string>('pendingAccountType', type);
private openAddPage(): void {
// 目前只支持 CalDAV：点 + 直接进入添加 CalDAV 账号页（不再弹类型选择菜单）
AppStorage.setOrCreate<string>('pendingAccountType', TYPE_CALDAV);
router.pushUrl({ url: 'pages/AddAccountPage' });
}
@@ -230,29 +229,6 @@ struct AccountsPage {
.height('100%')
.backgroundColor($r('app.color.page_bg'))
if (this.showTypeMenu) {
Column()
.width('100%')
.height('100%')
.onClick(() => {
this.showTypeMenu = false;
})
}
if (this.showTypeMenu) {
Column({ space: 10 }) {
this.menuItem('日', 'CalDAV', '日历同步', TYPE_CALDAV)
this.menuItem('人', 'CardDAV', '通讯录同步', TYPE_CARDDAV)
this.menuItem('文', 'WebDAV', '文件访问', TYPE_WEBDAV)
}
.width(220)
.padding(10)
.borderRadius(16)
.backgroundColor($r('app.color.card_bg'))
.shadow({ radius: 16, color: $r('app.color.shadow_color'), offsetX: 0, offsetY: 4 })
.margin({ right: 24, bottom: 156 })
}
Button() {
Text('＋')
.fontSize(26)
@@ -266,7 +242,7 @@ struct AccountsPage {
.shadow({ radius: 8, color: $r('app.color.shadow_color'), offsetX: 0, offsetY: 2 })
.margin(24)
.onClick(() => {
this.showTypeMenu = !this.showTypeMenu;
this.openAddPage();
})
}
.width('100%')
@@ -285,11 +261,11 @@ struct AccountsPage {
.borderRadius(20)
.backgroundColor($r('app.color.card_bg'))
.border({ width: 1.5, color: $r('app.color.shadow_color') })
Text('还没有任何 DAV 账号')
Text('还没有任何 CalDAV 账号')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.text_primary'))
Text('点击右下角 + 添加 CalDAV / CardDAV / WebDAV 账号')
Text('点击右下角 + 添加 CalDAV 账号')
.fontSize(13)
.fontColor($r('app.color.text_secondary'))
.textAlign(TextAlign.Center)
@@ -298,38 +274,6 @@ struct AccountsPage {
.layoutWeight(1)
.justifyContent(FlexAlign.Center)
}
@Builder
menuItem(badge: string, title: string, desc: string, type: string) {
Row({ space: 12 }) {
Text(badge)
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.brand'))
.width(40)
.height(40)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor($r('app.color.input_bg'))
Column({ space: 2 }) {
Text(title)
.fontSize(15)
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.text_primary'))
Text(desc)
.fontSize(12)
.fontColor($r('app.color.text_secondary'))
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
}
.width('100%')
.padding(8)
.borderRadius(10)
.onClick(() => {
this.openAddPage(type);
})
}
}
@Component
entry/src/main/ets/pages/Index.ets
+664 -248
View File
File diff suppressed because it is too large Load Diff
entry/src/main/ets/pages/SettingsPage.ets
+58 -2
View File
@@ -32,6 +32,7 @@ struct SettingsPage {
@State notifyEnabled: boolean = true; // 通知权限状态（提醒依赖）
@State showFeatures: boolean = false; // 软件特性弹层
@State showHelp: boolean = false; // 使用帮助弹层
@State defaultView: string = 'month'; // 打开 App 默认视图：month | week | agenda
private context?: common.Context;
aboutToAppear(): void {
@@ -58,6 +59,9 @@ struct SettingsPage {
AppSettings.getMutedReminderKeys(ctx).then((v: string[]): void => {
this.mutedKeys = v;
});
AppSettings.getDefaultView(ctx).then((v: string): void => {
this.defaultView = v;
});
this.refreshNotifyState();
this.loadBackupSettings();
this.loadAllBooks();
@@ -205,8 +209,7 @@ struct SettingsPage {
.showToast({ message: '备份目标已更新，下次同步生效' });
}
private async saveShowSystem(value: boolean): Promise<void> {
if (this.context === undefined) {
private async saveShowSystem(value: boolean): Promise<void> { if (this.context === undefined) {
return;
}
await AppSettings.setShowSystemCalendar(this.context, value);
@@ -244,6 +247,22 @@ struct SettingsPage {
}
}
private async saveDefaultView(view: string): Promise<void> {
if (this.context === undefined) {
return;
}
this.defaultView = view;
await AppSettings.setDefaultView(this.context, view);
const label: string = view === 'month' ? '月视图' : (view === 'week' ? '周视图' : '列表视图');
this.getUIContext().getPromptAction()
.showToast({ message: `默认视图已设为「${label}」，下次打开 App 生效` });
}
private defaultViewLabel(): string {
return this.defaultView === 'month' ? '月视图'
: (this.defaultView === 'week' ? '周视图' : '列表视图');
}
private intervalLabel(minutes: number): string {
return minutes >= 60 ? `${minutes / 60} 小时` : `${minutes} 分钟`;
}
@@ -390,6 +409,43 @@ struct SettingsPage {
.backgroundColor($r('app.color.card_bg'))
.border({ width: 1, color: $r('app.color.shadow_color') })
// 默认视图：打开 App 后默认展示的视图（月/周/列表）
Column({ space: 8 }) {
Row({ space: 10 }) {
Column({ space: 2 }) {
Text('默认视图')
.fontSize(15)
.fontWeight(FontWeight.Medium)
.fontColor($r('app.color.text_primary'))
Text('打开 App 后默认展示的视图（月 / 周 / 列表）')
.fontSize(12)
.fontColor($r('app.color.text_secondary'))
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
Select([{ value: '月视图' }, { value: '周视图' }, { value: '列表视图' }] as SelectOption[])
.selected(this.defaultView === 'month' ? 0 : (this.defaultView === 'week' ? 1 : 2))
.value(this.defaultViewLabel())
.fontColor($r('app.color.text_primary'))
.font({ size: 14 })
.optionFont({ size: 14 })
.selectedOptionFont({ size: 14 })
.onSelect((index: number) => {
const v: string = index === 0 ? 'month' : (index === 1 ? 'week' : 'agenda');
if (v !== this.defaultView) {
this.saveDefaultView(v);
}
})
}
.width('100%')
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.padding(14)
.borderRadius(12)
.backgroundColor($r('app.color.card_bg'))
.border({ width: 1, color: $r('app.color.shadow_color') })
// 数据修复：手动触发一次性全量重拉（重建提醒等本地残缺字段）
Column({ space: 8 }) {
Row({ space: 10 }) {
entry/src/main/ets/pages/widget/Widget2x2.ets
+2 -10
View File
@@ -11,7 +11,6 @@ struct Widget2x2Card {
@LocalStorageProp('dateMd') dateMd: string = '';
@LocalStorageProp('weekday') weekday: string = '';
@LocalStorageProp('todayCount') todayCount: number = 0;
@LocalStorageProp('ongoingCount') ongoingCount: number = 0; // 此刻正在进行的日程条数
/** 右上角添加按钮：拉起 App 直接进入新建日程页（阻止冒泡，避免同时打开 App 首页） */
@Builder
@@ -80,16 +79,9 @@ struct Widget2x2Card {
.fontColor('#007DFF')
Column({ space: 2 }) {
Row({ space: 4 }) {
if (this.ongoingCount > 0) {
Column()
.width(8)
.height(8)
.borderRadius(4)
.backgroundColor('#FF3B30')
}
Text(this.ongoingCount > 0 ? `进行中 ${this.ongoingCount}` : '今日日程')
Text('今日日程')
.fontSize(12)
.fontColor(this.ongoingCount > 0 ? '#FF3B30' : '#1A1A1A')
.fontColor('#1A1A1A')
}
Text(this.todayCount === 0 ? '点击添加' : '点击查看')
.fontSize(10)
entry/src/main/ets/pages/widget/Widget4x2.ets
+24 -60
View File
@@ -1,6 +1,7 @@
// entry/src/main/ets/pages/widget/Widget4x2.ets
// 2x4 服务卡片：2x2 的横向扩展。左侧 = 日期/星期/农历 + 今日日程条数（与 2x2 一致）；
// 右侧 = 当前正在进行（或下一个）的 1~3 条日程，不做滚动；整卡点击进入 App，右上角 ＋ 直接新建日程
// 右侧 = **当前时间之后最近的两条**日程（不含全天/跨天，不显示"进行中"等字样，不显示日历本名）；
// 整卡点击进入 App，右上角 ＋ 直接新建日程
let storage2x4 = new LocalStorage();
/** 与 eventsJson 同结构的卡片单条日程（本卡片只用到标题/时间/日历色/进行中标记） */
@@ -21,14 +22,13 @@ struct Widget4x2Card {
@LocalStorageProp('weekday') weekday: string = '';
@LocalStorageProp('lunarText') lunarText: string = '';
@LocalStorageProp('todayCount') todayCount: number = 0;
@LocalStorageProp('ongoingCount') ongoingCount: number = 0;
@LocalStorageProp('ongoingJson') ongoingJson: string = '[]';
/** 右侧最多渲染 3 条（数据侧已裁剪，这里再兜底截断） */
/** 右侧最多渲染 2 条（数据侧已裁剪，这里再兜底截断） */
private parseOngoing(): CardItem2x4[] {
try {
const all: CardItem2x4[] = JSON.parse(this.ongoingJson) as CardItem2x4[];
return all.slice(0, 3);
return all.slice(0, 2);
} catch (err) {
return [];
}
@@ -66,20 +66,21 @@ struct Widget4x2Card {
});
}
/** 右侧"正在进行 / 下一个"单条：左色竖条 + 时间列 + 标题 + 日历本名；进行中用红色高亮 */
/** 右侧单条：左色竖条 + 起止时间 + 标题。
* 不显示"进行中 / 即将开始"字样，也不显示日历本名 */
@Builder
ongoingRow(item: CardItem2x4) {
Row({ space: 7 }) {
Row({ space: 8 }) {
Column()
.width(3)
.height(34)
.height(40)
.borderRadius(2)
.backgroundColor(item.isNow ? '#FF3B30' : item.color)
.backgroundColor(item.color)
Column({ space: 2 }) {
Text(item.time)
.fontSize(9)
.fontSize(10)
.fontWeight(FontWeight.Medium)
.fontColor(item.isNow ? '#FF3B30' : '#333333')
.fontColor('#333333')
.maxLines(1)
if (item.endTime !== '' && item.endTime !== '全天') {
Text(item.endTime)
@@ -88,50 +89,20 @@ struct Widget4x2Card {
.maxLines(1)
}
}
.width(34)
.alignItems(HorizontalAlign.Start)
Column({ space: 2 }) {
Text(item.title)
.fontSize(12)
.fontWeight(item.isNow ? FontWeight.Medium : FontWeight.Normal)
.fontColor(item.isNow ? '#FF3B30' : '#1A1A1A')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width('100%')
Row({ space: 4 }) {
if (item.isNow) {
Text('● 进行中')
.fontSize(8)
.fontColor('#FF3B30')
.padding({ left: 4, right: 4, top: 0, bottom: 0 })
.borderRadius(4)
.backgroundColor('#FFECEA')
} else {
Text('即将开始')
.fontSize(8)
.fontColor('#8A8A8A')
.padding({ left: 4, right: 4, top: 0, bottom: 0 })
.borderRadius(4)
.backgroundColor('#F0F1F3')
}
if (item.calName !== '') {
Text(item.calName)
.fontSize(8)
.fontColor(item.color)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: '55%' })
}
}
}
.layoutWeight(1)
.width(36)
.alignItems(HorizontalAlign.Start)
Text(item.title)
.fontSize(13)
.fontColor('#1A1A1A')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
}
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ left: 7, right: 7, top: 4, bottom: 4 })
.padding({ left: 8, right: 8, top: 5, bottom: 5 })
.borderRadius(8)
.backgroundColor(item.isNow ? '#FFF5F4' : '#F5F7FA')
.backgroundColor('#F5F7FA')
}
/** 右侧空态：今日无日程 / 日程已全部结束 */
@@ -187,16 +158,9 @@ struct Widget4x2Card {
.fontColor('#007DFF')
Column({ space: 2 }) {
Row({ space: 4 }) {
if (this.ongoingCount > 0) {
Column()
.width(7)
.height(7)
.borderRadius(4)
.backgroundColor('#FF3B30')
}
Text(this.ongoingCount > 0 ? `进行中 ${this.ongoingCount}` : '今日日程')
Text('今日日程')
.fontSize(11)
.fontColor(this.ongoingCount > 0 ? '#FF3B30' : '#1A1A1A')
.fontColor('#1A1A1A')
.maxLines(1)
}
Text(this.todayCount === 0 ? '点击添加' : '点击查看')
@@ -220,12 +184,12 @@ struct Widget4x2Card {
.strokeWidth(0.5)
.color('#E5E5E5')
// ===== 右半：正在进行 / 下一个（不滚动，最多 3 条）=====
// ===== 右半：当前时间之后最近的两条日程（不滚动）=====
Column() {
if (this.parseOngoing().length === 0) {
this.emptyHint()
} else {
Column({ space: 5 }) {
Column({ space: 6 }) {
ForEach(this.parseOngoing(), (item: CardItem2x4, idx: number) => {
this.ongoingRow(item)
}, (item: CardItem2x4, idx: number) => `${idx}_${item.title}_${item.time}`)
entry/src/main/ets/pages/widget/Widget4x4.ets
+585 -183
View File
@@ -1,39 +1,369 @@
// entry/src/main/ets/pages/widget/Widget4x4.ets
// 4x4 服务卡片：日期 + 农历 + 从今天开始的日程（时间轴样式，按天分组，可滑动）
// 4x4 服务卡片：今日时间轴 —— 与 6x4 完全同一套逻辑，只是尺寸更小：
// · 用 List 包一个"很高的 ListItem"（整日时间轴按真实 vp 高度撑开）→ 卡片内可以上下滑动
// （官方卡片能力清单里 List / ListItem 支持，Scroll 与 Scroller 不支持）
// · 视窗截断：只渲染"最早日程 ~ 最晚日程（+ 当前时刻）"这一段，避免上下大片空白
// · 三层堆叠：网格层 / 日程层 / 红线层，色块永不被切割
// · 贪心分列：列数 = 最大同时重叠数
// · 全天日程同样用色块展示
// ListItem 内必须用**确定 vp 高度**（不能再用百分比，否则撑不开 → 无法滚动）。
let storage4x4 = new LocalStorage();
class CardItem4x4 {
/** 时间轴色块（与 common/TimelineUtil.TimelineBlock 结构一致，卡片侧只渲染需要的字段） */
class TBlock {
eventKey: string = '';
title: string = '';
time: string = '';
endTime: string = '';
date: string = '';
showDate: boolean = false;
calName: string = '';
timeText: string = '';
color: string = '#007DFF';
// 红线：startMs/endMs 实际起止；showNowLine 上方画红线；isNow 正在进行；nowLineBelow 画在底部
startMs: number = 0;
endMs: number = 0;
showNowLine: boolean = false;
topRatio: number = 0;
heightRatio: number = 0;
leftRatio: number = 0;
widthRatio: number = 1;
groupIndex: number = 0;
isNow: boolean = false;
nowLineBelow: boolean = false;
}
/** 全天日程（eventKey 由 CardDataService 写入，用于 ForEach 唯一标识） */
class TAllDay {
eventKey: string = '';
title: string = '';
color: string = '#007DFF';
isAllDay: boolean = true;
}
/** 冲突组：组内**贪心分列**，lanes[i] = 第 i 列（同列互不重叠） */
class TGroup4 {
startRatio: number = 0;
endRatio: number = 0;
laneCount: number = 1;
blocks: TBlock[] = [];
lanes: TBlock[][] = [];
}
/** 日程层纵向序列中的一行：空隙 / 冲突组（线都在其它两层） */
class T4Row {
kind: number = 0; // 0=空隙 1=冲突组
from: number = 0;
to: number = 0;
group: TGroup4 = new TGroup4();
key: string = '';
}
/** 视窗范围（小时） */
class W4Range {
s: number = 0;
e: number = 0;
}
/** 每 1 小时的高度（vp）。整日 24h × 36 = 864vp，远超卡片高度 → 可以滑动 */
const W4_HOUR: number = 36;
/** 全天日程最多显示条数（超出折叠为"还有 N 个"） */
const W4_ALLDAY_MAX: number = 2;
/** 左侧刻度占宽 */
const W4_GUTTER: number = 26;
/** 全天色块单条高度 / 间距 */
const W4_ALLDAY_H: number = 18;
@Entry(storage4x4)
@Component
struct Widget4x4Card {
@LocalStorageProp('eventsJson') eventsJson: string = '[]';
@LocalStorageProp('dateText') dateText: string = '';
@LocalStorageProp('dateMd') dateMd: string = '';
@LocalStorageProp('lunarText') lunarText: string = '';
@LocalStorageProp('timelineJson') timelineJson: string = '[]';
@LocalStorageProp('allDayJson') allDayJson: string = '[]';
@LocalStorageProp('nowRatio') nowRatio: number = 0;
@LocalStorageProp('nowLabel') nowLabel: string = '';
@LocalStorageProp('todayCount') todayCount: number = 0;
@LocalStorageProp('isToday') isToday: boolean = true;
@LocalStorageProp('dayCount') dayCount: number = 0;
private parseItems(): CardItem4x4[] {
private parseBlocks(): TBlock[] {
try {
return JSON.parse(this.eventsJson) as CardItem4x4[];
return JSON.parse(this.timelineJson) as TBlock[];
} catch (err) {
return [];
}
}
/** 右上角添加按钮：拉起 App 直接进入新建日程页（阻止冒泡，避免同时打开 App 首页） */
/** 当前时间比例（无效返回 -1） */
private w4NowR(): number {
return (this.nowRatio > 0.001 && this.nowRatio < 0.999) ? this.nowRatio : -1;
}
private w4IsNowHour(h: number): boolean {
const r: number = this.w4NowR();
return r >= 0 && Math.floor(r * 24) === h;
}
/** 视窗范围：最早日程 ~ 最晚日程结束（今天再并入当前时刻）。
* 不做"最大跨度截断" —— 现在可以滑动了，没必要砍掉日程。 */
private w4Range(): W4Range {
const rg = new W4Range();
const bs: TBlock[] = this.parseBlocks();
let s: number = -1;
let e: number = -1;
for (const b of bs) {
const bh: number = Math.floor(b.topRatio * 24);
const eh: number = Math.ceil((b.topRatio + b.heightRatio) * 24 - 0.0001);
if (s < 0 || bh < s) {
s = bh;
}
if (e < 0 || eh > e) {
e = eh;
}
}
const r: number = this.w4NowR();
// 只有"今天 + 还有未结束的定时日程"时才把当前小时并入视窗（红线会显示）；
// 定时日程已全部结束 → 不并入 → 时间刻度直接截断到最晚日程
const nh: number = (r >= 0 && !this.w4AllTimedEnded()) ? Math.floor(r * 24) : -1;
if (s < 0) {
s = nh >= 0 ? nh : 8;
}
if (e < 0) {
e = nh >= 0 ? nh + 1 : 20;
}
if (nh >= 0) {
if (nh < s) {
s = nh;
}
if (nh + 1 > e) {
e = nh + 1;
}
}
if (s < 0) {
s = 0;
}
if (e > 24) {
e = 24;
}
if (e <= s) {
e = s + 1 > 24 ? 24 : s + 1;
}
rg.s = s;
rg.e = e;
return rg;
}
private w4StartHour(): number {
return this.w4Range().s;
}
private w4EndHour(): number {
return this.w4Range().e;
}
/** 视窗跨度（小时） */
private w4Span(): number {
return this.w4EndHour() - this.w4StartHour();
}
/** 时间轴内容总高（vp）= 跨度 × 每小时高度 */
private w4ContentH(): number {
return this.w4Span() * W4_HOUR;
}
/** 一段（起止为当日比例）换算成 vp 高度 */
private w4SpanVp(from: number, to: number): number {
const v: number = (to - from) * 24 * W4_HOUR;
return v > 0 ? v : 0;
}
/** 全天区高度（vp），没有全天日程时为 0 */
private w4AllDayH(): number {
const n: number = this.w4AllDay().length;
if (n === 0) {
return 0;
}
let h: number = n * W4_ALLDAY_H;
if (this.w4AllDayRest() > 0) {
h += 13;
}
return h + 4;
}
/** ListItem 总高（vp）= 全天区 + 时间轴 */
private w4ItemH(): number {
return this.w4AllDayH() + this.w4ContentH();
}
/** 由色块重建冲突分组：组内按开始时间升序做**贪心分列**（列数 = 最大同时重叠数） */
private w4Groups(): TGroup4[] {
const map: Map<number, TBlock[]> = new Map<number, TBlock[]>();
for (const b of this.parseBlocks()) {
const arr: TBlock[] | undefined = map.get(b.groupIndex);
if (arr === undefined) {
map.set(b.groupIndex, [b]);
} else {
arr.push(b);
}
}
const idxs: number[] = Array.from(map.keys()).sort((a: number, b: number): number => a - b);
const out: TGroup4[] = [];
for (const gi of idxs) {
const bs: TBlock[] = map.get(gi) ?? [];
bs.sort((a: TBlock, b: TBlock): number => {
if (a.topRatio !== b.topRatio) {
return a.topRatio - b.topRatio;
}
return b.heightRatio - a.heightRatio;
});
const lanes: TBlock[][] = [];
const laneEnd: number[] = [];
for (const b of bs) {
let li: number = -1;
for (let i = 0; i < laneEnd.length; i++) {
if (laneEnd[i] <= b.topRatio + 0.0000001) {
li = i;
break;
}
}
const be: number = b.topRatio + b.heightRatio;
if (li < 0) {
li = lanes.length;
lanes.push([b]);
laneEnd.push(be);
} else {
lanes[li].push(b);
laneEnd[li] = be;
}
}
const g = new TGroup4();
g.blocks = bs;
g.lanes = lanes;
g.laneCount = lanes.length > 0 ? lanes.length : 1;
let s: number = 1;
let e: number = 0;
for (const b of bs) {
if (b.topRatio < s) {
s = b.topRatio;
}
const be: number = b.topRatio + b.heightRatio;
if (be > e) {
e = be;
}
}
g.startRatio = s;
g.endRatio = e;
out.push(g);
}
return out;
}
/** 日程层纵向序列：空隙 / 冲突组（不含任何"线"） */
private w4Rows(): T4Row[] {
const rows: T4Row[] = [];
const gs: TGroup4[] = this.w4Groups();
const top: number = this.w4StartHour() / 24;
const bot: number = this.w4EndHour() / 24;
let cursor: number = top;
for (const g of gs) {
const gsx: number = g.startRatio > top ? g.startRatio : top;
const gex: number = g.endRatio < bot ? g.endRatio : bot;
if (gex - gsx <= 0.0002) {
continue;
}
this.w4Push(rows, cursor, gsx, null);
this.w4Push(rows, gsx, gex, g);
cursor = gex;
}
this.w4Push(rows, cursor, bot, null);
return rows;
}
private w4Push(rows: T4Row[], from: number, to: number, g: TGroup4 | null): void {
if (to - from <= 0.0002) {
return;
}
const r = new T4Row();
r.from = from;
r.to = to;
if (g === null) {
r.kind = 0;
r.key = `g_${rows.length}_${Math.round((to - from) * 100000)}`;
} else {
r.kind = 1;
r.group = g;
// key 必须绑定"内容"：翻页后行序号不变、只有内容变了；
// 若只用序号，ArkUI 会认为是同一批元素而不重绘 → 残留上一天的数据
r.key = `b_${rows.length}_${this.w4GroupKey(g, from, to)}`;
}
rows.push(r);
}
/** 冲突组的内容签名（时间窗 + 各块 eventKey），供 ForEach key 使用 */
private w4GroupKey(g: TGroup4, from: number, to: number): string {
let sig: string = `${Math.round(from * 100000)}_${Math.round(to * 100000)}`;
for (const b of g.blocks) {
sig = `${sig}_${b.eventKey}`;
}
return sig;
}
/** 列内第 index 个色块之前的空隙（vp）= 本块顶 − 上一块底 */
private w4LanePadVp(g: TGroup4, lane: TBlock[], index: number): number {
let prevEnd: number = g.startRatio;
if (index > 0) {
const p: TBlock = lane[index - 1];
const pe: number = p.topRatio + p.heightRatio;
prevEnd = pe > g.startRatio ? pe : g.startRatio;
}
return this.w4SpanVp(prevEnd, lane[index].topRatio);
}
/** 色块高度（vp） */
private w4BlockVp(b: TBlock): number {
return b.heightRatio * 24 * W4_HOUR;
}
/** 今天定时日程是否已全部结束（最晚结束比例 <= 当前时刻比例）；只剩全天 / 无定时日程也算已结束。
* 非今天（r<0）返回 false，交由原条件判断（非今天本来就不显示红线）。 */
private w4AllTimedEnded(): boolean {
const r: number = this.w4NowR();
if (r < 0) {
return false;
}
let maxEnd: number = 0;
for (const b of this.parseBlocks()) {
const e: number = b.topRatio + b.heightRatio;
if (e > maxEnd) {
maxEnd = e;
}
}
return r >= maxEnd - 0.0001;
}
/** 红线是否显示（当前时刻落在视窗内 + 今天还有未结束的定时日程） */
private w4NowVisible(): boolean {
const r: number = this.w4NowR();
return r >= 0 && !this.w4AllTimedEnded()
&& r >= this.w4StartHour() / 24 - 0.0001 && r <= this.w4EndHour() / 24 + 0.0001;
}
/** 红线距内容顶部的偏移（vp） */
private w4NowPadVp(): number {
const v: number = (this.w4NowR() - this.w4StartHour() / 24) * 24 * W4_HOUR;
return v > 0 ? v : 0;
}
private parseAllDay(): TAllDay[] {
try {
return JSON.parse(this.allDayJson) as TAllDay[];
} catch (err) {
return [];
}
}
/** 卡片空间有限：全天最多显示 W4_ALLDAY_MAX 条 */
private w4AllDay(): TAllDay[] {
return this.parseAllDay().slice(0, W4_ALLDAY_MAX);
}
private w4AllDayRest(): number {
const n: number = this.parseAllDay().length - W4_ALLDAY_MAX;
return n > 0 ? n : 0;
}
/** 只渲染视窗内的小时 */
private hourLabels(): number[] {
const arr: number[] = [];
for (let h = this.w4StartHour(); h < this.w4EndHour(); h++) {
arr.push(h);
}
return arr;
}
private hourText(h: number): string {
return h < 10 ? `0${h}` : `${h}`;
}
/** 右上角添加按钮：拉起 App 直接进入新建日程页（兄弟节点布局，不冒泡到其它点击区） */
@Builder
addButton() {
Button() {
@@ -56,120 +386,6 @@ struct Widget4x4Card {
})
}
/** 全天事件行：圆角矩形 + 左侧日历色竖条 + 标题 + “全天”标记（无时间轴） */
@Builder
buildAllDayRow(item: CardItem4x4) {
Row({ space: 8 }) {
Column()
.width(3)
.height(16)
.borderRadius(2)
.backgroundColor(item.color)
Text(item.title)
.fontSize(12)
.fontColor('#1A1A1A')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
Text('全天')
.fontSize(9)
.fontColor('#FFFFFF')
.backgroundColor(item.color)
.borderRadius(6)
.padding({ left: 5, right: 5, top: 1, bottom: 1 })
if (item.calName !== '') {
Text(item.calName)
.fontSize(9)
.fontColor(item.color)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: '25%' })
}
}
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.borderRadius(8)
.backgroundColor('#F5F7FA')
}
/** 当前时间红线标记：左侧红点 + 贯穿整行的红色细线 */
@Builder
nowLine() {
Row() {
Column()
.width(6)
.height(6)
.borderRadius(3)
.backgroundColor('#FF3B30')
Column()
.height(2)
.layoutWeight(1)
.backgroundColor('#FF3B30')
.borderRadius(1)
}
.width('100%')
.padding({ top: 3, bottom: 3 })
}
/** 有时间事件行（时间轴）：圆角矩形 + 左色竖条 + 开始时间(上)-竖线-结束时间(下) + 标题 */
@Builder
buildTimedRow(item: CardItem4x4) {
Row({ space: 8 }) {
Column()
.width(3)
.height(38)
.borderRadius(2)
.backgroundColor(item.isNow ? '#FF3B30' : item.color)
// 时间列：开始时间在上、结束时间在下、中间竖线连接
Column({ space: 2 }) {
Text(item.time)
.fontSize(10)
.fontWeight(FontWeight.Medium)
.fontColor(item.isNow ? '#FF3B30' : '#333333')
Column()
.width(1.5)
.layoutWeight(1)
.backgroundColor('#D8D8D8')
.borderRadius(1)
Text(item.endTime)
.fontSize(10)
.fontColor('#999999')
}
.width(38)
.alignItems(HorizontalAlign.Center)
.height(38)
Text(item.title)
.fontSize(12)
.fontColor(item.isNow ? '#FF3B30' : '#1A1A1A')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
if (item.isNow) {
Text('● 进行中')
.fontSize(9)
.fontColor('#FF3B30')
.padding({ left: 4, right: 4, top: 1, bottom: 1 })
.borderRadius(4)
.backgroundColor('#FFECEA')
}
if (item.calName !== '') {
Text(item.calName)
.fontSize(9)
.fontColor(item.color)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: '25%' })
}
}
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ left: 8, right: 8, top: 5, bottom: 5 })
.borderRadius(8)
.backgroundColor(item.isNow ? '#FFF1F0' : '#F5F7FA')
}
/** 卡片"打开 App"：点击日期区或日程列表触发；添加按钮是 header 行的兄弟节点，其点击不会冒泡到这里 */
private openApp(): void {
postCardAction(this, {
action: 'router',
@@ -178,80 +394,266 @@ struct Widget4x4Card {
});
}
/** 翻页：交给 FormExtensionAbility.onFormEvent 重新取数并推送（跨天查看） */
private page(act: string): void {
postCardAction(this, {
action: 'message',
params: { pageAction: act }
});
}
/** 上一天 / 下一天 圆按钮 */
@Builder
private pageBtn(label: string, act: string) {
Button() {
Text(label)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
.width(22)
.height(22)
.borderRadius(11)
.padding(0)
.backgroundColor('#F2F3F5')
.onClick(() => this.page(act))
}
/** 今天时是"＋"（新建日程）；非今天时是"今"（回到今天） */
@Builder
private sideBtn() {
if (this.isToday) {
this.addButton()
} else {
Button() {
Text('今')
.fontSize(12)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
}
.width(22)
.height(22)
.borderRadius(11)
.padding(0)
.backgroundColor('#007DFF')
.onClick(() => this.page('today'))
}
}
build() {
Column({ space: 6 }) {
Row({ space: 6 }) {
Row({ space: 6 }) {
Text(this.dateText)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
Text(this.lunarText)
Row({ space: 4 }) {
this.pageBtn('‹', 'prev')
Column() {
Text(this.dateMd)
.fontSize(12)
.fontWeight(FontWeight.Bold)
.fontColor(this.isToday ? '#007DFF' : '#1A1A1A')
.maxLines(1)
Text(this.lunarText)
.fontSize(9)
.fontColor('#8A8A8A')
.maxLines(1)
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
.onClick(() => this.openApp())
Blank()
Text('同步日历')
.fontSize(10)
.fontColor('#B0B0B0')
this.addButton()
this.pageBtn('›', 'next')
this.sideBtn()
}
.width('100%')
Divider().strokeWidth(0.5).color('#E5E5E5')
if (this.parseItems().length === 0) {
Column({ space: 6 }) {
Text('📅')
.fontSize(24)
Text('暂无日程')
.fontSize(13)
.fontColor('#8A8A8A')
}
.width('100%')
.layoutWeight(1)
.justifyContent(FlexAlign.Center)
.onClick(() => this.openApp())
} else {
List({ space: 4 }) {
ForEach(this.parseItems(), (item: CardItem4x4, idx: number) => {
ListItem() {
Column({ space: 3 }) {
if (item.showDate) {
Text(item.date)
.fontSize(10)
.fontWeight(FontWeight.Bold)
.fontColor('#666666')
// 卡片不支持 Scroll，但支持 List / ListItem：
// 把"整日时间轴"作为**一个很高的 ListItem**，超出卡片窗口的部分靠上下滑动查看
List() {
ListItem() {
Column() {
// 全天 / 跨天：同样用**色块**展示（与列表视图一致），随内容一起滚动
if (this.w4AllDay().length > 0) {
Column({ space: 2 }) {
ForEach(this.w4AllDay(), (a: TAllDay) => {
Row({ space: 4 }) {
Text(a.isAllDay ? '全天' : '跨天')
.fontSize(8)
.fontColor('#FFFFFF')
.backgroundColor('#26000000')
.borderRadius(5)
.padding({ left: 4, right: 4, top: 1, bottom: 1 })
Text(a.title)
.fontSize(10)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height(W4_ALLDAY_H - 2)
.padding({ left: 5, right: 5 })
.borderRadius(5)
.backgroundColor(a.color)
.onClick(() => this.openApp())
}, (a: TAllDay, idx: number) => `ad_${idx}_${a.eventKey}`)
if (this.w4AllDayRest() > 0) {
Text(`还有 ${this.w4AllDayRest()} 个全天日程`)
.fontSize(9)
.fontColor('#8A8A8A')
.width('100%')
}
if (item.showNowLine && !item.nowLineBelow) {
this.nowLine()
}
if (item.time === '全天') {
this.buildAllDayRow(item)
} else {
this.buildTimedRow(item)
}
if (item.nowLineBelow) {
this.nowLine()
.padding({ left: 2 })
}
}
.width('100%')
.padding({ bottom: 2 })
}
}, (item: CardItem4x4, idx: number) => `${idx}_${item.title}_${item.time}`)
// 时间轴主体：左侧小时刻度（放在 Stack 外，避免被色块盖住）+ 右侧三层堆叠
Row() {
Column() {
ForEach(this.hourLabels(), (h: number) => {
Text(this.hourText(h))
.fontSize(9)
.fontColor(this.w4IsNowHour(h) ? '#FF3B30' : '#9AA0A6')
.width(W4_GUTTER)
.height(W4_HOUR)
.textAlign(TextAlign.End)
.padding({ right: 3 })
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } })
}, (h: number) => `h${h}`)
}
.width(W4_GUTTER)
.height(this.w4ContentH())
Stack() {
this.w4GridLayer() // 第 1 层：整点网格线
this.w4EventLayer() // 第 2 层：日程色块
this.w4NowLayer() // 第 3 层：当前时间红线
}
.layoutWeight(1)
.height(this.w4ContentH())
.alignContent(Alignment.TopStart)
.border({ width: { left: 0.5 }, color: { left: '#14000000' } })
}
.width('100%')
.height(this.w4ContentH())
.alignItems(VerticalAlign.Top)
}
.width('100%')
.height(this.w4ItemH())
}
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Auto)
.cachedCount(8)
.onClick(() => this.openApp())
.height(this.w4ItemH())
}
.layoutWeight(1)
.width('100%')
}
.width('100%')
.height('100%')
.padding(12)
.backgroundColor('#FFFFFF')
.borderRadius(16)
}
/** 第 1 层：整点网格（每小时一格，格底一条灰线） */
@Builder
private w4GridLayer() {
Column() {
ForEach(this.hourLabels(), (h: number) => {
Column()
.width('100%')
.height(W4_HOUR)
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } })
.hitTestBehavior(HitTestMode.None) // 装饰层子节点同样不参与命中测试
}, (h: number) => `gd_${h}`)
}
.width('100%')
.height('100%')
.hitTestBehavior(HitTestMode.None) // 装饰层：不参与命中测试，触碰事件穿透到下层色块
}
/** 第 2 层：日程色块（冲突组分行 + 组内 lane 分列） */
@Builder
private w4EventLayer() {
Column() {
ForEach(this.w4Rows(), (r: T4Row) => {
if (r.kind === 1) {
Row() {
ForEach(r.group.lanes, (lane: TBlock[], li: number) => {
Column() {
ForEach(lane, (b: TBlock, index: number) => {
Blank().height(this.w4LanePadVp(r.group, lane, index))
Column({ space: 1 }) {
Text(b.title)
.fontSize(10)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width('100%')
if (b.heightRatio * 86400000 >= 60 * 60000) {
Text(b.timeText)
.fontSize(8)
.fontColor('#E6FFFFFF')
.maxLines(1)
.width('100%')
}
}
.alignItems(HorizontalAlign.Start)
.padding({ left: 4, right: 2, top: 1, bottom: 1 })
.borderRadius(4)
.backgroundColor(b.color)
.opacity(b.isNow ? 1 : 0.92)
.clip(true)
.width('100%')
.height(this.w4BlockVp(b))
.constraintSize({ minHeight: 14 })
.onClick(() => this.openApp())
}, (b: TBlock) => `b_${r.key}_${b.eventKey}`)
}
.layoutWeight(1)
.height('100%')
.padding({ right: 2 })
.clip(true)
}, (lane: TBlock[], li: number) => `ln_${r.key}_${li}`)
}
.width('100%')
.height(this.w4SpanVp(r.from, r.to))
.alignItems(VerticalAlign.Top)
} else {
Blank().height(this.w4SpanVp(r.from, r.to))
}
}, (r: T4Row) => r.key)
}
.width('100%')
.height('100%')
}
/** 第 3 层：当前时间红线（浮在最上层） */
@Builder
private w4NowLayer() {
Column() {
if (this.w4NowVisible()) {
Blank().height(this.w4NowPadVp()).hitTestBehavior(HitTestMode.None) // 占位块：不拦截点击
Row() {
Column()
.width(5)
.height(5)
.borderRadius(3)
.backgroundColor('#FF3B30')
Column()
.height(2)
.layoutWeight(1)
.backgroundColor('#FF3B30')
.borderRadius(1)
}
.width('100%')
.hitTestBehavior(HitTestMode.None) // 红线本身也不拦截点击，穿透到色块层
}
}
.width('100%')
.height('100%')
.padding(14)
.backgroundColor('#FFFFFF')
.borderRadius(16)
.hitTestBehavior(HitTestMode.None) // 装饰层：整层不参与命中测试，触碰事件穿透到下层色块
}
}
entry/src/main/ets/pages/widget/Widget6x4.ets
+578 -177
View File
@@ -1,39 +1,366 @@
// entry/src/main/ets/pages/widget/Widget6x4.ets
// 6x4 服务卡片：日期 + 农历 + 从今天开始的日程（时间轴样式，比 4x4 显示更多）
// 6x4 服务卡片：今日时间轴 —— 与"列表视图"完全同一套逻辑，并且**可以上下滑动**：
// · 用 List 包一个"很高的 ListItem"（整日时间轴按真实 vp 高度撑开）
// —— 官方卡片能力清单里 List / ListItem 是支持的，Scroll 不支持，所以只能走 List。
// · 视窗截断：只渲染"最早日程 ~ 最晚日程（+ 当前时刻）"这一段，避免上下大片空白
// · 三层堆叠：网格层 / 日程层 / 红线层，色块永不被切割
// · 贪心分列：列数 = 最大同时重叠数
// · 全天日程同样用色块展示
// ListItem 内必须用**确定 vp 高度**（不能再用百分比，否则撑不开 → 无法滚动）。
let storage6x4 = new LocalStorage();
class CardItem6x4 {
/** 时间轴色块（与 common/TimelineUtil.TimelineBlock 结构一致） */
class TBlock6 {
eventKey: string = '';
title: string = '';
time: string = '';
endTime: string = '';
date: string = '';
showDate: boolean = false;
calName: string = '';
timeText: string = '';
color: string = '#007DFF';
// 红线：startMs/endMs 实际起止；showNowLine 上方画红线；isNow 正在进行；nowLineBelow 画在底部
startMs: number = 0;
endMs: number = 0;
showNowLine: boolean = false;
topRatio: number = 0;
heightRatio: number = 0;
leftRatio: number = 0;
widthRatio: number = 1;
groupIndex: number = 0;
isNow: boolean = false;
nowLineBelow: boolean = false;
}
/** 全天日程（eventKey 由 CardDataService 写入，用于 ForEach 唯一标识） */
class TAllDay6 {
eventKey: string = '';
title: string = '';
color: string = '#007DFF';
isAllDay: boolean = true;
}
/** 冲突组：组内**贪心分列**，lanes[i] = 第 i 列（同列互不重叠） */
class TGroup6 {
startRatio: number = 0;
endRatio: number = 0;
laneCount: number = 1;
blocks: TBlock6[] = [];
lanes: TBlock6[][] = [];
}
/** 日程层纵向序列中的一行：空隙 / 冲突组（线都在其它两层） */
class T6Row {
kind: number = 0; // 0=空隙 1=冲突组
from: number = 0;
to: number = 0;
group: TGroup6 = new TGroup6();
key: string = '';
}
/** 视窗范围（小时） */
class W6Range {
s: number = 0;
e: number = 0;
}
/** 每 1 小时的高度（vp）。整日 24h × 40 = 960vp，远超卡片高度 → 可以滑动 */
const W6_HOUR: number = 40;
/** 全天日程最多显示条数（超出折叠为"还有 N 个"） */
const W6_ALLDAY_MAX: number = 2;
/** 左侧刻度占宽 */
const W6_GUTTER: number = 36;
/** 全天色块单条高度 / 间距 */
const W6_ALLDAY_H: number = 20;
@Entry(storage6x4)
@Component
struct Widget6x4Card {
@LocalStorageProp('eventsJson') eventsJson: string = '[]';
@LocalStorageProp('dateText') dateText: string = '';
@LocalStorageProp('lunarText') lunarText: string = '';
@LocalStorageProp('timelineJson') timelineJson: string = '[]';
@LocalStorageProp('allDayJson') allDayJson: string = '[]';
@LocalStorageProp('nowRatio') nowRatio: number = 0;
@LocalStorageProp('nowLabel') nowLabel: string = '';
@LocalStorageProp('todayCount') todayCount: number = 0;
@LocalStorageProp('isToday') isToday: boolean = true;
@LocalStorageProp('dayCount') dayCount: number = 0;
private parseItems(): CardItem6x4[] {
private parseBlocks(): TBlock6[] {
try {
return JSON.parse(this.eventsJson) as CardItem6x4[];
return JSON.parse(this.timelineJson) as TBlock6[];
} catch (err) {
return [];
}
}
/** 右上角添加按钮：拉起 App 直接进入新建日程页（阻止冒泡，避免同时打开 App 首页） */
/** 当前时间比例（无效返回 -1） */
private w6NowR(): number {
return (this.nowRatio > 0.001 && this.nowRatio < 0.999) ? this.nowRatio : -1;
}
private w6IsNowHour(h: number): boolean {
const r: number = this.w6NowR();
return r >= 0 && Math.floor(r * 24) === h;
}
/** 视窗范围：最早日程 ~ 最晚日程结束（今天再并入当前时刻）。
* 不做"最大跨度截断" —— 现在可以滑动了，没必要砍掉日程。 */
private w6Range(): W6Range {
const rg = new W6Range();
const bs: TBlock6[] = this.parseBlocks();
let s: number = -1;
let e: number = -1;
for (const b of bs) {
const bh: number = Math.floor(b.topRatio * 24);
const eh: number = Math.ceil((b.topRatio + b.heightRatio) * 24 - 0.0001);
if (s < 0 || bh < s) {
s = bh;
}
if (e < 0 || eh > e) {
e = eh;
}
}
const r: number = this.w6NowR();
// 只有"今天 + 还有未结束的定时日程"时才把当前小时并入视窗（红线会显示）；
// 定时日程已全部结束 → 不并入 → 时间刻度直接截断到最晚日程
const nh: number = (r >= 0 && !this.w6AllTimedEnded()) ? Math.floor(r * 24) : -1;
if (s < 0) {
s = nh >= 0 ? nh : 8;
}
if (e < 0) {
e = nh >= 0 ? nh + 1 : 20;
}
if (nh >= 0) {
if (nh < s) {
s = nh;
}
if (nh + 1 > e) {
e = nh + 1;
}
}
if (s < 0) {
s = 0;
}
if (e > 24) {
e = 24;
}
if (e <= s) {
e = s + 1 > 24 ? 24 : s + 1;
}
rg.s = s;
rg.e = e;
return rg;
}
private w6StartHour(): number {
return this.w6Range().s;
}
private w6EndHour(): number {
return this.w6Range().e;
}
/** 视窗跨度（小时） */
private w6Span(): number {
return this.w6EndHour() - this.w6StartHour();
}
/** 时间轴内容总高（vp）= 跨度 × 每小时高度 */
private w6ContentH(): number {
return this.w6Span() * W6_HOUR;
}
/** 一段（起止为当日比例）换算成 vp 高度 */
private w6SpanVp(from: number, to: number): number {
const v: number = (to - from) * 24 * W6_HOUR;
return v > 0 ? v : 0;
}
/** 全天区高度（vp），没有全天日程时为 0 */
private w6AllDayH(): number {
const n: number = this.w6AllDay().length;
if (n === 0) {
return 0;
}
let h: number = n * W6_ALLDAY_H;
if (this.w6AllDayRest() > 0) {
h += 14;
}
return h + 4;
}
/** ListItem 总高（vp）= 全天区 + 时间轴 */
private w6ItemH(): number {
return this.w6AllDayH() + this.w6ContentH();
}
/** 由色块重建冲突分组：组内按开始时间升序做**贪心分列**（列数 = 最大同时重叠数） */
private w6Groups(): TGroup6[] {
const map: Map<number, TBlock6[]> = new Map<number, TBlock6[]>();
for (const b of this.parseBlocks()) {
const arr: TBlock6[] | undefined = map.get(b.groupIndex);
if (arr === undefined) {
map.set(b.groupIndex, [b]);
} else {
arr.push(b);
}
}
const idxs: number[] = Array.from(map.keys()).sort((a: number, b: number): number => a - b);
const out: TGroup6[] = [];
for (const gi of idxs) {
const bs: TBlock6[] = map.get(gi) ?? [];
bs.sort((a: TBlock6, b: TBlock6): number => {
if (a.topRatio !== b.topRatio) {
return a.topRatio - b.topRatio;
}
return b.heightRatio - a.heightRatio;
});
const lanes: TBlock6[][] = [];
const laneEnd: number[] = [];
for (const b of bs) {
let li: number = -1;
for (let i = 0; i < laneEnd.length; i++) {
if (laneEnd[i] <= b.topRatio + 0.0000001) {
li = i;
break;
}
}
const be: number = b.topRatio + b.heightRatio;
if (li < 0) {
li = lanes.length;
lanes.push([b]);
laneEnd.push(be);
} else {
lanes[li].push(b);
laneEnd[li] = be;
}
}
const g = new TGroup6();
g.blocks = bs;
g.lanes = lanes;
g.laneCount = lanes.length > 0 ? lanes.length : 1;
let s: number = 1;
let e: number = 0;
for (const b of bs) {
if (b.topRatio < s) {
s = b.topRatio;
}
const be: number = b.topRatio + b.heightRatio;
if (be > e) {
e = be;
}
}
g.startRatio = s;
g.endRatio = e;
out.push(g);
}
return out;
}
/** 日程层纵向序列：空隙 / 冲突组（不含任何"线"） */
private w6Rows(): T6Row[] {
const rows: T6Row[] = [];
const gs: TGroup6[] = this.w6Groups();
const top: number = this.w6StartHour() / 24;
const bot: number = this.w6EndHour() / 24;
let cursor: number = top;
for (const g of gs) {
const gsx: number = g.startRatio > top ? g.startRatio : top;
const gex: number = g.endRatio < bot ? g.endRatio : bot;
if (gex - gsx <= 0.0002) {
continue;
}
this.w6Push(rows, cursor, gsx, null);
this.w6Push(rows, gsx, gex, g);
cursor = gex;
}
this.w6Push(rows, cursor, bot, null);
return rows;
}
private w6Push(rows: T6Row[], from: number, to: number, g: TGroup6 | null): void {
if (to - from <= 0.0002) {
return;
}
const r = new T6Row();
r.from = from;
r.to = to;
if (g === null) {
r.kind = 0;
r.key = `g_${rows.length}_${Math.round((to - from) * 100000)}`;
} else {
r.kind = 1;
r.group = g;
// key 必须绑定"内容"：翻页后行序号不变、只有内容变了；
// 若只用序号，ArkUI 会认为是同一批元素而不重绘 → 残留上一天的数据
r.key = `b_${rows.length}_${this.w6GroupKey(g, from, to)}`;
}
rows.push(r);
}
/** 冲突组的内容签名（时间窗 + 各块 eventKey），供 ForEach key 使用 */
private w6GroupKey(g: TGroup6, from: number, to: number): string {
let sig: string = `${Math.round(from * 100000)}_${Math.round(to * 100000)}`;
for (const b of g.blocks) {
sig = `${sig}_${b.eventKey}`;
}
return sig;
}
/** 列内第 index 个色块之前的空隙（vp）= 本块顶 − 上一块底 */
private w6LanePadVp(g: TGroup6, lane: TBlock6[], index: number): number {
let prevEnd: number = g.startRatio;
if (index > 0) {
const p: TBlock6 = lane[index - 1];
const pe: number = p.topRatio + p.heightRatio;
prevEnd = pe > g.startRatio ? pe : g.startRatio;
}
return this.w6SpanVp(prevEnd, lane[index].topRatio);
}
/** 色块高度（vp） */
private w6BlockVp(b: TBlock6): number {
return b.heightRatio * 24 * W6_HOUR;
}
/** 今天定时日程是否已全部结束（最晚结束比例 <= 当前时刻比例）；只剩全天 / 无定时日程也算已结束。
* 非今天（r<0）返回 false，交由原条件判断（非今天本来就不显示红线）。 */
private w6AllTimedEnded(): boolean {
const r: number = this.w6NowR();
if (r < 0) {
return false;
}
let maxEnd: number = 0;
for (const b of this.parseBlocks()) {
const e: number = b.topRatio + b.heightRatio;
if (e > maxEnd) {
maxEnd = e;
}
}
return r >= maxEnd - 0.0001;
}
/** 红线是否显示（当前时刻落在视窗内 + 今天还有未结束的定时日程） */
private w6NowVisible(): boolean {
const r: number = this.w6NowR();
return r >= 0 && !this.w6AllTimedEnded()
&& r >= this.w6StartHour() / 24 - 0.0001 && r <= this.w6EndHour() / 24 + 0.0001;
}
/** 红线距内容顶部的偏移（vp） */
private w6NowPadVp(): number {
const v: number = (this.w6NowR() - this.w6StartHour() / 24) * 24 * W6_HOUR;
return v > 0 ? v : 0;
}
private parseAllDay(): TAllDay6[] {
try {
return JSON.parse(this.allDayJson) as TAllDay6[];
} catch (err) {
return [];
}
}
private w6AllDay(): TAllDay6[] {
return this.parseAllDay().slice(0, W6_ALLDAY_MAX);
}
private w6AllDayRest(): number {
const n: number = this.parseAllDay().length - W6_ALLDAY_MAX;
return n > 0 ? n : 0;
}
private hourLabels(): number[] {
const arr: number[] = [];
for (let h = this.w6StartHour(); h < this.w6EndHour(); h++) {
arr.push(h);
}
return arr;
}
private hourText(h: number): string {
return h < 10 ? `0${h}:00` : `${h}:00`;
}
/** 右上角添加按钮：拉起 App 直接进入新建日程页（兄弟节点布局，不冒泡） */
@Builder
addButton() {
Button() {
@@ -56,120 +383,6 @@ struct Widget6x4Card {
})
}
/** 全天事件行：圆角矩形 + 左侧日历色竖条 + 标题 + “全天”标记（无时间轴） */
@Builder
buildAllDayRow(item: CardItem6x4) {
Row({ space: 8 }) {
Column()
.width(3)
.height(16)
.borderRadius(2)
.backgroundColor(item.color)
Text(item.title)
.fontSize(12)
.fontColor('#1A1A1A')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
Text('全天')
.fontSize(9)
.fontColor('#FFFFFF')
.backgroundColor(item.color)
.borderRadius(6)
.padding({ left: 5, right: 5, top: 1, bottom: 1 })
if (item.calName !== '') {
Text(item.calName)
.fontSize(9)
.fontColor(item.color)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: '25%' })
}
}
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.borderRadius(8)
.backgroundColor('#F5F7FA')
}
/** 当前时间红线标记：左侧红点 + 贯穿整行的红色细线 */
@Builder
nowLine() {
Row() {
Column()
.width(6)
.height(6)
.borderRadius(3)
.backgroundColor('#FF3B30')
Column()
.height(2)
.layoutWeight(1)
.backgroundColor('#FF3B30')
.borderRadius(1)
}
.width('100%')
.padding({ top: 3, bottom: 3 })
}
/** 有时间事件行（时间轴）：圆角矩形 + 左色竖条 + 开始时间(上)-竖线-结束时间(下) + 标题 */
@Builder
buildTimedRow(item: CardItem6x4) {
Row({ space: 8 }) {
Column()
.width(3)
.height(38)
.borderRadius(2)
.backgroundColor(item.isNow ? '#FF3B30' : item.color)
// 时间列：开始时间在上、结束时间在下、中间竖线连接
Column({ space: 2 }) {
Text(item.time)
.fontSize(10)
.fontWeight(FontWeight.Medium)
.fontColor(item.isNow ? '#FF3B30' : '#333333')
Column()
.width(1.5)
.layoutWeight(1)
.backgroundColor('#D8D8D8')
.borderRadius(1)
Text(item.endTime)
.fontSize(10)
.fontColor('#999999')
}
.width(38)
.alignItems(HorizontalAlign.Center)
.height(38)
Text(item.title)
.fontSize(12)
.fontColor(item.isNow ? '#FF3B30' : '#1A1A1A')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
if (item.isNow) {
Text('● 进行中')
.fontSize(9)
.fontColor('#FF3B30')
.padding({ left: 4, right: 4, top: 1, bottom: 1 })
.borderRadius(4)
.backgroundColor('#FFECEA')
}
if (item.calName !== '') {
Text(item.calName)
.fontSize(9)
.fontColor(item.color)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.constraintSize({ maxWidth: '25%' })
}
}
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ left: 8, right: 8, top: 5, bottom: 5 })
.borderRadius(8)
.backgroundColor(item.isNow ? '#FFF1F0' : '#F5F7FA')
}
/** 卡片"打开 App"：点击日期区或日程列表触发；添加按钮是 header 行的兄弟节点，其点击不会冒泡到这里 */
private openApp(): void {
postCardAction(this, {
action: 'router',
@@ -178,80 +391,268 @@ struct Widget6x4Card {
});
}
/** 翻页：交给 FormExtensionAbility.onFormEvent 重新取数并推送（跨天查看） */
private page(act: string): void {
postCardAction(this, {
action: 'message',
params: { pageAction: act }
});
}
/** 上一天 / 下一天 圆按钮 */
@Builder
private pageBtn(label: string, act: string) {
Button() {
Text(label)
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
}
.width(22)
.height(22)
.borderRadius(11)
.padding(0)
.backgroundColor('#F2F3F5')
.onClick(() => this.page(act))
}
/** 非今天时额外给一个"回到今天"按钮 */
@Builder
private sideBtn() {
if (!this.isToday) {
Button() {
Text('今')
.fontSize(12)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
}
.width(22)
.height(22)
.borderRadius(11)
.padding(0)
.backgroundColor('#007DFF')
.onClick(() => this.page('today'))
}
}
build() {
Column({ space: 6 }) {
Row({ space: 6 }) {
Row({ space: 6 }) {
this.pageBtn('‹', 'prev')
Column() {
Text(this.dateText)
.fontSize(16)
.fontSize(13)
.fontWeight(FontWeight.Bold)
.fontColor('#1A1A1A')
.fontColor(this.isToday ? '#007DFF' : '#1A1A1A')
.maxLines(1)
Text(this.lunarText)
.fontSize(12)
.fontSize(10)
.fontColor('#8A8A8A')
.maxLines(1)
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
.onClick(() => this.openApp())
Blank()
Text('同步日历')
Text(`${this.dayCount} 条`)
.fontSize(10)
.fontColor('#B0B0B0')
this.pageBtn('›', 'next')
this.sideBtn()
this.addButton()
}
.width('100%')
Divider().strokeWidth(0.5).color('#E5E5E5')
if (this.parseItems().length === 0) {
Column({ space: 6 }) {
Text('📅')
.fontSize(24)
Text('暂无日程')
.fontSize(13)
.fontColor('#8A8A8A')
}
.width('100%')
.layoutWeight(1)
.justifyContent(FlexAlign.Center)
.onClick(() => this.openApp())
} else {
List({ space: 4 }) {
ForEach(this.parseItems(), (item: CardItem6x4, idx: number) => {
ListItem() {
Column({ space: 3 }) {
if (item.showDate) {
Text(item.date)
.fontSize(10)
.fontWeight(FontWeight.Bold)
.fontColor('#666666')
// 卡片不支持 Scroll，但支持 List / ListItem：
// 把"整日时间轴"作为**一个很高的 ListItem**，超出卡片窗口的部分靠上下滑动查看
List() {
ListItem() {
Column() {
// 全天 / 跨天：同样用**色块**展示（与列表视图一致），随内容一起滚动
if (this.w6AllDay().length > 0) {
Column({ space: 2 }) {
ForEach(this.w6AllDay(), (a: TAllDay6) => {
Row({ space: 5 }) {
Text(a.isAllDay ? '全天' : '跨天')
.fontSize(8)
.fontColor('#FFFFFF')
.backgroundColor('#26000000')
.borderRadius(5)
.padding({ left: 4, right: 4, top: 1, bottom: 1 })
Text(a.title)
.fontSize(11)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height(W6_ALLDAY_H - 2)
.padding({ left: 6, right: 6 })
.borderRadius(6)
.backgroundColor(a.color)
.onClick(() => this.openApp())
}, (a: TAllDay6, idx: number) => `ad_${idx}_${a.eventKey}`)
if (this.w6AllDayRest() > 0) {
Text(`还有 ${this.w6AllDayRest()} 个全天日程`)
.fontSize(9)
.fontColor('#8A8A8A')
.width('100%')
}
if (item.showNowLine && !item.nowLineBelow) {
this.nowLine()
}
if (item.time === '全天') {
this.buildAllDayRow(item)
} else {
this.buildTimedRow(item)
}
if (item.nowLineBelow) {
this.nowLine()
.padding({ left: 2 })
}
}
.width('100%')
.padding({ bottom: 2 })
}
}, (item: CardItem6x4, idx: number) => `${idx}_${item.title}_${item.time}`)
// 时间轴主体：左侧小时刻度（放在 Stack 外，避免被色块盖住）+ 右侧三层堆叠
Row() {
Column() {
ForEach(this.hourLabels(), (h: number) => {
Text(this.hourText(h))
.fontSize(9)
.fontColor(this.w6IsNowHour(h) ? '#FF3B30' : '#9AA0A6')
.width(W6_GUTTER)
.height(W6_HOUR)
.textAlign(TextAlign.End)
.padding({ right: 3 })
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } })
}, (h: number) => `h${h}`)
}
.width(W6_GUTTER)
.height(this.w6ContentH())
Stack() {
this.w6GridLayer() // 第 1 层：整点网格线
this.w6EventLayer() // 第 2 层：日程色块
this.w6NowLayer() // 第 3 层：当前时间红线
}
.layoutWeight(1)
.height(this.w6ContentH())
.alignContent(Alignment.TopStart)
.border({ width: { left: 0.5 }, color: { left: '#14000000' } })
}
.width('100%')
.height(this.w6ContentH())
.alignItems(VerticalAlign.Top)
}
.width('100%')
.height(this.w6ItemH())
}
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Auto)
.cachedCount(12)
.onClick(() => this.openApp())
.height(this.w6ItemH())
}
.layoutWeight(1)
.width('100%')
}
.width('100%')
.height('100%')
.padding(12)
.backgroundColor('#FFFFFF')
.borderRadius(16)
}
/** 第 1 层：整点网格（每小时一格，格底一条灰线） */
@Builder
private w6GridLayer() {
Column() {
ForEach(this.hourLabels(), (h: number) => {
Column()
.width('100%')
.height(W6_HOUR)
.border({ width: { bottom: 0.5 }, color: { bottom: '#14000000' } })
.hitTestBehavior(HitTestMode.None) // 装饰层子节点同样不参与命中测试
}, (h: number) => `gd_${h}`)
}
.width('100%')
.height('100%')
.hitTestBehavior(HitTestMode.None) // 装饰层：不参与命中测试，触碰事件穿透到下层色块
}
/** 第 2 层：日程色块（冲突组分行 + 组内 lane 分列） */
@Builder
private w6EventLayer() {
Column() {
ForEach(this.w6Rows(), (r: T6Row) => {
if (r.kind === 1) {
Row() {
ForEach(r.group.lanes, (lane: TBlock6[], li: number) => {
Column() {
ForEach(lane, (b: TBlock6, index: number) => {
Blank().height(this.w6LanePadVp(r.group, lane, index))
Column({ space: 1 }) {
Text(b.title)
.fontSize(11)
.fontWeight(FontWeight.Medium)
.fontColor('#FFFFFF')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width('100%')
if (b.heightRatio * 86400000 >= 60 * 60000) {
Text(b.timeText)
.fontSize(9)
.fontColor('#E6FFFFFF')
.maxLines(1)
.width('100%')
}
}
.alignItems(HorizontalAlign.Start)
.padding({ left: 5, right: 3, top: 1, bottom: 1 })
.borderRadius(4)
.backgroundColor(b.color)
.opacity(b.isNow ? 1 : 0.92)
.clip(true)
.width('100%')
.height(this.w6BlockVp(b))
.constraintSize({ minHeight: 16 })
.onClick(() => this.openApp())
}, (b: TBlock6) => `b_${r.key}_${b.eventKey}`)
}
.layoutWeight(1)
.height('100%')
.padding({ right: 2 })
.clip(true)
}, (lane: TBlock6[], li: number) => `ln_${r.key}_${li}`)
}
.width('100%')
.height(this.w6SpanVp(r.from, r.to))
.alignItems(VerticalAlign.Top)
} else {
Blank().height(this.w6SpanVp(r.from, r.to))
}
}, (r: T6Row) => r.key)
}
.width('100%')
.height('100%')
}
/** 第 3 层：当前时间红线（浮在最上层） */
@Builder
private w6NowLayer() {
Column() {
if (this.w6NowVisible()) {
Blank().height(this.w6NowPadVp()).hitTestBehavior(HitTestMode.None) // 占位块：不拦截点击
Row() {
Column()
.width(5)
.height(5)
.borderRadius(3)
.backgroundColor('#FF3B30')
Column()
.height(2)
.layoutWeight(1)
.backgroundColor('#FF3B30')
.borderRadius(1)
}
.width('100%')
.hitTestBehavior(HitTestMode.None) // 红线本身也不拦截点击，穿透到色块层
}
}
.width('100%')
.height('100%')
.padding(14)
.backgroundColor('#FFFFFF')
.borderRadius(16)
.hitTestBehavior(HitTestMode.None) // 装饰层：整层不参与命中测试，触碰事件穿透到下层色块
}
}