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

docs: remove i18n dep

Browse Source
This commit is contained in:
Simon
2026-01-30 16:47:23 +08:00
parent 6cd3e3726c
commit 68c944c3a4
30 changed files with 142 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/website/src/components/BetaNotice.tsx
View File

@@ -1,7 +1,7 @@
import { useTranslation } from 'react-i18next'
import { useLanguage } from '@/i18n/context'
export default function BetaNotice() {
const { t } = useTranslation('common')
const { isZh } = useLanguage()
return (
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-8">
@@ -11,9 +11,13 @@ export default function BetaNotice() {
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-orange-800 dark:text-orange-200 mb-1">
{t('beta_notice.title')}
{isZh ? 'Beta 阶段' : 'Beta Stage'}
</h3>
<p className="text-sm text-orange-700 dark:text-orange-300">{t('beta_notice.content')}</p>
<p className="text-sm text-orange-700 dark:text-orange-300">
{isZh
? '当前功能未完成，接口可能随时变更。正式版本发布前请勿用于生产环境。'
: 'Current features are incomplete and the API may change at any time. Please do not use in production environments before the official release.'}
</p>
</div>
</div>
</div>

11
packages/website/src/components/Footer.tsx
View File

@@ -1,8 +1,9 @@
import { useTranslation } from 'react-i18next'
import { siGithub } from 'simple-icons'
import { useLanguage } from '@/i18n/context'
export default function Footer() {
const { t } = useTranslation('common')
const { isZh } = useLanguage()
return (
<footer
@@ -11,14 +12,16 @@ export default function Footer() {
>
<div className="max-w-7xl mx-auto px-6 py-6">
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p className="text-gray-600 dark:text-gray-300 text-sm">{t('footer.copyright')}</p>
<p className="text-gray-600 dark:text-gray-300 text-sm">
© 2026 page-agent. All rights reserved.
</p>
<div className="flex items-center space-x-6">
<a
href="https://github.com/alibaba/page-agent"
target="_blank"
rel="noopener noreferrer"
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200"
aria-label={t('footer.github_label')}
aria-label={isZh ? '访问 GitHub 仓库' : 'Visit GitHub repository'}
>
<svg
role="img"

29
packages/website/src/components/Header.tsx
View File

@@ -1,15 +1,16 @@
import { BookOpen, Menu, X } from 'lucide-react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { siGithub } from 'simple-icons'
import { Link } from 'wouter'
import { useLanguage } from '@/i18n/context'
import LanguageSwitcher from './LanguageSwitcher'
import ThemeSwitcher from './ThemeSwitcher'
import { HyperText } from './ui/hyper-text'
export default function Header() {
const { t } = useTranslation('common')
const { isZh } = useLanguage()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
@@ -24,7 +25,7 @@ export default function Header() {
<Link
href="~/"
className="flex items-center gap-2 sm:gap-3 group shrink-0"
aria-label={t('header.logo_alt')}
aria-label={isZh ? 'page-agent 首页' : 'page-agent home'}
onClick={() => setMobileMenuOpen(false)}
>
<img
@@ -43,7 +44,7 @@ export default function Header() {
animateOnHover={true}
aria-hidden="true"
>
{t('header.slogan')}
GUI Agent in your webpage
</HyperText>
</div>
</Link>
@@ -57,7 +58,7 @@ export default function Header() {
<Link
href="~/docs/introduction/overview"
className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 shrink-0"
aria-label={t('header.nav_docs')}
aria-label={isZh ? '文档' : 'Docs'}
>
<BookOpen className="w-5 h-5" />
</Link>
@@ -66,7 +67,7 @@ export default function Header() {
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 shrink-0"
aria-label={t('header.nav_source')}
aria-label="GitHub"
>
<svg
role="img"
@@ -83,7 +84,7 @@ export default function Header() {
<nav
className="hidden md:flex items-center space-x-6"
role="navigation"
aria-label={t('header.nav_docs')}
aria-label={isZh ? '文档' : 'Docs'}
>
<span className="text-xs font-mono text-gray-400 dark:text-gray-500 tabular-nums before:content-['v']">
{import.meta.env.VERSION}
@@ -93,14 +94,14 @@ export default function Header() {
className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
>
<BookOpen className="w-4 h-4" />
{t('header.nav_docs')}
{isZh ? '文档' : 'Docs'}
</Link>
<a
href="https://github.com/alibaba/page-agent"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
aria-label={t('header.nav_source')}
aria-label="GitHub"
>
<svg
role="img"
@@ -110,7 +111,7 @@ export default function Header() {
>
<path d={siGithub.path} />
</svg>
{t('header.nav_source')}
GitHub
</a>
<ThemeSwitcher />
<LanguageSwitcher />
@@ -120,7 +121,7 @@ export default function Header() {
<button
type="button"
className="md:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 shrink-0"
aria-label={t('header.mobile_menu')}
aria-label={isZh ? '打开导航栏' : 'Open navigation'}
aria-expanded={mobileMenuOpen}
aria-controls="mobile-menu"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -142,14 +143,14 @@ export default function Header() {
onClick={() => setMobileMenuOpen(false)}
>
<BookOpen className="w-5 h-5" />
{t('header.nav_docs')}
{isZh ? '文档' : 'Docs'}
</Link>
<a
href="https://github.com/alibaba/page-agent"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
aria-label={t('header.nav_source')}
aria-label="GitHub"
>
<svg
role="img"
@@ -159,7 +160,7 @@ export default function Header() {
>
<path d={siGithub.path} />
</svg>
{t('header.nav_source')}
GitHub
</a>
<div className="flex items-center gap-3 px-3 py-2">
<ThemeSwitcher />

23
packages/website/src/components/LanguageSwitcher.tsx
View File

@@ -1,22 +1,21 @@
import { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useLanguage } from '@/i18n/context'
export default function LanguageSwitcher() {
const { i18n, t } = useTranslation('common')
const { language, isZh, setLanguage } = useLanguage()
const [isOpen, setIsOpen] = useState(false)
const dropdownRef = useRef<HTMLDivElement>(null)
const currentLang = i18n.language
const languages = [
{ code: 'zh-CN', label: '中文' },
{ code: 'en-US', label: 'English' },
{ code: 'zh-CN' as const, label: '中文' },
{ code: 'en-US' as const, label: 'English' },
]
const currentLanguage = languages.find((lang) => lang.code === currentLang) || languages[0]
const currentLanguage = languages.find((lang) => lang.code === language) || languages[0]
const handleLanguageChange = (langCode: string) => {
i18n.changeLanguage(langCode)
const handleLanguageChange = (langCode: 'zh-CN' | 'en-US') => {
setLanguage(langCode)
setIsOpen(false)
}
@@ -42,7 +41,7 @@ export default function LanguageSwitcher() {
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300"
aria-label={t('language.switch_label')}
aria-label={isZh ? '切换语言' : 'Switch language'}
aria-expanded={isOpen}
aria-haspopup="true"
>
@@ -83,14 +82,14 @@ export default function LanguageSwitcher() {
key={lang.code}
onClick={() => handleLanguageChange(lang.code)}
className={`w-full flex items-center gap-2 px-4 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
currentLang === lang.code
language === lang.code
? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300'
}`}
role="menuitem"
>
<span>{lang.label}</span>
{currentLang === lang.code && (
{language === lang.code && (
<svg
className="w-4 h-4 ml-auto"
fill="none"