docs: remove i18n dep
This commit is contained in:
Simon
@@ -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 页面国际化
|
||||
@@ -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
|
||||
35
packages/website/src/i18n/context.tsx
Normal file
35
packages/website/src/i18n/context.tsx
Normal file
@@ -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
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user