尧图网站开发 
ArkTS 表单工程保养录入页的换行胶囊与四字段表单App 58「车辆保养提醒」保养页Func1Tab主题色#008080青蓝。本页是保养记录的录入页——白色单行 Header记录保养20 号加粗保养项目卡保养项目标题 6 个换行胶囊机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他默认选中机油机滤四字段保养表单保养里程kmNumber / 保养费用元Number / 保养店铺 TextInput / 备注 TextArea 多行青蓝全宽记录保养按钮里程非空弹保养已记录空则弹请填写里程。本篇基于58-car-maintain/entry/src/main/ets/pages/Func1Tab.ets共 89 行逐段拆解附 4 张实机截图。一、整体结构三区Header 项目 表单布局保养页是项目选择 保养录入的组合布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.ItemCard() this.FormCard() Button(记录保养).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.mileage.length 0 ? 保养已记录 : 请填写里程 }); }) } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构ItemCard— 保养项目 6 胶囊机油/轮胎/刹车片/电池/空调滤芯/其他FormCard— 四字段保养表单里程/费用/店铺/备注记录保养— 青蓝全宽 CTA 按钮里程校验保养页是录入页——先选保养项目机油机滤等 6 类再填保养数据里程/费用/店铺/备注最后保存。项目 表单两卡分工上卡选做了什么保养、下卡填在多少公里、花了多少钱、在哪做的。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header() { Row() { Text(记录保养).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }功能页 Header 标准范式20 号、safeTop 56固定高、文字贴底与日志页、我的页同款。记录保养是动作型标题动词短语与系列录入页App 52 上传票据、App 57 记录加油一致。三、ItemCard保养项目换行胶囊ItemCard() { Column({ space: 12 }) { Text(保养项目).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.items, (it: string, idx: number) { Text(it).fontSize(12) .fontColor(this.activeItem idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 8, bottom: 8 }) .backgroundColor(this.activeItem idx ? C.primary : C.cardSoft).borderRadius(16) .margin({ right: 10, bottom: 10 }) .onClick(() { this.activeItem idx; }) }, (it: string) it) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解6 个保养项目胶囊机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他——Flex({ wrap: FlexWrap.Wrap })换行排布4 个一行 2 个换行默认选中机油机滤activeItem 0最常做的保养项目。选中态选中青底白字C.primary 白字、未选灰底灰字cardSofttextSub——系列标准胶囊公式圆角 16。项目覆盖6 类覆盖常规保养机油机滤、空调滤芯更换件轮胎、刹车片检查件蓄电池兜底其他——保养项目的典型分类与首页 4 个保养项目机油机滤/轮胎/蓄电池/刹车片对应首页展示的是当前有状态的项目保养页可选全部。与首页联动在保养页选刹车片记录后首页的刹车片状态会更新超期 → 正常——记录项目 刷新首页状态。四、FormCard四字段保养表单FormCard() { Column({ space: 14 }) { Column({ space: 6 }) { Text(保养里程km).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 12580 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.mileage v; }) } Column({ space: 6 }) { Text(保养费用元).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 0.00 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.cost v; }) } Column({ space: 6 }) { Text(保养店铺).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 例如4S店/维修厂 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) } Column({ space: 6 }) { Text(备注).fontSize(13).fontColor(C.textSub).width(100%) TextArea({ placeholder: 保养内容说明... }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(80) } } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }四字段保养表单保养里程kmTextInput({ placeholder: 12580 }).type(InputType.Number)——保养时的仪表里程保存校验的锚点字段Number 键盘占位符 12580 与首页当前里程一致。保养费用元TextInput({ placeholder: 0.00 }).type(InputType.Number)——保养花费金额占位符 0.00 暗示两位小数费用进入日志页的累计花费统计。保养店铺TextInput({ placeholder: 例如4S店/维修厂 })——保养地点4S 店/维修厂记录在哪做的保养占位符示范两种类型。备注TextAreaTextArea({ placeholder: 保养内容说明... })——多行文本区高 80、圆角 10记录保养细节换了全合成机油检查了刹车片厚度这是系列中少见的 TextArea 多行输入其他录入页都是单行 TextInput适合备注类长文本。五、记录按钮状态校验的交互闭环Button(记录保养).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.mileage.length 0 ? 保养已记录 : 请填写里程 }); })技术拆解全宽青蓝 CTAwidth(100%).height(48)backgroundColor(C.primary)——主色全宽按钮录入页标准 CTA。三元校验this.mileage.length 0 ? 保养已记录 : 请填写里程——以里程为校验锚点保养里程是保养记录的核心字段——没有里程就无法推算下次保养周期里程非空 → 记录成功为空 → 提示请填写里程App 57 加油页校验加油量、本页校验里程锚点字段都是驱动后续计算的字段。六、跨页数据自洽保养录入的全局闭环保养页与首页、日志、我的三页形成闭环保养项目 里程↔ 首页刹车片已超期→ 记录后更新——记录项目 刷新首页状态在保养页记录刹车片后首页刹车片从已超期变为正常、剩余里程重置。保养费用↔ 日志页¥480 机油机滤更换——录入的费用出现在日志页机油机滤更换 480 元并汇入日志页累计花费 ¥3860录入 → 日志展示 → 累计统计。保养里程 12580↔ 首页当前里程 12,580 km、我的页本田雅阁 · 12,580 km——里程一致保养时记录的里程就是当前里程保养记录是最新的里程来源。保养项目 6 胶囊↔ 首页4 个保养项目——保养页 6 类包含首页 4 项机油机滤/轮胎/蓄电池/刹车片首页展示有状态的项目、保养页可选全部项目项目体系同源。保养记录↔ 日志页保养历史时间轴——每次保养记录进入日志页时间轴机油机滤更换 12080 km 2026-07-28录入即入日志。七、系列横向对比录入页的四字段表单变体系列中录入型页面的表单对比App 58 保养页项目胶囊 四字段含 TextArea 备注——项目 长备注多行文本。App 57 加油页油品胶囊 三字段全 Number——参数 数据质量开关。App 56 记录页常用地点胶囊 四字段——快捷回填 时间双列。App 55 添加页四件套 提醒三档——服务 提醒配置。58 的差异化在于**TextArea 多行备注**——四字段中备注用多行文本区80 高是系列录入页中唯一的长文本输入其他录入页都是单行 TextInput因为保养内容需要详细记录换了什么件、检查了什么、建议下次何时保养备注的长文本属性匹配保养场景的信息需求。同时保养店铺字段记录在哪做的也是保养场景专属加油不需要记录店铺、停车不需要。八、开发者避坑保养录入的四个细节从 Func1Tab 的实现提炼四个易踩坑点下次保养里程推算当前录入里程但不推算下次保养——产品化应记录里程 项目周期 → 下次保养里程机油机滤每 5000km记录时自动设下次 本次里程 5000首页剩余里程 下次 - 当前录入驱动首页状态。项目与周期的映射不同项目保养周期不同机油 5000km、刹车片 3 万 km、蓄电池检查 2 万 km——产品化建立项目 → 周期映射表选择项目自动带出对应周期避免所有项目都按 5000km的错误。费用校验与统计费用 Number 输入但未校验——产品化校验费用非负、格式两位小数费用为 0 可能是免费保养且费用进入日志页累计花费统计¥3860 各次费用之和。备注的长度限制TextArea 无字数限制——产品化设备注长度上限如 200 字并显示计数避免超长文本撑爆日志卡片TextArea 的 onChange 也应绑定状态当前未绑定this.note。九、常见问题 FAQ问保养项目和首页的保养项目是什么关系答保养页的 6 个项目机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他是可选保养类型全集首页的 4 个项目机油机滤/轮胎/蓄电池/刹车片是当前有状态的项目记录了保养计划/剩余里程的——在保养页记录某个项目后该项目在首页出现状态首页的项目都能在保养页找到对应胶囊两处项目体系同源。问记录保养时为什么只校验里程答因为里程是保养记录的核心字段——没有里程无法推算下次保养还剩多少公里首页剩余里程 下次保养里程 - 当前里程保养记录就失去了周期管理价值。费用、店铺、备注可以后补或留空记录的核心是在多少公里做了保养校验只锁驱动后续计算的字段。问保养店铺填 4S 店和维修厂有什么区别答4S 店原厂服务价格高但保真、有保养记录联网和维修厂价格低、自主选择配件是两类保养渠道——记录店铺后日志页的保养历史能看出哪次在 4S 店、哪次在维修厂方便对比价格与质量。产品化后可统计4S 店 vs 维修厂的费用对比帮助用户决策下次去哪保养。十、验收与总结本篇对 58-car-maintain 保养页Func1Tab89 行做了逐块拆解三区结构Header记录保养 ItemCard6 项目胶囊 FormCard四字段表单 TextArea 记录按钮核心交互项目胶囊单选默认机油机滤、TextArea 多行备注、保存按钮里程校验主题色#008080青蓝——胶囊选中态、保存按钮两处主色数据闭环记录项目 → 首页状态刷新费用 → 日志页累计里程 12580 → 首页/我的页保养页是车辆保养提醒的录入口——选项目、填四字段、记录保存一页完成保养记录。十、扩展思考从手工记录到智能保养保养页的演进方向是智能保养第一是保养周期自动推荐——当前项目胶囊是静态 6 类演进方向是记录后自动计算下次保养机油机滤每 5000km、刹车片每 3 万 km并推荐下次保养时间按里程或按时间哪个先到保养页的里程字段是周期计算的基准第二是保养项目价格参考——不同项目价格差异大机油 500 元、四轮换位 60 元、常规保养 650 元演进方向是记录常见项目的历史均价并预估下次费用机油保养上次 480 元让用户对保养花费有预期第三是保养提醒推送——记录保养后按周期推送下次提醒距下次机油保养还剩 500km保养页的里程记录驱动首页告警与推送第四是保养记录 OCR——保养单据/支付记录自动识别项目/金额/里程自动填入保养页的四字段是 OCR 的填充分区。这四个方向都从保养页已有的项目与四字段长出来让记一笔变成智能管家。十一、从设计稿到代码的映射把保养页设计稿翻译成代码有几组典型映射第一保养项目映射为流式换行胶囊——设计稿的六个项目选项代码里用流式换行容器包裹六个文本胶囊选中态青蓝底白字、默认选中第一项机油机滤第二两个数字输入映射为单列数字输入组件——设计稿的里程与费用代码里用两个全宽数字输入组件各配灰标签第三店铺输入映射为单列文本输入——设计稿的保养店铺代码里用全宽文本输入组件占位符示范格式第四备注多行映射为文本区域组件——设计稿的备注区代码里用八十高的多行文本区域组件支持换行长文本。这四组映射展示了保养录入页的完整翻译其中多行文本区域是本页区别于其他录入页的技术要点。十二、常见问题 FAQ问保养项目为什么要 6 个而不是更多答6 类覆盖了家用车保养的绝大多数场景——常规保养机油机滤、空调滤芯、更换件轮胎、刹车片、检查件蓄电池、兜底其他。更多细分变速箱油、火花塞、防冻液可通过其他备注记录或产品化后在保养周期菜单自定义项目。6 类是够用且不冗余的平衡。问记录保养时为什么只校验里程答因为里程是保养记录的核心字段——没有里程无法推算下次保养周期下次 本次里程 周期首页的剩余里程就无法更新。费用、店铺、备注是补充信息可后补或留空校验只锁驱动后续计算的字段这与 App 57 加油页校验加油量驱动金额与油耗计算同理。问备注的 TextArea 和普通输入框有什么区别答TextArea 是多行文本区域80 高、支持换行适合记录长内容换了全合成机油、检查了刹车片厚度、建议下次 2 万公里换普通 TextInput 是单行44 高、不支持换行适合短内容店铺名。本页备注用 TextArea 是因为保养内容需要详细记录这是系列录入页中唯一的多行输入。十三、补充要点保养页三个细节再思考第一关于项目胶囊的默认值。默认选中机油机滤数组第一项——机油机滤是最常做的保养每 5000km 一次频率最高默认选中它让多数用户打开就能填不用改选同时它是首页 4 个项目中第一个机油机滤与首页的优先级一致。第二关于店铺占位符的信息价值。例如4S店/维修厂不只是格式示范——它暗示了保养的两种主要渠道4S 店原厂服务 vs 维修厂经济实惠用户填店铺时自然会想这次在哪做的记录店铺后日志页能对比4S 店 vs 维修厂的费用差异占位符引导了信息的记录维度。第三关于四字段的顺序。里程驱动计算→ 费用金额统计→ 店铺来源记录→ 备注细节补充——按核心到补充的顺序排列先填最重要的里程、再填次要的费用店铺、最后填可选的备注用户按顺序填写自然完成从必要到可选的录入。十四、最后总结保养页是车辆保养提醒的录入口也是系列录入型页面的代表。它用项目胶囊解决做了什么保养6 类覆盖用四字段表单解决在多少公里、花了多少、在哪做的里程/费用/店铺/备注用带校验的保存按钮保证记录有效里程必填。整页交互围绕录入效率与数据价值展开项目胶囊默认机油、TextArea 记录细节、里程驱动周期、单一校验降低门槛。从演示到产品保养页的进化路线清晰周期自动推荐、价格参考预估、提醒推送、单据 OCR。作为从保养到记录的入口页面它展示了录入类应用的标准骨架也为首页告警、日志时间轴、累计统计提供了数据基础——没有记录就没有后续的一切管理。四字段每一条都在为其他页面服务这是入口页面的核心价值。十五、补充要点表单交互的细节再思考保养页有几个容易被忽视的交互细节第一输入框的聚焦体验——里程、费用、店铺、备注四个输入框从上到下排列用户应能通过键盘的下一项键在字段间跳转产品化设置回车键的下一步行为减少手指移动第二项目胶囊的即时反馈——点击保养项目立即变色青底白字用户无需等待或确认就能感知选中这次做的是刹车片这种所见即所得的单选交互比下拉列表更轻快第三里程输入的容错——里程是数字输入Number 键盘但用户可能输入带逗号12,580或空格产品化应做输入清洗去逗号空格统一为纯数字第四记录成功的后续动作——当前弹 Toast保养已记录即结束产品化应提供继续记录与返回首页两个动作一次保养可能做多个项目如机油 空调滤芯一起做减少重复操作。这四个细节都围绕录入效率展开把能填完提升为填得快、填得对。十六、最后总结保养页解析至此完整收尾保养项目胶囊、四字段表单、多行备注、保存校验全部覆盖。读者可重点回顾多行文本区域的使用——它是系列录入页中唯一的长文本输入80 高、支持换行匹配保养备注的信息需求也是本页区别于其他录入页的核心实现。车辆保养从这一页开始选项目、填里程费用、记店铺备注每一次保养的数据就这样被捕捉下来。 
ArkTS 表单工程保养录入页的换行胶囊与四字段表单App 58「车辆保养提醒」保养页Func1Tab主题色#008080青蓝。本页是保养记录的录入页——白色单行 Header记录保养20 号加粗保养项目卡保养项目标题 6 个换行胶囊机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他默认选中机油机滤四字段保养表单保养里程kmNumber / 保养费用元Number / 保养店铺 TextInput / 备注 TextArea 多行青蓝全宽记录保养按钮里程非空弹保养已记录空则弹请填写里程。本篇基于58-car-maintain/entry/src/main/ets/pages/Func1Tab.ets共 89 行逐段拆解附 4 张实机截图。一、整体结构三区Header 项目 表单布局保养页是项目选择 保养录入的组合布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.ItemCard() this.FormCard() Button(记录保养).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.mileage.length 0 ? 保养已记录 : 请填写里程 }); }) } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }3 块结构ItemCard— 保养项目 6 胶囊机油/轮胎/刹车片/电池/空调滤芯/其他FormCard— 四字段保养表单里程/费用/店铺/备注记录保养— 青蓝全宽 CTA 按钮里程校验保养页是录入页——先选保养项目机油机滤等 6 类再填保养数据里程/费用/店铺/备注最后保存。项目 表单两卡分工上卡选做了什么保养、下卡填在多少公里、花了多少钱、在哪做的。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header() { Row() { Text(记录保养).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }功能页 Header 标准范式20 号、safeTop 56固定高、文字贴底与日志页、我的页同款。记录保养是动作型标题动词短语与系列录入页App 52 上传票据、App 57 记录加油一致。三、ItemCard保养项目换行胶囊ItemCard() { Column({ space: 12 }) { Text(保养项目).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.items, (it: string, idx: number) { Text(it).fontSize(12) .fontColor(this.activeItem idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 8, bottom: 8 }) .backgroundColor(this.activeItem idx ? C.primary : C.cardSoft).borderRadius(16) .margin({ right: 10, bottom: 10 }) .onClick(() { this.activeItem idx; }) }, (it: string) it) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解6 个保养项目胶囊机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他——Flex({ wrap: FlexWrap.Wrap })换行排布4 个一行 2 个换行默认选中机油机滤activeItem 0最常做的保养项目。选中态选中青底白字C.primary 白字、未选灰底灰字cardSofttextSub——系列标准胶囊公式圆角 16。项目覆盖6 类覆盖常规保养机油机滤、空调滤芯更换件轮胎、刹车片检查件蓄电池兜底其他——保养项目的典型分类与首页 4 个保养项目机油机滤/轮胎/蓄电池/刹车片对应首页展示的是当前有状态的项目保养页可选全部。与首页联动在保养页选刹车片记录后首页的刹车片状态会更新超期 → 正常——记录项目 刷新首页状态。四、FormCard四字段保养表单FormCard() { Column({ space: 14 }) { Column({ space: 6 }) { Text(保养里程km).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 12580 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.mileage v; }) } Column({ space: 6 }) { Text(保养费用元).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 0.00 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.cost v; }) } Column({ space: 6 }) { Text(保养店铺).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 例如4S店/维修厂 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) } Column({ space: 6 }) { Text(备注).fontSize(13).fontColor(C.textSub).width(100%) TextArea({ placeholder: 保养内容说明... }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(80) } } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }四字段保养表单保养里程kmTextInput({ placeholder: 12580 }).type(InputType.Number)——保养时的仪表里程保存校验的锚点字段Number 键盘占位符 12580 与首页当前里程一致。保养费用元TextInput({ placeholder: 0.00 }).type(InputType.Number)——保养花费金额占位符 0.00 暗示两位小数费用进入日志页的累计花费统计。保养店铺TextInput({ placeholder: 例如4S店/维修厂 })——保养地点4S 店/维修厂记录在哪做的保养占位符示范两种类型。备注TextAreaTextArea({ placeholder: 保养内容说明... })——多行文本区高 80、圆角 10记录保养细节换了全合成机油检查了刹车片厚度这是系列中少见的 TextArea 多行输入其他录入页都是单行 TextInput适合备注类长文本。五、记录按钮状态校验的交互闭环Button(记录保养).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.mileage.length 0 ? 保养已记录 : 请填写里程 }); })技术拆解全宽青蓝 CTAwidth(100%).height(48)backgroundColor(C.primary)——主色全宽按钮录入页标准 CTA。三元校验this.mileage.length 0 ? 保养已记录 : 请填写里程——以里程为校验锚点保养里程是保养记录的核心字段——没有里程就无法推算下次保养周期里程非空 → 记录成功为空 → 提示请填写里程App 57 加油页校验加油量、本页校验里程锚点字段都是驱动后续计算的字段。六、跨页数据自洽保养录入的全局闭环保养页与首页、日志、我的三页形成闭环保养项目 里程↔ 首页刹车片已超期→ 记录后更新——记录项目 刷新首页状态在保养页记录刹车片后首页刹车片从已超期变为正常、剩余里程重置。保养费用↔ 日志页¥480 机油机滤更换——录入的费用出现在日志页机油机滤更换 480 元并汇入日志页累计花费 ¥3860录入 → 日志展示 → 累计统计。保养里程 12580↔ 首页当前里程 12,580 km、我的页本田雅阁 · 12,580 km——里程一致保养时记录的里程就是当前里程保养记录是最新的里程来源。保养项目 6 胶囊↔ 首页4 个保养项目——保养页 6 类包含首页 4 项机油机滤/轮胎/蓄电池/刹车片首页展示有状态的项目、保养页可选全部项目项目体系同源。保养记录↔ 日志页保养历史时间轴——每次保养记录进入日志页时间轴机油机滤更换 12080 km 2026-07-28录入即入日志。七、系列横向对比录入页的四字段表单变体系列中录入型页面的表单对比App 58 保养页项目胶囊 四字段含 TextArea 备注——项目 长备注多行文本。App 57 加油页油品胶囊 三字段全 Number——参数 数据质量开关。App 56 记录页常用地点胶囊 四字段——快捷回填 时间双列。App 55 添加页四件套 提醒三档——服务 提醒配置。58 的差异化在于**TextArea 多行备注**——四字段中备注用多行文本区80 高是系列录入页中唯一的长文本输入其他录入页都是单行 TextInput因为保养内容需要详细记录换了什么件、检查了什么、建议下次何时保养备注的长文本属性匹配保养场景的信息需求。同时保养店铺字段记录在哪做的也是保养场景专属加油不需要记录店铺、停车不需要。八、开发者避坑保养录入的四个细节从 Func1Tab 的实现提炼四个易踩坑点下次保养里程推算当前录入里程但不推算下次保养——产品化应记录里程 项目周期 → 下次保养里程机油机滤每 5000km记录时自动设下次 本次里程 5000首页剩余里程 下次 - 当前录入驱动首页状态。项目与周期的映射不同项目保养周期不同机油 5000km、刹车片 3 万 km、蓄电池检查 2 万 km——产品化建立项目 → 周期映射表选择项目自动带出对应周期避免所有项目都按 5000km的错误。费用校验与统计费用 Number 输入但未校验——产品化校验费用非负、格式两位小数费用为 0 可能是免费保养且费用进入日志页累计花费统计¥3860 各次费用之和。备注的长度限制TextArea 无字数限制——产品化设备注长度上限如 200 字并显示计数避免超长文本撑爆日志卡片TextArea 的 onChange 也应绑定状态当前未绑定this.note。九、常见问题 FAQ问保养项目和首页的保养项目是什么关系答保养页的 6 个项目机油机滤/轮胎/刹车片/蓄电池/空调滤芯/其他是可选保养类型全集首页的 4 个项目机油机滤/轮胎/蓄电池/刹车片是当前有状态的项目记录了保养计划/剩余里程的——在保养页记录某个项目后该项目在首页出现状态首页的项目都能在保养页找到对应胶囊两处项目体系同源。问记录保养时为什么只校验里程答因为里程是保养记录的核心字段——没有里程无法推算下次保养还剩多少公里首页剩余里程 下次保养里程 - 当前里程保养记录就失去了周期管理价值。费用、店铺、备注可以后补或留空记录的核心是在多少公里做了保养校验只锁驱动后续计算的字段。问保养店铺填 4S 店和维修厂有什么区别答4S 店原厂服务价格高但保真、有保养记录联网和维修厂价格低、自主选择配件是两类保养渠道——记录店铺后日志页的保养历史能看出哪次在 4S 店、哪次在维修厂方便对比价格与质量。产品化后可统计4S 店 vs 维修厂的费用对比帮助用户决策下次去哪保养。十、验收与总结本篇对 58-car-maintain 保养页Func1Tab89 行做了逐块拆解三区结构Header记录保养 ItemCard6 项目胶囊 FormCard四字段表单 TextArea 记录按钮核心交互项目胶囊单选默认机油机滤、TextArea 多行备注、保存按钮里程校验主题色#008080青蓝——胶囊选中态、保存按钮两处主色数据闭环记录项目 → 首页状态刷新费用 → 日志页累计里程 12580 → 首页/我的页保养页是车辆保养提醒的录入口——选项目、填四字段、记录保存一页完成保养记录。十、扩展思考从手工记录到智能保养保养页的演进方向是智能保养第一是保养周期自动推荐——当前项目胶囊是静态 6 类演进方向是记录后自动计算下次保养机油机滤每 5000km、刹车片每 3 万 km并推荐下次保养时间按里程或按时间哪个先到保养页的里程字段是周期计算的基准第二是保养项目价格参考——不同项目价格差异大机油 500 元、四轮换位 60 元、常规保养 650 元演进方向是记录常见项目的历史均价并预估下次费用机油保养上次 480 元让用户对保养花费有预期第三是保养提醒推送——记录保养后按周期推送下次提醒距下次机油保养还剩 500km保养页的里程记录驱动首页告警与推送第四是保养记录 OCR——保养单据/支付记录自动识别项目/金额/里程自动填入保养页的四字段是 OCR 的填充分区。这四个方向都从保养页已有的项目与四字段长出来让记一笔变成智能管家。十一、从设计稿到代码的映射把保养页设计稿翻译成代码有几组典型映射第一保养项目映射为流式换行胶囊——设计稿的六个项目选项代码里用流式换行容器包裹六个文本胶囊选中态青蓝底白字、默认选中第一项机油机滤第二两个数字输入映射为单列数字输入组件——设计稿的里程与费用代码里用两个全宽数字输入组件各配灰标签第三店铺输入映射为单列文本输入——设计稿的保养店铺代码里用全宽文本输入组件占位符示范格式第四备注多行映射为文本区域组件——设计稿的备注区代码里用八十高的多行文本区域组件支持换行长文本。这四组映射展示了保养录入页的完整翻译其中多行文本区域是本页区别于其他录入页的技术要点。十二、常见问题 FAQ问保养项目为什么要 6 个而不是更多答6 类覆盖了家用车保养的绝大多数场景——常规保养机油机滤、空调滤芯、更换件轮胎、刹车片、检查件蓄电池、兜底其他。更多细分变速箱油、火花塞、防冻液可通过其他备注记录或产品化后在保养周期菜单自定义项目。6 类是够用且不冗余的平衡。问记录保养时为什么只校验里程答因为里程是保养记录的核心字段——没有里程无法推算下次保养周期下次 本次里程 周期首页的剩余里程就无法更新。费用、店铺、备注是补充信息可后补或留空校验只锁驱动后续计算的字段这与 App 57 加油页校验加油量驱动金额与油耗计算同理。问备注的 TextArea 和普通输入框有什么区别答TextArea 是多行文本区域80 高、支持换行适合记录长内容换了全合成机油、检查了刹车片厚度、建议下次 2 万公里换普通 TextInput 是单行44 高、不支持换行适合短内容店铺名。本页备注用 TextArea 是因为保养内容需要详细记录这是系列录入页中唯一的多行输入。十三、补充要点保养页三个细节再思考第一关于项目胶囊的默认值。默认选中机油机滤数组第一项——机油机滤是最常做的保养每 5000km 一次频率最高默认选中它让多数用户打开就能填不用改选同时它是首页 4 个项目中第一个机油机滤与首页的优先级一致。第二关于店铺占位符的信息价值。例如4S店/维修厂不只是格式示范——它暗示了保养的两种主要渠道4S 店原厂服务 vs 维修厂经济实惠用户填店铺时自然会想这次在哪做的记录店铺后日志页能对比4S 店 vs 维修厂的费用差异占位符引导了信息的记录维度。第三关于四字段的顺序。里程驱动计算→ 费用金额统计→ 店铺来源记录→ 备注细节补充——按核心到补充的顺序排列先填最重要的里程、再填次要的费用店铺、最后填可选的备注用户按顺序填写自然完成从必要到可选的录入。十四、最后总结保养页是车辆保养提醒的录入口也是系列录入型页面的代表。它用项目胶囊解决做了什么保养6 类覆盖用四字段表单解决在多少公里、花了多少、在哪做的里程/费用/店铺/备注用带校验的保存按钮保证记录有效里程必填。整页交互围绕录入效率与数据价值展开项目胶囊默认机油、TextArea 记录细节、里程驱动周期、单一校验降低门槛。从演示到产品保养页的进化路线清晰周期自动推荐、价格参考预估、提醒推送、单据 OCR。作为从保养到记录的入口页面它展示了录入类应用的标准骨架也为首页告警、日志时间轴、累计统计提供了数据基础——没有记录就没有后续的一切管理。四字段每一条都在为其他页面服务这是入口页面的核心价值。十五、补充要点表单交互的细节再思考保养页有几个容易被忽视的交互细节第一输入框的聚焦体验——里程、费用、店铺、备注四个输入框从上到下排列用户应能通过键盘的下一项键在字段间跳转产品化设置回车键的下一步行为减少手指移动第二项目胶囊的即时反馈——点击保养项目立即变色青底白字用户无需等待或确认就能感知选中这次做的是刹车片这种所见即所得的单选交互比下拉列表更轻快第三里程输入的容错——里程是数字输入Number 键盘但用户可能输入带逗号12,580或空格产品化应做输入清洗去逗号空格统一为纯数字第四记录成功的后续动作——当前弹 Toast保养已记录即结束产品化应提供继续记录与返回首页两个动作一次保养可能做多个项目如机油 空调滤芯一起做减少重复操作。这四个细节都围绕录入效率展开把能填完提升为填得快、填得对。十六、最后总结保养页解析至此完整收尾保养项目胶囊、四字段表单、多行备注、保存校验全部覆盖。读者可重点回顾多行文本区域的使用——它是系列录入页中唯一的长文本输入80 高、支持换行匹配保养备注的信息需求也是本页区别于其他录入页的核心实现。车辆保养从这一页开始选项目、填里程费用、记店铺备注每一次保养的数据就这样被捕捉下来。