最近在开发一个企业级SaaS后台时遇到了一个高频痛点用户需要在一个复杂的CRM表单中完成数十个字段的填写和跳转操作路径极其繁琐。传统的自动化方案如Selenium或Puppeteer虽然功能强大但需要搭建独立的服务端环境集成成本高且难以与前端产品深度耦合。就在我们为此头疼时阿里开源了Page Agent一个可以直接嵌入网页的JavaScript GUI智能体用自然语言就能控制Web界面这为前端智能化交互打开了一扇新的大门。与此同时AI领域另一件大事也牵动着开发者的神经备受期待的GPT-5.6发布再生变数其定价策略和模型能力再次成为热议焦点。本文将聚焦这两大热点为你带来阿里Page Agent的深度技术解析与实战指南并探讨当前AI Agent领域的最新动态。无论你是想为产品快速集成一个AI副驾驶还是对下一代大模型的应用前景感到好奇这篇文章都将为你提供清晰的路径和可运行的代码。1. Page Agent 是什么重新定义网页交互在深入代码之前我们首先要理解Page Agent试图解决的根本问题。传统的Web自动化Web Automation和机器人流程自动化RPA通常依赖于浏览器扩展、无头浏览器Headless Browser或独立的桌面客户端。这些方案存在几个显著短板环境依赖重需要用户安装插件或部署额外的服务。集成侵入性强难以无缝嵌入到现有的Web应用中形成“两层皮”的体验。开发维护复杂需要处理浏览器驱动、页面渲染、反爬策略等一系列底层细节。阿里Page Agent提出了一个截然不同的思路让智能体“活”在网页内部。它是一个纯JavaScript库通过一行脚本引入即可将自然语言指令转化为对当前页面DOM文档对象模型的实际操作。其核心定位是“In-page GUI Agent”即页面内的图形用户界面智能体。1.1 核心特性与工作原理根据其官方文档和代码库Page Agent的核心特性可以概括为以下几点极简集成无需浏览器扩展、Python环境或无头浏览器。一切交互都发生在你的网页上下文内。基于文本的DOM操作它不依赖视觉识别或多模态大模型来分析屏幕截图。相反它直接读取页面的DOM树文本内容理解页面结构并生成相应的JavaScript操作指令如点击、输入、滚动。这种方式更轻量、更快速且不需要特殊的浏览器权限。自带大模型BYOL - Bring Your Own LLMPage Agent本身是一个“控制器”和“执行器”它需要一个大语言模型LLM作为其“大脑”来理解指令和规划操作。它支持接入多种LLM官方示例使用了通义千问Qwen但你也可以轻松接入OpenAI、Claude或任何提供兼容API的模型。可扩展性除了基础的单页操作它还提供了可选的Chrome扩展用于处理跨浏览器标签页的多页面任务。此外其MCPModel Context Protocol服务器Beta版允许外部客户端如其他AI Agent通过协议来控制浏览器。工作原理简述指令解析用户输入自然语言指令如“点击登录按钮”。页面分析Page Agent获取当前页面的DOM状态将其转换为LLM可理解的文本描述通常包括关键元素的标签、ID、类名、文本内容等。规划与决策将用户指令和页面描述一同发送给配置的LLM。LLM分析后返回一个具体的操作序列例如[{action: click, selector: #loginBtn}]。指令执行Page Agent接收LLM返回的操作序列在页面上安全地执行对应的DOM操作。结果观察执行后再次获取页面状态判断任务是否完成或是否需要下一步操作形成一个闭环。1.2 典型应用场景理解其特性后它的应用场景就非常清晰了SaaS AI副驾驶在你的B端产品如CRM、ERP、OA系统中嵌入一个智能助手。用户可以直接说“帮我把上个月北京地区的销售订单导出为Excel”而无需手动导航菜单、筛选、点击导出按钮。这能极大提升专业软件的使用效率。智能表单填充将需要多次点击、选择、输入的复杂业务流程简化为一句话。例如在报销系统中用户只需说“创建一张差旅报销单日期是昨天交通费500元餐饮费300元关联项目编号PJ202406001”Page Agent即可自动完成所有字段的填写和提交。无障碍访问为视障用户或行动不便的用户提供纯语音或自然语言的交互方式让任何Web应用都能变得“可对话”实现真正的零门槛访问。自动化测试与监控可以编写自然语言描述的测试用例由Page Agent自动执行用于冒烟测试或日常巡检比编写传统的UI测试脚本更直观。2. 环境准备与快速体验在开始集成之前我们先准备好开发环境。Page Agent是一个前端库因此对环境的依赖非常轻量。2.1 基础环境要求现代浏览器Chrome 90、Firefox 88、Edge 90 或 Safari 14。需要支持ES6模块和现代JavaScript API。Node.js如果你计划通过NPM安装并在构建工具如Webpack、Vite中使用需要Node.js 16。仅使用CDN方式则不需要。代码编辑器VS Code、WebStorm等均可。LLM API密钥你需要一个可用的LLM服务API密钥。本文将使用阿里云灵积DashScope的通义千问模型作为示例你也可以准备OpenAI、Anthropic等服务的密钥。2.2 一分钟快速体验CDN方式最快的方式是直接通过CDN引入Page Agent的演示版本。这个版本自带一个免费的测试LLM方便你立即体验其能力。创建一个简单的HTML文件demo.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePage Agent 快速体验/title style body { font-family: sans-serif; padding: 20px; } button { margin: 10px; padding: 10px 20px; } input { margin: 10px; padding: 5px; width: 200px; } #status { margin-top: 20px; padding: 10px; background: #f0f0f0; } /style /head body h1Page Agent 交互演示/h1 button iddemoBtn这是一个演示按钮/button br input typetext iddemoInput placeholder在这里输入文字 p尝试对页面上的AI助手说“点击演示按钮” 或 “在输入框里填写Hello World”/p !-- 引入Page Agent演示脚本 -- script srchttps://cdn.jsdelivr.net/npm/page-agent1.11.0/dist/iife/page-agent.demo.js crossorigintrue/script div idstatus pPage Agent已加载。请查看浏览器控制台F12查看交互日志。/p /div script // 脚本加载后会自动创建一个全局的演示Agent。 // 打开浏览器控制台F12你可以直接与它交互 // 例如await window.demoAgent.execute(点击演示按钮); console.log(Page Agent Demo 已就绪。使用 window.demoAgent 进行操作。); /script /body /html用浏览器打开这个HTML文件然后按F12打开开发者工具在Console控制台中输入以下命令并回车await window.demoAgent.execute(点击演示按钮);你会看到页面上的按钮被自动点击了可能有样式变化。再试试await window.demoAgent.execute(在输入框里填写Hello World);输入框里会自动填入“Hello World”。这就是Page Agent最基础的能力理解你的自然语言命令并操作页面元素。重要提示这个CDN演示版本使用的是官方的免费测试LLM仅用于技术评估有速率和次数限制不适合生产环境。生产环境需要接入你自己的LLM服务。3. 项目集成从零构建一个智能表单助手现在我们来实战如何在一个真实的Vue/React项目或任何前端项目中集成Page Agent并接入自己的LLM构建一个智能表单填写助手。3.1 创建项目与安装依赖我们以一个简单的Vite Vue 3项目为例。首先创建项目npm create vitelatest my-page-agent-demo -- --template vue cd my-page-agent-demo npm install然后安装Page Agent核心库npm install page-agent同时我们需要一个HTTP客户端来调用LLM API。这里使用axiosnpm install axios3.2 封装Page Agent服务为了更好的工程化和复用我们创建一个独立的服务文件src/services/pageAgent.js。// src/services/pageAgent.js import { PageAgent } from page-agent; import axios from axios; // 配置你的LLM服务 // 这里以阿里云DashScope通义千问为例 const LLM_CONFIG { provider: dashscope, // 或 openai, anthropic 等 model: qwen-plus, // 模型名称例如 qwen-plus, gpt-4o, claude-3-5-sonnet baseURL: https://dashscope.aliyuncs.com/compatible-mode/v1, // DashScope兼容模式端点 apiKey: your-dashscope-api-key-here, // !!! 务必替换成你的真实API Key !!! }; // 创建一个适配器函数用于将Page Agent的请求转发到我们的LLM async function callLLM(messages, options {}) { const { provider, model, baseURL, apiKey } LLM_CONFIG; if (provider dashscope) { // 构造DashScope兼容模式的请求 const response await axios.post( ${baseURL}/chat/completions, { model, messages, stream: false, // Page Agent目前不支持流式响应 ...options, }, { headers: { Authorization: Bearer ${apiKey}, Content-Type: application/json, }, } ); // 返回与OpenAI兼容的格式 return { content: response.data.choices[0]?.message?.content || , }; } // 可以在这里扩展其他LLM提供商如OpenAI // else if (provider openai) { ... } else { throw new Error(Unsupported LLM provider: ${provider}); } } // 创建并配置Page Agent实例 let pageAgentInstance null; export function getPageAgent() { if (!pageAgentInstance) { pageAgentInstance new PageAgent({ // Page Agent的核心配置指定如何调用LLM async callLLM(messages) { try { const result await callLLM(messages); return result.content; } catch (error) { console.error(LLM调用失败:, error); throw new Error(AI服务暂时不可用: ${error.message}); } }, // 其他可选配置 language: zh-CN, // 界面语言影响Agent的提示词和响应 maxSteps: 10, // 单个任务最大执行步骤防止死循环 verbose: true, // 打印详细日志调试时非常有用 }); } return pageAgentInstance; } // 提供一个便捷的执行函数 export async function executeAgentCommand(command) { const agent getPageAgent(); console.log(执行命令: ${command}); try { const result await agent.execute(command); console.log(命令执行结果:, result); return { success: true, result }; } catch (error) { console.error(命令执行失败:, error); return { success: false, error: error.message }; } }关键点解释LLM配置LLM_CONFIG对象集中管理LLM的提供商、模型、API地址和密钥。务必保管好你的API Key不要提交到版本库。建议使用环境变量。callLLM适配器Page Agent构造函数需要一个callLLM异步函数。这个函数接收消息数组遵循OpenAI的格式并返回一个包含content字段的对象。我们在这里封装了对实际LLM API如DashScope的调用并统一了响应格式。单例模式通过getPageAgent()函数确保整个应用使用同一个Page Agent实例避免重复初始化。错误处理在executeAgentCommand中封装了执行和错误捕获便于UI层调用和状态反馈。3.3 在Vue组件中使用接下来我们创建一个演示组件src/components/SmartForm.vue。!-- src/components/SmartForm.vue -- template div classsmart-form-demo h2智能表单助手演示/h2 div classform-area div classform-group label forname姓名/label input idname typetext v-modelform.name placeholder请输入姓名 / /div div classform-group label foremail邮箱/label input idemail typeemail v-modelform.email placeholder请输入邮箱 / /div div classform-group label fordepartment部门/label select iddepartment v-modelform.department option value请选择/option option valuetech技术部/option option valuesales销售部/option option valuehr人力资源部/option /select /div div classform-group label input typecheckbox v-modelform.agree 我已阅读并同意协议 /label /div button idsubmitBtn clickhandleSubmit提交表单/button /div div classcontrol-area h3AI助手控制台/h3 div classcommand-input input typetext v-modelcommand placeholder输入指令如填写姓名张三邮箱zhangsanexample.com选择技术部勾选协议 keyup.enterhandleExecute / button clickhandleExecute :disabledisLoading {{ isLoading ? 执行中... : 执行 }} /button /div div classpredefined-commands p快捷指令/p button clicksetCommand(填写姓名张三)填写姓名/button button clicksetCommand(选择技术部)选择部门/button button clicksetCommand(勾选协议并点击提交按钮)一键提交/button button clicksetCommand(清空所有表单字段)清空表单/button /div div classresult-log pstrong执行日志/strong/p pre{{ log }}/pre /div /div /div /template script setup import { ref, reactive } from vue; import { executeAgentCommand } from ../services/pageAgent; const form reactive({ name: , email: , department: , agree: false, }); const command ref(); const isLoading ref(false); const log ref(等待指令...\n); const setCommand (cmd) { command.value cmd; }; const handleExecute async () { if (!command.value.trim() || isLoading.value) return; const currentCommand command.value; command.value ; isLoading.value true; log.value ${currentCommand}\n; const result await executeAgentCommand(currentCommand); if (result.success) { log.value ✓ 执行成功: ${JSON.stringify(result.result, null, 2)}\n\n; } else { log.value ✗ 执行失败: ${result.error}\n\n; } isLoading.value false; }; const handleSubmit () { alert(表单提交成功\n数据${JSON.stringify(form, null, 2)}); // 实际项目中这里应该是API调用 }; /script style scoped .smart-form-demo { display: flex; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 20px; } .form-area, .control-area { flex: 1; border: 1px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9; } .form-group { margin-bottom: 15px; } .form-group label { display: inline-block; width: 80px; } .form-group input, .form-group select { padding: 8px; width: 200px; } #submitBtn { margin-top: 15px; padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .command-input { display: flex; gap: 10px; margin-bottom: 20px; } .command-input input { flex: 1; padding: 10px; } .predefined-commands { margin-bottom: 20px; } .predefined-commands button { margin-right: 10px; margin-bottom: 10px; padding: 8px 12px; } .result-log { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.9em; } /style3.4 运行与验证将上面创建的文件放入项目对应目录。在src/App.vue中引入并使用SmartForm组件。在项目根目录下创建.env.local文件添加你的DashScope API Key确保该文件在.gitignore中VITE_DASHSCOPE_API_KEYyour-dashscope-api-key-here修改src/services/pageAgent.js从环境变量读取API Keyconst apiKey import.meta.env.VITE_DASHSCOPE_API_KEY;启动开发服务器npm run dev打开浏览器访问http://localhost:5173或Vite提供的地址。在“AI助手控制台”的输入框中尝试输入自然语言指令例如填写姓名张三在邮箱框输入 testexample.com选择人力资源部勾选协议复选框点击提交表单按钮清空所有表单字段观察表单字段的变化和下方的执行日志。Page Agent会理解你的指令并自动操作对应的HTML元素。4. 核心配置与高级用法详解通过上面的实战我们已经跑通了基本流程。接下来我们深入Page Agent的核心配置和高级能力以便应对更复杂的场景。4.1 Page Agent 构造函数配置创建PageAgent实例时可以传入一个配置对象。除了必选的callLLM函数还有其他重要选项const agent new PageAgent({ // 【必需】调用LLM的函数 async callLLM(messages, options) { // ... 你的LLM调用逻辑 return { content: llmResponseText }; }, // 【重要】界面语言影响Agent理解指令和描述页面的语言环境 language: zh-CN, // 可选 en-US, ja-JP 等 // 最大执行步骤防止任务陷入无限循环 maxSteps: 20, // 是否在控制台打印详细的执行日志调试时设为true verbose: false, // 自定义系统提示词System Prompt用于塑造Agent的行为和角色 systemPrompt: 你是一个专业的网页操作助手。你的任务是根据用户指令安全、准确地操作当前网页。请始终以用户的母语${language}回复。操作前请仔细确认目标元素。, // 自定义用于描述页面DOM的“快照”生成器 // 默认实现会提取文本、可交互元素的属性等。你可以覆盖它以提供更精简或更丰富的上下文。 async getPageSnapshot() { // 返回一个描述当前页面的字符串 // 默认实现return window.PageAgentInternals?.getPageSnapshot?.() || ; // 你可以在这里加入自定义逻辑比如过滤掉不相关的区域 const defaultSnapshot window.PageAgentInternals?.getPageSnapshot?.() || ; // 示例只保留表单区域 const formSnapshot document.querySelector(form)?.outerHTML || ; return formSnapshot || defaultSnapshot; }, // 动作执行前的钩子函数可用于拦截、修改或记录即将执行的动作 beforeAction: (action) { console.log(即将执行动作:, action); // 如果返回 false则会取消该动作的执行 return true; }, // 动作执行后的钩子函数 afterAction: (action, result) { console.log(动作执行完毕:, action, 结果:, result); }, });4.2 处理复杂指令与多步任务Page Agent的优势在于处理需要多个步骤的复杂指令。LLM会将其分解成一个动作序列。例如指令“帮我搜索商品iPhone 15按价格从低到高排序然后点开第一个商品”可能被分解为找到搜索框输入“iPhone 15”。点击搜索按钮。找到排序下拉框选择“价格从低到高”。等待结果刷新。找到第一个商品卡片点击进入详情页。Page Agent会自动执行这些步骤。你可以在verbose: true模式下在控制台看到详细的分解和执行过程。4.3 安全性与权限边界这是使用Page Agent时必须高度重视的一点。作用域限制Page Agent只能操作它被加载的页面即同一个标签页、同源。它不能直接访问其他标签页、浏览器历史记录、本地文件系统或其他域的内容。无特权访问它拥有与普通页面JavaScript相同的权限。这意味着它不能绕过CORS跨源资源共享策略也不能访问被httpOnly标记的Cookie。用户感知与授权任何自动化操作都应在用户知情和授权下进行。最佳实践是提供一个明确的“AI助手模式”开关让用户主动启用并在执行关键操作如提交表单、支付前请求用户二次确认。防止滥用避免让Agent执行具有破坏性的指令如“删除所有数据”、“无限循环点击”。可以通过beforeAction钩子进行安全检查或限制maxSteps。4.4 集成自有LLM的进阶技巧不同的LLM在理解网页结构和规划操作上的能力有差异。为了获得更好的效果你可以优化传递给LLM的提示词Prompt。Page Agent内部已经有一套优化过的提示词但你可以在callLLM函数中在发送给LLM的messages数组前插入自定义的系统提示或示例Few-shot来引导模型。async function callLLM(messages, options {}) { // 在原始的messages前插入更强大的系统提示 const enhancedMessages [ { role: system, content: 你是一个顶尖的网页操作专家。请严格按照以下规则行事 1. 优先使用元素的ID选择器#id其次是精确的文本内容。 2. 对于表单先填写所有字段再点击提交按钮。 3. 如果找不到明确元素请描述你看到的内容并请求用户澄清。 4. 所有回复必须是纯JSON格式的动作序列例如[{action: type, selector: #input, text: hello}] }, ...messages // 原始的页面快照和用户指令 ]; // ... 后续调用LLM API的逻辑 }5. 常见问题与排查思路在实际集成和使用Page Agent时你可能会遇到以下问题。这里提供一个排查清单。问题现象可能原因排查步骤与解决方案Agent不执行任何操作控制台无错误1. LLM API调用失败或超时。2.callLLM函数返回格式不正确。3. 页面元素结构复杂LLM无法理解。1. 打开浏览器网络面板检查对LLM API的请求是否成功响应内容是否符合预期。2. 在callLLM函数中添加console.log确保它返回{ content: string }格式。3. 设置verbose: true查看Page Agent打印的页面快照和LLM响应确认LLM是否返回了有效的动作JSON。Agent执行了错误操作点错位置1. 页面快照信息不足或过于冗长干扰了LLM判断。2. 元素选择器不唯一或动态变化。3. LLM能力不足。1. 自定义getPageSnapshot函数过滤掉导航栏、页脚等无关区域只保留核心操作区的DOM。2. 为关键交互元素添加更稳定、唯一的属性如>跨域CORS错误你的前端页面域名与LLM API域名不同浏览器阻止了请求。1.前端代理在开发环境中配置Vite/Webpack的代理将API请求转发到同源地址。2.后端转发在生产环境中绝对不要在前端代码中硬编码API Key。应通过你自己的后端服务器转发LLM请求前端只与你自己的后端通信。这是最安全、最标准的做法。“Maximum call stack size exceeded” 或页面卡死1.maxSteps设置过大且任务陷入循环。2. Agent的某个操作触发了页面的无限重渲染如React状态循环更新。1. 合理设置maxSteps如10-20。2. 检查页面逻辑确保Agent的操作不会触发导致页面无限循环的事件监听器或状态更新。3. 在beforeAction中检查动作是否在重复执行相同操作。在单页应用SPA中失效页面内容通过JavaScript动态加载初始快照捕获不到目标元素。Agent执行动作时元素可能尚未出现。1.等待策略在指令中明确要求“等待列表加载完成”。Page Agent内部有基本的等待逻辑。2.自定义等待在beforeAction钩子中如果检测到目标元素不存在可以手动延迟如await new Promise(resolve setTimeout(resolve, 1000))或监听DOM变化。3.分步指令将复杂任务拆分成更小的、顺序执行的指令确保上一步完成后再执行下一步。6. 生产环境最佳实践与工程建议将Page Agent用于实际项目时需要考虑安全性、性能、可维护性和用户体验。6.1 安全第一API密钥与通信永远不要在前端暴露原始API密钥像上面示例中直接写在JS文件里是极其危险的。任何用户都可以通过浏览器开发者工具看到它。标准做法构建一个轻量的后端代理服务例如使用Node.js Express Python FastAPI。前端将用户指令发送到你的后端后端用自己的API密钥调用LLM服务再将结果返回给前端。这样密钥完全保存在服务器端。请求限流与鉴权在后端代理中对请求进行用户鉴权、频率限制和内容审核防止滥用和恶意指令。6.2 性能优化精简页面快照默认的getPageSnapshot可能会包含大量HTML导致Tokens消耗高、LLM响应慢。自定义此函数只提取input,button,a,select等可交互元素及其关键属性id, name, placeholder, textContent。缓存LLM响应对于常见的、确定性的指令如“点击登录”可以在前端或后端缓存LLM返回的动作序列下次直接执行避免重复调用LLM。模型选择权衡效果与成本。对于简单任务使用较小、较快的模型如Qwen-Plus对于复杂任务再切换到更强大的模型。6.3 用户体验UX设计明确的状态指示当Agent在执行任务时应在UI上显示明确的加载状态如“AI正在处理...”避免用户以为页面卡顿。指令确认与撤销对于关键操作提交订单、删除数据在执行前弹出确认框。提供“撤销上一步”或“停止AI”的按钮。自然语言引导在输入框旁提供示例指令降低用户的学习成本。例如“试试说‘填写我的收货地址’ 或 ‘查找价格低于100元的商品’”。容错与反馈当Agent无法理解或执行失败时给出友好、具体的错误提示并建议用户换一种说法或手动操作。6.4 可维护性集中配置管理将Page Agent的初始化配置、LLM连接参数等集中在一个配置文件中方便不同环境开发、测试、生产切换。日志与监控记录所有用户指令、LLM请求与响应、执行结果和错误。这有助于调试问题、分析用户使用模式和改进Agent能力。版本化与测试将你的Page Agent集成代码纳入版本控制。为不同的页面或功能模块编写自动化测试确保Agent的核心操作路径不会因前端UI改动而失效。7. 拓展GPT-5.6风波与AI Agent生态的启示文章开头也提到了GPT-5.6的发布变数。虽然本文重点在Page Agent但这一事件反映了AI基础模型领域快速变化对上层应用的影响。对于像Page Agent这样的AI Agent开发者而言需要关注以下几点模型API的稳定性与成本大模型厂商的定价策略、服务可用性和API变更会直接影响你的应用成本和稳定性。避免过度依赖单一模型提供商。Page Agent的“Bring your own LLM”设计正是为此而生让你的应用能灵活切换底层模型。提示词工程与模型适配不同模型在理解网页结构、规划步骤的能力上差异很大。你需要为不同的模型微调系统提示词System Prompt甚至准备不同的“思维链”Chain-of-Thought示例以确保任务执行的可靠性。关注开源模型除了商业APILlama、Qwen、DeepSeek等开源模型的性能不断提升且可以本地部署。对于数据敏感或成本控制严格的项目将Page Agent与本地部署的开源模型结合是一个值得探索的方向。Agent框架的标准化除了Page Agent还有LangChain、AutoGPT、CrewAI等众多AI Agent框架。未来的趋势可能是标准化例如通过MCPModel Context Protocol让不同的Agent、工具和模型能够互相通信和协作。Page Agent支持MCP Server就是一个积极的信号。阿里Page Agent的出现降低了在Web产品中嵌入智能交互能力的门槛。它巧妙地将复杂的AI能力封装成一个轻量级的前端库让开发者可以像使用jQuery插件一样为任何网页添加“自然语言遥控器”。从简单的表单填写到复杂的多步骤工作流自动化其想象空间巨大。然而技术始终是工具。成功的AI功能集成离不开对业务场景的深刻理解、严谨的安全设计和对用户体验的细致打磨。建议你先从内部工具或非核心业务场景开始试点积累经验再逐步推向更重要的用户流程。