How to use the choerodon-ui/pro.Modal.open function in choerodon-ui

const createHost = () => {
    const currentRecord = hostTableDataSet.create({});
    Modal.open({
      title: '创建主机',
      key: ModalKey,
      drawer: true,
      style: {
        width: '51.39%',
      },
      children: (
        
      ),
      onOk: () => hostTableDataSet.submit(),
      onCancel: () => hostTableDataSet.splice(currentRecord.index, 1),
    });
  };

function handleEdit(record) {
    Modal.open({
      key: modalKey,
      style: modalStyle,
      drawer: true,
      title: formatMessage({ id: `${intlPrefix}.cipher.edit` }),
      children: ,
      okText: formatMessage({ id: 'save' }),
    });
  }

function openDetail() {
    Modal.open({
      key: modalKey1,
      title: formatMessage({ id: `${intlPrefix}.config-map.detail` }),
      children: ,
      drawer: true,
      style: modalStyle,
      okText: formatMessage({ id: 'close' }),
      okCancel: false,
    });
  }

function openModal() {
    Modal.open({
      key: modalKey,
      style: modalStyle,
      drawer: true,
      title: formatMessage({ id: 'network.header.create' }),
      children: ,
      okText: formatMessage({ id: 'create' }),
    });
  }

function openDetail() {
    Modal.open({
      key: modalKey1,
      title: formatMessage({ id: `${intlPrefix}.custom-resource.detail` }),
      children: ,
      drawer: true,
      style: modalStyle,
      okText: formatMessage({ id: 'close' }),
      okCancel: false,
    });
  }

async function openEffectModal(record) {
    const envId = record.get('id');
    const effectModal = Modal.open({
      key: effectKey,
      title: formatMessage({ id: `${intlPrefix}.stop.title` }, { name }),
      children: ,
      footer: null,
    });
    const res = await checkStatus(record);
    if (res) {
      try {
        const result = await mainStore.checkEffect(projectId, envId);
        if (handlePromptError(result)) {
          effectModal.update({
            children: formatMessage({ id: `${intlPrefix}.stop.des` }),
            okText: formatMessage({ id: 'ok' }),
            okCancel: true,
            onOk: () => handleEffect(envId, false),
            footer: ((okBtn, cancelBtn) => (

openRemove = (name) => {
    const {
      intl: { formatMessage },
    } = this.props;
    this.setState({ name });
    ProModal.open({
      key: deleteKey,
      title: formatMessage({ id: 'branch.action.delete.title' }, { name }),
      children: formatMessage({ id: 'branch.delete.tooltip' }),
      onOk: this.handleDelete,
      onCancel: this.closeRemove,
      okText: formatMessage({ id: 'delete' }),
      okProps: { color: 'red' },
      cancelProps: { color: 'dark' },
    });
  };

function openDetail() {
    Modal.open({
      key: modalKey1,
      title: formatMessage({ id: `${intlPrefix}.secret.detail` }),
      children: ,
      drawer: true,
      style: modalStyle,
      okText: formatMessage({ id: 'close' }),
      okCancel: false,
    });
  }

function confirmDelete() {
    const name = record.get('name');
    Modal.open({
      movable: false,
      closable: false,
      header: true,
      key: confirmKey,
      title: formatMessage({ id: `${intlPrefix}.group.delete` }, { name }),
      children: <div>{formatMessage({ id: `${intlPrefix}.group.delete.warn` })}</div>,
      onOk: handleDelete,
    });
  }

function openModal() {
    Modal.open({
      key: modalKey,
      style: modalStyle,
      drawer: true,
      title: formatMessage({ id: `${intlPrefix}.configMap.edit` }),
      children: ,
      okText: formatMessage({ id: 'save' }),
    });
  }