mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-18 10:47:27 +00:00
ead43f081c
Add Semi UI internationalization to the project by wrapping the root
component tree with `LocaleProvider`. A new `SemiLocaleWrapper`
component maps the current `i18next` language code to the corresponding
Semi locale (currently `zh_CN` and `en_GB`) and falls back to Chinese
when no match is found.
Key changes
-----------
1. web/src/index.js
• Import `LocaleProvider`, `useTranslation`, and Semi locale files.
• Introduce `SemiLocaleWrapper` to determine `semiLocale` from
`i18next.language` using a concise prefix-based mapping.
• Wrap `PageLayout` with `SemiLocaleWrapper` inside the existing
`ThemeProvider`.
2. Ensures that all Semi components automatically display the correct
language when the app language is switched via i18next.
BREAKING CHANGE
---------------
Applications embedding this project must now ensure that `i18next`
initialization occurs before React render so that `LocaleProvider`
receives the correct initial language.
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import '@douyinfe/semi-ui/dist/css/semi.css';
|
|
import { UserProvider } from './context/User';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
import { StatusProvider } from './context/Status';
|
|
import { ThemeProvider } from './context/Theme';
|
|
import PageLayout from './components/layout/PageLayout.js';
|
|
import './i18n/i18n.js';
|
|
import './index.css';
|
|
import { LocaleProvider } from '@douyinfe/semi-ui';
|
|
import { useTranslation } from 'react-i18next';
|
|
import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
|
|
import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
|
|
|
|
// 欢迎信息（二次开发者未经允许不准将此移除）
|
|
// Welcome message (Do not remove this without permission from the original developer)
|
|
if (typeof window !== 'undefined') {
|
|
console.log('%cWe ❤ NewAPI%c Github: https://github.com/QuantumNous/new-api',
|
|
'color: #10b981; font-weight: bold; font-size: 24px;',
|
|
'color: inherit; font-size: 14px;');
|
|
}
|
|
|
|
function SemiLocaleWrapper({ children }) {
|
|
const { i18n } = useTranslation();
|
|
const semiLocale = React.useMemo(
|
|
() => ({ zh: zh_CN, en: en_GB }[i18n.language] || zh_CN),
|
|
[i18n.language],
|
|
);
|
|
return <LocaleProvider locale={semiLocale}>{children}</LocaleProvider>;
|
|
}
|
|
|
|
// initialization
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(
|
|
<React.StrictMode>
|
|
<StatusProvider>
|
|
<UserProvider>
|
|
<BrowserRouter
|
|
future={{
|
|
v7_startTransition: true,
|
|
v7_relativeSplatPath: true,
|
|
}}
|
|
>
|
|
<ThemeProvider>
|
|
<SemiLocaleWrapper>
|
|
<PageLayout />
|
|
</SemiLocaleWrapper>
|
|
</ThemeProvider>
|
|
</BrowserRouter>
|
|
</UserProvider>
|
|
</StatusProvider>
|
|
</React.StrictMode>,
|
|
);
|