会议纪要生成鸿蒙AI应用让每一场会议都有迹可循一、引言“开会两小时纪要五分钟”——这是许多职场人面临的真实困境。会议发言此起彼伏关键决策在讨论中快速形成但会后整理会议纪要却成了最耗时、最烧脑的工作。更糟糕的是纪要中遗漏的决议、模糊的待办事项往往导致团队执行力下降。会议纪要生成正是为解决这一痛点而生的鸿蒙原生AI应用。基于ArkTS声明式UI框架用户只需粘贴录音转写文本并选择详略程度精简/标准/详细AI即刻生成结构化会议纪要包含三大核心板块议题清单、决议列表、待办事项含负责人和截止日期。将数小时的纪要整理工作压缩到1.5秒内完成。本文将从架构设计、鸿蒙技术深度解析、AI应用亮点、关键技术挑战、用户体验设计等维度全面剖析这款效率类AI应用的实现之道。在这里插入图片描述二、应用架构设计2.1 架构分层┌──────────────────────────────────┐ │ MeetingMinutesPage.ets │ │ (Entry Component) │ │ State: transcriptText, │ │ selectedDetail, currentData │ ├──────────────────────────────────┤ │ MeetingMinutesModel.ets │ │ MeetingData (topics/decisions/ │ │ todos) TodoEntry │ │ MMM_DETAILS: 3种详略常量 │ ├──────────────────────────────────┤ │ MeetingMinutesService.ets │ │ 转写文本解析 结构化提取 │ └──────────────────────────────────┘2.2 数据模型exportclassTodoEntry{task:string// 待办任务描述owner:string// 负责人due:string// 截止日期}exportclassMeetingData{topics:string[]// 议题列表decisions:string[]// 决议列表todos:TodoEntry[]// 待办事项含负责人截止日期}2.3 交互流程用户打开应用 ↓ aboutToAppear → 显示欢迎语 ↓ TextArea 粘贴录音转写文本 ↓ Flex网格选择详略程度 (精简/标准/详细) ↓ 两者都填写 → 生成会议纪要按钮出现 ↓ 点击 → onGenerate() → setTimeout → ↓ service.getMeeting() → State currentData更新 ↓ 三层结构结果卡片渲染三、鸿蒙技术深度解析3.1 TextArea 大文本输入会议纪要生成需要处理大量文本输入录音转写内容通常有数百到数千字因此使用TextArea而非TextInputStatetranscriptText:stringTextArea({text:this.transcriptText,placeholder:粘贴录音转写文本...}).height(100).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.transcriptTextval})TextArea相较于TextInput的关键区别多行支持自动换行适合大段文本高度可调通过.height(100)设定初始高度用户可输入超过该高度的内容placeholder提示粘贴录音转写文本…降低用户使用门槛3.2 Builder 三层结构 —— 议题/决议/待办的分层展示会议纪要生成的结果展示采用了三层结构这是本应用中最复杂的 Builder 实现之一BuilderbuildResultCard(data:MeetingData){Column(){// 第一层议题列表紫色圆点Column(){Text( 议题).fontSize(14).fontWeight(FontWeight.Bold)ForEach(data.topics,(topic:string,idx:number){Row(){Text(•).fontSize(16).fontColor(COLOR_PRIMARY).margin({right:8})Text(topic).fontSize(14).fontColor(COLOR_TEXT).layoutWeight(1)}})}.padding(16).backgroundColor(COLOR_CARD).borderRadius(16).border({width:1,color:COLOR_BORDER}).margin({bottom:12})// 第二层决议列表绿色圆点Column(){Text(✅ 决议).fontSize(14).fontWeight(FontWeight.Bold)ForEach(data.decisions,(decision:string,idx:number){Row(){Text(•).fontSize(16).fontColor(#22C55E).margin({right:8})Text(decision).fontSize(14).fontColor(COLOR_TEXT).layoutWeight(1)}})}.padding(16).backgroundColor(COLOR_CARD).borderRadius(16).border({width:1,color:#BBF7D0}).margin({bottom:12})// 第三层待办事项含负责人截止日期Column(){Text( 待办事项).fontSize(14).fontWeight(FontWeight.Bold)ForEach(data.todos,(todo:TodoEntry,idx:number){Row(){// 序号圆标Text(${idx1}).fontSize(12).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).width(22).height(22).textAlign(TextAlign.Center).backgroundColor(COLOR_PRIMARY).borderRadius(11).margin({right:10})Column(){Text(todo.task).fontSize(14).fontWeight(FontWeight.Bold)Row(){Text(${todo.owner}).fontSize(11).fontColor(COLOR_TEXT_SEC).margin({right:12})Text(${todo.due}).fontSize(11).fontColor(COLOR_TEXT_SEC)}}.layoutWeight(1)}.padding(10).backgroundColor(COLOR_SELECTED_BG).borderRadius(10).margin({bottom:6})})}.padding(16).backgroundColor(COLOR_CARD).borderRadius(16).border({width:1,color:COLOR_BORDER})}}三层结构的视觉设计层级标题视觉标识用途议题 议题紫色圆点•列出讨论主题决议✅ 决议绿色圆点•明确会议决定待办 待办事项序号圆标 负责人截止跟踪执行任务3.3 条件渲染与按钮联动生成按钮需要同时满足两个条件转写文本非空 详略程度已选择if(this.transcriptText!this.selectedDetail!){Text(生成会议纪要).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).padding({left:32,right:32,top:12,bottom:12}).backgroundColor(COLOR_PRIMARY).borderRadius(24).margin({top:16}).onClick((){this.onGenerate()})}3.4 详略程度选择用户可以在精简/标准/详细三种详略程度中选择AI会根据选择调整输出内容的信息密度exportconstMMM_DETAILS:string[][精简,标准,详细]精简仅保留核心要点每条信息不超过一行标准完整信息适当展开说明详细包含细节和讨论过程适合存档四、AI应用亮点分析4.1 3种详略级别自适应AI能够根据用户选择的详略级别自动调整输出的信息密度和表述方式详略级别议题示例决议示例待办示例精简项目进度讨论确认延期张三-更新排期-本周标准讨论项目当前进度和延期原因确认项目延期一周下周五重新评估负责人张三更新项目排期截止日期本周五详细会议讨论了项目自启动以来的进度情况前端完成80%后端因接口变更延期经讨论团队一致同意将项目截止日期延后一周下周五进行进度复审由前端负责人张三负责更新项目排期表需在本周五下班前完成4.2 待办结构化提取AI从转写文本中智能提取待办事项并自动关联负责人和截止日期// 待办结构{task:更新项目排期表,owner:张三,due:本周五}这种结构化提取依赖于对转写文本中谁负责什么、什么时候完成这类表达的语义理解。4.3 议题与决议的自动分离AI能够区分讨论中的话题和已经达成的决策将两者自动分类到不同板块议题以讨论了“提到了”分享了等开头的描述决议以确认了“决定了”同意等开头的描述五、关键技术挑战与解决方案5.1 挑战一大文本输入的渲染性能问题当用户粘贴数千字的转写文本时TextArea 的渲染和滚动性能可能受到影响。解决方案TextArea 组件在 ArkTS 中已经做了性能优化对于大文本采用虚拟化渲染策略。同时将文本处理逻辑放在 Service 层而非 UI 层避免大文本操作阻塞主线程。5.2 挑战二待办事项的负责人-截止关联问题转写文本中谁做什么的表达方式千差万别需要智能解析。解决方案在 Service 层预置了多种常见表达模式覆盖由XX负责XX在DDL前完成等典型句式。对于无法匹配的文本使用默认值填充或提示用户手动补充。5.3 挑战三三层结构的视觉平衡问题议题、决议、待办三层内容量可能差异很大需要保持视觉平衡。解决方案每层使用独立的卡片容器通过margin({ bottom: 12 })保持间距。每层内部使用ForEach动态渲染内容量自适应。卡片使用统一的圆角borderRadius(16)和边框样式确保视觉一致性。六、用户体验设计6.1 色彩系统会议纪要生成采用紫色作为主色调#8B5CF6传递出专业、高效的品牌感知背景色#F5F3FF极淡紫色适合办公场景长时间使用主色调#8B5CF6明亮的紫色传递专业感选中态#EDE9FE浅紫背景视觉舒适6.2 三层信息架构结果页的信息架构遵循从宏观到微观的逻辑 议题讨论了什么→ 宏观 ✅ 决议决定了什么→ 中观 待办事项接下来做什么→ 微观这种过去→现在→未来的信息层次与会议纪要的阅读习惯高度吻合。6.3 待办事项的视觉突出待办事项层使用序号圆标borderRadius(11)的圆形配合浅紫背景使每个待办项在视觉上更突出便于后续跟踪执行。七、总结会议纪要生成通过鸿蒙ArkTS声明式UI框架实现了一个粘贴即生成的高效会议工具。TextArea大文本输入、Builder三层结构卡片、State驱动的条件渲染以及FlexForEach的详略选择器共同构成了一套完整的会议纪要处理方案。从AI产品角度看三种详略级别自适应、待办结构化提取、议题与决议自动分离三大核心能力让会议纪要生成从简单的文本摘要升级为智能会议助手。它不仅节省了人工整理纪要的时间更通过结构化的输出格式提升了会议决策的执行力。未来接入真实的大模型API后还可以实现更智能的语义理解、情感分析和行动项优先级排序让每一场会议的价值都能被充分挖掘和落地。