feat(website): layout change

packages/website/src/pages/docs/integration/cdn-setup/page.tsx

@@ -1,44 +1,82 @@
+import { useTranslation } from 'react-i18next'
+
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
 import { CDN_CN_URL, CDN_URL } from '@/constants'
 
 export default function CdnSetup() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
 	return (
 		<div>
-			<h1 className="text-4xl font-bold mb-6">CDN 引入</h1>
+			<BetaNotice />
 
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-				通过 CDN 快速集成 page-agent，无需复杂的构建配置。
+			<h1 className="text-4xl font-bold mb-6">{isZh ? 'CDN 引入' : 'CDN Setup'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? '通过 CDN 快速集成 page-agent，无需复杂的构建配置。默认使用演示模型。'
+					: 'Fastest way to integrate page-agent via CDN. No complex build setup needed. Demo model will be used by default.'}
 			</p>
 
-			<h2 className="text-2xl font-bold mb-3">快速开始</h2>
+			<section className="mb-8">
+				<h2 className="text-2xl font-bold mb-4">{isZh ? 'CDN 地址' : 'CDN URLs'}</h2>
 
-			<CodeEditor
-				className="mb-8"
-				code={`
-// CDN: \t${CDN_URL}
-// Mirror: \t${CDN_CN_URL}
-<script 
-	src="${CDN_URL}" 
-	crossorigin="true" 
-	type="text/javascript"
-></script>
+				<div className="overflow-x-auto mb-6">
+					<table className="w-full border-collapse text-sm">
+						<thead>
+							<tr className="border-b border-gray-200 dark:border-gray-700">
+								<th className="text-left py-3 px-4 font-semibold">{isZh ? '位置' : 'Location'}</th>
+								<th className="text-left py-3 px-4 font-semibold">URL</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr className="border-b border-gray-100 dark:border-gray-800">
+								<td className="py-3 px-4">{isZh ? '全球' : 'Global'}</td>
+								<td className="py-3 px-4 font-mono text-xs break-all">{CDN_URL}</td>
+							</tr>
+							<tr className="border-b border-gray-100 dark:border-gray-800">
+								<td className="py-3 px-4">{isZh ? '中国镜像' : 'China Mirror'}</td>
+								<td className="py-3 px-4 font-mono text-xs break-all">{CDN_CN_URL}</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</section>
 
-<script>
-	// window.pageAgent
-</script>`}
-			/>
+			<section className="mb-8">
+				<h2 className="text-2xl font-bold mb-4">{isZh ? '快速开始' : 'Quick Start'}</h2>
 
-			<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
-				<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
-					⚠️ 注意事项
-				</h3>
-				<ul className="text-gray-600 dark:text-gray-300 space-y-1">
-					<li>• 生产环境建议使用固定版本号</li>
-					<li>• 确保 HTTPS 环境下使用</li>
-					<li>• 配置 CSP 策略允许脚本执行</li>
-				</ul>
-			</div>
+				<CodeEditor
+					className="mb-6"
+					code={`<script
+  src="${CDN_URL}"
+  crossorigin="true"
+  type="text/javascript"
+></script>`}
+				/>
+			</section>
+
+			<section className="mb-8">
+				<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
+					<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+						⚠️ {isZh ? '注意事项' : 'Notes'}
+					</h3>
+					<ul className="text-gray-600 dark:text-gray-300 space-y-1">
+						<li>
+							• {isZh ? '生产环境建议使用固定版本号' : 'Use fixed version number in production'}
+						</li>
+						<li>• {isZh ? '确保 HTTPS 环境下使用' : 'Ensure HTTPS environment'}</li>
+						<li>
+							•{' '}
+							{isZh
+								? '配置 CSP 策略允许脚本执行'
+								: 'Configure CSP policy to allow script execution'}
+						</li>
+					</ul>
+				</div>
+			</section>
 		</div>
 	)
 }

packages/website/src/pages/docs/integration/configuration/page.tsx

@@ -16,14 +16,18 @@ export default function Configuration() {
 					: 'Complete configuration interface for PageAgent.'}
 			</p>
 
-			<CodeEditor
-				className="mb-8"
-				language="typescript"
-				code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig
-
-// ============ LLM Configuration ============
-
-interface LLMConfig {
+			{/* LLM Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? 'LLM 配置' : 'LLM Configuration'}</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置与大语言模型的连接参数。'
+						: 'Configure connection parameters for the language model.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface LLMConfig {
   baseURL?: string
   apiKey?: string
   model?: string
@@ -35,11 +39,24 @@ interface LLMConfig {
    * Use this to customize headers, credentials, proxy, etc.
    */
   customFetch?: typeof globalThis.fetch
-}
+}`}
+				/>
+			</section>
 
-// ============ Agent Configuration ============
-
-interface AgentConfig {
+			{/* Agent Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">
+					{isZh ? 'Agent 配置' : 'Agent Configuration'}
+				</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置 Agent 的行为、生命周期钩子和扩展能力。'
+						: 'Configure agent behavior, lifecycle hooks, and extension capabilities.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface AgentConfig {
   language?: 'en-US' | 'zh-CN'
 
   /** Custom tools to extend or override built-in tools */
@@ -69,11 +86,24 @@ interface AgentConfig {
 
   /** @experimental Enable JavaScript execution tool */
   experimentalScriptExecutionTool?: boolean
-}
+}`}
+				/>
+			</section>
 
