feat(website): layout change

packages/website/src/i18n/locales/en-US/common.ts

@@ -27,14 +27,14 @@ export default {
 		overview: 'Overview',
 		quick_start: 'Quick Start',
 		limitations: 'Limitations',
-		model_integration: 'Model Integration',
+		models: 'Models',
 		custom_tools: 'Custom Tools',
 		knowledge_injection: 'Instructions',
-		security_permissions: 'Security & Permissions',
 		data_masking: 'Data Masking',
 		cdn_setup: 'CDN Setup',
 		configuration: 'Configuration',
 		best_practices: 'Best Practices',
 		third_party_agent: 'Third-party Agent',
+		security_permissions: 'Security & Permissions',
 	},
 }

packages/website/src/i18n/locales/en-US/docs.ts

@@ -5,7 +5,7 @@ export default {
 			'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.',
 		what_is: 'What is page-agent?',
 		what_is_desc:
-			'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent targets web developers, not scrapers or agent clients builders. Integrate it into your site to let users interact with pages through natural language.',
+			'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.',
 		features_title: 'Core Features',
 		feature_dom: {
 			title: '🧠 Smart DOM Analysis',
@@ -112,8 +112,8 @@ export default {
 		future_3: '• Basic visual understanding',
 		future_4: '• Smarter error recovery',
 	},
-	model_integration: {
-		title: 'Model Integration',
+	models: {
+		title: 'Models',
 		subtitle:
 			'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
 		recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities.',

packages/website/src/i18n/locales/zh-CN/common.ts

@@ -26,14 +26,14 @@ export default {
 		overview: '概览',
 		quick_start: '快速开始',
 		limitations: '使用限制',
-		model_integration: '模型接入',
+		models: '模型',
 		custom_tools: '自定义工具',
 		knowledge_injection: '知识注入',
-		security_permissions: '安全与权限',
 		data_masking: '数据脱敏',
 		cdn_setup: 'CDN 引入',
 		configuration: '配置选项',
 		best_practices: '最佳实践',
 		third_party_agent: '接入第三方 Agent',
+		security_permissions: '安全与权限',
 	},
 }

packages/website/src/i18n/locales/zh-CN/docs.ts

@@ -111,8 +111,8 @@ export default {
 		future_3: '• 基础的视觉理解能力',
 		future_4: '• 更智能的错误恢复机制',
 	},
-	model_integration: {
-		title: '模型接入',
+	models: {
+		title: '模型',
 		subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
 		recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。',
 		recommended: '推荐模型',

packages/website/src/pages/docs/Layout.tsx

@@ -32,20 +32,23 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 		{
 			title: t('nav.features'),
 			items: [
-				{ title: t('nav.model_integration'), path: '/docs/features/model-integration' },
+				{ title: t('nav.models'), path: '/docs/features/model-integration' },
 				{ title: t('nav.custom_tools'), path: '/docs/features/custom-tools' },
 				{ title: t('nav.knowledge_injection'), path: '/docs/features/custom-instructions' },
-				{ title: t('nav.security_permissions'), path: '/docs/features/security-permissions' },
 				{ title: t('nav.data_masking'), path: '/docs/features/data-masking' },
 			],
 		},
 		{
 			title: t('nav.integration'),
 			items: [
-				{ title: t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
 				{ title: t('nav.configuration'), path: '/docs/integration/configuration' },
-				{ title: t('nav.best_practices'), path: '/docs/integration/best-practices' },
 				{ title: t('nav.third_party_agent'), path: '/docs/integration/third-party-agent' },
+				{ title: '🚧 ' + t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
+				{
+					title: '🚧 ' + t('nav.security_permissions'),
+					path: '/docs/integration/security-permissions',
+				},
+				{ title: '🚧 ' + t('nav.best_practices'), path: '/docs/integration/best-practices' },
 			],
 		},
 	]
@@ -55,7 +58,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
 			<div className="flex gap-8 min-w-[900px]">
 				{/* Sidebar */}
 				<aside className="w-64 shrink-0" role="complementary" aria-label="文档导航">
-					<div className="sticky top-8">
+					<div className="sticky">
 						<nav className="space-y-8" role="navigation" aria-label="文档章节">
 							{navigationSections.map((section) => (
 								<section key={section.title}>

packages/website/src/pages/docs/features/model-integration/page.tsx

@@ -27,16 +27,14 @@ export default function ModelIntegration() {
 
 	return (
 		<div className="max-w-4xl">
-			<h1 className="text-4xl font-bold mb-4">{t('model_integration.title')}</h1>
-			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
-				{t('model_integration.subtitle')}
-			</p>
+			<h1 className="text-4xl font-bold mb-4">{t('models.title')}</h1>
+			<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{t('models.subtitle')}</p>
 
 			{/* Models Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-3">{t('model_integration.available')}</h2>
+				<h2 className="text-2xl font-semibold mb-3">{t('models.available')}</h2>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-					{t('model_integration.recommendation_logic')}
+					{t('models.recommendation_logic')}
 				</p>
 				<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
 					<div className="flex flex-wrap gap-2">
@@ -63,41 +61,41 @@ export default function ModelIntegration() {
 
 			{/* Tips Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.tips')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">{t('models.tips')}</h2>
 				<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
 					<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
-						<li>{t('model_integration.tip_2')}</li>
-						<li>{t('model_integration.tip_3')}</li>
+						<li>{t('models.tip_2')}</li>
+						<li>{t('models.tip_3')}</li>
 					</ul>
 				</div>
 			</section>
 
 			{/* Security Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.security')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">{t('models.security')}</h2>
 				<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
 					<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
-						{t('model_integration.security_warning')}
+						{t('models.security_warning')}
 					</p>
 				</div>
 				<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
 					<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
-						{t('model_integration.security_backend_proxy')}
+						{t('models.security_backend_proxy')}
 					</h3>
 					<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-						{t('model_integration.security_backend_desc')}
+						{t('models.security_backend_desc')}
 					</p>
 					<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
-						<li>{t('model_integration.security_method_1')}</li>
-						<li>{t('model_integration.security_method_2')}</li>
-						<li>{t('model_integration.security_method_3')}</li>
+						<li>{t('models.security_method_1')}</li>
+						<li>{t('models.security_method_2')}</li>
+						<li>{t('models.security_method_3')}</li>
 					</ul>
 				</div>
 			</section>
 
 			{/* Configuration Section */}
 			<section className="mb-10">
-				<h2 className="text-2xl font-semibold mb-4">{t('model_integration.configuration')}</h2>
+				<h2 className="text-2xl font-semibold mb-4">{t('models.configuration')}</h2>
 				<CodeEditor
 					code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
 const pageAgent = new PageAgent({

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

@@ -1,81 +0,0 @@
-import BetaNotice from '@/components/BetaNotice'
-
-export default function SecurityPermissions() {
-	return (
-		<div>
-			<h1 className="text-4xl font-bold mb-6">安全与权限</h1>
-
-			<BetaNotice />
-
-			<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
-				page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
-			</p>
-
-			<div className="space-y-6">
-				<section>
-					<h2 className="text-2xl font-bold mb-3">元素操作黑白名单</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">
-								🚫 操作黑名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">
-								禁止 AI 操作敏感元素，如删除按钮、支付按钮等。
-							</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">
-								✅ 操作白名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">明确定义 AI 可以操作的元素范围。</p>
-						</div>
-					</div>
-				</section>
-
-				<section>
-					<h2 className="text-2xl font-bold mb-3">URL 黑白名单</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">
-								🚫 URL 黑名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">禁止 AI 访问敏感页面和危险链接。</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">
-								✅ URL 白名单
-							</h3>
-							<p className="text-gray-600 dark:text-gray-300">限制 AI 只能访问预定义的安全页面。</p>
-						</div>
-					</div>
-				</section>
-
-				<section>
-					<h2 className="text-2xl font-bold mb-3">Instruction 安全约束</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">
-							⚠️ 高危操作控制
-						</h3>
-						<p className="text-gray-600 dark:text-gray-300 mb-3">
-							在 AI 指令中明确列举高危操作，通过两种策略进行控制：
-						</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">完全禁止操作</p>
-								<p className="text-sm text-gray-500 dark:text-gray-400">
-									对极高风险操作明确禁止执行
-								</p>
-							</div>
-							<div className="pl-3 border-l-2 border-orange-400">
-								<p className="font-medium text-orange-700 dark:text-orange-300">需用户确认操作</p>
-								<p className="text-sm text-gray-500 dark:text-gray-400">
-									对中等风险操作要求用户明确同意
-								</p>
-							</div>
-						</div>
-					</div>
-				</section>
-			</div>
-		</div>
-	)
-}

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>
+
+				<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>
+
+			<section className="mb-8">
+				<h2 className="text-2xl font-bold mb-4">{isZh ? '快速开始' : 'Quick Start'}</h2>
 
 				<CodeEditor
-				className="mb-8"
-				code={`
-// CDN: \t${CDN_URL}
-// Mirror: \t${CDN_CN_URL}
-<script 
+					className="mb-6"
+					code={`<script
   src="${CDN_URL}"
   crossorigin="true"
   type="text/javascript"
-></script>
-
-<script>
-	// window.pageAgent
-</script>`}
+></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>• 生产环境建议使用固定版本号</li>
-					<li>• 确保 HTTPS 环境下使用</li>
-					<li>• 配置 CSP 策略允许脚本执行</li>
+						<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>
 
+			{/* 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-8"
+					className="mb-4"
 					language="typescript"
-				code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig
-
-// ============ LLM Configuration ============
-
-interface LLMConfig {
+					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))[]
 
@@ -93,6 +123,16 @@ interface PageControllerConfig {
   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>
 	)
 }

packages/website/src/pages/docs/introduction/overview/page.tsx

@@ -6,13 +6,13 @@ export default function Overview() {
 	return (
 		<article>
 			{/* 头图 */}
-			<figure className="mb-8 rounded-xl overflow-hidden">
+			{/* <figure className="mb-8 rounded-xl overflow-hidden">
 				<img
 					src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp"
 					alt="page-agent"
 					className="w-full h-64 object-cover"
 				/>
-			</figure>
+			</figure> */}
 
 			<div className="mb-8">
 				<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>

packages/website/src/router.tsx

@@ -8,11 +8,11 @@ import Instructions from './pages/docs/features/custom-instructions/page'
 import CustomTools from './pages/docs/features/custom-tools/page'
 import DataMasking from './pages/docs/features/data-masking/page'
 import ModelIntegration from './pages/docs/features/model-integration/page'
-import SecurityPermissions from './pages/docs/features/security-permissions/page'
 // Integration pages
 import BestPractices from './pages/docs/integration/best-practices/page'
 import CdnSetup from './pages/docs/integration/cdn-setup/page'
 import Configuration from './pages/docs/integration/configuration/page'
+import SecurityPermissions from './pages/docs/integration/security-permissions/page'
 import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page'
 // Introduction pages
 import Limitations from './pages/docs/introduction/limitations/page'
@@ -53,15 +53,6 @@ export default function Router() {
 				</div>
 			</Route>
 
-			<Route path="/docs/features/security-permissions">
-				<div className="min-h-screen bg-white dark:bg-gray-900">
-					<Header />
-					<DocsLayout>
-						<SecurityPermissions />
-					</DocsLayout>
-				</div>
-			</Route>
-
 			<Route path="/docs/features/custom-tools">
 				<div className="min-h-screen bg-white dark:bg-gray-900">
 					<Header />
@@ -107,6 +98,15 @@ export default function Router() {
 				</div>
 			</Route>
 
+			<Route path="/docs/integration/security-permissions">
+				<div className="min-h-screen bg-white dark:bg-gray-900">
+					<Header />
+					<DocsLayout>
+						<SecurityPermissions />
+					</DocsLayout>
+				</div>
+			</Route>
+
 			<Route path="/docs/integration/configuration">
 				<div className="min-h-screen bg-white dark:bg-gray-900">
 					<Header />