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

docs: update cdn urls

Browse Source
This commit is contained in:
Simon
2026-01-19 19:31:07 +08:00
parent 3d10953324
commit b3bfbb96bb
4 changed files with 30 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -37,7 +37,7 @@ Fastest way to try PageAgent:
```html ```html
<script <script
src="https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js" src="https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js"
crossorigin="true" crossorigin="true"
></script> ></script>
``` ```
@@ -46,8 +46,8 @@ Fastest way to try PageAgent:
| Mirrors | URL | | Mirrors | URL |
| ------- | ----------------------------------------------------------------------------------- | | ------- | ----------------------------------------------------------------------------------- |
| Global | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js | | Global | https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js |
| China | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js | | China | https://registry.npmmirror.com/page-agent/latest/files/dist/iife/page-agent.demo.js |
### NPM Installation ### NPM Installation
@@ -68,8 +68,6 @@ const agent = new PageAgent({
await agent.execute('Click the login button') await agent.execute('Click the login button')
``` ```
For environments where NPM is not available. We do offer a IIFE build via CDN. [@see CDN Usage](https://alibaba.github.io/page-agent/#/docs/integration/cdn-setup)
## 🏗️ Structure ## 🏗️ Structure
PageAgent adopts a simplified monorepo structure: PageAgent adopts a simplified monorepo structure:

9
packages/website/src/constants.ts
View File

@@ -1,12 +1,7 @@
// Demo build (auto-init with demo LLM, for quick testing) // Demo build (auto-init with demo LLM, for quick testing)
export const CDN_DEMO_URL = 'https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js' export const CDN_DEMO_URL = 'https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js'
export const CDN_DEMO_CN_URL = export const CDN_DEMO_CN_URL =
'https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js' 'https://registry.npmmirror.com/page-agent/latest/files/dist/iife/page-agent.demo.js'
// Full build (exports PageAgent class, usage identical to npm)
export const CDN_FULL_URL = 'https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.js'
export const CDN_FULL_CN_URL =
'https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.js'
// Demo LLM for website testing // Demo LLM for website testing
export const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM' export const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'

59
packages/website/src/pages/docs/integration/cdn-setup/page.tsx
View File

@@ -1,7 +1,7 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
import { CDN_DEMO_CN_URL, CDN_DEMO_URL, CDN_FULL_CN_URL, CDN_FULL_URL } from '@/constants' import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
export default function CdnSetup() { export default function CdnSetup() {
const { i18n } = useTranslation() const { i18n } = useTranslation()
@@ -63,63 +63,6 @@ export default function CdnSetup() {
</tbody> </tbody>
</table> </table>
</section> </section>
{/* CDN Build Section */}
<section>
<h2 className="text-2xl font-bold mb-3">{isZh ? '📦 标准版' : '📦 Standard Build'}</h2>
<p className="text-gray-600 dark:text-gray-300 mb-3">
{isZh
? '将 PageAgent 类暴露到 globalThis，用法与 NPM 一致：'
: 'Exposes PageAgent class to globalThis, usage identical to NPM:'}
</p>
<CodeEditor
className="mb-4"
code={`<script src="${CDN_FULL_URL}" crossorigin="true"></script>
<script>
const agent = new PageAgent({
model: 'deepseek-chat',
baseURL: 'https://api.deepseek.com',
apiKey: 'YOUR_API_KEY',
})
await agent.execute('Click the submit button')
</script>`}
/>
<table className="w-full border-collapse text-sm">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-700">
<th className="text-left py-2 px-3 font-semibold w-28">
{isZh ? '位置' : 'Location'}
</th>
<th className="text-left py-2 px-3 font-semibold">URL</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-2 px-3">{isZh ? '全球' : 'Global'}</td>
<td className="py-2 px-3 font-mono text-xs break-all">{CDN_FULL_URL}</td>
</tr>
<tr>
<td className="py-2 px-3">{isZh ? '中国' : 'China'}</td>
<td className="py-2 px-3 font-mono text-xs break-all">{CDN_FULL_CN_URL}</td>
</tr>
</tbody>
</table>
</section>
{/* Tips */}
<section className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
<h3 className="text-base font-semibold mb-2 text-blue-900 dark:text-blue-300">
💡 {isZh ? '提示' : 'Tips'}
</h3>
<ul className="text-gray-600 dark:text-gray-300 text-sm space-y-1">
<li>• {isZh ? '生产环境推荐使用 NPM' : 'NPM is recommended for production'}</li>
<li>• {isZh ? '生产环境建议锁定版本号' : 'Lock version number in production'}</li>
<li>• {isZh ? '确保 HTTPS 环境' : 'Ensure HTTPS environment'}</li>
</ul>
</section>
</div> </div>
) )
} }

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

@@ -1,6 +1,5 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants' import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
@@ -28,11 +27,29 @@ export default function QuickStart() {
</span> </span>
</div> </div>
<CodeEditor <CodeEditor
code={`// Global: ${CDN_DEMO_URL} code={`<script src="${isZh ? CDN_DEMO_CN_URL : CDN_DEMO_URL}" crossorigin="true"></script>`}
// China: ${CDN_DEMO_CN_URL}
<script src="${isZh ? CDN_DEMO_CN_URL : CDN_DEMO_URL}" crossorigin="true"></script>`}
language="html" language="html"
/> />
<table className="w-full border-collapse text-sm">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-700">
<th className="text-left py-2 px-3 font-semibold w-28">
{isZh ? '镜像' : 'Mirrors'}
</th>
<th className="text-left py-2 px-3 font-semibold">URL</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-2 px-3">{isZh ? '全球' : 'Global'}</td>
<td className="py-2 px-3 font-mono text-xs break-all">{CDN_DEMO_URL}</td>
</tr>
<tr>
<td className="py-2 px-3">{isZh ? '中国' : 'China'}</td>
<td className="py-2 px-3 font-mono text-xs break-all">{CDN_DEMO_CN_URL}</td>
</tr>
</tbody>
</table>
</div> </div>
{/* NPM - Recommended */} {/* NPM - Recommended */}
@@ -41,7 +58,7 @@ export default function QuickStart() {
{isZh ? '📦 NPM 安装（推荐）' : '📦 NPM Install (Recommended)'} {isZh ? '📦 NPM 安装（推荐）' : '📦 NPM Install (Recommended)'}
</h3> </h3>
<CodeEditor <CodeEditor
code={`npm install page-agent code={`// npm install page-agent
import { PageAgent } from 'page-agent'`} import { PageAgent } from 'page-agent'`}
language="bash" language="bash"
@@ -71,7 +88,8 @@ import { PageAgent } from 'page-agent'`}
code={`// ${isZh ? '程序化执行自然语言指令' : 'Execute natural language instructions programmatically'} code={`// ${isZh ? '程序化执行自然语言指令' : 'Execute natural language instructions programmatically'}
await agent.execute('${isZh ? '点击提交按钮，然后填写用户名为张三' : 'Click submit button, then fill username as John'}'); await agent.execute('${isZh ? '点击提交按钮，然后填写用户名为张三' : 'Click submit button, then fill username as John'}');
// ${isZh ? '或者显示对话框让用户输入指令' : 'Or show panel for user to input instructions'} // ${isZh ? '或者' : 'Or:'}
// ${isZh ? '显示对话框让用户输入指令' : 'Show panel for user to input instructions'}
agent.panel.show() agent.panel.show()
`} `}
language="javascript" language="javascript"