zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init

Browse Source
This commit is contained in:
Simon
2025-09-29 16:33:15 +08:00
parent e8041e0582
commit 847620b5e8
98 changed files with 20166 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
pages/docs/introduction/limitations/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
export default function LimitationsPage() {
return (
<div className="max-w-4xl mx-auto">
<div className="mb-8">
<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">使用限制</h1>
<p className="text-xl text-gray-600 dark:text-gray-300">
了解 page-agent 当前的功能边界和技术限制
</p>
</div>
<div className="prose prose-lg dark:prose-invert max-w-none">
<h2 className="text-2xl font-bold mb-3">页面支持限制</h2>
<div className="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-400 p-4 mb-6">
<h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">单页应用限制</h3>
<ul className="text-blue-700 dark:text-blue-300 space-y-2">
<li>
• <strong>仅支持单页应用（SPA）</strong>：目前只能在单个页面内进行操作
</li>
<li>
• <strong>多页接力功能正在设计中</strong>：暂时无法跨页面执行连续任务
</li>
<li>
• <strong>无法操作未接入该能力的网站</strong>：需要目标网站主动集成 page-agent
</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">交互行为限制</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
<h3 className="font-semibold mb-4">支持的操作</h3>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="space-y-2">
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>点击操作</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>文本输入</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>页面滚动</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>表单提交</span>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>选择操作</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>焦点切换</span>
</div>
</div>
</div>
<h3 className="font-semibold mb-4">不支持的操作</h3>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>鼠标悬停（hover）</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>拖拽操作</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>右键菜单</span>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>图形绘制</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>键盘快捷键</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>基于点击区域或鼠标位置的控制</span>
</div>
</div>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">网页理解限制</h2>
<div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 p-4 mb-6">
<h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">无视觉能力</h3>
<p className="text-red-700 dark:text-red-300 mb-3">
page-agent 基于 DOM 结构进行理解和操作，<strong>没有视觉识别能力</strong>
，无法理解以下内容：
</p>
<ul className="text-red-700 dark:text-red-300 space-y-1">
<li>
• <strong>图片内容</strong>：无法识别图片中的文字、图标或视觉元素
</li>
<li>
• <strong>Canvas 画布</strong>：无法理解 Canvas 中绘制的图形和内容
</li>
<li>
• <strong>WebGL 3D 内容</strong>：无法操作 3D 场景中的元素
</li>
<li>
• <strong>SVG 图形</strong>：无法理解 SVG 中的视觉内容和路径
</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">被操作网站要求</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
<div className="space-y-4">
<div>
<h3 className="font-semibold mb-2">语义化和易用性</h3>
<p className="text-gray-600 dark:text-gray-300">
所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何
accessibility 特性，可能影响 AI 的理解准确性。
</p>
</div>
<div>
<h3 className="font-semibold mb-2">UI/UX</h3>
<p className="text-gray-600 dark:text-gray-300">
反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响
AI 的理解和操作。
</p>
</div>
<div>
<h3 className="font-semibold mb-2">环境要求</h3>
<p className="text-gray-600 dark:text-gray-300">modern browser</p>
</div>
</div>
</div>
<h2>未来规划</h2>
<div className="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-400 p-4">
<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">即将支持</h3>
<ul className="text-green-700 dark:text-green-300 space-y-1">
<li>• 多页面接力操作能力</li>
<li>• 更丰富的鼠标交互支持</li>
<li>• 基础的视觉理解能力</li>
<li>• 更智能的错误恢复机制</li>
</ul>
</div>
</div>
</div>
)
}

188
pages/docs/introduction/overview/page.tsx Normal file
View File

