药品说明书解读 —— AI 安全用药助手，鸿蒙原生应用深度解析

药品说明书解读 ------ AI 安全用药助手，鸿蒙原生应用深度解析

一、引言

药品说明书是安全用药的"第一道防线"，但晦涩的专业术语、密密麻麻的文字、不同人群的差异化用药方案，让普通人难以真正读懂。药品说明书解读 这款鸿蒙原生 AI 应用，旨在解决这一普遍痛点：用户只需粘贴说明书文本，选择适用人群（成人/儿童/孕妇/老人/哺乳期），AI 即可自动生成包含用法用量、禁忌、副作用、药物相互作用的四维解读。

本文将从架构设计、鸿蒙技术深度解析、AI 亮点、技术挑战和用户体验五个维度，全面剖析这款应用的技术实现。

二、应用架构设计

2.1 整体架构

应用采用 MVS（Model-View-Service） 三层架构：

Model 层（DrugLeafletModel.ets） ：定义 DrugData（药品数据）、DLMessage（消息记录）等数据模型，以及 DL_GROUPS（人群选项数组）和 DL_WELCOME（欢迎语）等常量。
View 层（DrugLeafletPage.ets） ：基于 @Component 的声明式 UI，包含 TextArea 输入区、Flex 人群选择区、Scroll 结果展示区。
Service 层（DrugLeafletService.ets）：封装 AI 解读引擎，根据人群类型返回差异化的用药指导。

2.2 数据流

复制代码

用户输入说明书 → @State bigText 更新
用户选择人群 → @State selectedGroup 更新
点击"开始解读" → 调用 service.getDrugLeaflet()
Service 返回 DrugData → @State currentData 更新
@Builder 渲染四栏并列展示

三、鸿蒙技术深度解析

3.1 @State 多状态协同管理

typescript 复制代码

@State messages: DLMessage[] = []
@State bigText: string = ''
@State selectedGroup: string = ''
@State currentData: DrugData | null = null
@State isLoading: boolean = false

本应用共有 5 个 @State 变量，分别管理不同的 UI 状态：

messages：维护对话历史，支持多次解读的上下文连贯
bigText：绑定 TextArea 的输入内容
selectedGroup：记录当前选中的适用人群
currentData：存储 AI 返回的解读结果
isLoading：控制加载状态动画

设计亮点 ：@State 的细粒度更新机制确保了只有变化的状态才会触发相关 UI 重渲染。例如，当用户切换人群时，仅 selectedGroup 相关的 Flex 选项区域更新，而 TextArea 区域保持不变。

3.2 @Builder 四栏并列展示结构

药品说明书解读的输出包含四个维度，每个维度都是一个独立的卡片，通过 @Builder 封装：

typescript 复制代码

@Builder
buildResultCard(data: DrugData) {
  Column() {
    // 用法用量 - 橙色标题
    this.buildCardItem('💊 用法用量', data.dosage, COLOR_PRIMARY, COLOR_BORDER)
    // 禁忌 - 红色标题
    this.buildCardItem('🚫 禁忌', data.contraindication, '#DC2626', '#FECACA')
    // 副作用 - 黄色标题
    this.buildCardItem('⚠️ 副作用', data.side_effects, '#F59E0B', '#FDE68A')
    // 药物相互作用 - 紫色标题
    this.buildCardItem('🔗 药物相互作用', data.interaction, '#6366F1', '#C7D2FE')
  }
}

四维卡片颜色编码：

维度	标题颜色	边框颜色	语义
💊 用法用量	#F97316 橙	#FED7AA 浅橙	核心信息，需重点关注
🚫 禁忌	#DC2626 红	#FECACA 浅红	危险警告，不可忽视
⚠️ 副作用	#F59E0B 黄	#FDE68A 浅黄	注意事项，需要了解
🔗 相互作用	#6366F1 紫	#C7D2FE 浅紫	附加信息，供参考

这种四维并列展示结构让用户能在同一屏内快速获取完整信息，无需反复滚动。

3.3 Flex + ForEach 人群选择交互

typescript 复制代码

Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
  ForEach(DL_GROUPS, (item: string) => {
    Text(item)
      .fontSize(14)
      .fontWeight(selected === item ? FontWeight.Bold : FontWeight.Normal)
      .fontColor(selected === item ? COLOR_PRIMARY : COLOR_TEXT)
      .padding({ left: 14, right: 14, top: 8, bottom: 8 })
      .backgroundColor(selected === item ? '#FFEDD5' : COLOR_CARD)
      .borderRadius(16)
      .border({ width: 1, color: selected === item ? COLOR_PRIMARY : COLOR_BORDER })
      .margin({ right: 8, bottom: 8 })
      .onClick(() => { onClick(item) })
  })
}

技术要点：

