📌 概述
创建目标模块允许用户创建和编辑喝茶目标。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的目标创建和编辑功能。用户可以设置目标名称、目标值、截止日期等信息。模块支持目标模板，帮助用户快速创建常见目标。
🔗 完整流程
第一步：目标表单初始化
当用户进入创建目标页面时，应用会加载目标模板列表。用户可以选择模板快速创建目标，或从空白表单开始。应用会显示当前日期作为默认值。
第二步：目标信息输入与验证
用户在表单中输入目标信息。应用会实时验证用户输入的数据，确保目标值、截止日期等信息有效。当用户输入不合法的数据时，应用会显示错误提示。
第三步：目标保存与同步
当用户点击保存按钮时，应用会进行最终的数据验证。如果所有字段都通过验证，应用会将目标保存到 IndexedDB 数据库中。同时，应用会通过 Cordova 调用原生插件，将数据同步到应用的关系型数据库中。
🔧 Web 代码实现
HTML 目标创建表单
<divid="create-goal-page"class="page"><divclass="page-header"><h1>创建目标</h1></div><divclass="template-selector"><label>选择模板:</label><selectid="goal-template"onchange="applyTemplate()"><optionvalue="">空白目标</option><optionvalue="monthly-count">月度喝茶次数</option><optionvalue="monthly-expense">月度消费金额</option><optionvalue="weekly-count">周度喝茶次数</option></select></div><formid="goal-form"class="form"><divclass="form-group"><labelfor="goal-name">目标名称 *</label><inputtype="text"id="goal-name"name="name"required></div><divclass="form-group"><labelfor="goal-description">目标描述</label><textareaid="goal-description"name="description"rows="3"></textarea></div><divclass="form-group"><labelfor="goal-target-value">目标值 *</label><inputtype="number"id="goal-target-value"name="targetValue"min="0"step="0.01"required></div><divclass="form-group"><labelfor="goal-deadline">截止日期 *</label><inputtype="date"id="goal-deadline"name="deadline"required></div><divclass="form-actions"><buttontype="submit"class="btn btn-primary">保存目标</button><buttontype="button"class="btn btn-secondary"onclick="navigateTo('goal-list')">取消</button></div></form></div>创建目标页面包含模板选择器和目标表单。用户可以选择模板快速创建目标。
创建目标逻辑
constgoalTemplates={'monthly-count':{name:'月度喝茶目标',description:'每月喝茶次数目标',targetValue:20,daysOffset:30},'monthly-expense':{name:'月度消费目标',description:'每月消费金额目标',targetValue:500,daysOffset:30},'weekly-count':{name:'周度喝茶目标',description:'每周喝茶次数目标',targetValue:5,daysOffset:7}};functionapplyTemplate(){consttemplateId=document.getElementById('goal-template').value;if(!templateId){document.getElementById('goal-form').reset();return;}consttemplate=goalTemplates[templateId];if(template){document.getElementById('goal-name').value=template.name;document.getElementById('goal-description').value=template.description;document.getElementById('goal-target-value').value=template.targetValue;// 计算截止日期constdeadline=newDate();deadline.setDate(deadline.getDate()+template.daysOffset);document.getElementById('goal-deadline').value=deadline.toISOString().split('T')[0];}}asyncfunctionhandleCreateGoal(event){event.preventDefault();constformData=newFormData(document.getElementById('goal-form'));constgoalData={name:formData.get('name'),description:formData.get('description'),targetValue:parseFloat(formData.get('targetValue')),deadline:formData.get('deadline'),currentValue:0,createdAt:newDate().toISOString()};// 验证数据if(!goalData.name||goalData.targetValue<=0||!goalData.deadline){showToast('请填写所有必填字段','warning');return;}try{constgoalId=awaitdb.addGoal(goalData);if(window.cordova){cordova.exec(null,null,'TeaLogger','logEvent',['goal_created',{goalId:goalId,name:goalData.name}]);cordova.exec(null,null,'HapticFeedback','vibrate',[{type:'success'}]);}showToast('目标已创建','success');setTimeout(()=>navigateTo('goal-list'),1000);}catch(error){console.error('Failed to create goal:',error);showToast('创建失败，请重试','error');}}// 初始化表单document.addEventListener('DOMContentLoaded',function(){constform=document.getElementById('goal-form');if(form){form.addEventListener('submit',handleCreateGoal);// 设置默认截止日期为30天后constdeadline=newDate();deadline.setDate(deadline.getDate()+30);document.getElementById('goal-deadline').value=deadline.toISOString().split('T')[0];}});这段代码实现了创建目标功能。applyTemplate()应用目标模板。handleCreateGoal()处理表单提交并保存目标。
🔌 OpenHarmony 原生代码
目标验证与保存
// entry/src/main/ets/plugins/GoalValidator.etsexportclassGoalValidator{staticvalidateGoal(goal:Goal):ValidationResult{consterrors:string[]=[];if(!goal.name||goal.name.trim()===''){errors.push('目标名称不能为空');}if(goal.targetValue<=0){errors.push('目标值必须大于0');}if(!goal.deadline){errors.push('截止日期不能为空');}constdeadline=newDate(goal.deadline);constnow=newDate();if(deadline<=now){errors.push('截止日期必须晚于当前日期');}return{valid:errors.length===0,errors:errors};}}interfaceGoal{name:string;description?:string;targetValue:number;deadline:string;}interfaceValidationResult{valid:boolean;errors:string[];}这个类验证目标数据。validateGoal()检查目标信息的有效性。
📝 总结
创建目标模块展示了如何在 Cordova 框架中实现目标创建功能。通过 Web 层的表单处理和模板支持，结合原生层的数据验证和保存，为用户提供了便捷的目标创建体验。
