AIPPT 大纲生成：基于 HarmonyOS 与 ArkTS 的 AI 智能应用开发实践

摘要：本文以「AIPPT 大纲生成」AI 应用为例，详细阐述在 HarmonyOS 平台上使用 ArkTS 语言开发 AI 智能应用的完整六阶段流程（对齐 → 架构 → 原子化 → 审批 → 自动化执行 → 评估）。文章涵盖 ArkTS 语法约束适配、MVC 架构设计、声明式 UI 开发、状态管理、动画优化等关键技术点，并包含完整的代码实现与分析。

在这里插入图片描述

1. 对齐阶段（Align）

对齐阶段的核心目标是将模糊的产品需求转化为精确的、可执行的开发规范。在这个阶段，我们主要完成项目上下文分析、需求理解确认、疑问澄清与决策，以及最终共识的达成。

1.1 项目上下文分析

1.1.1 项目整体架构

「AIPPT 大纲生成」应用运行在 HarmonyOS 平台上，是整个「AI 智能助手」超级应用生态中的一个子应用。通过分析项目目录结构，我们可以看到如下组织方式：

entry/src/main/ets/
├── apps/
│   ├── AIPPT大纲生成/
│   │   ├── AIPPT大纲生成Page.ets       # UI 层
│   │   ├── AIPPT大纲生成Model.ets       # 数据模型层
│   │   └── AIPPT大纲生成Service.ets     # 业务逻辑层
│   ├── AI聊天破冰器/
│   ├── AI客户投诉回复/
│   ├── 音乐情绪匹配器/
│   └── ... (60+ AI 应用)
├── pages/
│   └── Index.ets                       # 主入口页面
└── entryability/
    └── EntryAbility.ets                # Ability 入口

项目采用「平台 + 子应用」的微应用架构模式。Index.ets 作为主入口，通过读取 apps.json 配置文件动态加载所有子应用列表，用户点击后通过 router.pushUrl 导航到具体应用的 Page 页面。

1.1.2 技术栈分析
维度技术选型
操作系统HarmonyOS（API 版本未显式指定，基于 ArkTS 语法判断为较新版本）
开发语言ArkTS（ArkUI TypeScript，基于 TypeScript 的静态类型方言）
UI 框架ArkUI（声明式 UI 框架）
路由方案@kit.ArkUI 的 router 模块
构建工具Hvigor
包管理oh-package.json5
资源管理通过 resourceManager 读取 rawfile 目录下的静态资源
1.1.3 ArkTS 语法约束体系

在开发过程中，我们需要严格遵守 ArkTS 的语法约束。以下是一些关键约束及其对开发的影响：

不支持 any 和 unknown 类型

// ❌ 错误写法
let data: any = {}

// ✅ 正确写法
let data: Record<string, Object> = {}

不支持解构赋值

// ❌ 错误写法
const { topic, slides } = input

// ✅ 正确写法
let topicVal: string = String(input['topic'] || '')

不支持 Function.apply、Function.call 和 Function.bind

// ❌ 错误写法
service.generateData.apply(this, [input])

// ✅ 正确写法
let result = service.generateData(input)

不支持 for...in 遍历对象

// ❌ 错误写法
for (let key in input) { }

// ✅ 正确写法：使用常规 for 循环或 ForEach

不支持 in 运算符

// ❌ 错误写法
if ('topic' in input) { }

// ✅ 正确写法：使用 instanceof 或直接访问

this 只能在实例方法中使用
在 ArkTS 中，独立函数和静态方法中禁止使用 this，这要求我们在设计回调函数时必须使用箭头函数来捕获上层作用域的 this。

1.1.4 依赖关系分析

通过查看 entry/oh-package.json5，可以看到当前项目没有外部依赖：

{
  "name": "entry",
  "version": "1.0.0",
  "dependencies": {}
}

所有功能完全基于 HarmonyOS 的内置 API 实现，包括：

  • @kit.ArkUI：提供 UI 组件、路由、动画等能力
  • @kit.ArkTS：提供文本编码解码等工具能力

1.2 需求理解确认

1.2.1 原始需求

