智能家居IoT实战：HarmonyOS API 24下灵犀智家深青科技主题、6Tab差异化布局与设备开关场景联动能耗安防的完整拆解

在物联网深度普及的今天，智能家居已经从"单品智能"走向"全屋联动"，而一个好的智能家居App能让全屋设备尽在掌握。本文完整拆解一个基于鸿蒙 HarmonyOS API 24 与 ArkUI 声明式框架构建的「灵犀智家」智能家居IoT应用，覆盖深青科技主题配色系统、家居头部全屋总览三卡、深青渐变视觉语言、6Tab差异化布局（首页常用设备网格+房间横滑+设备动态/设备分组开关列表/场景大卡+自动化联动/能耗柱状图+耗电排行+省电建议/安防摄像头网格+告警时间轴/我的家庭成员+房间管理）、双动画状态联动、房间六色动态着色、设备图标九种动态映射、Circle自定义开关组件、场景互斥激活、能耗柱状图动态双色渐变、耗电排行等级标签、摄像头录制状态三态、告警时间轴竖线、家庭成员在线状态、新建自动化弹窗跳转、设备改名与解绑三大弹窗、弹窗共享editIdx索引、splice替换对象响应式更新等核心技术点，附完整源码与运行效果截图。

---

一、引言：从单品智能到全屋联动

随着物联网技术的深度普及，智能家居已经从早期的"单品智能"（一个智能灯泡、一个智能插座）快速演进到"全屋联动"（灯光、空调、窗帘、安防、能耗协同工作）。然而，设备品牌碎片化、App操作繁琐、场景联动配置复杂、能耗不透明、安防告警滞后，正成为智能家居用户的现实痛点。一个优秀的智能家居App，不仅需要覆盖从"设备控制"到"场景联动"再到"能耗安防"的完整业务闭环，还要在常用设备、房间分区、场景模式、自动化规则、能耗统计、摄像头安防、家庭成员管理等维度做到精准而高效。

正是在这样的背景下，灵犀智家类智能家居IoT应用应运而生，并迅速成为智慧家庭的控制中枢。一个优秀的智能家居应用，需要以首页为核心入口，横向扩展出设备、场景、能耗、安防、我的六大功能模块，每个模块采用完全不同的布局风格——首页=常用设备网格+房间横滑+设备动态、设备=分组开关列表、场景=场景大卡+自动化联动、能耗=柱状图+耗电排行+省电建议、安防=摄像头网格+告警时间轴、我的=家庭成员+房间管理，形成了一个完整闭环的智能家居控制生态。它不仅是一个功能完备的演示项目，更是一份典型的 ArkUI 工程实践范本，涵盖了状态管理、组件化设计、Stack弹窗叠加、双动画状态联动、深青科技视觉语言、Circle自定义开关组件、场景互斥激活、能耗柱状图动态双色渐变、告警时间轴竖线、splice替换对象响应式更新等关键技术点。

---

二、应用整体架构概览

整个应用采用了"单入口 + 6Tab单排差异化布局 + Stack弹窗叠加"的智能家居应用架构。入口组件 Page820 作为整个应用的根容器，负责管理当前激活的 Tab 状态、双动画状态以及三个弹窗的显隐状态。

应用一共划分为六个一级页面：首页（HOME）、设备（DEVICE）、场景（SCENE）、能耗（ENERGY）、安防（SECURITY）以及我的（MINE）。与之前项目"5Tab单排"不同，本应用扩展为"6Tab单排"的底部导航布局——首页🏠/设备🔌/场景🎬/能耗⚡/安防🛡️/我的👤，底部 tabBar 激活态 teal 青绿字加粗，非激活 text3 灰字，通过 ForEach 遍历 TAB_LIST 构建，每个 Tab layoutWeight 1 等分宽度。六个Tab每个布局完全不同——首页采用常用设备网格+房间横滑+今日设备动态、设备采用房间筛选+分组开关列表、场景采用场景大卡（激活/未激活双色渐变）+自动化联动列表、能耗采用能耗总览+每日柱状图动态双色渐变+耗电排行+省电建议、安防采用摄像头网格（录制三态）+告警时间轴竖线、我的采用用户卡三栏统计+家庭成员横滑+房间管理+设置，这种"一页一型"的差异化设计最大程度还原了真实智能家居App的交互体验。

在数据层面，应用定义了一套完整的类型系统，包括色彩主题、智能设备元数据、场景模式元数据、自动化规则元数据、摄像头元数据、告警记录元数据、家庭成员元数据，并通过常量数组将数据与 UI 表现层解耦。所有业务数据以 @Observed 装饰的可观察类为载体（SmartDevice/SceneMode/AutoRule/CameraItem/AlertRecord/FamilyMember），配合 10 台智能设备、5 个场景模式、5 条自动化规则、4 个摄像头、6 条告警记录、4 位家庭成员的模拟数据，模拟了一个真实的智能家居数据环境。所有数据类都带有 constructor 构造函数，使用 new ClassName(...) 方式实例化。应用还定义了 16 个工具函数（roomColor房间六色/devIcon设备图标九种/statusText/levelTag/levelColor/alertIcon/powerBarH/rankPercent/roomDevCount/roomIcon/toggleDev/renameDev/activateScene/toggleRule/toggleRecord），将颜色映射、数据计算、状态切换、增删改逻辑从 UI 层抽离，实现数据与逻辑分离。

在交互层面，应用通过 Stack 布局叠加实现了三类弹窗的显示：新建自动化、修改设备名称、解绑设备。与之前项目"每个弹窗独立 Stack 叠加"一致，本应用三个弹窗各自独立 Stack 叠加，共享 modalOverlay 统一遮罩封装（全屏 mask 遮罩 + 点击关闭）。特别的是，本应用的弹窗数据状态设计十分精细——addModal 新建自动化包含 addName/addTrigger/addAction 三个输入状态（名称/触发条件/执行动作），确认后 ruleList.unshift 新 AutoRule（Date.now id，默认名称我的自动化/触发手动触发/动作通知全家，enabled true）并 tabIdx=2 跳场景页；editModal 修改设备名称包含 editIdx/editName 状态（editIdx 记录要修改的设备索引，editName 预填原设备名），确认后调用 renameDev（splice替换对象）；delModal 解绑设备复用 editIdx 状态记录要删除的设备索引，确认后 devList.splice(editIdx,1) 按索引直接删除。三个弹窗中 editModal 和 delModal 共享 editIdx 状态实现设备索引的传递，减少了重复状态定义，addModal 确认后自动跳转场景页体现了"创建即查看"的交互设计。

在视觉层面，本应用独创了"深青科技主题"设计——bg #E9F3F1 深青科技底，teal #0E8C7F 青绿为主色，tealD #0A6B60 深青绿为深色，amber #E8A33D 琥珀为辅助色，title #123B35 深青黑而非纯黑，与深青科技底形成高对比度的同时带有科技沉稳质感。应用的渐变设计是色彩系统的核心亮点——首页睡眠模式 Banner 使用 linearGradient 135 度从 tealD #0A6B60 深青绿到 teal #0E8C7F 青绿的两色渐变，我的用户卡使用 linearGradient 135 度从 tealD #0A6B60 深青绿到 teal #0E8C7F 青绿的两色渐变（与首页 Banner 同色），场景大卡激活态使用 135 度深青绿→青绿渐变、未激活态使用 135 度 purple #8A5FC0 紫到 blue #3D7DC8 蓝的两色渐变（激活/未激活用不同渐变区分），能耗柱状图使用动态双色渐变（≥10度用 180 度 amber 琥珀→red 红渐变，<10度用 180 度 teal 青绿→tealD 深青绿渐变），多种不同角度和配色的深青渐变贯穿整个应用，形成了统一而丰富的深青渐变视觉语言，是本应用色彩设计的核心特色。家居头部采用全屋总览三卡（36台在线青绿chip底/8.2°室外温度蓝白底/42%室内湿度琥珀白底）+天气环境条（全屋安防已布防绿字+多云空气优蓝字），是本应用头部的特色设计。应用还独创了"双动画状态联动"设计——aboutToAppear 中 setInterval 700ms 同时切换 breath 和 pulse 两个布尔动画状态，breath 用于首页睡眠模式 Banner 🌙 图标 animation（duration 700ms EaseInOut）、常用设备图标 animation（duration 700ms）、场景大卡图标 animation（duration 700ms）、能耗柱状图 animation（duration 700ms）、安防摄像头画面 animation（duration 700ms），pulse 状态预留用于后续扩展，两个动画状态形成整体协调的联动动效体系。

下面逐页展示应用的六大功能模块运行效果。

---

三、首页：睡眠模式Banner、常用设备网格与房间横滑

首页以"全屋控制"为核心，独创"活动Banner+常用设备网格+房间横滑+今日设备动态"的四层复合布局。

页面顶部第一部分是睡眠模式活动 Banner，Column 包裹 space 10，padding 16，圆角 18，linearGradient 135 度从 tealD #0A6B60 深青绿到 teal #0E8C7F 青绿的两色渐变：

