diff --git a/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx b/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx index 90a20efa..adc69330 100644 --- a/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx +++ b/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx @@ -4,48 +4,48 @@ import { Icon } from '@iconify/react/dist/iconify.js' import { Button, Dropdown } from 'antd' import { memo, useEffect, useMemo } from 'react' +const LanguageItems = [ + { + key: 'en-US', + label: ( + + ), + title: 'English' + }, + { + key: 'ja-JP', + label: ( + + ), + title: '日本語' + }, + { + key: 'zh-TW', + label: ( + + ), + title: '繁體中文' + }, + { + key: 'zh-CN', + label: ( + + ), + title: '简体中文' + } +] const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => { const { dispatch, state } = useGlobalContext() - const items = [ - { - key: 'en-US', - label: ( - - ), - title: 'English' - }, - { - key: 'ja-JP', - label: ( - - ), - title: '日本語' - }, - { - key: 'zh-TW', - label: ( - - ), - title: '繁體中文' - }, - { - key: 'zh-CN', - label: ( - - ), - title: '简体中文' - } - ] - const langLabel = useMemo(() => items.find((item) => item?.key === state.language)?.title, [state.language]) + const langLabel = useMemo(() => LanguageItems.find((item) => item?.key === state.language)?.title, [state.language]) useEffect(() => { const savedLang = i18n.language || sessionStorage.getItem('i18nextLng') @@ -53,17 +53,17 @@ const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => { dispatch({ type: 'UPDATE_LANGUAGE', language: savedLang }) } else if (!savedLang) { const browserLang = navigator.language - const supportedLang = items.find((item) => item.key === browserLang) ? browserLang : 'zh-CN' + const supportedLang = LanguageItems.find((item) => item.key === browserLang) ? browserLang : 'zh-CN' + if (state.language === supportedLang) return dispatch({ type: 'UPDATE_LANGUAGE', language: supportedLang }) i18n.changeLanguage(supportedLang) } }, []) - return ( { const { key } = e diff --git a/frontend/packages/common/src/contexts/GlobalStateContext.tsx b/frontend/packages/common/src/contexts/GlobalStateContext.tsx index da730fa6..31fbb1d4 100644 --- a/frontend/packages/common/src/contexts/GlobalStateContext.tsx +++ b/frontend/packages/common/src/contexts/GlobalStateContext.tsx @@ -342,7 +342,7 @@ export const GlobalProvider: FC<{ children: ReactNode }> = ({ children }) => { updateDate: '2024-07-01', powered: 'Powered by https://apipark.com', mainPage: '/guide/page', - language: 'en-US', + language: sessionStorage.getItem('i18nextLng') || 'en-US', pluginsLoaded: false }) const [accessData, setAccessData] = useState>(new Map()) @@ -510,7 +510,7 @@ export const useGlobalContext = () => { updateDate: '', powered: '', mainPage: '', - language: 'en-US', + language: sessionStorage.getItem('i18nextLng') || 'en-US', pluginsLoaded: false }, dispatch: () => {}, diff --git a/frontend/packages/common/src/locales/index.ts b/frontend/packages/common/src/locales/index.ts index 8a98b857..5da94e8a 100644 --- a/frontend/packages/common/src/locales/index.ts +++ b/frontend/packages/common/src/locales/index.ts @@ -1,5 +1,5 @@ import i18n from 'i18next' -import { initReactI18next } from 'react-i18next' +import { initReactI18next, useTranslation } from 'react-i18next' // i18next-browser-languagedetector插件 这是一个 i18next 语言检测插件，用于检测浏览器中的用户语言， import crc32 from 'crc/crc32' import LanguageDetector from 'i18next-browser-languagedetector' @@ -39,23 +39,22 @@ i18n .init({ // 初始化 resources, // 本地多语言数据 - // fallbackLng: config.lang, // 默认当前环境的语言 + supportedLngs: ['zh-CN', 'en-US', 'zh-TW', 'ja-JP'], detection: { caches: ['localStorage', 'sessionStorage', 'cookie'] } }) // --------这里是i18next-scanner新增的配置------------- +// 用于非 React 组件中的翻译 export const $t = (key: string, params?: any[]): string => { - const hashKey = `K${crc32(key).toString(16)}` // 将中文转换成crc32格式去匹配对应的json语言包 + // 将中文转换成crc32格式去匹配对应的json语言包 + const hashKey = `K${crc32(key).toString(16)}` let words = i18n.t(hashKey) - // const { t } = useTranslation(); // 通过hooks - // let words = t(hashKey); if (words === hashKey) { words = key } - // 配置传递参数的场景, 目前仅支持数组，可在此拓展 if (Array.isArray(params)) { const reg = /\((\d)\)/g words = words.replace(reg, (a: string, b: number) => { @@ -65,4 +64,25 @@ export const $t = (key: string, params?: any[]): string => { return words } +// 用于 React 组件中的翻译 +export const useI18n = () => { + const { t } = useTranslation() + + return (key: string, params?: any[]): string => { + const hashKey = `K${crc32(key).toString(16)}` + let words = t(hashKey) + if (words === hashKey) { + words = key + } + + if (Array.isArray(params)) { + const reg = /\((\d)\)/g + words = words.replace(reg, (a: string, b: number) => { + return params[b] + }) + } + return words + } +} + export default i18n diff --git a/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx b/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx index 30694d5a..aa7034d2 100644 --- a/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AiSettingList.tsx @@ -1,5 +1,5 @@ import InsidePage from '@common/components/aoplatform/InsidePage' -import { $t } from '@common/locales' +import { useI18n } from '@common/locales' import { Tabs } from 'antd' import { useEffect, useState } from 'react' import { useSearchParams } from 'react-router-dom' @@ -10,6 +10,7 @@ import { AiSettingProvider } from './contexts/AiSettingContext' const CONTENT_STYLE = { height: 'calc(-300px + 100vh)' } as const const AiSettingContent = () => { + const $t = useI18n() const [searchParams, setSearchParams] = useSearchParams() const [activeKey, setActiveKey] = useState(searchParams.get('status') === 'unconfigure' ? 'config' : 'flow') diff --git a/frontend/packages/core/src/pages/common/CommonPage.tsx b/frontend/packages/core/src/pages/common/CommonPage.tsx index e1e9ae86..7a2c62b4 100644 --- a/frontend/packages/core/src/pages/common/CommonPage.tsx +++ b/frontend/packages/core/src/pages/common/CommonPage.tsx @@ -1,33 +1,26 @@ -import InsidePage from "@common/components/aoplatform/InsidePage"; -import { $t } from "@common/locales"; -import ServiceCategory from "./ServiceCategory"; -import ApiRequestSetting from "./ApiRequestSetting"; -import { Row, Col } from "antd"; +import InsidePage from '@common/components/aoplatform/InsidePage' +import { useI18n } from '@common/locales' +import { Col, Row } from 'antd' +import ApiRequestSetting from './ApiRequestSetting' +import ServiceCategory from './ServiceCategory' -export default function CommonPage(){ - return ( - - - - - {$t('API 请求设置')} - - - - - - - - {$t('服务分类')} - - - - - - ) -} \ No newline at end of file +export default function CommonPage() { + const $t = useI18n() + + return ( + + + + {$t('API 请求设置')} + + + + + + {$t('服务分类')} + + + + + ) +}