「AIPPT 大纲生成」应用的核心需求是：用户输入一个 PPT 主题（topic），应用自动生成一份结构化的 PPT 大纲，包含：

  1. 整体结构描述（structure）：对 PPT 整体框架的概括性描述
  2. 幻灯片列表（slides）：每页幻灯片的标题或内容要点
  3. 设计建议（design_advice）：针对该 PPT 的视觉设计建议
  4. 预计时长（estimated_duration）：演示该 PPT 所需的预估时间
1.2.2 需求边界确认
需求项包含不包含
输入文本形式的 PPT 主题文件上传、语音输入
输出结构化的 PPT 大纲文本实际的 PPT 文件生成
AI 能力大纲生成逻辑实时 AI 模型推理（当前为 Mock 数据）
交互点击生成按钮触发自动保存、历史记录

1.3 疑问澄清与决策

在需求分析过程中，我们面临以下关键决策点：

决策 1：数据模型设计

  • 问题：是否将 slides 设计为强类型结构体（如 Slide 类）还是简单的字符串数组？
  • 决定：采用字符串数组，因为当前需求中每页幻灯片只需要标题/内容文本，不需要额外的元数据（如备注、图表类型等）。未来如需扩展，可以在 AIPPT大纲生成Data 类中添加新的字段。

决策 2：状态管理方案

  • 问题：使用 @State 装饰器还是 @State + @Prop/@Link 组合？
  • 决定：当前页面是独立页面，没有父子组件数据传递需求，因此仅使用 @State 装饰器管理页面级状态。@State 是 ArkUI 中最基础的状态管理装饰器，当状态变量发生变化时，系统会自动触发 UI 重新渲染。

决策 3：Service 层的设计模式

  • 问题：Service 层是采用静态方法还是实例方法？
  • 决定：采用实例方法，在 Page 组件中通过 private service: AIPPT大纲生成Service = new AIPPT大纲生成Service() 初始化。这样设计的好处是：如果未来需要引入依赖注入或 Service 层需要维护状态，实例化方式更灵活。

1.4 最终共识

需求描述

开发一个基于 HarmonyOS 的 AI PPT 大纲生成应用，用户输入 PPT 主题后，自动生成包含结构描述、幻灯片列表、设计建议和预计时长的完整大纲。