• 问候信息行：Row space 10，问候信息列（layoutWeight 1，左对齐）："晚安，David"白字15号加粗 + "已为您开启睡眠模式 · 灯光调暗至 10%"白字0.85透明度9号 + 🌙月亮图标34号，带 breath animation（duration 700ms EaseInOut），月亮图标随 breath 状态微动，营造睡眠氛围。
• 环境执行行：Row space 8，"室内 24.5℃ · PM2.5 优"白字0.85透明度9号 + Column layoutWeight 1 + “一键执行 >”#FFE082琥珀金字10号加粗。

第二部分是常用设备网格，标题"⚡ 常用设备"加粗13号 + Flex wrap 遍历 devList 10 台设备，每台设备 Column 包裹 space 6，width 23%，padding 10，白底圆角14，margin 4，alignItems Center，border 1px line 色，包含：

• 设备图标：devIcon(d.kind) 24号（灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌），width 48 height 48 圆角16，背景色 d.on ? chip青绿底 : dark深青底，textAlign Center，带 breath animation（duration 700ms）。
• 设备名：d.name title深青黑字9号加粗 maxLines 1。
• 状态值：d.on ? d.value : “已关闭”，d.on时teal青绿字否则text3灰字8号。
• 点击事件：onClick(() => { this.tabIdx = 1; })，点击任意常用设备跳转到设备页（tabIdx=1）。

10 台常用设备覆盖九大类型：客厅吸顶灯（灯，亮度72%，3.2度）、卧室空调（空调，26℃节能，12.6度）、全屋扫地机（扫地机，待机，1.8度）、书房窗帘（窗帘，展开40%，0.4度）、婴儿房加湿器（加湿器，湿度55%，0.9度）、入户智能锁（门锁，已上锁，0.2度）、客厅摄像头（摄像头，云台巡航，2.1度）、客厅音箱（音箱，待机，0.6度）、厨房净水器（插座，滤芯78%，1.1度）、卫浴浴霸（插座，待机，4.5度）。设备图标九种动态映射（devIcon函数），开启时chip青绿底+teal青绿字显示当前值，关闭时dark深青底+text3灰字显示"已关闭"，两态区分清晰，点击跳设备页，是本应用首页常用设备网格设计的核心亮点。

第三部分是房间分区横滑，标题"🚪 房间分区"加粗13号 + Scroll horizontal 遍历 ROOM_LIST 8 个房间（全屋/客厅/卧室/厨房/书房/卫浴/玄关/庭院），每个房间 Column 包裹 space 6，width 78，padding 10，白底圆角14，alignItems Center，border 1px line 色，包含：

• 房间图标：devIcon(‘插座’) 22号，width 54 height 54 圆角27 dark底 textAlign Center。
• 房间名：r title深青黑字10号加粗。
• 点击事件：onClick(() => { this.roomFilter = r; this.tabIdx = 1; })，点击房间设置 roomFilter 筛选条件并跳设备页（tabIdx=1），实现房间筛选跳转。

8 个房间覆盖全屋/客厅/卧室/厨房/书房/卫浴/玄关/庭院，点击房间跳设备页并自动筛选该房间设备，是本应用首页房间横滑导航设计的亮点。

第四部分是今日设备动态，标题行 Row space 8："🤖 今日设备动态"加粗13号 layoutWeight 1 + "全部 >"teal青绿字9号 + 遍历 alertList 6 条告警，每条告警 Row space 12，padding 12，白底圆角14，border 1px line 色，alignItems Center，包含：

• 告警图标：alertIcon(a.level) 22号（高🚨/中⚠️/低ℹ️），width 44 height 44 圆角14 dark底 textAlign Center。
• 告警信息列（layoutWeight 1，左对齐）：a.title title深青黑字11号加粗 maxLines 1 + a.detail sub灰字9号 maxLines 1。
• 时间：a.time text3灰字8号。

6 条告警覆盖三级：陌生人在门口停留（高，今天09:42）、门锁多次试错（中，今天08:15）、净水器滤芯提示（低，昨天20:30）、婴儿房温度偏高（中，昨天14:02）、扫地机完成清扫（低，昨天10:18）、后院摄像头离线（高，08-18 22:41）。告警图标三级动态映射（alertIcon函数），标题+详情+时间三栏布局，是本应用首页设备动态设计的亮点。

---

四、设备页：房间筛选与Circle自定义开关

设备页以"全部设备控制"为核心，采用"房间筛选横滑+分组开关列表"的布局。

页面顶部第一部分是标题"🔌 全部设备 · " + roomFilter 加粗13号 margin 下 12，roomFilter 动态显示当前筛选房间（默认"全部"）。

第二部分是房间筛选横滑，Scroll horizontal 遍历 7 个房间（全部/客厅/卧室/厨房/书房/卫浴/玄关），每个房间 Text 10 号，选中（r === roomFilter）时白字 teal 青绿底，未选中时 sub 灰字白底 border 1px line 色，padding 左右 14 上下 7，圆角 16，点击切换 roomFilter。选中态青绿底高亮，与首页房间横滑跳转形成呼应（首页点击设置roomFilter后跳设备页，此处显示选中态）。

第三部分是设备开关列表，遍历 devList 10 台设备，使用 if 条件筛选（roomFilter === ‘全部’ || d.room === roomFilter），每台设备 Row space 12，padding 12，白底圆角14，border 1px line 色，alignItems Center，包含：

• 设备图标：devIcon(d.kind) 24号，width 50 height 50 圆角16，背景色 d.on ? chip青绿底 : dark深青底，textAlign Center。
• 设备信息列（layoutWeight 1，左对齐，space 5）：
  • 名称房间行：Row space 6，设备名（title深青黑字11号加粗 maxLines 1 layoutWeight 1）+ 房间标签（d.room，roomColor(d.room)动态着色8号，dark底圆角6 padding 左右6上下2）。
  • 状态值：statusText(d.on) + " · " + d.value，d.on时teal青绿字否则text3灰字9号。
  • 今日耗电：“今日耗电 " + d.kwh.toFixed(1) + " 度”，text3灰字8号。
• 操作列（右对齐，space 8）：
  • Circle自定义开关：Row 包裹两个Circle组件，外层 Row width 44 height 22 圆角11，背景色 d.on ? teal青绿 : darkL深青，justifyContent End，padding 左右2，点击 toggleDev(this.devList, i)。内层两个Circle：大Circle width 22 height 22，fill d.on ? teal青绿 : darkL深青，stroke card白 strokeWidth 2；小Circle width 10 height 10，fill card白，margin right d.on ? 3 : 13（开启时小圆在右3px，关闭时在右13px即左侧），两个Circle都绑定 onClick toggleDev。Circle组件构建自定义开关，开启时青绿底+小圆在右，关闭时深青底+小圆在左，点击toggleDev切换on状态（splice替换对象），是本应用设备页最具技术特色的设计。
  • 编辑删除行：Row space 8，✏️编辑12号（点击触发editModal，editIdx=i，editName=d.name预填）+ 🗑️删除12号（点击触发delModal，editIdx=i）。

10 台设备与首页常用设备数据一致，但布局不同——设备页用横向信息卡+Circle自定义开关+编辑删除，首页用网格小卡+状态值，两页差异化布局避免重复。房间筛选（roomFilter）实现按房间过滤设备，roomColor房间六色动态着色（客厅teal/卧室blue/厨房amber/书房purple/卫浴pink/其他green），Circle自定义开关用两个Circle组件构建（非系统Switch），开启/关闭两态清晰，toggleDev用splice替换对象切换on状态并更新value（开启时"已开启"/关闭时"待机"），是本应用设备页交互设计的核心亮点。编辑触发editModal（预填原设备名），删除触发delModal（二次确认），形成了完整的设备管理改名+解绑闭环。

---

五、场景页：场景大卡双色渐变与自动化联动

场景页以"场景模式+自动化"为核心，采用"场景大卡网格+自动化联动列表"的两层布局。

页面顶部第一部分是标题行，Row space 8："🎬 场景模式"加粗13号 layoutWeight 1 + "＋ 新建"teal青绿字10号加粗，chip底圆角12 padding 左右12上下6（点击触发addModal新建自动化弹窗）。

第二部分是场景大卡网格，Flex wrap 遍历 sceneList 5 个场景，每个场景 Column 包裹 space 8，width 48%，padding 14，圆角16，margin 4，alignItems Center，linearGradient 135 度动态双色渐变（s.active ? [[tealD,0],[teal,1]] 深青绿→青绿 : [[purple,0],[blue,1]] 紫→蓝），点击 activateScene(this.sceneList, s.id) 互斥切换，包含：

• 场景图标：s.icon 30号，width 56 height 56 圆角28，rgba(255,255,255,0.25)半透明白底 textAlign Center，带 breath animation（duration 700ms EaseInOut）。
• 场景名：s.name 白字12号加粗。
• 场景描述：s.desc 白字0.8透明度8号 maxLines 2。
• 执行状态：s.active ? "✓ 执行中 · " + s.devices + “台设备” : s.devices + “台设备联动”，active时#FFE082琥珀金字否则白字0.7透明度8号。

