system-copyright-react/src/route/index/Index.tsx

import './index.css';
import {MouseEvent, Reducer, useReducer} from "react";
import {Link, useNavigate} from "react-router-dom";
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
import ListProj from "../../components/list/ListProj.tsx";
import ListProjAgent from "../../components/list/ListProjAgent.tsx";
import {Breadcrumb} from 'antd';
import {
    IndexListContext,
    IndexListDataType,
    IndexListDispatchContext,
    ListAction,
    ListData
} from "../../context/IndexListContext.ts";

export default function Index() {
    const nav = useNavigate();

    const listReducer = (state: ListData, action: ListAction) => {
        if(action.type == IndexListDataType.PROJ) {
            state.type = IndexListDataType.PROJ;
            state.status = action.value;
        } else if(action.type == IndexListDataType.AGENT) {
            state.type = IndexListDataType.AGENT;
            state.status = action.value;
        }
        return {
            ...state
        };
    }

    const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
        type: IndexListDataType.PROJ
    });

    const projMenu: IMenuWithTopButton = {
        button: {
            name: '创建项目',
            handle() {
                nav('/proj-create')
            }
        },
        list: [
            {id: 'ALL', name: '全部项目'},
            {id: 'PROCESSING', name: '进行中的'},
            {id: 'COMPLETE', name: '已完成的'}
        ],
        handleListItem(_e, _index,item: IMenuListItem) {
            dispatch({
                type: IndexListDataType.PROJ,
                value: item.id
            })
        }
    }

    const agentMenu: IMenuWithTopButton = {
        button: {
            name: '代理服务',
            handle() {

            }
        },
        list: [
            {id: 'ALL', name: '全部项目'},
            {id: 'PROCESSING', name: '进行中的'},
            {id: 'COMPLETE', name: '已完成的'},
        ],
        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
            dispatch({
                type: IndexListDataType.AGENT,
                value: item.id
            })
        }
    }

    return (
        <>
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>}
                ]}
            />
            <IndexListContext.Provider value={listData}>
                <IndexListDispatchContext.Provider value={dispatch}>
                    <div className="index">
                        <div className="left">
                            <MenuWithTopButton
                                button={projMenu.button}
                                list={projMenu.list}
                                handleListItem={projMenu.handleListItem}
                            />
                            <MenuTreeWithTopButton/>
                            <MenuWithTopButton
                                button={agentMenu.button}
                                list={agentMenu.list}
                                handleListItem={agentMenu.handleListItem}
                            />
                        </div>
                        <div className="right">
                            {
                                listData.type === IndexListDataType.PROJ ? <ListProj/> : (
                                    listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
                                )
                            }
                        </div>
                    </div>
                </IndexListDispatchContext.Provider>
            </IndexListContext.Provider>
        </>
    )
}