HarmonyOs应用《重要日》开发第29篇 - 重要日设计需注意的地方

本文对比分析《重要日》项目待办事项应用到重要日管理应用的设计演进，包括数据模型升级、颜色系统扩展、通知机制、日历标记增强、统计功能新增等方面该学习注意的地方。

一、演进背景

定位场景

从"管理要做什么"到"管理值得期待的日子"，定位的转变驱动了所有功能。

二、数据模型

ImportantDays: ImportantDay

ImportantDay: - dayID: string - title: string - targetDate: Date - isCountdown: boolean ← 新增 - color: string ← 新增（替代 priority） - reminderEnabled: boolean ← 新增 - reminderDaysBefore: number ← 新增 - note: string ← 新增 - isPinned: boolean ← 新增 - createTime: Date

核心：倒数/正数模式

@TraceisCountdown:boolean;getDaysDiff():number{...}getDisplayText():string{constdiff=this.getDaysDiff();if(diff===0)return'就是今天';if(this.isCountdown){returndiff>0?`还有${diff}天`:`已过${Math.abs(diff)}天`;}else{returndiff<0?`已${Math.abs(diff)}天`:`还有${diff}天`;}}

这是最重要的特殊设计——同一个模型支持两种计数方式，适用于不同的纪念场景。

移除完成状态

TodoItem 有isCompleted属性，ImportantDay 移除了它。原因：

• 待办事项需要"完成"状态
• 重要日是时间节点，不存在"完成"概念
• 倒数/正数模式已经表达了时间状态

三、颜色系统扩展

ImportantDays: 16色自定义颜色

exportconstPRESET_COLORS:string[]=['#FF6B6B','#4ECDC4','#45B7D1','#FFA07A','#98D8C8','#F7DC6F','#BB8FCE','#85C1E2','#F8B739','#52BE80','#EC7063','#5DADE2','#48C9B0','#F4D03F','#AF7AC5','#85929E'];

颜色分析

从"优先级颜色"到"自定义颜色"的设计：

• 优先级是系统定义的，用户选择有限
• 自定义颜色让用户自由分类（如红色=生日、蓝色=工作、绿色=旅行）
• 颜色贯穿整个应用，增强视觉识别

四、通知机制改进

ImportantDays: 提前N天提醒

@TracereminderEnabled:boolean;@TracereminderDaysBefore:number;shouldRemind():boolean{if(!this.reminderEnabled)returnfalse;constdiff=this.getDaysDiff();returndiff>=0&&diff<=this.reminderDaysBefore;}

设计分析

新增的权限管理

// 权限请求staticasyncrequestPermission():Promise<boolean>{awaitnotificationManager.requestEnableNotification();returntrue;}// 权限检查staticasynccheckPermission():Promise<boolean>{returnawaitnotificationManager.isNotificationEnabled();}

新增的 WantAgent 跳转

staticasyncgetDefaultWantAgent():Promise<WantAgent>{constwantAgentInfo:wantAgent.WantAgentInfo={wants:[{bundleName:'com.importantdays.app',abilityName:'EntryAbility',action:'action.system.home'}],actionType:wantAgent.OperationType.START_ABILITY,// ...};returnawaitwantAgent.getWantAgent(wantAgentInfo);}

五、日历标记增强

ImportantDays: 颜色圆点+标题预览

// 月视图日期项if(this.hasImportantDay(dateModel)){// 颜色圆点（最多3个）Row(){ForEach(this.getImportantDays(dateModel).slice(0,3),(day)=>{Circle({width:5,height:5}).fill(day.color)})}// 标题预览Text(this.getFirstDayShortText(dateModel)).fontColor(this.getFirstDayColor(dateModel))}

设计分析

六、统计功能新增

ImportantDays: 四维统计

getStats():Stats{return{total:this.allDays.length,upcoming:this.getUpcomingDays().length,past:this.getPastDays().length,today:this.getTodayDays().length};}

统计的 UI 呈现

列表页： 12 5 1 6 全部 即将 今天 已过 我的页： ┌────────────────────────────────────┐ │ 12 5 1 6 │ │ 全部 即将 今天 已过 │ └────────────────────────────────────┘

统计功能让用户快速了解重要日的整体分布。

七、排序与置顶

ImportantDays: 多维度排序+置顶

getSortedList(sortType:SortTypeEnum):ImportantDay[]{// 置项优先// 然后按 DATE_ASC / DATE_DESC / CREATE_TIME 排序}asynctogglePin(dayID:string):Promise<void>{day.isPinned=!day.isPinned;}

设计分析

八、架构改进

状态管理升级

日历架构设计

ViewModel 分层

九、设计总结表

十、改进的设计理念

1. 从"任务"到"时间节点"

ImportantDays 关注"什么时候到来"（时间节点）。这个设计驱动了：

• 移除完成状态
• 新增倒数/正数模式
• 增强日历功能

2. 从"统一"到"个性化"

ImportantDays 的颜色由用户自由选择。这个设计体现了：

• 16色自定义选择器
• 颜色贯穿所有 UI
• 颜色与模式联动

3. 从"被动"到"主动"

ImportantDays 的提醒是主动检查的。这个设计体现在：

• 提前N天提醒
• 启动+前台双重检查
• 完整的权限管理流程

4. 从"简单"到"专业"

ImportantDays 是专业的重要日管理工具。这个设计体现在：

• 多视图日历
• 统计面板
• 排序与置顶
• 年视图鸟瞰

十一、总结

ImportantDays 的设计之路展示了：

1. 定位驱动设计：应用定位的转变驱动所有功能
2. 模型即核心：数据模型的升级是一切设计的基础
3. 用户体验优先：每个设计都直接提升用户体验
4. 架构与时俱进：从 V1 到 V2 的状态管理设计
5. 功能螺旋上升：在模板基础上不断扩展和增强