鸿蒙原生应用 HarmonyOS 6.0实战拆解 —— 设备详情页的参数表与近期预约时段卡App 23「实验室设备预约」设备 TabFunc1Tab是设备详情页——4 卡结构InfoCard 120 高图标块 高倍显微镜 空闲标签 位置 SpecCard设备参数表型号/倍率/光源/模式 GuideCard使用说明 4 条 BookingList近期预约 2 时段 预约该时段按钮。本篇基于23-lab-booking/entry/src/main/ets/pages/Func1Tab.ets约 145 行逐段拆解附 4 张实机截图。一、整体结构4 卡详情页Func1Tab 是**设备详情的 4 卡布局**——信息/参数/说明/预约 4 层build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.InfoCard() this.SpecCard() this.GuideCard() this.BookingList() } .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) }4 个块按是什么 → 参数 → 怎么用 → 怎么约漏斗展开InfoCard— 设备身份大图标 名称 状态 位置SpecCard— 设备参数型号/倍率/光源/模式GuideCard— 使用说明4 条操作指引BookingList— 近期预约2 时段 预约按钮详情页 4 卡是设备/商品详情页的通用结构电商商品详情 图片 参数 详情 购买设备详情 图标 参数 说明 预约——详情页 身份 参数 指南 行动。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header InfoCard设备身份卡Header 是设备详情单行系列标准。InfoCard是设备身份卡——大图标 名称 状态 位置Builder InfoCard() { Column({ space: 12 }) { Row() { Text().fontSize(48) } .width(100%).height(120) .backgroundColor(C.primarySoft).borderRadius(D.rLg) .justifyContent(FlexAlign.Center) Text(高倍显微镜).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(空闲).fontSize(12).fontColor(#FFFFFF) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(C.ok).borderRadius(4) Text(位于 B 楼 302).fontSize(12).fontColor(C.textDim) } .width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 元素120 高 emoji 图标块C.primarySoft浅青底 48sp——全宽大图标120vp 高是全页最高图标块设备名称18sp 加粗空闲标签白字绿底 C.ok位置位于 B 楼 302灰字——状态 位置双信息空闲标签用C.ok绿底白字——与首页状态色一致绿空闲——跨页状态色统一。位于 B 楼 302——设备位置实验室物理位置——设备详情必须含位置用户要去实体实验室用设备。三、SpecCard设备参数表SpecCard 是标签 值参数表——4 行参数Builder SpecCard() { Column({ space: 10 }) { Text(设备参数).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(型号).fontSize(13).fontColor(C.textDim).width(60) Text(Olympus BX53).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(倍率).fontSize(13).fontColor(C.textDim).width(60) Text(40x - 1000x).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(光源).fontSize(13).fontColor(C.textDim).width(60) Text(LED 冷光源).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(模式).fontSize(13).fontColor(C.textDim).width(60) Text(明场 / 偏光 / 荧光).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 行标签 值标签值型号Olympus BX53倍率40x - 1000x光源LED 冷光源模式明场 / 偏光 / 荧光标签 60vp 固定宽 值 layoutWeight——4 行标签右对齐、值左对齐——参数表的标准布局标签列固定宽保证对齐。参数是真实显微镜参数——Olympus BX53 是真实显微镜型号奥林巴斯生物显微镜、40x-1000x 是标准倍率、明场/偏光/荧光是显微镜 3 种模式——参数真实性 详情可信度。参数表的键值对模式——Row(标签 值)重复 4 次——真实项目应改为数据驱动private specs: SpecItem[] [ { label: 型号, value: Olympus BX53 }, { label: 倍率, value: 40x - 1000x }, ... ]; // ForEach 渲染参数表数据化——加参数只需往数组加一项不用复制粘贴 Row——4 行参数用数据驱动是更好的工程实践本页手写 4 个 Row 是 demo 简化。四、GuideCard使用说明GuideCard 是4 条使用说明操作指引Builder GuideCard() { Column({ space: 10 }) { Text(使用说明).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Text(1. 预约后请在指定时间到达实验室).fontSize(13).fontColor(C.textSub).width(100%) Text(2. 使用前检查设备状态并登记).fontSize(13).fontColor(C.textSub).width(100%) Text(3. 使用后清洁镜头并归位).fontSize(13).fontColor(C.textSub).width(100%) Text(4. 如有故障请联系实验室管理员).fontSize(13).fontColor(C.textSub).width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 条说明的操作流程预约后准时到达预约 → 到达使用前检查登记检查 → 登记使用后清洁归位清洁 → 归位故障联系管理员异常 → 求助编号 说明1./2./3./4.——编号让说明有序——**用户按编号执行预约→到达→检查→使用→清洁→归位→求助**完整流程。实验室安全规范——清洁归位/故障上报是实验室礼仪——使用说明 实验室规章制度——真实项目应加安全须知戴手套/护目镜等。五、BookingList近期预约 预约按钮BookingList 是2 时段预约 预约该时段按钮Builder BookingList() { Column({ space: 12 }) { Text(近期预约).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(今天 14:00-16:00).fontSize(13).fontColor(C.text).layoutWeight(1) Text(已被预约).fontSize(11).fontColor(C.warn) } .width(100%).padding(10) .backgroundColor(C.cardSoft).borderRadius(D.rSm) Row({ space: 8 }) { Text(明天 09:00-11:00).fontSize(13).fontColor(C.text).layoutWeight(1) Text(空闲).fontSize(11).fontColor(C.ok) } .width(100%).padding(10) .backgroundColor(C.primarySoft).borderRadius(D.rSm) Button(预约该时段) .width(100%).height(44) .fontSize(14).fontColor(#FFFFFF).backgroundColor(C.primary) .borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: 预约成功 }); }) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }2 时段 状态今天 14:00-16:00已被预约橙——C.cardSoft浅灰底明天 09:00-11:00空闲绿——C.primarySoft浅青底可预约的时段用品牌浅色高亮可预约时段用浅青底、已被约时段用浅灰底——可预约性通过底色区分比只靠状态字更直观。预约该时段按钮——44vp 深青底白字——点击弹 Toast 预约成功——预约 一键完成。注意demo 未绑定哪个时段可预约——按钮无论今天已被约还是明天空闲都显示预约该时段——真实项目应选中空闲时段 → 按钮变预约 09:00-11:00与 App 14 场地预约的动态按钮同款。六、State 数量 0Func1Tab0 个 State——所有内容硬编码高倍显微镜/Olympus BX53/使用说明/近期预约——纯展示详情页。真实项目应数据化设备信息来自首页点击的设备Prop device或路由传参——首页点设备 → 详情页显示该设备——本页硬编码高倍显微镜是 demo 简化首页 6 台设备都能点但详情页永远显示显微镜。七、详情页 4 卡模板的可复用性App 23 设备详情页的4 卡是详情页通用模板InfoCard身份大图 名称 状态 位置 SpecCard参数表标签 值 GuideCard说明编号 指引 BookingList行动时段 预约按钮详情页 4 卡可复用到商品详情图片 参数 详情 购买场馆详情封面 设施 规则 预订课程详情封面 大纲 须知 报名房间详情图片 配置 须知 预订身份 参数 指南 行动4 层是详情页的通用信息架构——读者做任何详情页都可参考。八、参数表的 3 种信息展示方式App 23 的 SpecCard 用标签 值键值对表——真实设备/商品详情页的参数展示有 3 种方式1. 键值对表App 23 当前型号 | Olympus BX53 倍率 | 40x - 1000x——适合参数数量中等4-8 项一列一值清晰易读。2. 分组表真实产品【光学参数】倍率 40x-1000x / 物镜 4x/10x/40x 【电学参数】电压 220V / 功率 100W——适合参数多10分组避免堆砌。3. 卡片式规格说明 高倍显微镜 1000x 偏光 · LED冷光源 · 明场/偏光/荧光——适合参数少2-3 项一行概括。参数数量决定展示方式——4-8 项用键值对、10 用分组、3 项内用卡片。真实设备的参数表数据源// 设备参数从后端 API 拉取 interface DeviceSpec { label: string; value: string; } private specs: DeviceSpec[] await getDeviceSpecs(deviceId);参数表数据化——参数从数据源来不是硬编码——详情页的参数是设备的元数据同一设备类型的设备共享参数模板。九、使用说明的 4 种场景应用App 23 的 GuideCard 是使用说明 4 条——说明/须知类内容在 App 中的 4 种场景1. 操作步骤App 23——预约→到达→检查→使用→清洁→归位——编号有序用户按序执行。2. 安全须知实验室进阶——戴护目镜禁饮食紧急开关位置——警示性内容用红色/黄色强调。3. 常见问题 FAQ——如何预约设备坏了找谁——问答形式可展开/折叠。4. 免责声明——使用者自行承担损坏责任——法律文本小字灰底。说明内容决定 UI 形态操作步骤 → 编号列表App 23安全须知 → 警示色卡片FAQ → 折叠面板声明 → 小字灰底使用说明是设备/商品详情页的标配——说明清晰 减少客服压力用户看完说明能自己操作不用问管理员。十、预约时段的冲突检测App 23 的 BookingList 展示今天已被预约/明天空闲——真实项目的预约时段冲突检测// 时段冲突检测 function isSlotBooked(deviceId: number, date: string, slot: string): boolean { return bookings.some(b b.deviceId deviceId b.date date b.slot slot ); }预约冲突的 3 层处理前端禁用当前实现已被约的时段置灰/显示已被预约前端提示用户点已被约时段 → 弹 Toast 该时段已被预约后端校验最终防线提交时服务端验证无冲突防止并发抢同一时段冲突检测是预约系统的核心——并发预约是最难处理的场景两人同时约同一时段——后端乐观锁/数据库唯一约束是解决方案。App 23 的简化时段状态是硬编码今天已被预约写死——真实项目从预约表实时计算——时段状态 预约记录的聚合。十一、设备详情的路由传参设计App 23 设备详情页硬编码高倍显微镜——真实项目应首页点设备 → 详情页显示该设备——路由传参是核心机制方案 1路由参数// 首页点击设备 → 跳转详情页 router.pushUrl({ url: pages/DeviceDetail, params: { deviceId: d.id } }); // 详情页接收 onPageLoad() { const params router.getParams() as Recordstring, number; this.deviceId params.deviceId; this.loadDevice(this.deviceId); }方案 2AppStorage 全局// 首页 AppStorage.setOrCreate(currentDevice, d.id); // 详情页 StorageProp(currentDevice) deviceId: number;方案 3Prop 子组件Tab 结构内传递// 首页 Tab 与设备 Tab 是平级用 AppStorage 或路由最合适路由传参让详情页数据化——首页 6 台设备点击都进详情页显示对应设备——**详情页从硬编码变为动态**是 demo 到产品的关键改进。十二、使用说明的版本管理与审核App 23 的 GuideCard 是静态 4 条说明——真实实验室的使用说明需要版本管理使用说明的 3 层管理版本——设备操作流程更新如新操作规程→ 说明 v1.2 替换 v1.1审核——说明变更需管理员审核安全规范不能随便改追溯——操作事故时能查当时用的是哪个版本的说明使用说明 设备文档——真实项目应interface GuideVersion { version: string; content: string[]; effectiveDate: string; approvedBy: string; }说明版本化是设备管理尤其医疗/科研的合规要求——操作事故追责时需要当时版本。App 23 的简化说明硬编码 4 条——读者做实验室/医疗设备管理时说明应支持版本 审核 追溯。十三、设备状态与详情页状态色的一致性App 23 详情页的空闲标签绿底白字与首页设备卡的空闲状态色C.ok绿字颜色语义一致首页设备卡Text(d.status).fontColor(d.statusColor)绿字详情页标签Text(空闲).backgroundColor(C.ok)绿底白字同状态同颜色、不同形态首页状态色文字列表紧凑文字色省空间详情页状态色标签详情宽松色块更醒目状态色跨页一致是设计系统原则——用户在首页看到绿色 空闲到详情页看到绿色标签自动理解空闲——颜色语义全局统一。色字 vs 色块的选择列表卡信息多状态用色字不占空间详情卡信息少状态用色块标签醒目状态展示形态 页面空间——读者做自己的设计系统时同状态同色、形态随空间是标准。十四、详情页的返回与导航App 23 详情页是 Tab 内页面Func1Tab无返回按钮——真实项目的详情页有返回导航页面层级导航首页Tab→ 点击设备 → 设备详情push→ 返回ArkUI 页面导航// push 进入详情页 router.pushUrl({ url: pages/DeviceDetail, params: { id: 1 } }); // 详情页返回 router.back();详情页 3 要素导航相关返回按钮左上角←——回到列表面包屑/标题——设备详情标题底部操作——预约该时段App 23 的预约按钮是详情页的行动锚点App 23 的简化详情页是 Tab 内页面无 push/back——真实项目详情页通常独立路由——Tab 详情 vs 路由详情是两种导航模式Tab 详情简单、路由详情灵活。十五、预约按钮的动态化与状态联动App 23 详情页底部的预约按钮是静态按钮——无论设备状态如何按钮始终可点击。真实项目中预约按钮应与设备状态联动按钮状态机设计空闲→ 按钮可点击文案立即预约主色背景使用中→ 按钮禁用文案使用中灰色背景维护中→ 按钮禁用文案维护中橙色背景真实项目的动态按钮// 按钮状态跟随设备状态 Button(this.getBtnText(device.status)) .enabled(device.status 空闲) .backgroundColor(device.status 空闲 ? C.primary : C.textDim) .onClick(() { /* 跳转预约页 */ })按钮 状态的可操作化——按钮不仅是入口更是状态的视觉反馈——**状态 → 按钮 → 行动**是详情页的核心交互链路。读者做设备/场地预约类 App 时务必让按钮跟随状态变化避免用户点击后才发现不可预约。十六、总结App 23 设备详情页解析完毕。4 卡结构身份/参数/说明/预约 大图标 参数表 可预约性底色区分是核心组件。**详情页 4 卡 身份 参数 指南 行动是详情页通用模板。状态色跨页一致、路由传参、页面导航、按钮动态化是真实项目的进阶能力。参数表数据化和预约按钮动态化**是具体改进方向。
鸿蒙原生应用 HarmonyOS 6.0实战拆解 —— 设备详情页的参数表与近期预约时段卡App 23「实验室设备预约」设备 TabFunc1Tab是设备详情页——4 卡结构InfoCard 120 高图标块 高倍显微镜 空闲标签 位置 SpecCard设备参数表型号/倍率/光源/模式 GuideCard使用说明 4 条 BookingList近期预约 2 时段 预约该时段按钮。本篇基于23-lab-booking/entry/src/main/ets/pages/Func1Tab.ets约 145 行逐段拆解附 4 张实机截图。一、整体结构4 卡详情页Func1Tab 是**设备详情的 4 卡布局**——信息/参数/说明/预约 4 层build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.InfoCard() this.SpecCard() this.GuideCard() this.BookingList() } .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) }4 个块按是什么 → 参数 → 怎么用 → 怎么约漏斗展开InfoCard— 设备身份大图标 名称 状态 位置SpecCard— 设备参数型号/倍率/光源/模式GuideCard— 使用说明4 条操作指引BookingList— 近期预约2 时段 预约按钮详情页 4 卡是设备/商品详情页的通用结构电商商品详情 图片 参数 详情 购买设备详情 图标 参数 说明 预约——详情页 身份 参数 指南 行动。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header InfoCard设备身份卡Header 是设备详情单行系列标准。InfoCard是设备身份卡——大图标 名称 状态 位置Builder InfoCard() { Column({ space: 12 }) { Row() { Text().fontSize(48) } .width(100%).height(120) .backgroundColor(C.primarySoft).borderRadius(D.rLg) .justifyContent(FlexAlign.Center) Text(高倍显微镜).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(空闲).fontSize(12).fontColor(#FFFFFF) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(C.ok).borderRadius(4) Text(位于 B 楼 302).fontSize(12).fontColor(C.textDim) } .width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 元素120 高 emoji 图标块C.primarySoft浅青底 48sp——全宽大图标120vp 高是全页最高图标块设备名称18sp 加粗空闲标签白字绿底 C.ok位置位于 B 楼 302灰字——状态 位置双信息空闲标签用C.ok绿底白字——与首页状态色一致绿空闲——跨页状态色统一。位于 B 楼 302——设备位置实验室物理位置——设备详情必须含位置用户要去实体实验室用设备。三、SpecCard设备参数表SpecCard 是标签 值参数表——4 行参数Builder SpecCard() { Column({ space: 10 }) { Text(设备参数).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(型号).fontSize(13).fontColor(C.textDim).width(60) Text(Olympus BX53).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(倍率).fontSize(13).fontColor(C.textDim).width(60) Text(40x - 1000x).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(光源).fontSize(13).fontColor(C.textDim).width(60) Text(LED 冷光源).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) Row({ space: 8 }) { Text(模式).fontSize(13).fontColor(C.textDim).width(60) Text(明场 / 偏光 / 荧光).fontSize(13).fontColor(C.text).layoutWeight(1) } .width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 行标签 值标签值型号Olympus BX53倍率40x - 1000x光源LED 冷光源模式明场 / 偏光 / 荧光标签 60vp 固定宽 值 layoutWeight——4 行标签右对齐、值左对齐——参数表的标准布局标签列固定宽保证对齐。参数是真实显微镜参数——Olympus BX53 是真实显微镜型号奥林巴斯生物显微镜、40x-1000x 是标准倍率、明场/偏光/荧光是显微镜 3 种模式——参数真实性 详情可信度。参数表的键值对模式——Row(标签 值)重复 4 次——真实项目应改为数据驱动private specs: SpecItem[] [ { label: 型号, value: Olympus BX53 }, { label: 倍率, value: 40x - 1000x }, ... ]; // ForEach 渲染参数表数据化——加参数只需往数组加一项不用复制粘贴 Row——4 行参数用数据驱动是更好的工程实践本页手写 4 个 Row 是 demo 简化。四、GuideCard使用说明GuideCard 是4 条使用说明操作指引Builder GuideCard() { Column({ space: 10 }) { Text(使用说明).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Text(1. 预约后请在指定时间到达实验室).fontSize(13).fontColor(C.textSub).width(100%) Text(2. 使用前检查设备状态并登记).fontSize(13).fontColor(C.textSub).width(100%) Text(3. 使用后清洁镜头并归位).fontSize(13).fontColor(C.textSub).width(100%) Text(4. 如有故障请联系实验室管理员).fontSize(13).fontColor(C.textSub).width(100%) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }4 条说明的操作流程预约后准时到达预约 → 到达使用前检查登记检查 → 登记使用后清洁归位清洁 → 归位故障联系管理员异常 → 求助编号 说明1./2./3./4.——编号让说明有序——**用户按编号执行预约→到达→检查→使用→清洁→归位→求助**完整流程。实验室安全规范——清洁归位/故障上报是实验室礼仪——使用说明 实验室规章制度——真实项目应加安全须知戴手套/护目镜等。五、BookingList近期预约 预约按钮BookingList 是2 时段预约 预约该时段按钮Builder BookingList() { Column({ space: 12 }) { Text(近期预约).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 8 }) { Text(今天 14:00-16:00).fontSize(13).fontColor(C.text).layoutWeight(1) Text(已被预约).fontSize(11).fontColor(C.warn) } .width(100%).padding(10) .backgroundColor(C.cardSoft).borderRadius(D.rSm) Row({ space: 8 }) { Text(明天 09:00-11:00).fontSize(13).fontColor(C.text).layoutWeight(1) Text(空闲).fontSize(11).fontColor(C.ok) } .width(100%).padding(10) .backgroundColor(C.primarySoft).borderRadius(D.rSm) Button(预约该时段) .width(100%).height(44) .fontSize(14).fontColor(#FFFFFF).backgroundColor(C.primary) .borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: 预约成功 }); }) } .width(100%) .padding(16) .backgroundColor(C.card) .borderRadius(D.rLg) .border({ width: 1, color: C.stroke }) }2 时段 状态今天 14:00-16:00已被预约橙——C.cardSoft浅灰底明天 09:00-11:00空闲绿——C.primarySoft浅青底可预约的时段用品牌浅色高亮可预约时段用浅青底、已被约时段用浅灰底——可预约性通过底色区分比只靠状态字更直观。预约该时段按钮——44vp 深青底白字——点击弹 Toast 预约成功——预约 一键完成。注意demo 未绑定哪个时段可预约——按钮无论今天已被约还是明天空闲都显示预约该时段——真实项目应选中空闲时段 → 按钮变预约 09:00-11:00与 App 14 场地预约的动态按钮同款。六、State 数量 0Func1Tab0 个 State——所有内容硬编码高倍显微镜/Olympus BX53/使用说明/近期预约——纯展示详情页。真实项目应数据化设备信息来自首页点击的设备Prop device或路由传参——首页点设备 → 详情页显示该设备——本页硬编码高倍显微镜是 demo 简化首页 6 台设备都能点但详情页永远显示显微镜。七、详情页 4 卡模板的可复用性App 23 设备详情页的4 卡是详情页通用模板InfoCard身份大图 名称 状态 位置 SpecCard参数表标签 值 GuideCard说明编号 指引 BookingList行动时段 预约按钮详情页 4 卡可复用到商品详情图片 参数 详情 购买场馆详情封面 设施 规则 预订课程详情封面 大纲 须知 报名房间详情图片 配置 须知 预订身份 参数 指南 行动4 层是详情页的通用信息架构——读者做任何详情页都可参考。八、参数表的 3 种信息展示方式App 23 的 SpecCard 用标签 值键值对表——真实设备/商品详情页的参数展示有 3 种方式1. 键值对表App 23 当前型号 | Olympus BX53 倍率 | 40x - 1000x——适合参数数量中等4-8 项一列一值清晰易读。2. 分组表真实产品【光学参数】倍率 40x-1000x / 物镜 4x/10x/40x 【电学参数】电压 220V / 功率 100W——适合参数多10分组避免堆砌。3. 卡片式规格说明 高倍显微镜 1000x 偏光 · LED冷光源 · 明场/偏光/荧光——适合参数少2-3 项一行概括。参数数量决定展示方式——4-8 项用键值对、10 用分组、3 项内用卡片。真实设备的参数表数据源// 设备参数从后端 API 拉取 interface DeviceSpec { label: string; value: string; } private specs: DeviceSpec[] await getDeviceSpecs(deviceId);参数表数据化——参数从数据源来不是硬编码——详情页的参数是设备的元数据同一设备类型的设备共享参数模板。九、使用说明的 4 种场景应用App 23 的 GuideCard 是使用说明 4 条——说明/须知类内容在 App 中的 4 种场景1. 操作步骤App 23——预约→到达→检查→使用→清洁→归位——编号有序用户按序执行。2. 安全须知实验室进阶——戴护目镜禁饮食紧急开关位置——警示性内容用红色/黄色强调。3. 常见问题 FAQ——如何预约设备坏了找谁——问答形式可展开/折叠。4. 免责声明——使用者自行承担损坏责任——法律文本小字灰底。说明内容决定 UI 形态操作步骤 → 编号列表App 23安全须知 → 警示色卡片FAQ → 折叠面板声明 → 小字灰底使用说明是设备/商品详情页的标配——说明清晰 减少客服压力用户看完说明能自己操作不用问管理员。十、预约时段的冲突检测App 23 的 BookingList 展示今天已被预约/明天空闲——真实项目的预约时段冲突检测// 时段冲突检测 function isSlotBooked(deviceId: number, date: string, slot: string): boolean { return bookings.some(b b.deviceId deviceId b.date date b.slot slot ); }预约冲突的 3 层处理前端禁用当前实现已被约的时段置灰/显示已被预约前端提示用户点已被约时段 → 弹 Toast 该时段已被预约后端校验最终防线提交时服务端验证无冲突防止并发抢同一时段冲突检测是预约系统的核心——并发预约是最难处理的场景两人同时约同一时段——后端乐观锁/数据库唯一约束是解决方案。App 23 的简化时段状态是硬编码今天已被预约写死——真实项目从预约表实时计算——时段状态 预约记录的聚合。十一、设备详情的路由传参设计App 23 设备详情页硬编码高倍显微镜——真实项目应首页点设备 → 详情页显示该设备——路由传参是核心机制方案 1路由参数// 首页点击设备 → 跳转详情页 router.pushUrl({ url: pages/DeviceDetail, params: { deviceId: d.id } }); // 详情页接收 onPageLoad() { const params router.getParams() as Recordstring, number; this.deviceId params.deviceId; this.loadDevice(this.deviceId); }方案 2AppStorage 全局// 首页 AppStorage.setOrCreate(currentDevice, d.id); // 详情页 StorageProp(currentDevice) deviceId: number;方案 3Prop 子组件Tab 结构内传递// 首页 Tab 与设备 Tab 是平级用 AppStorage 或路由最合适路由传参让详情页数据化——首页 6 台设备点击都进详情页显示对应设备——**详情页从硬编码变为动态**是 demo 到产品的关键改进。十二、使用说明的版本管理与审核App 23 的 GuideCard 是静态 4 条说明——真实实验室的使用说明需要版本管理使用说明的 3 层管理版本——设备操作流程更新如新操作规程→ 说明 v1.2 替换 v1.1审核——说明变更需管理员审核安全规范不能随便改追溯——操作事故时能查当时用的是哪个版本的说明使用说明 设备文档——真实项目应interface GuideVersion { version: string; content: string[]; effectiveDate: string; approvedBy: string; }说明版本化是设备管理尤其医疗/科研的合规要求——操作事故追责时需要当时版本。App 23 的简化说明硬编码 4 条——读者做实验室/医疗设备管理时说明应支持版本 审核 追溯。十三、设备状态与详情页状态色的一致性App 23 详情页的空闲标签绿底白字与首页设备卡的空闲状态色C.ok绿字颜色语义一致首页设备卡Text(d.status).fontColor(d.statusColor)绿字详情页标签Text(空闲).backgroundColor(C.ok)绿底白字同状态同颜色、不同形态首页状态色文字列表紧凑文字色省空间详情页状态色标签详情宽松色块更醒目状态色跨页一致是设计系统原则——用户在首页看到绿色 空闲到详情页看到绿色标签自动理解空闲——颜色语义全局统一。色字 vs 色块的选择列表卡信息多状态用色字不占空间详情卡信息少状态用色块标签醒目状态展示形态 页面空间——读者做自己的设计系统时同状态同色、形态随空间是标准。十四、详情页的返回与导航App 23 详情页是 Tab 内页面Func1Tab无返回按钮——真实项目的详情页有返回导航页面层级导航首页Tab→ 点击设备 → 设备详情push→ 返回ArkUI 页面导航// push 进入详情页 router.pushUrl({ url: pages/DeviceDetail, params: { id: 1 } }); // 详情页返回 router.back();详情页 3 要素导航相关返回按钮左上角←——回到列表面包屑/标题——设备详情标题底部操作——预约该时段App 23 的预约按钮是详情页的行动锚点App 23 的简化详情页是 Tab 内页面无 push/back——真实项目详情页通常独立路由——Tab 详情 vs 路由详情是两种导航模式Tab 详情简单、路由详情灵活。十五、预约按钮的动态化与状态联动App 23 详情页底部的预约按钮是静态按钮——无论设备状态如何按钮始终可点击。真实项目中预约按钮应与设备状态联动按钮状态机设计空闲→ 按钮可点击文案立即预约主色背景使用中→ 按钮禁用文案使用中灰色背景维护中→ 按钮禁用文案维护中橙色背景真实项目的动态按钮// 按钮状态跟随设备状态 Button(this.getBtnText(device.status)) .enabled(device.status 空闲) .backgroundColor(device.status 空闲 ? C.primary : C.textDim) .onClick(() { /* 跳转预约页 */ })按钮 状态的可操作化——按钮不仅是入口更是状态的视觉反馈——**状态 → 按钮 → 行动**是详情页的核心交互链路。读者做设备/场地预约类 App 时务必让按钮跟随状态变化避免用户点击后才发现不可预约。十六、总结App 23 设备详情页解析完毕。4 卡结构身份/参数/说明/预约 大图标 参数表 可预约性底色区分是核心组件。**详情页 4 卡 身份 参数 指南 行动是详情页通用模板。状态色跨页一致、路由传参、页面导航、按钮动态化是真实项目的进阶能力。参数表数据化和预约按钮动态化**是具体改进方向。
