feat(website): layout change

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>
 	)
 }