system-copyright-react/src/route/proj/ProjEditFree.tsx

import './proj-edit.css';
import { useNavigate, useParams } from "react-router-dom";
import { Button, message, Modal } from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import { Process } from "../../interfaces/step/IStepProj.ts";
import CardProjDownload from "../../components/card/CardProjDownload.tsx";
import CardProjJump from "../../components/card/CardProjJump.tsx";
import { useEffect, useState } from "react";
import { Axios, get, post } from "../../util/AjaxUtils.ts";
import { EditStepEnum, IProjEdit } from "../../interfaces/card/ICardProj.ts";
// import { MAX_MOD_SIZE_FREE } from "./edit/ProjConfigModList.tsx";
import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import TitleIntroduction from '../../route/proj/edit/ProjEditStep1.tsx'
import TitleIntroductionShow from '../../route/proj/edit/ProjEditStep1Show.tsx'
import SoftwareInfo from '../../route/proj/edit/ProjEditStep2.tsx'
import SoftwareInfoShow from '../../route/proj/edit/ProjEditStep2Show.tsx'
import SoftwareFeatures from '../../route/proj/edit/ProjEditStep3.tsx'
import SoftwareFeaturesShow from '../../route/proj/edit/ProjEditStep3Show.tsx'
import LoginPage from '../../route/proj/edit/ProjConfigLoginpage.tsx'
import LoginPageShow from '../../route/proj/edit/ProjConfigLoginpageShow.tsx'
import SoftwareManagement from '../../route/proj/edit/ProjConfigModList.tsx'
import SoftwareManagementShow from '../../route/proj/edit/ProjConfigModListShow.tsx'
import DisplayOrder from '../../route/proj/edit/ProjConfigMenuList.tsx'
import DisplayOrderShow from '../../route/proj/edit/ProjConfigMenuListShow.tsx'
import CardProjLoading from "../../components/card/CardProjLoading.tsx";
import CardProjResult from "../../components/card/CardProjResult.tsx";
import aiGif from '../../static/ai.gif'
import AiHelper from "../../components/ai/AiHelper.tsx";
type AiHelperType = {
    projId: string;
    projIntroduction: string;
    projDesc: string;
    projMods: ProjModType[];
}
type ProjModType = {
    name: string,
    desc: string
}

