From 68d68182e255b953a2011915992af50dae09f12c Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Fri, 27 Feb 2026 19:46:44 +0800 Subject: [PATCH] feat(website): drop hash-based router --- README.md | 8 +-- docs/CHANGELOG.md | 2 +- docs/README-zh.md | 8 +-- .../entrypoints/sidepanel/components/misc.tsx | 2 +- packages/llms/src/index.ts | 2 +- packages/website/index.html | 9 +++ packages/website/public/404.html | 34 +++++++++++ packages/website/src/components/Header.tsx | 8 +-- packages/website/src/components/Heading.tsx | 37 ++++++++++++ packages/website/src/main.tsx | 10 +++- .../pages/docs/advanced/custom-ui/page.tsx | 33 +++++++--- .../docs/advanced/page-agent-core/page.tsx | 49 +++++++++++---- .../pages/docs/advanced/page-agent/page.tsx | 25 +++++--- .../docs/features/chrome-extension/page.tsx | 37 ++++++++---- .../features/custom-instructions/page.tsx | 13 ++-- .../pages/docs/features/custom-tools/page.tsx | 13 +++- .../pages/docs/features/data-masking/page.tsx | 9 ++- .../src/pages/docs/features/models/page.tsx | 17 ++++-- packages/website/src/pages/docs/index.tsx | 14 +---- .../integration/security-permissions/page.tsx | 17 ++++-- .../integration/third-party-agent/page.tsx | 9 ++- .../docs/introduction/limitations/page.tsx | 19 +++--- .../pages/docs/introduction/overview/page.tsx | 17 ++++-- .../docs/introduction/quick-start/page.tsx | 5 +- .../introduction/troubleshooting/page.tsx | 11 +++- .../website/src/pages/home/HomeContent.tsx | 15 +++++ packages/website/src/router.tsx | 60 +++++++++++-------- packages/website/vite.config.js | 2 +- 28 files changed, 349 insertions(+), 136 deletions(-) create mode 100644 packages/website/public/404.html create mode 100644 packages/website/src/components/Heading.tsx create mode 100644 packages/website/src/pages/home/HomeContent.tsx diff --git a/README.md b/README.md index 2a4104e..2b5c51a 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua 🌐 **English** | [中文](./docs/README-zh.md) -👉 🚀 Demo | 📖 Documentation +👉 🚀 Demo | 📖 Documentation @@ -28,14 +28,14 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua - No special permissions required. - **🧠 Bring your own LLMs** - **🎨 Pretty UI with human-in-the-loop** -- **🐙 Optional [chrome extension](https://alibaba.github.io/page-agent/#/docs/features/chrome-extension) for multi-page tasks.** +- **🐙 Optional [chrome extension](https://alibaba.github.io/page-agent/docs/features/chrome-extension) for multi-page tasks.** ## 💡 Use Cases - **SaaS AI Copilot** — Ship an AI copilot in your product in lines of code. No backend rewrite needed. - **Smart Form Filling** — Turn 20-click workflows into one sentence. Perfect for ERP, CRM, and admin systems. - **Accessibility** — Make any web app accessible through natural language. Voice commands, screen readers, zero barrier. -- **Multi-page Agent** — Extend your agent's reach across browser tabs with the optional [chrome extension](https://alibaba.github.io/page-agent/#/docs/features/chrome-extension). +- **Multi-page Agent** — Extend your agent's reach across browser tabs with the optional [chrome extension](https://alibaba.github.io/page-agent/docs/features/chrome-extension). ## 🚀 Quick Start @@ -73,7 +73,7 @@ const agent = new PageAgent({ await agent.execute('Click the login button') ``` -For more programmatic usage, see [📖 Documentations](https://alibaba.github.io/page-agent/#/docs/introduction/overview). +For more programmatic usage, see [📖 Documentations](https://alibaba.github.io/page-agent/docs/introduction/overview). ## 🤝 Contributing diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 2223623..e4b16de 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -146,7 +146,7 @@ interface PageAgentConfig { - Single-page application only (cannot navigate across pages) - No visual recognition (relies on DOM structure) - Limited interaction support (no hover, drag-drop, canvas operations) -- See [Limitations](https://alibaba.github.io/page-agent/#/docs/introduction/limitations) for details +- See [Limitations](https://alibaba.github.io/page-agent/docs/introduction/limitations) for details ### Acknowledgments diff --git a/docs/README-zh.md b/docs/README-zh.md index e69d912..c2bef39 100644 --- a/docs/README-zh.md +++ b/docs/README-zh.md @@ -11,7 +11,7 @@ 🌐 [English](../README.md) | **中文** -👉 🚀 Demo | 📖 Documentation +👉 🚀 Demo | 📖 Documentation @@ -28,14 +28,14 @@ - 无需特殊权限。 - **🧠 用你自己的 LLM** - **🎨 精美 UI，支持人机协同** -- **🐙 可选的 [Chrome 扩展](https://alibaba.github.io/page-agent/#/docs/features/chrome-extension)，支持跨页面任务。** +- **🐙 可选的 [Chrome 扩展](https://alibaba.github.io/page-agent/docs/features/chrome-extension)，支持跨页面任务。** ## 💡 应用场景 - **SaaS AI 副驾驶** — 几行代码为你的产品加上 AI 副驾驶，不需要重写后端。 - **智能表单填写** — 把 20 次点击变成一句话。ERP、CRM、管理后台的最佳拍档。 - **无障碍增强** — 用自然语言让任何网页无障碍。语音指令、屏幕阅读器，零门槛。 -- **跨页面 Agent** — 通过可选的 [Chrome 扩展](https://alibaba.github.io/page-agent/#/docs/features/chrome-extension)，让你的 Agent 跨标签页工作。 +- **跨页面 Agent** — 通过可选的 [Chrome 扩展](https://alibaba.github.io/page-agent/docs/features/chrome-extension)，让你的 Agent 跨标签页工作。 ## 🚀 快速开始 @@ -73,7 +73,7 @@ const agent = new PageAgent({ await agent.execute('点击登录按钮') ``` -更多编程用法，请参阅 [📖 文档](https://alibaba.github.io/page-agent/#/docs/introduction/overview)。 +更多编程用法，请参阅 [📖 文档](https://alibaba.github.io/page-agent/docs/introduction/overview)。 ## 🤝 贡献 diff --git a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx index 4650cc3..fce2085 100644 --- a/packages/extension/src/entrypoints/sidepanel/components/misc.tsx +++ b/packages/extension/src/entrypoints/sidepanel/components/misc.tsx @@ -125,7 +125,7 @@ export function EmptyState() { { if (!config.baseURL || !config.apiKey || !config.model) { throw new Error( '[PageAgent] LLM configuration required. Please provide: baseURL, apiKey, model. ' + - 'See: https://alibaba.github.io/page-agent/#/docs/features/models' + 'See: https://alibaba.github.io/page-agent/docs/features/models' ) } diff --git a/packages/website/index.html b/packages/website/index.html index f6a5cd9..570486a 100644 --- a/packages/website/index.html +++ b/packages/website/index.html @@ -46,6 +46,15 @@
+ + + + diff --git a/packages/website/src/components/Header.tsx b/packages/website/src/components/Header.tsx index 3d9fe31..f8e8a91 100644 --- a/packages/website/src/components/Header.tsx +++ b/packages/website/src/components/Header.tsx @@ -23,7 +23,7 @@ export default function Header() {
{/* Logo */} setMobileMenuOpen(false)} @@ -56,7 +56,7 @@ export default function Header() { aria-label="Mobile navigation" > @@ -90,7 +90,7 @@ export default function Header() { {import.meta.env.VERSION} @@ -138,7 +138,7 @@ export default function Header() { role="navigation" > setMobileMenuOpen(false)} > diff --git a/packages/website/src/components/Heading.tsx b/packages/website/src/components/Heading.tsx new file mode 100644 index 0000000..3a43661 --- /dev/null +++ b/packages/website/src/components/Heading.tsx @@ -0,0 +1,37 @@ +import { ComponentPropsWithoutRef, useEffect, useRef } from 'react' + +import { cn } from '@/lib/utils' + +type Level = 2 | 3 + +interface HeadingProps extends Omit, 'children'> { + id: string + level: Level + children: React.ReactNode +} + +const tags = { 2: 'h2', 3: 'h3' } as const + +export function Heading({ id, level, className, children, ...props }: HeadingProps) { + const ref = useRef(null) + const Tag = tags[level] + + useEffect(() => { + if (window.location.hash === `#${id}`) { + ref.current?.scrollIntoView({ behavior: 'smooth' }) + } + }, [id]) + + return ( + + + # + + {children} + + ) +} diff --git a/packages/website/src/main.tsx b/packages/website/src/main.tsx index fcbeac9..70b661f 100644 --- a/packages/website/src/main.tsx +++ b/packages/website/src/main.tsx @@ -1,15 +1,21 @@ import { createRoot } from 'react-dom/client' import { Router } from 'wouter' -import { useHashLocation } from 'wouter/use-hash-location' import { LanguageProvider } from './i18n/context' import { default as PagesRouter } from './router' import './index.css' +// Redirect legacy hash routes (e.g. /#/docs/foo) to clean paths +const { hash } = window.location +if (hash.length > 1 && hash.includes('/')) { + const path = hash.replace(/^#\/?/, '/') + history.replaceState(null, '', '/page-agent' + path) +} + createRoot(document.getElementById('root')!).render( - + diff --git a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx b/packages/website/src/pages/docs/advanced/custom-ui/page.tsx index 1624bc3..e0d5416 100644 --- a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx +++ b/packages/website/src/pages/docs/advanced/custom-ui/page.tsx @@ -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 */}
-

{isZh ? '架构' : 'Architecture'}

+ + {isZh ? '架构' : 'Architecture'} +

{isZh ? 'PageAgent 由三个独立模块组成，可自由组合：' @@ -45,7 +48,9 @@ export default function CustomUIDocs() { {/* Two Event Streams */}

-

{isZh ? '两个事件流' : 'Two Event Streams'}

+ + {isZh ? '两个事件流' : 'Two Event Streams'} +

{isZh ? 'PageAgentCore 提供两种不同性质的事件流，方便 UI 渲染：' @@ -120,7 +125,9 @@ export default function CustomUIDocs() { {/* All Events */}

-

{isZh ? '所有事件' : 'All Events'}

+ + {isZh ? '所有事件' : 'All Events'} + -

HistoricalEvent

+ + HistoricalEvent +

{isZh ? 'agent.history 数组中的事件类型：' : 'Event types in agent.history array:'}

@@ -172,7 +181,9 @@ export default function CustomUIDocs() { {/* AgentActivity Types */}
-

AgentActivity

+ + AgentActivity +

{isZh ? 'activity 事件的 detail 类型：' : 'The detail type of activity events:'}

@@ -191,9 +202,9 @@ export default function CustomUIDocs() { {/* React Hooks Example */}
-

+ {isZh ? '使用 React Hooks' : 'Using React Hooks'} -

+

{isZh ? '监听事件并更新 React 状态：' : 'Listen to events and update React state:'}

@@ -229,9 +240,13 @@ export default function CustomUIDocs() { {/* Assembly Example */}
-

+ {isZh ? '组装 Core + Controller + 自定义 UI' : 'Assembling Core + Controller + Custom UI'} -

+

{isZh ? '参考内置 PageAgent 的实现方式，用自定义 UI 替换 Panel：' diff --git a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx b/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx index e9a8961..38ae5b1 100644 --- a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx +++ b/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx @@ -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 */}

-

+ {isZh ? '何时使用 PageAgentCore' : 'When to Use PageAgentCore'} -

+