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

feat: i18n for website

Browse Source
This commit is contained in:
Simon
2025-10-22 22:35:25 +08:00
parent fedeb57f48
commit cd84269427
34 changed files with 1753 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/docs/features/custom-tools/page.tsx
View File

@@ -1,21 +1,23 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
import { useTranslation } from 'react-i18next'
export default function CustomTools() {
const { t } = useTranslation('docs')
return (
<div>
<h1 className="text-4xl font-bold mb-6">自定义工具</h1>
<h1 className="text-4xl font-bold mb-6">{t('custom_tools.title')}</h1>
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI
安全调用你的业务逻辑。
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
{t('custom_tools.subtitle')}
</p>
<div className="space-y-8">
<section>
<h2 className="text-2xl font-bold mb-4">工具注册</h2>
<p className="text-foreground/80 mb-4">
每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.registration')}</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.registration_desc')}
</p>
<CodeEditor
@@ -49,13 +51,12 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">页面过滤器</h2>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.page_filter')}</h2>
<BetaNotice />
<p className="text-foreground/80 mb-4">
通过 <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">pageFilter</code>{' '}
属性控制工具在哪些页面可见，提升安全性和用户体验。
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.page_filter_desc')}
</p>
<CodeEditor
@@ -82,16 +83,16 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.best_practices')}</h2>
<div className="space-y-4">
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-2">
⚡ 性能优化
{t('custom_tools.bp_performance')}
</h3>
<ul className="text-foreground/80 space-y-1 text-sm">
<li>• 使用 pageFilter 减少不必要的工具加载</li>
<li>• 在 execute 函数中实现适当的缓存机制</li>
<li>• 避免在工具中执行耗时的同步操作</li>
<ul className="text-gray-600 dark:text-gray-300 space-y-1 text-sm">
<li>{t('custom_tools.bp_1')}</li>
<li>{t('custom_tools.bp_2')}</li>
<li>{t('custom_tools.bp_3')}</li>
</ul>
</div>
</div>

10
pages/docs/features/data-masking/page.tsx
View File