export default function ProjEdit() {
    const height = window.innerHeight - 180;
    const [aiHelperModalOpen, setAiHelperModalOpen] = useState(false);
    const [isGenerateModalOpen, setIsGenerateModalOpen] = useState(false);
    const [generateErrorMsg, setGenerateErrorMsg] = useState('');
    const [aiHelper, setAiHelper] = useState<AiHelperType>({
        projId: '',
        projIntroduction: '',
        projDesc: '',
        projMods: [],
    });
    //第一步 标题简介弹窗
    const [titleIntroductionOpen, setTitleIntroductionOpen] = useState(false)
    const [titleIntroductionShowOpen, setTitleIntroductionShowOpen] = useState(false)
    //第二步 软件基本信息弹窗
    const [softwareInfoOpen, setSoftwareOpen] = useState(false)
    const [softwareInfoShowOpen, setSoftwareShowOpen] = useState(false)
    // 第三步 软件功能特点弹窗
    const [softwareFeaturesOpen, setSoftwareFeaturesOpen] = useState(false)
    const [softwareFeaturesShowOpen, setSoftwareFeaturesShowOpen] = useState(false)
    // 第四步 登陆页面设置
    const [loginPageOpne, setLoginPageOpne] = useState(false)
    const [loginPageShowOpne, setLoginPageShowOpne] = useState(false)
    // 第五步 软件功能管理
    const [softwareManagementOpen, setSoftwareManagementOpen] = useState(false)
    const [softwareManagementShowOpen, setSoftwareManagementShowOpen] = useState(false)
    // 第六步 显示顺序
    const [displayOrderOpen, setDisplayOrderOpen] = useState(false)
    const [displayOrderShowOpen, setDisplayOrderShowOpen] = useState(false)

    const nav = useNavigate();
    const pathParams = useParams();

    const [messageApi, contextHolder] = message.useMessage();
    const [editStepArray, setEditStepArray] = useState<IProjEdit[]>([]);
    const [configArray, setConfigArray] = useState<IProjEdit[]>([]);
    const [isEditStepEdited, setIsEditStepEdited] = useState(false);
    const [isConfigEdited, setIsConfigEdited] = useState(false);
    const [canGenerate, setCanGenerate] = useState(false);
    const [generateStatus, setGenerateStatus] = useState(GenerateStatus.NONE);
    const [previewUrl, setPreviewUrl] = useState('');
    const [generateEmainingTime, setGenerateEmainingTime] = useState(0);
    // const height = window.innerHeight - 240;
    const [generateErrorModal, setGenerateErrorModal] = useState(false);
    const renderEditStep = (data: any, isEdited: boolean, isGenerateSuccess: boolean) => {
        const editStepArray: IProjEdit[] = [];
        editStepArray.push(
            {
                title: '第1步:软件简介确认',
                desc: '修改软件系统的相关简介与详细介绍',
                step: 1,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.projIntroduction ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/step1/${pathParams.projId}`)
                        setTitleIntroductionOpen(true)
                    } else {
                        // nav(`/proj-edit/step1-show/${pathParams.projId}`)
                        setTitleIntroductionShowOpen(true)
                    }
                }
            },
            {
                title: '第2步:软件基本信息填写',
                desc: '完善软件简称、版本号、软件所属者及联系人等信息',
                step: 2,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.apply.projDevCompleteDate ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                // canBtnClick: false,
                handleEdit() {
                    if (generateStatus != GenerateStatus.SUCCESS) {
                        // nav(`/proj-edit/step2/${pathParams.projId}`)
                        setSoftwareOpen(true)

                    } else {
                        // nav(`/proj-edit/step2-show/${pathParams.projId}`)
                        setSoftwareShowOpen(true)

                    }
                }
            },
            {
                title: '第3步:软件功能特点设置',
                desc: '设置软件相关功能特点',
                step: 3,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.apply.envHardDev ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                // canBtnClick: false,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/step3/${pathParams.projId}`)
                        setSoftwareFeaturesOpen(true)

                    } else {
                        // nav(`/proj-edit/step3-show/${pathParams.projId}`)
                        setSoftwareFeaturesShowOpen(true)

                    }
                }
            },
            {
                title: '第4步:登录页面设置',
                desc: '对登录界面进行个性化设置，包括背景图片等',
                step: 1,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                // canBtnClick: false,

                // 状态判断lyp
                status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
                        setLoginPageOpne(true)

                    } else {
                        // nav(`/proj-edit/config-loginpage-show/${pathParams.projId}`)
                        setLoginPageShowOpne(true)

                    }
                }
            },
            // {
            //     title: '著作人信息',
            //     desc: '请完善著作人相关信息',
            //     step: 4,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: editSteps[3].editStatus,
            //     canBtnClick: false,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/step4/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/step4-show/${pathParams.projId}`)
            //         }
            //     }
            // },
            // {
            //     title: '申请人信息',
            //     desc: '请完善申请人信息',
            //     step: 5,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: editSteps[4].editStatus,
            //     canBtnClick: false,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/step5/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/step5-show/${pathParams.projId}`)
            //         }
            //     }
            // },
            // {
            //     title: '选择登录页面',
            //     desc: '选择软件的登录页面模板',
            //     step: 6,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: editSteps[5].editStatus,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/step6/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/step6-show/${pathParams.projId}`)
            //         }
            //     }
            // }
        )
        setEditStepArray(editStepArray);
        setIsEditStepEdited(isEdited);
    }

    const renderSetting = (data: any, isConfig: boolean, isGenerateSuccess: boolean) => {
        const configArray: IProjEdit[] = [];
        configArray.push(
            // {
            //     title: '登录界面设置',
            //     desc: '请对登录界面完成个性化设置',
            //     step: 1,
            //     btnName: !isGenerateSuccess ? '设置' : '查看',
            //     status: data.loginpage.loginpageId ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
            //     handleEdit() {
            //         if (!isGenerateSuccess) {
            //             nav(`/proj-edit/config-loginpage/${pathParams.projId}`)
            //         } else {
            //             nav(`/proj-edit/config-loginpage-show/${pathParams.projId}`)
            //         }
            //     }
            // },
            {
                title: '第5步:对软件功能进行管理',
                desc: '可对软件功能列表进行添加与修改',
                step: 2,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.projModCount >= 3 ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/config-mod-flist/${pathParams.projId}`)
                        setSoftwareManagementOpen(true)

                    } else {
                        // nav(`/proj-edit/config-mod-flist-show/${pathParams.projId}`)
                        setSoftwareManagementShowOpen(true)

                    }
                }
            },
            {
                title: '第6步:设置功能列表显示顺序',
                desc: '调整菜单顺序',
                step: 3,
                btnName: !isGenerateSuccess ? '设置' : '查看',
                status: data.projModCount >= 3 ? EditStepEnum.EDITED : EditStepEnum.UN_EDIT,
                handleEdit() {
                    if (!isGenerateSuccess) {
                        // nav(`/proj-edit/config-menu-list/${pathParams.projId}`)
                        setDisplayOrderOpen(true)

                    } else {
                        // nav(`/proj-edit/config-menu-list-show/${pathParams.projId}`)
                        setDisplayOrderShowOpen(true);

                    }
                }
            }
        )
        setConfigArray(configArray);
        setIsConfigEdited(isConfig);
    }

    const renderData = () => {
        get<any>({
            messageApi: messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                // const isEdited = data.editSteps[0].editStatus == EditStepEnum.EDITED
                //     && data.editSteps[5].editStatus == EditStepEnum.EDITED;
                console.log('嘻嘻', data.projModCount);
                // if(data.projModCount >= 3){
                //     setCanGenerate(true)
                // }
                const isEdited = Boolean(data.projIntroduction) && Boolean(data.loginpage.loginpageId) == true
                // console.log('isEdited',isEdited);
                const isConfig = data.loginpage.loginpageId && data.projModCount >= 3;
                const isGenerate = isEdited && isConfig;
                const isGenerateSuccess: boolean = data.generate.generateStatus == GenerateStatus.SUCCESS;
                renderEditStep(data, isEdited, isGenerateSuccess);
                renderSetting(data, isConfig, isGenerateSuccess);
                setCanGenerate(isGenerate);
                setGenerateStatus(data.generate.generateStatus);
                setPreviewUrl(data.previewUrl);
                setGenerateEmainingTime(data.generate.generateEmainingTime)
                setGenerateErrorMsg(data.generate.generateMsg);
                setAiHelper({
                    projId: data.projId,
                    projIntroduction: data.projIntroduction,
                    projDesc: data.projDesc,
                    projMods: data.projMods
                })
            }
        })
    }
    const getAiData = () => {
        get<any>({
            messageApi: messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({ data }) {
                setAiHelper({
                    projId: data.projId,
                    projIntroduction: data.projIntroduction,
                    projDesc: data.projDesc,
                    projMods: data.projMods
                })
                setAiHelperModalOpen(true)

                // setAiHelperModalOpen(!data.projIntroduction || !data.projDesc)

            }
        })

    }
    useEffect(() => {
        renderData();
        getAiData()
    }, [])

    return (
        <div className='proj-edit-box' style={{ height: `${height}px`, overflow: 'auto' }}>
            {contextHolder}
            {/* <Breadcrumb
                items={[
                    { title: <Link to={'/'}>首页</Link> },
                    { title: <Link to={'/proj-create'}>创建项目</Link> },
                    { title: '编辑项目' },
                ]}
            /> */}
            <div className="proj-edit" style={{}}>
                <StepProjEdit step={1} process={isEditStepEdited ? Process.COMPLETE : Process.PROCESSING}
                    descTitle="完善信息"
                    descDetail="完善项目的基本信息"
                    hasNext={true}>
                    {
                        editStepArray.map((item, index) => {
                            return <CardProjEdit key={`editStep-${index}`}
                                title={item.title}
                                desc={item.desc}
                                status={item.status}
                                btnName={item.btnName}
                                canBtnClick={item.canBtnClick}
                                handleEdit={item.handleEdit}
                                background={item.status == EditStepEnum.EDITED ? '#F5FAFE' : '#f3f3f3'}
                                shadow={item.status == EditStepEnum.EDITED ? '0px 3px 0px 0px rgba(55,144,215,0.18)' : ''}

                            />
                        })
                    }

                </StepProjEdit>
                <StepProjEdit step={2}
                    process={!isEditStepEdited ? Process.PENDING : (isConfigEdited ? Process.COMPLETE : Process.PROCESSING)}
                    descTitle="功能设置"
                    descDetail="设置系统的菜单功能" hasNext={true}>
                    {
                        configArray.map((item, index) => {
                            return <CardProjEdit key={`config-${index}`}
                                title={item.title}
                                desc={item.desc}
                                btnName={item.btnName}
                                canBtnClick={isEditStepEdited}
                                status={item.status}
                                handleEdit={item.handleEdit}
                                background={item.status == EditStepEnum.EDITED ? '#F5FEFA' : '#f3f3f3'}
                                shadow={item.status == EditStepEnum.EDITED ? ' 0px 3px 0px 0px rgba(55,215,138,0.18)' : ''}

                            />
                        })
                    }
                    {
                        isEditStepEdited && isConfigEdited ? (
                            <CardProjJump title="预览系统"
                                desc="点击查看预览系统"
                                canBtnClick={true}
                                handleJump={() => {
                                    window.open(`${Axios.defaults?.baseURL}/${previewUrl}`, '_blank')
                                }}
                            />
                        ) : <></>
                    }
                </StepProjEdit>
                <StepProjEdit step={3}
                    process={generateStatus == GenerateStatus.SUCCESS ? Process.COMPLETE : (canGenerate ? Process.PROCESSING : Process.PENDING)}
                    descTitle="资料生成"
                    hasNext={true}>
                    {
                        generateStatus == GenerateStatus.NONE || generateStatus == GenerateStatus.FAILED ? (
                            <CardProjEdit title="第8步:资料生成"
                                desc="生成软著所需要的资料，此操作后项目无法再次编辑"
                                btnName="生成"
                                status={EditStepEnum.UN_EDIT}
                                canBtnClick={canGenerate}
                                // canBtnClick={false}
                                handleEdit={() => {
                                    setIsGenerateModalOpen(true);
                                }}
                                background='#f3f3f3'

                            />
                        ) : <></>
                    }
                    {
                        generateStatus == GenerateStatus.PENDING ? (
                            <CardProjLoading title="正在排队"
                                desc="资料正在排队"
                                duration={generateEmainingTime}
                                handleCountDownOver={() => {
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 1000)
                                }}
                            />
                        ) : <></>
                    }
                    {
                        generateStatus == GenerateStatus.GENERATING ? (
                            <CardProjLoading title="正在生成"
                                desc="资料正在生成，点击刷新"
                                duration={generateEmainingTime}
                                handleClick={() => {
                                    renderData();
                                }}
                                handleCountDownOver={() => {
                                    renderData();
                                }}

                            />
                        ) : <></>
                    }
                    {
                        generateStatus == GenerateStatus.SUCCESS ? (
                            <CardProjResult title="生成成功"
                                isSuccess={true}
                            />
                        ) : <></>
                    }
                    {
                        generateStatus == GenerateStatus.FAILED ? (
                            <CardProjResult title="生成失败"
                                isSuccess={false}
                                handleFeedback={() => {
                                    setGenerateErrorModal(true);
                                    console.log('反馈')
                                }}
                            />
                        ) : <></>
                    }


                </StepProjEdit>
                <StepProjEdit step={4}
                    process={generateStatus == GenerateStatus.SUCCESS ? Process.PROCESSING : Process.PENDING}
                    descTitle="资料下载">
                    <CardProjDownload title="申请表"
                        desc="点击下载申请表"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${pathParams.projId}`)
                        }}
                    />
                    <CardProjDownload title="操作手册"
                        desc="点击下载操作手册"
                        // canBtnClick={false}
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${pathParams.projId}`)
                        }}
                    />
                    {/* <CardProjDownload title="代码压缩包"
                        desc="点击下载代码压缩包"
                        canBtnClick={generateStatus == GenerateStatus.SUCCESS}
                        handleDownload={() => {
                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${pathParams.projId}`)
                        }}
                    /> */}
                    <CardProjDownload title="源代码"
                        desc="点击下载源代码"
                        canBtnClick={false}
                        handleDownload={() => { }}
                    />
                    {/* <CardProjJump title="找代理"
                        desc="到软著代理完成软著申请"
                        canBtnClick={false}
                        handleJump={() => { }}
                    /> */}
                </StepProjEdit>
            </div>
            <div className="btn-container">
                <Button size="large" style={{
                    width: '200px',
                    height: '40px',
                    fontSize: '16px',
                    backgroundColor: 'white',
                    // color: '#A0A0A0',
                    // border: 'none',
                }} onClick={() => {
                    nav(-1);
                }}>返回</Button>
            </div>
            <div className='aiImg' onClick={() => { setAiHelperModalOpen(true) }}>
                <img src={aiGif} alt="" width={'100%'} height={'100%'} />
            </div>

            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                open={isGenerateModalOpen}
                onOk={() => {
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000)
                    post({
                        messageApi,
                        url: `/api/proj/generate/proj-id/${pathParams.projId}`,
                        body: {},
                        onSuccess() {
                            messageApi.success('提交成功');
                            setIsGenerateModalOpen(false);
                            renderData();
                        }
                    })
                }}
                onCancel={() => {
                    setIsGenerateModalOpen(false);
                }}>
                <div>点击“确定按钮”后，项目便无法再次修改，建议通过预览查看系统，确认无误后点击“确定按钮”。</div>
            </Modal>
            <Modal open={generateErrorModal}
                title="出错信息"
                okText="确定"
                cancelText={false}
                footer={false}
                okButtonProps={{
                    style: {
                        backgroundColor: 'var(--color-primary)',
                    }
                }}
                onCancel={() => {
                    setGenerateErrorModal(false)
                }}
            >
                <p style={{ color: 'var(--color-red)' }}>{generateErrorMsg}</p>
            </Modal>
            <Modal open={aiHelperModalOpen}
                title=""
                width={1200}
                footer={false}
                maskClosable={false}
                destroyOnClose={true}
                onCancel={() => {
                    setAiHelperModalOpen(false);

                    renderData()
                    // setAiHelperModalOpen(false);
                    // console.log(123);

                }}

            >
                <div style={{ height: `${height - 20}px`, overflow: 'hidden', }}>
                    <AiHelper
                        projId={aiHelper.projId}
                        projIntroduction={aiHelper.projIntroduction}
                        projDesc={aiHelper.projDesc}
                        isFree={false}
                        renderData={() => {
                            renderData()
                        }}
                    />
                </div>
            </Modal>
            {/* 第1步设置 */}
            <Modal open={titleIntroductionOpen}
                title="软件简介确认"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {

                    setTitleIntroductionOpen(false);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)

                }}
                footer={null}
            >
                <TitleIntroduction closeModal={() => {
                    setTitleIntroductionOpen(false)
                    renderData()
                }}></TitleIntroduction>
            </Modal>
            {/* 第1步查看 */}
            <Modal open={titleIntroductionShowOpen}
                destroyOnClose={true}

                title="软件简介查看"
                width={1500}
                onCancel={() => {
                    setTitleIntroductionShowOpen(false);
                }}
                footer={null}
            >
                <TitleIntroductionShow></TitleIntroductionShow>
            </Modal>
            {/* 第二步设置 */}
            <Modal open={softwareInfoOpen}
                title="软件基本信息填写"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setSoftwareOpen(false);
                    // setTimeout(() => {
                    //     props.closeModal()
                    //     window.location.reload(); // 刷新页面
                    // }, 1000);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)
                }}
                footer={null}
            >
                <SoftwareInfo closeModal={() => {
                    setSoftwareOpen(false)
                    renderData()
                }}></SoftwareInfo>
            </Modal>
            {/* 第二步查看 */}
            <Modal open={softwareInfoShowOpen}
                title="软件基本信息查看"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setSoftwareShowOpen(false);
                }}
                footer={null}
            >
                <SoftwareInfoShow></SoftwareInfoShow>
            </Modal>
            {/* 第三步 设置 */}
            <Modal open={softwareFeaturesOpen}
                title="软件功能特点设置"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setSoftwareFeaturesOpen(false);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)

                }}
                footer={null}
            >
                <SoftwareFeatures closeModal={() => {
                    setSoftwareFeaturesOpen(false)
                    renderData()
                }}></SoftwareFeatures>
            </Modal>
            {/* 第三步 查看 */}
            <Modal open={softwareFeaturesShowOpen}
                title="软件功能特点查看"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    setSoftwareFeaturesShowOpen(false);
                }}
                footer={null}
            >
                <SoftwareFeaturesShow ></SoftwareFeaturesShow>
            </Modal>
            {/* 第四步 设置 */}
            <Modal open={loginPageOpne}
                title="登陆页面设置"
                width={1700}
                destroyOnClose={true}

                onCancel={() => {
                    setLoginPageOpne(false);
                    // setTimeout(() => {
                    //     window.location.reload()
                    // }, 500)

                }}
                footer={null}
            >
                <LoginPage closeModal={() => {
                    setLoginPageOpne(false)
                    renderData()
                }}></LoginPage>
            </Modal>
            {/* 第四步 查看 */}
            <Modal open={loginPageShowOpne}
                title="登陆页面查看"
                width={1700}
                destroyOnClose={true}

                onCancel={() => {
                    setLoginPageShowOpne(false);
                }}
                footer={null}
            >
                <LoginPageShow></LoginPageShow>
            </Modal>
            {/* 第五步 设置 */}
            <Modal open={softwareManagementOpen}
                title="软件功能管理设置"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    renderData()
                    setSoftwareManagementOpen(false);
                }}
                footer={null}
            >
                <SoftwareManagement isFree={true}></SoftwareManagement>
            </Modal>
            {/* 第五步 查看 */}
            <Modal open={softwareManagementShowOpen}
                title="软件功能管理查看"
                width={1500}
                onCancel={() => {
                    setSoftwareManagementShowOpen(false);
                }}
                destroyOnClose={true}

                footer={null}
            >
                <SoftwareManagementShow></SoftwareManagementShow>
            </Modal>
            {/* 第六步 设置 */}
            <Modal open={displayOrderOpen}
                title="设置功能列表显示顺序"
                width={1500}
                destroyOnClose={true}

                onCancel={() => {
                    setDisplayOrderOpen(false);
                    renderData()
                }}
                footer={null}
            >
                <DisplayOrder></DisplayOrder>
            </Modal>
            {/* 第六步 查看 */}
            <Modal open={displayOrderShowOpen}
                title="查看功能列表显示顺序"
                width={1500}
                destroyOnClose={true}
                onCancel={() => {
                    setDisplayOrderShowOpen(false);
                }}
                footer={null}
            >
                <DisplayOrderShow></DisplayOrderShow>
            </Modal>
        </div>
    )
}