no message

src/contexts/themeContext.js

@@ -36,6 +36,10 @@ export const ThemeProvider = ({children}) => {
 
     //GameSearch
 
+    //lang select
+    const [isShowLang,setIsShowLang]=useState(false);
+
+
     const stopTransition = () => {
         page.classList.add('no-transition');
         setTimeout(() => page.classList.remove('no-transition'), 100);
@@ -108,7 +112,10 @@ export const ThemeProvider = ({children}) => {
                 searchData,
                 showGameSearchPanel,
                 showHeader,
-                setShowHeader
+                setShowHeader,
+                //lang
+                isShowLang,
+                setIsShowLang
             }}>
             {children}
         </ThemeContext.Provider>

src/layout/Layout.jsx

@@ -18,6 +18,7 @@ import TransitionGroup from "react-transition-group/TransitionGroup";
 import SubScreen from "@components/SubScreen";
 import CSSTransition from "react-transition-group/CSSTransition";
 import Transition from "react-transition-group/Transition";
+import WLangSelect from "@widgets/WLangSelect";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=()=>{
@@ -84,6 +85,13 @@ const Layout=()=>{
             }} basePath={pathname}/>
         )
     }
+    const renderPop=()=>{
+        return (
+            <>
+                <WLangSelect/>
+            </>
+        )
+    }
     return (
       <>
           {
@@ -94,7 +102,7 @@ const Layout=()=>{
               renderHash()
           }
           {
-              // renderTest()
+              renderPop()
           }
       </>
     );

src/layout/Sidebar/index.jsx

@@ -69,7 +69,7 @@ import {
     SIDE_TYPE_SPECIAL
 } from "@constants/routes";
 import SvgIcon from "@components/SvgIcon";
-import {reqLogout} from "@features/api";
+import {reqChangeInfo, reqLogout} from "@features/api";
 import {APP_THEME} from "@constants/app";
 const drawWidth = 250;
 const drawMobieWidth=250;
@@ -419,9 +419,11 @@ const Sidebar = () => {
         if (value){
             toggleTheme();
         }
-        else {
-
-        }
+        if (!isLogin)return;
+        dispatch(reqChangeInfo({
+            ThemeColor:value
+        }));
+        // console.log(value)
     }
     const renderThemeTabs=()=>{
         if (open){

src/locales/index.js

@@ -58,4 +58,12 @@ i18n.getCurrLangName=()=>{
     if (res)return res.name;
     return "";
 }
+i18n.getAllLangs=()=>{
+    let langs=[];
+    for (const lkey in resources) {
+        let lang=resources[lkey];
+        langs.push(Object.assign({},{lkey:lkey},lang));
+    }
+    return langs;
+}
 export default i18n;

src/locales/languages/pt_BR.json

@@ -23,5 +23,19 @@
     "light": "Luz"
   },
   "sign_in": "Entrar",
-  "sign_up": "Registe-se"
+  "sign_up": "Registe-se",
+  "settings": {
+    "user_info": {
+      "welcome": "Bem-vindo ao 24680.com",
+      "tips": "Por favor, cadastre-se ou faça login primeiro",
+      "name": "Nome:",
+      "id": "ID do usuário:"
+    },
+    "language": "Linguagem",
+    "theme": "Tema",
+    "gender": "Gênero",
+    "phone": "Telefone",
+    "email": "E-mail",
+    "security": "Segurança"
+  }
 }

src/widgets/UserSettings/index.jsx

@@ -20,7 +20,7 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import {StyledThemeTabs} from "@layout/Sidebar/styles";
 import {useThemeProvider} from "@contexts/themeContext";
 import ToggleButton from "@mui/material/ToggleButton";
-import {reqLogout} from "@features/api";
+import {reqChangeInfo, reqLogout} from "@features/api";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
 import {APP_GENDER, APP_THEME} from "@constants/app";
@@ -31,7 +31,7 @@ const UserSettings=()=>{
     const logoutStatus=useSelector(getLogoutStatus);
     const dispatch = useDispatch();
     const navigate=useNavigate();
-    const {theme, toggleTheme} = useThemeProvider();
+    const {theme, toggleTheme,setIsShowLang} = useThemeProvider();
     const renderEmpty=()=>{
         return (
             <div className={styles.wrap_item}>
@@ -184,7 +184,9 @@ const UserSettings=()=>{
     }
     const renderItemLang=()=>{
         return (
-            <button className={styles.action_item}>
+            <button className={styles.action_item} onClick={()=>{
+                setIsShowLang(true);
+            }}>
                 <div className={styles.action_left}>
                     <SvgIcon className={styles.icon} herf={"icon_Language"}></SvgIcon>
                     <div>{i18n.t("settings.language")}</div>
@@ -196,8 +198,14 @@ const UserSettings=()=>{
             </button>
         )
     }
-    const handleTheme=()=>{
+    const handleTheme=(theme)=>{
         toggleTheme();
+        // "DefaultLanguage": "en",
+        //     "ThemeColor": "dark"
+        if (!isLogin)return;
+        dispatch(reqChangeInfo({
+            ThemeColor:theme
+        }));
     }
     const renderItemTheme=()=>{
         return (
@@ -215,8 +223,8 @@ const UserSettings=()=>{
                             height:"100%",
                             alignItems:"center",
                             justifyContent:"space-between"
-                        }} exclusive value={theme} onChange={()=>{
-                            handleTheme();
+                        }} exclusive value={theme} onChange={(event, value)=>{
+                            handleTheme(value);
                         }}>
                             <div className={styles.theme_bg} style={{left: `${theme === APP_THEME.DARK ? '0%' : '50%'}`}}/>
                             <ToggleButton sx={{

src/widgets/WLangSelect/index.jsx

@@ -0,0 +1,107 @@
+import {useThemeProvider} from "@contexts/themeContext";
+import MuiDrawer from '@mui/material/Drawer';
+import styles from './styles.module.scss';
+import SvgIcon from "@components/SvgIcon";
+import {useDispatch, useSelector} from "react-redux";
+import {isLogined} from "@features/mainSlice";
+import {reqChangeInfo} from "@features/api";
+const i18n=global.i18n;
+
+const WLangSelect=()=>{
+    const {isMobile,isShowLang,setIsShowLang} = useThemeProvider();
+    const isLogin=useSelector(isLogined);
+    const dispatch = useDispatch();
+    const onChangeLang=(lang)=>{
+        i18n.setLocalLanguage(lang);
+        setIsShowLang(false);
+        // "DefaultLanguage": "en",
+        //     "ThemeColor": "dark"
+        if (!isLogin)return;
+        let data={
+            DefaultLanguage:lang
+        }
+        dispatch(reqChangeInfo(data));
+    }
+    const renderHeader=()=>{
+        return (
+            <>
+                <div className={styles.header}>
+                    <SvgIcon className={styles.icon} herf={"icon_Language"}/>
+                    {i18n.t("settings.language")}
+                </div>
+                <div className={styles.line}/>
+            </>
+        )
+    }
+    const renderItem=(item,currlang)=>{
+        return (
+            <button key={item.key} className={`${styles.lang_item} ${currlang==item.lkey?styles.active:''}`} onClick={()=>{
+                onChangeLang(item.lkey);
+            }}>
+                {item.name}
+            </button>
+        )
+    }
+    const renderContent=()=>{
+        let langs=i18n.getAllLangs();
+        let currlang=i18n.language;
+        // console.log(currlang)
+        return (
+            <div className={styles.content}>
+                {
+                    langs.map((item,index)=>{
+                        return (
+                            <>
+                                {
+                                    renderItem(item,currlang)
+                                }
+                            </>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    const renderLang=()=>{
+        return (
+            <div className={styles.container_m}>
+                {renderHeader()}
+                {renderContent()}
+            </div>
+        )
+    }
+    const renderMobile=()=>{
+        return (
+            <MuiDrawer open={isShowLang}
+                       anchor={"bottom"}
+                       sx={{
+                           "& .MuiDrawer-paper": {
+                               height: "50%",
+                               boxSizing: "border-box",
+                               overflow:'visible !important',
+                               backgroundColor:'var(--standard);',
+                               boxShadow:'var(--widget-shadow);',
+                               borderTopLeftRadius:'1rem',
+                               borderTopRightRadius:'1rem'
+                           },
+                       }}
+                       variant="temporary"
+                       onClose={()=>{
+                           setIsShowLang(false)
+                       }}>
+                {renderLang()}
+            </MuiDrawer>
+        )
+    }
+    const renderDesktop=()=>{
+
+    }
+    return (
+        <>
+            {
+                isMobile()?renderMobile():renderDesktop()
+            }
+        </>
+    )
+}
+export default WLangSelect;

src/widgets/WLangSelect/styles.module.scss

@@ -0,0 +1,51 @@
+.container_m{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 1.5rem;
+  gap: 1.5rem;
+  & .header{
+    display: flex;
+    width: 100%;
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--header);
+    gap: 0.5rem;
+    & .icon{
+      width: 1.4rem;
+      height: 1.4rem;
+      fill: var(--text);
+    }
+  }
+  & .line{
+    border-top: 1px solid var(--card-line);
+  }
+  & .content{
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: pan-y;
+  }
+}
+.lang_item{
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 3.25rem;
+  padding: 0 1.375rem;
+  border-radius: var(--border-radius);
+  color: var(--text);
+  &.active{
+    background: var(--nav-item-top);
+    color: var(--header);
+    font-weight: 600;
+  }
+}