月度账单日历图 — CalendarSummary 的设计与实现文章简介在记账应用中日历视图是帮助用户快速了解每日收支的高效工具。MoneyTrack 的 StatisticsView 提供了「报表」和「日历」两种查看模式其中日历模式由 CalendarSummary 组件承载它通过 BillCalendar 组件将月度账单数据以颜色分级的方式呈现在日历网格上用户点击某一天即可查看该日的详细账单列表。本文详细拆解了这一日历组件的设计思路与实现细节包括网格布局算法、分级色彩映射、交互事件处理以及多端适配方案。核心知识点1. 日历网格布局与 dayjs 日期计算日历的核心是一个 7×N 的网格布局需要根据当前月份的第一天是星期几来计算偏移量。MoneyTrack 使用dayjs库进行日期计算核心算法如下渲染错误:Mermaid 渲染失败: Parse error on line 3: ...天] B -- C[dayjs().startOf(month)] ----------------------^ Expecting SQE, DOUBLECIRCLEEND, PE, -), STADIUMEND, SUBROUTINEEND, PIPE, CYLINDEREND, DIAMOND_STOP, TAGEND, TRAPEND, INVTRAPEND, UNICODE_TEXT, TEXT, TAGSTART, got PSdayjs 日期计算的完整代码实现// 获取月份第一天的星期几0周日1周一...6周六 const firstDayOfWeek dayjs(monthDate).startOf(month).day(); // 获取当前月份的总天数 const daysInMonth dayjs(monthDate).daysInMonth(); // 计算需要显示的行数至少 4 行最多 6 行 const totalRows Math.ceil((firstDayOfWeek daysInMonth) / 7); // 生成日历网格数据 for (let row 0; row totalRows; row) { for (let col 0; col 7; col) { const dayOffset row * 7 col - firstDayOfWeek 1; if (dayOffset 0 dayOffset daysInMonth) { // 有效日期添加到此位置 gridData.push({ row, col, day: dayOffset }); } } }BillCalendar组件接收month、startDate、endDate等参数通过ForEach循环渲染日期格子。BillCalendar({ month: this.vm.dataProcessing.date, selectedDateSummary: this.vm.selectedDateSummary, startDate: this.vm.dataProcessing.billStartDate, endDate: this.vm.dataProcessing.billEndDate, })2. 分级色彩映射算法日历图的视觉核心是「分级色彩」机制每天根据收支净额的大小映射到不同深浅的颜色上。支出越多的日子颜色越深如红色系收入越多的日子颜色越深如绿色系。这种设计让用户一眼就能识别出消费高峰日或收入入账日。分级色彩算法的实现思路如下// 分级色彩算法 function getDayColor(amount: number, maxExpense: number, maxIncome: number): ResourceColor { if (amount 0) { // 支出红色系分级绝对值越大颜色越深 const ratio Math.abs(amount) / maxExpense; // 0 ~ 1 const alpha 0.2 ratio * 0.6; // 透明度 0.2 ~ 0.8 return rgba(255, 80, 80, ${alpha}); } else if (amount 0) { // 收入绿色系分级金额越大颜色越深 const ratio amount / maxIncome; const alpha 0.2 ratio * 0.6; return rgba(80, 200, 80, ${alpha}); } else { return #F5F5F5; // 无收支日浅灰色 } }该算法首先找出当月的最大支出和最大收入作为基准值然后对每一天的收支净额计算占比将占比映射到透明度区间[0.2, 0.8]。颜色深浅的渐变效果使用 RGBA 的 alpha 通道实现既保持颜色的主色调又能通过透明度体现数值的相对大小。3. 日历组件的交互事件处理用户点击某一天格时触发selectedDateSummary更新底部的BillCard组件随即展示该日期的详细账单列表。完整的交互事件处理包括以下环节点击事件为每个日期格绑定onClick回调点击时更新选中的日期摘要数据高亮反馈选中的日期格通过border或backgroundColor变化给予视觉反馈滑动切换月份通过Swiper组件或左右箭头按钮支持月份切换下拉刷新配合Refresh容器支持下拉拉取最新账单数据完整的交互链路为点击日历格 → 更新selectedDateSummary→ 触发 BillCard 组件刷新 → 展示明细。4. 日历在手机和平板上的适配为了在不同屏幕尺寸上提供一致的体验CalendarSummary 组件实现了响应式适配方案手机端日历格较小约 40vp×40vp文字精简仅显示收支类型图标平板端日历格更大约 60vp×60vp可同时显示收入和支出的具体金额适配通过breakpoints监听屏幕断点实现在aboutToAppear中获取当前窗口尺寸动态调整日历格的尺寸和内容密度// 屏幕适配逻辑 const windowClass window?.getLastWindow(getContext()); const displayInfo windowClass?.getWindowProperties(); const isTablet displayInfo?.windowRect.width 600; const cellSize isTablet ? 60 : 40; // vp const showAmount isTablet; // 平板上显示具体金额项目代码案例CalendarSummary 组件文件路径features/statistics/src/main/ets/components/CalendarSummary.etsCalendarSummary 是整个日历视图的根组件内部组合了 BillCalendar日历网格和 BillCard账单详情。通过Scroll和Refresh容器提供滚动与下拉刷新能力。ComponentV2 export struct CalendarSummary { Param vm: StatisticsVM new StatisticsVM(); Local isRefreshing: boolean false; build() { Refresh({ refreshing: $$this.isRefreshing }) { Scroll() { Column() { this.calendarTableBuilder(); // 日历视图 BillCard({ card: this.vm.selectedDateData }); } } } } }CalendarBillItemModel 数据模型文件路径components/bill_chart/src/main/ets/commons/Models.ets日历组件所需的数据模型包括每日的摘要信息总收入、总支出、日期等由CalendarBillSummaryModel定义。推荐参考文档dayjs 日期处理库 APIArkUI GridRow / GridCol 网格布局指南HarmonyOS Refresh 下拉刷新组件文档HarmonyOS 响应式布局与断点适配指南