5 个场景：回家模式（🏡，开灯·开空调·播音乐·窗帘展开，6台，激活中）、离家模式（🚪，关灯·关空调·布防·扫地机出发，9台，未激活）、观影模式（🎬，调暗灯光·放下窗帘·开音箱，4台，未激活）、睡眠模式（🌙，只留夜灯·空调静音·门锁反锁，5台，未激活）、起床模式（⏰，窗帘全开·灯光渐亮·播报天气，3台，未激活）。场景大卡激活态用深青绿→青绿渐变（与首页Banner/我的用户卡同色），未激活态用紫→蓝渐变（区分激活/未激活），点击activateScene互斥切换（遍历全部场景，选中切换active其他设false，确保同一时间只有一个场景激活），是本应用场景页最具特色的设计。"＋新建"按钮触发addModal新建自动化弹窗，创建后自动跳场景页（tabIdx=2），体现"创建即查看"的交互设计。

第三部分是自动化联动标题行，Row space 8："🤖 自动化联动"加粗13号 layoutWeight 1 + ruleList.length + " 条规则"text3灰字9号。

第四部分是自动化规则列表，遍历 ruleList 5 条规则，每条规则 Row space 12，padding 12，白底圆角14，border 1px line 色，alignItems Center，包含：

• 触发动作标签列（左对齐，space 4）：触发条件标签（r.trigger，amber琥珀字9号，chip底圆角6 padding 左右6上下2）+ 执行动作标签（r.action，teal青绿字9号，dark底圆角6 padding 左右6上下2）。
• 规则信息列（layoutWeight 1，左对齐，space 4）：规则名（r.name title深青黑字11号加粗）+ “当「” + r.trigger + "」 → " + r.action（sub灰字9号 maxLines 1）。
• 开关：Column 包裹 Circle自定义开关（与设备页同款，width 40 height 20，r.enabled ? teal青绿 : darkL深青，小Circle margin right动态），点击 toggleRule(this.ruleList, r.id) 按ID切换enabled。

5 条自动化规则：日落自动开灯（每天18:40日落→打开客厅灯·亮度80%，启用）、湿度自动调节（卧室湿度<45%→打开加湿器，启用）、离家人感联动（全屋无人超过10分钟→关闭全部灯光，启用）、深夜省电（每天23:30→空调切换节能模式，未启用）、门窗异常（门磁触发且已布防→推送告警·开始录像，启用）。触发条件用amber琥珀字标签，执行动作用teal青绿字标签，"当「触发」→ 动作"的自然语言描述让规则逻辑一目了然，Circle开关控制启用/未启用，toggleRule按ID切换enabled（splice替换对象），是本应用场景页自动化联动设计的核心亮点。4条启用1条未启用，覆盖时间触发/环境触发/ presence触发/异常触发四大自动化类型。

---

六、能耗页：动态双色渐变柱状图与耗电排行

能耗页以"全屋能耗统计"为核心，采用"能耗总览+每日柱状图动态双色渐变+耗电排行+省电建议"的四层布局。

页面顶部第一部分是标题"⚡ 全屋能耗 · 近 7 日"加粗13号 margin 下 12。

第二部分是能耗总览两卡，Row space 12，两卡各 layoutWeight 1，padding 12，白底圆角14，alignItems Start：

• 本周用电卡："66.8"teal青绿字24号加粗 + "本周用电(度)"sub灰字9号。
• 预估电费卡："¥38.6"amber琥珀字24号加粗 + "预估电费"sub灰字9号。

两卡用青绿/琥珀双色区分用电量/电费，与家居头部的三卡色彩呼应（青绿设备/琥珀湿度），形成统一的能耗数据视觉语言。

第三部分是每日用电量柱状图，Column 包裹 space 10，padding 14，白底圆角16，border 1px line 色：

• 标题行：Row space 6，"每日用电量（度）"sub灰字10号 + Column layoutWeight 1 + "峰值 周六 13.5"red红字9号。
• 柱状图 Row space 10，height 140，alignItems Bottom，遍历 POWER_KWH 7天数据（8.2/9.6/6.4/11.2/7.8/13.5/10.1），每栏 layoutWeight 1，alignItems Center，包含：顶部数值（v.toFixed(1)，text3灰字8号）+ 柱子（width 62%，height = powerBarH(v) = Math.round(v / 13.5 * 90) 动态计算，圆角 6，linearGradient 180 度动态双色渐变：v >= 10 ? [[amber,0],[red,1]] 琥珀→红 : [[teal,0],[tealD,1]] 青绿→深青绿，带 breath animation duration 700ms EaseInOut）+ 底部星期（WEEK_DAYS[i]，sub灰字9号）。

7 天用电数据：周一8.2/周二9.6/周三6.4（最低）/周四11.2/周五7.8/周六13.5（最高）/周日10.1。柱子高度 = v/13.5*90 动态计算，以13.5度（峰值）为基准映射到90px高度。动态双色渐变是本应用能耗页最具特色的设计——≥10度（高耗电日用琥珀→红渐变警示，<10度用青绿→深青绿渐变正常，让用户一眼看出哪些天用电超标。峰值周六13.5度用red红字标注，柱子最高且琥珀→红渐变，视觉冲击力强。breath animation让柱子有"生长"的微动效，是本应用数据可视化的核心亮点。

第四部分是耗电排行标题行，Row space 8："📊 设备耗电排行"加粗13号 layoutWeight 1 + "本周"text3灰字9号。

第五部分是耗电排行列表，遍历 POWER_RANK 5 台设备，每台设备 Row space 12，padding 12，白底圆角14，border 1px line 色，alignItems Center，包含：

• 排名：(i+1).toString()，i===0时red红字14号加粗否则text3灰字14号加粗（第一名红色高亮）。
• 设备图标：devIcon(d.kind) 22号，width 42 height 42 圆角13 dark底 textAlign Center。
• 设备信息列（layoutWeight 1，space 4）：
  • 名称等级行：Row space 6，设备名（title深青黑字11号加粗 maxLines 1 layoutWeight 1）+ 等级标签（levelTag(d.kwh)，levelColor(d.kwh)动态着色8号，dark底圆角6 padding 左右6上下2）。
  • 进度条行：Row，青绿进度条（height 6 圆角3，width = rankPercent(d.kwh) = Math.round(kwh/12.6*100)+‘%’，teal青绿底）+ 深青背景条（layoutWeight 1，height 6 圆角3，darkL底）。
• 耗电量：d.kwh.toFixed(1) + “度”，sub灰字10号加粗。

5 台耗电排行设备：卧室空调（12.6度，耗电大户red红，第一名red红字）、卫浴浴霸（4.5度，省电green绿）、客厅摄像头（2.1度，省电）、厨房净水器（1.1度，省电）、全屋扫地机（1.8度，省电）。levelTag三级标签（≥20耗电大户/≥10中等/其他省电），levelColor三级着色（≥20红/≥10琥珀/其他绿），rankPercent以12.6度（最高）为基准计算进度条百分比，第一名red红字高亮，是本应用耗电排行设计的核心亮点。卧室空调12.6度远超其他设备，被标记为"耗电大户"red红字，进度条最长，视觉上突出高耗电设备。

第六部分是省电建议，Column 包裹 space 8，padding 14，圆角16，chip青绿底，alignItems Start：

• 标题："💡 省电建议"title深青黑字12号加粗。
• 建议1："· 卧室空调已连续运行 6 小时，建议切换睡眠曲线，预计每晚省 1.8 度"sub灰字9号。
• 建议2："· 卫浴浴霸待机功耗偏高，建议接入智能插座统一断电"sub灰字9号。
• 建议3："· 高峰时段（19:00-22:00）用电占全天 42%，可错峰运行扫地机"sub灰字9号。

三条省电建议针对高耗电设备（卧室空调/卫浴浴霸）和用电高峰时段给出具体建议，chip青绿底与整体主题呼应，是本应用能耗页实用功能设计的亮点。

---

七、安防页：摄像头网格与告警时间轴竖线

安防页以"安防监控+告警"为核心，采用"摄像头网格+告警时间轴"的两层布局。

页面顶部第一部分是标题行，Row space 8："🛡️ 安防中心"加粗13号 layoutWeight 1 + "🟢 已布防"green绿字9号，dark底圆角8 padding 左右8上下4。

第二部分是摄像头网格，Flex wrap 遍历 camList 4 个摄像头，每个摄像头 Column 包裹 space 8，width 48%，padding 10，白底圆角14，margin 4，alignItems Start，border 1px line 色，点击 toggleRecord(this.camList, c.id) 按ID切换录制状态，包含：

• 画面区域：Column space 6，width 100%，padding 上下18，圆角12，背景色 c.online ? darkL深青 : dark深青，justifyContent Center，带 breath animation（duration 700ms EaseInOut），包含：📷摄像头图标26号 + 状态文字（c.online ? (c.recording ? "● 录制中"red红字 : "○ 待机"sub灰字) : "⚠️ 离线"text3灰字）8号。
• 名称在线行：Row space 6，摄像头名（c.name title深青黑字10号加粗 maxLines 1 layoutWeight 1）+ 在线状态（c.online ? "在线"green绿字 : "离线"red红字）8号。
• 参数：c.room + " · 1080P · 云存储 7 天"text3灰字8号。

