i18n

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

LobeChat Internationalization Guide

LobeChat 国际化指南

Default language: Chinese (zh-CN)
Framework: react-i18next
Only edit files in
src/locales/default/
- Never edit JSON files in
```
locales/
```
Run
```
pnpm i18n
```
to generate translations (or manually translate zh-CN/en-US for dev preview)

默认语言：中文（zh-CN）
框架：react-i18next
仅编辑
src/locales/default/
下的文件 - 切勿编辑
```
locales/
```
下的JSON文件
运行
```
pnpm i18n
```
生成翻译（或手动翻译zh-CN/en-US用于开发预览）

Key Naming Convention

键命名规范

Flat keys with dot notation (not nested objects):

typescript

// ✅ Correct
export default {
  'alert.cloud.action': '立即体验',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已连接',
};

// ❌ Avoid nested objects
export default {
  alert: { cloud: { action: '...' } },
};

Patterns:

{feature}.{context}.{action|status}

Parameters: Use

{{variableName}}

syntax

typescript

'alert.cloud.desc': '我们提供 {{credit}} 额度积分',

Avoid key conflicts:

typescript

// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',

// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',

使用点符号的扁平键（而非嵌套对象）：

typescript

// ✅ 正确写法
export default {
  'alert.cloud.action': '立即体验',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已连接',
};

// ❌ 避免使用嵌套对象
export default {
  alert: { cloud: { action: '...' } },
};

命名模式：

{功能模块}.{上下文}.{操作|状态}

参数使用：采用

{{variableName}}

语法

typescript

'alert.cloud.desc': '我们提供 {{credit}} 额度积分',

避免键冲突：

typescript

// ❌ 存在冲突
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',

// ✅ 解决方案
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',

Workflow

工作流程

Add keys to
```
src/locales/default/{namespace}.ts
```
Export new namespace in
```
src/locales/default/index.ts
```

For dev preview: manually translate

locales/zh-CN/{namespace}.json

and

locales/en-US/{namespace}.json

Run
```
pnpm i18n
```
to generate all languages (CI handles this automatically)

在
```
src/locales/default/{namespace}.ts
```
中添加键
在
```
src/locales/default/index.ts
```
中导出新的命名空间

开发预览：手动翻译

locales/zh-CN/{namespace}.json

和

locales/en-US/{namespace}.json

运行
```
pnpm i18n
```
生成所有语言版本（CI会自动处理此步骤）

Usage

使用方法

tsx

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title')
t('alert.cloud.desc', { credit: '1000' })

// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save')

tsx

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title')
t('alert.cloud.desc', { credit: '1000' })

// 多命名空间使用
const { t } = useTranslation(['common', 'chat']);
t('common:save')

Common Namespaces

常用命名空间

Most used:

common

(shared UI),

chat

(chat features),

setting

(settings)

Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic

最常用：

common

（通用UI）、

chat

（聊天功能）、

setting

（设置）

其他：auth、changelog、components、discover、editor、electron、error、file、hotkey、knowledgeBase、memory、models、plugin、portal、providers、tool、topic