求职方向:前端研发、全栈开发、AI Agent

精选案例个人研究

PUBLIC RECONSTRUCTION / RESEARCH

Layered Route × Agent:基于页面行为约束的任务执行

基于分层路由实现页面堆叠、返回与深链恢复。本地任务规划器根据产品、订单等参数匹配行为清单,执行已声明的页面动作,并检查目标路由与页面层级。

打开 Demo
时间
公开重建 · 持续研究
职责
路由模型 · Agent 方案 · 核心开发
状态
公开实验 · 全部使用合成数据
范围
Layered Route Lab 的分层路由与刷新重建 / Route Presenter、同 URL Presenter 与 Modal history
  • React
  • TypeScript
  • vinext
  • Route AST
  • History API
  • Behavior Manifest
  • Puppeteer research
  • LLM-assisted planning

OUTCOMES

项目结果

  • 通过深链接恢复路由页面及查询条件;临时 Presenter 和 Modal 使用浏览器历史处理返回。
  • Behavior Manifest 在构建时从源码生成;当前包含 31 个路由模板 · 35 个路由节点 · 3 类界面层 · 7 个动作,数字直接读取生成文件。
  • 公开 Demo 完整实现检索、计划、宿主命令、执行与结果检查;同一份动作清单亦用于回归测试。
PUBLIC RESEARCH ARCHITECTURE行为知识来自源码分析或运行态探索,执行结果由宿主状态验证
Static Source AnalysisRuntime Exploration
UNIFIED KNOWLEDGEBehavior Manifest31 schemas · 35 nodes · 7 actions
  1. 01Candidate Retrieval
  2. 02Planner / Clarification
  3. 03Typed App Bridge
  4. 04Host State Update
  5. 05Result Verification
RESEARCH ARCHITECTURE · NOT A PRODUCTION SCREENSHOT

页面行为的两类采集方式

源码可读时,从路由 AST 与界面特征中提取动作;源码不可读或运行态较复杂时,由 Agent 通过浏览器和 DOM 进行探索。两类结果统一写入 Behavior Manifest。

新窗口查看
GENERATED FROM PUBLIC LAB · SYNTHETIC DATA

行为图:页面状态与可执行动作

直接读取 Lab 的 Behavior Manifest。选择节点可查看父子关系,并打开对应页面。

01

问题定义:页面操作不等同于坐标点击

公开研究

复杂 Web 应用中的操作有效性取决于当前页面、目标实体、查询条件、可用动作与完成条件。仅依赖截图或由模型自由生成步骤,难以稳定表达这些约束。

因此,本项目先建立可恢复状态的宿主,再从源码提取页面允许的动作,最后由 Agent 按行为清单执行任务并检查结果。

02

分层路由与状态恢复

已实现

URL 同时记录目标页面及可恢复的父子路径。

Lab 使用声明式路由树解析集合、实体、关系、记录和动作页面。刷新深链时,服务端按当前路径直接渲染完整父链,避免先渲染默认页面再校正状态。

查询条件按路由模板保存;返回上一级时,此前的筛选条件得以保留。

03

Presenter 与临时界面层

已实现

Route Presenter 可从 URL 恢复;同 URL Presenter 通过 history state 表示临时界面层。两者共用层级与进出场逻辑,同时明确区分是否支持深链恢复。

3D 堆叠与网格检查模式展示各层索引、退出状态和遮挡关系,用于调试上下文保留问题。

05

从源码生成 Behavior Manifest

构建时生成

生成脚本读取公开 Lab 的路由声明与界面特征,当前输出 31 个路由模板 · 35 个路由节点 · 3 类界面层 · 7 个动作。源文件数量和 source hash 同样直接来自 behaviorManifest,避免案例文案与实现不一致。

Manifest 记录路由参数、父子关系、界面层与动作来源,检索、规划、页面展示和测试均使用同一份数据。

  • 源码入口:src/router/routes.ts
  • 源码入口:src/App.tsx
  • 源码入口:src/core/Presenter.tsx
  • 源码入口:src/core/Modal.tsx
06

行为检索与受约束规划

已实现 / 持续研究

本地索引先按实体、路由和动作缩小候选范围,再根据 Manifest 生成计划;公开 Demo 的主要流程不依赖在线模型。模型可辅助理解语义,但不能绕过参数与前置条件检查。

深层导航沿父链逐层展开,使每一步状态变化均可观察,并便于定位失败发生的层级。

07

类型化宿主命令

已实现

Agent 不直接修改业务组件,也不伪造键盘事件。它仅发送 route.navigate、presenter.advance、modal.open 和 inspection.set 等类型化命令,由宿主按照自身状态模型执行并返回结果。

允许执行的动作受显式协议限制,行为清单、规划器与宿主实现可分别维护。

08

执行结果验证

自动化验证

每一步执行后均检查 URL、顶层界面、层级数量与数据结果,再决定继续、重试或报告失败。

同一份 Manifest 还用于检查父链完整性、动作来源、深链 SSR 和交互约定,不仅用于 Demo 配置。

09

公开 Demo

公开演示

Demo 覆盖页面导航、跨实体查找、数据整理、Presenter / Modal 操作与检查模式。商品、订单、员工和任务结果均为虚构数据。

交互内容按需加载。移动端支持案例阅读,完整操作与堆叠检查以桌面端为主。

PUBLIC RESEARCH DEMO · SYNTHETIC DATA

Operations Agent × Layered Route Lab

ROUTE AST · LOCAL PLANNER · TYPED BRIDGE

输入自然语言任务后,可观察行为检索、计划生成、逐步执行与结果检查。Demo 使用合成数据,不连接美餐或其他真实业务系统。

全窗口体验
10

适用范围与限制

研究边界

本项目是基于公开 Lab 构建的研究原型,不属于美餐或任何客户的生产环境,也不代表真实业务已接入 Agent。

接入真实系统仍需处理权限、脱敏、审计、写操作确认、失败补偿与模型成本。浏览器探索和 OCR 可作为补充信息来源,但不能替代可验证的结构化行为清单。

本页目录
  1. 问题定义:页面操作不等同于坐标点击
  2. 分层路由与状态恢复
  3. Presenter 与临时界面层
  4. Modal History 与返回顺序
  5. 从源码生成 Behavior Manifest
  6. 行为检索与受约束规划
  7. 类型化宿主命令
  8. 执行结果验证
  9. 公开 Demo
  10. 适用范围与限制