4 个摄像头：客厅云台机（客厅，在线，录制中）、入户门口机（玄关，在线，录制中）、婴儿房看护（卧室，在线，待机）、后院枪机（庭院，离线，离线）。摄像头画面区域用darkL/dark深青底模拟监控画面，📷图标+状态文字，录制三态区分清晰（录制中red红字"● 录制中"/待机sub灰"○ 待机"/离线text3灰"⚠️ 离线"），在线状态green绿/离线red红，点击toggleRecord按ID切换recording（splice替换对象），breath animation让画面有"监控呼吸"的微动效，是本应用安防页摄像头网格设计的核心亮点。2个录制中/1个待机/1个离线，覆盖摄像头全状态。

第三部分是告警时间轴标题，"🕘 告警时间轴"加粗13号 margin 下 12。

第四部分是告警时间轴，Column space 0，padding 12，白底圆角16，border 1px line 色，遍历 alertList 6 条告警，每条告警 Row space 12，padding 6，alignItems Top，包含：

• 时间轴列（alignItems Center，space 4）：告警图标（alertIcon(a.level) 16号，高🚨/中⚠️/低ℹ️）+ 竖线（i < alertList.length - 1 时显示 Column width 2 height 46 line色，最后一条不显示竖线）。
• 告警信息列（layoutWeight 1，左对齐，space 4）：
  • 标题时间行：Row space 6，告警标题（a.title title深青黑字11号加粗 maxLines 1 layoutWeight 1）+ 时间（a.time text3灰字8号）。
  • 详情：a.detail sub灰字9号 maxLines 2。
  • 等级标签：a.level + “级别告警”，a.level===‘高’?red红 : a.level===‘中’?amber琥珀 : text3灰，8号，dark底圆角6 padding 左右6上下2。

6 条告警与首页设备动态数据一致，告警时间轴用图标+竖线（i<length-1时显示2px宽46px高line色竖线）构建经典时间轴布局，每条告警包含标题+时间+详情+等级标签，等级三级着色（高red/中amber/低text3），alertIcon三级动态映射（高🚨/中⚠️/低ℹ️），是本应用安防页告警时间轴设计的核心亮点。时间轴竖线让告警按时间顺序串联，视觉上清晰呈现告警历史。2条高级（陌生人停留/后院离线）/2条中级（门锁试错/婴儿房温度）/2条低级（滤芯提示/扫地机完成），覆盖告警全等级。

---

八、我的页：用户卡三栏统计与家庭成员房间管理

我的页以"个人中心+家庭管理"为核心，采用"用户卡三栏统计+家庭成员横滑+房间管理+设置"的四层布局。

页面顶部第一部分是用户卡，Column 包裹 space 10，padding 16，圆角 18，linearGradient 135 度从 tealD #0A6B60 深青绿到 teal #0E8C7F 青绿的两色渐变（与首页睡眠模式Banner同色）：

• 用户信息行：Row space 14，alignItems Center，👨头像34号（width 64 height 64 圆角32，rgba(255,255,255,0.25)半透明白底 textAlign Center）+ 用户信息列（layoutWeight 1，左对齐，space 5）："David 的家"白字15号加粗 + "灵犀智家 Pro 会员 · 有效期至 2027-08-20"白字0.85透明度9号 + "🏠 绑定房屋 1 套 · 设备 36 台"白字0.7透明度9号。
• 三栏统计行：Row space 10，三栏各 layoutWeight 1，alignItems Center，用竖线分隔（Column width 1 height 24 rgba(255,255,255,0.3)半透明白）：
  • 设备数：“36”#FFE082琥珀金字16号加粗 + "设备数"白字0.85透明度8号。
  • 自动化：“5”#FFE082琥珀金字16号加粗 + "自动化"白字0.85透明度8号。
  • 联动次数：“128”#FFE082琥珀金字16号加粗 + "联动次数"白字0.85透明度8号。

用户卡的 135 度深青绿→青绿渐变与首页Banner同色，形成统一的深青渐变视觉语言。三栏统计（36设备/5自动化/128联动次数）用琥珀金字突出数据，半透明白竖线分隔，是本应用我的页用户卡设计的核心亮点。Pro会员标识+有效期+绑定房屋+设备数，完整呈现用户家庭信息。

第二部分是家庭成员标题，"👨‍👩‍👧‍👦 家庭成员"加粗13号 margin 下 12。

第三部分是家庭成员横滑，Scroll horizontal 遍历 memberList 4 位成员，每位成员 Column 包裹 space 6，width 88，padding 10，白底圆角14，alignItems Center，border 1px line 色，包含：

• 头像：m.avatar 26号，width 58 height 58 圆角29 dark底 textAlign Center。
• 姓名：m.name title深青黑字11号加粗。
• 角色：m.role sub灰字8号。
• 在线状态：m.online ? "🟢 在家"green绿字 : "⚪ 外出"text3灰字8号。

4 位家庭成员：David（👨，管理员，在家）、小雨（👩，家庭成员，在家）、奶奶（👵，家庭成员，外出）、小宝（👦，儿童模式，在家）。家庭成员横滑让用户快速查看家人状态，头像+姓名+角色+在线状态四栏，在线状态green绿"🟢 在家"/text3灰"⚪ 外出"两态，3位在家1位外出，是本应用我的页家庭成员设计的亮点。

第四部分是房间管理标题，"🚪 房间管理"加粗13号 margin 下 12。

第五部分是房间管理列表，遍历 ROOM_LIST 8 个房间，每个房间 Row space 12，padding 12，白底圆角14，border 1px line 色，alignItems Center，包含：

• 房间图标：roomIcon® 20号（全屋🏘️/客厅🛋️/卧室🛏️/厨房🍳/书房📚/卫浴🛁/玄关🚪/庭院🌳），width 40 height 40 圆角12 dark底 textAlign Center。
• 房间名：r title深青黑字11号加粗 layoutWeight 1。
• 设备数：roomDevCount(i) + " 台设备"sub灰字9号（roomDevCount函数返回设备数数组[36,9,8,4,6,5,2,2]，i%8取模）。
• 箭头：">"text3灰字12号。

8 个房间覆盖全屋/客厅/卧室/厨房/书房/卫浴/玄关/庭院，roomIcon八种动态映射（全屋🏘️/客厅🛋️/卧室🛏️/厨房🍳/书房📚/卫浴🛁/玄关🚪/庭院🌳），roomDevCount返回各房间设备数（全屋36/客厅9/卧室8/厨房4/书房6/卫浴5/玄关2/庭院2），是本应用我的页房间管理设计的亮点。

第六部分是设置列表，Column 包裹 space 10，padding 14，白底圆角16，border 1px line 色，包含3项设置：

• 消息通知：🔔16号 + "消息通知"title深青黑字11号 layoutWeight 1 + "已开启"text3灰字9号。
• 夜间免打扰：🌙16号 + "夜间免打扰"title深青黑字11号 layoutWeight 1 + "23:00 - 07:00"text3灰字9号。
• 设备固件自动升级：🛠️16号 + "设备固件自动升级"title深青黑字11号 layoutWeight 1 + "已开启"text3灰字9号。

三项设置覆盖消息通知/夜间免打扰/固件升级，每项图标+名称+状态三栏，是本应用我的页设置设计的标准布局。

---

九、色彩主题系统：深青科技主题与动态双色渐变视觉语言

9.1 色彩接口定义

任何一款设计精良的应用，背后都有一套严谨的色彩规范。该应用首先通过一个 ColorPalette 接口，将整个应用所需的色彩抽象为一个结构化的契约，共 21 个字段：

interface ColorPalette {
  bg: string; card: string; dark: string; darkL: string;
  title: string; sub: string; text3: string;
  teal: string; tealD: string; amber: string;
  red: string; green: string; blue: string; purple: string; pink: string;
  line: string; tabOn: string; mask: string; chip: string;
}

• bg：页面整体背景色 #E9F3F1，深青科技底，营造智能家居的科技沉稳氛围。
• teal：主色调 #0E8C7F，青绿，用于按钮、强调文字、激活Tab、柱状图正常色、开关开启色等高优先级视觉元素，是科技环保的标志性色彩（清新、科技、可信赖）。
• tealD：深主色 #0A6B60，深青绿，用于渐变结束色、柱状图底部色、Banner渐变起始色，与 teal 形成同色系深浅对比。
• amber：辅助色 #E8A33D，琥珀，用于室内湿度、预估电费、场景执行状态、耗电中等标签、柱状图高耗电起始色，与青绿形成"青绿+琥珀"的科技暖色调组合，象征智能家居的温暖与科技感。
• title：文字主色 #123B35，深青黑，用于主标题文字，与深青科技底形成高对比度的同时带有科技沉稳质感（非纯黑，更柔和专业）。
• mask：遮罩色 rgba(18,59,53,0.55)，深青黑半透明，用于弹窗遮罩，与 title 同色系保证遮罩质感统一。
• chip：标签底色 rgba(14,140,127,0.10)，青绿 10% 透明度，用于标签、数据卡底色、按钮底色等，与 teal 同色系保证标签质感统一。