-// ============ PageController Configuration ============
-
-interface PageControllerConfig {
+			{/* PageController Configuration */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">
+					{isZh ? 'PageController 配置' : 'PageController Configuration'}
+				</h2>
+				<p className="text-gray-600 dark:text-gray-400 mb-4">
+					{isZh
+						? '配置 DOM 提取、元素交互和视觉高亮的细节。'
+						: 'Configure DOM extraction, element interaction, and visual highlighting.'}
+				</p>
+				<CodeEditor
+					className="mb-4"
+					language="typescript"
+					code={`interface PageControllerConfig {
   /** Elements to exclude from interaction */
   interactiveBlacklist?: (Element | (() => Element))[]
 
@@ -92,7 +122,17 @@ interface PageControllerConfig {
   /** Viewport expansion in pixels (-1 for full page) */
   viewportExpansion?: number
 }`}
-			/>
+				/>
+			</section>
+
+			{/* Complete Type */}
+			<section className="mb-10">
+				<h2 className="text-2xl font-semibold mb-4">{isZh ? '完整类型' : 'Complete Type'}</h2>
+				<CodeEditor
+					language="typescript"
+					code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig`}
+				/>
+			</section>
 		</div>
 	)
 }

packages/website/src/pages/docs/integration/security-permissions/page.tsx

@@ -0,0 +1,90 @@
+import { useTranslation } from 'react-i18next'
+
+import BetaNotice from '@/components/BetaNotice'
+
+export default function SecurityPermissions() {
+	const { i18n } = useTranslation()
+	const isZh = i18n.language === 'zh-CN'
+
+	return (
+		<div>
+			<BetaNotice />
+
+			<h1 className="text-4xl font-bold mb-6">{isZh ? '安全与权限' : 'Security & Permissions'}</h1>
+
+			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
+				{isZh
+					? 'page-agent 提供多种安全机制，确保 AI 操作在可控范围内进行。'
+					: 'page-agent provides multiple security mechanisms to ensure AI operations stay within controlled boundaries.'}
+			</p>
+
+			<div className="space-y-6">
+				<section>
+					<h2 className="text-2xl font-bold mb-3">
+						{isZh ? '元素操作黑白名单' : 'Element Interaction Allowlist/Blocklist'}
+					</h2>
+					<div className="space-y-3">
+						<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
+								🚫 {isZh ? '操作黑名单' : 'Blocklist'}
+							</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								{isZh
+									? '禁止 AI 操作敏感元素，如删除按钮、支付按钮等。'
+									: 'Prevent AI from interacting with sensitive elements like delete buttons, payment buttons, etc.'}
+							</p>
+						</div>
+						<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
+							<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
+								✅ {isZh ? '操作白名单' : 'Allowlist'}
+							</h3>
+							<p className="text-gray-600 dark:text-gray-300">
+								{isZh
+									? '明确定义 AI 可以操作的元素范围。'
+									: 'Explicitly define which elements AI can interact with.'}
+							</p>
+						</div>
+					</div>
+				</section>
+
+				<section>
+					<h2 className="text-2xl font-bold mb-3">
+						{isZh ? 'Instruction 安全约束' : 'Instruction Safety Constraints'}
+					</h2>
+					<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+						<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
+							⚠️ {isZh ? '高危操作控制' : 'High-Risk Operation Control'}
+						</h3>
+						<p className="text-gray-600 dark:text-gray-300 mb-3">
+							{isZh
+								? '在 AI 指令中明确列举高危操作，通过两种策略进行控制：'
+								: 'Define high-risk operations in AI instructions and control them through two strategies:'}
+						</p>
+						<div className="space-y-2">
+							<div className="pl-3 border-l-2 border-red-400">
+								<p className="font-medium text-red-700 dark:text-red-300">
+									{isZh ? '完全禁止操作' : 'Completely Forbidden'}
+								</p>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{isZh
+										? '对极高风险操作明确禁止执行'
+										: 'Explicitly prohibit execution of extremely high-risk operations'}
+								</p>
+							</div>
+							<div className="pl-3 border-l-2 border-orange-400">
+								<p className="font-medium text-orange-700 dark:text-orange-300">
+									{isZh ? '需用户确认操作' : 'Requires User Confirmation'}
+								</p>
+								<p className="text-sm text-gray-500 dark:text-gray-400">
+									{isZh
+										? '对中等风险操作要求用户明确同意'
+										: 'Require explicit user consent for medium-risk operations'}
+								</p>
+							</div>
+						</div>
+					</div>
+				</section>
+			</div>
+		</div>
+	)
+}

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

@@ -74,19 +74,6 @@ const pageAgentTool = {
 				</div>
 			</div>
 
-			<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
-			<div className="space-y-4 mb-6">
-				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">错误处理</h3>
-					<CodeEditor code={`// @TODO`} language="javascript" />
-				</div>
-
-				<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-					<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">权限控制</h3>
-					<CodeEditor code={`// @TODO`} language="javascript" />
-				</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">
 					⚠️ 注意事项
@@ -97,19 +84,6 @@ const pageAgentTool = {
 					<li>• 敏感操作建议要求人工确认</li>
 				</ul>
 			</div>
-
-			<div className="bg-linear-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 text-gray-900 dark:text-white">🎉 开始集成</h3>
-				<p className="mb-3 text-gray-700 dark:text-gray-300">
-					通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。
-				</p>
-				<a
-					href="/docs/integration/configuration"
-					className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
-				>
-					查看配置选项 →
-				</a>
-			</div>
 		</div>
 	)
 }