@touchvue/agent + Vue 3 自动操作演示

这是一个本地 Vue 3 管理台示例，包含首页、项目管理、人员管理三个路由。业务记录保存在浏览器内存中，刷新后会恢复示例数据，不连接业务数据库。助手脚本与 Vue 业务解耦。

启动

需要 Node.js 20 或更高版本。请在项目根目录运行：

npm install
npm run dev

然后打开 http://127.0.0.1:4173。示例面板使用 src/main.js 中 new TouchAgent({...}) 提供的模型配置。

页面功能

• 首页：工作统计、待办、常用链接和最近访问项目。
• 项目：搜索和状态筛选；支持新增、编辑、查看详情。
• 人员：搜索和状态维护；支持新增、编辑、查看详情。
• 页面数据仅为前端 mock 数据，改动仅保存在当前页面会话。

智能助手

@touchvue/agent 导出 TouchAgent 类。Agent 使用 Shadow DOM 显示对话面板，不依赖 Vue，也不读取业务组件或业务状态。调用方通过 container 指定自己的 DOM 容器（兼容 mount 别名），尺寸、位置和显隐由宿主应用决定。用户从聊天面板发送任务后：

1. 脚本扫描当前页面可见、可用的按钮、链接、输入框和 ARIA 下拉选项。
2. 浏览器直接向 JEV 发送动作决策请求，决策模型只能选择本轮候选 ID；向 DeepSeek 请求表单输入内容。
3. 遇到文本输入时，当前模式的模型根据任务和字段标签生成值；脚本先移动鼠标圆点、聚焦输入框，再逐字输入并发送 input/change 事件。
4. 点击模拟下拉框后，脚本重新扫描可见选项，再交给当前决策模型选择。
5. 默认情况下，保存、提交、删除、付款等高影响操作会在聊天面板中等待人工确认。用户可随时停止任务。

模型配置不在面板中编辑，统一由开发者在创建实例时提供。JEV 和 DeepSeek 都由浏览器直连，服务商需允许 CORS；明文 Key 会出现在浏览器运行时和前端构建产物中，不要将其用于公开生产站点。脚本不执行模型生成的任意代码或选择器；候选目标会在执行前再次验证。页面控件使用 label、aria-label 或 data-agent-label 让触点可识别。

嵌入到应用

安装后导入：

npm install @touchvue/agent

创建由宿主控制布局的挂载容器。容器可以是普通布局区域，也可以是固定定位的弹层或抽屉：

<div id="agent-panel"></div>

import { TouchAgent } from "@touchvue/agent";

const agent = new TouchAgent({
  container: document.querySelector("#agent-panel"),
  decision: {
    provider: "jev",
    apiKey: "JEV API Key",
    model: "jev-latest"
  },
  inputModel: {
    baseURL: "https://api.deepseek.com",
    apiKey: "DeepSeek API Key",
    model: "deepseek-flash"
  }
});

JEV 负责选择下一步触点，DeepSeek 负责生成表单输入内容。BYOK 参数仅保存在实例内存中，不写入 sessionStorage。由于 Key 在浏览器运行时可见，不要将长期密钥提交到仓库或打包进公开生产站点。

若动作决策使用 JEV 或 StartLux、表单输入使用 DeepSeek，可分别通过 decision 和 inputModel 配置：两种决策服务均使用 state + questions 接口，DeepSeek 使用 Chat Completions。StartLux 默认连接本机 http://127.0.0.1:8090/v1/systemone，JEV 默认连接 https://api.typesafe.ai/v1/systemone。当前 Vue 演示采用 StartLux；浏览器直连要求上游允许 CORS，且前端包中的密钥对访问者可见。

container 也可以传 CSS 选择器，例如 container: "#agent-panel"；如果更喜欢 mount 这个名字，也支持 mount: "#agent-panel"。容器的 width、height、position、inset、display 和 z-index 都由宿主控制；Agent 不改页面 body 的间距，也不接管容器定位。示例：

<div id="agent-panel" style="position:fixed;right:24px;bottom:24px;width:360px;height:620px;z-index:2000"></div>

如果页面需要以代码发送任务：

await agent.run({
  task: "在当前页面创建一个项目",
  successWhen: () => document.body.innerText.includes("创建成功"),
  confirmBefore: ({ action, label }) => action === "提交" || /删除|保存/.test(label),
  onStep: (event) => console.log(event)
});

销毁实例并移除面板：

agent.destroy();

当前 Agent 默认在浏览器中直连模型服务商，因此模型服务商必须允许页面跨域请求。运行 npm run check 和 npm run build 可检查语法、构建 Vue 示例和生成 ESM/IIFE Agent 包；目前尚未向 npm 发布。

也可以直接通过 CDN 引入 IIFE 包：

<script src="https://unpkg.com/@touchvue/agent"></script>
<script>
  const agent = new TouchAgentBundle.TouchAgent({ container: "#agent-panel", /* 其余模型配置 */ });
</script>