企业官网建设流程全解析

ArkUI 声明式：保养提醒首页的里程状态卡与三态项目列表

App 58「车辆保养提醒」首页（HomeTab），主题色#008080青蓝（teal），4 个 Tab 分别为首页（🚗）、保养（🔧）、日志（📋）、我的（👤）。首页采用"Header + 状态卡 + 列表"三区布局——白色单行 Header（"保养提醒"22 号加粗）+青蓝渐变状态卡（"当前里程" + 26 号加粗 12,580 km + 🚗 44 号图标 + ⚠️ 半透明警告条"机油还有 500km 到期，刹车片已超期"）+SectionTitle（保养项目）+ 4 条保养项目列表（🛢️ 机油机滤 还剩 500 km 即将到期橙 / 🛞 轮胎更换 还剩 8000 km 正常绿 / 🔋 蓄电池检查 还剩 2000 km 正常绿 / 🛑 刹车片 已超期 200 km 已超期红，每条含 48×48 主色软底图标 + 项目名 + 剩余/超期里程 + 状态胶囊）。本篇基于58-car-maintain/entry/src/main/ets/pages/HomeTab.ets（共 99 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 状态卡 + 列表"布局

首页是"品牌头部 + 车辆状态 + 保养项目"的三区布局——3 个 @Builder 块：

build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.StatusCard() this.SectionTitle('保养项目') this.ItemList() } .width('100%') .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width('100%').height('100%').backgroundColor(C.bg) }

3 块结构：

1. Header— 单行品牌头（"保养提醒"），白底固定
2. StatusCard— 青蓝渐变车辆状态卡（当前里程 + 警告条）
3. ItemList— "保养项目" + 4 条保养项目卡片列表

首页是"保养告警页"——先亮出车辆当前里程（12,580 km）与紧急警告（机油 500km 到期、刹车片已超期），再列出 4 个保养项目（机油机滤/轮胎/蓄电池/刹车片）的剩余/超期状态，让用户一眼掌握"哪些保养该做了、还剩多少公里"。相比 App 57 加油记录（看油耗/油费），本页是"保养周期管理"——核心是"每个保养项目的剩余里程与到期状态"。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：单行品牌头

Header() { Column() { Text('保养提醒').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width('100%').padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 12 }) }.width('100%').backgroundColor(C.card) }

单行 22 号加粗、safeTop + 10避让状态栏、底部 12 内边距、白底全宽。"保养提醒"直白点题（提醒车辆保养的工具），与系列工具型首页（App 45 签到墙 / App 53 保修 / App 57 加油）同款单行标题范式。

三、StatusCard：青蓝渐变车辆状态卡

StatusCard() { Column({ space: 12 }) { Row() { Column({ space: 4 }) { Text('当前里程').fontSize(13).fontColor('#FFFFFF').opacity(0.9) Text('12,580 km').fontSize(26).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text('🚗').fontSize(44) }.width('100%') Row({ space: 8 }) { Text('⚠️').fontSize(14) Text('机油还有 500km 到期，刹车片已超期').fontSize(12).fontColor('#FFFFFF').opacity(0.9).layoutWeight(1) } .width('100%').padding(10).backgroundColor('#33FFFFFF').borderRadius(D.rSm) } .width('100%').padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }

技术拆解：

1. 青蓝渐变：linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })从#008080青蓝渐变到#4DBABA浅青——青色是"车辆/专业维护"的气质色（与机油、保养的工业感契合），系列首次使用青色主题。
2. 当前里程 26 号加粗：12,580 km用 26 号 Bold 白字——车辆当前里程是首页第一信息（所有保养项目的到期判断都基于里程），千位逗号格式（12,580）符合里程表读数习惯。
3. 🚗 44 号图标：右侧大汽车图标——产品符号，装饰 + 点题（车辆保养）。
4. ⚠️ 半透明警告条：backgroundColor('#33FFFFFF')（白色 20% 透明）+ ⚠️ + "机油还有 500km 到期，刹车片已超期"——警告条是首页的核心告警（把最紧急的两件事单独拎出），半透明白底在渐变卡上形成"内嵌标签"效果（与列表的胶囊同手法），12 号 90% 白字可读。
5. 警告内容与列表联动：警告条提到的"机油 500km 到期、刹车片已超期"正是列表前两条（机油机滤即将到期、刹车片已超期）——状态卡 = 紧急项目的汇总告警。

四、ItemList：三态保养项目列表

ItemList() { Column({ space: 10 }) { ForEach(this.items, (m: MaintainItem) => { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(m.nextKm > 0 ? '还剩 ' + m.nextKm + ' km' : '已超期 ' + (-m.nextKm) + ' km') .fontSize(12).fontColor(m.statusColor) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(m.status).fontSize(11).fontColor(m.statusColor) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(m.statusColor + '22').borderRadius(6) } .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() => { promptAction.showToast({ message: m.name }); }) }, (m: MaintainItem) => m.id.toString()) }.width('100%') }

