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

120
pages/page.tsx
View File

@@ -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"
></span>
UI Agent in your webpage
{t('home:hero.badge')}
</div>
<h1
id="hero-heading"
className="text-5xl lg:text-7xl font-bold mb-8 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
>
让你的 Web 应用
{t('home:hero.title_line1')}
<br />
拥有 AI 操作员
{t('home:hero.title_line2')}
</h1>
<p className="text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed">
<span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent font-bold">
🪄 一行 CDN 引入
{t('home:hero.subtitle_emoji')}
</span>
，为你的网站添加智能 UI Agent。
{t('home:hero.subtitle_main')}
<br />
用户/答疑机器人给出文字指示，AI 帮你操作页面。
{t('home:hero.subtitle_detail')}
</p>
{/* 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')}
</button>
<button
onClick={() => setActiveTab('other')}
@@ -124,7 +132,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_other')}
</button>
</div>
@@ -136,7 +144,7 @@ export default function HomePage() {
<input
value={task}
onChange={(e) => 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')}
</button>
</div>
</div>
@@ -160,7 +168,10 @@ export default function HomePage() {
{/* Keyboard Shortcut Hint */}
<div className="bg-blue-50 dark:bg-gray-700 p-4 rounded-lg">
<p className="text-gray-700 dark:text-gray-300 text-sm mb-3">
<span className="font-semibold">步骤 1:</span> 显示收藏夹栏
<span className="font-semibold">
{t('home:try_other.step1_title')}
</span>{' '}
{t('home:try_other.step1_content')}
</p>
<div className="flex items-center justify-center gap-2">
<kbd className="px-2 py-1 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded text-xs font-mono">
@@ -176,8 +187,10 @@ export default function HomePage() {
{/* Draggable Bookmarklet */}
<div className="bg-green-50 dark:bg-gray-700 p-4 rounded-lg">
<p className="text-gray-700 dark:text-gray-300 text-sm mb-3">
<span className="font-semibold">步骤 2:</span>{' '}
拖拽下面按钮到收藏夹栏
<span className="font-semibold">
{t('home:try_other.step2_title')}
</span>{' '}
{t('home:try_other.step2_content')}
</p>
<div
className="flex items-center justify-center gap-2 text-gray-500 dark:text-gray-400"
@@ -188,8 +201,10 @@ export default function HomePage() {
{/* Usage Instructions */}
<div className="bg-purple-50 dark:bg-gray-700 p-4 rounded-lg">
<p className="text-gray-700 dark:text-gray-300 text-sm">
<span className="font-semibold">步骤 3:</span>{' '}
在其他网站点击收藏夹中的按钮即可使用
<span className="font-semibold">
{t('home:try_other.step3_title')}
</span>{' '}
{t('home:try_other.step3_content')}
</p>
</div>
</div>
@@ -197,37 +212,37 @@ export default function HomePage() {
{/* 右侧：注意事项 */}
<div className="bg-yellow-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 className="font-semibold text-gray-900 dark:text-white mb-3 text-sm">
⚠️ 注意
{t('home:try_other.notice_title')}
</h4>
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
仅做技术评估，链接定期失效
{t('home:try_other.notice_items.item1')}
</li>
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
使用 DeepSeek 模型，参考 DeepSeek 用户协议和隐私政策
{t('home:try_other.notice_items.item2')}
</li>
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
部分网站屏蔽了链接嵌入，将无反应
{t('home:try_other.notice_items.item3')}
</li>
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
仅支持单页应用，页面跳转后需要重新注入
{t('home:try_other.notice_items.item4')}
</li>
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
仅识别文本，不识别图像，不支持拖拽等复杂交互
{t('home:try_other.notice_items.item5')}
</li>
<li className="flex items-start text-left">
<span className="w-1.5 h-1.5 bg-yellow-500 rounded-full mt-2 mr-2 flex-shrink-0 "></span>
详细使用限制参照{' '}
{t('home:try_other.notice_items.item6_prefix')}{' '}
<Link
href="/docs/introduction/limitations"
className="text-blue-600 dark:text-blue-400 hover:underline"
>
《文档》
{t('home:try_other.notice_items.item6_link')}
</Link>
</li>
</ul>
@@ -248,28 +263,28 @@ export default function HomePage() {
className="w-2 h-2 bg-green-500 rounded-full mr-2"
aria-hidden="true"
></span>
无需后端
{t('home:benefits.no_backend')}
</li>
<li className="flex items-center">
<span
className="w-2 h-2 bg-green-500 rounded-full mr-2"
aria-hidden="true"
></span>
支持私有模型
{t('home:benefits.private_model')}
</li>
<li className="flex items-center">
<span
className="w-2 h-2 bg-green-500 rounded-full mr-2"
aria-hidden="true"
></span>
无痛脱敏
{t('home:benefits.data_masking')}
</li>
<li className="flex items-center">
<span
className="w-2 h-2 bg-green-500 rounded-full mr-2"
aria-hidden="true"
></span>
DOM 智能操作
{t('home:benefits.open_source')}
</li>
</ul>
</div>
@@ -295,10 +310,10 @@ export default function HomePage() {
<span className="text-white text-xl">🧠</span>
</div>
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
智能 DOM 理解
{t('home:features.dom_understanding.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
基于 DOM 分析，高强度脱水。无需视觉识别，纯文本实现精准操作。
{t('home:features.dom_understanding.desc')}
</p>
</article>
@@ -314,10 +329,10 @@ export default function HomePage() {
<span className="text-white text-xl">🔒</span>
</div>
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
安全可控集成
{t('home:features.secure_integration.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
支持操作黑白名单、数据脱敏保护。注入自定义知识库，让 AI 按你的规则工作。
{t('home:features.secure_integration.desc')}
</p>
</article>
@@ -332,9 +347,11 @@ export default function HomePage() {
>
<span className="text-white text-xl">⚡</span>
</div>
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">零后端部署</h3>
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
{t('home:features.zero_backend.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
CDN 直接引入，自定义 LLM 接入点。从 OpenAI 到 qwen3，完全由你掌控。
{t('home:features.zero_backend.desc')}
</p>
</article>
@@ -350,10 +367,10 @@ export default function HomePage() {
<span className="text-white text-xl">♿</span>
</div>
<h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
普惠智能交互
{t('home:features.accessible.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
为复杂 B端系统、管理后台提供自然语言入口。让每个用户都能轻松上手。
{t('home:features.accessible.desc')}
</p>
</article>
</div>
@@ -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')}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
从简单的表单填写到复杂的业务流程，AI 都能理解并执行
{t('home:use_cases.section_subtitle')}
</p>
</div>
<div className="grid lg:grid-cols-2 gap-12" role="list">
{/* Use Case 1 */}
<div className="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
<div className="flex items-start space-x-4 h-20">
<div className="flex items-start space-x-4">
<div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
<span className="text-white font-bold">1</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
对接答疑机器人
{t('home:use_cases.case1.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300">
把你的答疑助手变成全能Agent。客服机器人不再只说"请先点击设置按钮然后点击..."，而是直接帮用户现场操作。
{t('home:use_cases.case1.desc')}
</p>
</div>
</div>
@@ -396,17 +413,16 @@ export default function HomePage() {
{/* Use Case 2 */}
<div className="bg-gradient-to-br from-green-100 to-blue-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
<div className="flex items-start space-x-4 h-20">
<div className="flex items-start space-x-4">
<div className="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center flex-shrink-0">
<span className="text-white font-bold">2</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
交互升级/智能化改造
{t('home:use_cases.case2.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300">
一行代码，老应用变身Agent，产品专家帮用户操作复杂 B
端软件。降低人工支持成本，提高用户满意度。
{t('home:use_cases.case2.desc')}
</p>
</div>
</div>
@@ -414,16 +430,16 @@ export default function HomePage() {
{/* Use Case 3 */}
<div className="bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
<div className="flex items-start space-x-4 h-20">
<div className="flex items-start space-x-4">
<div className="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center flex-shrink-0">
<span className="text-white font-bold">3</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
产品教学
{t('home:use_cases.case3.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300">
向用户演示交互过程，边做边教。例如让AI演示"如何提交报销申请"的完整操作流程。
{t('home:use_cases.case3.desc')}
</p>
</div>
</div>
@@ -431,16 +447,16 @@ export default function HomePage() {
{/* Use Case 4 */}
<div className="bg-gradient-to-br from-orange-100 to-red-100 dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl">
<div className="flex items-start space-x-4 h-20">
<div className="flex items-start space-x-4">
<div className="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center flex-shrink-0">
<span className="text-white font-bold">4</span>
</div>
<div>
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-white">
无障碍支持
{t('home:use_cases.case4.title')}
</h3>
<p className="text-gray-600 dark:text-gray-300">
为视障用户、老年用户提供自然语言交互，对接屏幕阅读器或语音助理，让软件人人可用。
{t('home:use_cases.case4.desc')}
</p>
</div>
</div>