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

docs: simplify i18n

Browse Source
This commit is contained in:
Simon
2026-01-30 15:13:31 +08:00
parent 97cdb1e1cd
commit 5e936c35d7
14 changed files with 415 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/website/src/pages/docs/features/custom-tools/page.tsx
View File

@@ -4,21 +4,26 @@ import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor'
export default function CustomTools() {
const { t } = useTranslation('docs')
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<div>
<h1 className="text-4xl font-bold mb-6">{t('custom_tools.title')}</h1>
<h1 className="text-4xl font-bold mb-6">{isZh ? '自定义工具' : 'Custom Tools'}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
{t('custom_tools.subtitle')}
{isZh
? '通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI 安全调用你的业务逻辑。'
: 'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.'}
</p>
<div className="space-y-8">
<section>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.registration')}</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '工具注册' : 'Tool Registration'}</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.registration_desc')}
{isZh
? '每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。'
: 'Each custom tool requires four core properties: name, description, input schema, and execute function.'}
</p>
<CodeEditor
@@ -52,12 +57,14 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.page_filter')}</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '页面过滤器' : 'Page Filter'}</h2>
<BetaNotice />
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.page_filter_desc')}
{isZh
? '通过 pageFilter 属性控制工具在哪些页面可见，提升安全性和用户体验。'
: 'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.'}
</p>
<CodeEditor
@@ -84,16 +91,28 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.best_practices')}</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '最佳实践' : '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')}
{isZh ? '⚡ 性能优化' : '⚡ Performance Optimization'}
</h3>
<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>
<li>
{isZh
? '• 使用 pageFilter 减少不必要的工具加载'
: '• Use pageFilter to reduce unnecessary tool loading'}
</li>
<li>
{isZh
? '• 在 execute 函数中实现适当的缓存机制'
: '• Implement appropriate caching in execute functions'}
</li>
<li>
{isZh
? '• 避免在工具中执行耗时的同步操作'
: '• Avoid long-running sync operations in tools'}
</li>
</ul>
</div>
</div>

57
packages/website/src/pages/docs/features/models/page.tsx
View File

