子玥酱 （掘金 / 知乎 / CSDN / 简书 同名）

大家好，我是 子玥酱，一名长期深耕在一线的前端程序媛 👩‍💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。

我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括 前端工程化、小程序、React / RN、Flutter、跨端方案，
在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。

技术方向：前端 / 跨端 / 小程序 / 移动端工程化
内容平台：掘金、知乎、CSDN、简书
创作特点：实战导向、源码拆解、少空谈多落地
文章状态：长期稳定更新，大量原创输出

我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在“API 怎么用”，而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍，希望能帮你在实际工作中少走弯路。

子玥酱 · 前端成长记录官 ✨
👋 如果你正在做前端，或准备长期走前端这条路
📚 关注我，第一时间获取前端行业趋势与实践总结
🎁 可领取 11 类前端进阶学习资源（工程化 / 框架 / 跨端 / 面试 / 架构）
💡 一起把技术学“明白”，也用“到位”

持续写作，持续进阶。
愿我们都能在代码和生活里，走得更稳一点 🌱

引言

过去二十年的 App，本质上都是：

用户点击
   ↓
页面响应
   ↓
执行功能

例如：

打开订单页
 ↓
点击创建订单
 ↓
提交成功

或者：

打开课程页
 ↓
选择课程
 ↓
购买课程

整个流程有一个共同特点：

用户负责操作，App 负责执行。

但随着大模型的发展，一个新的变化正在出现：

用户描述目标
 ↓
AI理解意图
 ↓
AI完成任务

例如：

帮我预约明天下午的英语课

或者：

帮我整理今天的会议内容并生成待办事项

用户不再关心：

哪个页面
哪个按钮
哪个功能

而是直接表达：

我要什么结果

这意味着：

App 正在从“功能集合”变成“任务执行系统”。

而这，就是 Agent 化的开始。

一、什么是 Agent 化 App

很多人理解 Agent：

聊天机器人

其实并不准确，真正的 Agent 应该具备：

理解目标
拆解任务
调用能力
执行任务
反馈结果

例如，用户说：

帮我购买英语课程

Agent 不应该回复：

请前往课程页面购买

而应该：

分析课程
创建订单
完成支付
返回结果

所以：

Agent 的核心不是回答问题，而是完成任务。

二、传统 App 和 Agent App 的区别

传统 App：

Page
 ↓
Button
 ↓
Function

Agent App：

Intent
 ↓
Agent
 ↓
Task
 ↓
Tool
 ↓
Result

对比：

传统 App	Agent App
页面驱动	意图驱动
用户操作	AI执行
功能中心	任务中心
UI入口	Agent入口
点击流程	自然语言流程

最大的变化：

入口变了。

三、为什么鸿蒙特别适合 Agent 化

因为鸿蒙天然具备：

分布式
多设备
状态驱动
Task能力
AI集成

这些能力刚好和 Agent 的运行模式高度契合，例如：

手机发起任务
 ↓
PC执行任务
 ↓
平板查看结果

这本身就是：Agent Runtime 的典型场景。

四、Agent 化架构设计

推荐架构：

UI
 ↓
Assistant
 ↓
Intent Engine
 ↓
Task Center
 ↓
Tool Center
 ↓
System
 ↓
Repository

职责：

Assistant
负责理解用户

Task Center
负责执行任务

Tool Center
负责调用业务能力

五、第一层：Intent Engine

Agent 第一件事：

理解用户想干什么

例如，用户输入：

帮我预约英语课程

解析结果：

{
  "intent":"book_course",
  "course":"英语课程"
}

实现：

export class IntentEngine {

  async parse(text: string) {

    return await llm.chat(`
      请提取用户意图:
      ${text}
    `)

  }

}

调用：

const intent =
  await intentEngine.parse(input)

这里：

自然语言
 ↓
结构化指令

六、第二层：Task Center

很多开发者会让 AI 直接调用业务代码，例如：

orderStore.create()

这样后期一定失控，推荐：

AI
 ↓
Task
 ↓
业务能力

示例：

export class CreateOrderTask {

  async run(params) {

    return await orderTool.create(
      params
    )

  }

}

统一管理：

class TaskCenter {

  async run(taskName, params) {

    return await task.run(params)

  }

}

这样：

所有任务标准化

七、第三层：Tool Center

Tool 是 Agent 的双手，例如：

查询订单
创建订单
发送消息
创建课程

全部封装成 Tool。

创建订单 Tool：