4 个保养项目数据（21-26 行）：

卡片细节：

1. 48×48 主色软底图标块：backgroundColor(C.primarySoft)（#E0F5F5浅青）+ 24 号 emoji——浅青圆角底，每个项目一个专属 emoji（🛢️ 机油/🛞 轮胎/🔋 电池/🛑 刹车），项目类型一眼可辨。
2. 三态剩余/超期：m.nextKm > 0 ? '还剩 N km' : '已超期 N km'——正数显示"还剩"、负数转正显示"已超期"（-200 → "已超期 200 km"），副行颜色用状态色（橙/绿/红）——剩余里程 + 状态色的双编码（与 App 53 保修的三态同手法）。
3. 状态胶囊：右侧m.status（即将到期/正常/已超期）——字色 + 透明底色胶囊（statusColor + '22'≈ 13% 透明底），三态红橙绿：正常绿、即将到期橙、已超期红。
4. 剩余里程差：500 / 8000 / 2000 / -200——覆盖"临期/充足/超期"三种状态（机油 500km 临期、轮胎 8000km 充足、刹车片超期 200km），警示优先级一目了然。
5. 整卡点击：点击 Toast 项目名（"机油机滤"）——产品化后跳保养详情/记录页。

五、跨页数据自洽：保养数字的全局闭环

首页数据与保养、日志、我的三页形成完整闭环：

• 首页"当前里程 12,580 km"↔ 保养页"保养里程 12580"、我的页"本田雅阁 · 12,580 km"——里程完全一致（12,580 km 贯穿三页），首页展示、保养页录入、我的页标识。
• 首页"刹车片已超期 200km"↔ 状态卡警告条——首页的刹车片超期正是状态卡警告条提到的"刹车片已超期"，列表明细 → 状态卡汇总。
• 首页"机油机滤 500km"↔ 状态卡"机油还有 500km 到期"——剩余里程一致（500km），警告条 = 列表最紧急项的放大。
• 首页"机油机滤"↔ 日志页"机油机滤更换 12080 km ¥480"——日志页记录的是最近一次机油保养（2026-07-28 在 12080 km），首页"还剩 500km"由上次保养里程（12080）+ 周期推算（下次约 13080，当前 12580 还剩 500），保养日志 → 剩余里程推算。
• 首页"刹车片已超期"↔ 保养页"刹车片"项目——保养页可记录刹车片更换（记录后首页状态更新），记录 → 状态刷新。

六、系列横向对比：车辆工具三兄弟

把 58 的首页放进系列对比，特点鲜明：

• App 58 车辆保养提醒（青#008080）：里程状态卡 + 三态保养列表——"保养周期"式首页，首屏即剩余里程告警。
• App 57 加油记录（橙#FF6B35）：油耗卡 + 快查统计——"油耗性能"式首页。
• App 56 停车记录（深灰#2D3436）：费用汇总 + 双态列表——"出行费用"式首页。
• App 53 保修管理（绿#00A862）：三态汇总 + 商品列表——"保修周期"式首页。

58 与 53 都是"剩余里程/天数的三态告警"首页（在保绿/临期橙/超期红），但对象不同：53 是"商品保修"（剩余天数）、58 是"车辆保养"（剩余公里）——同一告警模型、不同计量单位（天 vs km）。58 的差异化在于**"状态卡带警告条"**：渐变卡内嵌 ⚠️ 半透明警告条（把最紧急的两件事单独提示），比纯列表多一层"总告警"，且警告条内容与列表首条联动，这是系列中"告警卡"的加强版。

七、开发者避坑：保养列表的四个细节

从 HomeTab 的实现提炼四个易踩坑点：

1. 剩余里程动态计算：nextKm是写死的（500/8000/2000/-200）——产品化由"下次保养里程 - 当前里程"实时计算（下次保养里程 = 上次保养里程 + 保养周期），随当前里程（加油记录同步）每天变化，跨过 0 时状态自动从"即将到期"变"已超期"。
2. 负数转正的展示：已超期 ' + (-m.nextKm) + ' km'——超期用负值存储、展示时取负转正（-200 → 200），数据结构用负数表示"超出多少"（与 App 53 的 daysLeft 负数同手法），判断状态看正负、展示文案取绝对值。
3. 三态阈值：当前状态是数据写死（即将到期/正常/已超期）——产品化按 nextKm 动态判定（>1000 正常、≤1000 即将到期、≤0 已超期），阈值（1000km）应由保养周期配置驱动，避免"列表标正常但用户觉得该保养"的矛盾。
4. 警告条的内容生成：警告条文案是写死的——产品化由列表动态生成（取最紧急的 1-2 项拼接"XX 还有 N km 到期，YY 已超期"），保证警告条与列表实时同步，避免"警告说刹车片但列表刹车片更新了"的不同步。

