system-copyright-react/src/route/AppElectron/AppEdit.tsx

import { useState, useEffect } from 'react'
import EditAppInfo from './components/EditAppInfo/EditAppInfo';
import EditAppDes from './components/EditAppDes/EditAppDes';
import EditAppFiles from './components/EditAppFiles/EditAppFiles';
import EditAppFunction from './components/EditAppFunction/EditAppFunction';
import EditBelongPeople from './components/EditBelongPeople/EditBelongPeople';
import AppInfo from './components/AppInfo/AppInfo';
import { useParams } from 'react-router-dom'
import './app-edit.css'
import {
    RightOutlined
} from '@ant-design/icons';
export default function AppEdit() {
    const pathParams = useParams();
    // 进度
    const [editProcess, setEditProcess] = useState(1);
    useEffect(() => {
        //获取进度
        setEditProcess(1)
        // 带来的id
        console.log('参数', pathParams);
        // 获取 信息


    }, []);
    const height = window.innerHeight - 180;
    return (
        <div className='appEdit' style={{ height: `${height}px`, overflow: 'auto' }}>
            <div className='editProcessBox'>
                <div className='editProcess' >
                    <div className='editProcessNum'
                        style={{
                            background: editProcess >= 1 ? '#3B60E8' : '',
                            color: editProcess >= 1 ? '#fff' : '#B1B1B1',
                            borderColor: editProcess >= 1 ? '' : '#B1B1B1'
                        }}
                    >1</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 1 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 1 ? 'bold' : 'normal'
                        }}
                    >软件基本信息</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 2 ? '#3B60E8' : '',
                        color: editProcess >= 2 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 2 ? '' : '#B1B1B1'
                    }}>2</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 2 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 2 ? 'bold' : 'normal'
                        }}
                    >权力说明</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 3 ? '#3B60E8' : '',
                        color: editProcess >= 3 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 3 ? '' : '#B1B1B1'
                    }}>3</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 3 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 3 ? 'bold' : 'normal'
                        }}
                    >鉴别材料</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 4 ? '#3B60E8' : '',
                        color: editProcess >= 4 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 4 ? '' : '#B1B1B1'
                    }}>4</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 4 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 4 ? 'bold' : 'normal'
                        }}
                    >功能特点</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 5 ? '#3B60E8' : '',
                        color: editProcess >= 5 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 5 ? '' : '#B1B1B1'
                    }}>5</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 5 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 5 ? 'bold' : 'normal'
                        }}
                    >著作权人</div>
                </div>
                <div className='editright'><RightOutlined /></div>
                <div className='editProcess'>
                    <div className='editProcessNum' style={{
                        background: editProcess >= 6 ? '#3B60E8' : '',
                        color: editProcess >= 6 ? '#fff' : '#B1B1B1',
                        borderColor: editProcess >= 6 ? '' : '#B1B1B1'
                    }}>6</div>
                    <div className='editProcessTitle'
                        style={{
                            color: editProcess >= 6 ? '#353535' : '#878787',
                            fontWeight: editProcess >= 6 ? 'bold' : 'normal'
                        }}
                    >填报完成</div>
                </div>


            </div>
            <div className='editFormBox'>
                <div style={{
                    display: editProcess == 1 ? 'block' : 'none'
                }}>
                    <EditAppInfo setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppInfo>
                </div>
                <div style={{
                    display: editProcess == 2 ? 'block' : 'none'
                }}>
                    <EditAppDes setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppDes>
                </div>
                <div style={{
                    display: editProcess == 3 ? 'block' : 'none'
                }}>
                    <EditAppFiles setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppFiles>
                </div>
                <div style={{
                    display: editProcess == 4 ? 'block' : 'none'
                }}>
                    <EditAppFunction setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditAppFunction>
                </div>
                <div style={{
                    display: editProcess == 5 ? 'block' : 'none'
                }}>
                    <EditBelongPeople setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></EditBelongPeople>
                </div>
                <div style={{
                    display: editProcess == 6 ? 'block' : 'none'
                }}>
                    <AppInfo setEditProcess={
                        (num: number) => {
                            setEditProcess(num)
                        }
                    }></AppInfo>
                </div>
            </div>
        </div>
    )
}