no message

src/components/GameItem/index.jsx

@@ -3,6 +3,7 @@ import {NavLink} from "react-router-dom";
 import {LazyLoadImage} from "react-lazy-load-image-component";
 import symbol from "@assets/symbol-defs.svg";
 import React from "react";
+import {ROUTE_PATH} from "@constants/routes";
 
 const GameItem=({data})=>{
     const renderOlicon=()=>{
@@ -20,7 +21,8 @@ const GameItem=({data})=>{
     }
     return (
         <div className={styles.grid_item}>
-            <NavLink to={data.link} className={styles.game_img_wrap}>
+            {/*<NavLink to={data.link} className={styles.game_img_wrap}>*/}
+            <NavLink to={ROUTE_PATH.GAME+"/"+data.link} className={styles.game_img_wrap}>
                 <LazyLoadImage
                     src={data.img}
                     alt={"game-icon"}

src/components/SubScreen/index.jsx

@@ -5,34 +5,26 @@ import {animated,easings} from "@react-spring/web";
 import {useState,useEffect} from "react";
 import {useSpring, useSpringRef} from "@react-spring/core";
 import {useLocation} from "react-router";
+import {sleep} from "@utils/helpers";
 const i18n=global.i18n;
 
-const SubScreen=({open,onClose,children,route,renderComp})=>{
-    const [subOpen,setSubOpen]=useState(open);
+const SubScreen=({open,onClose,children,route,timeout})=>{
+    // const [subOpen,setSubOpen]=useState(open);
+    const subOpen=open;
     const {pathname,hash} = useLocation();
-    const duration=200;
-    const spref = useSpringRef()
+    const duration=timeout;
+    // const duration=50;
 
     const delayClose=()=>{
         if (onClose)onClose();
     }
     const close=()=>{
-        setSubOpen(false);
-        // spref.start({
-        //     transform:'translateX(100%) translateZ(0px)',
-        // })
-        setTimeout(function () {
-            delayClose();
-        },duration);
+        delayClose();
     }
     // useEffect(()=>{
-    //     // extra.close=close;
-    //     // spref.start();
-    //     spref.start({
-    //         from: {transform: 'translateX(100%) translateZ(0px)'},
-    //         transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
-    //     })
-    // },[pathname])
+    //     return async () => {
+    //     };
+    // },[])
 
     const showAni=useSpring({
         // ref: spref,
@@ -71,8 +63,8 @@ const SubScreen=({open,onClose,children,route,renderComp})=>{
         // // {children}
         return (
             <div className={styles.content}>
-                {/*{children}*/}
-                {renderComp({close})}
+                {children}
+                {/*{renderComp?renderComp({close}):(<></>)}*/}
             </div>
         )
     }

src/components/SubScreen/styles.module.scss

@@ -3,6 +3,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
   background: var(--body);
   & .appbar{
     display: flex;

src/constants/routes.js

@@ -14,7 +14,8 @@ const ROUTE_PATH={
     SIGN_UP:"#/signup",
     SETTINGS:"#/settings",
     EDIT_PROFILE:"#/editprofile",
-    EDIT_PWD:"#/editpwd"
+    EDIT_PWD:"#/editpwd",
+    GAME:"/game"
 }
 
 export {

src/db/routes.js

@@ -178,4 +178,17 @@ export const routes=[
     //     lpath:"#/signin",//登录path
     //     subs:[]
     // }
+    {
+        path: "/game/*",
+        type: 3,
+        side: 0,
+        block:1,//块排序
+        title: "Game",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"game",
+        login:1,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    }
 ]

src/features/mainSlice.js

@@ -340,8 +340,21 @@ export const allNavs=(state)=>{
 export const allTopNavs=(state)=>{
     return state.main.allTopNavs;
 }
+const getRouteFromPath=(state,path)=>{
+    let allMap=routesMap(state);
+    let route=allMap[path];
+    if (route==null){
+        //查看是否有可变路由
+        let paths=path.split("/");
+        paths[paths.length-1]="*";
+        let newpath=paths.join("/");
+        route=allMap[newpath];
+    }
+    return route;
+}
 export const getRoute=(path)=>(state)=>{
-    let route=routesMap(state)[path];
+    // let route=routesMap(state)[path];
+    let route=getRouteFromPath(state,path);
     if (route==null)return {};
     return route;
 }
@@ -369,22 +382,26 @@ export const getBlockColumn=(state)=>{
     return blocks;
 }
 export const isFullRoute=(path)=>(state)=>{
-    let route=routesMap(state)[path];
+    // let route=routesMap(state)[path];
+    let route=getRouteFromPath(state,path);
     if (route)return route.type===ROUTE_TYPE_FULL;
     return false;
 }
 export const isPopRoute=(path)=>(state)=>{
-    let route=routesMap(state)[path];
+    // let route=routesMap(state)[path];
+    let route=getRouteFromPath(state,path);
     if (route)return route.type===ROUTE_TYPE_POP;
     return false;
 }
 export const isInRoute=(path)=>(state)=>{
-    let route=routesMap(state)[path];
+    // let route=routesMap(state)[path];
+    let route=getRouteFromPath(state,path);
     if (route)return route.type===ROUTE_TYPE_IN;
     return false;
 }
 export const isOutRoute=(path)=>(state)=>{
-    let route=routesMap(state)[path];
+    // let route=routesMap(state)[path];
+    let route=getRouteFromPath(state,path);
     if (route)return route.type===ROUTE_TYPE_OUTLINK;
     return false;
 }

src/layout/Layout.jsx

@@ -3,7 +3,7 @@ import Sidebar from "@layout/Sidebar";
 import Navbar from "@layout/Navbar";
 import BottomNav from "@layout/BottomNav";
 import AppContainer from "@layout/AppContainer";
-import {lazy, Suspense, useEffect, useRef} from "react";
+import React, {cloneElement, createRef, lazy, Suspense, useEffect, useRef, useState} from "react";
 import LoadingScreen from "@components/LoadingScreen";
 import {Route, Routes, useLocation} from "react-router-dom";
 import {useSelector} from "react-redux";
@@ -14,6 +14,10 @@ import CRoute from "@layout/Routes";
 import {CBrowserRouter,CHashRouter} from "@layout/Routes";
 import Footer from "@layout/Footer";
 import GameSearchPanel from "@layout/GameSearchPanel";
+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";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=()=>{
@@ -28,45 +32,69 @@ const Layout=()=>{
         appRef.current && appRef.current.scrollTo(0, 0);
         preventDefault();
     }, []);
+    const renderIn=()=>{
+        return (
+            <div className={`app`} ref={appRef}>
+                <ScrollToTop/>
+                <Sidebar/>
+                <Navbar/>
+                {isMobile() && <BottomNav/>}
+                <AppContainer>
+                    <div className="app_container-content d-flex flex-column flex-1">
+                        <Suspense fallback={<LoadingScreen/>}>
+                            <CBrowserRouter routes={inRoutes}/>
+                        </Suspense>
+                    </div>
+                    <Footer />
+                </AppContainer>
+                <GameSearchPanel />
+            </div>
+        )
+    }
+    const renderInFull=()=>{
+        return (
+            <div className={`app fluid`} ref={appRef}>
+                <div className="app_container_full">
+                    <Suspense fallback={<LoadingScreen/>}>
+                        <CBrowserRouter routes={inRoutes}/>
+                    </Suspense>
+                </div>
+            </div>
+        )
+    }
+    const renderHash=()=>{
+        // return (
+        //     <div className="app-hash">
+        //         {/*<Suspense>*/}
+        //         {/*    */}
+        //         {/*</Suspense>*/}
+        //         <CHashRouter routes={popRoutes} hlocation={{
+        //             pathname: pathname,
+        //             search: search,
+        //             hash: hash
+        //         }} basePath={pathname}/>
+        //     </div>
+        // )
+        return (
+            <CHashRouter routes={popRoutes} hlocation={{
+                pathname: pathname,
+                search: search,
+                hash: hash
+            }} basePath={pathname}/>
+        )
+    }
     return (
       <>
-          <div className={`app ${isFull ? 'fluid' : ''}`} ref={appRef}>
-              <ScrollToTop/>
-              {
-                  !isFull && (
-                      <>
-                          <Sidebar/>
-                          <Navbar/>
-                          {isMobile() && <BottomNav/>}
-                      </>
-                  )
-              }
-              <AppContainer>
-                  <div className="app_container-content d-flex flex-column flex-1">
-                      <Suspense fallback={<LoadingScreen/>}>
-                          <CBrowserRouter routes={inRoutes}></CBrowserRouter>
-                      </Suspense>
-                  </div>
-                  {/*</div>*/}
-                  <Footer />
-              </AppContainer>
-              <GameSearchPanel />
-          </div>
           {
-              hash!=''?(
-                  <div className="app-hash">
-                      {/*<Suspense>*/}
-                      {/*    */}
-                      {/*</Suspense>*/}
-                      <CHashRouter routes={popRoutes} hlocation={{
-                          pathname: pathname,
-                          search: search,
-                          hash: hash
-                      }} basePath={pathname}></CHashRouter>
-                  </div>
-              ):(<></>)
+              !isFull?renderIn():renderInFull()
+          }
+          {
+              // hash!=''?renderHash():(<></>)
+              renderHash()
+          }
+          {
+              // renderTest()
           }
-
       </>
     );
 }

src/layout/Routes/RouteContainer.jsx

@@ -0,0 +1,61 @@
+import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP, ROUTE_TYPE_POP_OR_FULL} from "@constants/routes";
+import React from "react";
+import Popup from "@components/Popup";
+import SubScreen from "@components/SubScreen";
+import {useNavigate} from "react-router-dom";
+import {useThemeProvider} from "@contexts/themeContext";
+
+const RouteContainer=(props)=>{
+    const { children, route,open} = props;
+    const navigate = useNavigate()
+    const {isMobile} = useThemeProvider();
+    const renderIn=()=>{
+        return (
+            <>
+                {children}
+            </>
+        );
+    }
+    const renderPop=()=>{
+        return(
+            <Popup {...props}>
+                <div className="pop_content">
+                    {children}
+                </div>
+            </Popup>
+        )
+    }
+    const renderSub=()=>{
+        return (
+            <SubScreen {...props}>
+                {children}
+            </SubScreen>
+        )
+    }
+    const renderPopOrFull=()=>{
+        return (
+            <>
+                {
+                    isMobile()?renderSub():renderPop()
+                }
+            </>
+        )
+    }
+    const renderComp=()=>{
+        let comp=(<></>);
+        if (route.type===ROUTE_TYPE_FULL||route.type===ROUTE_TYPE_IN){
+            comp=renderIn();
+        }
+        else if (route.type===ROUTE_TYPE_POP_OR_FULL){
+            comp=renderPopOrFull();
+        }
+        else if (route.type===ROUTE_TYPE_POP){
+            comp=renderPop();
+        }
+        return comp;
+    }
+    return (
+        renderComp()
+    );
+}
+export default RouteContainer;

src/layout/Routes/RouteWrapper.jsx

@@ -32,7 +32,7 @@ const RouteWrapper = (props) => {
         return (
             <>
                 {
-                    isexit?<Comp pageID={route.id} />:<></>
+                    isexit?<Comp pageID={route.id} {...props} />:<></>
                 }
             </>
         );
@@ -43,29 +43,38 @@ const RouteWrapper = (props) => {
     const renderPop=()=>{
         let comp=(<></>);
         // if (Comp!=null)comp=Comp;
-        if (Comp!=null)comp=<Comp pageID={route.id} />;
-        return(
-            <Popup pageID={route.id} open={true} onClose={handleClose}>
-                <div className="pop_content">
-                    {comp}
-                </div>
-            </Popup>
+        if (Comp!=null)comp=<Comp pageID={route.id} {...props} />;
+        // return(
+        //     <Popup pageID={route.id} open={true} onClose={handleClose}>
+        //         <div className="pop_content">
+        //             {comp}
+        //         </div>
+        //     </Popup>
+        // )
+        return (
+            <div className="pop_content">
+                {comp}
+            </div>
         )
     }
     const renderSub=()=>{
-        // let comp=(<></>);
-        const renderComp=(extra)=>{
-            if (Comp!=null){
-                return (<Comp pageID={route.id} {...extra} />)
-            }
-            else return (<></>);
-        }
-        // if (Comp!=null)comp=<Comp pageID={route.id} />;
-        // if (Comp!=null)comp=Comp;
+        let comp=(<></>);
+        // const renderComp=(extra)=>{
+        //     if (Comp!=null){
+        //         return (<Comp pageID={route.id} {...extra} />)
+        //     }
+        //     else return (<></>);
+        // }
+        if (Comp!=null)comp=<Comp pageID={route.id} {...props} />;
+        // return (
+        //     <SubScreen  route={route} onClose={handleClose} open={true} renderComp={renderComp}>
+        //         {comp}
+        //     </SubScreen>
+        // )
         return (
-            <SubScreen  route={route} onClose={handleClose} open={true} renderComp={renderComp}>
-                {/*{comp}*/}
-            </SubScreen>
+            <>
+                {comp}
+            </>
         )
     }
     const renderPopOrFull=()=>{

src/layout/Routes/index.jsx

@@ -1,7 +1,11 @@
 import AllComponents from '@pages/index';
-import {Route, Routes} from 'react-router-dom';
-import {lazy, Suspense} from "react";
+import {Route, Routes, useNavigate} from 'react-router-dom';
+import React, {cloneElement, lazy, Suspense} from "react";
 import SmallLoading from "@components/SmallLoading";
+import TransitionGroup from "react-transition-group/TransitionGroup";
+import CSSTransition from "react-transition-group/CSSTransition";
+import SubScreen from "@components/SubScreen";
+import RouteContainer from "@layout/Routes/RouteContainer";
 const RouteWrapper = lazy(() => import('@layout/Routes/RouteWrapper'));
 
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
@@ -42,47 +46,58 @@ const CBrowserRouter=(props)=>{
 }
 const CHashRouter=(props)=>{
     const {routes,hlocation}=props;
+    const navigate = useNavigate()
     //多hash 切到最后一个
     let {pathname,hash,search}=hlocation;
     let paths=pathname.split("#");
     pathname=paths.shift();
     let hashs=hash.split("#");
-    // hash="#"+hashs.pop();
-    // pathname=pathname+hash;
-    // console.log({pathname,hash,search})
     let currpath=pathname+hash;
-    // let currhash="";
+    const timeout=200;
     //多hash 切到最后一个
+    const getRoutes=(path)=>{
+        for (const route of routes) {
+            if (route.path===path)return route;
+        }
+        return null;
+    }
+    const handleClose = () => {
+        navigate(-1);
+    }
     return (
-        <>
+        <TransitionGroup
+            className="app-hash"
+            childFactory={child => {
+                let isopen=child.props.in;
+                return cloneElement(child, {open:isopen})
+            }}>
             {
                 hashs.map((item,index)=>{
                     if (item=="")return (<></>);
                     let hash="#"+item;
+                    let route=getRoutes(hash);
+                    if (route==null)return (<></>);
                     return (
-                        <Suspense fallback={<SmallLoading></SmallLoading>}>
-                            <Routes key={index} location={{pathname:currpath,hash:hash,search}}>
-                                {
-                                    routes.map((route)=>{
-                                        if (route.path===hash){
-                                            return createRoute({...props,route,path:currpath});
+                        <CSSTransition timeout={timeout}>
+                            <RouteContainer route={route} timeout={timeout} onClose={handleClose}>
+                                <Suspense fallback={<SmallLoading/>}>
+                                    <Routes key={index} location={{pathname:currpath,hash:hash,search}}>
+                                        {
+                                            routes.map((route)=>{
+                                                if (route.path===hash){
+                                                    return createRoute({...props,route,path:currpath,close:handleClose});
+                                                }
+                                                else return (<></>);
+                                            })
                                         }
-                                        else return (<></>);
-                                    })
-                                }
-                            </Routes>
-                        </Suspense>
+                                    </Routes>
+                                </Suspense>
+                            </RouteContainer>
+                        </CSSTransition>
                     )
                 })
             }
-        </>
-        // <Routes location={{pathname,hash,search}}>
-        //     {
-        //         routes.map((route,index)=>{
-        //             return createRoute({...props,route});
-        //         })
-        //     }
-        // </Routes>
+        </TransitionGroup>
     )
 }
 export {CBrowserRouter,CHashRouter};

src/pages/Game.jsx

@@ -0,0 +1,10 @@
+import WGame from "@widgets/WGame";
+
+const Game=({...props})=>{
+    return (
+        <WGame {...props}>
+
+        </WGame>
+    )
+}
+export default Game;

src/pages/Settings.jsx

@@ -25,12 +25,12 @@
 
 import UserSettings from "@widgets/UserSettings";
 
-const Settings = () => {
+const Settings = ({...props}) => {
     return (
         <>
             {/*<PageHeader title="Settings" />*/}
             {/*<AppGrid id="settings" widgets={widgets}/>*/}
-            <UserSettings/>
+            <UserSettings {...props}/>
         </>
     )
 }

src/pages/index.jsx

@@ -5,11 +5,13 @@ const Login=lazy(()=>import("@pages/Login"));
 const Settings=lazy(()=>import("@pages/Settings"));
 const EditProfile=lazy(()=>import("@pages/EditProfile"));
 const EditPassword=lazy(()=>import("@pages/EditPassword"));
+const Game=lazy(()=>import("@pages/Game"));
 export default {
     ModulePage:ModulePage,
     Home:Home,
     login:Login,
     settings:Settings,
     editProfile:EditProfile,
-    editPassword:EditPassword
+    editPassword:EditPassword,
+    game:Game
 }

src/styles/_global.scss

@@ -42,9 +42,15 @@ body {
         }
     }
 
+    &_container_full{
+        display: flex;
+        height: 100vh;
+        background-color: var(--widget-bg);
+    }
+
     &.fluid {
         display: block;
-
+        //display: flex;
         .app_container {
             margin: 0;
         }
@@ -81,6 +87,7 @@ body {
     position: fixed;
     z-index: var(--zindex-second);
     inset: 0px;
+    pointer-events: none;
 }
 .pop{
     min-height: 100vh;

src/utils/helpers.js

@@ -137,3 +137,10 @@ export const getHttpMsg=(data)=>{
     }
     return msg;
 }
+export const sleep=async (time)=>{
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve(true);
+        }, time);
+    });
+}

src/widgets/ModuleGroup/index.jsx

@@ -15,7 +15,9 @@ const ModuleGroup=({pageID})=>{
     const modules=useSelector(getModules(pageID));
     const {isMobile} = useThemeProvider();
     useEffect(() => {
-        dispatch(reqPageModules(pageID));
+        if (modules==null||modules.length===0){
+            dispatch(reqPageModules(pageID));
+        }
     }, [pageID]);
     const renderModules=()=>{
         if (status===REQ_STATUS.IDLE){

src/widgets/WGame/index.jsx

@@ -0,0 +1,40 @@
+import styles from "./styles.module.scss";
+import {useEffect} from 'react';
+import {toast} from "react-toastify";
+import {useNavigate} from "react-router-dom";
+const WGame=()=>{
+    const navigate=useNavigate();
+    const receiveMessage=(event)=>{
+        let data=event.data;
+        // console.log(data);
+        if (data&&data.cmd!=null){
+            console.log(data.cmd)
+            // toast.success(JSON.stringify(data))
+            if (data.cmd=="back"){
+                navigate(-1)
+            }
+            else if (data.cmd=="pay"){
+                navigate("#/pay")
+            }
+        }
+    }
+    useEffect(() => {
+        window.addEventListener("message", receiveMessage, false);
+        return () => {
+            window.removeEventListener("message", receiveMessage)
+        };
+    }, []);
+    return (
+        <div className={styles.container}>
+            <iframe
+                title={"game"}
+                src="http://192.168.1.5:7456/build/?time=123456789"
+                // src={"https://j15.gamej15.top/pwa.html"}
+                className={styles.content}
+                sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
+            >
+            </iframe>
+        </div>
+    )
+}
+export default WGame;

src/widgets/WGame/styles.module.scss

@@ -0,0 +1,10 @@
+.container{
+  width: 100%;
+  //height: 50%;
+  & .content{
+    width: 100%;
+    height: 100%;
+    border: none;
+    //flex: none;
+  }
+}