9.2 色彩实例化

const COLORS: ColorPalette = {
  bg: '#E9F3F1', card: '#FFFFFF', dark: '#DCEBE8', darkL: '#C8DEDA',
  title: '#123B35', sub: '#4E7A72', text3: '#93B4AE',
  teal: '#0E8C7F', tealD: '#0A6B60', amber: '#E8A33D',
  red: '#E05B4B', green: '#2E9E6C', blue: '#3D7DC8', purple: '#8A5FC0', pink: '#E0719B',
  line: '#D5E6E2', tabOn: '#0E8C7F',
  mask: 'rgba(18,59,53,0.55)', chip: 'rgba(14,140,127,0.10)'
};

主色 #0E8C7F 是一种清新的青绿，既契合"智能家居IoT"主题（科技、环保、清新的标志性色彩），又具有可信赖、高质感的气质。辅助色 #E8A33D 琥珀与青绿形成"青绿+琥珀"的科技暖色调组合，是本应用最具辨识度的色彩组合。bg #E9F3F1 深青科技底与主色同暖色系，营造出智能家居的科技沉稳氛围。title #123B35 深青黑而非纯黑，与深青科技底形成高对比度的同时带有科技沉稳质感，是本应用色彩设计的细致之处。

值得注意的是，本应用的渐变设计是色彩系统的核心亮点——首页睡眠模式 Banner 使用 linearGradient 135 度从 tealD #0A6B60 深青绿到 teal #0E8C7F 青绿的两色渐变，我的用户卡使用 135 度深青绿→青绿渐变（与首页Banner同色），场景大卡激活态使用 135 度深青绿→青绿渐变、未激活态使用 135 度 purple #8A5FC0 紫到 blue #3D7DC8 蓝的两色渐变（激活/未激活用不同渐变区分），能耗柱状图使用动态双色渐变（≥10度用 180 度 amber 琥珀→red 红渐变警示，<10度用 180 度 teal 青绿→tealD 深青绿渐变正常）。多种不同角度和配色的深青渐变贯穿整个应用（135度深青绿→青绿用于Banner/用户卡/激活场景/135度紫→蓝用于未激活场景/180度青绿→深青绿用于正常柱状图/180度琥珀→红用于高耗电柱状图），形成了统一而丰富的深青渐变视觉语言，是本应用色彩设计的核心特色。

本应用的动态颜色逻辑也十分丰富——房间按 roomColor 分六色着色（客厅teal青绿/卧室blue蓝/厨房amber琥珀/书房purple紫/卫浴pink粉/其他green绿），设备图标按 devIcon 分九种动态映射（灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌），耗电等级按 levelTag/levelColor 分三级着色（≥20耗电大户red红/≥10中等amber琥珀/其他省电green绿），告警等级按 alertIcon 分三级动态映射（高🚨/中⚠️/低ℹ️）+三级着色（高red/中amber/低text3），设备开关按 on 分两态着色（开启teal青绿底+teal青绿字/关闭dark深青底+text3灰字），场景大卡按 active 分两态渐变（激活深青绿→青绿/未激活紫→蓝），能耗柱状图按 v>=10 分两态渐变（高耗电琥珀→红/正常青绿→深青绿），摄像头按 online/recording 分三态着色（录制中red红字/待机sub灰/离线text3灰），形成了"以色定房间、以图标定设备、以色定耗电等级、以图标定告警等级、以色定开关状态、以渐变定场景激活、以渐变定耗电高低、以色定摄像头状态"的多层语义着色模式。这种将所有色彩集中管理、配合多维度渐变与动态着色的做法保证了全局一致性，降低了维护成本。

---

十、类型定义：构建严谨的数据契约

应用通过一组带 constructor 的 @Observed 类，为每一类业务对象建立了明确的数据契约。

10.1 智能设备、场景模式、自动化规则、摄像头、告警、家庭成员元数据

@Observed export class SmartDevice {
  id: number; name: string; kind: string; room: string;
  on: boolean; value: string; kwh: number;
  constructor(...) { ... }
}
@Observed export class SceneMode {
  id: number; name: string; icon: string; desc: string;
  devices: number; active: boolean;
  constructor(...) { ... }
}
@Observed export class AutoRule {
  id: number; name: string; trigger: string; action: string; enabled: boolean;
  constructor(...) { ... }
}
@Observed export class CameraItem {
  id: number; name: string; room: string; online: boolean; recording: boolean;
  constructor(...) { ... }
}
@Observed export class AlertRecord {
  id: number; level: string; title: string; detail: string; time: string;
  constructor(...) { ... }
}
@Observed export class FamilyMember {
  id: number; name: string; avatar: string; role: string; online: boolean;
  constructor(...) { ... }
}

SmartDevice 描述智能设备的 ID、名称、类型、房间、开关状态、当前值、今日耗电量，用 kind 字段配合 devIcon 函数实现设备图标九种动态映射，用 room 字段配合 roomColor 函数实现房间六色着色，用 on 字段实现开关两态，用 kwh 字段实现耗电统计。SceneMode 描述场景模式的 ID、名称、图标、描述、联动设备数、激活状态，用 active 字段实现场景互斥激活（activateScene函数），用 devices 字段显示联动设备数。AutoRule 描述自动化规则的 ID、名称、触发条件、执行动作、启用状态，用 trigger/action 字段实现"当触发→执行动作"的自然语言描述，用 enabled 字段实现规则开关。CameraItem 描述摄像头的 ID、名称、房间、在线状态、录制状态，用 online/recording 两个布尔字段实现摄像头三态（录制中/待机/离线）。AlertRecord 描述告警记录的 ID、等级、标题、详情、时间，用 level 字段配合 alertIcon/levelColor 函数实现告警三级着色。FamilyMember 描述家庭成员的 ID、姓名、头像、角色、在线状态，用 online 字段实现在家/外出两态。

10.2 工具函数：颜色映射、数据计算、状态切换、增删改逻辑

function roomColor(room: string): string { ... }
function devIcon(kind: string): string { ... }
function statusText(on: boolean): string { ... }
function levelTag(kwh: number): string { ... }
function levelColor(kwh: number): string { ... }
function alertIcon(level: string): string { ... }
function powerBarH(v: number): number { return Math.round(v / 13.5 * 90); }
function rankPercent(kwh: number): string { return Math.round(kwh / 12.6 * 100).toString() + '%'; }
function roomDevCount(i: number): string { ... }
function roomIcon(r: string): string { ... }
function toggleDev(list: SmartDevice[], idx: number): void { ... }
function renameDev(list: SmartDevice[], idx: number, name: string): void { ... }
function activateScene(list: SceneMode[], id: number): void { ... }
function toggleRule(list: AutoRule[], id: number): void { ... }
function toggleRecord(list: CameraItem[], id: number): void { ... }

16 个工具函数将颜色映射、数据计算、状态切换、增删改逻辑从 UI 层抽离，实现数据与逻辑分离：

• roomColor：房间六色着色，客厅teal/卧室blue/厨房amber/书房purple/卫浴pink/其他green。
• devIcon：设备图标九种动态映射，灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌。
• statusText：开关状态文字，on返回"运行中"否则"已关闭"。
• levelTag：耗电等级标签，≥20耗电大户/≥10中等/其他省电。
• levelColor：耗电等级着色，≥20红/≥10琥珀/其他绿。
• alertIcon：告警图标三级映射，高🚨/中⚠️/低ℹ️。
• powerBarH：柱状图高度计算，Math.round(v / 13.5 * 90)，以13.5度（峰值）为基准映射到90px。
• rankPercent：耗电排行进度条百分比，Math.round(kwh / 12.6 * 100) + ‘%’，以12.6度（最高设备）为基准。
• roomDevCount：房间设备数，返回数组[36,9,8,4,6,5,2,2]，i%8取模。
• roomIcon：房间图标八种映射，全屋🏘️/客厅🛋️/卧室🛏️/厨房🍳/书房📚/卫浴🛁/玄关🚪/庭院🌳。
• toggleDev：切换设备开关，splice替换对象，!d.on切换on，value更新为开启时"已开启"/关闭时"待机"。
• renameDev：重命名设备，splice替换对象，保留其他字段更新name（空值保留原值）。
• activateScene：激活场景互斥，遍历全部场景，选中切换active其他设false，确保同一时间只有一个场景激活。
• toggleRule：切换自动化规则启用，按ID遍历找到，splice替换对象切换enabled。
• toggleRecord：切换摄像头录制，按ID遍历找到，splice替换对象切换recording。

所有数据类都带有 constructor 构造函数，使用 new ClassName(...) 方式实例化，配合 @Observed 装饰器实现响应式更新。16 个工具函数将逻辑从 UI 层抽离，实现数据与逻辑分离，特别是 toggleDev/renameDev/activateScene/toggleRule/toggleRecord 五个状态切换函数都采用 splice 替换对象的方式触发 @Observed 响应式更新（直接修改对象属性可能不触发刷新，替换整个对象会触发），是 ArkUI 响应式更新的关键技巧，体现了对框架机制的深入理解。activateScene 实现场景互斥激活（遍历全部，选中切换其他设false），是本应用场景联动的核心逻辑。powerBarH/rankPercent 实现数据到像素的动态映射，roomColor/devIcon/alertIcon/roomIcon 实现数据到视觉的动态映射，都是数据计算层的实用工具函数。

