会议纪要生成：鸿蒙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 数据模型

export class TodoEntry {
  task: string    // 待办任务描述
  owner: string   // 负责人
  due: string     // 截止日期
}

export class MeetingData {
  topics: string[]      // 议题列表
  decisions: string[]   // 决议列表
  todos: TodoEntry[]    // 待办事项（含负责人+截止日期）
}

2.3 交互流程

用户打开应用
    ↓
aboutToAppear → 显示欢迎语
    ↓
TextArea 粘贴录音转写文本
    ↓
Flex网格选择详略程度 (精简/标准/详细)
    ↓
两者都填写 → "生成会议纪要"按钮出现
    ↓
点击 → onGenerate() → setTimeout →
    ↓
service.getMeeting() → @State currentData更新
    ↓
三层结构结果卡片渲染

三、鸿蒙技术深度解析

3.1 TextArea 大文本输入

会议纪要生成需要处理大量文本输入（录音转写内容通常有数百到数千字），因此使用 TextArea 而非 TextInput：

@State transcriptText: string = ''

TextArea({ 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.transcriptText = val })

TextArea 相较于 TextInput 的关键区别：

• 多行支持：自动换行，适合大段文本
• 高度可调：通过 .height(100) 设定初始高度，用户可输入超过该高度的内容
• placeholder：提示"粘贴录音转写文本…"，降低用户使用门槛

3.2 @Builder 三层结构 —— 议题/决议/待办的分层展示

会议纪要生成的结果展示采用了三层结构，这是本应用中最复杂的 @Builder 实现之一：

@Builder
buildResultCard(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(`${idx + 1}`)
            .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会根据选择调整输出内容的信息密度：

export const MMM_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 驱动的条件渲染，以及 Flex + ForEach 的详略选择器，共同构成了一套完整的会议纪要处理方案。

从AI产品角度看，三种详略级别自适应、待办结构化提取、议题与决议自动分离三大核心能力，让会议纪要生成从简单的"文本摘要"升级为"智能会议助手"。它不仅节省了人工整理纪要的时间，更通过结构化的输出格式，提升了会议决策的执行力。未来接入真实的大模型API后，还可以实现更智能的语义理解、情感分析和行动项优先级排序，让每一场会议的价值都能被充分挖掘和落地。