@@ -8,7 +8,7 @@ export default function DataMasking() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
保护敏感数据，确保 AI 处理过程中的数据安全。
</p>
@@ -19,14 +19,18 @@ export default function DataMasking() {
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
🔒 自动脱敏
</h3>
<p className="text-foreground/80">自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。</p>
<p className="text-gray-600 dark:text-gray-300">
自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。
</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="text-foreground/80">支持自定义脱敏规则，适应不同业务场景的数据保护需求。</p>
<p className="text-gray-600 dark:text-gray-300">
支持自定义脱敏规则，适应不同业务场景的数据保护需求。
</p>
</div>
</div>

26
pages/docs/features/knowledge-injection/page.tsx
View File

@@ -8,7 +8,7 @@ export default function KnowledgeInjection() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。
</p>
@@ -20,8 +20,10 @@ export default function KnowledgeInjection() {
<h3 className="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-300">
🎯 系统级指令
</h3>
<p className="text-foreground/80 mb-4">为 AI 设定全局行为准则和工作风格。</p>
<ul className="list-disc list-inside space-y-2 text-foreground/70">
<p className="text-gray-600 dark:text-gray-300 mb-4">
为 AI 设定全局行为准则和工作风格。
</p>
<ul className="list-disc list-inside space-y-2 text-gray-500 dark:text-gray-400">
<li>定义 AI 的工作风格和交互方式</li>
<li>设置安全边界和操作限制</li>
<li>指定错误处理和异常情况的应对策略</li>
@@ -57,13 +59,13 @@ const pageAgent = new PageAgent({
<h3 className="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-300">
<EFBFBD> 业务领域知识
</h3>
<p className="text-foreground/80 mb-4">
<p className="text-gray-600 dark:text-gray-300 mb-4">
注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。
</p>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold text-blue-800 dark:text-blue-200">产品知识</h4>
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>产品功能和特性介绍</li>
<li>用户角色和权限体系</li>
<li>业务规则和约束条件</li>
@@ -71,7 +73,7 @@ const pageAgent = new PageAgent({
</div>
<div className="space-y-2">
<h4 className="font-semibold text-blue-800 dark:text-blue-200">操作指南</h4>
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>标准操作流程定义</li>
<li>异常情况处理方案</li>
<li>术语和概念解释</li>
@@ -111,21 +113,25 @@ pageAgent.knowledge.setAppKnowledge(\`
<h3 className="text-xl font-semibold mb-3 text-green-900 dark:text-green-300">
📄 页面级精准指导
</h3>
<p className="text-foreground/80 mb-4">
<p className="text-gray-600 dark:text-gray-300 mb-4">
为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。
</p>
<div className="grid md:grid-cols-3 gap-4">
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">元素标注</h4>
<p className="text-sm text-foreground/70">为页面元素添加语义化描述</p>
<p className="text-sm text-gray-500 dark:text-gray-400">为页面元素添加语义化描述</p>
</div>
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">交互说明</h4>
<p className="text-sm text-foreground/70">定义元素的交互行为和预期结果</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
定义元素的交互行为和预期结果
</p>
</div>
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">页面逻辑</h4>
<p className="text-sm text-foreground/70">说明页面的业务逻辑和状态变化</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
说明页面的业务逻辑和状态变化
</p>
</div>
</div>
</div>

78
pages/docs/features/model-integration/page.tsx
View File

@@ -1,69 +1,78 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
import { useTranslation } from 'react-i18next'
export default function ModelIntegration() {
const { t } = useTranslation('docs')
return (
<div>
<h1 className="text-4xl font-bold mb-6">模型接入</h1>
<h1 className="text-4xl font-bold mb-6">{t('model_integration.title')}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
当前支持符合 OpenAI 接口规范且支持 tool call 的模型，包括公有云服务和私有部署方案。
{t('model_integration.subtitle')}
</p>
<h2 className="text-2xl font-bold mb-3">推荐模型</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.recommended')}</h2>
<div className="grid md:grid-cols-3 gap-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">
⚡ gpt-4.1-mini
{t('model_integration.model_gpt4_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">评估基准 ✅</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 性价比高</li>
<li>• 速度快</li>
<li>• 成功率高</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gpt4_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_gpt4_1')}</li>
<li>{t('model_integration.model_gpt4_2')}</li>
<li>{t('model_integration.model_gpt4_3')}</li>
</ul>
</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">
💰 DeepSeek-3.2
{t('model_integration.model_deepseek_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">经济实惠</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 价格远低于同等级其他模型</li>
<li>• ToolCall 有出错率，通常能够自动修复</li>
<li>• 本网站提供的免费试用为 DeepSeek</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_deepseek_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_deepseek_1')}</li>
<li>{t('model_integration.model_deepseek_2')}</li>
<li>{t('model_integration.model_deepseek_3')}</li>
</ul>
</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">
🛡️ qwen3
{t('model_integration.model_qwen_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">安全合规</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 可控、效果尚可，价格合理</li>
<li>• ToolCall 有出错率，通常能够自动修复</li>
<li>
• 适合能给出<strong>详细步骤</strong>的场景
</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_qwen_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_qwen_1')}</li>
<li>{t('model_integration.model_qwen_2')}</li>
<li>{t('model_integration.model_qwen_3')}</li>
</ul>
</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">
⚡ gemini-2.5-flash
{t('model_integration.model_gemini_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">极其高效，成功率高，价格合理</p>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gemini_badge')}
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">可用模型</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.available')}</h2>
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
✅ 已验证可用
{t('model_integration.available_verified')}
</h3>
<div className="flex flex-wrap gap-2">
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
@@ -87,20 +96,17 @@ export default function ModelIntegration() {
</div>
</div>
<h2 className="text-2xl font-bold mb-3">提示</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.tips')}</h2>
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
<ul className="text-sm text-foreground/80 space-y-1 list-disc pl-5">
<li>reasoning 模型（如 GPT-5），速度偏慢，没有必要</li>
<li>
不保证 json schema 的模型（openAI 以外的几乎所有模型），tool call
有概率出错，通常能自动修复，建议 temperature 设置高一些
</li>
<li>小模型、nano 模型，效果不佳</li>
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-disc pl-5">
<li>{t('model_integration.tip_1')}</li>
<li>{t('model_integration.tip_2')}</li>
<li>{t('model_integration.tip_3')}</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">配置方式</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.configuration')}</h2>
<CodeEditor
code={`

22
pages/docs/features/security-permissions/page.tsx
View File

@@ -7,7 +7,7 @@ export default function SecurityPermissions() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
</p>
@@ -19,13 +19,15 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 操作黑名单
</h3>
<p className="text-foreground/80">禁止 AI 操作敏感元素，如删除按钮、支付按钮等。</p>
<p className="text-gray-600 dark:text-gray-300">
禁止 AI 操作敏感元素，如删除按钮、支付按钮等。
</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
✅ 操作白名单
</h3>
<p className="text-foreground/80">明确定义 AI 可以操作的元素范围。</p>
<p className="text-gray-600 dark:text-gray-300">明确定义 AI 可以操作的元素范围。</p>
</div>
</div>
</section>
@@ -37,13 +39,13 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 URL 黑名单
</h3>
<p className="text-foreground/80">禁止 AI 访问敏感页面和危险链接。</p>
<p className="text-gray-600 dark:text-gray-300">禁止 AI 访问敏感页面和危险链接。</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
✅ URL 白名单
</h3>
<p className="text-foreground/80">限制 AI 只能访问预定义的安全页面。</p>
<p className="text-gray-600 dark:text-gray-300">限制 AI 只能访问预定义的安全页面。</p>
</div>
</div>
</section>
@@ -54,17 +56,21 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ 高危操作控制
</h3>
<p className="text-foreground/80 mb-3">
<p className="text-gray-600 dark:text-gray-300 mb-3">
在 AI 指令中明确列举高危操作，通过两种策略进行控制：
</p>
<div className="space-y-2">
<div className="pl-3 border-l-2 border-red-400">
<p className="font-medium text-red-700 dark:text-red-300">完全禁止操作</p>
<p className="text-sm text-foreground/70">对极高风险操作明确禁止执行</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
对极高风险操作明确禁止执行
</p>
</div>
<div className="pl-3 border-l-2 border-orange-400">
<p className="font-medium text-orange-700 dark:text-orange-300">需用户确认操作</p>
<p className="text-sm text-foreground/70">对中等风险操作要求用户明确同意</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
对中等风险操作要求用户明确同意
</p>
</div>
</div>
</div>

12
pages/docs/integration/best-practices/page.tsx
View File

@@ -19,7 +19,9 @@ export default function BestPractices() {
<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>
<p className="text-gray-600 dark:text-gray-300 mb-3">
合并多个操作指令，减少与 AI 模型的交互次数。
</p>
<CodeEditor
code={`// 推荐：合并操作
@@ -36,7 +38,9 @@ await pageAgent.execute('点击提交按钮');`}
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
🎯 精确的元素描述
</h3>
<p className="text-foreground/80">使用具体、明确的元素描述，提高操作成功率。</p>
<p className="text-gray-600 dark:text-gray-300">
使用具体、明确的元素描述，提高操作成功率。
</p>
</div>
</div>
@@ -45,12 +49,12 @@ await pageAgent.execute('点击提交按钮');`}
<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>
<p className="text-gray-600 dark:text-gray-300">对删除、支付等敏感操作设置黑名单保护。</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>
<p className="text-gray-600 dark:text-gray-300">启用数据脱敏功能，保护用户隐私信息。</p>
</div>
</div>

2
pages/docs/integration/cdn-setup/page.tsx
View File

@@ -27,7 +27,7 @@ export default function CdnSetup() {
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ 注意事项
</h3>
<ul className="text-foreground/80 space-y-1">
<ul className="text-gray-600 dark:text-gray-300 space-y-1">
<li>• 生产环境建议使用固定版本号</li>
<li>• 确保 HTTPS 环境下使用</li>
<li>• 配置 CSP 策略允许脚本执行</li>

22
pages/docs/integration/third-party-agent/page.tsx
View File

@@ -4,14 +4,14 @@ export default function ThirdPartyAgentPage() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">接入第三方 Agent</h1>
<p className="mb-6 leading-relaxed">
<p className="mb-6 leading-relaxed text-gray-600 dark:text-gray-300">
将 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>
@@ -49,25 +49,25 @@ const pageAgentTool = {
<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>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">🤖 智能客服系统</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>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">📋 业务流程助手</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>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">🎯 个人效率助手</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>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">🔧 运维自动化</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
通过自然语言操作管理后台，如"重启服务器"
</p>
@@ -77,12 +77,12 @@ const pageAgentTool = {
<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>
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">错误处理</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>
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">权限控制</h3>
<CodeEditor code={`// @TODO`} language="javascript" />
</div>
</div>
@@ -99,8 +99,10 @@ const pageAgentTool = {
</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>
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">🎉 开始集成</h3>
<p className="mb-3 text-gray-700 dark:text-gray-300">
通过这种方式，你的 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"

120
pages/docs/introduction/limitations/page.tsx
View File

@@ -1,153 +1,141 @@
import { useTranslation } from 'react-i18next'
export default function LimitationsPage() {
const { t } = useTranslation('docs')
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>
<h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
{t('limitations.title')}
</h1>
<p className="text-xl text-gray-600 dark:text-gray-300">{t('limitations.subtitle')}</p>
</div>
<div className="prose prose-lg dark:prose-invert max-w-none">
<h2 className="text-2xl font-bold mb-3">页面支持限制</h2>
<h2 className="text-2xl font-bold mb-3">{t('limitations.page_support')}</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>
<h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">
{t('limitations.spa_limit_title')}
</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>
<li>{t('limitations.spa_limit_1')}</li>
<li>{t('limitations.spa_limit_2')}</li>
<li>{t('limitations.spa_limit_3')}</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">交互行为限制</h2>
<h2 className="text-2xl font-bold mb-3">{t('limitations.interaction_limits')}</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
<h3 className="font-semibold mb-4">支持的操作</h3>
<h3 className="font-semibold mb-4">{t('limitations.supported_ops')}</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>
<span>{t('limitations.op_click')}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>文本输入</span>
<span>{t('limitations.op_input')}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>页面滚动</span>
<span>{t('limitations.op_scroll')}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>表单提交</span>
<span>{t('limitations.op_submit')}</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>
<span>{t('limitations.op_select')}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>焦点切换</span>
<span>{t('limitations.op_focus')}</span>
</div>
</div>
</div>
<h3 className="font-semibold mb-4">不支持的操作</h3>
<h3 className="font-semibold mb-4">{t('limitations.unsupported_ops')}</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>
<span>{t('limitations.op_hover')}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>拖拽操作</span>
<span>{t('limitations.op_drag')}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>右键菜单</span>
<span>{t('limitations.op_context')}</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>
<span>{t('limitations.op_draw')}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>键盘快捷键</span>
<span>{t('limitations.op_keyboard')}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>基于点击区域或鼠标位置的控制</span>
<span>{t('limitations.op_position')}</span>
</div>
</div>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">网页理解限制</h2>
<h2 className="text-2xl font-bold mb-3">{t('limitations.understanding_limits')}</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>
<h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">
{t('limitations.no_vision_title')}
</h3>
<p className="text-red-700 dark:text-red-300 mb-3">{t('limitations.no_vision_desc')}</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>
<li>{t('limitations.no_vision_1')}</li>
<li>{t('limitations.no_vision_2')}</li>
<li>{t('limitations.no_vision_3')}</li>
<li>{t('limitations.no_vision_4')}</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">被操作网站要求</h2>
<h2 className="text-2xl font-bold mb-3">{t('limitations.website_requirements')}</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>
<h3 className="font-semibold mb-2">{t('limitations.req_semantic_title')}</h3>
<p className="text-gray-600 dark:text-gray-300">
所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何
accessibility 特性，可能影响 AI 的理解准确性。
{t('limitations.req_semantic_desc')}
</p>
</div>
<div>
<h3 className="font-semibold mb-2">UI/UX</h3>
<p className="text-gray-600 dark:text-gray-300">
反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响
AI 的理解和操作。
</p>
<h3 className="font-semibold mb-2">{t('limitations.req_ux_title')}</h3>
<p className="text-gray-600 dark:text-gray-300">{t('limitations.req_ux_desc')}</p>
</div>
<div>
<h3 className="font-semibold mb-2">环境要求</h3>
<p className="text-gray-600 dark:text-gray-300">modern browser</p>
<h3 className="font-semibold mb-2">{t('limitations.req_env_title')}</h3>
<p className="text-gray-600 dark:text-gray-300">{t('limitations.req_env_desc')}</p>
</div>
</div>
</div>
<h2>未来规划</h2>
<h2>{t('limitations.future')}</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>
<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">
{t('limitations.future_title')}
</h3>
<ul className="text-green-700 dark:text-green-300 space-y-1">
<li>• 多页面接力操作能力</li>
<li>• 更丰富的鼠标交互支持</li>
<li>• 基础的视觉理解能力</li>
<li>• 更智能的错误恢复机制</li>
<li>{t('limitations.future_1')}</li>
<li>{t('limitations.future_2')}</li>
<li>{t('limitations.future_3')}</li>
<li>{t('limitations.future_4')}</li>
</ul>
</div>
</div>

171
pages/docs/introduction/overview/page.tsx
View File

@@ -1,75 +1,117 @@
import { useTranslation } from 'react-i18next'
export default function Overview() {
const { t } = useTranslation('docs')
return (
<article>
{/* 头图 */}
<figure className="mb-8 rounded-xl overflow-hidden">
<img
src="https://img.alicdn.com/imgextra/i1/O1CN01RY0Wvh26ATVeDIX7v_!!6000000007621-0-tps-1672-512.jpg"
alt="page-agent 概览图示"
alt="page-agent"
className="w-full h-64 object-cover"
/>
</figure>
<h1 className="text-4xl font-bold mb-6">Overview</h1>
<div className="mb-8">
<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('overview.subtitle')}
</p>
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
page-agent 是一个完全基于Web技术的 UI Agent，简单引入，让你的网站拥有 AI 操作员。
</p>
{/* Status Badges */}
<div className="flex flex-wrap gap-2 items-center">
<a
href="https://www.npmjs.com/package/page-agent"
target="_blank"
rel="noopener noreferrer"
>
<img src="https://badge.fury.io/js/page-agent.svg" alt="npm version" />
</a>
<a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="MIT License" />
</a>
<a href="http://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
<img
src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg"
alt="TypeScript"
/>
</a>
<a
href="https://www.npmjs.com/package/page-agent"
target="_blank"
rel="noopener noreferrer"
>
<img src="https://img.shields.io/npm/dt/page-agent.svg" alt="Downloads" />
</a>
<a
href="https://bundlephobia.com/package/page-agent"
target="_blank"
rel="noopener noreferrer"
>
<img src="https://img.shields.io/bundlephobia/minzip/page-agent" alt="Bundle Size" />
</a>
<a href="https://github.com/alibaba/page-agent" target="_blank" rel="noopener noreferrer">
<img
src="https://img.shields.io/github/stars/alibaba/page-agent.svg"
alt="GitHub stars"
/>
</a>
</div>
</div>
<section>
<h2 className="text-2xl font-bold mb-4">什么是 page-agent？</h2>
<h2 className="text-2xl font-bold mb-4">{t('overview.what_is')}</h2>
<p className="text-foreground/80 mb-8 leading-relaxed ">
page-agent 是一个<strong>页面内嵌式 UI Agent</strong>。
与传统的浏览器自动化工具不同，page-agent 面向<strong>网站开发者</strong>
，而非爬虫或通用Agent开发者，将 Agent 集成到你的网站中，
让用户可以通过自然语言与页面进行交互。
<p className="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed ">
{t('overview.what_is_desc')}
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">核心特性</h2>
<h2 className="text-2xl font-bold mb-3">{t('overview.features_title')}</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 理解
{t('overview.feature_dom.title')}
</h3>
<p className="">基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。</p>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_dom.desc')}</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">
🔒 安全可控
{t('overview.feature_secure.title')}
</h3>
<p className="">
支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。
</p>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_secure.desc')}</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">
⚡ 零后端部署
{t('overview.feature_backend.title')}
</h3>
<p className="">CDN 或 NPM 引入，自定义 LLM 接入点。</p>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_backend.desc')}</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">
♿ 普惠智能
{t('overview.feature_accessible.title')}
</h3>
<p className="">为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。</p>
<p className="text-gray-700 dark:text-gray-300">
{t('overview.feature_accessible.desc')}
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">与 browser-use 的区别</h2>
<h2 className="text-2xl font-bold mb-4">{t('overview.vs_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">
特性
{t('overview.table_feature')}
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
page-agent
@@ -82,103 +124,88 @@ export default function Overview() {
<tbody>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
部署方式
{t('overview.table_deployment')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
页面内嵌组件
{t('overview.table_deployment_pa')}
</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">
整个浏览器
{t('overview.table_deployment_bu')}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
目标用户
{t('overview.table_scope')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
网站开发者
{t('overview.table_scope_pa')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
爬虫/Agent 开发者
{t('overview.table_scope_bu')}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
使用场景
{t('overview.table_user')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
用户体验增强
{t('overview.table_user_pa')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
自动化任务
{t('overview.table_user_bu')}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
{t('overview.table_scenario')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scenario_pa')}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scenario_bu')}
</td>
</tr>
</tbody>
</table>
</div>
<h2 className="text-2xl font-bold mb-4">应用场景</h2>
<h2 className="text-2xl font-bold mb-4">{t('overview.use_cases_title')}</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">
<span className="w-6 h-6 min-w-6 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold text-sm mt-0.5 flex-shrink-0">
1
</span>
<div className="">
<strong>对接答疑机器人：</strong>
把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case1_title')}</strong> {t('overview.use_case1_desc')}
</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">
<span className="w-6 h-6 min-w-6 bg-green-500 text-white rounded-full flex items-center justify-center font-bold text-sm mt-0.5 flex-shrink-0">
2
</span>
<div className="">
<strong>交互升级/智能化改造：</strong>
一行代码，老应用变身Agent，产品专家帮用户操作复杂 B
端软件。降低人工支持成本，提高用户满意度。
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case2_title')}</strong> {t('overview.use_case2_desc')}
</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">
<span className="w-6 h-6 min-w-6 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold text-sm mt-0.5 flex-shrink-0">
3
</span>
<div className="">
<strong>产品教学：</strong>
向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case3_title')}</strong> {t('overview.use_case3_desc')}
</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">
<span className="w-6 h-6 min-w-6 bg-orange-500 text-white rounded-full flex items-center justify-center font-bold text-sm mt-0.5 flex-shrink-0">
4
</span>
<div className="">
<strong>无障碍支持：</strong>
为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case4_title')}</strong> {t('overview.use_case4_desc')}
</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>
)

19
pages/docs/introduction/quick-start/page.tsx
View File

@@ -1,23 +1,26 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
import { useTranslation } from 'react-i18next'
export default function QuickStart() {
const { t } = useTranslation('docs')
return (
<div>
<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
<h1 className="text-4xl font-bold mb-6">{t('quick_start.title')}</h1>
<p className=" mb-6 leading-relaxed">几分钟内完成 page-agent 的集成。</p>
<p className=" mb-6 leading-relaxed">{t('quick_start.subtitle')}</p>
<h2 className="text-2xl font-bold mb-3">安装步骤</h2>
<h2 className="text-2xl font-bold mb-3">{t('quick_start.installation')}</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. 引入方式
{t('quick_start.step1_title')}
</h3>
<div className="space-y-3">
<div>
<p className="text-sm font-medium mb-2">CDN 引入</p>
<p className="text-sm font-medium mb-2">{t('quick_start.step1_cdn')}</p>
<CodeEditor
code={`// 仅供测试使用
<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.2/page-agent.js" crossorigin="true" type="text/javascript"></script>`}
@@ -25,7 +28,7 @@ export default function QuickStart() {
/>
</div>
<div>
<p className="text-sm font-medium mb-2">NPM 安装</p>
<p className="text-sm font-medium mb-2">{t('quick_start.step1_npm')}</p>
<CodeEditor
code={`// npm install page-agent
import PageAgent from 'page-agent'`}
@@ -37,7 +40,7 @@ import PageAgent from 'page-agent'`}
<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. 初始化配置
{t('quick_start.step2_title')}
</h3>
<CodeEditor
code={`// 仅供测试使用，生产环境需要配置 LLM 接入点，本工具不提供 LLM 服务
@@ -60,7 +63,7 @@ const agent = new PageAgent({
<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. 开始使用
{t('quick_start.step3_title')}
</h3>
<CodeEditor
code={`// 程序化执行自然语言指令