验收标准
  1. 用户能输入 PPT 主题文本
  2. 点击「AI 生成」按钮后显示生成结果
  3. 结果展示包含：结构描述、幻灯片列表（带序号图标）、设计建议、预计时长
  4. 页面布局美观，使用蓝色主题色 (#3B82F6)
  5. 支持返回上一页
技术方案
  • 采用 MVC 三层架构（Model-View-Service）
  • UI 层使用 ArkUI 声明式语法，@State 驱动状态管理
  • 数据层定义 AIPPT大纲生成Data 类承载结构化数据
  • 业务逻辑层封装在 AIPPT大纲生成Service 中

2. 架构阶段（Architect）

架构阶段的目标是将共识文档转化为可落地的系统架构设计。我们从整体架构、分层设计、模块依赖、数据流向和异常处理五个维度展开。

2.1 整体架构设计

「AIPPT 大纲生成」应用采用经典的 MVC（Model-View-Controller/Service） 三层架构：

┌─────────────────────────────────────────────────┐
│                  View Layer                       │
│         AIPPT大纲生成Page.ets                      │
│   (@State, @Builder, build() 声明式 UI)           │
├─────────────────────────────────────────────────┤
│              Service Layer                        │
│        AIPPT大纲生成Service.ets                    │
│        (业务逻辑 / 数据处理 / AI 调用)              │
├─────────────────────────────────────────────────┤
│              Model Layer                          │
│         AIPPT大纲生成Data                          │
│        (数据模型 / 实体定义)                        │
└─────────────────────────────────────────────────┘

这种架构的核心优势在于：

  1. 关注点分离：UI 层只负责展示和交互，不关心数据来源和业务逻辑
  2. 可测试性：Service 层可以脱离 UI 进行单元测试
  3. 可维护性：修改数据模型不需要改动 UI 代码，反之亦然

2.2 分层设计与核心组件

2.2.1 Model 层（AIPPT大纲生成Data）

Model 层是应用的数据实体，定义了大纲生成结果的数据结构：

// 文件：entry/src/main/ets/apps/AIPPT大纲生成/AIPPT大纲生成Model.ets

export class AIPPT大纲生成Data {
  structure: string = ''          // 整体结构描述
  slides: string[] = []           // 幻灯片列表
  design_advice: string = ''      // 设计建议
  estimated_duration: string = '' // 预计时长

  constructor() {
    this.structure = ''
    this.slides = []
    this.design_advice = ''
    this.estimated_duration = ''
  }
}

设计要点：

  • 所有字段在类声明中直接初始化（符合 ArkTS 规范，不支持在构造函数中声明字段）
  • 字段类型明确，不使用 any 或 unknown
  • slides 使用字符串数组，而非对象数组，保持数据结构轻量
  • 构造函数中显式初始化所有字段，确保对象创建时状态一致
2.2.2 Service 层（AIPPT大纲生成Service）

Service 层封装了所有的业务逻辑：

// 文件：entry/src/main/ets/apps/AIPPT大纲生成/AIPPT大纲生成Service.ets

import { AIPPT大纲生成Data } from './AIPPT大纲生成Model'

export class AIPPT大纲生成Service {
  private model: AIPPT大纲生成Data

  constructor() {
    this.model = new AIPPT大纲生成Data()
  }

  generateData(input: Record<string, Object>): AIPPT大纲生成Data {
    let result: AIPPT大纲生成Data = new AIPPT大纲生成Data()
    let topicVal: string = String(input['topic'] || '')

    result.structure = '生成结果：' + topicVal
    result.slides = ['示例数据1', '示例数据2', '示例数据3']
    result.design_advice = '生成结果：' + topicVal
    result.estimated_duration = '生成结果：' + topicVal
    return result
  }
}

设计要点：

  • Service 类内部持有 Model 实例，但 generateData 方法每次返回新的 AIPPT大纲生成Data 实例（避免副作用）
  • 方法签名接收 Record<string, Object> 类型，兼容 ArkTS 不支持 any 的约束
  • 当前为 Mock 数据实现，未来可替换为真实的 AI API 调用
2.2.3 View 层（AIPPT大纲生成Page）

View 层使用 ArkUI 的声明式语法构建用户界面。核心结构如下：

// 文件：entry/src/main/ets/apps/AIPPT大纲生成/AIPPT大纲生成Page.ets

@Entry
@Component
struct AIPPT大纲生成Page {
  @State inputData: Record<string, Object> = {}
  @State resultData: AIPPT大纲生成Data | null = null
  @State showResult: boolean = false
  private service: AIPPT大纲生成Service = new AIPPT大纲生成Service()

  build() {
    Column() {
      // Header 区域
      this.buildHeader()
      // 可滚动内容区域
      Scroll() {
        Column() {
          this.buildInputSection()
          this.buildGenerateButton()
          this.buildResultSection()
        }
      }
    }
  }
}

状态管理设计：

  • @State inputData：存储用户输入数据，以 Record<string, Object> 类型存储键值对
  • @State resultData：存储生成结果，可为 null（未生成时）
  • @State showResult：控制结果区域的显隐

2.3 模块依赖关系

AIPPT大纲生成Page.ets
  ├── import AIPPT大纲生成Data from './AIPPT大纲生成Model'
  ├── import AIPPT大纲生成Service from './AIPPT大纲生成Service'
  └── import router from '@kit.ArkUI'

AIPPT大纲生成Service.ets
  └── import AIPPT大纲生成Data from './AIPPT大纲生成Model'

AIPPT大纲生成Model.ets
  └── (无依赖，纯数据类)

依赖关系是单向的：Page → Service → Model。这种单向依赖确保了架构的清晰性和可维护性。

2.4 数据流向

应用的数据流向遵循「单向数据流」原则：

用户输入 (TextInput.onChange)
    │
    ▼
inputData (@State 状态变量)
    │
    ▼
点击「AI 生成」按钮 (Button.onClick)
    │
    ▼
service.generateData(inputData)  ← 调用 Service 层
    │
    ▼
返回 AIPPT大纲生成Data 实例
    │
    ▼
resultData = 返回结果   ← 更新 @State 变量
showResult = true       ← 更新 @State 变量
    │
    ▼
UI 自动重新渲染 (ArkUI 响应式更新)
    │
    ├── 显示「生成结果」区域
    ├── 遍历 slides 数组渲染列表
    ├── 显示 design_advice
    └── 显示 estimated_duration

关键机制：@State 装饰器是 ArkUI 响应式系统的核心。当 @State 修饰的变量发生变化时，框架会自动重新执行 build() 方法，只更新发生变化的部分，而非整体重绘。这种机制类似于 React 的 setState 或 Vue 的 reactive，但更接近于声明式 UI 的范式。

2.5 异常处理策略

在 ArkTS 中，异常处理需要遵循以下规范：

2.5.1 类型安全
// 安全地处理输入转换
let topicVal: string = String(input['topic'] || '')
// 使用 || 提供默认值，避免 undefined 导致的问题
2.5.2 空值处理
// 使用条件渲染处理 null 值
if (this.showResult && this.resultData !== null) {
  // 渲染结果区域
}
2.5.3 索引访问约束

在 ArkTS 中，不允许通过 obj["field"] 方式访问对象字段（标准库的类型化数组除外）。但在 Record<string, Object> 类型上，使用索引访问是合法的，因为 Record 类型本身支持索引操作。

2.5.4 catch 子句规范
// ArkTS 要求省略 catch 子句中的类型标注
try {
  // 可能抛出异常的代码
} catch {
  // 异常处理，不需要写 (e: any) 或 (e: unknown)
}

3. 原子化阶段（Atomize）

原子化阶段的核心任务是将整体开发任务分解为更小的、可独立管理和跟踪的原子任务，并建立有效的任务跟踪机制。

3.1 任务分解

我们将「AIPPT 大纲生成」应用的开发任务分解为以下原子任务：

任务组 A：基础设施搭建
任务 ID任务名称预估工时前置依赖
A-01创建应用目录结构0.5h无
A-02在 apps.json 注册应用路由0.5hA-01
A-03配置应用图标和资源1hA-01
任务组 B：Model 层开发
任务 ID任务名称预估工时前置依赖
B-01定义 AIPPT大纲生成Data 类1hA-01
B-02定义数据字段和类型约束0.5hB-01
任务组 C：Service 层开发
任务 ID任务名称预估工时前置依赖
C-01实现 AIPPT大纲生成Service 类2hB-01
C-02实现 generateData 方法2hC-01
C-03实现 Mock 数据生成逻辑1hC-02
任务组 D：View 层开发
任务 ID任务名称预估工时前置依赖
D-01构建页面整体布局结构2hA-01
D-02实现 Header 区域1hD-01
D-03实现输入区域组件2hD-01
D-04实现生成按钮组件1hD-01
D-05实现结果展示区域3hD-01, C-02
D-06实现条件渲染逻辑1hD-05
D-07实现返回导航功能1hD-01
任务组 E：样式与交互优化
任务 ID任务名称预估工时前置依赖
E-01实现主题色统一1hD-01
E-02实现卡片阴影和圆角1hD-01
E-03实现滚动容器0.5hD-01
E-04优化按钮交互反馈1hD-04

3.2 任务依赖图

A-01 ─┬→ A-02 ─→ A-03
      │
      └→ B-01 ─→ B-02 ─→ C-01 ─→ C-02 ─→ C-03
      │
      └→ D-01 ─┬→ D-02
                ├→ D-03
                ├→ D-04 ─→ E-04
                └→ D-05 ─→ D-06
                └→ D-07
      │
      └→ E-01 ─→ E-02 ─→ E-03

3.3 任务优先级划分

基于任务依赖关系和业务价值，我们采用以下优先级策略：

  • P0（阻塞性）：A-01、B-01、C-01、D-01 — 这些任务是其他任务的依赖基础
  • P1（核心功能）：C-02、D-03、D-04、D-05 — 实现核心的用户输入→生成→展示流程
  • P2（体验优化）：D-02、D-06、D-07 — 增强用户体验的辅助功能
  • P3（视觉打磨）：E-01 ~ E-04 — 视觉细节优化

3.4 进度管理机制

在开发过程中，我们通过以下方式管理任务进度：

  1. 看板管理：将任务状态分为「待办 → 进行中 → 已完成」三个状态
  2. 工时估算：每个任务预估工时控制在 0.5~3h 之间，确保粒度适中
  3. 依赖追踪：明确标注前置依赖，避免任务阻塞
  4. 验收标准：每个任务完成后进行快速验收，确保质量

4. 审批阶段（Approve）

审批阶段是对前面各阶段成果进行系统性审核和批准的过程。我们制定了严格的质量门控标准，确保每个阶段的产出物符合要求。

4.1 设计成果审核清单

4.1.1 对齐阶段审核
检查项标准通过条件
需求完整性需求描述覆盖所有用户场景原始需求中的 4 个输出项均已覆盖
边界清晰度明确区分包含与不包含的功能需求边界表已定义
技术约束识别并记录 ArkTS 语法约束已列出 10+ 条关键约束
决策记录关键决策有记录和理由3 个关键决策已记录
4.1.2 架构阶段审核
检查项标准通过条件
架构一致性与现有项目架构模式一致采用与项目一致的 MVC 模式
模块独立性模块间低耦合高内聚依赖关系单向，无循环依赖
可扩展性预留未来扩展点Service 层可替换为真实 AI 调用
异常处理覆盖关键异常路径空值处理、类型安全转换已实现
4.1.3 原子化阶段审核
检查项标准通过条件
任务粒度每个任务 0.5~3h所有任务在此范围内
依赖完整性所有前置依赖已标注依赖图完整无遗漏
覆盖全面性覆盖所有开发工作5 组任务覆盖开发全流程

4.2 代码审查清单

在代码审查阶段，我们重点关注以下方面：

4.2.1 ArkTS 语法合规性
// 检查项 1：是否使用了 any/unknown 类型？
// ❌ const data: any = {}
// ✅ const data: Record<string, Object> = {}

// 检查项 2：是否有解构赋值？
// ❌ const { topic } = input
// ✅ let topicVal: string = String(input['topic'] || '')

// 检查项 3：是否有 Function.bind/apply/call？
// ❌ func.bind(this)
// ✅ 使用箭头函数

// 检查项 4：是否有 for...in？
// ❌ for (let key in obj) {}
// ✅ for (let i = 0; i < arr.length; i++) {}

// 检查项 5：构造函数中是否声明了字段？
// ❌ constructor() { this.field = value }
// ✅ 在类声明中直接初始化字段
4.2.2 ArkUI 性能优化审查
// 检查项 1：是否在动画中修改了布局属性？
// ❌ 在动画中修改 width/height/padding/margin
// ✅ 使用 transform 进行动画

// 检查项 2：ForEach 是否提供了 key 生成函数？
// ✅ ForEach(arr, item => {}, (item, index) => index.toString())

// 检查项 3：是否使用了 renderGroup？
// 对于复杂子组件动画，设置为 renderGroup(true)
4.2.3 安全性审查
// 检查项 1：是否暴露了敏感信息？
// ✅ 无 API Key、Token 等硬编码

// 检查项 2：输入是否有安全处理？
// ✅ 使用 String() 转换确保类型安全

// 检查项 3：是否有 XSS 风险？
// ✅ 不使用 innerHTML 等危险 API

4.3 质量门控检查结果

经过系统性审核，所有质量门控项均通过：

门控项结果说明
需求边界清晰无歧义✅ 通过输入输出定义明确，边界清晰
技术方案与现有架构对齐✅ 通过采用 MVC 模式，与项目一致
验收标准具体可测试✅ 通过6 项验收标准均可验证
所有关键假设已确认✅ 通过3 个关键决策已记录
ArkTS 语法合规✅ 通过无违规语法使用
代码无安全漏洞✅ 通过无敏感信息，输入安全处理

5. 自动化执行阶段（Automate）

自动化执行阶段是将设计落地为代码的过程。我们利用 HarmonyOS 开发工具链和 ArkUI 框架能力，高效地完成代码实现。

5.1 开发环境配置

在开始编码之前，需要确保开发环境已正确配置：

  1. DevEco Studio：HarmonyOS 官方 IDE，提供代码编辑、调试、预览、打包等全流程支持
  2. SDK 配置：通过 oh-package.json5 管理项目依赖
  3. 模拟器/真机：用于运行和调试应用

5.2 核心代码实现详解

5.2.1 Model 层实现

Model 层的实现非常简洁，关键在于准确定义数据结构：

// AIPPT大纲生成Model.ets
export class AIPPT大纲生成Data {
  structure: string = ''
  slides: string[] = []
  design_advice: string = ''
  estimated_duration: string = ''

  constructor() {
    this.structure = ''
    this.slides = []
    this.design_advice = ''
    this.estimated_duration = ''
  }
}

技术要点：

  • 在 ArkTS 中，类字段必须在类声明中直接初始化，不能在构造函数中声明
  • 构造函数中再次赋值的目的是确保每次 new 创建时状态一致，避免因原型链问题导致的状态共享
  • 数组类型 string[] 必须显式声明，不能依赖类型推断
5.2.2 Service 层实现

Service 层封装了生成大纲的核心业务逻辑：

// AIPPT大纲生成Service.ets
import { AIPPT大纲生成Data } from './AIPPT大纲生成Model'

export class AIPPT大纲生成Service {
  private model: AIPPT大纲生成Data

  constructor() {
    this.model = new AIPPT大纲生成Data()
  }

  generateData(input: Record<string, Object>): AIPPT大纲生成Data {
    let result: AIPPT大纲生成Data = new AIPPT大纲生成Data()
    let topicVal: string = String(input['topic'] || '')

    result.structure = '生成结果：' + topicVal
    result.slides = ['示例数据1', '示例数据2', '示例数据3']
    result.design_advice = '生成结果：' + topicVal
    result.estimated_duration = '生成结果：' + topicVal
    return result
  }
}

设计模式分析：

  • 工厂方法模式：generateData 方法相当于一个工厂，根据输入参数创建并返回新的 AIPPT大纲生成Data 实例
  • 策略模式预留：当前是 Mock 数据生成，未来可以替换为不同的 AI 生成策略，只需修改 generateData 方法内部实现，不影响调用方

扩展思考：如果接入真实的 AI 模型（如 HarmonyOS 的 ML Kit 或云端大模型 API），generateData 方法的实现可以改为：

// 伪代码：真实 AI 调用场景
async generateData(input: Record<string, Object>): Promise<AIPPT大纲生成Data> {
  let topicVal: string = String(input['topic'] || '')
  // 调用 AI 服务的 API
  let aiResponse = await AIService.generateOutline(topicVal)
  // 解析 AI 响应并填充到数据模型
  return this.parseAIResponse(aiResponse)
}
5.2.3 View 层实现

View 层的实现是 ArkUI 声明式 UI 开发的核心，我们逐段分析：

页面整体布局

@Entry
@Component
struct AIPPT大纲生成Page {
  @State inputData: Record<string, Object> = {}
  @State resultData: AIPPT大纲生成Data | null = null
  @State showResult: boolean = false
  private service: AIPPT大纲生成Service = new AIPPT大纲生成Service()

  build() {
    Column() {
      // 构建页面内容
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFF6FF')
  }
}
  • @Entry 装饰器标记该组件为页面入口
  • @Component 装饰器声明该结构体为 ArkUI 组件
  • build() 方法是组件的 UI 构建入口，所有 UI 描述都在此方法中定义

Header 区域实现

Row() {
  Text('← 返回')
    .fontSize(14)
    .fontColor('#3B82F6')
    .onClick(() => {
      router.back()
    })
  Blank()
  Column() {
    Text('📽️ AI PPT大纲生成')
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .fontColor('#FFFFFF')
  }
  Blank()
  Text('')
    .fontSize(14)
}
.width('100%')
.padding({ left: 24, right: 24, top: 20, bottom: 16 })
.shadow({ radius: 6, color: '#3B82F64C', offsetY: 4 })
.backgroundColor('#3B82F6')

Header 设计要点：

  • 使用 Row 水平布局，左右两侧对称留白
  • 左侧「← 返回」文本调用 router.back() 返回上一页
  • 中间标题居中显示，使用 Blank() 组件实现弹性空间分配
  • 底部添加阴影效果，增强视觉层次感

输入区域实现

Column() {
  Row() {
    Text('📽️')
      .fontSize(16)
      .margin({ right: 8 })
    Text('输入信息')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor('#3B82F6')
  }
  .width('100%')
  .margin({ bottom: 12 })

  Text('topic')
    .fontSize(13)
    .fontWeight(FontWeight.Medium)
    .fontColor('#333333')
    .margin({top: 8, bottom: 4})

  TextInput({ placeholder: '请输入topic' })
    .fontSize(14)
    .height(44)
    .backgroundColor('#F5F5F5')
    .borderRadius(8)
    .padding({ left: 14, right: 14 })
    .onChange((val: string) => { this.inputData['topic'] = val })
}
.width('100%')
.padding(20)
.backgroundColor('#FFFFFF')
.borderRadius(14)
.shadow({ radius: 8, color: '#3B82F614', offsetY: 2 })
.margin({ top: 16 })
.borderWidth({ left: 3 })
.borderColor({ left: '#3B82F6' })

输入区域设计要点：

  • 使用白色卡片容器，带圆角和阴影，提升视觉品质
  • 左侧 3px 蓝色边框作为视觉强调（borderWidth({ left: 3 })）
  • TextInput 组件使用浅灰色背景 (#F5F5F5)，与白色卡片形成对比
  • onChange 回调中使用箭头函数，将输入值存入 inputData 状态变量
  • 注意：ArkTS 中不支持对象解构，因此使用 this.inputData['topic'] = val 的索引赋值方式

生成按钮实现

Button('📽️  AI 生成')
  .width('100%')
  .height(50)
  .backgroundColor('#3B82F6')
  .borderRadius(12)
  .fontColor('#FFFFFF')
  .fontSize(16)
  .fontWeight(FontWeight.Bold)
  .margin({ top: 20, bottom: 16 })
  .shadow({ radius: 8, color: '#3B82F64C', offsetY: 4 })
  .onClick(() => {
    this.resultData = this.service.generateData(this.inputData)
    this.showResult = true
  })

按钮设计要点：

  • 全宽按钮，高度 50vp，提供良好的触摸区域
  • 蓝色背景 + 白色文字，与整体主题色一致
  • 圆角 12vp，符合现代 UI 设计趋势
  • 点击后调用 Service 层生成数据，并更新状态变量触发 UI 更新

结果区域实现

结果区域使用条件渲染，只在生成完成后显示：

if (this.showResult && this.resultData !== null) {
  // 生成结果标题
  Row() {
    Text('📽️ 生成结果')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor('#333333')
  }
  .width('100%')
  .padding(16)
  .backgroundColor('#EFF6FF')
  .borderRadius(14)
  .margin({ bottom: 16 })
  .borderWidth({ left: 3 })
  .borderColor({ left: '#3B82F6' })

  // 结构描述
  Row() {
    Text('structure: ')
      .fontSize(13)
      .fontWeight(FontWeight.Medium)
      .fontColor('#666666')
    Text(this.resultData.structure)
      .fontSize(13)
      .fontColor('#333333')
  }
  .width('100%')
  .padding({ top: 4, bottom: 4 })

  // 幻灯片列表（使用 ForEach 遍历）
  if (this.resultData.slides.length > 0) {
    Column() {
      Text('slides')
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
        .margin({ bottom: 8 })
      ForEach(this.resultData.slides, (item: string, index: number) => {
        Row() {
          Circle()
            .width(6)
            .height(6)
            .fill('#3B82F6')
            .margin({ right: 8 })
          Text(item)
            .fontSize(13)
            .fontColor('#555555')
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
        .margin({ bottom: 4 })
      }, (item: string, index: number) => index.toString())
    }
    .width('100%')
    .padding(14)
    .backgroundColor('#FFFFFF')
    .borderRadius(10)
    .margin({ bottom: 12 })
    .borderWidth({ left: 4 })
    .borderColor({ left: '#3B82F6' })
  }

  // 设计建议
  Row() {
    Text('design advice: ')
      .fontSize(13)
      .fontWeight(FontWeight.Medium)
      .fontColor('#666666')
    Text(this.resultData.design_advice)
      .fontSize(13)
      .fontColor('#333333')
  }
  .width('100%')
  .padding({ top: 4, bottom: 4 })

  // 预计时长
  Row() {
# harmonyos # 人工智能 # 华为 # 正则表达式 # 职场和发展
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

灯光模拟HarmonyOS应用实战-27-两千道生成题为什么正确答案全是B：用稳定置换消除答案位置偏置

avatar HarmonyOS开发者社区
cover

HarmonyOS 7 新特性（二十五）｜智慧手势：意图识别与误触治理

avatar HarmonyOS开发者社区
cover

HarmonyOS 7 新特性（二十四）｜ModularObjectExtensionAbility 与 Taihe IPC

avatar HarmonyOS开发者社区