@@ -0,0 +1,188 @@
export default function Overview() {
return (
<article>
{/* 头图 */}
<figure className="mb-8 rounded-xl overflow-hidden">
<img
src="https://img.alicdn.com/imgextra/i4/O1CN01eppTGh27iefUEegnN_!!6000000007831-0-tps-3015-1024.jpg"
alt="page-agent 概览图示"
className="w-full h-64 object-cover"
/>
</figure>
<h1 className="text-4xl font-bold mb-6">Overview</h1>
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
page-agent 是一个完全基于Web技术的 UI Agent，让任何网站都能拥有 AI 操作员。 通过简单的 CDN
引入，为你的 Web 应用注入智能化能力。
</p>
<section>
<h2 className="text-2xl font-bold mb-4">什么是 page-agent？</h2>
<p className="text-foreground/80 mb-8 leading-relaxed ">
page-agent 是一个<strong>页面内嵌式 UI Agent</strong>。
与传统的浏览器自动化工具不同，page-agent 面向<strong>网站开发者</strong>
，而非爬虫或通用Agent开发者，将 Agent 集成到你的网站中，
让用户可以通过自然语言与页面进行交互。
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">核心特性</h2>
<div className="grid md:grid-cols-2 gap-4 mb-8" role="list">
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
🧠 智能 DOM 理解
</h3>
<p className="">
节约每一个 token。基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。
</p>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
🔒 安全可控
</h3>
<p className="">
支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。
</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
⚡ 零后端部署
</h3>
<p className="">CDN 直接引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。</p>
</div>
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
♿ 普惠智能
</h3>
<p className="">为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">与 browser-use 的区别</h2>
<div className="overflow-x-auto mb-8">
<table className="w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead>
<tr className="bg-gray-50 dark:bg-gray-800">
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
特性
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
page-agent
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
browser-use
</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
部署方式
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
页面内嵌组件
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">外部工具</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
操作范围
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">当前页面</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
整个浏览器
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
目标用户
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
网站开发者
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
爬虫/Agent 开发者
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
使用场景
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
用户体验增强
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
自动化任务
</td>
</tr>
</tbody>
</table>
</div>
<h2 className="text-2xl font-bold mb-4">应用场景</h2>
<ul className="space-y-4 mb-8">
<li className="flex items-start space-x-3">
<span className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
1
</span>
<div className="">
<strong>对接答疑机器人：</strong>
把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。
</div>
</li>
<li className="flex items-start space-x-3">
<span className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
2
</span>
<div className="">
<strong>交互升级/智能化改造：</strong>
一行代码，老应用变身Agent，产品专家帮用户操作复杂 B
端软件。降低人工支持成本，提高用户满意度。
</div>
</li>
<li className="flex items-start space-x-3">
<span className="w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
3
</span>
<div className="">
<strong>产品教学：</strong>
向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。
</div>
</li>
<li className="flex items-start space-x-3">
<span className="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center font-bold mt-0.5">
4
</span>
<div className="">
<strong>无障碍支持：</strong>
为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。
</div>
</li>
</ul>
<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2">🚀 开始使用</h3>
<p className="mb-3 ">
准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。
</p>
<a
href="/docs/introduction/quick-start"
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
role="button"
>
快速开始 →
</a>
</div>
</section>
</article>
)
}

81
pages/docs/introduction/quick-start/page.tsx Normal file
View File

@@ -0,0 +1,81 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
export default function QuickStart() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
<BetaNotice />
<p className=" mb-6 leading-relaxed">
几分钟内完成 page-agent 的集成，让你的网站拥有 AI 操作员。
</p>
<h2 className="text-2xl font-bold mb-3">安装步骤</h2>
<div className="space-y-4 mb-6">
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
1. 引入方式
</h3>
<div className="space-y-3">
<div>
<p className="text-sm font-medium mb-2">CDN 引入</p>
<CodeEditor
code={`// 仅供测试使用，生产环境联系 @西萌
<script src="https://dev.g.alicdn.com/dt/page-use.js/0.0.1/lib/page-agent.umd.cjs"></script>`}
language="html"
/>
</div>
<div>
<p className="text-sm font-medium mb-2">NPM 安装</p>
<CodeEditor
code={`// npm install page-agent
import PageAgent from 'page-agent'`}
language="bash"
/>
</div>
</div>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
2. 初始化配置
</h3>
<CodeEditor
code={`// 仅供测试使用，生产环境需要配置 LLM 接入点，本工具不提供 LLM 服务
const pageAgent = new PageAgent()`}
language="javascript"
/>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
3. 开始使用
</h3>
<CodeEditor
code={`// 程序化执行自然语言指令
await pageAgent.execute('点击提交按钮，然后填写用户名为张三');
// 或者显示对话框让用户输入指令
pageAgent.panel.show()
`}
language="javascript"
/>
</div>
</div>
<div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2">🎉 完成！</h3>
<p className="mb-3 ">现在你的网站已经拥有了 AI 操作员能力。</p>
<a
href="/docs/features/security-permissions"
className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200"
>
了解更多功能 →
</a>
</div>
</div>
)
}