八、常见问题 FAQ

问：12,580 km 是什么时候的里程？答：演示数据设定为"当前里程"（车辆最新的仪表读数，来自最近一次加油/保养记录）——所有保养项目的"还剩多少公里"都以它为基准计算。产品化后当前里程与加油记录同步（每次加油更新里程），保养剩余里程实时刷新。

问：为什么机油还有 500km、刹车片却已超期 200km？答：两个项目的保养周期不同——机油机滤每 5000 公里换一次（上次 12080 换的，下次约 17080？演示简化设定下次 13080，当前 12580 还剩 500），刹车片通常 2-3 万公里换但演示设定已到周期（当前里程超过计划保养里程 200km 说明车主超期未换）——不同项目周期各异，列表展示各自的剩余/超期状态。

问：状态卡的颜色（青蓝）和状态颜色（红橙绿）是什么关系？答：主题色青蓝是"应用的脸"（品牌色，用于渐变卡、图标底、选中态），红橙绿是"状态语义色"（正常绿/即将到期橙/已超期红，用于项目状态）——两套色系分工：主题色管"页面的整体观感"、状态色管"具体项目的好坏"，互不冲突（App 53/55 同手法）。

九、验收与总结

本篇对 58-car-maintain 首页（HomeTab，99 行）做了逐块拆解：

• 三区结构：Header（保养提醒）+ StatusCard（青蓝渐变状态卡 + 警告条）+ ItemList（三态保养项目列表）
• 核心交互：保养项目点击 Toast（详情入口）、状态胶囊三态（橙/绿/红）
• 主题色：#008080青蓝 →#4DBABA浅青渐变，警告条半透明白底
• 数据闭环：首页 12580 → 保养页 12580 → 日志页 12080+周期，警告条 = 列表紧急项汇总

首页是车辆保养提醒的"告警总览"——先看当前里程（12,580 km）、再读紧急警告（机油 500km/刹车片超期）、最后扫全部项目（4 项红橙绿），一屏完成"哪些保养该做了"的完整认知。

十、扩展思考：从保养提醒到车辆健康管家

首页的保养数据可以演进成"车辆健康管家"：第一是保养计划自动生成——当前 4 个项目的剩余里程是独立展示，演进方向是"按保养周期自动排程"（机油每 5000km、刹车片每 3 万 km、蓄电池每 2 万 km 自动生成下次保养计划，形成"保养日历"），首页的项目列表是自动排程的展示；第二是异常预警分级——刹车片已超期（红色）应该比机油即将到期（橙色）更紧急，演进方向是"紧急度分级推送"（超期项目每日提醒、临期项目每周提醒），首页的三态颜色是分级的基础；第三是保养费用预估——每个项目到期前预估费用（机油保养约 500 元、刹车片更换约 800 元），演进方向是"下次保养预算"（本月机油到期预算 500 元），让用户对养车成本有预期；第四是车辆健康分——综合各项目状态生成"车辆健康分"（刹车片超期扣 20 分、机油临期扣 10 分），演进方向是首页顶部展示健康分（90 分 = 良好），让用户一眼知道"车整体状态好不好"。这四个方向都从首页已有的保养项目状态长出来，让"提醒保养"变成"管理健康"。

十一、从设计稿到代码的映射

把首页设计稿翻译成代码，有几组典型的映射：第一，"渐变状态卡"映射为"渐变色容器加两级文本加警告条"——设计稿顶部的青蓝渐变卡，代码里用渐变背景容器内放里程标签与 26 号数值、右侧汽车图标、底部半透明警告条；第二，"三态剩余里程"映射为"条件判断切换文案与颜色"——设计稿里正常绿、临期橙、超期红，代码里用剩余里程正负与状态色字段控制文字（还剩/已超期）与颜色；第三，"状态胶囊"映射为"字色加透明底色容器"——设计稿的项目状态标签，代码里用状态色文字加状态色透明底的小胶囊；第四，"图标块"映射为"浅青圆角容器"——设计稿的保养项目图标块，代码里用四十八乘四十八浅青底加十圆角容器内嵌表情图标。这四组映射说明：设计稿的每个视觉差异（颜色、文案、胶囊）在代码里都有对应的条件逻辑与属性差异，好的还原度来自"设计参数到代码逻辑"的完整对应。

十二、常见问题 FAQ

问：为什么机油和刹车片的剩余里程差这么多？答：因为两个项目的保养周期不同——机油机滤的更换周期短（约 5000 公里），上次 12080 km 换的，下次约 13080 km，当前 12580 还剩 500 km；刹车片的更换周期长（约 3 万公里），但演示数据设定它的计划保养里程已过（当前里程超过计划里程 200 km 说明超期未换）——不同项目周期各异，剩余里程反映各自"距下次保养还差多少"。

