no message

src/App.js

@@ -102,15 +102,39 @@ const App = () => {
             localStorageSet(LOCAL_WHEEL_INVITE_CODE,"")
         }
     }
+    const reProgressierInstallBanner=()=>{
+        if (window.NewProgressierInstallBanner!=null)return;
+        let ProgressierInstallBanner=window.ProgressierInstallBanner;
+        window.NewProgressierInstallBanner=ProgressierInstallBanner;
+        window.ProgressierInstallBanner=function (e, t) {
+            this.remove = async function() {
+
+            };
+            this.render = async function() {
+
+            };
+            this.make = function() {
+
+            };
+            this.init = async function() {
+
+            }
+        }
+    }
     //初始化
     useEffect(() => {
         // scroll to top on route change
         loadFont();
         //请求routes
         startReqRoutes();
+        checkInviteCode();
         appRef.current && appRef.current.scrollTo(0, 0);
         preventDefault();
-        checkInviteCode();
+        reProgressierInstallBanner();
+        // preventTouchMove();
+        return ()=>{
+
+        }
     }, []);
     useEffect(()=>{
         if (userID!=0){

src/assets/singlesvg/install.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 24 24" width="24pt" height="24pt"><defs><clipPath id="_clipPath_rnpDcv3XSHoXzye5ycAxBn1N5nbiy1UP"><rect width="24" height="24"></rect></clipPath></defs><g clip-path="url(#_clipPath_rnpDcv3XSHoXzye5ycAxBn1N5nbiy1UP)"><path d=" M 18.011 16.254 L 18.011 22.001 C 18.011 23.052 17.157 23.906 16.105 23.906 L 4.671 23.906 C 3.62 23.906 2.766 23.052 2.766 22.001 L 2.766 1.999 C 2.766 0.948 3.62 0.094 4.671 0.094 L 12.517 0.094 L 12.517 5.617 L 4.992 5.617 L 4.992 18.383 L 15.784 18.383 L 15.784 16.309 L 18.011 16.254 L 18.011 16.254 Z  M 11.426 8.938 L 17.081 14.444 L 22.798 8.756 L 20.908 7.112 L 18.166 10.043 L 18.011 2.11 L 15.784 2.11 L 15.87 9.937 L 13.047 7.112 L 11.426 8.938 Z " fill-rule="evenodd" fill="currentColor"></path></g></svg>

src/contexts/themeContext.js

@@ -28,6 +28,8 @@ export const ThemeProvider = ({children}) => {
     const [fontScale, setFontScale] = useState(isMobile()?0.88:1);
     const [direction, setDirection] = useState(persisted.direction || (isRtl ? 'rtl' : 'ltr'));
 
+    const [installOpen,setInstallOpen]=useState(persisted&&(persisted.installOpen!=null)?persisted.installOpen:true);
+
     const [headerHeight,setHeaderHeight]=useState('64px');
 
     //GameSearch
@@ -65,7 +67,8 @@ export const ThemeProvider = ({children}) => {
         localStorage.setItem('preferences', JSON.stringify({
             theme,
             fontScale,
-            direction
+            direction,
+            installOpen
         }));
     }
 
@@ -112,6 +115,9 @@ export const ThemeProvider = ({children}) => {
         }
         return true;
     }
+    const toggleInstallOpen=()=>{
+        setInstallOpen(!installOpen);
+    }
 
     useEffect(() => {
 
@@ -128,7 +134,7 @@ export const ThemeProvider = ({children}) => {
         //         savePreferences();
         //     })
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [theme, fontScale, direction]);
+    }, [theme, fontScale, direction,installOpen]);
 
     return (
         <ThemeContext.Provider
@@ -157,7 +163,9 @@ export const ThemeProvider = ({children}) => {
                 //检查路由是否允许跳转
                 checkRoute,
                 isShowWheel,
-                setIsShowWheel
+                setIsShowWheel,
+                installOpen,
+                toggleInstallOpen
             }}>
             {children}
         </ThemeContext.Provider>

src/layout/Navbar/index.jsx

@@ -240,7 +240,7 @@ const UserInfo=()=>{
 }
 const PageHeader = () => {
     const LINKS=useSelector(allTopNavs);
-    const {initHeaderHeight} = useThemeProvider();
+    const {initHeaderHeight,installOpen} = useThemeProvider();
     const {pathname} = useLocation();
     const navigate=useNavigate();
     const barRef = useRef(null);
@@ -313,35 +313,30 @@ const PageHeader = () => {
             });
             banner.element.classList.add(styles.install_banner);
         }
+        window.install_banner=banner;
         return banner;
     }
-    const reProgressierInstallBanner=()=>{
-        let ProgressierInstallBanner=window.ProgressierInstallBanner;
-        window.NewProgressierInstallBanner=ProgressierInstallBanner;
-        window.ProgressierInstallBanner=function (e, t) {
-            this.remove = async function() {
-
-            };
-            this.render = async function() {
-
-            };
-            this.make = function() {
-
-            };
-            this.init = async function() {
-
-            }
-        }
-    }
-    const checkWaitForData=async ()=>{
-        let l=window.progressier.banners;
-        for (let i = 0; i < 5; i++) {
-            if (l.data.installBannerPitch!=null) break;
-            await l.parent.data.waitForData();
-        }
-    }
+    // const reProgressierInstallBanner=()=>{
+    //     if (window.NewProgressierInstallBanner!=null)return;
+    //     let ProgressierInstallBanner=window.ProgressierInstallBanner;
+    //     window.NewProgressierInstallBanner=ProgressierInstallBanner;
+    //     window.ProgressierInstallBanner=function (e, t) {
+    //         this.remove = async function() {
+    //
+    //         };
+    //         this.render = async function() {
+    //
+    //         };
+    //         this.make = function() {
+    //
+    //         };
+    //         this.init = async function() {
+    //
+    //         }
+    //     }
+    // }
     const checkInstall=(l)=>{
-        if (isLogin){
+        if (!installOpen){
             return false;
         }
         if (l.parent.detection.isStandalone()) {
@@ -350,6 +345,7 @@ const PageHeader = () => {
         return true;
     }
     const startListening=async ()=>{
+        if (window.progressier==null)return ;
         let l=window.progressier.banners;
         await l.parent.data.waitForData();
         l.data = l.parent.data.params;
@@ -361,13 +357,15 @@ const PageHeader = () => {
                 // }
                 if (!checkInstall(l)){
                     clearInterval(l.reinstallTimer)
+                    l.reinstallTimer=null;
                     return;
                 }
                 // window.alert("222")
-                if (l.showed) {
-                    clearInterval(l.reinstallTimer)
-                    return
-                }
+                // if (l.showed) {
+                //     clearInterval(l.reinstallTimer)
+                //     l.reinstallTimer=null;
+                //     return
+                // }
                 // window.alert("3333")
                 l.showed = true;
                 // new window.NewProgressierInstallBanner({
@@ -393,11 +391,16 @@ const PageHeader = () => {
                 clearInterval(l.reinstallTimer)
             }, l.interval)
         }
+        else
+        {
+            clearInterval(l.reinstallTimer)
+            l.reinstallTimer=null;
+        }
     }
     const checkProgressier=async ()=>{
         // return ;
         if (window.progressier){
-            reProgressierInstallBanner();
+            // reProgressierInstallBanner();
             // let l=window.progressier.banners;
             // await l.parent.data.waitForData();
             // await checkWaitForData();
@@ -427,11 +430,17 @@ const PageHeader = () => {
             }
         }
     }
-    // const testBefore=()=>{
-    //     window.addEventListener("beforeinstallprompt", e => {
-    //         window.alert("beforeinstallprompt")
-    //     });
-    // }
+    const checkInstallOpen=()=>{
+        if (installOpen){
+            checkProgressier();
+        }
+        else
+        {
+            if (window.install_banner){
+                window.install_banner.remove();
+            }
+        }
+    }
     useEffect(() => {
         // 这里的代码会在组件挂载时执行
         // console.log('Component mounted');
@@ -440,7 +449,7 @@ const PageHeader = () => {
             resizeObserver.observe(barRef.current);
         }
         // testBefore();
-        checkProgressier();
+        // checkProgressier();
         return () => {
             // 可选的清除函数，当组件卸载时执行
             // console.log('Component unmounted');
@@ -448,7 +457,7 @@ const PageHeader = () => {
             if (barRef.current) {
                 resizeObserver.unobserve(barRef.current);
             }
-            stopListener();
+            // stopListener();
         };
     }, []);
     // }, [pathname]);
@@ -461,7 +470,12 @@ const PageHeader = () => {
         let len=chain.length;
         setShowHeader(len<=1);
     },[pathname]);
-
+    useEffect(()=>{
+        checkInstallOpen();
+        return ()=>{
+            stopListener();
+        }
+    },[installOpen])
     const headerAni=useSpring({
         from: {transform: 'translateY(-100%) translateZ(0px)'},
         transform:showMHeader?'translateY(0%) translateZ(0px)':'translateY(-100%) translateZ(0px)',

src/locales/languages/en_US.json

@@ -110,7 +110,8 @@
     "gender": "Gender",
     "phone": "Phone",
     "email": "Email",
-    "security": "Security"
+    "security": "Security",
+    "install_banner": "Install Banner"
   },
   "copy_success": "Copy successful",
   "user": {

src/utils/helpers.js

@@ -237,3 +237,8 @@ export const getUrlParam=(name)=>{
 
     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null;
 }
+// export const preventTouchMove=()=>{
+//     document.addEventListener('touchmove',(event)=>{
+//         event.preventDefault();
+//     }, { passive: false });
+// }

src/widgets/UserSettings/index.jsx

@@ -14,6 +14,7 @@ import {ReactComponent as FeMale} from '@assets/singlesvg/gener/female.svg';
 import {ReactComponent as GenderIcon} from '@assets/singlesvg/gener/gender.svg';
 import {ReactComponent as MobileIcon} from '@assets/singlesvg/mobile.svg';
 import {ReactComponent as EmailIcon} from '@assets/singlesvg/email.svg';
+import {ReactComponent as InstallIcon} from "@assets/singlesvg/install.svg";
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {toast} from "react-toastify";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -24,14 +25,61 @@ 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";
+import Switch from "@mui/material/Switch";
+import { styled } from '@mui/material/styles';
 const i18n=global.i18n;
+const AntSwitch = styled(Switch)(({ theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    display: 'flex',
+    '&:active': {
+        '& .MuiSwitch-thumb': {
+            width: 15,
+        },
+        '& .MuiSwitch-switchBase.Mui-checked': {
+            transform: 'translateX(9px)',
+        },
+    },
+    '& .MuiSwitch-switchBase': {
+        padding: 2,
+        color: 'rgba(153,164,176,.6)',
+        transform: 'translateX(-2px)',
+        '&.Mui-checked': {
+            transform: 'translateX(12px)',
+            color: 'var(--primary-color)',
+            '& + .MuiSwitch-track': {
+                opacity: 1,
+                backgroundColor: '#3bc11733',
+            },
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        transition: theme.transitions.create(['width'], {
+            duration: 200,
+        }),
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 16 / 2,
+        opacity: 1,
+        height: '70%',
+        width:'90%',
+        marginTop:'10%',
+        backgroundColor:'rgba(0,0,0,.25)',
+        boxSizing: 'border-box',
+    },
+}));
 const UserSettings=()=>{
     const isLogin=useSelector(isLogined);
     const user=useSelector(getUserInfo);
     const logoutStatus=useSelector(getLogoutStatus);
     const dispatch = useDispatch();
     const navigate=useNavigate();
-    const {theme, toggleTheme,setIsShowLang} = useThemeProvider();
+    const {theme, toggleTheme,setIsShowLang,installOpen,toggleInstallOpen} = useThemeProvider();
     const renderEmpty=()=>{
         return (
             <div className={styles.wrap_item}>
@@ -279,10 +327,26 @@ const UserSettings=()=>{
             </div>
         )
     }
+    const renderItemInstallBanner=()=>{
+        return (
+            <div className={styles.action_item}>
+                <div className={styles.action_left}>
+                    <InstallIcon className={styles.icon}></InstallIcon>
+                    <div>{i18n.t("settings.install_banner")}</div>
+                </div>
+                <div className={styles.action_right}>
+                    <AntSwitch checked={installOpen} onChange={()=>{
+                        toggleInstallOpen();
+                    }}></AntSwitch>
+                </div>
+            </div>
+        )
+    }
     const renderSetting=()=>{
         return (
             <div className={`${styles.wrap_item} ${styles.action_wrap}`}>
                 {renderItemSecurity()}
+                {renderItemInstallBanner()}
                 {renderItemLang()}
                 {/*{renderItemGender()}*/}
                 {renderItemTheme()}