feat(website): simplify heading api

2026-02-27 20:36:00 +08:00
parent ce2258fe16
commit c2daf13ead
15 changed files with 69 additions and 127 deletions
--- a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx
+++ b/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">
-					{isZh ? '架构' : 'Architecture'}
-				</Heading>
+				<Heading id="architecture">{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">
-					{isZh ? '两个事件流' : 'Two Event Streams'}
-				</Heading>
+				<Heading id="two-event-streams">{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">
-					{isZh ? '所有事件' : 'All Events'}
-				</Heading>
+				<Heading id="all-events">{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">
-					HistoricalEvent
-				</Heading>
+				<Heading id="historicalevent">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">
-					AgentActivity
-				</Heading>
+				<Heading id="agentactivity">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">
-					{isZh ? '使用 React Hooks' : 'Using React Hooks'}
-				</Heading>
+				<Heading id="using-react-hooks">{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
-					id="assembling-core-controller-custom-ui"
-					level={2}
-					className="text-2xl font-semibold mb-4"
-				>
+				<Heading id="assembling-core-controller-custom-ui">
 					{isZh ? '组装 Core + Controller + 自定义 UI' : 'Assembling Core + Controller + Custom UI'}
 				</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
--- a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx
+++ b/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">
-					{isZh ? '基本用法' : 'Basic Usage'}
-				</Heading>
+				<Heading id="basic-usage">{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">
-					LLMConfig
-				</Heading>
+				<Heading id="llmconfig">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">
-					AgentConfig
-				</Heading>
+				<Heading id="agentconfig">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">
-					{isZh ? '生命周期钩子' : 'Lifecycle Hooks'}
-				</Heading>
+				<Heading id="lifecycle-hooks">{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">
-					PageControllerConfig
-				</Heading>
+				<Heading id="pagecontrollerconfig">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">
-					{isZh ? '属性' : 'Properties'}
-				</Heading>
+				<Heading id="properties">{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">
-					{isZh ? '方法' : 'Methods'}
-				</Heading>
+				<Heading id="methods">{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">
-					{isZh ? '事件' : 'Events'}
-				</Heading>
+				<Heading id="events">{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">
-					ExecutionResult
-				</Heading>
+				<Heading id="executionresult">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">
-					AgentActivity
-				</Heading>
+				<Heading id="agentactivity">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">
-					{isZh ? '无头模式' : 'Headless Mode'}
-				</Heading>
+				<Heading id="headless-mode">{isZh ? '无头模式' : 'Headless Mode'}</Heading>
 				<p className="text-gray-600 dark:text-gray-400 mb-4">
 					{isZh
 						? '在非 DOM 环境中，你必须实现自定义的 PageController（例如远程操作页面或 Puppeteer）。'
--- a/packages/website/src/pages/docs/advanced/page-agent/page.tsx
+++ b/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">
-					{isZh ? '基本用法' : 'Basic Usage'}
-				</Heading>
+				<Heading id="basic-usage">{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">
-					{isZh ? '类定义' : 'Class Definition'}
-				</Heading>
+				<Heading id="class-definition">{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">
-					{isZh ? '配置' : 'Configuration'}
-				</Heading>
+				<Heading id="configuration">{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">
-					{isZh ? 'Panel 属性' : 'Panel Property'}
-				</Heading>
+				<Heading id="panel-property">{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">