export class CreateOrderTool {

  async execute(data) {

    return await orderSystem.create(
      data
    )

  }

}

查询订单：

export class QueryOrderTool {

  async execute(id) {

    return await repository.find(id)

  }

}

Agent 永远不要：

this.order = xxx

直接改数据，必须：

Agent
 ↓
Tool
 ↓
System

八、System 为什么必须无状态

很多 Agent 项目后期失控，原因只有一个：

状态到处存

例如：

class OrderSystem {

  currentOrder: any

}

问题：

无法同步
无法恢复
无法追踪

正确方式：

class OrderSystem {

  async create(data) {

    return await repository.create(
      data
    )

  }

}

原则：

System 负责处理，不负责存储。

九、增加 Agent State

Agent 需要知道：

当前任务
执行状态
执行进度

因此：

Agent State

必不可少。

示例：

class AgentState {

  currentTask?: string

  progress: number = 0

  status: string = ""

}

例如：

agentState.currentTask =
  "创建订单"

更新：

agentState.progress = 80

UI 自动刷新。

十、Agent Memory 设计

没有记忆：

每次都是新会话

用户：

帮我查订单

AI：

哪个订单？

用户：

昨天那个

AI：

无法理解

因为上下文丢失。

实现：

class MemoryStore {

  history: string[] = []

  add(text: string) {

    this.history.push(text)

  }

}

调用：

await llm.chat(
  prompt,
  memoryStore.history
)

这样：

对话连续

十一、一个课程助手实战

用户：

帮我报名专升本课程

流程：

Assistant
      ↓
Intent Engine
      ↓
EnrollCourseTask
      ↓
CourseTool
      ↓
CourseSystem
      ↓
Repository

代码：

async run(text: string) {

  const intent =
    await intentEngine.parse(text)

  return await taskCenter.run(
    intent.name,
    intent.params
  )

}

整个过程：

完全任务驱动

十二、ArkUI 页面实现

页面层应该尽可能简单。

@State input: string = ""
@State answer: string = ""

Column() {

  TextInput({
    text: this.input
  })

  Button("发送")
    .onClick(async () => {

      this.answer =
        await assistant.run(
          this.input
        )

    })

  Text(this.answer)

}

页面不知道：

意图解析
任务调度
工具执行

只负责：

输入
输出

十三、Agent 如何结合鸿蒙分布式

传统 App：

状态存在当前设备

Agent App：

Agent存在整个设备网络

例如，手机：

启动任务

PC：

继续处理

平板：

查看结果

同步：

await distributedStore.set(
  "agent_state",
  agentState
)

恢复：

agentState =
  await distributedStore.get(
    "agent_state"
  )

这样：

任务不中断

十四、未来 App 为什么都会 Agent 化

因为用户越来越不想：

找功能
点按钮
切页面

用户真正想表达的是：

我要完成什么

例如，过去：

打开订单页
创建订单
支付

未来：

帮我买这个课程

过去：

打开日历
创建提醒

未来：

提醒我明天下午开会

本质变化：

从操作功能
变成表达意图

十五、Agent 化鸿蒙 App 推荐目录

src
├── assistant
│   ├── runtime
│   ├── memory
│   ├── intent
│   └── state
│
├── task
│   ├── order
│   ├── payment
│   ├── course
│   └── message
│
├── tool
│   ├── order
│   ├── payment
│   └── user
│
├── store
│
├── system
│
├── repository
│
└── ui

这是比较适合：AI Native 鸿蒙 App 的结构。

十六、本质总结

如果用一句话总结：

Agent 化不是给鸿蒙 App 增加一个聊天框，而是增加一个新的运行时。

过去：

App
=
UI
+
业务逻辑

未来：

App
=
UI
+
State
+
Task
+
Tool
+
Agent Runtime

过去：

页面驱动业务

未来：

Agent 驱动业务

过去：

用户操作功能

未来：

用户描述目标

很多团队接入 AI 后，最先做的是：

增加一个聊天页面

但真正的 Agent 化转型，从来不是：

让 App 会聊天。

而是：

让 App 学会执行任务。

记住一句话：

聊天框只是入口，

Task 才是核心，

State 才是基础，

Agent Runtime 才是未来。

当你的鸿蒙 App 开始拥有：

• Intent Engine
• Agent State
• Memory Engine
• Task Center
• Tool Center
• Distributed Runtime

你会发现：

应用不再是功能集合，

而开始变成一个真正能够完成目标的 Agent 系统。