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

import './index.css';
import {MouseEvent, useState} from "react";
import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
import MenuTree from "../../components/menu/MenuTree.tsx";
import {IMenuTree, IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts";
import {name} from "axios";

class MenuTreeItem implements IMenuTreeItem {
    children: Array<IMenuTreeItem> | null;
    id: string;
    isEdit: boolean;
    isOpen: boolean;
    isParent: boolean;
    level: number;
    name: string;
    oldName: string;

    constructor(id: string, name: string, level: number) {
        this.id = id;
        this.name = name;
        this.oldName = name;
        this.level = level;
        this.isEdit = false;
        this.isOpen = false;
        this.isParent = false;
        this.children = null;
    }

}

const projMenu: IMenuWithTopButton = {
    button: {
        name: '创建项目',
        handle(e: MouseEvent<HTMLButtonElement>) {
            console.log(e)
        }
    },
    list: [
        {id: 'proj1', icon: './vite.svg', name: '全部项目'},
        {id: 'proj2', icon: './vite.svg', name: '进行中的'},
        {id: 'proj3', icon: './vite.svg', name: '已完成的'}
    ],
    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
        console.log(e);
        console.log(index);
        console.log(item)
    }
}

const agentMenu: IMenuWithTopButton = {
    button: {
        name: '代理服务',
        handle(e: MouseEvent<HTMLButtonElement>) {
            console.log(e)
        }
    },
    list: [
        {id: 'agent1', icon: './vite.svg', name: '全部项目'},
        {id: 'agent2', icon: './vite.svg', name: '进行中的'},
        {id: 'agent3', icon: './vite.svg', name: '已完成的'},
    ],
    handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
        console.log(e);
        console.log(index);
        console.log(item)
    }
}

export default function Index() {
    const menuTrees: Array<IMenuTreeItem> = [];
    const [menuTreeArray, setMenuTreeArray] = useState(menuTrees);
    return (
        <div className="index">
            <div className="left">
                <MenuWithTopButton
                    button={projMenu.button}
                    list={projMenu.list}
                    handleListItem={projMenu.handleListItem}
                />
                <button type="button" onClick={() => {
                    const menuTreeItem = new MenuTreeItem(`${new Date().getTime()}`, '一级目录', 1);
                    menuTreeItem.isParent = true;
                    setMenuTreeArray([
                        ...menuTreeArray,
                        menuTreeItem,
                    ]);
                }}>添加目录
                </button>
                <MenuTree
                    menus={menuTreeArray}
                    url={''}
                    setMenuTreeArray={(item) => {
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }}
                    handleExpand={(item) => {
                    }}
                    handleAddClick={(item) => {
                        item.isParent = true;
                        item.isOpen = true;
                        if (!item.children) {
                            item.children = new Array<IMenuTreeItem>();
                        }
                        const menuTreeItem = new MenuTreeItem(`${new Date().getTime()}`, item.level + '级目录', item.level + 1);
                        menuTreeItem.isOpen = true;
                        item.children.push(menuTreeItem);
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }
                    }
                    handleEditClick={(item) => {
                        item.isEdit = true;
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }}
                    handleRemoveClick={(item) => {

                    }}
                    handleEditSaveClick={(item) => {
                        console.log(item);
                        // 这里发请求，成功之后修改，失败还原
                        if(item.name === '') {
                            return;
                        }
                        item.oldName = item.name;
                        item.isEdit = false;
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }}
                    handleEditCancelClick={(item) => {
                        item.name = item.oldName;
                        item.isEdit = false;
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }}
                    handleNameChange={(item) => {
                        setMenuTreeArray([
                            ...menuTreeArray
                        ])
                    }}
                />
                <MenuWithTopButton
                    button={agentMenu.button}
                    list={agentMenu.list}
                    handleListItem={agentMenu.handleListItem}
                />
            </div>
            <div className="right"></div>
        </div>
    )
}