feat(i18n): add i18next foundation and migrate Login + MainLayout

package.json

@@ -20,8 +20,11 @@
     "antd": "^5.24.6",
     "axios": "^1.9.0",
     "dayjs": "^1.11.13",
+    "i18next": "^26.3.0",
+    "i18next-browser-languagedetector": "^8.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.8",
     "react-router-dom": "^6.30.0",
     "zustand": "^5.0.3"
   },

src/api/index.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios'
+import i18n, { FALLBACK_LANGUAGE } from '../i18n'
 import { useAuthStore } from '../store/auth'
 
 export class ApiError extends Error {
@@ -22,6 +23,7 @@ api.interceptors.request.use((config) => {
   if (token) {
     config.headers.token = token
   }
+  config.headers['Accept-Language'] = i18n.resolvedLanguage ?? FALLBACK_LANGUAGE
   return config
 })
 

src/i18n/index.ts

@@ -0,0 +1,46 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+import commonEN from './locales/en-US/common.json'
+import commonZH from './locales/zh-CN/common.json'
+import navEN from './locales/en-US/nav.json'
+import navZH from './locales/zh-CN/nav.json'
+import layoutEN from './locales/en-US/layout.json'
+import layoutZH from './locales/zh-CN/layout.json'
+import loginEN from './locales/en-US/login.json'
+import loginZH from './locales/zh-CN/login.json'
+
+export const SUPPORTED_LANGUAGES = ['en-US', 'zh-CN'] as const
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number]
+
+export const LANG_COOKIE = 'i18n_lang'
+export const FALLBACK_LANGUAGE: SupportedLanguage = 'en-US'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      'en-US': { common: commonEN, nav: navEN, layout: layoutEN, login: loginEN },
+      'zh-CN': { common: commonZH, nav: navZH, layout: layoutZH, login: loginZH },
+    },
+    fallbackLng: FALLBACK_LANGUAGE,
+    supportedLngs: SUPPORTED_LANGUAGES,
+    defaultNS: 'common',
+    ns: ['common', 'nav', 'layout', 'login'],
+    interpolation: { escapeValue: false },
+    detection: {
+      order: ['querystring', 'cookie', 'navigator'],
+      lookupQuerystring: 'lang',
+      lookupCookie: LANG_COOKIE,
+      caches: ['cookie'],
+      cookieOptions: {
+        maxAge: 60 * 60 * 24 * 365,
+        sameSite: 'lax',
+        secure: window.location.protocol === 'https:',
+        path: '/',
+      },
+    },
+  })
+
+export default i18n

src/i18n/locales/en-US/common.json

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "name": "OCTO Admin"
+  },
+  "language": {
+    "label": "Language",
+    "en-US": "English",
+    "zh-CN": "简体中文"
+  }
+}

src/i18n/locales/en-US/layout.json

@@ -0,0 +1,11 @@
+{
+  "breadcrumb.admin": "Admin",
+  "header.notifications": "Notifications",
+  "header.help": "Help",
+  "header.logout": "Logout",
+  "theme.label": "Theme",
+  "theme.tooltip": "Theme: {{name}}",
+  "theme.light": "Light",
+  "theme.dark": "Dark",
+  "theme.auto": "Auto"
+}

src/i18n/locales/en-US/login.json

@@ -0,0 +1,13 @@
+{
+  "subtitle": "Admin Console",
+  "username.placeholder": "Username",
+  "username.required": "Please enter your username",
+  "password.placeholder": "Password",
+  "password.required": "Please enter your password",
+  "submit": "Sign in",
+  "success": "Signed in",
+  "failure": "Sign-in failed",
+  "forgotPassword": "Forgot password?",
+  "contactAdmin": "Contact admin",
+  "footer": "© {{year}} Octo · Admin Console"
+}

src/i18n/locales/en-US/nav.json

@@ -0,0 +1,10 @@
+{
+  "dashboard": "Dashboard",
+  "users": "Users",
+  "groups": "Groups",
+  "spaces": "Spaces",
+  "appBots": "App Bots",
+  "systemSetting": "System Settings",
+  "backup": "Backups",
+  "download": "Downloads"
+}

src/i18n/locales/zh-CN/common.json

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "name": "OCTO 管理后台"
+  },
+  "language": {
+    "label": "语言",
+    "en-US": "English",
+    "zh-CN": "简体中文"
+  }
+}

src/i18n/locales/zh-CN/layout.json

@@ -0,0 +1,11 @@
+{
+  "breadcrumb.admin": "管理后台",
+  "header.notifications": "通知",
+  "header.help": "帮助",
+  "header.logout": "退出登录",
+  "theme.label": "主题",
+  "theme.tooltip": "主题：{{name}}",
+  "theme.light": "浅色",
+  "theme.dark": "深色",
+  "theme.auto": "跟随系统"
+}

src/i18n/locales/zh-CN/login.json

@@ -0,0 +1,13 @@
+{
+  "subtitle": "管理后台",
+  "username.placeholder": "用户名",
+  "username.required": "请输入用户名",
+  "password.placeholder": "密码",
+  "password.required": "请输入密码",
+  "submit": "登录",
+  "success": "登录成功",
+  "failure": "登录失败",
+  "forgotPassword": "忘记密码？",
+  "contactAdmin": "联系管理员",
+  "footer": "© {{year}} Octo · 管理后台"
+}

src/i18n/locales/zh-CN/nav.json

@@ -0,0 +1,10 @@
+{
+  "dashboard": "仪表盘",
+  "users": "用户管理",
+  "groups": "群组管理",
+  "spaces": "空间管理",
+  "appBots": "应用 Bot",
+  "systemSetting": "系统配置",
+  "backup": "备份管理",
+  "download": "下载配置"
+}