子玥酱掘金 / 知乎 / CSDN / 简书 同名大家好我是子玥酱一名长期深耕在一线的前端程序媛 ‍。曾就职于多家知名互联网大厂目前在某国企负责前端软件研发相关工作主要聚焦于业务型系统的工程化建设与长期维护。我持续输出和沉淀前端领域的实战经验日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。技术方向前端 / 跨端 / 小程序 / 移动端工程化内容平台掘金、知乎、CSDN、简书创作特点实战导向、源码拆解、少空谈多落地文章状态长期稳定更新大量原创输出我的内容主要围绕前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读展开。文章不会停留在“API 怎么用”而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍希望能帮你在实际工作中少走弯路。子玥酱 · 前端成长记录官 ✨ 如果你正在做前端或准备长期走前端这条路 关注我第一时间获取前端行业趋势与实践总结 可领取11 类前端进阶学习资源工程化 / 框架 / 跨端 / 面试 / 架构 一起把技术学“明白”也用“到位”持续写作持续进阶。愿我们都能在代码和生活里走得更稳一点 文章目录引言一、最开始我只是加了一个“AI 页面”二、AI 开始“绕过页面”三、Service 层突然变成核心1 有些 Service 写在页面里2 有些逻辑和 UI 强绑定四、我开始把能力“服务化”五、我又加了一层Tool六、我不得不引入“Agent”七、UI 的地位明显下降了八、数据流也变了九、最大的变化其实是“思维方式”十、本质总结结语引言一开始我只是想做一件很简单的事在鸿蒙 App 里接入一个 AI 功能。比如做一个智能搜索加一个 AI 助手支持自然语言操作听起来很普通对吧但当我真的把一个AI 鸿蒙 App 从 0 做到能用之后我发现一件很不对劲的事不是我在给 App 加 AI而是 AI 在重写整个 App 的逻辑。而且这种变化不是 UI 层面的而是架构级别的变化一、最开始我只是加了一个“AI 页面”最初的实现很典型首页 ↓ 新增一个 AI 页面 ↓ 调用大模型接口 ↓ 展示结果代码大概是这样EntryComponentstruct AIPage{Stateinput:stringStatereply:stringasyncsend(){this.replyawaitaiService.chat(this.input)}}当时我以为“这不就完成了吗”但很快问题就来了。二、AI 开始“绕过页面”用户开始提一些请求帮我查一下订单 帮我推荐几个商品 帮我看看今天有什么安排这些需求本来应该对应订单页 商品页 日程页但现在用户根本没有进入这些页面AI 直接返回了结果。这时候我第一次意识到页面不再是唯一入口了。三、Service 层突然变成核心以前我的代码结构是Page → Service → API但现在变成AI → Service Page → Service也就是说Service 被两个入口调用UIAI问题马上暴露出来1 有些 Service 写在页面里// Page 内部逻辑asyncloadOrders(){returnawaitapi.get(/orders)}AI 根本调不了。2 有些逻辑和 UI 强绑定this.loadingtruethis.ordersawaitapi.get()this.loadingfalseAI 也用不了于是我不得不重构把所有业务逻辑从页面里“抽出来”。四、我开始把能力“服务化”我做的第一步是拆 Service例如exportclassOrderService{asyncgetOrders(userId:string){returnawaitapi.get(/orders)}}然后 UI 和 AI 都调用awaitorderService.getOrders(userId)这一刻变化很明显App 不再是页面集合而是能力集合。五、我又加了一层Tool很快我发现一个新问题AI 并不知道该调用哪个 Service。于是我加了一层Tool例如exportclassOrderTool{asyncexecute(params){returnawaitorderService.getOrders(params.userId)}}AI 只需要调用 Tool而不用关心底层实现这时候架构变成AI → Tool → Service六、我不得不引入“Agent”再往后问题又来了。用户输入开始变复杂帮我查订单并推荐相关商品这已经不是一个 Service 能完成的任务我需要多个步骤 多个能力 组合执行于是我引入了Agent示例exportclassAgent{asyncrun(input:string){constintentawaitthis.parse(input)if(intentorder_and_recommend){constordersawaitorderTool.execute()constgoodsawaitrecommendTool.execute()return{orders,goods}}}}这时候我才彻底意识到AI 不只是调用接口而是在“编排系统能力”。七、UI 的地位明显下降了以前UI 核心现在AI 核心 UI 展示很多操作变成用户一句话 ↓ AI 完成 ↓ UI 展示结果甚至很多时候UI 根本不参与流程八、数据流也变了传统数据流UI → Service → Data → UI现在变成用户输入 ↓ AI ↓ Service ↓ Data ↓ UI展示变化很关键数据流不再由 UI 触发而是由 AI 触发。九、最大的变化其实是“思维方式”做完这个项目后我最大的感受不是代码变了而是思维方式彻底变了。以前我在想这个页面怎么设计 这个按钮放哪 这个流程怎么走现在我在想用户会说什么 系统怎么理解 能力怎么组合 任务怎么完成十、本质总结如果用一句话总结这次变化我不再是在做“页面应用”而是在做“能力系统”。对比一下维度传统 AppAI App入口页面意图核心UIAgent逻辑固定流程动态任务结构页面集合能力系统结语一开始我只是想给鸿蒙 App 加一个 AI 功能但最后我得到的是一个完全不同的应用架构。如果你现在也在做 AI 鸿蒙 App我给你一个建议不要把 AI 当成功能而要当成系统入口来设计。否则你很快就会遇到架构混乱代码失控AI 能力无法扩展