web2468/src/widgets/WInstallBox/WShortcutGuide/index.jsx

import {useEffect, useState} from "react";
import {isAndroid} from "@utils/helpers";
import MuiDrawer from "@mui/material/Drawer";
import styles from "./styles.module.scss";
import img_hand from "@assets/shortcut/pointer.avif"

const i18n=global.i18n;

const objInfo={
    count:0,
    timer:null
}

const WShortcutGuide = () => {
    const [isShow, setIsShow] = useState(false);
    const [iconUrl, setIconUrl] = useState("");
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const clearTimer=()=>{
        if (objInfo.timer!=null){
            clearInterval(objInfo.timer);
            objInfo.timer=null;
            objInfo.count=0;
        }
    }
    useEffect(()=>{
        const shortcutGuide={
            show,
            hide
        };
        global.shortcutGuide=shortcutGuide;
        if (window.progressier!=null){
            let iconUrl="";
            let initIconUrl=()=>{
                if (window.progressier.data!=null){
                    let params=window.progressier.data.params;
                    if (params!=null){
                        // setIconUrl(params.icon180);
                        iconUrl=params.icon180;
                    }
                }
            }
            clearTimer();
            if (iconUrl==null||iconUrl===""){
                objInfo.timer=setInterval(()=>{
                    if (objInfo.count>=10){
                        clearTimer();
                        return;
                    }
                    initIconUrl();
                    if (iconUrl!=null&&iconUrl!==""){
                        setIconUrl(iconUrl);
                        clearTimer();
                    }
                    objInfo.count++;
                },200);
            }
            else
            {
                setIconUrl(iconUrl);
            }
        }
        return ()=>{
            clearTimer();
        }
    },[])
    const getMainDomain=()=>{
        // 获取完整的域名
        const fullDomain = window.location.hostname;

        // 将域名分割成部分
        const parts = fullDomain.split('.');

        // 如果域名部分少于2个，直接返回完整域名
        if (parts.length <= 2) {
            return parts[0]; // 返回第一个部分（如 localhost）
        }

        // 提取主域名并去除后缀（最后一部分）
        return parts.slice(-2, -1).join('');
    }
    const renderAndroidContent=()=>{
        let mainDomain = getMainDomain();
        if(mainDomain!=null)mainDomain=mainDomain.toUpperCase();
        return (
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.title}>
                        {i18n.t("installBox.shortcut.title")}
                    </span>
                </div>
                <div className={styles.content}>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_1")}</span>
                    <div className={styles.android_op_1}>
                        <span>{i18n.t("installBox.shortcut.android_op_1")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_2")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_3")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_4")}</span>
                    </div>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_2")}</span>
                    <div className={styles.android_op_2}>
                        <span className={styles.header}>{i18n.t("installBox.shortcut.title")}</span>
                        <div className={styles.app_info_con}>
                            <img className={styles.icon} src={iconUrl}/>
                            <span>{mainDomain}</span>
                        </div>
                        <div className={styles.app_btns}>
                            <span>{i18n.t("installBox.shortcut.cancel")}</span>
                            <span>{i18n.t("installBox.shortcut.add")}</span>
                        </div>
                    </div>
                </div>
                <div className={styles.t_guide_con}>
                    <img className={styles.t_hand} src={img_hand}/>
                </div>
            </div>
        )
    }
    const renderAndroid = () => {
        return (
            <MuiDrawer open={isShow}
                       anchor={"top"}
                       sx={{
                           pointerEvents: 'auto',
                           zIndex: 'var(--zindex-install)',
                           "& .MuiDrawer-paper": {
                               boxSizing: "border-box",
                               overflow: 'visible !important',
                               backgroundColor:'var(--standard);',
                               boxShadow: 'var(--widget-shadow);',
                               borderBottomLeftRadius: '0.71rem',
                               borderBottomRightRadius: '0.71rem',
                               padding: '1.42rem'
                           },
                       }}
                       variant="temporary"
                       onClose={()=>{
                           setIsShow(false)
                       }}>
                {renderAndroidContent()}
            </MuiDrawer>
        )
    }
    const renderIOSContent=()=>{
        let mainDomain = getMainDomain();
        if(mainDomain!=null)mainDomain=mainDomain.toUpperCase();
        const origin=window.location.origin;
        return (
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.title}>
                        {i18n.t("installBox.shortcut.title")}
                    </span>
                </div>
                <div className={styles.content}>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_1")}</span>
                    <div className={styles.ios_op_1}>
                        <span>{i18n.t("installBox.shortcut.ios_op_1")}</span>
                        <span>{i18n.t("installBox.shortcut.ios_op_2")}</span>
                        <span>{i18n.t("installBox.shortcut.ios_op_3")}</span>
                        <span className={styles.bottom}>{i18n.t("installBox.shortcut.ios_op_4")}</span>
                    </div>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_2")}</span>
                    <div className={styles.ios_op_2}>
                        <div className={styles.header}>
                            <span className={styles.btn}>{i18n.t("installBox.shortcut.cancel")}</span>
                            <span className={styles.title_1}>{i18n.t("installBox.shortcut.title")}</span>
                            <span className={styles.btn}>{i18n.t("installBox.shortcut.add")}</span>
                        </div>
                        <div className={styles.appinfo_con}>
                            <img className={styles.icon} src={iconUrl}/>
                            <div className={styles.info_con}>
                                <span className={styles.host}>{mainDomain}</span>
                                <span className={styles.origin}>{origin}</span>
                            </div>
                        </div>
                        <div className={styles.tips_con}>
                            <span>{i18n.t("installBox.shortcut.tips_1")}</span>
                        </div>
                    </div>
                </div>
                <div className={styles.b_guide_con}>
                    <img className={styles.b_hand} src={img_hand}/>
                </div>
            </div>
        )
    }
    const renderIOS = () => {
        return (
            <MuiDrawer open={isShow}
                       anchor={"bottom"}
                       sx={{
                           pointerEvents: 'auto',
                           zIndex: 'var(--zindex-install)',
                           "& .MuiDrawer-paper": {
                               boxSizing: "border-box",
                               overflow: 'visible !important',
                               backgroundColor:'var(--standard);',
                               boxShadow: 'var(--widget-shadow);',
                               borderTopLeftRadius: '0.71rem',
                               borderTopRightRadius: '0.71rem',
                               padding: '1.42rem'
                           },
                       }}
                       variant="temporary"
                       onClose={()=>{
                           setIsShow(false)
                       }}>
                {renderIOSContent()}
            </MuiDrawer>
        )
    }
    const renderGuide=()=>{
        if (isAndroid()){
            return renderAndroid();
        }
        else
        {
            return renderIOS();
        }
    }
    return (
        <>
            {renderGuide()}
        </>
    )
}
export default WShortcutGuide;