ci4sManagement-cloud/react-ui/src/pages/Dataset/components/AddModelModal/index.tsx

import KFModal from '@/components/KFModal';
import { CategoryData, DataSource } from '@/pages/Dataset/config';
import { addModel } from '@/services/dataset/index.js';
import { to } from '@/utils/promise';
import { Form, Input, Radio, Select, message, type ModalProps } from 'antd';

interface AddModelModalProps extends Omit<ModalProps, 'onOk'> {
  typeList: CategoryData[];
  tagList: CategoryData[];
  onOk: () => void;
}

function AddModelModal({ typeList, tagList, onOk, ...rest }: AddModelModalProps) {
  // 上传请求
  const createModel = async (params: any) => {
    const [res] = await to(addModel(params));
    if (res) {
      message.success('创建成功');
      onOk?.();
    }
  };

  // 提交
  const onFinish = (formData: any) => {
    const params = {
      ...formData,
      model_source: DataSource.Create,
    };
    createModel(params);
  };

  return (
    <KFModal
      {...rest}
      title="新建模型"
      image={require('@/assets/img/create-experiment.png')}
      width={825}
      okButtonProps={{
        htmlType: 'submit',
        form: 'form',
      }}
    >
      <Form
        name="form"
        layout="vertical"
        onFinish={onFinish}
        autoComplete="off"
        initialValues={{ is_public: false }}
      >
        <Form.Item
          label="模型名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入模型名称!',
            },
          ]}
        >
          <Input placeholder="请输入模型名称" showCount allowClear maxLength={40} />
        </Form.Item>
        <Form.Item label="模型框架" name="model_type">
          <Select
            allowClear
            placeholder="请选择模型框架"
            options={typeList}
            fieldNames={{ label: 'name', value: 'name' }}
            optionFilterProp="name"
            showSearch
          />
        </Form.Item>
        <Form.Item label="模型能力" name="model_tag">
          <Select
            allowClear
            placeholder="请选择模型能力"
            options={tagList}
            fieldNames={{ label: 'name', value: 'name' }}
            optionFilterProp="name"
            showSearch
          />
        </Form.Item>
        <Form.Item
          label="模型描述"
          name="description"
          rules={[
            {
              required: true,
              message: '请输入模型描述',
            },
          ]}
        >
          <Input.TextArea
            placeholder="请输入模型描述"
            maxLength={200}
            autoSize={{ minRows: 2, maxRows: 6 }}
            showCount
            allowClear
          />
        </Form.Item>
        <Form.Item
          label="可见性"
          name="is_public"
          rules={[{ required: true, message: '请选择可见性' }]}
        >
          <Radio.Group>
            <Radio value={false}>私有</Radio>
            <Radio value={true}>公开</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </KFModal>
  );
}

export default AddModelModal;