157 lines
6.2 KiB
TypeScript
157 lines
6.2 KiB
TypeScript
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>
|
||
)
|
||
}
|