feat: add login page ip detect (#2819)

* feat: add login page ip detect

* code perf

packages/web/components/common/Icon/constants.ts

@@ -39,6 +39,8 @@ export const iconPaths = {
   'common/inviteLight': () => import('./icons/common/inviteLight.svg'),
   'common/language/en': () => import('./icons/common/language/en.svg'),
   'common/language/zh': () => import('./icons/common/language/zh.svg'),
+  'common/language/China': () => import('./icons/common/language/China.svg'),
+  'common/language/America': () => import('./icons/common/language/America.svg'),
   'common/leftArrowLight': () => import('./icons/common/leftArrowLight.svg'),
   'common/line': () => import('./icons/common/line.svg'),
   'common/lineChange': () => import('./icons/common/lineChange.svg'),

packages/web/i18n/en/login.json

@@ -1,13 +1,16 @@
 {
+  "Chinese_ip_tip": "It is detected that you are a mainland Chinese IP, click to jump to visit the mainland China version.",
   "Login": "Login",
   "forget_password": "Find password",
   "login_failed": "Login failed",
   "login_success": "Login successful",
+  "no_remind": "Don't remind again",
   "password_condition": "Password maximum 60 characters",
   "policy_tip": "By useing, you agree to our",
   "privacy": "Privacy policy",
+  "redirect": "Jump",
   "register": "Register",
   "root_password_placeholder": "The root user password is the value of the environment variable DEFAULT_ROOT_PSW",
   "terms": "Terms",
   "use_root_login": "Log in as root user"
-}
+}

packages/web/i18n/zh/login.json

@@ -9,5 +9,8 @@
   "register": "注册账号",
   "root_password_placeholder": "root 用户密码为环境变量 DEFAULT_ROOT_PSW 的值",
   "terms": "服务协议",
-  "use_root_login": "使用 root 用户登录"
-}
+  "use_root_login": "使用 root 用户登录",
+  "redirect": "跳转",
+  "no_remind": "不再提醒",
+  "Chinese_ip_tip": "检测到您是中国大陆 IP，点击跳转访问中国大陆版。"
+}

projects/app/src/components/Select/I18nLngSelector.tsx

@@ -0,0 +1,40 @@
+import { langMap } from '@/web/common/utils/i18n';
+import { Avatar, Box, Flex } from '@chakra-ui/react';
+import MySelect from '@fastgpt/web/components/common/MySelect';
+import { useI18nLng } from '@fastgpt/web/hooks/useI18n';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+
+const I18nLngSelector = () => {
+  const { i18n } = useTranslation();
+  const { onChangeLng } = useI18nLng();
+
+  const list = useMemo(() => {
+    return Object.entries(langMap).map(([key, lang]) => ({
+      label: (
+        <Flex alignItems={'center'}>
+          <MyIcon borderRadius={'0'} mr={2} name={lang.avatar as any} w={'14px'} h={'9px'} />
+          <Box>{lang.label}</Box>
+        </Flex>
+      ),
+      value: key
+    }));
+  }, []);
+
+  return (
+    <MySelect
+      _hover={{
+        bg: 'myGray.200'
+      }}
+      value={i18n.language}
+      list={list}
+      onchange={(val: any) => {
+        const lang = val;
+        onChangeLng(lang);
+      }}
+    />
+  );
+};
+
+export default I18nLngSelector;

projects/app/src/pages/account/components/Individuation.tsx

@@ -7,18 +7,13 @@ import { UserType } from '@fastgpt/global/support/user/type';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
-import { langMap } from '@/web/common/utils/i18n';
-import { useRouter } from 'next/router';
-import { useI18nLng } from '@fastgpt/web/hooks/useI18n';
-
-import MySelect from '@fastgpt/web/components/common/MySelect';
 import TimezoneSelect from '@fastgpt/web/components/common/MySelect/TimezoneSelect';
+import I18nLngSelector from '@/components/Select/I18nLngSelector';
 
 const Individuation = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { userInfo, updateUserInfo } = useUserStore();
   const { toast } = useToast();
-  const { onChangeLng } = useI18nLng();
 
   const { reset } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
@@ -49,17 +44,7 @@ const Individuation = () => {
         <Flex alignItems={'center'} w={['85%', '350px']}>
           <Box flex={'0 0 80px'}>{t('common:user.Language')}:&nbsp;</Box>
           <Box flex={'1 0 0'}>
-            <MySelect
-              value={i18n.language}
-              list={Object.entries(langMap).map(([key, lang]) => ({
-                label: lang.label,
-                value: key
-              }))}
-              onchange={(val: any) => {
-                const lang = val;
-                onChangeLng(lang);
-              }}
-            />
+            <I18nLngSelector />
           </Box>
         </Flex>
         <Flex mt={6} alignItems={'center'} w={['85%', '350px']}>

projects/app/src/pages/login/components/LoginForm/components/FormLayout.tsx

@@ -9,6 +9,8 @@ import { useRouter } from 'next/router';
 import { Dispatch, useRef } from 'react';
 import { useTranslation } from 'next-i18next';
 import Divider from '@/pages/app/detail/components/WorkflowComponents/Flow/components/Divider';
+import I18nLngSelector from '@/components/Select/I18nLngSelector';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 8);
 
 interface Props {
@@ -24,6 +26,7 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
   const { lastRoute = '/app/list' } = router.query as { lastRoute: string };
   const state = useRef(nanoid());
   const redirectUri = `${location.origin}/login/provider`;
+  const { isPc } = useSystem();
 
   const oAuthList = [
     ...(feConfigs?.oauth?.wechat && pageType !== LoginPageTypeEnum.wechat
@@ -72,22 +75,25 @@ const FormLayout = ({ children, setPageType, pageType }: Props) => {
 
   return (
     <Flex flexDirection={'column'} h={'100%'}>
-      <Flex alignItems={'center'}>
-        <Flex
-          w={['48px', '56px']}
-          h={['48px', '56px']}
-          bg={'myGray.25'}
-          borderRadius={'xl'}
-          borderWidth={'1.5px'}
-          borderColor={'borderColor.base'}
-          alignItems={'center'}
-          justifyContent={'center'}
-        >
-          <Image src={LOGO_ICON} w={['24px', '28px']} alt={'icon'} />
+      <Flex alignItems={'center'} justify={'space-between'}>
+        <Flex>
+          <Flex
+            w={['48px', '56px']}
+            h={['48px', '56px']}
+            bg={'myGray.25'}
+            borderRadius={'xl'}
+            borderWidth={'1.5px'}
+            borderColor={'borderColor.base'}
+            alignItems={'center'}
+            justifyContent={'center'}
+          >
+            <Image src={LOGO_ICON} w={['24px', '28px']} alt={'icon'} />
+          </Flex>
+          <Box ml={3} fontSize={['2xl', '3xl']} fontWeight={'bold'}>
+            {feConfigs?.systemTitle}
+          </Box>
         </Flex>
-        <Box ml={3} fontSize={['2xl', '3xl']} fontWeight={'bold'}>
-          {feConfigs?.systemTitle}
-        </Box>
+        {!isPc && <I18nLngSelector />}
       </Flex>
       {children}
       {show_oauth && (