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

41
pages/docs/integration/api-reference/page.tsx Normal file
View File

@@ -0,0 +1,41 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
export default function ApiReference() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">API 参考</h1>
<BetaNotice />
<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
完整的 API 文档，包含所有可用的方法和参数。
</p>
<h2 className="text-2xl font-bold mb-3">核心方法</h2>
<div className="space-y-4 mb-6">
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<h3 className="text-lg font-semibold mb-2 font-mono">pageAgent.init(config)</h3>
<p className="text-foreground/80 mb-3">初始化 page-agent</p>
<CodeEditor code={`const pageAgent = new PageAgent`} />
</div>
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<h3 className="text-lg font-semibold mb-2 font-mono">pageAgent.execute(instruction)</h3>
<p className="text-foreground/80 mb-3">执行自然语言指令</p>
<CodeEditor
code={`await pageAgent.execute('点击提交按钮');
await pageAgent.execute('填写用户名为张三');`}
/>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">事件监听</h2>
<CodeEditor code={`// TODO`} />
</div>
)
}

62
pages/docs/integration/best-practices/page.tsx Normal file
View File

@@ -0,0 +1,62 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
export default function BestPractices() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">最佳实践</h1>
<BetaNotice />
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
使用 page-agent 的最佳实践和常见问题解决方案。
</p>
<h2 className="text-2xl font-bold mb-3">性能优化</h2>
<div className="space-y-4 mb-6">
<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">
⚡ 减少 API 调用
</h3>
<p className="text-foreground/80 mb-3">合并多个操作指令，减少与 AI 模型的交互次数。</p>
<CodeEditor
code={`// 推荐：合并操作
await pageAgent.execute('填写表单：姓名张三，邮箱test@example.com，然后提交');
// 不推荐：分别操作
await pageAgent.execute('填写姓名张三');
await pageAgent.execute('填写邮箱test@example.com');
await pageAgent.execute('点击提交按钮');`}
/>
</div>
<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">
🎯 精确的元素描述
</h3>
<p className="text-foreground/80">使用具体、明确的元素描述，提高操作成功率。</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">安全建议</h2>
<div className="space-y-3 mb-6">
<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border-l-4 border-red-500">
<h3 className="font-semibold mb-1 text-red-900 dark:text-red-300">重要操作保护</h3>
<p className="text-foreground/80">对删除、支付等敏感操作设置黑名单保护。</p>
</div>
<div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-500">
<h3 className="font-semibold mb-1 text-yellow-900 dark:text-yellow-300">数据脱敏</h3>
<p className="text-foreground/80">启用数据脱敏功能，保护用户隐私信息。</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">调试技巧</h2>
<CodeEditor code={`// TODO`} />
</div>
)
}

41
pages/docs/integration/cdn-setup/page.tsx Normal file
View File

@@ -0,0 +1,41 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
export default function CdnSetup() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">CDN 引入</h1>
<BetaNotice />
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
通过 CDN 快速集成 page-agent，无需复杂的构建配置。
</p>
<h2 className="text-2xl font-bold mb-3">快速开始</h2>
<CodeEditor
className="mb-8"
code={`<!-- 在 HTML 中引入 -->
// @todo find a cdn
<script src="https://some-cdn.com/page-agent.umd.js"></script>
<script>
const pageAgent = new PageAgent()
pageAgent.panel.show()
</script>`}
/>
<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ 注意事项
</h3>
<ul className="text-foreground/80 space-y-1">
<li>• 生产环境建议使用固定版本号</li>
<li>• 确保 HTTPS 环境下使用</li>
<li>• 配置 CSP 策略允许脚本执行</li>
</ul>
</div>
</div>
)
}

38
pages/docs/integration/configuration/page.tsx Normal file
View File

@@ -0,0 +1,38 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
export default function Configuration() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">配置选项</h1>
<BetaNotice />
<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
详细的配置选项说明，帮助你定制 page-agent 的行为。
</p>
<h2 className="text-2xl font-bold mb-3">基础配置</h2>
<CodeEditor className="mb-8" code={`// TODO`} />
<h2 className="text-2xl font-bold mb-3">高级选项</h2>
<div className="space-y-4">
<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">
🎯 元素选择策略
</h3>
<p className="text-foreground/80">配置 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="text-foreground/80">设置操作超时时间，避免长时间等待。</p>
</div>
</div>
</div>
)
}

113
pages/docs/integration/third-party-agent/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
import CodeEditor from '@pages/components/CodeEditor'
export default function ThirdPartyAgentPage() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">接入第三方 Agent</h1>
<p className="mb-6 leading-relaxed">
将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。
</p>
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-6">
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">💡 核心价值</h3>
<p className="text-blue-800 dark:text-blue-200">
让你的 Agent 不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。
</p>
</div>
<h2 className="text-2xl font-bold mb-4">集成方式</h2>
<div className="space-y-4 mb-6">
<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">
1. Function Calling
</h3>
<CodeEditor
code={`// 定义工具
const pageAgentTool = {
name: "page_agent",
description: "执行网页操作",
parameters: {
type: "object",
properties: {
instruction: { type: "string", description: "操作指令" }
},
required: ["instruction"]
},
execute: async (params) => {
const result = await pageAgent.execute(params.instruction)
return { success: result.success, message: result.message }
}
}
// 注册到你的 agent 中`}
language="javascript"
/>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">应用场景</h2>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
<h4 className="font-semibold mb-2">🤖 智能客服系统</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
客服机器人帮用户直接操作系统，如"帮我提交工单"
</p>
</div>
<div className="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
<h4 className="font-semibold mb-2">📋 业务流程助手</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
引导新员工完成复杂流程，如"完成客户入职"
</p>
</div>
<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
<h4 className="font-semibold mb-2">🎯 个人效率助手</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
跨网站帮你完成任务，如"预订会议室"
</p>
</div>
<div className="bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-800 dark:to-gray-700 p-4 rounded-lg">
<h4 className="font-semibold mb-2">🔧 运维自动化</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
通过自然语言操作管理后台，如"重启服务器"
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
<div className="space-y-4 mb-6">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2">错误处理</h3>
<CodeEditor code={`// @TODO`} language="javascript" />
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2">权限控制</h3>
<CodeEditor code={`// @TODO`} language="javascript" />
</div>
</div>
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-100 mb-2">
⚠️ 注意事项
</h3>
<ul className="text-yellow-800 dark:text-yellow-200 space-y-1 text-sm">
<li>• 确保目标网站允许自动化操作</li>
<li>• 实现适当的频率限制</li>
<li>• 敏感操作建议要求人工确认</li>
</ul>
</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">通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。</p>
<a
href="/docs/integration/configuration"
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
>
查看配置选项 →
</a>
</div>
</div>
)
}