feat: init

pages/docs/introduction/quick-start/page.tsx

@@ -0,0 +1,81 @@
+import BetaNotice from '@pages/components/BetaNotice'
+import CodeEditor from '@pages/components/CodeEditor'
+
+export default function QuickStart() {
+	return (
+		<div>
+			<h1 className="text-4xl font-bold mb-6">Quick Start</h1>
+
+			<BetaNotice />
+
+			<p className=" mb-6 leading-relaxed">
+				几分钟内完成 page-agent 的集成，让你的网站拥有 AI 操作员。
+			</p>
+
+			<h2 className="text-2xl font-bold mb-3">安装步骤</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. 引入方式
+					</h3>
+					<div className="space-y-3">
+						<div>
+							<p className="text-sm font-medium mb-2">CDN 引入</p>
+							<CodeEditor
+								code={`// 仅供测试使用，生产环境联系 @西萌
+<script src="https://dev.g.alicdn.com/dt/page-use.js/0.0.1/lib/page-agent.umd.cjs"></script>`}
+								language="html"
+							/>
+						</div>
+						<div>
+							<p className="text-sm font-medium mb-2">NPM 安装</p>
+							<CodeEditor
+								code={`// npm install page-agent
+import PageAgent from 'page-agent'`}
+								language="bash"
+							/>
+						</div>
+					</div>
+				</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">
+						2. 初始化配置
+					</h3>
+					<CodeEditor
+						code={`// 仅供测试使用，生产环境需要配置 LLM 接入点，本工具不提供 LLM 服务
+const pageAgent = new PageAgent()`}
+						language="javascript"
+					/>
+				</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">
+						3. 开始使用
+					</h3>
+					<CodeEditor
+						code={`// 程序化执行自然语言指令
+await pageAgent.execute('点击提交按钮，然后填写用户名为张三');
+
+// 或者显示对话框让用户输入指令
+pageAgent.panel.show()
+`}
+						language="javascript"
+					/>
+				</div>
+			</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 ">现在你的网站已经拥有了 AI 操作员能力。</p>
+				<a
+					href="/docs/features/security-permissions"
+					className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200"
+				>
+					了解更多功能 →
+				</a>
+			</div>
+		</div>
+	)
+}