From cd842694274d3e9c770858fb5552cd9805716562 Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Wed, 22 Oct 2025 22:35:25 +0800 Subject: [PATCH] feat: i18n for website --- index.html | 25 ++- package-lock.json | 102 ++++++++++ package.json | 3 + pages/components/BetaNotice.tsx | 10 +- pages/components/DocsLayout.tsx | 68 +++---- pages/components/Footer.tsx | 10 +- pages/components/Header.tsx | 154 +++++++++------ pages/components/HighlightSyntax.module.css | 24 +++ pages/components/HighlightSyntax.tsx | 10 +- pages/components/LanguageSwitcher.tsx | 115 ++++++++++++ pages/components/ThemeSwitcher.tsx | 133 +++++++++++++ pages/docs/features/custom-tools/page.tsx | 35 ++-- pages/docs/features/data-masking/page.tsx | 10 +- .../features/knowledge-injection/page.tsx | 26 ++- .../docs/features/model-integration/page.tsx | 78 ++++---- .../features/security-permissions/page.tsx | 22 ++- .../docs/integration/best-practices/page.tsx | 12 +- pages/docs/integration/cdn-setup/page.tsx | 2 +- .../integration/third-party-agent/page.tsx | 22 ++- pages/docs/introduction/limitations/page.tsx | 120 ++++++------ pages/docs/introduction/overview/page.tsx | 171 ++++++++++------- pages/docs/introduction/quick-start/page.tsx | 19 +- pages/i18n/README.md | 74 ++++++++ pages/i18n/config.ts | 45 +++++ pages/i18n/locales/en-US/common.ts | 40 ++++ pages/i18n/locales/en-US/docs.ts | 162 ++++++++++++++++ pages/i18n/locales/en-US/home.ts | 78 ++++++++ pages/i18n/locales/zh-CN/common.ts | 39 ++++ pages/i18n/locales/zh-CN/docs.ts | 158 ++++++++++++++++ pages/i18n/locales/zh-CN/home.ts | 78 ++++++++ pages/i18n/types.ts | 16 ++ pages/index.css | 177 +++++++++++++++++- pages/main.tsx | 2 + pages/page.tsx | 120 +++++++----- 34 files changed, 1753 insertions(+), 407 deletions(-) create mode 100644 pages/components/LanguageSwitcher.tsx create mode 100644 pages/components/ThemeSwitcher.tsx create mode 100644 pages/i18n/README.md create mode 100644 pages/i18n/config.ts create mode 100644 pages/i18n/locales/en-US/common.ts create mode 100644 pages/i18n/locales/en-US/docs.ts create mode 100644 pages/i18n/locales/en-US/home.ts create mode 100644 pages/i18n/locales/zh-CN/common.ts create mode 100644 pages/i18n/locales/zh-CN/docs.ts create mode 100644 pages/i18n/locales/zh-CN/home.ts create mode 100644 pages/i18n/types.ts diff --git a/index.html b/index.html index c0b9285..824462b 100644 --- a/index.html +++ b/index.html @@ -8,25 +8,38 @@ href="https://img.alicdn.com/imgextra/i3/O1CN01uo9VaC20mamWNM2Zn_!!6000000006892-55-tps-64-64.svg" /> - PageAgent - 网页内的交互助手 + PageAgent - AI-powered UI Agent in Your Webpage - - + + - + +
+ diff --git a/package-lock.json b/package-lock.json index a9b02cf..66839b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,10 +32,13 @@ "eslint-plugin-react-x": "^2.0.6", "globals": "^16.4.0", "husky": "^9.1.7", + "i18next": "^25.6.0", + "i18next-browser-languagedetector": "^8.2.0", "lint-staged": "^16.2.4", "prettier": "^3.6.2", "react": "^19.2.0", "react-dom": "^19.2.0", + "react-i18next": "^16.1.4", "tailwindcss": "^4.1.14", "typescript": "^5.9.3", "typescript-eslint": "^8.46.0", @@ -277,6 +280,16 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", + "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.27.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", @@ -4553,6 +4566,16 @@ "hermes-estree": "0.25.1" } }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dev": true, + "license": "MIT", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/husky": { "version": "9.1.7", "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz", @@ -4569,6 +4592,48 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/i18next": { + "version": "25.6.0", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.6.0.tgz", + "integrity": "sha512-tTn8fLrwBYtnclpL5aPXK/tAYBLWVvoHM1zdfXoRNLcI+RvtMsoZRV98ePlaW3khHYKuNh/Q65W/+NVFUeIwVw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.27.6" + }, + "peerDependencies": { + "typescript": "^5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz", + "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -5874,6 +5939,33 @@ "react": "^19.2.0" } }, + "node_modules/react-i18next": { + "version": "16.1.4", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.1.4.tgz", + "integrity": "sha512-0UUKZDHjKnLk6dfbYXEZ9CVqLMpNiul+dHbPVQo2z2t1GkdirkeHXb/TtdsNuv+nyNOTDl1Jp6F6uwf9M3DMcg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.27.6", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 25.5.2", + "react": ">= 16.8.0", + "typescript": "^5" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/regexparam": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-3.0.0.tgz", @@ -6738,6 +6830,16 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/vscode-uri": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz", diff --git a/package.json b/package.json index a54f625..614cd38 100644 --- a/package.json +++ b/package.json @@ -74,10 +74,13 @@ "eslint-plugin-react-x": "^2.0.6", "globals": "^16.4.0", "husky": "^9.1.7", + "i18next": "^25.6.0", + "i18next-browser-languagedetector": "^8.2.0", "lint-staged": "^16.2.4", "prettier": "^3.6.2", "react": "^19.2.0", "react-dom": "^19.2.0", + "react-i18next": "^16.1.4", "tailwindcss": "^4.1.14", "typescript": "^5.9.3", "typescript-eslint": "^8.46.0", diff --git a/pages/components/BetaNotice.tsx b/pages/components/BetaNotice.tsx index a50b75d..720b883 100644 --- a/pages/components/BetaNotice.tsx +++ b/pages/components/BetaNotice.tsx @@ -1,4 +1,8 @@ +import { useTranslation } from 'react-i18next' + export default function BetaNotice() { + const { t } = useTranslation('common') + return (
@@ -7,11 +11,9 @@ export default function BetaNotice() {

- Beta 阶段 + {t('beta_notice.title')}

-

- 当前功能未完成，接口可能随时变更。正式版本发布前请勿用于生产环境。 -

+

{t('beta_notice.content')}

diff --git a/pages/components/DocsLayout.tsx b/pages/components/DocsLayout.tsx index 8fb9184..5f7458a 100644 --- a/pages/components/DocsLayout.tsx +++ b/pages/components/DocsLayout.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react' +import { useTranslation } from 'react-i18next' import { Link, useLocation } from 'wouter' interface DocsLayoutProps { @@ -15,39 +16,40 @@ interface NavSection { items: NavItem[] } -const navigationSections: NavSection[] = [ - { - title: 'Introduction', - items: [ - { title: 'Overview', path: '/docs/introduction/overview' }, - { title: 'Quick Start', path: '/docs/introduction/quick-start' }, - { title: '使用限制', path: '/docs/introduction/limitations' }, - ], - }, - { - title: 'Features', - items: [ - { title: '模型接入', path: '/docs/features/model-integration' }, - { title: '自定义工具', path: '/docs/features/custom-tools' }, - { title: '知识库注入', path: '/docs/features/knowledge-injection' }, - { title: '安全与权限', path: '/docs/features/security-permissions' }, - { title: '数据脱敏', path: '/docs/features/data-masking' }, - ], - }, - { - title: 'Integration', - items: [ - { title: 'CDN 引入', path: '/docs/integration/cdn-setup' }, - { title: '配置选项', path: '/docs/integration/configuration' }, - { title: '最佳实践', path: '/docs/integration/best-practices' }, - { title: '接入第三方 Agent', path: '/docs/integration/third-party-agent' }, - ], - }, -] - export default function DocsLayout({ children }: DocsLayoutProps) { + const { t } = useTranslation('common') const [location] = useLocation() + const navigationSections: NavSection[] = [ + { + title: t('nav.introduction'), + items: [ + { title: t('nav.overview'), path: '/docs/introduction/overview' }, + { title: t('nav.quick_start'), path: '/docs/introduction/quick-start' }, + { title: t('nav.limitations'), path: '/docs/introduction/limitations' }, + ], + }, + { + title: t('nav.features'), + items: [ + { title: t('nav.model_integration'), path: '/docs/features/model-integration' }, + { title: t('nav.custom_tools'), path: '/docs/features/custom-tools' }, + { title: t('nav.knowledge_injection'), path: '/docs/features/knowledge-injection' }, + { title: t('nav.security_permissions'), path: '/docs/features/security-permissions' }, + { title: t('nav.data_masking'), path: '/docs/features/data-masking' }, + ], + }, + { + title: t('nav.integration'), + items: [ + { title: t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' }, + { 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' }, + ], + }, + ] + return (
@@ -57,7 +59,9 @@ export default function DocsLayout({ children }: DocsLayoutProps) { + + {/* Mobile menu button */} + +
- - + + ) } diff --git a/pages/components/HighlightSyntax.module.css b/pages/components/HighlightSyntax.module.css index a1a47eb..75f0b81 100644 --- a/pages/components/HighlightSyntax.module.css +++ b/pages/components/HighlightSyntax.module.css @@ -3,19 +3,43 @@ word-break: break-word; overflow-wrap: break-word; font-family: monospace; + color: #171717; +} + +:global(.dark) .syntax { + color: #e0e0e0; } .keyword { color: #d73a49; font-weight: 600; } + +:global(.dark) .keyword { + color: #ff6b6b; +} + .string { color: #1d6eca; } + +:global(.dark) .string { + color: #4fc3f7; +} + .number { color: #00c583; } + +:global(.dark) .number { + color: #66bb6a; +} + .comment { color: #6a737d; font-style: italic; } + +:global(.dark) .comment { + color: #9e9e9e; +} diff --git a/pages/components/HighlightSyntax.tsx b/pages/components/HighlightSyntax.tsx index e340ddd..6d0d671 100644 --- a/pages/components/HighlightSyntax.tsx +++ b/pages/components/HighlightSyntax.tsx @@ -46,19 +46,19 @@ function highlightSyntax(code: string): string { /^'([^'\\]|\\.)*'$/.test(token) || /^`([^`\\]|\\.)*`$/.test(token) ) { - return `${token}` + return `${token}` } if (/^\b\d+\.?\d*\b$/.test(token)) { - return `${token}` + return `${token}` } if (/^\/\/.*$/.test(token)) { - return `${token}` + return `${token}` } if (/^\/\*[\s\S]*?\*\/$/.test(token)) { - return `${token}` + return `${token}` } if (new RegExp(`\\b(?:${keywords})\\b`).test(token)) { - return `${token}` + return `${token}` } return token }) diff --git a/pages/components/LanguageSwitcher.tsx b/pages/components/LanguageSwitcher.tsx new file mode 100644 index 0000000..30d8433 --- /dev/null +++ b/pages/components/LanguageSwitcher.tsx @@ -0,0 +1,115 @@ +import { useEffect, useRef, useState } from 'react' +import { useTranslation } from 'react-i18next' + +export default function LanguageSwitcher() { + const { i18n, t } = useTranslation('common') + const [isOpen, setIsOpen] = useState(false) + const dropdownRef = useRef(null) + + const currentLang = i18n.language + + const languages = [ + { code: 'zh-CN', label: '中文' }, + { code: 'en-US', label: 'English' }, + ] + + const currentLanguage = languages.find((lang) => lang.code === currentLang) || languages[0] + + const handleLanguageChange = (langCode: string) => { + i18n.changeLanguage(langCode) + setIsOpen(false) + } + + // Close dropdown when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false) + } + } + + if (isOpen) { + document.addEventListener('mousedown', handleClickOutside) + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside) + } + }, [isOpen]) + + return ( +
+ + + {isOpen && ( +
+ {languages.map((lang) => ( + + ))} +
+ )} +
+ ) +} diff --git a/pages/components/ThemeSwitcher.tsx b/pages/components/ThemeSwitcher.tsx new file mode 100644 index 0000000..30180f1 --- /dev/null +++ b/pages/components/ThemeSwitcher.tsx @@ -0,0 +1,133 @@ +import { useEffect, useState } from 'react' + +type Theme = 'light' | 'dark' + +export default function ThemeSwitcher() { + const [theme, setTheme] = useState(() => { + // 初始化时读取保存的主题 + if (typeof window !== 'undefined') { + const savedTheme = localStorage.getItem('theme') as Theme | null + if (savedTheme === 'light' || savedTheme === 'dark') { + return savedTheme + } + // 默认跟随系统 + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + return 'light' + }) + + useEffect(() => { + // 应用主题 + if (theme === 'dark') { + document.documentElement.classList.add('dark') + document.documentElement.style.colorScheme = 'dark' + } else { + document.documentElement.classList.remove('dark') + document.documentElement.style.colorScheme = 'light' + } + // 保存到 localStorage + localStorage.setItem('theme', theme) + }, [theme]) + + // 监听系统主题变化 + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') + + const handleSystemThemeChange = (e: MediaQueryListEvent) => { + // 只有在用户未手动设置时才自动跟随系统 + const savedTheme = localStorage.getItem('theme') + if (!savedTheme) { + setTheme(e.matches ? 'dark' : 'light') + } + } + + mediaQuery.addEventListener('change', handleSystemThemeChange) + return () => mediaQuery.removeEventListener('change', handleSystemThemeChange) + }, []) + + const toggleTheme = () => { + setTheme((prev) => (prev === 'light' ? 'dark' : 'light')) + } + + return ( + + ) +} diff --git a/pages/docs/features/custom-tools/page.tsx b/pages/docs/features/custom-tools/page.tsx index 38b18f0..fdfcd34 100644 --- a/pages/docs/features/custom-tools/page.tsx +++ b/pages/docs/features/custom-tools/page.tsx @@ -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 (
-

自定义工具

+

{t('custom_tools.title')}

-

- 通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI - 安全调用你的业务逻辑。 +

+ {t('custom_tools.subtitle')}

-

工具注册

-

- 每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。 +

{t('custom_tools.registration')}

+

+ {t('custom_tools.registration_desc')}

-

页面过滤器

+

{t('custom_tools.page_filter')}

-

- 通过 pageFilter{' '} - 属性控制工具在哪些页面可见，提升安全性和用户体验。 +

+ {t('custom_tools.page_filter_desc')}

-

最佳实践

+

{t('custom_tools.best_practices')}

- ⚡ 性能优化 + {t('custom_tools.bp_performance')}

-
    -
  • • 使用 pageFilter 减少不必要的工具加载
    • -
  • • 在 execute 函数中实现适当的缓存机制
    • -
  • • 避免在工具中执行耗时的同步操作
    • +
      +
    • {t('custom_tools.bp_1')}
      • +
    • {t('custom_tools.bp_2')}
      • +
    • {t('custom_tools.bp_3')}
diff --git a/pages/docs/features/data-masking/page.tsx b/pages/docs/features/data-masking/page.tsx index 7ce41ca..0311d4a 100644 --- a/pages/docs/features/data-masking/page.tsx +++ b/pages/docs/features/data-masking/page.tsx @@ -8,7 +8,7 @@ export default function DataMasking() { -

+

保护敏感数据，确保 AI 处理过程中的数据安全。

@@ -19,14 +19,18 @@ export default function DataMasking() {

🔒 自动脱敏

-

自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。

+

+ 自动识别并脱敏手机号、身份证号、银行卡号等敏感信息。 +

⚙️ 自定义规则

-

支持自定义脱敏规则，适应不同业务场景的数据保护需求。

+

+ 支持自定义脱敏规则，适应不同业务场景的数据保护需求。 +

diff --git a/pages/docs/features/knowledge-injection/page.tsx b/pages/docs/features/knowledge-injection/page.tsx index 01c8c8f..d74f2ab 100644 --- a/pages/docs/features/knowledge-injection/page.tsx +++ b/pages/docs/features/knowledge-injection/page.tsx @@ -8,7 +8,7 @@ export default function KnowledgeInjection() { -

+

通过多层次的知识注入，让 AI 深度理解你的业务场景和应用逻辑，实现更精准的自动化操作。

@@ -20,8 +20,10 @@ export default function KnowledgeInjection() {

🎯 系统级指令

-

为 AI 设定全局行为准则和工作风格。

-
    +

    + 为 AI 设定全局行为准则和工作风格。 +

    +
    • 定义 AI 的工作风格和交互方式
    • 设置安全边界和操作限制
    • 指定错误处理和异常情况的应对策略
      • @@ -57,13 +59,13 @@ const pageAgent = new PageAgent({

      � 业务领域知识

      -

      +

      注入应用的核心业务知识，包括产品介绍、操作流程、术语定义等，让 AI 理解业务上下文。

      产品知识

      -
        +
        • 产品功能和特性介绍
        • 用户角色和权限体系
        • 业务规则和约束条件
          • @@ -71,7 +73,7 @@ const pageAgent = new PageAgent({

      操作指南

      -
        +
        • 标准操作流程定义
        • 异常情况处理方案
        • 术语和概念解释
          • @@ -111,21 +113,25 @@ pageAgent.knowledge.setAppKnowledge(\`

          📄 页面级精准指导

          -

          +

          为特定页面提供精确的操作指导和元素说明，让 AI 准确理解页面结构和交互逻辑。

          元素标注

          -

          为页面元素添加语义化描述

          +

          为页面元素添加语义化描述

          交互说明

          -

          定义元素的交互行为和预期结果

          +

          + 定义元素的交互行为和预期结果 +

          页面逻辑

          -

          说明页面的业务逻辑和状态变化

          +

          + 说明页面的业务逻辑和状态变化 +

      diff --git a/pages/docs/features/model-integration/page.tsx b/pages/docs/features/model-integration/page.tsx index 7006323..96eb40d 100644 --- a/pages/docs/features/model-integration/page.tsx +++ b/pages/docs/features/model-integration/page.tsx @@ -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 (
      -

      模型接入

      +

      {t('model_integration.title')}

      - 当前支持符合 OpenAI 接口规范且支持 tool call 的模型，包括公有云服务和私有部署方案。 + {t('model_integration.subtitle')}

      -

      推荐模型

      +

      {t('model_integration.recommended')}

      - ⚡ gpt-4.1-mini + {t('model_integration.model_gpt4_title')}

      -

      评估基准 ✅

      -
        -
      • • 性价比高
        • -
      • • 速度快
        • -
      • • 成功率高
        • +

        + {t('model_integration.model_gpt4_badge')} +

        +
          +
        • {t('model_integration.model_gpt4_1')}
          • +
        • {t('model_integration.model_gpt4_2')}
          • +
        • {t('model_integration.model_gpt4_3')}

      - 💰 DeepSeek-3.2 + {t('model_integration.model_deepseek_title')}

      -

      经济实惠

      -
        -
      • • 价格远低于同等级其他模型
        • -
      • • ToolCall 有出错率，通常能够自动修复
        • -
      • • 本网站提供的免费试用为 DeepSeek
        • +

        + {t('model_integration.model_deepseek_badge')} +

        +
          +
        • {t('model_integration.model_deepseek_1')}
          • +
        • {t('model_integration.model_deepseek_2')}
          • +
        • {t('model_integration.model_deepseek_3')}

      - 🛡️ qwen3 + {t('model_integration.model_qwen_title')}

      -

      安全合规

      -
        -
      • • 可控、效果尚可，价格合理
        • -
      • • ToolCall 有出错率，通常能够自动修复
        • -
      • - • 适合能给出详细步骤的场景 -
        • +

        + {t('model_integration.model_qwen_badge')} +

        +
          +
        • {t('model_integration.model_qwen_1')}
          • +
        • {t('model_integration.model_qwen_2')}
          • +
        • {t('model_integration.model_qwen_3')}

      - ⚡ gemini-2.5-flash + {t('model_integration.model_gemini_title')}

      -

      极其高效，成功率高，价格合理

      +

      + {t('model_integration.model_gemini_badge')} +

      -

      可用模型

      +

      {t('model_integration.available')}

      - ✅ 已验证可用 + {t('model_integration.available_verified')}

      @@ -87,20 +96,17 @@ export default function ModelIntegration() {
      -

      提示

      +

      {t('model_integration.tips')}

      -
        -
      • reasoning 模型（如 GPT-5），速度偏慢，没有必要
        • -
      • - 不保证 json schema 的模型（openAI 以外的几乎所有模型），tool call - 有概率出错，通常能自动修复，建议 temperature 设置高一些 -
        • -
      • 小模型、nano 模型，效果不佳
        • +
          +
        • {t('model_integration.tip_1')}
          • +
        • {t('model_integration.tip_2')}
          • +
        • {t('model_integration.tip_3')}
      -

      配置方式

      +

      {t('model_integration.configuration')}

      -

      +

      page-agent 提供四种安全机制，确保 AI 操作在可控范围内进行。

      @@ -19,13 +19,15 @@ export default function SecurityPermissions() {

      🚫 操作黑名单

      -

      禁止 AI 操作敏感元素，如删除按钮、支付按钮等。

      +

      + 禁止 AI 操作敏感元素，如删除按钮、支付按钮等。 +

      ✅ 操作白名单

      -

      明确定义 AI 可以操作的元素范围。

      +

      明确定义 AI 可以操作的元素范围。

      @@ -37,13 +39,13 @@ export default function SecurityPermissions() {

      🚫 URL 黑名单

      -

      禁止 AI 访问敏感页面和危险链接。

      +

      禁止 AI 访问敏感页面和危险链接。

      ✅ URL 白名单

      -

      限制 AI 只能访问预定义的安全页面。

      +

      限制 AI 只能访问预定义的安全页面。

      @@ -54,17 +56,21 @@ export default function SecurityPermissions() {

      ⚠️ 高危操作控制

      -

      +

      在 AI 指令中明确列举高危操作，通过两种策略进行控制：

      完全禁止操作

      -

      对极高风险操作明确禁止执行

      +

      + 对极高风险操作明确禁止执行 +

      需用户确认操作

      -

      对中等风险操作要求用户明确同意

      +

      + 对中等风险操作要求用户明确同意 +

      diff --git a/pages/docs/integration/best-practices/page.tsx b/pages/docs/integration/best-practices/page.tsx index 0699856..a3c162e 100644 --- a/pages/docs/integration/best-practices/page.tsx +++ b/pages/docs/integration/best-practices/page.tsx @@ -19,7 +19,9 @@ export default function BestPractices() {

      ⚡ 减少 API 调用

      -

      合并多个操作指令，减少与 AI 模型的交互次数。

      +

      + 合并多个操作指令，减少与 AI 模型的交互次数。 +

      🎯 精确的元素描述 -

      使用具体、明确的元素描述，提高操作成功率。

      +

      + 使用具体、明确的元素描述，提高操作成功率。 +

      @@ -45,12 +49,12 @@ await pageAgent.execute('点击提交按钮');`}

      重要操作保护

      -

      对删除、支付等敏感操作设置黑名单保护。

      +

      对删除、支付等敏感操作设置黑名单保护。

      数据脱敏

      -

      启用数据脱敏功能，保护用户隐私信息。

      +

      启用数据脱敏功能，保护用户隐私信息。

      diff --git a/pages/docs/integration/cdn-setup/page.tsx b/pages/docs/integration/cdn-setup/page.tsx index b4eed33..4b3ebf5 100644 --- a/pages/docs/integration/cdn-setup/page.tsx +++ b/pages/docs/integration/cdn-setup/page.tsx @@ -27,7 +27,7 @@ export default function CdnSetup() {

      ⚠️ 注意事项

      -
        +
        • • 生产环境建议使用固定版本号
        • • 确保 HTTPS 环境下使用
        • • 配置 CSP 策略允许脚本执行
          • diff --git a/pages/docs/integration/third-party-agent/page.tsx b/pages/docs/integration/third-party-agent/page.tsx index 477eed0..cf96b9d 100644 --- a/pages/docs/integration/third-party-agent/page.tsx +++ b/pages/docs/integration/third-party-agent/page.tsx @@ -4,14 +4,14 @@ export default function ThirdPartyAgentPage() { return (

          接入第三方 Agent

          -

          +

          将 pageAgent 作为工具接入你的答疑助手或 Agent 系统，成为你 Agent 的眼和手。

          💡 核心价值

          - 让你的 Agent 不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。 + 让你的答疑机器人不再只是"嘴巴"，而是拥有"眼睛"和"手"的完整智能体。

          @@ -49,25 +49,25 @@ const pageAgentTool = {

          应用场景

          -

          🤖 智能客服系统

          +

          🤖 智能客服系统

          客服机器人帮用户直接操作系统，如"帮我提交工单"

          -

          📋 业务流程助手

          +

          📋 业务流程助手

          引导新员工完成复杂流程，如"完成客户入职"

          -

          🎯 个人效率助手

          +

          🎯 个人效率助手

          跨网站帮你完成任务，如"预订会议室"

          -

          🔧 运维自动化

          +

          🔧 运维自动化

          通过自然语言操作管理后台，如"重启服务器"

          @@ -77,12 +77,12 @@ const pageAgentTool = {

          最佳实践

          -

          错误处理

          +

          错误处理

          -

          权限控制

          +

          权限控制

          @@ -99,8 +99,10 @@ const pageAgentTool = {
          -

          🎉 开始集成

          -

          通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。

          +

          🎉 开始集成

          +

          + 通过这种方式，你的 Agent 系统就能真正成为用户的智能助手。 +

          -

          使用限制

          -

          - 了解 page-agent 当前的功能边界和技术限制 -

          +

          + {t('limitations.title')} +

          +

          {t('limitations.subtitle')}

          -

          页面支持限制

          +

          {t('limitations.page_support')}

          -

          单页应用限制

          +

          + {t('limitations.spa_limit_title')} +

            -
          • - • 仅支持单页应用（SPA）：目前只能在单个页面内进行操作 -
            • -
          • - • 多页接力功能正在设计中：暂时无法跨页面执行连续任务 -
            • -
          • - • 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent -
            • +
          • {t('limitations.spa_limit_1')}
            • +
          • {t('limitations.spa_limit_2')}
            • +
          • {t('limitations.spa_limit_3')}
          -

          交互行为限制

          +

          {t('limitations.interaction_limits')}

          -

          支持的操作

          +

          {t('limitations.supported_ops')}

          ✅ - 点击操作 + {t('limitations.op_click')}
          ✅ - 文本输入 + {t('limitations.op_input')}
          ✅ - 页面滚动 + {t('limitations.op_scroll')}
          ✅ - 表单提交 + {t('limitations.op_submit')}
          ✅ - 选择操作 + {t('limitations.op_select')}
          -
          ✅ - 焦点切换 + {t('limitations.op_focus')}
          -

          不支持的操作

          +

          {t('limitations.unsupported_ops')}

          ❌ - 鼠标悬停（hover） + {t('limitations.op_hover')}
          ❌ - 拖拽操作 + {t('limitations.op_drag')}
          ❌ - 右键菜单 + {t('limitations.op_context')}
          ❌ - 图形绘制 + {t('limitations.op_draw')}
          ❌ - 键盘快捷键 + {t('limitations.op_keyboard')}
          ❌ - 基于点击区域或鼠标位置的控制 + {t('limitations.op_position')}
          -

          网页理解限制

          +

          {t('limitations.understanding_limits')}

          -

          无视觉能力

          -

          - page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力 - ，无法理解以下内容： -

          +

          + {t('limitations.no_vision_title')} +

          +

          {t('limitations.no_vision_desc')}

            -
          • - • 图片内容：无法识别图片中的文字、图标或视觉元素 -
            • -
          • - • Canvas 画布：无法理解 Canvas 中绘制的图形和内容 -
            • -
          • - • WebGL 3D 内容：无法操作 3D 场景中的元素 -
            • -
          • - • SVG 图形：无法理解 SVG 中的视觉内容和路径 -
            • +
          • {t('limitations.no_vision_1')}
            • +
          • {t('limitations.no_vision_2')}
            • +
          • {t('limitations.no_vision_3')}
            • +
          • {t('limitations.no_vision_4')}
          -

          被操作网站要求

          +

          {t('limitations.website_requirements')}

          -

          语义化和易用性

          +

          {t('limitations.req_semantic_title')}

          - 所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 - accessibility 特性，可能影响 AI 的理解准确性。 + {t('limitations.req_semantic_desc')}

          -

          UI/UX

          -

          - 反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 - AI 的理解和操作。 -

          +

          {t('limitations.req_ux_title')}

          +

          {t('limitations.req_ux_desc')}

          -

          环境要求

          -

          modern browser

          +

          {t('limitations.req_env_title')}

          +

          {t('limitations.req_env_desc')}

          -

          未来规划

          +

          {t('limitations.future')}

          -

          即将支持

          +

          + {t('limitations.future_title')} +

            -
          • • 多页面接力操作能力
            • -
          • • 更丰富的鼠标交互支持
            • -
          • • 基础的视觉理解能力
            • -
          • • 更智能的错误恢复机制
            • +
          • {t('limitations.future_1')}
            • +
          • {t('limitations.future_2')}
            • +
          • {t('limitations.future_3')}
            • +
          • {t('limitations.future_4')}
          diff --git a/pages/docs/introduction/overview/page.tsx b/pages/docs/introduction/overview/page.tsx index cbdb6f4..76a361e 100644 --- a/pages/docs/introduction/overview/page.tsx +++ b/pages/docs/introduction/overview/page.tsx @@ -1,75 +1,117 @@ +import { useTranslation } from 'react-i18next' + export default function Overview() { + const { t } = useTranslation('docs') + return (
          {/* 头图 */}
          page-agent 概览图示
          -

          Overview

          +
          -

          什么是 page-agent？

          +

          {t('overview.what_is')}

          -

          - page-agent 是一个页面内嵌式 UI Agent。 - 与传统的浏览器自动化工具不同，page-agent 面向网站开发者 - ，而非爬虫或通用Agent开发者，将 Agent 集成到你的网站中， - 让用户可以通过自然语言与页面进行交互。 +

          + {t('overview.what_is_desc')}

          -

          核心特性

          +

          {t('overview.features_title')}

          - 🧠 智能 DOM 理解 + {t('overview.feature_dom.title')}

          -

          基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。

          +

          {t('overview.feature_dom.desc')}

          - 🔒 安全可控 + {t('overview.feature_secure.title')}

          -

          - 支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。 -

          +

          {t('overview.feature_secure.desc')}

          - ⚡ 零后端部署 + {t('overview.feature_backend.title')}

          -

          CDN 或 NPM 引入，自定义 LLM 接入点。

          +

          {t('overview.feature_backend.desc')}

          - ♿ 普惠智能 + {t('overview.feature_accessible.title')}

          -

          为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。

          +

          + {t('overview.feature_accessible.desc')} +

          -

          与 browser-use 的区别

          +

          {t('overview.vs_browser_use')}

          - - - - - + + + + +
          - 特性 + {t('overview.table_feature')} page-agent @@ -82,103 +124,88 @@ export default function Overview() {
          - 部署方式 + {t('overview.table_deployment')} - 页面内嵌组件 + {t('overview.table_deployment_pa')} 外部工具
          - 操作范围 - 当前页面 - 整个浏览器 + {t('overview.table_deployment_bu')}
          - 目标用户 + {t('overview.table_scope')} - 网站开发者 + {t('overview.table_scope_pa')} - 爬虫/Agent 开发者 + {t('overview.table_scope_bu')}
          - 使用场景 + {t('overview.table_user')} - 用户体验增强 + {t('overview.table_user_pa')} - 自动化任务 + {t('overview.table_user_bu')} +
          + {t('overview.table_scenario')} + + {t('overview.table_scenario_pa')} + + {t('overview.table_scenario_bu')}
          -

          应用场景

          +

          {t('overview.use_cases_title')}

          • - + 1 -
            - 对接答疑机器人： - 把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。 +
            + {t('overview.use_case1_title')} {t('overview.use_case1_desc')}
          • - + 2 -
            - 交互升级/智能化改造： - 一行代码，老应用变身Agent，产品专家帮用户操作复杂 B - 端软件。降低人工支持成本，提高用户满意度。 +
            + {t('overview.use_case2_title')} {t('overview.use_case2_desc')}
          • - + 3 -
            - 产品教学： - 向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。 +
            + {t('overview.use_case3_title')} {t('overview.use_case3_desc')}
          • - + 4 -
            - 无障碍支持： - 为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。 +
            + {t('overview.use_case4_title')} {t('overview.use_case4_desc')}
          - -
          -

          🚀 开始使用

          -

          - 准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。 -

          - - 快速开始 → - -
          ) diff --git a/pages/docs/introduction/quick-start/page.tsx b/pages/docs/introduction/quick-start/page.tsx index 54114e0..1519d5e 100644 --- a/pages/docs/introduction/quick-start/page.tsx +++ b/pages/docs/introduction/quick-start/page.tsx @@ -1,23 +1,26 @@ import BetaNotice from '@pages/components/BetaNotice' import CodeEditor from '@pages/components/CodeEditor' +import { useTranslation } from 'react-i18next' export default function QuickStart() { + const { t } = useTranslation('docs') + return (
          -

          Quick Start

          +

          {t('quick_start.title')}

          -

          几分钟内完成 page-agent 的集成。

          +

          {t('quick_start.subtitle')}

          -

          安装步骤

          +

          {t('quick_start.installation')}

          - 1. 引入方式 + {t('quick_start.step1_title')}

          -

          CDN 引入

          +

          {t('quick_start.step1_cdn')}

          `} @@ -25,7 +28,7 @@ export default function QuickStart() { />
          -

          NPM 安装

          +

          {t('quick_start.step1_npm')}

          - 2. 初始化配置 + {t('quick_start.step2_title')}

          - 3. 开始使用 + {t('quick_start.step3_title')}

          {t('header.nav_docs')} +} +``` + +### 使用多个命名空间 + +```tsx +const { t } = useTranslation(['home', 'common']) + +// 使用时指定命名空间 +t('home:hero.title') +t('common:header.nav_docs') +``` + +## 语言切换 + +用户可以通过以下方式切换语言： + +1. **自动检测**：首次访问根据浏览器语言自动选择 +2. **手动切换**：点击页面右上角的语言切换按钮 +3. **持久化**：语言选择保存在 `localStorage` 中，刷新后保持 + +## 添加新翻译 + +1. 在对应的 JSON 文件中添加翻译条目（如 `zh-CN/home.json`） +2. 在对应的英文文件中添加翻译（如 `en-US/home.json`） +3. 在组件中使用 `t('namespace:key')` 获取翻译 + +## TypeScript 支持 + +`types.ts` 文件提供了类型声明，使得翻译 key 具有： + +- 自动补全 +- 编译期类型检查 +- 防止拼写错误 + +## 待完成 + +- [ ] 文档页翻译（`docs.json`） +- [ ] DocsLayout 导航结构国际化 +- [ ] 404 页面国际化 + diff --git a/pages/i18n/config.ts b/pages/i18n/config.ts new file mode 100644 index 0000000..601bc25 --- /dev/null +++ b/pages/i18n/config.ts @@ -0,0 +1,45 @@ +import i18n from 'i18next' +import LanguageDetector from 'i18next-browser-languagedetector' +import { initReactI18next } from 'react-i18next' + +import commonEn from './locales/en-US/common' +import docsEn from './locales/en-US/docs' +import homeEn from './locales/en-US/home' +import commonZh from './locales/zh-CN/common' +import docsZh from './locales/zh-CN/docs' +import homeZh from './locales/zh-CN/home' + +const resources = { + 'zh-CN': { + common: commonZh, + home: homeZh, + docs: docsZh, + }, + 'en-US': { + common: commonEn, + home: homeEn, + docs: docsEn, + }, +} + +i18n + .use(LanguageDetector) + .use(initReactI18next) + .init({ + resources, + fallbackLng: 'en-US', + defaultNS: 'common', + + // 语言检测配置 + detection: { + // localStorage 优先（用户手动选择），其次检测浏览器语言 + order: ['localStorage', 'navigator'], + caches: ['localStorage'], + }, + + interpolation: { + escapeValue: false, // React 已经做了 XSS 防护 + }, + }) + +export default i18n diff --git a/pages/i18n/locales/en-US/common.ts b/pages/i18n/locales/en-US/common.ts new file mode 100644 index 0000000..7eab18d --- /dev/null +++ b/pages/i18n/locales/en-US/common.ts @@ -0,0 +1,40 @@ +export default { + header: { + logo_alt: 'page-agent home', + slogan: 'GUI Agent in your webpage', + nav_docs: 'Docs', + nav_source: 'GitHub', + mobile_menu: 'Open mobile menu', + }, + footer: { + copyright: '© 2025 page-agent. All rights reserved.', + github_label: 'Visit GitHub repository', + }, + beta_notice: { + title: 'Beta Stage', + content: + 'Current features are incomplete and the API may change at any time. Please do not use in production environments before the official release.', + }, + language: { + zh: '中文', + en: 'English', + switch_label: 'Switch language', + }, + nav: { + introduction: 'Introduction', + features: 'Features', + integration: 'Integration', + overview: 'Overview', + quick_start: 'Quick Start', + limitations: 'Limitations', + model_integration: 'Model Integration', + custom_tools: 'Custom Tools', + knowledge_injection: 'Knowledge Injection', + security_permissions: 'Security & Permissions', + data_masking: 'Data Masking', + cdn_setup: 'CDN Setup', + configuration: 'Configuration', + best_practices: 'Best Practices', + third_party_agent: 'Third-party Agent', + }, +} diff --git a/pages/i18n/locales/en-US/docs.ts b/pages/i18n/locales/en-US/docs.ts new file mode 100644 index 0000000..aca5fec --- /dev/null +++ b/pages/i18n/locales/en-US/docs.ts @@ -0,0 +1,162 @@ +export default { + overview: { + title: 'Overview', + subtitle: + 'page-agent is a pure web-based GUI Agent. Simple integration gives your website an AI operator.', + what_is: 'What is page-agent?', + what_is_desc: + 'page-agent is an embedded GUI Agent. Unlike traditional browser automation tools, page-agent targets web developers, not scrapers or generic agent builders. Integrate it into your site to let users interact with pages through natural language.', + features_title: 'Core Features', + feature_dom: { + title: '🧠 Smart DOM Analysis', + desc: 'DOM-based analysis with high-intensity dehydration. No visual recognition needed—pure text for precise operations.', + }, + feature_secure: { + title: '🔒 Secure & Controllable', + desc: 'Supports operation allowlists, data masking protection. Inject custom knowledge to make AI work by your rules.', + }, + feature_backend: { + title: '⚡ Zero Backend', + desc: 'CDN or NPM import with custom LLM endpoints.', + }, + feature_accessible: { + title: '♿ Accessible Intelligence', + desc: 'Provides natural language interface for complex B2B systems and admin panels. Makes software easy for everyone.', + }, + vs_browser_use: 'vs. browser-use', + table_feature: 'Feature', + table_deployment: 'Deployment', + table_deployment_pa: 'Embedded component', + table_deployment_bu: 'External tool', + table_scope: 'Scope', + table_scope_pa: 'Current page', + table_scope_bu: 'Entire browser', + table_user: 'Target Users', + table_user_pa: 'Web developers', + table_user_bu: 'Scraper/Agent developers', + table_scenario: 'Use Case', + table_scenario_pa: 'UX enhancement', + table_scenario_bu: 'Automation tasks', + use_cases_title: 'Use Cases', + use_case1_title: 'Connect Support Bots:', + use_case1_desc: + "Turn your support assistant into a full agent. Customer service bots no longer just say 'Please click the settings button then click...'—they operate for users directly.", + use_case2_title: 'Modernize Legacy Apps:', + use_case2_desc: + 'One line of code transforms old apps into agents. Product experts help users navigate complex B2B software. Reduce support costs and improve satisfaction.', + use_case3_title: 'Interactive Training:', + use_case3_desc: + "Demonstrate workflows in real-time. Let AI show the complete process of 'how to submit an expense report.'", + use_case4_title: 'Accessibility:', + use_case4_desc: + 'Provide natural language interaction for visually impaired and elderly users. Connect screen readers or voice assistants to make software accessible to everyone.', + get_started_title: '🚀 Get Started', + get_started_desc: + 'Ready to add an AI operator to your website? Check our quick start guide for integration in minutes.', + get_started_button: 'Quick Start →', + }, + quick_start: { + title: 'Quick Start', + subtitle: 'Integrate page-agent in minutes.', + installation: 'Installation Steps', + step1_title: '1. Import Options', + step1_cdn: 'CDN Import', + step1_npm: 'NPM Install', + step2_title: '2. Initialize Configuration', + step3_title: '3. Start Using', + }, + limitations: { + title: 'Limitations', + subtitle: "Understand page-agent's current capabilities and technical constraints", + page_support: 'Page Support Limitations', + spa_limit_title: 'Single Page Application Limits', + spa_limit_1: '• SPA only: Currently operates within a single page', + spa_limit_2: '• Multi-page relay in design: Cannot execute continuous tasks across pages yet', + spa_limit_3: '• Requires integration: Cannot operate on sites without page-agent', + interaction_limits: 'Interaction Limitations', + supported_ops: 'Supported Operations', + op_click: 'Click', + op_input: 'Text input', + op_scroll: 'Scroll', + op_submit: 'Form submit', + op_select: 'Select', + op_focus: 'Focus', + unsupported_ops: 'Unsupported Operations', + op_hover: 'Mouse hover', + op_drag: 'Drag & drop', + op_context: 'Right-click menu', + op_draw: 'Drawing', + op_keyboard: 'Keyboard shortcuts', + op_position: 'Position-based control', + understanding_limits: 'Understanding Limitations', + no_vision_title: 'No Visual Recognition', + no_vision_desc: + 'page-agent operates based on DOM structure with no visual recognition. Cannot understand:', + no_vision_1: '• Image content: Cannot recognize text, icons, or visual elements in images', + no_vision_2: '• Canvas: Cannot understand graphics drawn on Canvas', + no_vision_3: '• WebGL 3D: Cannot operate elements in 3D scenes', + no_vision_4: '• SVG graphics: Cannot understand visual content and paths in SVG', + website_requirements: 'Website Requirements', + req_semantic_title: 'Semantic & Usability', + req_semantic_desc: + 'All operations rely on semantic tags and attributes. Poor semantic structure or lack of accessibility features may affect AI understanding accuracy.', + req_ux_title: 'UI/UX', + req_ux_desc: + 'Counter-intuitive interaction rules, visual-only operation hints, complex mouse interactions, or rapidly appearing/disappearing elements can affect AI understanding and operation.', + req_env_title: 'Environment', + req_env_desc: 'modern browser', + future: 'Future Plans', + future_title: 'Coming Soon', + future_1: '• Multi-page relay capabilities', + future_2: '• Richer mouse interaction support', + future_3: '• Basic visual understanding', + future_4: '• Smarter error recovery', + }, + model_integration: { + title: 'Model Integration', + subtitle: + 'Supports OpenAI-compatible models with tool call support, including public cloud services and private deployments.', + recommended: 'Recommended Models', + model_gpt4_title: '⚡ gpt-4.1-mini', + model_gpt4_badge: 'Evaluation Baseline ✅', + model_gpt4_1: '• Cost-effective', + model_gpt4_2: '• Fast', + model_gpt4_3: '• High success rate', + model_deepseek_title: '💰 DeepSeek-3.2', + model_deepseek_badge: 'Economical', + model_deepseek_1: '• Much cheaper than similar models', + model_deepseek_2: '• ToolCall may error but usually auto-recovers', + model_deepseek_3: "• This site's free demo uses DeepSeek", + model_qwen_title: '🛡️ qwen3', + model_qwen_badge: 'Secure & Compliant', + model_qwen_1: '• Controllable, decent results, reasonable price', + model_qwen_2: '• ToolCall may error but usually auto-recovers', + model_qwen_3: '• Best for scenarios with detailed steps', + model_gemini_title: '⚡ gemini-2.5-flash', + model_gemini_badge: 'Highly efficient, high success rate, reasonable price', + available: 'Available Models', + available_verified: '✅ Verified Working', + tips: 'Tips', + tip_1: 'Reasoning models (like GPT-5) are slower with no advantage', + tip_2: + "Non-OpenAI models don't guarantee JSON schema compliance—tool call may error but usually recovers. Higher temperature recommended", + tip_3: 'Small/nano models perform poorly', + configuration: 'Configuration', + }, + custom_tools: { + title: 'Custom Tools', + subtitle: + 'Extend AI Agent capabilities by registering custom tools. Use Zod to define strict input schemas for safe business logic calls.', + registration: 'Tool Registration', + registration_desc: + 'Each custom tool requires four core properties: name, description, input schema, and execute function.', + page_filter: 'Page Filter', + page_filter_desc: + 'Control tool visibility on specific pages via the pageFilter property to enhance security and UX.', + best_practices: 'Best Practices', + bp_performance: '⚡ Performance Optimization', + bp_1: '• Use pageFilter to reduce unnecessary tool loading', + bp_2: '• Implement appropriate caching in execute functions', + bp_3: '• Avoid long-running sync operations in tools', + }, +} diff --git a/pages/i18n/locales/en-US/home.ts b/pages/i18n/locales/en-US/home.ts new file mode 100644 index 0000000..1598bb2 --- /dev/null +++ b/pages/i18n/locales/en-US/home.ts @@ -0,0 +1,78 @@ +export default { + hero: { + badge: 'GUI Agent in your webpage', + title_line1: 'An AI Operator', + title_line2: 'Living in Your Web Apps', + subtitle_emoji: '🪄 One line of CDN', + subtitle_main: ' adds intelligent GUI Agents to your website.', + subtitle_detail: 'Users give natural language commands, AI handles the rest.', + tab_try: '🚀 Try It Now', + tab_other: '🌐 Try on Other Sites', + input_placeholder: 'Describe what you want AI to do...', + execute_button: 'Run', + default_task: 'Navigate to docs, find data masking section, and summarize in markdown', + }, + try_other: { + step1_title: 'Step 1:', + step1_content: 'Show your bookmarks bar', + step2_title: 'Step 2:', + step2_content: 'Drag this button to your bookmarks', + step3_title: 'Step 3:', + step3_content: 'Click the bookmark on any site to activate', + notice_title: '⚠️ Heads Up', + notice_items: { + item1: 'Demo only—link may expire without notice', + item2: 'This free demo uses DeepSeek API (see their terms and privacy policy)', + item3: 'Some sites block script injection (CSP policies)', + item4: 'Works on single-page apps only—reload required after navigation', + item5: 'Text-only understanding—no image recognition or drag-and-drop', + item6_prefix: 'Full limitations in', + item6_link: 'Docs', + }, + }, + benefits: { + no_backend: 'Zero Backend', + private_model: 'Your Own Models', + data_masking: 'Built-in Privacy', + open_source: 'MIT Open Source', + }, + features: { + section_title: 'Why PageAgent', + dom_understanding: { + title: 'Smart DOM Analysis', + desc: 'Analyzes page structure without screenshots or vision models. Pure text understanding for fast, accurate automation.', + }, + secure_integration: { + title: 'Secure by Design', + desc: 'Control what AI can access with allowlists, data masking, and custom knowledge injection. Your rules, your data.', + }, + zero_backend: { + title: 'Zero Backend Setup', + desc: 'Just drop in a script tag. Works with any LLM provider—OpenAI, Anthropic, or your own models.', + }, + accessible: { + title: 'Natural Language UI', + desc: 'Transform complex admin panels into chat interfaces. Make powerful tools accessible to everyone, not just experts.', + }, + }, + use_cases: { + section_title: 'Where It Shines', + section_subtitle: 'From simple forms to complex workflows, AI understands and executes', + case1: { + title: 'Supercharge Support Bots', + desc: 'Stop telling users where to click—let AI do it for them. Turn your chatbot from a guide into an operator that actually completes tasks.', + }, + case2: { + title: 'Modernize Legacy Apps', + desc: 'Add AI superpowers to old software without rebuilding. One script tag transforms complex enterprise tools into chat-driven interfaces.', + }, + case3: { + title: 'Interactive Walkthroughs', + desc: "Show, don't tell. Let AI demonstrate workflows in real-time—perfect for onboarding or training new users on complex systems.", + }, + case4: { + title: 'Accessibility First', + desc: 'Make web apps accessible through natural language. Perfect for screen readers, voice control, or users who find traditional interfaces challenging.', + }, + }, +} diff --git a/pages/i18n/locales/zh-CN/common.ts b/pages/i18n/locales/zh-CN/common.ts new file mode 100644 index 0000000..203bd1d --- /dev/null +++ b/pages/i18n/locales/zh-CN/common.ts @@ -0,0 +1,39 @@ +export default { + header: { + logo_alt: 'page-agent 首页', + slogan: 'GUI Agent in your webpage', + nav_docs: '文档', + nav_source: 'GitHub', + mobile_menu: '打开移动端菜单', + }, + footer: { + copyright: '© 2025 page-agent. All rights reserved.', + github_label: '访问 GitHub 仓库', + }, + beta_notice: { + title: 'Beta 阶段', + content: '当前功能未完成，接口可能随时变更。正式版本发布前请勿用于生产环境。', + }, + language: { + zh: '中文', + en: 'English', + switch_label: '切换语言', + }, + nav: { + introduction: '介绍', + features: '功能特性', + integration: '集成指南', + overview: '概览', + quick_start: '快速开始', + limitations: '使用限制', + model_integration: '模型接入', + custom_tools: '自定义工具', + knowledge_injection: '知识库注入', + security_permissions: '安全与权限', + data_masking: '数据脱敏', + cdn_setup: 'CDN 引入', + configuration: '配置选项', + best_practices: '最佳实践', + third_party_agent: '接入第三方 Agent', + }, +} diff --git a/pages/i18n/locales/zh-CN/docs.ts b/pages/i18n/locales/zh-CN/docs.ts new file mode 100644 index 0000000..49a0452 --- /dev/null +++ b/pages/i18n/locales/zh-CN/docs.ts @@ -0,0 +1,158 @@ +export default { + overview: { + title: 'Overview', + subtitle: 'page-agent 是一个完全基于Web技术的 GUI Agent，简单引入，让你的网站拥有 AI 操作员。', + what_is: '什么是 page-agent？', + what_is_desc: + 'page-agent 是一个页面内嵌式 GUI Agent。与传统的浏览器自动化工具不同，page-agent 面向网站开发者，而非爬虫或通用Agent开发者，将 Agent 集成到你的网站中，让用户可以通过自然语言与页面进行交互。', + features_title: '核心特性', + feature_dom: { + title: '🧠 智能 DOM 理解', + desc: '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。', + }, + feature_secure: { + title: '🔒 安全可控', + desc: '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。', + }, + feature_backend: { + title: '⚡ 零后端部署', + desc: 'CDN 或 NPM 引入，自定义 LLM 接入点。', + }, + feature_accessible: { + title: '♿ 普惠智能', + desc: '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。', + }, + vs_browser_use: '与 browser-use 的区别', + table_feature: '特性', + table_deployment: '部署方式', + table_deployment_pa: '页面内嵌组件', + table_deployment_bu: '外部工具', + table_scope: '操作范围', + table_scope_pa: '当前页面', + table_scope_bu: '整个浏览器', + table_user: '目标用户', + table_user_pa: '网站开发者', + table_user_bu: '爬虫/Agent 开发者', + table_scenario: '使用场景', + table_scenario_pa: '用户体验增强', + table_scenario_bu: '自动化任务', + use_cases_title: '应用场景', + use_case1_title: '对接答疑机器人：', + use_case1_desc: + '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。', + use_case2_title: '交互升级/智能化改造：', + use_case2_desc: + '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。', + use_case3_title: '产品教学：', + use_case3_desc: + '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。', + use_case4_title: '无障碍支持：', + use_case4_desc: + '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。', + get_started_title: '🚀 开始使用', + get_started_desc: + '准备好为你的网站添加 AI 操作员了吗？查看我们的快速开始指南，几分钟内完成集成。', + get_started_button: '快速开始 →', + }, + quick_start: { + title: 'Quick Start', + subtitle: '几分钟内完成 page-agent 的集成。', + installation: '安装步骤', + step1_title: '1. 引入方式', + step1_cdn: 'CDN 引入', + step1_npm: 'NPM 安装', + step2_title: '2. 初始化配置', + step3_title: '3. 开始使用', + }, + limitations: { + title: '使用限制', + subtitle: '了解 page-agent 当前的功能边界和技术限制', + page_support: '页面支持限制', + spa_limit_title: '单页应用限制', + spa_limit_1: '• 仅支持单页应用（SPA）：目前只能在单个页面内进行操作', + spa_limit_2: '• 多页接力功能正在设计中：暂时无法跨页面执行连续任务', + spa_limit_3: '• 无法操作未接入该能力的网站：需要目标网站主动集成 page-agent', + interaction_limits: '交互行为限制', + supported_ops: '支持的操作', + op_click: '点击操作', + op_input: '文本输入', + op_scroll: '页面滚动', + op_submit: '表单提交', + op_select: '选择操作', + op_focus: '焦点切换', + unsupported_ops: '不支持的操作', + op_hover: '鼠标悬停（hover）', + op_drag: '拖拽操作', + op_context: '右键菜单', + op_draw: '图形绘制', + op_keyboard: '键盘快捷键', + op_position: '基于点击区域或鼠标位置的控制', + understanding_limits: '网页理解限制', + no_vision_title: '无视觉能力', + no_vision_desc: 'page-agent 基于 DOM 结构进行理解和操作，没有视觉识别能力，无法理解以下内容：', + no_vision_1: '• 图片内容：无法识别图片中的文字、图标或视觉元素', + no_vision_2: '• Canvas 画布：无法理解 Canvas 中绘制的图形和内容', + no_vision_3: '• WebGL 3D 内容：无法操作 3D 场景中的元素', + no_vision_4: '• SVG 图形：无法理解 SVG 中的视觉内容和路径', + website_requirements: '被操作网站要求', + req_semantic_title: '语义化和易用性', + req_semantic_desc: + '所有操作都基于 DOM 元素的语义化标签和属性。如果页面结构不够语义化，或者没有任何 accessibility 特性，可能影响 AI 的理解准确性。', + req_ux_title: 'UI/UX', + req_ux_desc: + '反常识的交互规则、基于视觉的操作提示、复杂的鼠标交互、快速出现快速消失的元素等，都会影响 AI 的理解和操作。', + req_env_title: '环境要求', + req_env_desc: 'modern browser', + future: '未来规划', + future_title: '即将支持', + future_1: '• 多页面接力操作能力', + future_2: '• 更丰富的鼠标交互支持', + future_3: '• 基础的视觉理解能力', + future_4: '• 更智能的错误恢复机制', + }, + model_integration: { + title: '模型接入', + subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型，包括公有云服务和私有部署方案。', + recommended: '推荐模型', + model_gpt4_title: '⚡ gpt-4.1-mini', + model_gpt4_badge: '评估基准 ✅', + model_gpt4_1: '• 性价比高', + model_gpt4_2: '• 速度快', + model_gpt4_3: '• 成功率高', + model_deepseek_title: '💰 DeepSeek-3.2', + model_deepseek_badge: '经济实惠', + model_deepseek_1: '• 价格远低于同等级其他模型', + model_deepseek_2: '• ToolCall 有出错率，通常能够自动修复', + model_deepseek_3: '• 本网站提供的免费试用为 DeepSeek', + model_qwen_title: '🛡️ qwen3', + model_qwen_badge: '安全合规', + model_qwen_1: '• 可控、效果尚可，价格合理', + model_qwen_2: '• ToolCall 有出错率，通常能够自动修复', + model_qwen_3: '• 适合能给出详细步骤的场景', + model_gemini_title: '⚡ gemini-2.5-flash', + model_gemini_badge: '极其高效，成功率高，价格合理', + available: '可用模型', + available_verified: '✅ 已验证可用', + tips: '提示', + tip_1: 'reasoning 模型（如 GPT-5），速度偏慢，没有必要', + tip_2: + '不保证 json schema 的模型（openAI 以外的几乎所有模型），tool call 有概率出错，通常能自动修复，建议 temperature 设置高一些', + tip_3: '小模型、nano 模型，效果不佳', + configuration: '配置方式', + }, + custom_tools: { + title: '自定义工具', + subtitle: + '通过注册自定义工具，扩展 AI Agent 的能力边界。使用 Zod 定义严格的输入接口，让 AI 安全调用你的业务逻辑。', + registration: '工具注册', + registration_desc: + '每个自定义工具需要定义四个核心属性：name、description、input schema 和 execute 函数。', + page_filter: '页面过滤器', + page_filter_desc: '通过 pageFilter 属性控制工具在哪些页面可见，提升安全性和用户体验。', + best_practices: '最佳实践', + bp_performance: '⚡ 性能优化', + bp_1: '• 使用 pageFilter 减少不必要的工具加载', + bp_2: '• 在 execute 函数中实现适当的缓存机制', + bp_3: '• 避免在工具中执行耗时的同步操作', + }, +} diff --git a/pages/i18n/locales/zh-CN/home.ts b/pages/i18n/locales/zh-CN/home.ts new file mode 100644 index 0000000..b569122 --- /dev/null +++ b/pages/i18n/locales/zh-CN/home.ts @@ -0,0 +1,78 @@ +export default { + hero: { + badge: 'GUI Agent in your webpage', + title_line1: '让你的 Web 应用', + title_line2: '拥有 AI 操作员', + subtitle_emoji: '🪄 一行 CDN 引入', + subtitle_main: '，为你的网站添加智能 UI Agent。', + subtitle_detail: '用户/答疑机器人给出文字指示，AI 帮你操作页面。', + tab_try: '🚀 立即尝试', + tab_other: '🌐 其他网页尝试', + input_placeholder: '输入您想要 AI 执行的任务...', + execute_button: '执行', + default_task: '进入文档页，打开数据脱敏相关的文档，帮我总结成 markdown', + }, + try_other: { + step1_title: '步骤 1:', + step1_content: '显示收藏夹栏', + step2_title: '步骤 2:', + step2_content: '拖拽下面按钮到收藏夹栏', + step3_title: '步骤 3:', + step3_content: '在其他网站点击收藏夹中的按钮即可使用', + notice_title: '⚠️ 注意', + notice_items: { + item1: '仅做技术评估，链接定期失效', + item2: '使用 DeepSeek 模型，参考 DeepSeek 用户协议和隐私政策', + item3: '部分网站屏蔽了链接嵌入，将无反应', + item4: '仅支持单页应用，页面跳转后需要重新注入', + item5: '仅识别文本，不识别图像，不支持拖拽等复杂交互', + item6_prefix: '详细使用限制参照', + item6_link: '《文档》', + }, + }, + benefits: { + no_backend: '无需后端', + private_model: '支持私有模型', + data_masking: '无痛脱敏', + open_source: 'MIT 开源', + }, + features: { + section_title: '核心特性', + dom_understanding: { + title: '智能 DOM 理解', + desc: '基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。', + }, + secure_integration: { + title: '安全可控集成', + desc: '支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。', + }, + zero_backend: { + title: '零后端部署', + desc: 'CDN 直接引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。', + }, + accessible: { + title: '普惠智能交互', + desc: '为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。', + }, + }, + use_cases: { + section_title: '应用场景', + section_subtitle: '从简单的表单填写到复杂的业务流程，AI 都能理解并执行', + case1: { + title: '对接答疑机器人', + desc: '把你的答疑助手变成全能Agent。客服机器人不再只说「请先点击设置按钮然后点击...」，而是直接帮用户现场操作。', + }, + case2: { + title: '交互升级/智能化改造', + desc: '一行代码，老应用变身Agent，产品专家帮用户操作复杂 B 端软件。降低人工支持成本，提高用户满意度。', + }, + case3: { + title: '产品教学', + desc: '向用户演示交互过程，边做边教。例如让AI演示「如何提交报销申请」的完整操作流程。', + }, + case4: { + title: '无障碍支持', + desc: '为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。', + }, + }, +} diff --git a/pages/i18n/types.ts b/pages/i18n/types.ts new file mode 100644 index 0000000..3770804 --- /dev/null +++ b/pages/i18n/types.ts @@ -0,0 +1,16 @@ +import 'react-i18next' + +import type commonZh from './locales/zh-CN/common' +import type docsZh from './locales/zh-CN/docs' +import type homeZh from './locales/zh-CN/home' + +declare module 'react-i18next' { + interface CustomTypeOptions { + defaultNS: 'common' + resources: { + common: typeof commonZh + home: typeof homeZh + docs: typeof docsZh + } + } +} diff --git a/pages/index.css b/pages/index.css index 2f94c6b..eff7706 100644 --- a/pages/index.css +++ b/pages/index.css @@ -1,5 +1,8 @@ @import 'tailwindcss'; +/* 启用 class-based dark mode for Tailwind v4 */ +@variant dark (.dark &); + :root { --background: #ffffff; --foreground: #171717; @@ -8,12 +11,21 @@ --theme-color-2: rgb(189, 69, 251); } -@media (prefers-color-scheme: dark) { - :root { +/* class-based dark mode - 应用到 html.dark */ +html.dark, +:root.dark { + --background: #0a0a0a; + --foreground: #ededed; +} + +/* 同时支持系统偏好 */ +/* @media (prefers-color-scheme: dark) { + html:not(.light), + :root:not(.light) { --background: #0a0a0a; --foreground: #ededed; } -} +} */ /* 添加 Tailwind 自定义颜色 */ @theme { @@ -21,13 +33,162 @@ --color-foreground: var(--foreground); } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); -} - body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } + +/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */ +.prose h1, +.prose h2, +.prose h3, +.prose h4, +.prose h5, +.prose h6 { + color: rgba(23, 23, 23, 0.85); +} + +.dark .prose h1, +.dark .prose h2, +.dark .prose h3, +.dark .prose h4, +.dark .prose h5, +.dark .prose h6 { + color: rgba(255, 255, 255, 0.9); +} + +table, +th, +td { + color: #171717; +} + +.dark table, +.dark th, +.dark td { + color: #ededed; +} + +/* 文档页深色模式优化 */ +.dark .prose { + color: rgba(255, 255, 255, 0.7); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose { + color: rgba(255, 255, 255, 0.7); + } +} */ + +.dark .dark\:prose-invert { + --tw-prose-body: rgba(255, 255, 255, 0.7); + --tw-prose-headings: rgba(255, 255, 255, 0.95); + --tw-prose-lead: rgba(255, 255, 255, 0.7); + --tw-prose-links: rgba(147, 197, 253, 0.9); + --tw-prose-bold: rgba(255, 255, 255, 0.9); + --tw-prose-counters: rgba(255, 255, 255, 0.6); + --tw-prose-bullets: rgba(255, 255, 255, 0.5); + --tw-prose-hr: rgba(255, 255, 255, 0.2); + --tw-prose-quotes: rgba(255, 255, 255, 0.8); + --tw-prose-quote-borders: rgba(255, 255, 255, 0.3); + --tw-prose-captions: rgba(255, 255, 255, 0.6); + --tw-prose-code: rgba(255, 255, 255, 0.9); + --tw-prose-pre-code: rgba(255, 255, 255, 0.95); + --tw-prose-pre-bg: rgba(0, 0, 0, 0.5); + --tw-prose-th-borders: rgba(255, 255, 255, 0.3); + --tw-prose-td-borders: rgba(255, 255, 255, 0.2); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .dark\:prose-invert { + --tw-prose-body: rgba(255, 255, 255, 0.7); + --tw-prose-headings: rgba(255, 255, 255, 0.95); + --tw-prose-lead: rgba(255, 255, 255, 0.7); + --tw-prose-links: rgba(147, 197, 253, 0.9); + --tw-prose-bold: rgba(255, 255, 255, 0.9); + --tw-prose-counters: rgba(255, 255, 255, 0.6); + --tw-prose-bullets: rgba(255, 255, 255, 0.5); + --tw-prose-hr: rgba(255, 255, 255, 0.2); + --tw-prose-quotes: rgba(255, 255, 255, 0.8); + --tw-prose-quote-borders: rgba(255, 255, 255, 0.3); + --tw-prose-captions: rgba(255, 255, 255, 0.6); + --tw-prose-code: rgba(255, 255, 255, 0.9); + --tw-prose-pre-code: rgba(255, 255, 255, 0.95); + --tw-prose-pre-bg: rgba(0, 0, 0, 0.5); + --tw-prose-th-borders: rgba(255, 255, 255, 0.3); + --tw-prose-td-borders: rgba(255, 255, 255, 0.2); + } +} */ + +/* 标题更清晰 */ +.dark .prose h1, +.dark .prose h2, +.dark .prose h3, +.dark .prose h4 { + color: rgba(255, 255, 255, 0.95); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose h1, + :root:not(.light) .prose h2, + :root:not(.light) .prose h3, + :root:not(.light) .prose h4 { + color: rgba(255, 255, 255, 0.95); + } +} */ + +/* 链接更清晰 */ +.dark .prose a { + color: rgba(147, 197, 253, 0.9); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose a { + color: rgba(147, 197, 253, 0.9); + } +} */ + +/* 代码块背景更黑 */ +.dark .prose pre { + background-color: rgba(0, 0, 0, 0.6); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose pre { + background-color: rgba(0, 0, 0, 0.6); + } +} */ + +/* 表格样式 */ +.dark .prose table { + color: rgba(255, 255, 255, 0.7); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose table { + color: rgba(255, 255, 255, 0.7); + } +} */ + +.dark .prose thead { + color: rgba(255, 255, 255, 0.9); + border-bottom-color: rgba(255, 255, 255, 0.3); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose thead { + color: rgba(255, 255, 255, 0.9); + border-bottom-color: rgba(255, 255, 255, 0.3); + } +} */ + +.dark .prose tbody tr { + border-bottom-color: rgba(255, 255, 255, 0.2); +} + +/* @media (prefers-color-scheme: dark) { + :root:not(.light) .prose tbody tr { + border-bottom-color: rgba(255, 255, 255, 0.2); + } +} */ diff --git a/pages/main.tsx b/pages/main.tsx index 2250edb..df37df0 100644 --- a/pages/main.tsx +++ b/pages/main.tsx @@ -2,6 +2,8 @@ import { createRoot } from 'react-dom/client' import { Route, Router, Switch } from 'wouter' import { useHashLocation } from 'wouter/use-hash-location' +import './i18n/config' +import './i18n/types' import { default as PagesRouter } from './router.tsx' import { default as TestPagesRouter } from './test-pages/router.tsx' diff --git a/pages/page.tsx b/pages/page.tsx index 8dac15b..5905fa9 100644 --- a/pages/page.tsx +++ b/pages/page.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-dom/no-dangerously-set-innerhtml */ -import { useState } from 'react' +import { useEffect, useState } from 'react' +import { useTranslation } from 'react-i18next' import { Link, useSearchParams } from 'wouter' import { PageAgent } from '@/PageAgent.js' @@ -25,7 +26,14 @@ const injectionA = ` ` export default function HomePage() { - const [task, setTask] = useState('进入文档页，打开数据脱敏相关的文档，帮我总结成 markdown') + const { t, i18n } = useTranslation(['home', 'common']) + const [task, setTask] = useState(() => t('home:hero.default_task')) + + // Update task when language changes + const defaultTask = t('home:hero.default_task') + useEffect(() => { + setTask(defaultTask) + }, [defaultTask]) const [params, setParams] = useSearchParams() const isOther = params.has('try_other') @@ -79,25 +87,25 @@ export default function HomePage() { className="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse" aria-hidden="true" > - UI Agent in your webpage + {t('home:hero.badge')}

          - 让你的 Web 应用 + {t('home:hero.title_line1')}
          - 拥有 AI 操作员 + {t('home:hero.title_line2')}

          - 🪄 一行 CDN 引入 + {t('home:hero.subtitle_emoji')} - ，为你的网站添加智能 UI Agent。 + {t('home:hero.subtitle_main')}
          - 用户/答疑机器人给出文字指示，AI 帮你操作页面。 + {t('home:hero.subtitle_detail')}

          {/* Try It Now Section - Tab Card */} @@ -114,7 +122,7 @@ export default function HomePage() { : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700' }`} > - 🚀 立即尝试 + {t('home:hero.tab_try')}
          @@ -136,7 +144,7 @@ export default function HomePage() { setTask(e.target.value)} - placeholder="输入您想要 AI 执行的任务..." + placeholder={t('home:hero.input_placeholder')} className="w-full px-4 py-3 pr-20 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm mb-0" data-page-agent-not-interactive /> @@ -147,7 +155,7 @@ export default function HomePage() { className="absolute right-2 top-2 px-5 py-1.5 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-md hover:shadow-md transform hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none text-sm" data-page-agent-not-interactive > - 执行 + {t('home:hero.execute_button')}
          @@ -160,7 +168,10 @@ export default function HomePage() { {/* Keyboard Shortcut Hint */}

          - 步骤 1: 显示收藏夹栏 + + {t('home:try_other.step1_title')} + {' '} + {t('home:try_other.step1_content')}

          @@ -176,8 +187,10 @@ export default function HomePage() { {/* Draggable Bookmarklet */}

          - 步骤 2:{' '} - 拖拽下面按钮到收藏夹栏 + + {t('home:try_other.step2_title')} + {' '} + {t('home:try_other.step2_content')}

          - 步骤 3:{' '} - 在其他网站点击收藏夹中的按钮即可使用 + + {t('home:try_other.step3_title')} + {' '} + {t('home:try_other.step3_content')}

          @@ -197,37 +212,37 @@ export default function HomePage() { {/* 右侧：注意事项 */}

          - ⚠️ 注意 + {t('home:try_other.notice_title')}

          • - 仅做技术评估，链接定期失效 + {t('home:try_other.notice_items.item1')}
          • - 使用 DeepSeek 模型，参考 DeepSeek 用户协议和隐私政策 + {t('home:try_other.notice_items.item2')}
          • - 部分网站屏蔽了链接嵌入，将无反应 + {t('home:try_other.notice_items.item3')}
          • - 仅支持单页应用，页面跳转后需要重新注入 + {t('home:try_other.notice_items.item4')}
          • - 仅识别文本，不识别图像，不支持拖拽等复杂交互 + {t('home:try_other.notice_items.item5')}
          • - 详细使用限制参照{' '} + {t('home:try_other.notice_items.item6_prefix')}{' '} - 《文档》 + {t('home:try_other.notice_items.item6_link')}
          @@ -248,28 +263,28 @@ export default function HomePage() { className="w-2 h-2 bg-green-500 rounded-full mr-2" aria-hidden="true" > - 无需后端 + {t('home:benefits.no_backend')}
        • - 支持私有模型 + {t('home:benefits.private_model')}
        • - 无痛脱敏 + {t('home:benefits.data_masking')}
        • - DOM 智能操作 + {t('home:benefits.open_source')}
        @@ -295,10 +310,10 @@ export default function HomePage() { 🧠

        - 智能 DOM 理解 + {t('home:features.dom_understanding.title')}

        - 基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。 + {t('home:features.dom_understanding.desc')}

        @@ -314,10 +329,10 @@ export default function HomePage() { 🔒

        - 安全可控集成 + {t('home:features.secure_integration.title')}

        - 支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。 + {t('home:features.secure_integration.desc')}

        @@ -332,9 +347,11 @@ export default function HomePage() { > ⚡ -

        零后端部署

        +

        + {t('home:features.zero_backend.title')} +

        - CDN 直接引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。 + {t('home:features.zero_backend.desc')}

        @@ -350,10 +367,10 @@ export default function HomePage() { ♿

        - 普惠智能交互 + {t('home:features.accessible.title')}

        - 为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。 + {t('home:features.accessible.desc')}

        @@ -368,27 +385,27 @@ export default function HomePage() { id="use-cases-heading" className="text-4xl lg:text-5xl mb-6 text-gray-900 dark:text-white" > - 应用场景 + {t('home:use_cases.section_title')}

        - 从简单的表单填写到复杂的业务流程，AI 都能理解并执行 + {t('home:use_cases.section_subtitle')}

        {/* Use Case 1 */}
        -
        +
        1

        - 对接答疑机器人 + {t('home:use_cases.case1.title')}

        - 把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。 + {t('home:use_cases.case1.desc')}

        @@ -396,17 +413,16 @@ export default function HomePage() { {/* Use Case 2 */}
        -
        +
        2

        - 交互升级/智能化改造 + {t('home:use_cases.case2.title')}

        - 一行代码，老应用变身Agent，产品专家帮用户操作复杂 B - 端软件。降低人工支持成本，提高用户满意度。 + {t('home:use_cases.case2.desc')}

        @@ -414,16 +430,16 @@ export default function HomePage() { {/* Use Case 3 */}
        -
        +
        3

        - 产品教学 + {t('home:use_cases.case3.title')}

        - 向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。 + {t('home:use_cases.case3.desc')}

        @@ -431,16 +447,16 @@ export default function HomePage() { {/* Use Case 4 */}
        -
        +
        4

        - 无障碍支持 + {t('home:use_cases.case4.title')}

        - 为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。 + {t('home:use_cases.case4.desc')}