@@ -28,19 +28,26 @@ const MODELS = {
}
export default function Models() {
const { t } = useTranslation('docs')
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
const allModels = [...MODELS.recommended, ...MODELS.verified]
return (
<div className="max-w-4xl">
<h1 className="text-4xl font-bold mb-4">{t('models.title')}</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{t('models.subtitle')}</p>
<h1 className="text-4xl font-bold mb-4">{isZh ? '模型' : 'Models'}</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
{isZh
? '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。'
: 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.'}
</p>
{/* Models Section */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-3">{t('models.available')}</h2>
<h2 className="text-2xl font-semibold mb-3">{isZh ? '已测试模型' : 'Tested Models'}</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
{t('models.recommendation_logic')}
{isZh
? '推荐使用 ToolCall 能力强的轻量级模型。'
: 'Recommended: Lightweight models with strong ToolCall capabilities.'}
</p>
<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
<div className="flex flex-wrap gap-2">
@@ -67,41 +74,59 @@ export default function Models() {
{/* Tips Section */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('models.tips')}</h2>
<h2 className="text-2xl font-semibold mb-4">{isZh ? '提示' : 'Tips'}</h2>
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li>{t('models.tip_2')}</li>
<li>{t('models.tip_3')}</li>
<li>
{isZh
? 'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature'
: 'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended'}
</li>
<li>
{isZh
? '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳'
: 'Small models or those unable to handle complex tool definitions typically perform poorly'}
</li>
</ul>
</div>
</section>
{/* Security Section */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('models.security')}</h2>
<h2 className="text-2xl font-semibold mb-4">
{isZh ? '🔐 生产环境鉴权建议' : '🔐 Production Authentication'}
</h2>
<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{t('models.security_warning')}
{isZh
? '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码'
: '⚠️ Never commit real LLM API Keys to your frontend code'}
</p>
</div>
<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
{t('models.security_backend_proxy')}
{isZh ? '后端代理转发' : 'Backend Proxy Pattern'}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
{t('models.security_backend_desc')}
{isZh
? '在后端搭建一个 LLM 流量转发接口,该接口使用与你网站上其他接口相同的鉴权方式,例如:'
: 'Set up a backend LLM proxy endpoint that uses the same authentication method as other APIs in your website, such as:'}
</p>
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>{t('models.security_method_1')}</li>
<li>{t('models.security_method_2')}</li>
<li>{t('models.security_method_3')}</li>
<li>{isZh ? '• Session/Cookie 会话认证' : '• Session/Cookie-based authentication'}</li>
<li>
{isZh ? '• OIDC (OpenID Connect) 单点登录' : '• OIDC (OpenID Connect) single sign-on'}
</li>
<li>
{isZh ? '• 临时 Access Key 或 JWT Token' : '• Temporary Access Key or JWT Token'}
</li>
</ul>
</div>
</section>
{/* Configuration Section */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('models.configuration')}</h2>
<h2 className="text-2xl font-semibold mb-4">{isZh ? '配置方式' : 'Configuration'}</h2>
<CodeEditor
code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
const pageAgent = new PageAgent({

11
packages/website/src/pages/docs/integration/best-practices/page.tsx
View File

@@ -1,13 +1,20 @@
import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor'
export default function BestPractices() {
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<div>
<h1 className="text-4xl font-bold mb-6">最佳实践</h1>
<h1 className="text-4xl font-bold mb-6">{isZh ? '最佳实践' : 'Best Practices'}</h1>
<BetaNotice />
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
使用 page-agent 的最佳实践和常见问题解决方案。
{isZh
? '使用 page-agent 的最佳实践和常见问题解决方案。'
: 'Best practices and common solutions for using page-agent.'}
</p>
<CodeEditor code={`// TODO`} />
</div>

83
packages/website/src/pages/docs/integration/third-party-agent/page.tsx
View File

@@ -1,21 +1,34 @@
import { useTranslation } from 'react-i18next'
import CodeEditor from '@/components/CodeEditor'
export default function ThirdPartyAgentPage() {
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<div>
<h1 className="text-4xl font-bold mb-6">接入第三方 Agent</h1>
<h1 className="text-4xl font-bold mb-6">
{isZh ? '接入第三方 Agent' : 'Third-party Agent Integration'}
</h1>
<p className="mb-6 leading-relaxed text-gray-600 dark:text-gray-300">
将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。
{isZh
? '将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。'
: 'Integrate pageAgent as a tool in your support assistant or Agent system, becoming the eyes and hands of your 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>
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
{isZh ? '💡 核心价值' : '💡 Core Value'}
</h3>
<p className="text-blue-800 dark:text-blue-200">
让你的答疑机器人不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。
{isZh
? '让你的答疑机器人不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。'
: 'Transform your support bot from just a "mouth" into a complete intelligent agent with "eyes" and "hands".'}
</p>
</div>
<h2 className="text-2xl font-bold mb-4">集成方式</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '集成方式' : 'Integration Method'}</h2>
<div className="space-y-4 mb-6">
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
@@ -23,14 +36,14 @@ export default function ThirdPartyAgentPage() {
1. Function Calling
</h3>
<CodeEditor
code={`// 定义工具
code={`// ${isZh ? '定义工具' : 'Define tool'}
const pageAgentTool = {
name: "page_agent",
description: "执行网页操作",
description: "${isZh ? '执行网页操作' : 'Execute web page operations'}",
parameters: {
type: "object",
properties: {
instruction: { type: "string", description: "操作指令" }
instruction: { type: "string", description: "${isZh ? '操作指令' : 'Operation instruction'}" }
},
required: ["instruction"]
},
@@ -40,48 +53,74 @@ const pageAgentTool = {
}
}
// 注册到你的 agent 中`}
// ${isZh ? '注册到你的 agent 中' : 'Register to your agent'}`}
language="javascript"
/>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">应用场景</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '应用场景' : 'Use Cases'}</h2>
<div className="grid md:grid-cols-2 gap-4 mb-6">
<div className="bg-linear-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 text-gray-900 dark:text-white">🤖 智能客服系统</h4>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
{isZh ? '🤖 智能客服系统' : '🤖 Smart Customer Service'}
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
客服机器人帮用户直接操作系统，如"帮我提交工单"
{isZh
? '客服机器人帮用户直接操作系统，如"帮我提交工单"'
: 'Support bots directly operate systems for users, e.g., "Help me submit a ticket"'}
</p>
</div>
<div className="bg-linear-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 text-gray-900 dark:text-white">📋 业务流程助手</h4>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
{isZh ? '📋 业务流程助手' : '📋 Business Process Assistant'}
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
引导新员工完成复杂流程，如"完成客户入职"
{isZh
? '引导新员工完成复杂流程，如"完成客户入职"'
: 'Guide new employees through complex processes, e.g., "Complete customer onboarding"'}
</p>
</div>
<div className="bg-linear-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 text-gray-900 dark:text-white">🎯 个人效率助手</h4>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
{isZh ? '🎯 个人效率助手' : '🎯 Personal Productivity Assistant'}
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
跨网站帮你完成任务，如"预订会议室"
{isZh
? '跨网站帮你完成任务，如"预订会议室"'
: 'Complete tasks across websites, e.g., "Book a meeting room"'}
</p>
</div>
<div className="bg-linear-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 text-gray-900 dark:text-white">🔧 运维自动化</h4>
<h4 className="font-semibold mb-2 text-gray-900 dark:text-white">
{isZh ? '🔧 运维自动化' : '🔧 DevOps Automation'}
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
通过自然语言操作管理后台，如"重启服务器"
{isZh
? '通过自然语言操作管理后台，如"重启服务器"'
: 'Operate admin panels via natural language, e.g., "Restart server"'}
</p>
</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">
⚠️ 注意事项
{isZh ? '⚠️ 注意事项' : '⚠️ Notes'}
</h3>
<ul className="text-yellow-800 dark:text-yellow-200 space-y-1 text-sm">
<li>• 确保目标网站允许自动化操作</li>
<li>• 实现适当的频率限制</li>
<li>• 敏感操作建议要求人工确认</li>
<li>
•{' '}
{isZh
? '确保目标网站允许自动化操作'
: 'Ensure target website allows automated operations'}
</li>
<li>• {isZh ? '实现适当的频率限制' : 'Implement appropriate rate limiting'}</li>
<li>
•{' '}
{isZh
? '敏感操作建议要求人工确认'
: 'Recommend human confirmation for sensitive operations'}
</li>
</ul>
</div>
</div>

139
packages/website/src/pages/docs/introduction/limitations/page.tsx
View File

@@ -1,141 +1,194 @@
import { useTranslation } from 'react-i18next'
export default function LimitationsPage() {
const { t } = useTranslation('docs')
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
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">
{t('limitations.title')}
{isZh ? '使用限制' : 'Limitations'}
</h1>
<p className="text-xl text-gray-600 dark:text-gray-300">{t('limitations.subtitle')}</p>
<p className="text-xl text-gray-600 dark:text-gray-300">
{isZh
? '了解 page-agent 当前的功能边界和技术限制'
: "Understand page-agent's current capabilities and technical constraints"}
</p>
</div>
<div className="prose prose-lg dark:prose-invert max-w-none">
<h2 className="text-2xl font-bold mb-3">{t('limitations.page_support')}</h2>
<h2 className="text-2xl font-bold mb-3">
{isZh ? '页面支持限制' : 'Page Support Limitations'}
</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">
{t('limitations.spa_limit_title')}
{isZh ? '单页应用限制' : 'Single Page Application Limits'}
</h3>
<ul className="text-blue-700 dark:text-blue-300 space-y-2">
<li>{t('limitations.spa_limit_1')}</li>
<li>{t('limitations.spa_limit_2')}</li>
<li>{t('limitations.spa_limit_3')}</li>
<li>
{isZh
? '• 仅支持单页应用（SPA）：目前只能在单个页面内进行操作'
: '• SPA only: Currently operates within a single page'}
</li>
<li>
{isZh
? '• 多页接力功能正在设计中：暂时无法跨页面执行连续任务'
: '• Multi-page relay in design: Cannot execute continuous tasks across pages yet'}
</li>
<li>
{isZh
? '• 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent'
: '• Requires integration: Cannot operate on sites without page-agent'}
</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">{t('limitations.interaction_limits')}</h2>
<h2 className="text-2xl font-bold mb-3">
{isZh ? '交互行为限制' : 'Interaction Limitations'}
</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
<h3 className="font-semibold mb-4">{t('limitations.supported_ops')}</h3>
<h3 className="font-semibold mb-4">{isZh ? '支持的操作' : 'Supported Operations'}</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>{t('limitations.op_click')}</span>
<span>{isZh ? '点击操作' : 'Click'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>{t('limitations.op_input')}</span>
<span>{isZh ? '文本输入' : 'Text input'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>{t('limitations.op_scroll')}</span>
<span>{isZh ? '页面滚动' : 'Scroll'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>{t('limitations.op_submit')}</span>
<span>{isZh ? '表单提交' : 'Form 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>{t('limitations.op_select')}</span>
<span>{isZh ? '选择操作' : 'Select'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>{t('limitations.op_focus')}</span>
<span>{isZh ? '焦点切换' : 'Focus'}</span>
</div>
</div>
</div>
<h3 className="font-semibold mb-4">{t('limitations.unsupported_ops')}</h3>
<h3 className="font-semibold mb-4">{isZh ? '不支持的操作' : 'Unsupported Operations'}</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>{t('limitations.op_hover')}</span>
<span>{isZh ? '鼠标悬停（hover）' : 'Mouse hover'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>{t('limitations.op_drag')}</span>
<span>{isZh ? '拖拽操作' : 'Drag & drop'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>{t('limitations.op_context')}</span>
<span>{isZh ? '右键菜单' : 'Right-click menu'}</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>{t('limitations.op_draw')}</span>
<span>{isZh ? '图形绘制' : 'Drawing'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>{t('limitations.op_keyboard')}</span>
<span>{isZh ? '键盘快捷键' : 'Keyboard shortcuts'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</span>
<span>{t('limitations.op_position')}</span>
<span>{isZh ? '基于点击区域或鼠标位置的控制' : 'Position-based control'}</span>
</div>
</div>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">{t('limitations.understanding_limits')}</h2>
<h2 className="text-2xl font-bold mb-3">
{isZh ? '网页理解限制' : 'Understanding Limitations'}
</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">
{t('limitations.no_vision_title')}
{isZh ? '无视觉能力' : 'No Visual Recognition'}
</h3>
<p className="text-red-700 dark:text-red-300 mb-3">{t('limitations.no_vision_desc')}</p>
<p className="text-red-700 dark:text-red-300 mb-3">
{isZh
? 'page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力，无法理解以下内容：'
: 'page-agent operates based on DOM structure with no visual recognition. Cannot understand:'}
</p>
<ul className="text-red-700 dark:text-red-300 space-y-1">
<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>
<li>
{isZh
? '• 图片内容：无法识别图片中的文字、图标或视觉元素'
: '• Image content: Cannot recognize text, icons, or visual elements in images'}
</li>
<li>
{isZh
? '• Canvas 画布：无法理解 Canvas 中绘制的图形和内容'
: '• Canvas: Cannot understand graphics drawn on Canvas'}
</li>
<li>
{isZh
? '• WebGL 3D 内容：无法操作 3D 场景中的元素'
: '• WebGL 3D: Cannot operate elements in 3D scenes'}
</li>
<li>
{isZh
? '• SVG 图形：无法理解 SVG 中的视觉内容和路径'
: '• SVG graphics: Cannot understand visual content and paths in SVG'}
</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">{t('limitations.website_requirements')}</h2>
<h2 className="text-2xl font-bold mb-3">
{isZh ? '被操作网站要求' : '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">{t('limitations.req_semantic_title')}</h3>
<h3 className="font-semibold mb-2">
{isZh ? '语义化和易用性' : 'Semantic & Usability'}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{t('limitations.req_semantic_desc')}
{isZh
? '所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 accessibility 特性，可能影响 AI 的理解准确性。'
: 'All operations rely on semantic tags and attributes. Poor semantic structure or lack of accessibility features may affect AI understanding accuracy.'}
</p>
</div>
<div>
<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>
<h3 className="font-semibold mb-2">{isZh ? 'UI/UX' : 'UI/UX'}</h3>
<p className="text-gray-600 dark:text-gray-300">
{isZh
? '反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 AI 的理解和操作。'
: 'Counter-intuitive interaction rules, visual-only operation hints, complex mouse interactions, or rapidly appearing/disappearing elements can affect AI understanding and operation.'}
</p>
</div>
<div>
<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>
<h3 className="font-semibold mb-2">{isZh ? '环境要求' : 'Environment'}</h3>
<p className="text-gray-600 dark:text-gray-300">modern browser</p>
</div>
</div>
</div>
<h2>{t('limitations.future')}</h2>
<h2>{isZh ? '未来规划' : 'Future Plans'}</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">
{t('limitations.future_title')}
{isZh ? '即将支持' : 'Coming Soon'}
</h3>
<ul className="text-green-700 dark:text-green-300 space-y-1">
<li>{t('limitations.future_1')}</li>
<li>{t('limitations.future_2')}</li>
<li>{t('limitations.future_3')}</li>
<li>{t('limitations.future_4')}</li>
<li>{isZh ? '• 多页面接力操作能力' : '• Multi-page relay capabilities'}</li>
<li>{isZh ? '• 更丰富的鼠标交互支持' : '• Richer mouse interaction support'}</li>
<li>{isZh ? '• 基础的视觉理解能力' : '• Basic visual understanding'}</li>
<li>{isZh ? '• 更智能的错误恢复机制' : '• Smarter error recovery'}</li>
</ul>
</div>
</div>

110
packages/website/src/pages/docs/introduction/overview/page.tsx
View File

@@ -1,23 +1,17 @@
import { useTranslation } from 'react-i18next'
export default function Overview() {
const { t } = useTranslation('docs')
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<article>
{/* 头图 */}
{/* <figure className="mb-8 rounded-xl overflow-hidden">
<img
src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp"
alt="page-agent"
className="w-full h-64 object-cover"
/>
</figure> */}
<div className="mb-8">
<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>
<h1 className="text-4xl font-bold mb-4">Overview</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
{t('overview.subtitle')}
{isZh
? 'page-agent 是一个完全基于 Web 技术的 GUI Agent，简单几步，让你的网站拥有 AI 操作员。'
: 'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.'}
</p>
{/* Status Badges */}
@@ -55,56 +49,76 @@ export default function Overview() {
</div>
<section>
<h2 className="text-2xl font-bold mb-4">{t('overview.what_is')}</h2>
<h2 className="text-2xl font-bold mb-4">
{isZh ? '什么是 page-agent？' : 'What is page-agent?'}
</h2>
<p className="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed ">
{t('overview.what_is_desc')}
{isZh
? 'page-agent 是一个页面内嵌式 GUI Agent。与传统的浏览器自动化工具不同，page-agent 面向网站开发者，而非爬虫或Agent客户端开发者；将 Agent 集成到你的网站中，让用户可以通过自然语言与页面进行交互。'
: 'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.'}
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">{t('overview.features_title')}</h2>
<h2 className="text-2xl font-bold mb-3">{isZh ? '核心特性' : 'Core Features'}</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">
{t('overview.feature_dom.title')}
{isZh ? '🧠 智能 DOM 理解' : '🧠 Smart DOM Analysis'}
</h3>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_dom.desc')}</p>
<p className="text-gray-700 dark:text-gray-300">
{isZh
? '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。'
: 'DOM-based analysis with high-intensity dehydration. No visual recognition needed. Pure text for fast and precise operations.'}
</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')}
{isZh ? '🔒 安全可控' : '🔒 Secure & Controllable'}
</h3>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_secure.desc')}</p>
<p className="text-gray-700 dark:text-gray-300">
{isZh
? '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。'
: 'Supports operation allowlists, data masking protection. Inject custom knowledge to make AI work by your rules.'}
</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')}
{isZh ? '⚡ 零后端部署' : '⚡ Zero Backend'}
</h3>
<p className="text-gray-700 dark:text-gray-300">{t('overview.feature_backend.desc')}</p>
<p className="text-gray-700 dark:text-gray-300">
{isZh
? 'CDN 或 NPM 引入，自定义 LLM 接入点。'
: 'CDN or NPM import with custom LLM endpoints.'}
</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')}
{isZh ? '♿ 普惠智能' : '♿ Accessible Intelligence'}
</h3>
<p className="text-gray-700 dark:text-gray-300">
{t('overview.feature_accessible.desc')}
{isZh
? '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。'
: 'Provides natural language interface for complex B2B systems and admin panels. Makes software easy for everyone.'}
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-4">{t('overview.vs_browser_use')}</h2>
<h2 className="text-2xl font-bold mb-4">
{isZh ? '与 browser-use 的区别' : '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')}
{isZh ? '特性' : 'Feature'}
</th>
<th className="border border-gray-300 dark:border-gray-600 px-4 py-3 text-left">
page-agent
@@ -117,53 +131,53 @@ 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')}
{isZh ? '部署方式' : 'Deployment'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_deployment_pa')}
{isZh ? '页面内嵌组件' : 'Embedded component'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_deployment_bu')}
{isZh ? '外部工具' : 'External tool'}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
{t('overview.table_scope')}
{isZh ? '操作范围' : 'Scope'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scope_pa')}
{isZh ? '当前页面' : 'Current page'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scope_bu')}
{isZh ? '整个浏览器' : 'Entire browser'}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
{t('overview.table_user')}
{isZh ? '目标用户' : 'Target Users'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_user_pa')}
{isZh ? '网站开发者' : 'Web developers'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_user_bu')}
{isZh ? '爬虫/Agent 开发者' : 'Scraper/Agent developers'}
</td>
</tr>
<tr>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3 font-medium">
{t('overview.table_scenario')}
{isZh ? '使用场景' : 'Use Case'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scenario_pa')}
{isZh ? '用户体验增强' : 'UX enhancement'}
</td>
<td className="border border-gray-300 dark:border-gray-600 px-4 py-3">
{t('overview.table_scenario_bu')}
{isZh ? '自动化任务' : 'Automation tasks'}
</td>
</tr>
</tbody>
</table>
</div>
<h2 className="text-2xl font-bold mb-4">{t('overview.use_cases_title')}</h2>
<h2 className="text-2xl font-bold mb-4">{isZh ? '应用场景' : 'Use Cases'}</h2>
<ul className="space-y-4 mb-8">
<li className="flex items-start space-x-3">
@@ -171,7 +185,10 @@ export default function Overview() {
1
</span>
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case1_title')}</strong> {t('overview.use_case1_desc')}
<strong>{isZh ? '对接答疑机器人：' : 'Connect Support Bots:'}</strong>{' '}
{isZh
? '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。'
: "Turn your support assistant into a full agent. Customer service bots no longer just say 'Please click the settings button then click...'—they operate for users directly."}
</div>
</li>
<li className="flex items-start space-x-3">
@@ -179,7 +196,10 @@ export default function Overview() {
2
</span>
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case2_title')}</strong> {t('overview.use_case2_desc')}
<strong>{isZh ? '交互升级/智能化改造：' : 'Modernize Legacy Apps:'}</strong>{' '}
{isZh
? '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。'
: 'One line of code transforms old apps into agents. Product experts help users navigate complex B2B software. Reduce support costs and improve satisfaction.'}
</div>
</li>
<li className="flex items-start space-x-3">
@@ -187,7 +207,10 @@ export default function Overview() {
3
</span>
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case3_title')}</strong> {t('overview.use_case3_desc')}
<strong>{isZh ? '产品教学：' : 'Interactive Training:'}</strong>{' '}
{isZh
? '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。'
: "Demonstrate workflows in real-time. Let AI show the complete process of 'how to submit an expense report.'"}
</div>
</li>
<li className="flex items-start space-x-3">
@@ -195,7 +218,10 @@ export default function Overview() {
4
</span>
<div className="text-gray-700 dark:text-gray-300">
<strong>{t('overview.use_case4_title')}</strong> {t('overview.use_case4_desc')}
<strong>{isZh ? '无障碍支持：' : 'Accessibility:'}</strong>{' '}
{isZh
? '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。'
: 'Provide natural language interaction for visually impaired and elderly users. Connect screen readers or voice assistants to make software accessible to everyone.'}
</div>
</li>
</ul>

14
packages/website/src/pages/docs/introduction/quick-start/page.tsx
View File

@@ -4,16 +4,18 @@ import CodeEditor from '@/components/CodeEditor'
import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
export default function QuickStart() {
const { t, i18n } = useTranslation('docs')
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<div>
<h1 className="text-4xl font-bold mb-6">{t('quick_start.title')}</h1>
<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
<p className=" mb-6 leading-relaxed">{t('quick_start.subtitle')}</p>
<p className=" mb-6 leading-relaxed">
{isZh ? '几分钟内完成 page-agent 的集成。' : 'Integrate page-agent in minutes.'}
</p>
<h2 className="text-2xl font-bold mb-3">{t('quick_start.installation')}</h2>
<h2 className="text-2xl font-bold mb-3">{isZh ? '安装步骤' : 'Installation Steps'}</h2>
<div className="space-y-4 mb-6">
{/* Demo CDN - One Line */}
@@ -67,7 +69,7 @@ import { PageAgent } from 'page-agent'`}
<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('quick_start.step2_title')}
{isZh ? '2. 初始化配置' : '2. Initialize Configuration'}
</h3>
<CodeEditor
code={`const agent = new PageAgent({
@@ -82,7 +84,7 @@ import { PageAgent } from 'page-agent'`}
<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('quick_start.step3_title')}
{isZh ? '3. 开始使用' : '3. Start Using'}
</h3>
<CodeEditor
code={`// ${isZh ? '程序化执行自然语言指令' : 'Execute natural language instructions programmatically'}