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

feat(website): layout change

Browse Source
This commit is contained in:
Simon
2026-01-11 01:40:21 +08:00
parent 78b49c8b7a
commit b487a7900b
13 changed files with 257 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/src/i18n/locales/en-US/common.ts
View File

@@ -27,14 +27,14 @@ export default {
overview: 'Overview', overview: 'Overview',
quick_start: 'Quick Start', quick_start: 'Quick Start',
limitations: 'Limitations', limitations: 'Limitations',
model_integration: 'Model Integration', models: 'Models',
custom_tools: 'Custom Tools', custom_tools: 'Custom Tools',
knowledge_injection: 'Instructions', knowledge_injection: 'Instructions',
security_permissions: 'Security & Permissions',
data_masking: 'Data Masking', data_masking: 'Data Masking',
cdn_setup: 'CDN Setup', cdn_setup: 'CDN Setup',
configuration: 'Configuration', configuration: 'Configuration',
best_practices: 'Best Practices', best_practices: 'Best Practices',
third_party_agent: 'Third-party Agent', third_party_agent: 'Third-party Agent',
security_permissions: 'Security & Permissions',
}, },
} }

6
packages/website/src/i18n/locales/en-US/docs.ts
View File

@@ -5,7 +5,7 @@ export default {
'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.', 'page-agent is a purely web-based GUI Agent. Gives your website an AI operator in simple steps.',
what_is: 'What is page-agent?', what_is: 'What is page-agent?',
what_is_desc: what_is_desc:
'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent targets web developers, not scrapers or agent clients builders. Integrate it into your site to let users interact with pages through natural language.', 'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent is built for web developers and web applications first. Integrate it into your site to let users interact with pages through natural language.',
features_title: 'Core Features', features_title: 'Core Features',
feature_dom: { feature_dom: {
title: '🧠 Smart DOM Analysis', title: '🧠 Smart DOM Analysis',
@@ -112,8 +112,8 @@ export default {
future_3: '• Basic visual understanding', future_3: '• Basic visual understanding',
future_4: '• Smarter error recovery', future_4: '• Smarter error recovery',
}, },
model_integration: { models: {
title: 'Model Integration', title: 'Models',
subtitle: subtitle:
'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.', 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities.', recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities.',

4
packages/website/src/i18n/locales/zh-CN/common.ts
View File

@@ -26,14 +26,14 @@ export default {
overview: '概览', overview: '概览',
quick_start: '快速开始', quick_start: '快速开始',
limitations: '使用限制', limitations: '使用限制',
model_integration: '模型接入', models: '模型',
custom_tools: '自定义工具', custom_tools: '自定义工具',
knowledge_injection: '知识注入', knowledge_injection: '知识注入',
security_permissions: '安全与权限',
data_masking: '数据脱敏', data_masking: '数据脱敏',
cdn_setup: 'CDN 引入', cdn_setup: 'CDN 引入',
configuration: '配置选项', configuration: '配置选项',
best_practices: '最佳实践', best_practices: '最佳实践',
third_party_agent: '接入第三方 Agent', third_party_agent: '接入第三方 Agent',
security_permissions: '安全与权限',
}, },
} }

4
packages/website/src/i18n/locales/zh-CN/docs.ts
View File

@@ -111,8 +111,8 @@ export default {
future_3: '• 基础的视觉理解能力', future_3: '• 基础的视觉理解能力',
future_4: '• 更智能的错误恢复机制', future_4: '• 更智能的错误恢复机制',
}, },
model_integration: { models: {
title: '模型接入', title: '模型',
subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。', subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。', recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型。',
recommended: '推荐模型', recommended: '推荐模型',

13
packages/website/src/pages/docs/Layout.tsx
View File

@@ -32,20 +32,23 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
{ {
title: t('nav.features'), title: t('nav.features'),
items: [ items: [
{ title: t('nav.model_integration'), path: '/docs/features/model-integration' }, { title: t('nav.models'), path: '/docs/features/model-integration' },
{ title: t('nav.custom_tools'), path: '/docs/features/custom-tools' }, { title: t('nav.custom_tools'), path: '/docs/features/custom-tools' },
{ title: t('nav.knowledge_injection'), path: '/docs/features/custom-instructions' }, { title: t('nav.knowledge_injection'), path: '/docs/features/custom-instructions' },
{ title: t('nav.security_permissions'), path: '/docs/features/security-permissions' },
{ title: t('nav.data_masking'), path: '/docs/features/data-masking' }, { title: t('nav.data_masking'), path: '/docs/features/data-masking' },
], ],
}, },
{ {
title: t('nav.integration'), title: t('nav.integration'),
items: [ items: [
{ title: t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
{ title: t('nav.configuration'), path: '/docs/integration/configuration' }, { title: t('nav.configuration'), path: '/docs/integration/configuration' },
{ title: t('nav.best_practices'), path: '/docs/integration/best-practices' },
{ title: t('nav.third_party_agent'), path: '/docs/integration/third-party-agent' }, { title: t('nav.third_party_agent'), path: '/docs/integration/third-party-agent' },
{ title: '🚧 ' + t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' },
{
title: '🚧 ' + t('nav.security_permissions'),
path: '/docs/integration/security-permissions',
},
{ title: '🚧 ' + t('nav.best_practices'), path: '/docs/integration/best-practices' },
], ],
}, },
] ]
@@ -55,7 +58,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
<div className="flex gap-8 min-w-[900px]"> <div className="flex gap-8 min-w-[900px]">
{/* Sidebar */} {/* Sidebar */}
<aside className="w-64 shrink-0" role="complementary" aria-label="文档导航"> <aside className="w-64 shrink-0" role="complementary" aria-label="文档导航">
<div className="sticky top-8"> <div className="sticky">
<nav className="space-y-8" role="navigation" aria-label="文档章节"> <nav className="space-y-8" role="navigation" aria-label="文档章节">
{navigationSections.map((section) => ( {navigationSections.map((section) => (
<section key={section.title}> <section key={section.title}>

32
packages/website/src/pages/docs/features/model-integration/page.tsx
View File

@@ -27,16 +27,14 @@ export default function ModelIntegration() {
return ( return (
<div className="max-w-4xl"> <div className="max-w-4xl">
<h1 className="text-4xl font-bold mb-4">{t('model_integration.title')}</h1> <h1 className="text-4xl font-bold mb-4">{t('models.title')}</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8"> <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">{t('models.subtitle')}</p>
{t('model_integration.subtitle')}
</p>
{/* Models Section */} {/* Models Section */}
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-3">{t('model_integration.available')}</h2> <h2 className="text-2xl font-semibold mb-3">{t('models.available')}</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
{t('model_integration.recommendation_logic')} {t('models.recommendation_logic')}
</p> </p>
<div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50"> <div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -63,41 +61,41 @@ export default function ModelIntegration() {
{/* Tips Section */} {/* Tips Section */}
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('model_integration.tips')}</h2> <h2 className="text-2xl font-semibold mb-4">{t('models.tips')}</h2>
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800"> <div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5"> <ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li>{t('model_integration.tip_2')}</li> <li>{t('models.tip_2')}</li>
<li>{t('model_integration.tip_3')}</li> <li>{t('models.tip_3')}</li>
</ul> </ul>
</div> </div>
</section> </section>
{/* Security Section */} {/* Security Section */}
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('model_integration.security')}</h2> <h2 className="text-2xl font-semibold mb-4">{t('models.security')}</h2>
<div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4"> <div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200"> <p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{t('model_integration.security_warning')} {t('models.security_warning')}
</p> </p>
</div> </div>
<div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800"> <div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2"> <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
{t('model_integration.security_backend_proxy')} {t('models.security_backend_proxy')}
</h3> </h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
{t('model_integration.security_backend_desc')} {t('models.security_backend_desc')}
</p> </p>
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>{t('model_integration.security_method_1')}</li> <li>{t('models.security_method_1')}</li>
<li>{t('model_integration.security_method_2')}</li> <li>{t('models.security_method_2')}</li>
<li>{t('model_integration.security_method_3')}</li> <li>{t('models.security_method_3')}</li>
</ul> </ul>
</div> </div>
</section> </section>
{/* Configuration Section */} {/* Configuration Section */}
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{t('model_integration.configuration')}</h2> <h2 className="text-2xl font-semibold mb-4">{t('models.configuration')}</h2>
<CodeEditor <CodeEditor
code={`// OpenAI-compatible services (e.g., Alibaba Bailian) code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
const pageAgent = new PageAgent({ const pageAgent = new PageAgent({

81
packages/website/src/pages/docs/features/security-permissions/page.tsx
View File

@@ -1,81 +0,0 @@
import BetaNotice from '@/components/BetaNotice'
export default function SecurityPermissions() {
return (
<div>
<h1 className="text-4xl font-bold mb-6">安全与权限</h1>
<BetaNotice />
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
</p>
<div className="space-y-6">
<section>
<h2 className="text-2xl font-bold mb-3">元素操作黑白名单</h2>
<div className="space-y-3">
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 操作黑名单
</h3>
<p className="text-gray-600 dark:text-gray-300">
禁止 AI 操作敏感元素，如删除按钮、支付按钮等。
</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
✅ 操作白名单
</h3>
<p className="text-gray-600 dark:text-gray-300">明确定义 AI 可以操作的元素范围。</p>
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">URL 黑白名单</h2>
<div className="space-y-3">
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 URL 黑名单
</h3>
<p className="text-gray-600 dark:text-gray-300">禁止 AI 访问敏感页面和危险链接。</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
✅ URL 白名单
</h3>
<p className="text-gray-600 dark:text-gray-300">限制 AI 只能访问预定义的安全页面。</p>
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">Instruction 安全约束</h2>
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ 高危操作控制
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-3">
在 AI 指令中明确列举高危操作，通过两种策略进行控制：
</p>
<div className="space-y-2">
<div className="pl-3 border-l-2 border-red-400">
<p className="font-medium text-red-700 dark:text-red-300">完全禁止操作</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
对极高风险操作明确禁止执行
</p>
</div>
<div className="pl-3 border-l-2 border-orange-400">
<p className="font-medium text-orange-700 dark:text-orange-300">需用户确认操作</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
对中等风险操作要求用户明确同意
</p>
</div>
</div>
</div>
</section>
</div>
</div>
)
}

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

@@ -1,44 +1,82 @@
import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice' import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
import { CDN_CN_URL, CDN_URL } from '@/constants' import { CDN_CN_URL, CDN_URL } from '@/constants'
export default function CdnSetup() { export default function CdnSetup() {
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return ( return (
<div> <div>
<h1 className="text-4xl font-bold mb-6">CDN 引入</h1> <BetaNotice />
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed"> <h1 className="text-4xl font-bold mb-6">{isZh ? 'CDN 引入' : 'CDN Setup'}</h1>
通过 CDN 快速集成 page-agent，无需复杂的构建配置。
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
{isZh
? '通过 CDN 快速集成 page-agent，无需复杂的构建配置。默认使用演示模型。'
: 'Fastest way to integrate page-agent via CDN. No complex build setup needed. Demo model will be used by default.'}
</p> </p>
<h2 className="text-2xl font-bold mb-3">快速开始</h2> <section className="mb-8">
<h2 className="text-2xl font-bold mb-4">{isZh ? 'CDN 地址' : 'CDN URLs'}</h2>
<CodeEditor <div className="overflow-x-auto mb-6">
className="mb-8" <table className="w-full border-collapse text-sm">
code={` <thead>
// CDN: \t${CDN_URL} <tr className="border-b border-gray-200 dark:border-gray-700">
// Mirror: \t${CDN_CN_URL} <th className="text-left py-3 px-4 font-semibold">{isZh ? '位置' : 'Location'}</th>
<script <th className="text-left py-3 px-4 font-semibold">URL</th>
src="${CDN_URL}" </tr>
crossorigin="true" </thead>
type="text/javascript" <tbody>
></script> <tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-3 px-4">{isZh ? '全球' : 'Global'}</td>
<td className="py-3 px-4 font-mono text-xs break-all">{CDN_URL}</td>
</tr>
<tr className="border-b border-gray-100 dark:border-gray-800">
<td className="py-3 px-4">{isZh ? '中国镜像' : 'China Mirror'}</td>
<td className="py-3 px-4 font-mono text-xs break-all">{CDN_CN_URL}</td>
</tr>
</tbody>
</table>
</div>
</section>
<script> <section className="mb-8">
// window.pageAgent <h2 className="text-2xl font-bold mb-4">{isZh ? '快速开始' : 'Quick Start'}</h2>
</script>`}
/>
<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg"> <CodeEditor
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300"> className="mb-6"
⚠️ 注意事项 code={`<script
</h3> src="${CDN_URL}"
<ul className="text-gray-600 dark:text-gray-300 space-y-1"> crossorigin="true"
<li>• 生产环境建议使用固定版本号</li> type="text/javascript"
<li>• 确保 HTTPS 环境下使用</li> ></script>`}
<li>• 配置 CSP 策略允许脚本执行</li> />
</ul> </section>
</div>
<section className="mb-8">
<div className="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ {isZh ? '注意事项' : 'Notes'}
</h3>
<ul className="text-gray-600 dark:text-gray-300 space-y-1">
<li>
• {isZh ? '生产环境建议使用固定版本号' : 'Use fixed version number in production'}
</li>
<li>• {isZh ? '确保 HTTPS 环境下使用' : 'Ensure HTTPS environment'}</li>
<li>
•{' '}
{isZh
? '配置 CSP 策略允许脚本执行'
: 'Configure CSP policy to allow script execution'}
</li>
</ul>
</div>
</section>
</div> </div>
) )
} }

74
packages/website/src/pages/docs/integration/configuration/page.tsx
View File

@@ -16,14 +16,18 @@ export default function Configuration() {
: 'Complete configuration interface for PageAgent.'} : 'Complete configuration interface for PageAgent.'}
</p> </p>
<CodeEditor {/* LLM Configuration */}
className="mb-8" <section className="mb-10">
language="typescript" <h2 className="text-2xl font-semibold mb-4">{isZh ? 'LLM 配置' : 'LLM Configuration'}</h2>
code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig <p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
// ============ LLM Configuration ============ ? '配置与大语言模型的连接参数。'
: 'Configure connection parameters for the language model.'}
interface LLMConfig { </p>
<CodeEditor
className="mb-4"
language="typescript"
code={`interface LLMConfig {
baseURL?: string baseURL?: string
apiKey?: string apiKey?: string
model?: string model?: string
@@ -35,11 +39,24 @@ interface LLMConfig {
* Use this to customize headers, credentials, proxy, etc. * Use this to customize headers, credentials, proxy, etc.
*/ */
customFetch?: typeof globalThis.fetch customFetch?: typeof globalThis.fetch
} }`}
/>
</section>
// ============ Agent Configuration ============ {/* Agent Configuration */}
<section className="mb-10">
interface AgentConfig { <h2 className="text-2xl font-semibold mb-4">
{isZh ? 'Agent 配置' : 'Agent Configuration'}
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '配置 Agent 的行为、生命周期钩子和扩展能力。'
: 'Configure agent behavior, lifecycle hooks, and extension capabilities.'}
</p>
<CodeEditor
className="mb-4"
language="typescript"
code={`interface AgentConfig {
language?: 'en-US' | 'zh-CN' language?: 'en-US' | 'zh-CN'
/** Custom tools to extend or override built-in tools */ /** Custom tools to extend or override built-in tools */
@@ -69,11 +86,24 @@ interface AgentConfig {
/** @experimental Enable JavaScript execution tool */ /** @experimental Enable JavaScript execution tool */
experimentalScriptExecutionTool?: boolean experimentalScriptExecutionTool?: boolean
} }`}
/>
</section>
// ============ PageController Configuration ============ {/* PageController Configuration */}
<section className="mb-10">
interface PageControllerConfig { <h2 className="text-2xl font-semibold mb-4">
{isZh ? 'PageController 配置' : 'PageController Configuration'}
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-4">
{isZh
? '配置 DOM 提取、元素交互和视觉高亮的细节。'
: 'Configure DOM extraction, element interaction, and visual highlighting.'}
</p>
<CodeEditor
className="mb-4"
language="typescript"
code={`interface PageControllerConfig {
/** Elements to exclude from interaction */ /** Elements to exclude from interaction */
interactiveBlacklist?: (Element | (() => Element))[] interactiveBlacklist?: (Element | (() => Element))[]
@@ -92,7 +122,17 @@ interface PageControllerConfig {
/** Viewport expansion in pixels (-1 for full page) */ /** Viewport expansion in pixels (-1 for full page) */
viewportExpansion?: number viewportExpansion?: number
}`} }`}
/> />
</section>
{/* Complete Type */}
<section className="mb-10">
<h2 className="text-2xl font-semibold mb-4">{isZh ? '完整类型' : 'Complete Type'}</h2>
<CodeEditor
language="typescript"
code={`type PageAgentConfig = LLMConfig & AgentConfig & PageControllerConfig`}
/>
</section>
</div> </div>
) )
} }

90
packages/website/src/pages/docs/integration/security-permissions/page.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice'
export default function SecurityPermissions() {
const { i18n } = useTranslation()
const isZh = i18n.language === 'zh-CN'
return (
<div>
<BetaNotice />
<h1 className="text-4xl font-bold mb-6">{isZh ? '安全与权限' : 'Security & Permissions'}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
{isZh
? 'page-agent 提供多种安全机制，确保 AI 操作在可控范围内进行。'
: 'page-agent provides multiple security mechanisms to ensure AI operations stay within controlled boundaries.'}
</p>
<div className="space-y-6">
<section>
<h2 className="text-2xl font-bold mb-3">
{isZh ? '元素操作黑白名单' : 'Element Interaction Allowlist/Blocklist'}
</h2>
<div className="space-y-3">
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 {isZh ? '操作黑名单' : 'Blocklist'}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{isZh
? '禁止 AI 操作敏感元素，如删除按钮、支付按钮等。'
: 'Prevent AI from interacting with sensitive elements like delete buttons, payment buttons, etc.'}
</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-green-900 dark:text-green-300">
✅ {isZh ? '操作白名单' : 'Allowlist'}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{isZh
? '明确定义 AI 可以操作的元素范围。'
: 'Explicitly define which elements AI can interact with.'}
</p>
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold mb-3">
{isZh ? 'Instruction 安全约束' : 'Instruction Safety Constraints'}
</h2>
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ {isZh ? '高危操作控制' : 'High-Risk Operation Control'}
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-3">
{isZh
? '在 AI 指令中明确列举高危操作，通过两种策略进行控制：'
: 'Define high-risk operations in AI instructions and control them through two strategies:'}
</p>
<div className="space-y-2">
<div className="pl-3 border-l-2 border-red-400">
<p className="font-medium text-red-700 dark:text-red-300">
{isZh ? '完全禁止操作' : 'Completely Forbidden'}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
{isZh
? '对极高风险操作明确禁止执行'
: 'Explicitly prohibit execution of extremely high-risk operations'}
</p>
</div>
<div className="pl-3 border-l-2 border-orange-400">
<p className="font-medium text-orange-700 dark:text-orange-300">
{isZh ? '需用户确认操作' : 'Requires User Confirmation'}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
{isZh
? '对中等风险操作要求用户明确同意'
: 'Require explicit user consent for medium-risk operations'}
</p>
</div>
</div>
</div>
</section>
</div>
</div>
)
}

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

@@ -74,19 +74,6 @@ const pageAgentTool = {
</div> </div>
</div> </div>
<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
<div className="space-y-4 mb-6">
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">错误处理</h3>
<CodeEditor code={`// @TODO`} language="javascript" />
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">权限控制</h3>
<CodeEditor code={`// @TODO`} language="javascript" />
</div>
</div>
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6"> <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-100 mb-2"> <h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-100 mb-2">
⚠️ 注意事项 ⚠️ 注意事项
@@ -97,19 +84,6 @@ const pageAgentTool = {
<li>• 敏感操作建议要求人工确认</li> <li>• 敏感操作建议要求人工确认</li>
</ul> </ul>
</div> </div>
<div className="bg-linear-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">🎉 开始集成</h3>
<p className="mb-3 text-gray-700 dark:text-gray-300">
通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。
</p>
<a
href="/docs/integration/configuration"
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
>
查看配置选项 →
</a>
</div>
</div> </div>
) )
} }

4
packages/website/src/pages/docs/introduction/overview/page.tsx
View File

@@ -6,13 +6,13 @@ export default function Overview() {
return ( return (
<article> <article>
{/* 头图 */} {/* 头图 */}
<figure className="mb-8 rounded-xl overflow-hidden"> {/* <figure className="mb-8 rounded-xl overflow-hidden">
<img <img
src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp" src="https://img.alicdn.com/imgextra/i3/O1CN014xLeic1gnF2iWdzjJ_!!6000000004186-49-tps-1280-353.webp"
alt="page-agent" alt="page-agent"
className="w-full h-64 object-cover" className="w-full h-64 object-cover"
/> />
</figure> </figure> */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1> <h1 className="text-4xl font-bold mb-4">{t('overview.title')}</h1>

20
packages/website/src/router.tsx
View File

@@ -8,11 +8,11 @@ import Instructions from './pages/docs/features/custom-instructions/page'
import CustomTools from './pages/docs/features/custom-tools/page' import CustomTools from './pages/docs/features/custom-tools/page'
import DataMasking from './pages/docs/features/data-masking/page' import DataMasking from './pages/docs/features/data-masking/page'
import ModelIntegration from './pages/docs/features/model-integration/page' import ModelIntegration from './pages/docs/features/model-integration/page'
import SecurityPermissions from './pages/docs/features/security-permissions/page'
// Integration pages // Integration pages
import BestPractices from './pages/docs/integration/best-practices/page' import BestPractices from './pages/docs/integration/best-practices/page'
import CdnSetup from './pages/docs/integration/cdn-setup/page' import CdnSetup from './pages/docs/integration/cdn-setup/page'
import Configuration from './pages/docs/integration/configuration/page' import Configuration from './pages/docs/integration/configuration/page'
import SecurityPermissions from './pages/docs/integration/security-permissions/page'
import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page' import ThirdPartyAgent from './pages/docs/integration/third-party-agent/page'
// Introduction pages // Introduction pages
import Limitations from './pages/docs/introduction/limitations/page' import Limitations from './pages/docs/introduction/limitations/page'
@@ -53,15 +53,6 @@ export default function Router() {
</div> </div>
</Route> </Route>
<Route path="/docs/features/security-permissions">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<SecurityPermissions />
</DocsLayout>
</div>
</Route>
<Route path="/docs/features/custom-tools"> <Route path="/docs/features/custom-tools">
<div className="min-h-screen bg-white dark:bg-gray-900"> <div className="min-h-screen bg-white dark:bg-gray-900">
<Header /> <Header />
@@ -107,6 +98,15 @@ export default function Router() {
</div> </div>
</Route> </Route>
<Route path="/docs/integration/security-permissions">
<div className="min-h-screen bg-white dark:bg-gray-900">
<Header />
<DocsLayout>
<SecurityPermissions />
</DocsLayout>
</div>
</Route>
<Route path="/docs/integration/configuration"> <Route path="/docs/integration/configuration">
<div className="min-h-screen bg-white dark:bg-gray-900"> <div className="min-h-screen bg-white dark:bg-gray-900">
<Header /> <Header />