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

feat: i18n for website

Browse Source
This commit is contained in:
Simon
2025-10-22 22:35:25 +08:00
parent fedeb57f48
commit cd84269427
34 changed files with 1753 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/docs/features/custom-tools/page.tsx
View File

@@ -1,21 +1,23 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
import { useTranslation } from 'react-i18next'
export default function CustomTools() {
const { t } = useTranslation('docs')
return (
<div>
<h1 className="text-4xl font-bold mb-6">自定义工具</h1>
<h1 className="text-4xl font-bold mb-6">{t('custom_tools.title')}</h1>
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI
安全调用你的业务逻辑。
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
{t('custom_tools.subtitle')}
</p>
<div className="space-y-8">
<section>
<h2 className="text-2xl font-bold mb-4">工具注册</h2>
<p className="text-foreground/80 mb-4">
每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.registration')}</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.registration_desc')}
</p>
<CodeEditor
@@ -49,13 +51,12 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">页面过滤器</h2>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.page_filter')}</h2>
<BetaNotice />
<p className="text-foreground/80 mb-4">
通过 <code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">pageFilter</code>{' '}
属性控制工具在哪些页面可见，提升安全性和用户体验。
<p className="text-gray-600 dark:text-gray-300 mb-4">
{t('custom_tools.page_filter_desc')}
</p>
<CodeEditor
@@ -82,16 +83,16 @@ const pageAgent = new PageAgent({customTools})
</section>
<section>
<h2 className="text-2xl font-bold mb-4">最佳实践</h2>
<h2 className="text-2xl font-bold mb-4">{t('custom_tools.best_practices')}</h2>
<div className="space-y-4">
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-2">
⚡ 性能优化
{t('custom_tools.bp_performance')}
</h3>
<ul className="text-foreground/80 space-y-1 text-sm">
<li>• 使用 pageFilter 减少不必要的工具加载</li>
<li>• 在 execute 函数中实现适当的缓存机制</li>
<li>• 避免在工具中执行耗时的同步操作</li>
<ul className="text-gray-600 dark:text-gray-300 space-y-1 text-sm">
<li>{t('custom_tools.bp_1')}</li>
<li>{t('custom_tools.bp_2')}</li>
<li>{t('custom_tools.bp_3')}</li>
</ul>
</div>
</div>

10
pages/docs/features/data-masking/page.tsx
View File

