@tanzerfe/page-use

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

安装

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()

常用配置

| 选项 | 说明 | |---|---| | llm.baseURL | OpenAI 兼容接口地址，必填 | | llm.model | 模型名称，需支持 function calling | | appName | 系统名称 | | getMenus | 返回当前用户可见的菜单树，帮助智能体找到页面 | | routerMode | 'hash'（默认）或 'history'，Vue 项目自动识别 |

请勿在前端配置 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 }。
• 面板支持快捷指令、历史记录与语音播报。

页面讲解

用于产品演示：用户说「介绍当前页面」后，智能体逐个高亮页面模块并语音讲解，页面有 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