---

十一、双动画状态与动态颜色：数据驱动的视觉映射与联动动效

应用通过双动画状态和动态颜色逻辑，将业务数据转化为视觉色彩与动态效果，实现"数据即配色、状态即动效"。

11.1 动态颜色逻辑

本应用的动态颜色逻辑分布在多个维度：

• 房间六色着色：roomColor(room)，客厅teal青绿/卧室blue蓝/厨房amber琥珀/书房purple紫/卫浴pink粉/其他green绿，六色房间着色让用户在设备列表中一眼判断设备所属房间。
• 设备图标九种映射：devIcon(kind)，灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌，九种设备图标动态映射，让设备类型一目了然。
• 耗电等级三级着色：levelTag/levelColor(kwh)，≥20耗电大户red红/≥10中等amber琥珀/其他省电green绿，三级耗电等级着色让用户一眼判断高耗电设备。
• 告警等级三级映射+着色：alertIcon(level)高🚨/中⚠️/低ℹ️ + 高red/中amber/低text3，三级告警图标+着色让用户一眼判断告警严重程度。
• 设备开关两态着色：d.on ? teal/chip : text3/dark，开启teal青绿底+teal青绿字显示当前值/关闭dark深青底+text3灰字显示"已关闭"，两态区分清晰。
• 场景大卡两态渐变：s.active ? 深青绿→青绿 : 紫→蓝，激活态深青绿→青绿渐变（与主题同色）/未激活态紫→蓝渐变（区分激活/未激活），两态渐变区分场景激活状态。
• 能耗柱状图两态渐变：v >= 10 ? 琥珀→红 : 青绿→深青绿，高耗电日（≥10度）琥珀→红渐变警示/正常日青绿→深青绿渐变，两态渐变区分用电高低。
• 摄像头三态着色：online && recording ? red"● 录制中" : online ? sub"○ 待机" : text3"⚠️ 离线"，录制中red红字/待机sub灰/离线text3灰，三态区分摄像头状态。
• Circle开关两态：d.on ? teal底+小圆右3px : darkL底+小圆右13px，开启青绿底+小圆在右/关闭深青底+小圆在左，两态区分开关状态。

11.2 双动画状态联动

aboutToAppear(): void {
  this.timer = setInterval(() => {
    this.breath = !this.breath;
    this.pulse = !this.pulse;
  }, 700);
}
aboutToDisappear(): void {
  if (this.timer > 0) { clearInterval(this.timer); }
}

aboutToAppear 中启动 setInterval 700ms 同时切换 breath 和 pulse 两个布尔动画状态，aboutToDisappear 中判断 timer > 0 时 clearInterval 清理定时器避免内存泄漏。breath 动画状态驱动五种不同的动效：

• breath 用于首页睡眠模式 Banner 🌙 图标 animation：.animation({ duration: 700, iterations: 1, curve: Curve.EaseInOut })，Banner 右侧的🌙月亮图标随 breath 状态微动，营造睡眠氛围，与睡眠模式主题高度契合。
• breath 用于首页常用设备图标 animation：.animation({ duration: 700, iterations: 1, curve: Curve.EaseInOut })，常用设备网格中的设备图标随 breath 状态微动，营造"设备在线运行"的动感。
• breath 用于场景大卡图标 animation：.animation({ duration: 700, iterations: 1, curve: Curve.EaseInOut })，场景大卡中的场景图标随 breath 状态微动，营造"场景执行中"的动感。
• breath 用于能耗柱状图 animation：.animation({ duration: 700, iterations: 1, curve: Curve.EaseInOut })，能耗柱状图的柱子随 breath 状态微动，营造"数据生长"的动感。
• breath 用于安防摄像头画面 animation：.animation({ duration: 700, iterations: 1, curve: Curve.EaseInOut })，安防摄像头的画面区域随 breath 状态微动，营造"监控呼吸"的动感。

breath 动画状态同时驱动五种动效（Banner月亮图标/常用设备图标/场景图标/能耗柱状图/摄像头画面），700ms 周期同步切换，形成整体协调的联动动效体系。pulse 状态预留用于后续扩展（如告警脉冲动画、设备在线脉冲等）。五种动效都使用 duration 700ms EaseInOut 曲线，节奏统一，让静态的页面有了"鲜活"的动态感，是本应用动效设计的核心亮点。Circle自定义开关点击切换时无显式animation，但通过splice替换对象触发@Observed响应式更新，小圆位置margin right动态变化（on?3:13），实现平滑的开关切换动效。

---

十二、入口组件：应用的骨架与6Tab差异化布局

12.1 组件声明与状态

@Entry
@Component
struct Page820 {
  @State tabIdx: number = 0;
  @State breath: boolean = false;
  @State pulse: boolean = false;
  @State addModal: boolean = false;
  @State editModal: boolean = false;
  @State delModal: boolean = false;
  @State editIdx: number = 0;
  @State addName: string = '';
  @State addTrigger: string = '';
  @State addAction: string = '';
  @State editName: string = '';
  @State devList: SmartDevice[] = DEVICE_INIT;
  @State sceneList: SceneMode[] = SCENE_INIT;
  @State ruleList: AutoRule[] = RULE_INIT;
  @State camList: CameraItem[] = CAMERA_INIT;
  @State alertList: AlertRecord[] = ALERT_INIT;
  @State memberList: FamilyMember[] = MEMBER_INIT;
  @State roomFilter: string = '全部';
  private timer: number = -1;
}

20 个 @State 状态分六类：导航状态（tabIdx）、动画状态（breath/pulse）、弹窗控制状态（addModal/editModal/delModal）、弹窗数据状态（editIdx/addName/addTrigger/addAction/editName，editIdx 共享于 editModal 和 delModal 记录设备索引，addName/addTrigger/addAction 用于新建自动化输入，editName 预填原设备名）、业务数据状态（devList/sceneList/ruleList/camList/alertList/memberList，初始化为常量数组，支持增删改切换）、筛选状态（roomFilter，设备页房间筛选，默认"全部"）。private 字段（DEVICE_INIT/SCENE_INIT/RULE_INIT/CAMERA_INIT/ALERT_INIT/MEMBER_INIT/TAB_LIST/ROOM_LIST/POWER_KWH/WEEK_DAYS/POWER_RANK/timer）存储静态模拟数据和定时器引用，不触发响应式更新。

12.2 生命周期与双动画联动

aboutToAppear(): void {
  this.timer = setInterval(() => {
    this.breath = !this.breath;
    this.pulse = !this.pulse;
  }, 700);
}
aboutToDisappear(): void {
  if (this.timer > 0) { clearInterval(this.timer); }
}

aboutToAppear 中启动 setInterval 700ms 同时切换 breath 和 pulse 动画状态，实现双动画联动。aboutToDisappear 中判断 timer > 0 时 clearInterval 清理定时器，避免内存泄漏和重复启动。这种"生命周期管理定时器"的模式是 ArkUI 动效的标准实践。

12.3 家居头部（@Builder header）

顶部头部通过 @Builder header() 抽取，Column 包裹，space 12，padding 左右 14 上下 12：

• 标题行：Row space 10，"🏠"图标 16 号 padding 6 圆角 12 chip 底 + "灵犀智家 · 我的家"title 深青黑字 13 号加粗 + Column layoutWeight 1 + "🔔"消息 18 号 + "⚙️"设置 18 号。
• 全屋总览三卡：Row space 12，三卡各 layoutWeight 1，padding 12，圆角 14，alignItems Start：
  • 在线设备卡："36台"teal青绿字26号加粗 + "在线设备"sub灰字9号，chip青绿底。
  • 室外温度卡："8.2°"blue蓝字26号加粗 + "室外温度(℃)"sub灰字9号，白底。
  • 室内湿度卡："42%"amber琥珀字26号加粗 + "室内湿度"sub灰字9号，白底。
• 天气环境条：Row space 8，"🟢 全屋安防已布防"green绿字9号，dark底圆角8 padding 左右8上下4 + "🌤️ 多云 · 空气优"blue蓝字9号，chip底圆角8 padding 左右8上下4。

家居头部是本应用最具辨识度的视觉元素，全屋总览三卡（36台在线青绿/8.2°室外温度蓝/42%室内湿度琥珀）让用户一眼看到全屋核心数据，三卡用青绿/蓝/琥珀三色区分设备/温度/湿度，与能耗页的青绿/琥珀双色呼应。天气环境条（全屋安防已布防绿字+多云空气优蓝字）体现安防状态和天气信息，与整体深青科技主题呼应。

12.4 6Tab单排底部导航与Stack弹窗

底部导航通过 @Builder tabBar() 构建，Row space 0，ForEach 遍历 TAB_LIST 6个Tab，每个Tab Column space 3，layoutWeight 1，padding 上7下6：图标18号+文字9号（激活态tabOn青绿字加粗，非激活text3灰字），点击切换tabIdx。底部白底圆角16。

