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

docs: update limitations page

Browse Source
This commit is contained in:
Simon
2026-02-14 16:23:34 +08:00
parent b89228693d
commit 9b603d90ba
1 changed files with 121 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,5 @@
import { Link } from 'wouter'
import { useLanguage } from '@/i18n/context'
export default function LimitationsPage() {
@@ -11,184 +13,144 @@ export default function LimitationsPage() {
</h1>
<p className="text-xl text-gray-600 dark:text-gray-300">
{isZh
? '了解 page-agent 当前的功能边界和技术限制'
: "Understand page-agent's current capabilities and technical constraints"}
? 'Page Agent 基于 DOM 理解网页并执行操作。这决定了它的能力边界。'
: 'Page Agent understands web pages via DOM and performs actions accordingly. This defines its capability boundary.'}
</p>
</div>
<div className="prose prose-lg dark:prose-invert max-w-none">
{/* PageAgent.js vs PageAgentExt */}
<h2 className="text-2xl font-bold mb-3">
{isZh ? '页面支持限制' : 'Page Support Limitations'}
{isZh ? 'PageAgent.js vs PageAgentExt' : 'PageAgent.js vs PageAgentExt'}
</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">
{isZh ? '单页应用限制' : 'Single Page Application Limits'}
</h3>
<ul className="text-blue-700 dark:text-blue-300 space-y-2">
<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>
<p className="text-gray-600 dark:text-gray-300 mb-4">
{isZh
? 'PageAgent.js 是核心库，运行在页面内。PageAgentExt 是可选的浏览器扩展，提供额外的浏览器级控制能力。'
: 'PageAgent.js is the core library running inside a page. PageAgentExt is an optional browser extension that adds browser-level control.'}
</p>
<div className="overflow-x-auto mb-6">
<table className="w-full text-sm border-collapse">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-700">
<th className="text-left py-3 pr-4"></th>
<th className="text-left py-3 px-4 font-semibold">PageAgent.js</th>
<th className="text-left py-3 pl-4 font-semibold">
PageAgentExt{' '}
<Link
href="/docs/features/chrome-extension"
className="text-xs font-normal text-blue-600 dark:text-blue-400 hover:underline"
>
{isZh ? '了解更多' : 'learn more'}
</Link>
</th>
</tr>
</thead>
<tbody className="text-gray-600 dark:text-gray-300">
<tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-3 pr-4 font-medium text-gray-900 dark:text-white">
{isZh ? '接入方式' : 'Integration'}
</td>
<td className="py-3 px-4">
{isZh ? '网站开发者主动集成' : 'Site developer integrates the library'}
</td>
<td className="py-3 pl-4">
{isZh ? '用户安装浏览器扩展' : 'User installs a browser extension'}
</td>
</tr>
<tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-3 pr-4 font-medium text-gray-900 dark:text-white">
{isZh ? '可操作范围' : 'Scope'}
</td>
<td className="py-3 px-4">
{isZh ? '当前页面（为 SPA 设计）' : 'Current page (designed for SPAs)'}
</td>
<td className="py-3 pl-4">
{isZh ? '任意网页、多标签页' : 'Any web page, multi-tab'}
</td>
</tr>
<tr>
<td className="py-3 pr-4 font-medium text-gray-900 dark:text-white">
{isZh ? '额外能力' : 'Extra capabilities'}
</td>
<td className="py-3 px-4">—</td>
<td className="py-3 pl-4">
{isZh ? '新建/切换/关闭标签页' : 'Open / switch / close tabs'}
</td>
</tr>
</tbody>
</table>
</div>
{/* Interaction Limitations */}
<h2 className="text-2xl font-bold mb-3">
{isZh ? '交互行为限制' : 'Interaction Limitations'}
{isZh ? '交互能力' : 'Interaction Capabilities'}
</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
<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>{isZh ? '点击操作' : 'Click'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</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>{isZh ? '页面滚动' : 'Scroll'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</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>{isZh ? '选择操作' : 'Select'}</span>
</div>
<div className="flex items-center text-green-600 dark:text-green-400">
<span className="mr-2">✅</span>
<span>{isZh ? '焦点切换' : 'Focus'}</span>
</div>
</div>
</div>
<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>{isZh ? '鼠标悬停（hover）' : 'Mouse hover'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</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>{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>{isZh ? '图形绘制' : 'Drawing'}</span>
</div>
<div className="flex items-center text-red-600 dark:text-red-400">
<span className="mr-2">❌</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>{isZh ? '基于点击区域或鼠标位置的控制' : 'Position-based control'}</span>
</div>
</div>
</div>
</div>
<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">
{isZh ? '无视觉能力' : 'No Visual Recognition'}
</h3>
<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>
{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">
{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 className="grid md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold mb-2">
{isZh ? '语义化和易用性' : 'Semantic & Usability'}
<h3 className="font-semibold mb-3 text-green-700 dark:text-green-400">
{isZh ? '支持' : 'Supported'}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{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>
<ul className="space-y-1.5 text-sm">
{[
isZh ? '点击、文本输入、选择' : 'Click, text input, select',
isZh ? '页面滚动（垂直 / 水平）' : 'Scroll (vertical / horizontal)',
isZh ? '表单提交、焦点切换' : 'Form submit, focus',
isZh ? '执行 JavaScript（可选）' : 'Execute JavaScript (opt-in)',
].map((text) => (
<li key={text} className="flex items-center text-gray-700 dark:text-gray-300">
<span className="mr-2 text-green-600 dark:text-green-400">✓</span>
{text}
</li>
))}
</ul>
</div>
<div>
<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">{isZh ? '环境要求' : 'Environment'}</h3>
<p className="text-gray-600 dark:text-gray-300">modern browser</p>
<h3 className="font-semibold mb-3 text-red-700 dark:text-red-400">
{isZh ? '不支持' : 'Not supported'}
</h3>
<ul className="space-y-1.5 text-sm">
{[
isZh ? '悬停、拖拽、右键菜单' : 'Hover, drag & drop, right-click',
isZh ? '键盘快捷键' : 'Keyboard shortcuts',
isZh ? '坐标定位操作' : 'Position-based control',
isZh ? '绘图操作' : 'Drawing',
].map((text) => (
<li key={text} className="flex items-center text-gray-700 dark:text-gray-300">
<span className="mr-2 text-red-600 dark:text-red-400">✗</span>
{text}
</li>
))}
</ul>
</div>
</div>
</div>
<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">
{isZh ? '即将支持' : 'Coming Soon'}
</h3>
<ul className="text-green-700 dark:text-green-300 space-y-1">
<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>
{/* Understanding Limitations */}
<h2 className="text-2xl font-bold mb-3">{isZh ? '理解能力' : 'Understanding'}</h2>
<div className="bg-amber-50 dark:bg-amber-900/20 border-l-4 border-amber-400 p-4 mb-6">
<p className="text-amber-800 dark:text-amber-200 mb-2 font-medium">
{isZh
? 'Page Agent 不使用多模态模型，不截图，没有视觉能力。仅通过 DOM 结构理解页面。'
: 'Page Agent does not use multimodal models, does not take screenshots, and has no visual capability. It reads pages through DOM structure only.'}
</p>
<p className="text-amber-700 dark:text-amber-300 text-sm">
{isZh
? '图片、Canvas、WebGL、SVG 等视觉内容无法被识别。页面的语义化程度和可访问性直接影响 AI 的理解准确性。'
: 'Images, Canvas, WebGL, SVG and other visual content cannot be recognized. Page semantic quality and accessibility directly affect AI accuracy.'}
</p>
</div>
{/* Website Quality */}
<h2 className="text-2xl font-bold mb-3">
{isZh ? '网页质量影响' : 'Page Quality Matters'}
</h2>
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
<p className="text-gray-600 dark:text-gray-300 text-sm">
{isZh
? '反常识的交互逻辑、纯视觉的操作提示、快速出现消失的元素等都会降低自动化成功率。语义化的 HTML 和良好的可访问性会显著提升效果。'
: 'Counter-intuitive interactions, visual-only cues, and rapidly appearing/disappearing elements reduce automation success. Semantic HTML and good accessibility significantly improve results.'}
</p>
</div>
</div>
</div>