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

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

@@ -27,16 +27,14 @@ export default function ModelIntegration() {
return (
<div className="max-w-4xl">
<h1 className="text-4xl font-bold mb-4">{t('model_integration.title')}</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
{t('model_integration.subtitle')}
</p>
<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">{t('models.subtitle')}</p>
{/* Models Section */}
<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">
{t('model_integration.recommendation_logic')}
{t('models.recommendation_logic')}
</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="flex flex-wrap gap-2">
@@ -63,41 +61,41 @@ export default function ModelIntegration() {
{/* Tips Section */}
<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">
<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('model_integration.tip_3')}</li>
<li>{t('models.tip_2')}</li>
<li>{t('models.tip_3')}</li>
</ul>
</div>
</section>
{/* Security Section */}
<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">
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{t('model_integration.security_warning')}
{t('models.security_warning')}
</p>
</div>
<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">
{t('model_integration.security_backend_proxy')}
{t('models.security_backend_proxy')}
</h3>
<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>
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>{t('model_integration.security_method_1')}</li>
<li>{t('model_integration.security_method_2')}</li>
<li>{t('model_integration.security_method_3')}</li>
<li>{t('models.security_method_1')}</li>
<li>{t('models.security_method_2')}</li>
<li>{t('models.security_method_3')}</li>
</ul>
</div>
</section>
{/* Configuration Section */}
<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
code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
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>
)
}