build() 使用 Stack 布局，主 Column 包含 header + Scroll（if-else 切换 6 个 @Builder 页面：tabIdx 0-5 对应 homeTab/deviceTab/sceneTab/energyTab/securityTab/mineTab）+ tabBar，width/height 100%，bg 深青科技底。三个弹窗条件渲染：每个弹窗独立 Stack 叠加，共享 modalOverlay 统一遮罩封装（全屏 mask 遮罩 + 点击关闭）。

---

十三、关键技术特性对比

特性维度	实现方式	技术要点	设计价值
色彩管理	ColorPalette 接口 + COLORS 常量	集中定义 21 种语义色，含深青科技主题色	保证视觉一致性，支持主题切换
深青科技主题	bg #E9F3F1 + teal #0E8C7F + amber #E8A33D	深青科技底+青绿主色+琥珀辅助，title深青黑非纯黑	科技沉稳氛围，青绿+琥珀科技暖色
多种深青渐变	多种角度 linearGradient	Banner/用户卡/激活场景135度深青绿→青绿/未激活场景135度紫→蓝/柱状图180度动态双色	统一而丰富的渐变视觉语言
家居头部	全屋总览三卡+天气环境条	36台青绿/8.2°蓝/42%琥珀三卡，安防布防绿+多云蓝	全屋核心数据一目了然
6Tab差异化	每页独立 @Builder 布局	首页设备网格+房间横滑+动态/设备开关列表/场景大卡+自动化/能耗柱状图+排行/安防摄像头+时间轴/我的家庭+房间	一页一型，还原真实智能家居App
常用设备网格	Flex wrap + 点击跳设备页	10台设备，devIcon九种映射，开启chip/关闭dark两态，点击tabIdx=1	快速控制常用设备，一键跳转
房间横滑跳转	Scroll horizontal + onClick设置roomFilter+tabIdx=1	8个房间，点击设置筛选条件并跳设备页	房间筛选一键跳转，联动设计
房间六色着色	roomColor动态函数	客厅teal/卧室blue/厨房amber/书房purple/卫浴pink/其他green	以色定房间，一眼判断归属
设备图标九种映射	devIcon动态函数	灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌	以图标定设备类型，一目了然
Circle自定义开关	两个Circle组件构建	外层Row teal/darkL底+大Circle+小Circle margin right动态on?3:13，点击toggleDev	自定义开关样式，非系统Switch
设备改名解绑	editModal/delModal共享editIdx	改名renameDev splice替换/解绑splice按索引删除，editIdx共享索引	完整设备管理闭环，状态复用
场景大卡两态渐变	active动态双色渐变	激活135度深青绿→青绿/未激活135度紫→蓝，点击activateScene互斥	激活状态视觉区分，互斥联动
场景互斥激活	activateScene遍历全部	选中切换active其他设false，确保同一时间只有一个场景激活	场景联动核心逻辑，互斥设计
自动化联动列表	触发标签+动作标签+开关	触发amber标签/动作teal标签/"当触发→动作"自然语言/Circle开关toggleRule	自动化规则一目了然，启停控制
新建自动化弹窗跳转	addModal三输入+确认后tabIdx=2	名称/触发/动作三输入，unshift新AutoRule，自动跳场景页	创建即查看，交互设计
能耗柱状图动态双色	v>=10琥珀→红/<10青绿→深青绿	高耗电日警示渐变/正常日正常渐变，powerBarH v/13.5*90	用电高低一眼判断，动态着色
耗电排行等级标签	levelTag/levelColor三级	≥20耗电大户红/≥10中等琥珀/其他省电绿，rankPercent kwh/12.6*100%	高耗电设备突出，等级清晰
省电建议	chip底+三条具体建议	针对高耗电设备和高峰时段给出具体省电建议	实用功能，节能指导
摄像头录制三态	online/recording双布尔	录制中red"● 录制中"/待机sub"○ 待机"/离线text3"⚠️ 离线"，点击toggleRecord	摄像头状态全态覆盖
告警时间轴竖线	Column+图标+条件竖线	alertIcon三级映射，i<length-1显示2px宽46px高竖线，等级三级着色	经典时间轴布局，告警历史清晰
家庭成员在线状态	online两态	在家green"🟢 在家"/外出text3"⚪ 外出"，横滑展示	家人状态一目了然
房间管理	roomIcon八种+roomDevCount	全屋🏘️/客厅🛋️/卧室🛏️/厨房🍳/书房📚/卫浴🛁/玄关🚪/庭院🌳，设备数数组	房间管理完整，图标动态
用户卡三栏统计	深青渐变+竖线分隔	36设备/5自动化/128联动，琥珀金字，半透明白竖线分隔	家庭数据总览，视觉统一
双动画状态联动	breath+pulse两个@State	setInterval 700ms同时切换，breath驱动Banner/设备/场景/柱状图/摄像头五种animation	两状态驱动五动效，协调联动
splice替换对象更新	toggleDev/renameDev/activateScene等	所有状态切换都用splice替换整个对象触发@Observed响应式更新	ArkUI响应式更新关键技巧
三大弹窗	独立 Stack 叠加 + modalOverlay	新建自动化/修改设备名/解绑设备，共享遮罩样式，editIdx共享索引	完整增删改交互闭环
状态管理	@State + @Observed + private	20个@State分六类，private存静态数据不触发更新	细粒度状态控制，性能优化
组件化	@Component + @Builder	1个入口组件 + 6个页面@Builder + 3个弹窗 + header/tabBar/modalOverlay	高内聚低耦合，代码复用率高
列表渲染	ForEach + 网格/横滑/列表/时间轴	设备网格/房间横滑/设备列表/场景网格/自动化列表/柱状图/耗电排行/摄像头网格/告警时间轴/成员横滑/房间列表	数据驱动渲染，布局灵活
数据可视化	柱状图动态双色+耗电排行进度条	每日用电量180度动态渐变柱状图/耗电排行青绿进度条	能耗趋势直观，高耗电突出
文本省略	maxLines + textOverflow	设备名maxLines1/场景描述maxLines2/告警详情maxLines2/规则描述maxLines1	长文本优雅截断，布局整齐
生命周期	aboutToAppear/aboutToDisappear	setInterval启动/clearInterval清理，timer判>0	健壮性强，无资源泄漏
布局系统	Column/Row + Stack + Scroll + Flex	弹性布局、Stack叠加、Scroll纵向滚动、Flex wrap换行	自适应布局，层次分明

---

完整代码

完整 Index.ets 源码已包含：配色系统（ColorPalette + COLORS 21色含深青科技主题）、6 个 @Observed 数据类（带 constructor）+ 16 个工具函数（颜色映射/数据计算/状态切换/增删改逻辑含splice替换对象技巧）、Page820 入口组件（含 @Builder header/homeTab/deviceTab/sceneTab/energyTab/securityTab/mineTab/tabBar/modalOverlay、生命周期双动画联动、Stack弹窗独立叠加、家居头部全屋总览三卡、多种深青渐变、6Tab差异化布局、常用设备网格跳转、房间横滑筛选跳转、Circle自定义开关、设备改名解绑、场景大卡两态渐变互斥激活、自动化联动列表、新建自动化弹窗跳转、能耗柱状图动态双色渐变、耗电排行等级标签、省电建议、摄像头录制三态、告警时间轴竖线、家庭成员在线状态、房间管理、用户卡三栏统计），共计约 1000 行代码。可直接复制到 entry/src/main/ets/pages/Index.ets 运行。

源码较长，建议在 DevEco Studio 中打开后配合预览器查看各 Tab 效果。预览器中可直接点击底部6Tab切换页面，点击首页常用设备跳设备页，点击房间横滑跳设备页并筛选，点击设备页Circle开关切换设备状态（toggleDev splice替换），点击✏️编辑设备名（editModal预填）/🗑️解绑设备（delModal二次确认），点击场景大卡互斥激活（activateScene），点击自动化Circle开关启停（toggleRule），点击"＋新建"创建自动化（addModal三输入，确认后跳场景页），点击能耗柱状图查看动态双色渐变（≥10度琥珀→红/<10度青绿→深青绿），点击安防摄像头切换录制状态（toggleRecord），观察首页🌙月亮图标/常用设备图标/场景图标/能耗柱状图/摄像头画面的breath联动动效。

---

十四、开发环境搭建

14.1 安装 DevEco Studio

DevEco Studio 是 HarmonyOS 应用开发的官方 IDE。下载安装包后双击运行，进入安装欢迎界面，点击「下一步」继续。

14.2 选择安装路径

选择目标安装目录，建议安装到非系统盘，确认所需空间后点击「下一步」。

14.3 配置安装选项

设置环境变量，勾选创建桌面快捷方式、将 bin 文件夹添加到 PATH、添加上下文菜单，但是需要重启一下电脑使环境变量生效。

14.4 选择项目模板

新建一个空白模板，在模板市场中选择 Empty Ability。

14.5 配置项目信息

设置 API 为 24 的模板项目，项目名称 kfschool，Compatible SDK 6.1.1(24)，设备类型勾选 Phone，点击完成后初始化项目，自动下载相关依赖。

---