@@ -8,7 +8,7 @@ export default function DataMasking() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-6 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
保护敏感数据，确保 AI 处理过程中的数据安全。
</p>
@@ -19,14 +19,18 @@ export default function DataMasking() {
<h3 className="text-lg font-semibold mb-2 text-blue-900 dark:text-blue-300">
🔒 自动脱敏
</h3>
<p className="text-foreground/80">自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。</p>
<p className="text-gray-600 dark:text-gray-300">
自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。
</p>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
⚙️ 自定义规则
</h3>
<p className="text-foreground/80">支持自定义脱敏规则，适应不同业务场景的数据保护需求。</p>
<p className="text-gray-600 dark:text-gray-300">
支持自定义脱敏规则，适应不同业务场景的数据保护需求。
</p>
</div>
</div>

26
pages/docs/features/knowledge-injection/page.tsx
View File

@@ -8,7 +8,7 @@ export default function KnowledgeInjection() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。
</p>
@@ -20,8 +20,10 @@ export default function KnowledgeInjection() {
<h3 className="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-300">
🎯 系统级指令
</h3>
<p className="text-foreground/80 mb-4">为 AI 设定全局行为准则和工作风格。</p>
<ul className="list-disc list-inside space-y-2 text-foreground/70">
<p className="text-gray-600 dark:text-gray-300 mb-4">
为 AI 设定全局行为准则和工作风格。
</p>
<ul className="list-disc list-inside space-y-2 text-gray-500 dark:text-gray-400">
<li>定义 AI 的工作风格和交互方式</li>
<li>设置安全边界和操作限制</li>
<li>指定错误处理和异常情况的应对策略</li>
@@ -57,13 +59,13 @@ const pageAgent = new PageAgent({
<h3 className="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-300">
<EFBFBD> 业务领域知识
</h3>
<p className="text-foreground/80 mb-4">
<p className="text-gray-600 dark:text-gray-300 mb-4">
注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。
</p>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-2">
<h4 className="font-semibold text-blue-800 dark:text-blue-200">产品知识</h4>
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>产品功能和特性介绍</li>
<li>用户角色和权限体系</li>
<li>业务规则和约束条件</li>
@@ -71,7 +73,7 @@ const pageAgent = new PageAgent({
</div>
<div className="space-y-2">
<h4 className="font-semibold text-blue-800 dark:text-blue-200">操作指南</h4>
<ul className="list-disc list-inside text-sm text-foreground/70 space-y-1">
<ul className="list-disc list-inside text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>标准操作流程定义</li>
<li>异常情况处理方案</li>
<li>术语和概念解释</li>
@@ -111,21 +113,25 @@ pageAgent.knowledge.setAppKnowledge(\`
<h3 className="text-xl font-semibold mb-3 text-green-900 dark:text-green-300">
📄 页面级精准指导
</h3>
<p className="text-foreground/80 mb-4">
<p className="text-gray-600 dark:text-gray-300 mb-4">
为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。
</p>
<div className="grid md:grid-cols-3 gap-4">
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">元素标注</h4>
<p className="text-sm text-foreground/70">为页面元素添加语义化描述</p>
<p className="text-sm text-gray-500 dark:text-gray-400">为页面元素添加语义化描述</p>
</div>
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">交互说明</h4>
<p className="text-sm text-foreground/70">定义元素的交互行为和预期结果</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
定义元素的交互行为和预期结果
</p>
</div>
<div className="space-y-2">
<h4 className="font-semibold text-green-800 dark:text-green-200">页面逻辑</h4>
<p className="text-sm text-foreground/70">说明页面的业务逻辑和状态变化</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
说明页面的业务逻辑和状态变化
</p>
</div>
</div>
</div>

78
pages/docs/features/model-integration/page.tsx
View File

@@ -1,69 +1,78 @@
import BetaNotice from '@pages/components/BetaNotice'
import CodeEditor from '@pages/components/CodeEditor'
import { useTranslation } from 'react-i18next'
export default function ModelIntegration() {
const { t } = useTranslation('docs')
return (
<div>
<h1 className="text-4xl font-bold mb-6">模型接入</h1>
<h1 className="text-4xl font-bold mb-6">{t('model_integration.title')}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
当前支持符合 OpenAI 接口规范且支持 tool call 的模型，包括公有云服务和私有部署方案。
{t('model_integration.subtitle')}
</p>
<h2 className="text-2xl font-bold mb-3">推荐模型</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.recommended')}</h2>
<div className="grid md:grid-cols-3 gap-4 mb-6">
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300">
⚡ gpt-4.1-mini
{t('model_integration.model_gpt4_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">评估基准 ✅</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 性价比高</li>
<li>• 速度快</li>
<li>• 成功率高</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gpt4_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_gpt4_1')}</li>
<li>{t('model_integration.model_gpt4_2')}</li>
<li>{t('model_integration.model_gpt4_3')}</li>
</ul>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
💰 DeepSeek-3.2
{t('model_integration.model_deepseek_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">经济实惠</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 价格远低于同等级其他模型</li>
<li>• ToolCall 有出错率，通常能够自动修复</li>
<li>• 本网站提供的免费试用为 DeepSeek</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_deepseek_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_deepseek_1')}</li>
<li>{t('model_integration.model_deepseek_2')}</li>
<li>{t('model_integration.model_deepseek_3')}</li>
</ul>
</div>
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
🛡️ qwen3
{t('model_integration.model_qwen_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">安全合规</p>
<ul className="text-sm text-foreground/70 space-y-1">
<li>• 可控、效果尚可，价格合理</li>
<li>• ToolCall 有出错率，通常能够自动修复</li>
<li>
• 适合能给出<strong>详细步骤</strong>的场景
</li>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_qwen_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_qwen_1')}</li>
<li>{t('model_integration.model_qwen_2')}</li>
<li>{t('model_integration.model_qwen_3')}</li>
</ul>
</div>
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
⚡ gemini-2.5-flash
{t('model_integration.model_gemini_title')}
</h3>
<p className="text-sm text-foreground/80 mb-2">极其高效，成功率高，价格合理</p>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gemini_badge')}
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">可用模型</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.available')}</h2>
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
✅ 已验证可用
{t('model_integration.available_verified')}
</h3>
<div className="flex flex-wrap gap-2">
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
@@ -87,20 +96,17 @@ export default function ModelIntegration() {
</div>
</div>
<h2 className="text-2xl font-bold mb-3">提示</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.tips')}</h2>
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
<ul className="text-sm text-foreground/80 space-y-1 list-disc pl-5">
<li>reasoning 模型（如 GPT-5），速度偏慢，没有必要</li>
<li>
不保证 json schema 的模型（openAI 以外的几乎所有模型），tool call
有概率出错，通常能自动修复，建议 temperature 设置高一些
</li>
<li>小模型、nano 模型，效果不佳</li>
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-disc pl-5">
<li>{t('model_integration.tip_1')}</li>
<li>{t('model_integration.tip_2')}</li>
<li>{t('model_integration.tip_3')}</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">配置方式</h2>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.configuration')}</h2>
<CodeEditor
code={`

22
pages/docs/features/security-permissions/page.tsx
View File

@@ -7,7 +7,7 @@ export default function SecurityPermissions() {
<BetaNotice />
<p className="text-xl text-foreground/80 mb-8 leading-relaxed">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。
</p>
@@ -19,13 +19,15 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 操作黑名单
</h3>
<p className="text-foreground/80">禁止 AI 操作敏感元素，如删除按钮、支付按钮等。</p>
<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-foreground/80">明确定义 AI 可以操作的元素范围。</p>
<p className="text-gray-600 dark:text-gray-300">明确定义 AI 可以操作的元素范围。</p>
</div>
</div>
</section>
@@ -37,13 +39,13 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold text-red-900 dark:text-red-300">
🚫 URL 黑名单
</h3>
<p className="text-foreground/80">禁止 AI 访问敏感页面和危险链接。</p>
<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-foreground/80">限制 AI 只能访问预定义的安全页面。</p>
<p className="text-gray-600 dark:text-gray-300">限制 AI 只能访问预定义的安全页面。</p>
</div>
</div>
</section>
@@ -54,17 +56,21 @@ export default function SecurityPermissions() {
<h3 className="text-lg font-semibold mb-2 text-yellow-900 dark:text-yellow-300">
⚠️ 高危操作控制
</h3>
<p className="text-foreground/80 mb-3">
<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-foreground/70">对极高风险操作明确禁止执行</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-foreground/70">对中等风险操作要求用户明确同意</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
对中等风险操作要求用户明确同意
</p>
</div>
</div>
</div>