perf: document icon and language select (#299)

client/public/locales/en/common.json

@@ -231,6 +231,7 @@
     "Copy invite url": "Copy invitation link",
     "Invite Url": "Invite Url",
     "Invite url tip": "Friends who register through this link will be permanently bound to you, and you will get a certain balance reward when they recharge. In addition, when friends register with their mobile phone number, you will get 5 yuan reward immediately.",
+    "Language": "Language",
     "Notice": "Notice",
     "Old password is error": "Old password is error",
     "OpenAI Account Setting": "OpenAI Account Setting",

client/public/locales/zh/common.json

@@ -231,6 +231,7 @@
     "Copy invite url": "复制邀请链接",
     "Invite Url": "邀请链接",
     "Invite url tip": "通过该链接注册的好友将永久与你绑定，其充值时你会获得一定余额奖励。\n此外，好友使用手机号注册时，你将立即获得 5 元奖励。",
+    "Language": "语言",
     "Notice": "通知",
     "Old password is error": "旧密码错误",
     "OpenAI Account Setting": "OpenAI 账号配置",

client/src/components/Layout/navbar.tsx

@@ -9,7 +9,6 @@ import NextLink from 'next/link';
 import Badge from '../Badge';
 import Avatar from '../Avatar';
 import MyIcon from '../Icon';
-import Language from '../Language';
 import { useTranslation } from 'next-i18next';
 import { useGlobalStore } from '@/store/global';
 import MyTooltip from '../MyTooltip';
@@ -167,8 +166,20 @@ const Navbar = ({ unread }: { unread: number }) => {
           </Link>
         </Box>
       )}
-
+      {feConfigs?.show_doc && (
-      <Language {...itemStyles} />
+        <MyTooltip label={t('home.Docs')} placement={'right-end'}>
+          <Box
+            {...itemStyles}
+            mb={0}
+            color={'#9096a5'}
+            onClick={() => {
+              window.open(`https://doc.fastgpt.run/docs/intro`);
+            }}
+          >
+            <MyIcon name={'courseLight'} width={'26px'} height={'26px'} />
+          </Box>
+        </MyTooltip>
+      )}
       {feConfigs?.show_git && (
         <MyTooltip label={`Git Star: ${gitStar}`} placement={'right-end'}>
           <Link

client/src/pages/account/components/Info.tsx

@@ -1,5 +1,17 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
-import { Box, Flex, Button, useDisclosure, useTheme, Divider, Select } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Button,
+  useDisclosure,
+  useTheme,
+  Divider,
+  Select,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem
+} from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
 import { useToast } from '@/hooks/useToast';
@@ -16,6 +28,10 @@ import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
 import MyTooltip from '@/components/MyTooltip';
+import { getLangStore, LangEnum, langMap, setLangStore } from '@/utils/i18n';
+import { useRouter } from 'next/router';
+import MyMenu from '@/components/MyMenu';
+import MySelect from '@/components/Select';
 
 const PayModal = dynamic(() => import('./PayModal'), {
   loading: () => <Loading fixed={false} />,
@@ -32,7 +48,8 @@ const OpenAIAccountModal = dynamic(() => import('./OpenAIAccountModal'), {
 
 const UserInfo = () => {
   const theme = useTheme();
-  const { t } = useTranslation();
+  const router = useRouter();
+  const { t, i18n } = useTranslation();
   const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
   const timezones = useRef(timezoneList());
   const { reset } = useForm<UserUpdateParams>({
@@ -57,6 +74,8 @@ const UserInfo = () => {
     multiple: false
   });
 
+  const [language, setLanguage] = useState<`${LangEnum}`>(getLangStore());
+
   const onclickSave = useCallback(
     async (data: UserType) => {
       await updateUserInfo({
@@ -149,6 +168,25 @@ const UserInfo = () => {
           <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
+          <Box flex={'1 0 0'}>
+            <MySelect
+              value={language}
+              list={Object.entries(langMap).map(([key, lang]) => ({
+                label: lang.label,
+                value: key
+              }))}
+              onchange={(val: any) => {
+                const lang = val;
+                setLangStore(lang);
+                setLanguage(lang);
+                i18n?.changeLanguage?.(lang);
+                router.reload();
+              }}
+            />
+          </Box>
+        </Flex>
         <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
           <Box flex={'0 0 80px'}>{t('user.Timezone')}:&nbsp;</Box>
           <Select