十五、总结

通过对这款灵犀智家智能家居IoT应用的深度拆解，我们可以看到，一个优秀的移动端应用远不止是功能的堆砌，它更是架构设计、数据建模、视觉系统、交互逻辑、动效设计、数据计算等多维度能力的综合体现。

在架构层面，该应用采用了"配置驱动 + 组件化 + 状态管理"的三层设计模式。配置层将所有可变的数据与视觉属性抽离为常量数组和元数据接口，使得业务逻辑与表现层彻底解耦；组件层将六个功能页面拆分为独立的 @Builder 构建器，每个页面采用完全不同的布局风格，实现"一页一型"的差异化设计；状态层利用 ArkUI 的 @State、@Observed 机制，实现了数据变化到 UI 刷新的自动响应，特别是弹窗数据状态的精细设计（editIdx 共享于 editModal 和 delModal 记录设备索引，addName/addTrigger/addAction 用于新建自动化三输入，editName 预填原设备名），editModal 和 delModal 共享 editIdx 状态实现设备索引的传递，减少了重复状态定义，体现了对状态管理的精准理解和弹窗复用设计的工程化思维。roomFilter 筛选状态实现设备页按房间过滤，与首页房间横滑跳转联动（首页点击设置roomFilter后跳设备页），体现了页面间状态传递的联动设计。

在数据层面，六个 @Observed 数据类（SmartDevice/SceneMode/AutoRule/CameraItem/AlertRecord/FamilyMember）以 constructor 构造函数方式实例化，完整描述了灵犀智家的全部业务信息。特别的是，应用定义了 16 个工具函数（roomColor/devIcon/statusText/levelTag/levelColor/alertIcon/powerBarH/rankPercent/roomDevCount/roomIcon/toggleDev/renameDev/activateScene/toggleRule/toggleRecord），将颜色映射、数据计算、状态切换、增删改逻辑从 UI 层抽离，实现数据与逻辑分离，是本应用工程化设计的核心亮点。powerBarH 函数将用电量动态映射为柱状图像素高度（v/13.590，以峰值13.5度为基准），rankPercent 函数将耗电量映射为排行进度条百分比（kwh/12.6100，以最高设备12.6度为基准），roomColor/devIcon/alertIcon/roomIcon 四个函数实现数据到视觉的动态映射（房间六色/设备九种图标/告警三级图标/房间八种图标），toggleDev/renameDev/activateScene/toggleRule/toggleRecord 五个状态切换函数都采用 splice 替换对象的方式触发 @Observed 响应式更新（因为直接修改 @Observed 对象属性可能不触发响应式刷新，而替换整个对象会触发），这是 ArkUI 响应式更新的关键技巧，体现了对框架机制的深入理解。activateScene 实现场景互斥激活（遍历全部场景，选中切换active其他设false，确保同一时间只有一个场景激活），是本应用场景联动的核心逻辑。toggleDev 切换设备开关时还同步更新value字段（开启时"已开启"/关闭时"待机"），实现状态与显示的同步更新。

在视觉层面，本应用独创了"深青科技主题"设计——主色 #0E8C7F 青绿搭配辅助色 #E8A33D 琥珀，bg #E9F3F1 深青科技底，title #123B35 深青黑而非纯黑，与深青科技底形成高对比度的同时带有科技沉稳质感。应用的渐变设计是色彩系统的核心亮点——首页睡眠模式 Banner 使用 135 度深青绿→青绿渐变，我的用户卡使用 135 度深青绿→青绿渐变（与首页Banner同色），场景大卡激活态使用 135 度深青绿→青绿渐变、未激活态使用 135 度紫→蓝渐变（激活/未激活用不同渐变区分），能耗柱状图使用动态双色渐变（≥10度用 180 度琥珀→红渐变警示，<10度用 180 度青绿→深青绿渐变正常），多种不同角度和配色的深青渐变贯穿整个应用，形成了统一而丰富的深青渐变视觉语言。家居头部采用全屋总览三卡（36台在线青绿chip底/8.2°室外温度蓝白底/42%室内湿度琥珀白底）+天气环境条（全屋安防已布防绿字+多云空气优蓝字），是本应用头部的特色设计。应用的动态颜色逻辑也十分丰富——房间六色着色（客厅青绿/卧室蓝/厨房琥珀/书房紫/卫浴粉/其他绿）、设备图标九种映射（灯💡/空调❄️/扫地机🤖/窗帘🪟/加湿器💧/门锁🔐/摄像头📷/音箱🔊/其他🔌）、耗电等级三级着色（≥20耗电大户红/≥10中等琥珀/其他省电绿）、告警等级三级映射+着色（高🚨/中⚠️/低ℹ️，高红/中琥珀/低灰）、设备开关两态着色（开启青绿底+青绿字/关闭深青底+灰字）、场景大卡两态渐变（激活深青绿→青绿/未激活紫→蓝）、能耗柱状图两态渐变（高耗电琥珀→红/正常青绿→深青绿）、摄像头三态着色（录制中红/待机灰/离线灰）、Circle开关两态（开启青绿底+小圆右/关闭深青底+小圆左），形成了"以色定房间、以图标定设备、以色定耗电等级、以图标定告警等级、以色定开关状态、以渐变定场景激活、以渐变定耗电高低、以色定摄像头状态、以位置定开关"的多层语义着色模式。统一的色彩系统是整个应用的视觉基石，青绿主色搭配琥珀辅助色，配合深青科技底和多种深青渐变，营造出既科技沉稳又温暖亲切的智能家居氛围。

在交互层面，应用独创了"双动画状态联动"设计——aboutToAppear 中 setInterval 700ms 同时切换 breath 和 pulse 两个布尔动画状态，breath 同时驱动首页睡眠模式 Banner 🌙 图标 animation、常用设备图标 animation、场景大卡图标 animation、能耗柱状图 animation、安防摄像头画面 animation 五种动效（都使用 duration 700ms EaseInOut 曲线），pulse 状态预留用于后续扩展，两个动画状态形成整体协调的联动动效体系。五种动效各司其职——Banner月亮图标微动营造睡眠氛围、常用设备图标微动营造"设备在线运行"的动感、场景图标微动营造"场景执行中"的动感、能耗柱状图微动营造"数据生长"的动感、摄像头画面微动营造"监控呼吸"的动感，让静态的页面有了"鲜活"的动态感。Circle自定义开关是本应用最具技术特色的交互组件——用两个Circle组件（大Circle+小Circle）构建自定义开关，外层Row背景色teal/darkL，小Circle margin right动态变化（on?3:13）实现开启/关闭两态，点击toggleDev用splice替换对象切换on状态并更新value，非系统Switch组件，完全自定义样式。场景互斥激活（activateScene遍历全部，选中切换其他设false）确保同一时间只有一个场景激活，是智能家居场景联动的核心逻辑。新建自动化弹窗确认后自动跳场景页（tabIdx=2）体现"创建即查看"的交互设计，首页常用设备点击跳设备页（tabIdx=1）、房间横滑点击设置roomFilter+跳设备页实现页面间联动跳转，我的页"学习报表"类跳转在本应用中体现为房间管理和设置入口。能耗柱状图动态双色渐变（≥10度琥珀→红警示/<10度青绿→深青绿正常）让用户一眼判断用电高峰日，耗电排行第一名red红字高亮+levelTag三级标签突出高耗电设备，省电建议针对高耗电设备和高峰时段给出具体建议，形成了"统计→分析→建议"的完整能耗管理闭环。安防摄像头录制三态（录制中红/待机灰/离线灰）+告警时间轴竖线（图标+2px宽46px高竖线，最后一条不显示）构建经典安防监控界面，家庭成员在线状态（在家绿/外出灰）横滑展示，房间管理八种图标+设备数，都是本应用交互设计的精细之处。笔记增删改三大弹窗（新建自动化unshift/设备改名renameDev splice替换/设备解绑splice按索引删除）共享editIdx索引，形成了完整的设备管理+自动化创建闭环。

该应用展现的配置驱动思想、组件化架构、响应式状态管理、深青科技主题、多种深青渐变视觉语言、家居头部全屋总览三卡、6Tab差异化布局、常用设备网格跳转、房间横滑筛选跳转、房间六色动态着色、设备图标九种动态映射、Circle自定义开关组件、设备改名解绑、场景大卡两态渐变互斥激活、自动化联动列表、新建自动化弹窗跳转、能耗柱状图动态双色渐变、耗电排行等级标签、省电建议、摄像头录制三态、告警时间轴竖线、家庭成员在线状态、房间管理、用户卡三栏统计、双动画状态联动、splice替换对象响应式更新技巧、场景互斥激活逻辑、生命周期管理、防御性编程习惯以及科技沉稳的视觉设计意识，都值得开发者在自己的项目中借鉴与传承。无论是初学者还是有经验的鸿蒙开发者，都能从中获得关于"如何用声明式语法构建高质量智能家居IoT移动应用"的有益启示。

---

标签： HarmonyOS · API 24 · ArkTS · 华为 · 智能家居 · IoT · 物联网 · 设备控制 · 场景联动 · 能耗统计 · 安防监控 · 移动端开发