FlexWrap 响应式布局：5 个人群选项在窄屏上自动换行，无需横向滚动
选中态视觉反馈：选中时背景变为浅橙 (#FFEDD5)、边框变为主色 (#F97316)、字体加粗
ForEach 高效渲染：仅更新变化的选项，未选中选项保持原样

3.4 TextArea 大文本输入与条件渲染

typescript 复制代码

TextArea({ text: this.bigText, placeholder: '粘贴药品说明书文本...' })
  .height(120)
  .fontSize(14)
  .fontColor(COLOR_TEXT)
  .placeholderColor(COLOR_TEXT_SEC)
  .backgroundColor(COLOR_CARD)
  .borderRadius(12)
  .border({ width: 1, color: COLOR_BORDER })
  .padding(12)
  .margin({ left: 16, right: 16, top: 4, bottom: 8 })
  .onChange((val: string) => { this.bigText = val })

TextArea 支持多行文本输入，适合粘贴大段说明书内容。通过 placeholder 提供输入提示，borderRadius 圆角设计提升视觉舒适度。

3.5 Scroll 滚动容器与结果展示

typescript 复制代码

if (this.currentData !== null) {
  Scroll() {
    Column() {
      this.buildResultCard(this.currentData)
    }
    .padding({ bottom: 20 })
  }
  .layoutWeight(1)
  .scrollBar(BarState.Off)
}

使用 Scroll 包裹结果区域，确保当解读内容超出屏幕高度时用户可滚动查看。layoutWeight(1) 让 Scroll 占据 Flex 布局中的剩余空间。

四、AI 应用亮点分析

4.1 5 种人群差异化解读

本应用最核心的 AI 能力是人群差异化解读。同样一份药品说明书，针对不同人群生成完全不同的解读内容：

人群	用法用量特点	禁忌重点	副作用关注点	相互作用侧重点
成人	标准剂量，常规频次	过敏、肝肾功能	常见副作用发生率	常规药物相互作用
儿童	按体重计算剂量，建议颗粒剂	月龄限制、哮喘史	腹泻更常见	与布洛芬、益生菌间隔
孕妇	最低有效剂量，最短疗程	孕早期禁用、致畸风险	与早孕反应叠加	与叶酸、维生素 A 间隔
老人	剂量减半至 2/3，缓慢增量	肾功能、心衰史	头晕嗜睡风险增加	与降压药/抗凝药协同
哺乳期	哺乳后服药，间隔 3-4 小时	早产儿、G6PD 缺乏	婴儿腹泻/皮疹	与避孕药、雌激素冲突

这种差异化设计体现了 AI 从"通用回答"到"精准适配"的进化，不同人群看到不同的用药指导，避免了"一刀切"带来的安全隐患。

4.2 禁忌按人群高亮提示

禁忌信息是药品安全的核心，应用针对不同人群特别标注了高危禁忌：

儿童：6 个月以下婴儿禁用、脱水患儿需先纠正脱水
孕妇：孕早期禁用、有致畸风险的药物严禁使用
老人：CrCl < 30mL/min 禁用、有消化道溃疡史慎用
哺乳期：婴儿为早产儿或低体重儿时禁用

4.3 药物相互作用实用提示

药物相互作用模块提供了实用的用药时序建议，如：

"与含铝/镁的抗酸药同服会降低吸收率"
"不宜与牛奶同服，间隔至少 2 小时"
"与益生菌制剂同服需间隔 2 小时以上"
"避免与果汁（尤其是橙汁）同服"

这些建议直接指导用户的日常用药行为，极具实用价值。

五、关键技术挑战与解决方案

5.1 挑战一：多维度信息的高效组织

问题：药品信息涉及用法、禁忌、副作用、相互作用四个维度，每个维度又有多个条目，如何在有限屏幕空间内清晰展示？

解决方案：采用四栏并列的卡片式布局，每个卡片使用统一的视觉风格（标题 + 无序列表），通过不同的颜色编码快速区分维度。ForEach 循环渲染列表条目，确保内容可扩展。

5.2 挑战二：人群选择的即时反馈

问题：用户切换人群时，需要立即看到对应的解读结果，但 AI 处理需要时间。

解决方案 ：采用"先选择后生成"的交互模式。用户依次完成文本输入和人群选择后，点击"开始解读"按钮统一触发 AI 处理。同时提供 isLoading 加载状态，让用户明确知晓处理进度。

5.3 挑战三：信息密度与视觉舒适度的平衡

问题：药品信息量大，展示密集容易造成阅读疲劳。

解决方案 ：通过合理的间距（padding: 16、margin: { bottom: 12 }）、圆角设计（borderRadius: 16）、适中的字体大小（13-14px）和行高（20-22px），在信息密度和阅读舒适度之间取得平衡。

六、用户体验设计

6.1 视觉设计

温暖橙色系：以 #FFF7ED 为主背景色，传递温暖关怀的品牌调性
卡片化布局：每个信息维度独立成卡，视觉分隔清晰
Emoji 图标：💊、🚫、⚠️、🔗 等 emoji 直观传达维度含义

6.2 交互设计

渐进式呈现：输入区、选择区、按钮、结果区依次显示，用户完成一步才能看到下一步
加载动画：AI 处理期间显示"💊 正在解读说明书......"文字提示
一键重置：头部导航栏提供"重置"按钮，一键清空所有输入

6.3 安全设计

应用明确标注"请遵医嘱"的边界，避免用户自行用药
禁忌信息使用红色高亮，确保用户不会错过关键警告
人群选择强制要求，避免用户未选择人群就生成解读

七、总结

药品说明书解读 应用通过鸿蒙原生技术栈，实现了一款安全、实用的 AI 用药助手。在技术层面，@State 状态管理、@Builder 组件复用、Flex + ForEach + Scroll 布局组合，展现了鸿蒙 ArkTS 声明式 UI 的优雅与强大。在 AI 层面，5 种人群差异化解读、禁忌按人群高亮、药物相互作用提示，体现了 AI 在医疗健康领域的精准应用。

这款应用不仅降低了药品说明书的理解门槛，更重要的是------通过人群差异化解读，让每个人都能获得真正适合自己的用药指导。这正是 AI 赋能医疗健康的核心价值所在。

技术栈：HarmonyOS ArkTS · 声明式 UI · @State · @Builder · TextArea · Flex · ForEach · Scroll · 颜色编码