zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): drop hash-based router

Browse Source
This commit is contained in:
Simon
2026-02-27 19:46:44 +08:00
parent 5f74f98a97
commit 68d68182e2
28 changed files with 349 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,4 +1,5 @@
import CodeEditor from '@/components/CodeEditor'
import { Heading } from '@/components/Heading'
import { APIDivider, APIReference, TypeRef } from '@/components/ui/api-reference'
import { useLanguage } from '@/i18n/context'
@@ -17,9 +18,9 @@ export default function PageAgentCoreDocs() {
{/* When to use */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">
<Heading id="when-to-use-pageagentcore" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '何时使用 PageAgentCore' : 'When to Use PageAgentCore'}
</h2>
</Heading>
<ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2">
<li>{isZh ? '需要自定义 UI 界面' : 'Need a custom UI interface'}</li>
<li>{isZh ? '在自动化测试中无头运行' : 'Running headless in automated tests'}</li>
@@ -38,7 +39,9 @@ export default function PageAgentCoreDocs() {
{/* Basic Usage */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '基本用法' : 'Basic Usage'}</h2>
<Heading id="basic-usage" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '基本用法' : 'Basic Usage'}
</Heading>
<CodeEditor
language="typescript"
code={`import { PageAgentCore } from '@page-agent/core'
@@ -76,7 +79,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* LLM Configuration */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">LLMConfig</h2>
<Heading id="llmconfig" level={2} className="text-2xl font-semibold mb-4">
LLMConfig
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '配置与大语言模型的连接参数。支持 OpenAI 兼容的 API。'
@@ -133,7 +138,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Agent Configuration */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">AgentConfig</h2>
<Heading id="agentconfig" level={2} className="text-2xl font-semibold mb-4">
AgentConfig
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '配置 Agent 的行为、生命周期钩子和扩展能力。'
@@ -210,7 +217,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Lifecycle Hooks */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '生命周期钩子' : 'Lifecycle Hooks'}</h2>
<Heading id="lifecycle-hooks" level={2} className="text-2xl font-semibold mb-4">
{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>{' '}
@@ -262,7 +271,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* PageController Configuration */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">PageControllerConfig</h2>
<Heading id="pagecontrollerconfig" level={2} className="text-2xl font-semibold mb-4">
PageControllerConfig
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '配置 DOM 提取、元素交互和视觉反馈。'
@@ -321,7 +332,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Properties */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '属性' : 'Properties'}</h2>
<Heading id="properties" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '属性' : 'Properties'}
</Heading>
<APIReference
properties={[
{
@@ -366,7 +379,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Methods */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '方法' : 'Methods'}</h2>
<Heading id="methods" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '方法' : 'Methods'}
</Heading>
<APIReference
properties={[
{
@@ -389,7 +404,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Events */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '事件' : 'Events'}</h2>
<Heading id="events" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '事件' : 'Events'}
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh ? (
<>
@@ -438,7 +455,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* ExecutionResult */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">ExecutionResult</h2>
<Heading id="executionresult" level={2} className="text-2xl font-semibold mb-4">
ExecutionResult
</Heading>
<CodeEditor
language="typescript"
code={`interface ExecutionResult {
@@ -454,7 +473,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* AgentActivity */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">AgentActivity</h2>
<Heading id="agentactivity" level={2} className="text-2xl font-semibold mb-4">
AgentActivity
</Heading>
<CodeEditor
language="typescript"
code={`type AgentActivity =
@@ -470,7 +491,9 @@ const result = await agent.execute('Fill in the form with test data')`}
{/* Headless Usage */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '无头模式' : 'Headless Mode'}</h2>
<Heading id="headless-mode" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '无头模式' : 'Headless Mode'}
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '在非 DOM 环境中，你必须实现自定义的 PageController（例如远程操作页面或 Puppeteer）。'

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

@@ -1,6 +1,7 @@
import { Link } from 'wouter'
import CodeEditor from '@/components/CodeEditor'
import { Heading } from '@/components/Heading'
import { APIReference, TypeRef } from '@/components/ui/api-reference'
import { useLanguage } from '@/i18n/context'
@@ -19,9 +20,9 @@ export default function PageAgentDocs() {
{/* When to use */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">
<Heading id="when-to-use-pageagent" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '何时使用 PageAgent' : 'When to Use PageAgent'}
</h2>
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '在大多数场景下，你应该使用 PageAgent。它提供了开箱即用的完整体验：'
@@ -43,7 +44,9 @@ export default function PageAgentDocs() {
{/* Basic Usage */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '基本用法' : 'Basic Usage'}</h2>
<Heading id="basic-usage" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '基本用法' : 'Basic Usage'}
</Heading>
<CodeEditor
language="typescript"
code={`import { PageAgent } from 'page-agent'
@@ -69,7 +72,9 @@ console.log(result.history) // Full execution history`}
{/* Class Definition */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '类定义' : 'Class Definition'}</h2>
<Heading id="class-definition" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '类定义' : 'Class Definition'}
</Heading>
<CodeEditor
language="typescript"
code={`class PageAgent extends PageAgentCore {
@@ -109,7 +114,9 @@ console.log(result.history) // Full execution history`}
{/* Configuration */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '配置' : 'Configuration'}</h2>
<Heading id="configuration" level={2} className="text-2xl font-semibold mb-4">
{isZh ? '配置' : 'Configuration'}
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? 'PageAgent 使用与 PageAgentCore 相同的配置接口。'
@@ -144,7 +151,9 @@ console.log(result.history) // Full execution history`}
{/* Panel Property */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? 'Panel 属性' : 'Panel Property'}</h2>
<Heading id="panel-property" level={2} className="text-2xl font-semibold mb-4">
{isZh ? 'Panel 属性' : 'Panel Property'}
</Heading>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? 'PageAgent 自动创建一个 Panel 实例。你可以通过 panel 属性访问它来控制 UI：'
@@ -185,9 +194,9 @@ agent.panel.dispose()`}
{/* Comparison with PageAgentCore */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">
<Heading id="pageagent-vs-pageagentcore" level={2} className="text-2xl font-semibold mb-4">
{isZh ? 'PageAgent vs PageAgentCore' : 'PageAgent vs PageAgentCore'}
</h2>
</Heading>
<div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
<table className="w-full text-sm">
<thead>