问：首页的"当前里程 12,580 km"会变化吗？答：演示数据写死 12,580 km，产品化后当前里程与加油记录同步（每次加油更新仪表里程），当前里程变化后所有保养项目的"剩余里程"实时刷新（剩余 = 下次保养里程 - 当前里程），车辆开到 13,080 km 时机油"还剩 0km"到期、再开就变"已超期"。

问：状态卡的警告条为什么只提机油和刹车片？答：因为这两个是最紧急的项目——机油还剩 500km（即将到期）和刹车片已超期（已超期）是 4 个项目中"需要马上关注"的两个，警告条把最紧急的 1-2 项单独提示（而不是把 4 项全列出来，那样就不叫"警告"了）。产品化后警告条动态取"最紧急的前两项"生成文案，与列表实时同步。

十三、补充要点：首页三个细节再思考

第一，关于警告条的半透明设计。警告条用白色百分之二十透明底（#33FFFFFF）内嵌在渐变卡中——"卡中卡"的层次感让警告条从渐变背景中浮出来但不突兀（与列表胶囊的半透明底同手法），若用纯白底会显得生硬、若不用底则警告文字直接压在渐变上可读性差，半透明底是"内嵌标签"的标准处理。第二，关于里程的千位格式。"12,580 km"用千位逗号（12,580）——汽车仪表里程表通常显示千位分隔，符合用户阅读里程的习惯（12580 三位数以上无分隔易读错），产品化应统一里程格式化（千位逗号）。第三，关于三态颜色的语义强度。红色（已超期）> 橙色（即将到期）> 绿色（正常）——三种颜色的视觉重量递减，对应"紧急度"递减（超期最紧急、临期次之、正常不打扰），用户扫列表时红色最先被注意，这与 App 53 保修的三态（绿/橙/红）完全一致，系列"状态三色"语义统一。

十四、最后总结

首页作为车辆保养提醒的第一屏，承担着"告警总览"的职责——用青蓝渐变状态卡交代当前里程（12,580 km）与紧急警告（机油 500km/刹车片超期），用三态保养项目列表交代 4 个项目的剩余/超期状态（机油橙、轮胎绿、电池绿、刹车红）。整页的视觉语言围绕"剩余里程"展开：里程 26 号大字是基准、警告条是总告警、三态胶囊是分项状态，三层表达让用户既看到"车现在什么里程"也看到"哪些保养该做了"。从演示到产品，这个骨架预留了完整升级空间：剩余里程可以实时计算、保养计划可以自动排程、警告条可以动态生成、健康分可以综合评估。作为系列第 58 号应用，它延续了"骨架统一、亮点各异、数据自洽"的方法论——青蓝渐变是视觉签名、三态告警是产品灵魂、四页同源是数据保证。车辆保养提醒的本质不是记录保养，而是"在保养到期前提醒你、让你不脱保"，首页就是这层守护的第一道防线。

十五、补充要点：状态卡与列表的联动再思考

状态卡与保养项目列表之间除了"告警对账"，还有一层"视觉引导"的关系：状态卡的警告条"机油还有 500km 到期，刹车片已超期"恰好是列表中最紧急的两项（机油机滤橙色即将到期、刹车片红色已超期）——警告条给"最紧急的事"、列表给"全部项目状态"，两级信息层级完成"聚焦到浏览"的引导。另外，列表顺序也值得注意：机油机滤（500km 临期）排第一、刹车片（已超期）排最后——演示数据按"项目重要性"排列（机油是最频繁的保养），产品化建议按"紧急度"排序（刹车片超期应置顶，红色最紧急的排最上），让用户优先看到最该处理的项目。还有一点，警告条的文字用 12 号、列表副行也用 12 号——两处同字号但警告条是白字（渐变卡上）、列表副行是彩色（白卡上），白字警告比彩色副行更醒目（高对比），符合"警告要突出"的设计。这些联动细节共同说明：首页不是静态数据陈列，而是一套"总告警到分项目"的引导系统，每个颜色、每个顺序都在为用户导航。

十六、最后总结

首页解析至此完整收尾：从青蓝渐变状态卡到警告条，从三态保养项目列表到紧急度排序，全部要点均已覆盖。读者可对照源码逐行验证文中引用的代码片段——状态卡的里程大字与半透明警告条、三态剩余里程的条件渲染、状态胶囊的透明底色，理解"保养告警"首页的设计思路。车辆保养提醒的首页是一扇窗：透过 12,580 km 的当前里程、机油与刹车片的紧急警告和四张保养项目卡，车主看清了车辆当前最需要处理的保养事项，这是车辆保养提醒应用价值的第一落点。