system-copyright-react/src/components/ai/mod/AiHelperMod.tsx

import {Button, Divider, Dropdown, Space, Table, TableProps} from "antd";
import {CheckOutlined, LoadingOutlined, ReloadOutlined, RedoOutlined} from "@ant-design/icons";
import {useEffect, useState} from "react";
import {IProjMod} from "../../../interfaces/proj/IProj.ts";

type PropsType = {
    mods: IProjMod[];
    newMods: ProjModType[],
    handleGenerate: () => void;
    handleSave: (index: number, mod: ProjModType) => void;
    handleResaveField: (index: number, projModId: string) => void;
}

type ProjModType = {
    name: string,
    desc: string,
}

const savedItems = [
    {
        key: 'edit',
        label: '编辑',
    },{
        key: 'remove',
        label: '删除',
    },
]

export default function AiHelperMod(props: PropsType) {
    const [modArray, setModArray] = useState<IProjMod[]>([]);
    const [newModArray, setNewModArray] = useState<ProjModType[]>([]);

    useEffect(() => {
        setModArray(props.mods);
        setNewModArray(props.newMods);
    }, [props.mods, props.newMods]);

    const modColumnArray: TableProps<IProjMod>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        {title: '模块名称', dataIndex: 'modName', key: 'name', width: 200, align: 'center'},
        {title: '模块描述', dataIndex: 'modDesc', key: 'desc', align: 'center'},
        {
            title: 'AI状态',
            dataIndex: 'aiFieldStatus',
            key: 'desc',
            width: 100,
            align: 'center',
            render: (value) => {
                if(value == 'GENERATING') {
                    return '处理中'
                }
                if(value == 'FIELD') {
                    return '失败'
                }
                if(value == 'SUCCESS') {
                    return '成功'
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            width: 80,
            align: 'center',
            render: (_value, record, index) => {
                if(record.aiFieldStatus == 'GENERATING') {
                    return <LoadingOutlined />
                }
                if(record.aiFieldStatus == 'FAILED') {
                    return <Button onClick={() => {
                        props.handleResaveField(index, record.projModId);
                    }}><RedoOutlined /></Button>
                }
                return (
                    <Dropdown menu={{ items: savedItems }} placement="bottomCenter" arrow>
                        <Button>…</Button>
                    </Dropdown>
                )
            }
        },
    ];

    const newModColumnArray: TableProps<ProjModType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 60,
            align: 'center',
            render: (_value, _record, index) => {
                return index + 1
            }
        },
        {title: '模块名称', dataIndex: 'name', key: 'name', width: 200, align: 'center'},
        {title: '模块描述', dataIndex: 'desc', key: 'desc', align: 'center'},
        {
            title: '确认',
            dataIndex: 'option',
            key: 'option',
            width: 80,
            align: 'center',
            render: (_value, record, index) => {
                return (
                    <Button onClick={() => {
                        props.handleSave(index, record);
                    }}>
                        <CheckOutlined />
                    </Button>
                )
            }
        },
    ];

    return (
        <>
            <div style={{padding: '5px 0 0 0'}}>
                {newModArray.length > 0 ? <Divider orientation="right" plain>原模块</Divider> : <></>}
                <Table columns={modColumnArray} dataSource={modArray} size="small" bordered={true} scroll={{y: 240}} pagination={false}/>
                {
                    newModArray.length > 0 ? (
                        <>
                            <Divider orientation="right" plain>新模块</Divider>
                            <Table columns={newModColumnArray} dataSource={newModArray} size="small" bordered={true} scroll={{y: 240}} pagination={false}/>
                        </>
                    ) : <></>
                }
            </div>
            <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
                {
                    newModArray.length > 0 ? (
                        <Space>
                            <Button type="link" style={{cursor: 'pointer'}}
                                    onClick={() => {
                                        props.handleGenerate();
                                    }}><ReloadOutlined/> 重新生成</Button>
                        </Space>
                    ) : <Button type="link" style={{cursor: 'pointer'}}
                                onClick={() => {
                                    props.handleGenerate();
                                }}>AI生成</Button>
                }
            </div>
        </>
    )
}