本系列基于我们自己开发的一款 HarmonyOS 原生时间管理应用，目前已经适配了手机、平板和鸿蒙电脑三种设备形态。这一篇组要是从整体来讲讲，我们怎么通过一套代码实现在多端上运行。

数据模型通过finishedAt判断是否完成，通过关联记录成绩。挑战详情页：开始/继续/放弃/删除挑战，条件警告已写入的成绩不受影响。在成绩数达标时自动调用完成挑战；修改罚时后重新计算平均。计时页面：四阶段状态机，长按手势 + 键盘空格双操控，观察 15s 自动判罚，完成后弹出结果并返回。退出确认：三种决策（继续/暂存/放弃），无进度时直接退出。成绩详情：根据区分两种编辑路径，双向同步保持一致。W

数据模型通过finishedAt判断是否完成，通过关联记录成绩。挑战详情页：开始/继续/放弃/删除挑战，条件警告已写入的成绩不受影响。在成绩数达标时自动调用完成挑战；修改罚时后重新计算平均。计时页面：四阶段状态机，长按手势 + 键盘空格双操控，观察 15s 自动判罚，完成后弹出结果并返回。退出确认：三种决策（继续/暂存/放弃），无进度时直接退出。成绩详情：根据区分两种编辑路径，双向同步保持一致。W

Stack 三层叠加：主内容 + FAB + 新增面板，互不干扰。80×80 头像：全 App 最大的头像，详情页的视觉锚点。**双向绑定∗∗：编辑态下的输入框用双向绑定**：编辑态下的输入框用 `双向绑定∗∗：编辑态下的输入框用` 实时同步，省去手动 onChange。三指标卡：1+2 排列，城市全宽、亲密度和生日半宽，描边风格适合密集排列。空值引导：“+添加城市”、"+评定星级"用蓝色暗示可点

这个系列我们会从零开始，基于 HarmonyOS 6 开发一个宠物商店应用。整个系列会以"功能模块"为主线逐步推进。项目结构怎么组织。深色模式怎么适配（颜色不要写死）。底部悬浮导航怎么做。底部页签栏需要展示文字，我们通过@Builder@BuilderColumn() {Text(text)})这里没有用系统图标，我们先只展示文字。后续可以替换为图标。

问候区域：时间感知 + 动态待办数，让用户感到被理解。水平滑动提醒：信息密度高、不占纵向空间、交互自然。颜色即信息：标签颜色区分紧急程度、头像颜色区分类型和亲密度。深色统计收尾：渐变背景 + 大号数字，形成视觉锚点。底部留白 140vp：给悬浮导航栏留出安全距离。统一的暖色体系：从背景到文字到强调色，保持温暖调性。“维系"页面是用户打开 App 的第一印象。好的首页设计，不是堆砌信息，而是让用户在

最后一个列表项后面不需要分隔线。这个判断确保分隔线只出现在两个列表项之间。搜索栏：48vp 胶囊形 TextInput，描边而非填充，实时搜索覆盖姓名/关系/标签/城市四个维度。clip(true)：列表容器加圆角 + 裁剪，确保列表项不超出圆角范围。44×44 圆角方块头像：统一蓝色背景，和首页的 52×52 正圆头像形成区分。条件渲染职称：过滤掉"待完善"等占位文字，列表更干净。Divider

单一卡片纵向重复：页面结构极简，重点全在卡片设计上。头像 + layoutWeight：固定头像宽度，右侧信息弹性填充。accentColor 贯穿卡片：头像、关系标签、星标共用一个主色，一张卡片一个色调。ForEach 渲染星标：5 颗星根据亲密度动态亮灭，两色区分。Flex 自动换行标签：标签数量不确定时，是最稳妥的方案。分隔线划分区域：头部信息和备注之间用浅色 Divider 隔开，比留白更

最简单的纵向流式布局，间距统一管理。三指标行等宽 + 语义配色，一眼区分统计/行动/反馈。优先人物卡片：左图右文 + 描边药丸里程碑 + 三级灰度文字，信息层次清晰。快捷入口：48×48 圆形浅底深字 + 单字图标，比系统图标更直观。近期待办：4vp 左侧色条是视觉锚点，轻卡片适配多行列表。Theme 工具类：所有颜色通过获取，暗色模式零成本适配。间距三档：24 / 14-20 / 6-12，大中

筛选栏：深底/白底药丸切换，选中态对比强烈，后续可加横向 Scroll 适配窄屏。三段式卡片：图标行 + 标题行 + 详情文字，信息层次清晰。左侧图标：44×44 圆角方块（非圆形），图标和颜色随类型变化。标题行双结尾：有金额显示数字，无金额显示"低成本"标签，用保证标题不挤压金额。"+ 记录"纯文本：当前靠颜色暗示可点击，后续可加背景做成药丸按钮或轻量按钮。卡片尺寸介于提醒和档案之间：paddi