国际化#

XinAdmin 采用 i18next 和 react-i18next 实现国际化功能，支持多种语言切换，包括简体中文、英语、日语、法语和俄语。

支持的语言#

目前系统支持以下语言：

• zh：简体中文
• en：英语

国际化切换组件#

XinAdmin 提供了 LanguageSwitcher 组件用于语言切换，该组件在系统的多个位置都有使用，如头部导航栏和移动端菜单。

LanguageSwitcher 组件#

LanguageSwitcher 是一个预设的语言切换组件，使用 Ant Design 的 Dropdown 和 Button 组件，内置翻译图标和语言选项。

基本用法：

import LanguageSwitcher from '@/components/LanguageSwitcher';

// 在页面中使用
<LanguageSwitcher />

传递属性：

由于 LanguageSwitcher 组件接受 ButtonProps 类型的所有属性，因此可以像使用普通按钮一样定制外观：

<LanguageSwitcher 
  size="large" 
  type="text" 
  ghost={true}
/>

useLanguage Hook#

XinAdmin 提供了 useLanguage 自定义 Hook，用于处理语言切换逻辑和获取语言相关信息。

可用方法：

• language：当前使用的语言代码
• changeLanguage(lng: string)：切换到指定语言
• getLanguageMenuItems()：获取语言切换菜单项
• getLanguageConfig(lng: string)：获取指定语言的配置
• languageOptions：所有可用的语言选项

使用示例：

import { useLanguage } from '@/hooks/useLanguage';

const { language, changeLanguage, getLanguageMenuItems } = useLanguage();

// 获取当前语言
console.log(language); // 例如: 'zh'

// 切换语言
await changeLanguage('en');

// 获取语言菜单项（用于构建下拉菜单）
const menuItems = getLanguageMenuItems();

语言配置#

每种语言的配置包含三个部分：

• antdLocale：Ant Design 组件的本地化配置
• dayjsLocale：dayjs 日期库的本地化配置
• label：语言的显示名称

语言配置存储在 LANGUAGE_OPTIONS 数组中，结构如下：

const LANGUAGE_OPTIONS = [
  { label: '简体中文', value: 'zh', antdLocale: zh_CN, dayjsLocale: 'zh-cn' },
  { label: 'English', value: 'en', antdLocale: en_US, dayjsLocale: 'en' },
] as const;

翻译文本使用#

在组件中使用翻译文本，可以通过 useTranslation Hook：

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('common.title')}</h1>
      <p>{t('welcome.message', { name: 'XinAdmin' })}</p>
    </div>
  );
};

语言持久化#

用户的语言选择会被保存到 localStorage 中，键名为 i18nextLng，下次访问时会自动加载上次选择的语言。

添加新语言#

如需添加新语言，需要：

1. 在 src/locales 目录下创建新的语言文件夹
2. 在 src/locales/index.ts 中导入新语言资源
3. 在 LANGUAGE_OPTIONS 数组中添加新语言配置
4. 安装相应的 Ant Design 和 dayjs 本地化包

国际化组件使得 XinAdmin 可以轻松适应全球不同地区的用户需求。