@tanzerfe/page-use

@tanzerfe/page-use

用自然语言操作当前页面：输入一句指令，智能体在页面中自动点击、输入并返回结论。基于 page-agent，框架无关，附带操作面板与 Vue 组件。

可选的业务流程能力提供场景与知识维护、IndexedDB、导入导出和中台授权同步，支持 Web 与手机 H5。

业务页面开发与改造请遵循 网页最小接入规范；业务仓库可按 AI 开发规则 配置后续 AI 开发约束。

安装

pnpm add @tanzerfe/page-use zod

快速开始

Vue 3

<template>
  <PageUseHost :options="options" launcher />
</template>

<script setup lang="ts">
import { PageUseHost, type PageUseOptions } from '@tanzerfe/page-use/vue'

const options: PageUseOptions = {
  llm: { baseURL: '/api/llm-proxy/v1', model: 'deepseek-flash' },
  appName: '订单管理系统',
  getMenus: () => permissionStore.menus,
}
</script>

其它框架

import { createPageUse, mountPageUseUI } from '@tanzerfe/page-use'

const handle = createPageUse({
  llm: { baseURL: '/api/llm-proxy/v1', model: 'deepseek-flash' },
  appName: '订单管理系统',
  getMenus: () => myMenus, // [{ label, path, children? }]
})
const unmount = mountPageUseUI({ launcher: true }) // launcher：显示操作面板

// 退出登录或卸载时
unmount()
handle.destroy()

常用配置

请勿在前端配置 API Key，生产环境应由网关或代理注入。

在其它智能体中调用

import { pageUseCapability } from '@tanzerfe/page-use'

const result = await pageUseCapability.run('打开订单列表，告诉我第一条订单的收货地址')
console.log(result.status, result.summary)

也可将 PAGE_USE_TOOL 作为 function calling 工具提供给模型，并用 runPageUseTool 执行。

操作面板

• 传入 launcher 后，面板入口显示在页面右下角，可拖动。
• 用户关闭后，可在 URL 上加 ?pageUseDebug=1 重新显示，或由业务系统调用 showPageUseLauncher() 调出。
• 希望默认隐藏、按需调出时，传入 launcher: { defaultHidden: true }。
• 面板支持快捷指令、历史记录与语音播报。
• flow: true 开启桌面端本地场景功能，false 或不传则关闭；也可传对象定制终端、账号隔离和云端能力。开启后，面板的「设置」页 显示 场景「自定义」入口。

页面讲解

用于产品演示：用户说「介绍当前页面」后，智能体逐个高亮页面模块并语音讲解，页面有 Tab 时依次切换。操作类指令不会触发讲解。

createPageUse({
  // ...
  getContentRoot: () => document.querySelector('.layout-content'), // 页面内容区，排除顶部栏与菜单
  pageTour: { defaultStyle: 'user' }, // 内置风格：user（日常使用者）、trainer（培训讲师）；false 关闭
})

模块按 h1–h3 标题或 <section aria-label> 自动识别；Tab 需具备 role="tab" 语义（element-plus、naive-ui 已支持）。

主题

通过 CSS 变量调整主色：

:root {
  --tz-page-use-primary: #1677ff;
}

机器人图标以 PAGE_USE_ROBOT_ICON_SVG 导出，可在业务界面中复用。

License

MIT