feat(website): simplify heading api

packages/website/src/components/Heading.tsx

@@ -6,15 +6,18 @@ type Level = 2 | 3
 
 interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h2'>, 'children'> {
 	id: string
-	level: Level
+	level?: Level
 	children: React.ReactNode
 }
 
-const tags = { 2: 'h2', 3: 'h3' } as const
+const levelStyles = {
+	2: { tag: 'h2', className: 'text-2xl font-semibold mb-4' },
+	3: { tag: 'h3', className: 'text-xl font-semibold mb-3' },
+} as const
 
-export function Heading({ id, level, className, children, ...props }: HeadingProps) {
+export function Heading({ id, level = 2, className, children, ...props }: HeadingProps) {
 	const ref = useRef<HTMLHeadingElement>(null)
-	const Tag = tags[level]
+	const { tag: Tag, className: defaultClassName } = levelStyles[level]
 
 	useEffect(() => {
 		if (window.location.hash === `#${id}`) {
@@ -23,7 +26,12 @@ export function Heading({ id, level, className, children, ...props }: HeadingPro
 	}, [id])
 
 	return (
-		<Tag ref={ref} id={id} className={cn('group relative scroll-mt-20', className)} {...props}>
+		<Tag
+			ref={ref}
+			id={id}
+			className={cn('group relative scroll-mt-20', defaultClassName, className)}
+			{...props}
+		>
 			<a
 				href={`#${id}`}
 				className="absolute -left-5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-blue-500 transition-opacity no-underline"

packages/website/src/pages/docs/advanced/custom-ui/page.tsx

@@ -18,9 +18,7 @@ export default function CustomUIDocs() {
 
 			{/* Architecture */}
 			<section className="mb-10">
-				<Heading id="architecture" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="architecture">{isZh ? '架构' : 'Architecture'}</Heading>
-					{isZh ? '架构' : 'Architecture'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? 'PageAgent 由三个独立模块组成，可自由组合：'
@@ -48,9 +46,7 @@ export default function CustomUIDocs() {
 
 			{/* Two Event Streams */}
 			<section className="mb-10">
-				<Heading id="two-event-streams" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="two-event-streams">{isZh ? '两个事件流' : 'Two Event Streams'}</Heading>
-					{isZh ? '两个事件流' : 'Two Event Streams'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? 'PageAgentCore 提供两种不同性质的事件流，方便 UI 渲染：'
@@ -125,9 +121,7 @@ export default function CustomUIDocs() {
 
 			{/* All Events */}
 			<section className="mb-10">
-				<Heading id="all-events" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="all-events">{isZh ? '所有事件' : 'All Events'}</Heading>
-					{isZh ? '所有事件' : 'All Events'}
-				</Heading>
 				<APIReference
 					properties={[
 						{
@@ -162,9 +156,7 @@ export default function CustomUIDocs() {
 
 			{/* HistoricalEvent Types */}
 			<section className="mb-10">
-				<Heading id="historicalevent" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="historicalevent">HistoricalEvent</Heading>
-					HistoricalEvent
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh ? 'agent.history 数组中的事件类型：' : 'Event types in agent.history array:'}
 				</p>
@@ -181,9 +173,7 @@ export default function CustomUIDocs() {
 
 			{/* AgentActivity Types */}
 			<section className="mb-10">
-				<Heading id="agentactivity" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="agentactivity">AgentActivity</Heading>
-					AgentActivity
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh ? 'activity 事件的 detail 类型：' : 'The detail type of activity events:'}
 				</p>
@@ -202,9 +192,7 @@ export default function CustomUIDocs() {
 
 			{/* React Hooks Example */}
 			<section className="mb-10">
-				<Heading id="using-react-hooks" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="using-react-hooks">{isZh ? '使用 React Hooks' : 'Using React Hooks'}</Heading>
-					{isZh ? '使用 React Hooks' : 'Using React Hooks'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh ? '监听事件并更新 React 状态：' : 'Listen to events and update React state:'}
 				</p>
@@ -240,11 +228,7 @@ export default function CustomUIDocs() {
 
 			{/* Assembly Example */}
 			<section className="mb-10">
-				<Heading
+				<Heading id="assembling-core-controller-custom-ui">
-					id="assembling-core-controller-custom-ui"
-					level={2}
-					className="text-2xl font-semibold mb-4"
-				>
 					{isZh ? '组装 Core + Controller + 自定义 UI' : 'Assembling Core + Controller + Custom UI'}
 				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">

packages/website/src/pages/docs/advanced/page-agent-core/page.tsx

@@ -18,7 +18,7 @@ export default function PageAgentCoreDocs() {
 
 			{/* When to use */}
 			<section className="mb-10">
-				<Heading id="when-to-use-pageagentcore" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="when-to-use-pageagentcore">
 					{isZh ? '何时使用 PageAgentCore' : 'When to Use PageAgentCore'}
 				</Heading>
 				<ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2">
@@ -39,9 +39,7 @@ export default function PageAgentCoreDocs() {
 
 			{/* Basic Usage */}
 			<section className="mb-10">
-				<Heading id="basic-usage" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="basic-usage">{isZh ? '基本用法' : 'Basic Usage'}</Heading>
-					{isZh ? '基本用法' : 'Basic Usage'}
-				</Heading>
 				<CodeEditor
 					language="typescript"
 					code={`import { PageAgentCore } from '@page-agent/core'
@@ -79,9 +77,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* LLM Configuration */}
 			<section className="mb-10">
-				<Heading id="llmconfig" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="llmconfig">LLMConfig</Heading>
-					LLMConfig
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '配置与大语言模型的连接参数。支持 OpenAI 兼容的 API。'
@@ -138,9 +134,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Agent Configuration */}
 			<section className="mb-10">
-				<Heading id="agentconfig" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="agentconfig">AgentConfig</Heading>
-					AgentConfig
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '配置 Agent 的行为、生命周期钩子和扩展能力。'
@@ -217,9 +211,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Lifecycle Hooks */}
 			<section className="mb-10">
-				<Heading id="lifecycle-hooks" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="lifecycle-hooks">{isZh ? '生命周期钩子' : 'Lifecycle Hooks'}</Heading>
-					{isZh ? '生命周期钩子' : 'Lifecycle Hooks'}
-				</Heading>
 				<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-4">
 					<p className="text-amber-800 dark:text-amber-200 text-sm">
 						<strong>⚠️ {isZh ? '警告' : 'Warning'}:</strong>{' '}
@@ -271,9 +263,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* PageController Configuration */}
 			<section className="mb-10">
-				<Heading id="pagecontrollerconfig" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="pagecontrollerconfig">PageControllerConfig</Heading>
-					PageControllerConfig
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '配置 DOM 提取、元素交互和视觉反馈。'
@@ -332,9 +322,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Properties */}
 			<section className="mb-10">
-				<Heading id="properties" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="properties">{isZh ? '属性' : 'Properties'}</Heading>
-					{isZh ? '属性' : 'Properties'}
-				</Heading>
 				<APIReference
 					properties={[
 						{
@@ -379,9 +367,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Methods */}
 			<section className="mb-10">
-				<Heading id="methods" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="methods">{isZh ? '方法' : 'Methods'}</Heading>
-					{isZh ? '方法' : 'Methods'}
-				</Heading>
 				<APIReference
 					properties={[
 						{
@@ -404,9 +390,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Events */}
 			<section className="mb-10">
-				<Heading id="events" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="events">{isZh ? '事件' : 'Events'}</Heading>
-					{isZh ? '事件' : 'Events'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh ? (
 						<>
@@ -455,9 +439,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* ExecutionResult */}
 			<section className="mb-10">
-				<Heading id="executionresult" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="executionresult">ExecutionResult</Heading>
-					ExecutionResult
-				</Heading>
 				<CodeEditor
 					language="typescript"
 					code={`interface ExecutionResult {
@@ -473,9 +455,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* AgentActivity */}
 			<section className="mb-10">
-				<Heading id="agentactivity" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="agentactivity">AgentActivity</Heading>
-					AgentActivity
-				</Heading>
 				<CodeEditor
 					language="typescript"
 					code={`type AgentActivity =
@@ -491,9 +471,7 @@ const result = await agent.execute('Fill in the form with test data')`}
 
 			{/* Headless Usage */}
 			<section className="mb-10">
-				<Heading id="headless-mode" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="headless-mode">{isZh ? '无头模式' : 'Headless Mode'}</Heading>
-					{isZh ? '无头模式' : 'Headless Mode'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '在非 DOM 环境中，你必须实现自定义的 PageController（例如远程操作页面或 Puppeteer）。'

packages/website/src/pages/docs/advanced/page-agent/page.tsx

@@ -20,7 +20,7 @@ export default function PageAgentDocs() {
 
 			{/* When to use */}
 			<section className="mb-10">
-				<Heading id="when-to-use-pageagent" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="when-to-use-pageagent">
 					{isZh ? '何时使用 PageAgent' : 'When to Use PageAgent'}
 				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
@@ -44,9 +44,7 @@ export default function PageAgentDocs() {
 
 			{/* Basic Usage */}
 			<section className="mb-10">
-				<Heading id="basic-usage" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="basic-usage">{isZh ? '基本用法' : 'Basic Usage'}</Heading>
-					{isZh ? '基本用法' : 'Basic Usage'}
-				</Heading>
 				<CodeEditor
 					language="typescript"
 					code={`import { PageAgent } from 'page-agent'
@@ -72,9 +70,7 @@ console.log(result.history) // Full execution history`}
 
 			{/* Class Definition */}
 			<section className="mb-10">
-				<Heading id="class-definition" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="class-definition">{isZh ? '类定义' : 'Class Definition'}</Heading>
-					{isZh ? '类定义' : 'Class Definition'}
-				</Heading>
 				<CodeEditor
 					language="typescript"
 					code={`class PageAgent extends PageAgentCore {
@@ -114,9 +110,7 @@ console.log(result.history) // Full execution history`}
 
 			{/* Configuration */}
 			<section className="mb-10">
-				<Heading id="configuration" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="configuration">{isZh ? '配置' : 'Configuration'}</Heading>
-					{isZh ? '配置' : 'Configuration'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? 'PageAgent 使用与 PageAgentCore 相同的配置接口。'
@@ -151,9 +145,7 @@ console.log(result.history) // Full execution history`}
 
 			{/* Panel Property */}
 			<section className="mb-10">
-				<Heading id="panel-property" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="panel-property">{isZh ? 'Panel 属性' : 'Panel Property'}</Heading>
-					{isZh ? 'Panel 属性' : 'Panel Property'}
-				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? 'PageAgent 自动创建一个 Panel 实例。你可以通过 panel 属性访问它来控制 UI：'
@@ -194,7 +186,7 @@ agent.panel.dispose()`}
 
 			{/* Comparison with PageAgentCore */}
 			<section className="mb-10">
-				<Heading id="pageagent-vs-pageagentcore" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="pageagent-vs-pageagentcore">
 					{isZh ? 'PageAgent vs PageAgentCore' : 'PageAgent vs PageAgentCore'}
 				</Heading>
 				<div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">

packages/website/src/pages/docs/features/chrome-extension/page.tsx

@@ -23,7 +23,7 @@ export default function ChromeExtension() {
 			<div className="space-y-8 mt-8">
 				{/* Features */}
 				<section>
-					<Heading id="key-features" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="key-features" className="text-2xl font-bold mb-4">
 						{isZh ? '核心特性' : 'Key Features'}
 					</Heading>
 					<div className="grid md:grid-cols-3 gap-4">
@@ -60,7 +60,7 @@ export default function ChromeExtension() {
 
 				{/* Install */}
 				<section>
-					<Heading id="get-the-extension" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="get-the-extension" className="text-2xl font-bold mb-4">
 						{isZh ? '获取扩展' : 'Get the Extension'}
 					</Heading>
 					<div className="flex flex-wrap gap-3">
@@ -91,11 +91,7 @@ export default function ChromeExtension() {
 
 				{/* Relationship with PageAgent.js */}
 				<section>
-					<Heading
+					<Heading id="how-it-relates-to-page-agent-js" className="text-2xl font-bold mb-4">
-						id="how-it-relates-to-page-agent-js"
-						level={2}
-						className="text-2xl font-bold mb-4"
-					>
 						{isZh ? '与 PageAgent.js 的关系' : 'How It Relates to PageAgent.js'}
 					</Heading>
 					<div className="p-5 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-3 text-gray-600 dark:text-gray-300">
@@ -114,7 +110,7 @@ export default function ChromeExtension() {
 
 				{/* Third-party Integration */}
 				<section>
-					<Heading id="third-party-integration" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="third-party-integration" className="text-2xl font-bold mb-4">
 						{isZh ? '第三方接入' : 'Third-Party Integration'}
 					</Heading>
 					<p className="text-gray-600 dark:text-gray-300 mb-4">
@@ -154,7 +150,7 @@ localStorage.setItem('PageAgentExtUserAuthToken', '<your-token-from-extension>')
 
 				{/* API Reference */}
 				<section>
-					<Heading id="api-reference" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="api-reference" className="text-2xl font-bold mb-4">
 						{isZh ? 'API 参考' : 'API Reference'}
 					</Heading>
 
@@ -181,7 +177,7 @@ localStorage.setItem('PageAgentExtUserAuthToken', '<your-token-from-extension>')
 					</section>
 
 					{/* TypeScript Declaration */}
-					<Heading id="typescript-declaration" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="typescript-declaration" className="text-2xl font-bold mb-4">
 						{isZh ? 'TypeScript 类型声明' : 'TypeScript Declaration'}
 					</Heading>
 					<p className="text-gray-600 dark:text-gray-300 mb-4">
@@ -317,7 +313,6 @@ window.PAGE_AGENT_EXT.stop()`
 				<section>
 					<Heading
 						id="integrate-multipageagent-into-your-extension"
-						level={2}
 						className="text-2xl font-bold mb-4"
 					>
 						{isZh

packages/website/src/pages/docs/features/custom-instructions/page.tsx

@@ -17,7 +17,7 @@ export default function Instructions() {
 
 			{/* System Instructions */}
 			<section className="mb-12">
-				<Heading id="system-instructions" level={2} className="text-3xl font-bold mb-6">
+				<Heading id="system-instructions" className="text-3xl font-bold mb-6">
 					{isZh ? '系统级指导 (System Instructions)' : 'System Instructions'}
 				</Heading>
 
@@ -47,7 +47,7 @@ Guidelines:
 
 			{/* Page Instructions */}
 			<section className="mb-12">
-				<Heading id="page-instructions" level={2} className="text-3xl font-bold mb-6">
+				<Heading id="page-instructions" className="text-3xl font-bold mb-6">
 					{isZh ? '页面级指导 (Page Instructions)' : 'Page Instructions'}
 				</Heading>
 
@@ -91,7 +91,7 @@ This is the product listing page.
 
 			{/* How It Works */}
 			<section className="mb-12">
-				<Heading id="how-it-works" level={2} className="text-3xl font-bold mb-6">
+				<Heading id="how-it-works" className="text-3xl font-bold mb-6">
 					{isZh ? '工作原理' : 'How It Works'}
 				</Heading>
 

packages/website/src/pages/docs/features/custom-tools/page.tsx

@@ -18,7 +18,7 @@ export default function CustomTools() {
 
 			<div className="space-y-8">
 				<section>
-					<Heading id="tool-registration" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="tool-registration" className="text-2xl font-bold mb-4">
 						{isZh ? '工具注册' : 'Tool Registration'}
 					</Heading>
 					<p className="text-gray-600 dark:text-gray-300 mb-4">
@@ -58,7 +58,7 @@ const pageAgent = new PageAgent({customTools})
 				</section>
 
 				<section>
-					<Heading id="page-filter" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="page-filter" className="text-2xl font-bold mb-4">
 						{isZh ? '页面过滤器' : 'Page Filter'}
 					</Heading>
 
@@ -94,7 +94,7 @@ const pageAgent = new PageAgent({customTools})
 				</section>
 
 				<section>
-					<Heading id="best-practices" level={2} className="text-2xl font-bold mb-4">
+					<Heading id="best-practices" className="text-2xl font-bold mb-4">
 						{isZh ? '最佳实践' : 'Best Practices'}
 					</Heading>
 					<div className="space-y-4">

packages/website/src/pages/docs/features/data-masking/page.tsx

@@ -16,7 +16,7 @@ export default function DataMasking() {
 			</p>
 
 			<section className="mb-12">
-				<Heading id="api-definition" level={2} className="text-3xl font-bold mb-6">
+				<Heading id="api-definition" className="text-3xl font-bold mb-6">
 					{isZh ? '接口定义' : 'API Definition'}
 				</Heading>
 
@@ -33,7 +33,7 @@ export default function DataMasking() {
 			</section>
 
 			<section className="mb-12">
-				<Heading id="common-masking-patterns" level={2} className="text-3xl font-bold mb-6">
+				<Heading id="common-masking-patterns" className="text-3xl font-bold mb-6">
 					{isZh ? '常用脱敏规则' : 'Common Masking Patterns'}
 				</Heading>
 

packages/website/src/pages/docs/features/models/page.tsx

@@ -64,7 +64,7 @@ export default function Models() {
 
 			{/* Models Section */}
 			<section className="mb-10">
-				<Heading id="tested-models" level={2} className="text-2xl font-semibold mb-3">
+				<Heading id="tested-models" className="text-2xl font-semibold mb-3">
 					{isZh ? '已测试模型' : 'Tested Models'}
 				</Heading>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
@@ -144,9 +144,7 @@ export default function Models() {
 
 			{/* Configuration Section */}
 			<section className="mb-10">
-				<Heading id="configuration" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="configuration">{isZh ? '配置方式' : 'Configuration'}</Heading>
-					{isZh ? '配置方式' : 'Configuration'}
-				</Heading>
 				<CodeEditor
 					code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
 const pageAgent = new PageAgent({
@@ -168,9 +166,7 @@ const pageAgent = new PageAgent({
 
 			{/* Free Testing API Section */}
 			<section className="mb-10">
-				<Heading id="free-testing-api" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="free-testing-api">{isZh ? '免费测试接口' : 'Free Testing API'}</Heading>
-					{isZh ? '免费测试接口' : 'Free Testing API'}
-				</Heading>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '以下免费测试接口仅供 PageAgent.js 和 PageAgent Extension 的技术评估使用。有速率限制，可能随时变更。请勿用于生产环境。'
@@ -220,9 +216,7 @@ LLM_API_KEY="NA"`}
 
 			{/* Ollama Section */}
 			<section className="mb-10">
-				<Heading id="ollama" level={2} className="text-2xl font-semibold mb-4">
+				<Heading id="ollama">Ollama</Heading>
-					Ollama
-				</Heading>
 				<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '已在 Ollama 0.15 + qwen3:14b (RTX3090 24GB) 上测试通过。'

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

@@ -19,11 +19,7 @@ export default function SecurityPermissions() {
 
 			<div className="space-y-6">
 				<section>
-					<Heading
+					<Heading id="element-interaction-allowlist-blocklist" className="text-2xl font-bold mb-3">
-						id="element-interaction-allowlist-blocklist"
-						level={2}
-						className="text-2xl font-bold mb-3"
-					>
 						{isZh ? '元素操作黑白名单' : 'Element Interaction Allowlist/Blocklist'}
 					</Heading>
 					<div className="space-y-3">
@@ -51,11 +47,7 @@ export default function SecurityPermissions() {
 				</section>
 
 				<section>
-					<Heading
+					<Heading id="instruction-safety-constraints" className="text-2xl font-bold mb-3">
-						id="instruction-safety-constraints"
-						level={2}
-						className="text-2xl font-bold mb-3"
-					>
 						{isZh ? 'Instruction 安全约束' : 'Instruction Safety Constraints'}
 					</Heading>
 					<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">

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

@@ -27,7 +27,7 @@ export default function ThirdPartyAgentPage() {
 				</p>
 			</div>
 
-			<Heading id="integration-method" level={2} className="text-2xl font-bold mb-4">
+			<Heading id="integration-method" className="text-2xl font-bold mb-4">
 				{isZh ? '集成方式' : 'Integration Method'}
 			</Heading>
 
@@ -60,7 +60,7 @@ const pageAgentTool = {
 				</div>
 			</div>
 
-			<Heading id="use-cases" level={2} className="text-2xl font-bold mb-4">
+			<Heading id="use-cases" className="text-2xl font-bold mb-4">
 				{isZh ? '应用场景' : 'Use Cases'}
 			</Heading>
 			<div className="grid md:grid-cols-2 gap-4 mb-6">

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

@@ -21,7 +21,7 @@ export default function LimitationsPage() {
 
 			<div className="prose prose-lg dark:prose-invert max-w-none">
 				{/* PageAgent.js vs PageAgentExt */}
-				<Heading id="pageagent-js-vs-pageagentext" level={2} className="text-2xl font-bold mb-3">
+				<Heading id="pageagent-js-vs-pageagentext" className="text-2xl font-bold mb-3">
 					{isZh ? 'PageAgent.js vs PageAgentExt' : 'PageAgent.js vs PageAgentExt'}
 				</Heading>
 				<p className="text-gray-600 dark:text-gray-300 mb-4">
@@ -83,7 +83,7 @@ export default function LimitationsPage() {
 				</div>
 
 				{/* Interaction Limitations */}
-				<Heading id="interaction-capabilities" level={2} className="text-2xl font-bold mb-3">
+				<Heading id="interaction-capabilities" className="text-2xl font-bold mb-3">
 					{isZh ? '交互能力' : 'Interaction Capabilities'}
 				</Heading>
 				<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-6">
@@ -128,7 +128,7 @@ export default function LimitationsPage() {
 				</div>
 
 				{/* Understanding Limitations */}
-				<Heading id="understanding" level={2} className="text-2xl font-bold mb-3">
+				<Heading id="understanding" className="text-2xl font-bold mb-3">
 					{isZh ? '理解能力' : 'Understanding'}
 				</Heading>
 				<div className="bg-amber-50 dark:bg-amber-900/20 border-l-4 border-amber-400 p-4 mb-6">
@@ -145,7 +145,7 @@ export default function LimitationsPage() {
 				</div>
 
 				{/* Website Quality */}
-				<Heading id="page-quality-matters" level={2} className="text-2xl font-bold mb-3">
+				<Heading id="page-quality-matters" className="text-2xl font-bold mb-3">
 					{isZh ? '网页质量影响' : 'Page Quality Matters'}
 				</Heading>
 				<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">

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

@@ -49,7 +49,7 @@ export default function Overview() {
 			</div>
 
 			<section>
-				<Heading id="what-is-page-agent" level={2} className="text-2xl font-bold mb-4">
+				<Heading id="what-is-page-agent" className="text-2xl font-bold mb-4">
 					{isZh ? '什么是 page-agent？' : 'What is page-agent?'}
 				</Heading>
 
@@ -61,7 +61,7 @@ export default function Overview() {
 			</section>
 
 			<section>
-				<Heading id="core-features" level={2} className="text-2xl font-bold mb-3">
+				<Heading id="core-features" className="text-2xl font-bold mb-3">
 					{isZh ? '核心特性' : 'Core Features'}
 				</Heading>
 
@@ -111,7 +111,7 @@ export default function Overview() {
 					</div>
 				</div>
 
-				<Heading id="vs-browser-use" level={2} className="text-2xl font-bold mb-4">
+				<Heading id="vs-browser-use" className="text-2xl font-bold mb-4">
 					{isZh ? '与 browser-use 的区别' : 'vs. browser-use'}
 				</Heading>
 
@@ -177,7 +177,7 @@ export default function Overview() {
 					</table>
 				</div>
 
-				<Heading id="use-cases" level={2} className="text-2xl font-bold mb-4">
+				<Heading id="use-cases" className="text-2xl font-bold mb-4">
 					{isZh ? '应用场景' : 'Use Cases'}
 				</Heading>
 

packages/website/src/pages/docs/introduction/quick-start/page.tsx

@@ -14,7 +14,7 @@ export default function QuickStart() {
 				{isZh ? '几分钟内完成 page-agent 的集成。' : 'Integrate page-agent in minutes.'}
 			</p>
 
-			<Heading id="installation-steps" level={2} className="text-2xl font-bold mb-3">
+			<Heading id="installation-steps" className="text-2xl font-bold mb-3">
 				{isZh ? '安装步骤' : 'Installation Steps'}
 			</Heading>
 

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

@@ -373,7 +373,6 @@ export default function TroubleshootingPage() {
 						<section key={section.id} className="scroll-mt-24">
 							<Heading
 								id={section.id}
-								level={2}
 								className="text-2xl font-bold mb-4 text-gray-900 dark:text-white"
 							>
 								{isZh ? section.title.zh : section.title.en}