feat: init

pages/docs/introduction/limitations/page.tsx

@@ -0,0 +1,156 @@
+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>
+	)
+}