fix: login page redirect multiple times (#166)

* fix: System Settings - General After changing the interface language, the internal pages do not automatically follow the language switch

* fix: login page language error

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: (
+      <Button key="en" type="text" className="flex items-center p-0 bg-transparent border-none">
+        English
+      </Button>
+    ),
+    title: 'English'
+  },
+  {
+    key: 'ja-JP',
+    label: (
+      <Button key="jp" type="text" className="flex items-center p-0 bg-transparent border-none">
+        日本語
+      </Button>
+    ),
+    title: '日本語'
+  },
+  {
+    key: 'zh-TW',
+    label: (
+      <Button key="tw" type="text" className="flex items-center p-0 bg-transparent border-none">
+        繁體中文
+      </Button>
+    ),
+    title: '繁體中文'
+  },
+  {
+    key: 'zh-CN',
+    label: (
+      <Button key="cn" type="text" className="flex items-center p-0 bg-transparent border-none">
+        简体中文
+      </Button>
+    ),
+    title: '简体中文'
+  }
+]
 const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => {
   const { dispatch, state } = useGlobalContext()
-  const items = [
-    {
-      key: 'en-US',
-      label: (
-        <Button key="en" type="text" className="flex items-center p-0 bg-transparent border-none">
-          English
-        </Button>
-      ),
-      title: 'English'
-    },
-    {
-      key: 'ja-JP',
-      label: (
-        <Button key="jp" type="text" className="flex items-center p-0 bg-transparent border-none">
-          日本語
-        </Button>
-      ),
-      title: '日本語'
-    },
-    {
-      key: 'zh-TW',
-      label: (
-        <Button key="tw" type="text" className="flex items-center p-0 bg-transparent border-none">
-          繁體中文
-        </Button>
-      ),
-      title: '繁體中文'
-    },
-    {
-      key: 'zh-CN',
-      label: (
-        <Button key="cn" type="text" className="flex items-center p-0 bg-transparent border-none">
-          简体中文
-        </Button>
-      ),
-      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 (
     <Dropdown
       trigger={['hover']}
       menu={{
-        items,
+        items: LanguageItems,
         style: { minWidth: '80px' },
         onClick: (e) => {
           const { key } = e

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<Map<string, string[]>>(new Map())
@@ -510,7 +510,7 @@ export const useGlobalContext = () => {
         updateDate: '',
         powered: '',
         mainPage: '',
-        language: 'en-US',
+        language: sessionStorage.getItem('i18nextLng') || 'en-US',
         pluginsLoaded: false
       },
       dispatch: () => {},

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

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')
 

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 (
-        <InsidePage 
-                pageTitle={$t('常规设置')} 
-                showBorder={false}
-                contentClassName="pr-PAGE_INSIDE_X"
-                scrollPage={false}
-                >
-                    <Row className="mb-btnybase" >
-                         <Col  >
-                         <span className="font-bold mr-[13px]">
-                            {$t('API 请求设置')}
-                            </span>
-                        </Col>
-                    </Row>
-                    <ApiRequestSetting />
-                    <Row className="mb-btnybase mt-[40px]">
-                        <Col  >
-                        <span className="font-bold mr-[13px]">
-                            {$t('服务分类')}
-                        </span>
-                        </Col>
-                    </Row>
-                    <ServiceCategory />
-        </InsidePage>
-    )
-}
+export default function CommonPage() {
+  const $t = useI18n()
+
+  return (
+    <InsidePage pageTitle={$t('常规设置')} showBorder={false} contentClassName="pr-PAGE_INSIDE_X" scrollPage={false}>
+      <Row className="mb-btnybase">
+        <Col>
+          <span className="font-bold mr-[13px]">{$t('API 请求设置')}</span>
+        </Col>
+      </Row>
+      <ApiRequestSetting />
+      <Row className="mb-btnybase mt-[40px]">
+        <Col>
+          <span className="font-bold mr-[13px]">{$t('服务分类')}</span>
+        </Col>
+      </Row>
+      <ServiceCategory />
+    </InsidePage>
+  )
+}