docs: remove i18n dep

2026-01-30 16:47:23 +08:00
parent 6cd3e3726c
commit 68c944c3a4
30 changed files with 142 additions and 335 deletions
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -14,11 +14,8 @@
        "@types/react": "^19.2.8",
        "@types/react-dom": "^19.2.1",
        "@vitejs/plugin-react-swc": "^4.1.0",
-        "i18next": "^25.7.4",
-        "i18next-browser-languagedetector": "^8.2.0",
        "react": "^19.2.4",
        "react-dom": "^19.2.4",
-        "react-i18next": "^16.5.3",
        "tailwindcss": "^4.1.14",
        "tw-animate-css": "^1.4.0",
        "wouter": "^3.9.0"
--- a/packages/website/src/components/BetaNotice.tsx
+++ b/packages/website/src/components/BetaNotice.tsx
@@ -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>
--- a/packages/website/src/components/Footer.tsx
+++ b/packages/website/src/components/Footer.tsx
@@ -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"
--- a/packages/website/src/components/Header.tsx
+++ b/packages/website/src/components/Header.tsx
@@ -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 />
--- a/packages/website/src/components/LanguageSwitcher.tsx
+++ b/packages/website/src/components/LanguageSwitcher.tsx
@@ -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"
--- a/packages/website/src/i18n/README.md
+++ b/packages/website/src/i18n/README.md
@@ -1,73 +0,0 @@
-# 国际化配置说明
-
-本项目使用 `react-i18next` 实现国际化支持。
-
-## 目录结构
-
-```
-pages/i18n/
-├── config.ts              # i18next 配置和初始化
-├── types.ts               # TypeScript 类型声明
-├── locales/
-│   ├── zh-CN/             # 中文翻译
-│   │   ├── common.json    # 通用组件（Header, Footer等）
-│   │   ├── home.json      # 首页
-│   │   └── docs.json      # 文档页（待完善）
-│   └── en-US/             # 英文翻译
-│       ├── common.json
-│       ├── home.json
-│       └── docs.json
-└── README.md              # 本文件
-```
-
-## 使用方法
-
-### 在组件中使用
-
-```tsx
-import { useTranslation } from 'react-i18next'
-
-function MyComponent() {
-    const { t } = useTranslation('common') // 指定命名空间
-
-    return <h1>{t('header.nav_docs')}</h1>
-}
-```
-
-### 使用多个命名空间
-
-```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 页面国际化
--- a/packages/website/src/i18n/config.ts
+++ b/packages/website/src/i18n/config.ts
@@ -1,37 +0,0 @@
-import i18n from 'i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
-import { initReactI18next } from 'react-i18next'
-
-import commonEn from './locales/en-US/common'
-import commonZh from './locales/zh-CN/common'
-
-const resources = {
-	'zh-CN': {
-		common: commonZh,
-	},
-	'en-US': {
-		common: commonEn,
-	},
-}
-
-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
--- a/packages/website/src/i18n/context.tsx
+++ b/packages/website/src/i18n/context.tsx
@@ -0,0 +1,35 @@
+import { ReactNode, createContext, use, useState } from 'react'
+
+type Lang = 'en-US' | 'zh-CN'
+
+const LanguageContext = createContext<{
+	language: Lang
+	isZh: boolean
+	setLanguage: (lang: Lang) => void
+} | null>(null)
+
+export function LanguageProvider({ children }: { children: ReactNode }) {
+	const [language, setLang] = useState<Lang>(() => {
+		const stored = localStorage.getItem('language') as Lang
+		if (stored === 'zh-CN' || stored === 'en-US') return stored
+		return navigator.language.startsWith('zh') ? 'zh-CN' : 'en-US'
+	})
+
+	const setLanguage = (lang: Lang) => {
+		setLang(lang)
+		localStorage.setItem('language', lang)
+	}
+
+	return (
+		<LanguageContext value={{ language, isZh: language === 'zh-CN', setLanguage }}>
+			{children}
+		</LanguageContext>
+	)
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useLanguage() {
+	const ctx = use(LanguageContext)
+	if (!ctx) throw new Error('useLanguage must be used within LanguageProvider')
+	return ctx
+}
--- a/packages/website/src/i18n/locales/en-US/common.ts
+++ b/packages/website/src/i18n/locales/en-US/common.ts
@@ -1,44 +0,0 @@
-export default {
-	header: {
-		logo_alt: 'page-agent home',
-		slogan: 'GUI Agent in your webpage',
-		nav_docs: 'Docs',
-		nav_source: 'GitHub',
-		mobile_menu: 'Open navigation',
-	},
-	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',
-		advanced: 'Advanced',
-		overview: 'Overview',
-		quick_start: 'Quick Start',
-		limitations: 'Limitations',
-		models: 'Models',
-		custom_tools: 'Custom Tools',
-		knowledge_injection: 'Instructions',
-		data_masking: 'Data Masking',
-		chrome_extension: 'Chrome Extension',
-		cdn_setup: 'CDN Setup',
-		best_practices: 'Best Practices',
-		third_party_agent: 'Third-party Agent',
-		security_permissions: 'Security & Permissions',
-		page_agent: 'PageAgent',
-		page_agent_core: 'PageAgentCore',
-		custom_ui: 'Custom UI',
-	},
-}
--- a/packages/website/src/i18n/locales/zh-CN/common.ts
+++ b/packages/website/src/i18n/locales/zh-CN/common.ts
@@ -1,43 +0,0 @@
-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: '集成指南',
-		advanced: '高级',
-		overview: '概览',
-		quick_start: '快速开始',
-		limitations: '使用限制',
-		models: '模型',
-		custom_tools: '自定义工具',
-		knowledge_injection: '知识注入',
-		data_masking: '数据脱敏',
-		chrome_extension: 'Chrome 扩展',
-		cdn_setup: 'CDN 引入',
-		best_practices: '最佳实践',
-		third_party_agent: '接入第三方 Agent',
-		security_permissions: '安全与权限',
-		page_agent: 'PageAgent',
-		page_agent_core: 'PageAgentCore',
-		custom_ui: '自定义 UI',
-	},
-}
--- a/packages/website/src/i18n/types.ts
+++ b/packages/website/src/i18n/types.ts
@@ -1,12 +0,0 @@
-import 'react-i18next'
-
-import type commonZh from './locales/zh-CN/common'
-
-declare module 'react-i18next' {
-	interface CustomTypeOptions {
-		defaultNS: 'common'
-		resources: {
-			common: typeof commonZh
-		}
-	}
-}
--- a/packages/website/src/main.tsx
+++ b/packages/website/src/main.tsx
@@ -2,14 +2,15 @@ import { createRoot } from 'react-dom/client'
 import { Router } from 'wouter'
 import { useHashLocation } from 'wouter/use-hash-location'

-import './i18n/config'
-import './i18n/types'
+import { LanguageProvider } from './i18n/context'
 import { default as PagesRouter } from './router'

 import './index.css'

 createRoot(document.getElementById('root')!).render(
-	<Router hook={useHashLocation}>
-		<PagesRouter />
-	</Router>
+	<LanguageProvider>
+		<Router hook={useHashLocation}>
+			<PagesRouter />
+		</Router>
+	</LanguageProvider>
 )
--- a/packages/website/src/pages/Home.tsx
+++ b/packages/website/src/pages/Home.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react-dom/no-dangerously-set-innerhtml */
 import { Bot, Box, MessageSquare, PlayCircle, Shield, Sparkles, Users, Zap } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Link, useSearchParams } from 'wouter'

 import Footer from '../components/Footer'
@@ -18,6 +17,7 @@ import {
 	DEMO_BASE_URL,
 	DEMO_MODEL,
 } from '../constants'
+import { useLanguage } from '../i18n/context'

 function getInjection(useCN?: boolean) {
 	const cdn = useCN ? CDN_DEMO_CN_URL : CDN_DEMO_URL
@@ -40,8 +40,7 @@ function getInjection(useCN?: boolean) {
 }

 export default function HomePage() {
-	const { i18n } = useTranslation('common')
-	const isZh = i18n.language === 'zh-CN'
+	const { language, isZh } = useLanguage()

 	const defaultTask = isZh
 		? '从导航栏中进入文档页，打开"快速开始"相关的文档，帮我总结成 markdown'
@@ -71,7 +70,7 @@ export default function HomePage() {
 			win.pageAgent = new PageAgent({
 				// 把 react 根元素排除掉，挂了很多冒泡时间导致假阳
 				interactiveBlacklist: [document.getElementById('root')!],
-				language: i18n.language as any,
+				language: language,

 				instructions: {
 					system: 'You are a helpful assistant on PageAgent website.',
--- a/packages/website/src/pages/docs/Layout.tsx
+++ b/packages/website/src/pages/docs/Layout.tsx
@@ -1,9 +1,9 @@
 import { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
 import { siGooglechrome } from 'simple-icons'
 import { Link, useLocation } from 'wouter'

 import { SparklesText } from '@/components/ui/sparkles-text'
+import { useLanguage } from '@/i18n/context'

 interface DocsLayoutProps {
 	children: ReactNode
@@ -20,46 +20,52 @@ interface NavSection {
 }

 export default function DocsLayout({ children }: DocsLayoutProps) {
-	const { t } = useTranslation('common')
+	const { isZh } = useLanguage()
 	const [location] = useLocation()

 	const navigationSections: NavSection[] = [
 		{
-			title: t('nav.introduction'),
+			title: isZh ? '介绍' : 'Introduction',
 			items: [
-				{ title: t('nav.overview'), path: '/introduction/overview' },
-				{ title: t('nav.quick_start'), path: '/introduction/quick-start' },
-				{ title: t('nav.limitations'), path: '/introduction/limitations' },
+				{ title: isZh ? '概览' : 'Overview', path: '/introduction/overview' },
+				{ title: isZh ? '快速开始' : 'Quick Start', path: '/introduction/quick-start' },
+				{ title: isZh ? '使用限制' : 'Limitations', path: '/introduction/limitations' },
 			],
 		},
 		{
-			title: t('nav.features'),
+			title: isZh ? '功能特性' : 'Features',
 			items: [
-				{ title: t('nav.models'), path: '/features/models' },
-				{ title: t('nav.custom_tools'), path: '/features/custom-tools' },
-				{ title: t('nav.knowledge_injection'), path: '/features/custom-instructions' },
-				{ title: t('nav.data_masking'), path: '/features/data-masking' },
-				{ title: t('nav.chrome_extension'), path: '/features/chrome-extension' },
+				{ title: isZh ? '模型' : 'Models', path: '/features/models' },
+				{ title: isZh ? '自定义工具' : 'Custom Tools', path: '/features/custom-tools' },
+				{ title: isZh ? '知识注入' : 'Instructions', path: '/features/custom-instructions' },
+				{ title: isZh ? '数据脱敏' : 'Data Masking', path: '/features/data-masking' },
+				{ title: isZh ? 'Chrome 扩展' : 'Chrome Extension', path: '/features/chrome-extension' },
 			],
 		},
 		{
-			title: t('nav.integration'),
+			title: isZh ? '集成指南' : 'Integration',
 			items: [
-				{ title: t('nav.third_party_agent'), path: '/integration/third-party-agent' },
-				{ title: t('nav.cdn_setup'), path: '/integration/cdn-setup' },
 				{
-					title: '🚧 ' + t('nav.security_permissions'),
+					title: isZh ? '接入第三方 Agent' : 'Third-party Agent',
+					path: '/integration/third-party-agent',
+				},
+				{ title: isZh ? 'CDN 引入' : 'CDN Setup', path: '/integration/cdn-setup' },
+				{
+					title: '🚧 ' + (isZh ? '安全与权限' : 'Security & Permissions'),
 					path: '/integration/security-permissions',
 				},
-				{ title: '🚧 ' + t('nav.best_practices'), path: '/integration/best-practices' },
+				{
+					title: '🚧 ' + (isZh ? '最佳实践' : 'Best Practices'),
+					path: '/integration/best-practices',
+				},
 			],
 		},
 		{
-			title: t('nav.advanced'),
+			title: isZh ? '高级' : 'Advanced',
 			items: [
-				{ title: t('nav.page_agent'), path: '/advanced/page-agent' },
-				{ title: t('nav.page_agent_core'), path: '/advanced/page-agent-core' },
-				{ title: t('nav.custom_ui'), path: '/advanced/custom-ui' },
+				{ title: 'PageAgent', path: '/advanced/page-agent' },
+				{ title: 'PageAgentCore', path: '/advanced/page-agent-core' },
+				{ title: isZh ? '自定义 UI' : 'Custom UI', path: '/advanced/custom-ui' },
 			],
 		},
 	]
--- a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx
+++ b/packages/website/src/pages/docs/advanced/custom-ui/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
 import { APIDivider, APIReference } from '@/components/ui/api-reference'
+import { useLanguage } from '@/i18n/context'

 export default function CustomUIDocs() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx
+++ b/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
 import { APIDivider, APIReference, TypeRef } from '@/components/ui/api-reference'
+import { useLanguage } from '@/i18n/context'

 export default function PageAgentCoreDocs() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/advanced/page-agent/page.tsx
+++ b/packages/website/src/pages/docs/advanced/page-agent/page.tsx
@@ -1,12 +1,11 @@
-import { useTranslation } from 'react-i18next'
 import { Link } from 'wouter'

 import CodeEditor from '@/components/CodeEditor'
 import { APIReference, TypeRef } from '@/components/ui/api-reference'
+import { useLanguage } from '@/i18n/context'

 export default function PageAgentDocs() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/features/chrome-extension/page.tsx
+++ b/packages/website/src/pages/docs/features/chrome-extension/page.tsx
@@ -1,12 +1,11 @@
-import { useTranslation } from 'react-i18next'
 import { siGithub } from 'simple-icons'

 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function ChromeExtension() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/features/custom-instructions/page.tsx
+++ b/packages/website/src/pages/docs/features/custom-instructions/page.tsx
@@ -1,10 +1,8 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function Instructions() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/features/custom-tools/page.tsx
+++ b/packages/website/src/pages/docs/features/custom-tools/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function CustomTools() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/features/data-masking/page.tsx
+++ b/packages/website/src/pages/docs/features/data-masking/page.tsx
@@ -1,10 +1,8 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function DataMasking() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/features/models/page.tsx
+++ b/packages/website/src/pages/docs/features/models/page.tsx
@@ -1,6 +1,5 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 // Recommended models: lightweight with excellent tool call capabilities
 const MODELS = {
@@ -28,8 +27,7 @@ const MODELS = {
 }

 export default function Models() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()
 	const allModels = [...MODELS.recommended, ...MODELS.verified]

 	return (
--- a/packages/website/src/pages/docs/integration/best-practices/page.tsx
+++ b/packages/website/src/pages/docs/integration/best-practices/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import BetaNotice from '@/components/BetaNotice'
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function BestPractices() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/integration/cdn-setup/page.tsx
+++ b/packages/website/src/pages/docs/integration/cdn-setup/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
 import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
+import { useLanguage } from '@/i18n/context'

 export default function CdnSetup() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div className="space-y-10">
--- a/packages/website/src/pages/docs/integration/security-permissions/page.tsx
+++ b/packages/website/src/pages/docs/integration/security-permissions/page.tsx
@@ -1,10 +1,8 @@
-import { useTranslation } from 'react-i18next'
-
 import BetaNotice from '@/components/BetaNotice'
+import { useLanguage } from '@/i18n/context'

 export default function SecurityPermissions() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/integration/third-party-agent/page.tsx
+++ b/packages/website/src/pages/docs/integration/third-party-agent/page.tsx
@@ -1,10 +1,8 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
+import { useLanguage } from '@/i18n/context'

 export default function ThirdPartyAgentPage() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>
--- a/packages/website/src/pages/docs/introduction/limitations/page.tsx
+++ b/packages/website/src/pages/docs/introduction/limitations/page.tsx
@@ -1,8 +1,7 @@
-import { useTranslation } from 'react-i18next'
+import { useLanguage } from '@/i18n/context'

 export default function LimitationsPage() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div className="max-w-4xl mx-auto">
--- a/packages/website/src/pages/docs/introduction/overview/page.tsx
+++ b/packages/website/src/pages/docs/introduction/overview/page.tsx
@@ -1,8 +1,7 @@
-import { useTranslation } from 'react-i18next'
+import { useLanguage } from '@/i18n/context'

 export default function Overview() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<article>
--- a/packages/website/src/pages/docs/introduction/quick-start/page.tsx
+++ b/packages/website/src/pages/docs/introduction/quick-start/page.tsx
@@ -1,11 +1,9 @@
-import { useTranslation } from 'react-i18next'
-
 import CodeEditor from '@/components/CodeEditor'
 import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants'
+import { useLanguage } from '@/i18n/context'

 export default function QuickStart() {
-	const { i18n } = useTranslation()
-	const isZh = i18n.language === 'zh-CN'
+	const { isZh } = useLanguage()

 	return (
 		<div>