How to use @ant-design/compatible

<Form.Item label="Framework">
 <Dropdown overlay={frameworkMenu}>
  <Button>
  </Button>
 </Dropdown>
</Form.Item>
{frameworkItem && frameworkItem.docsLink && (
 <Alert
<Form.Item label="Main Template">
 <Dropdown
  overlay={templatePackagesMenu}
  </Button>
 </Dropdown>
</Form.Item>
<Form.Item label="Charting Library">
 <Dropdown
  overlay={chartLibrariesMenu}
  </Button>
 </Dropdown>
</Form.Item>
<Form.Item label="Web Socket Transport (Real-time)">
 <Switch
  checked={enableWebSocketTransport}
</Form.Item>

const LoginSubmit = ({ className, ...rest }) => {
  const clsString = classNames(styles.submit, className)
  return (
    <FormItem>
      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest} />
    </FormItem>
  )
}

const renderContactlForm = () => {
    return (
      <Card title="联系信息" bordered={false} size="small">
        <LegacyForm.Item label="手机号码">
          {getFieldDecorator('mobile')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="电子邮件">
          {getFieldDecorator('email')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="地区">
          <SelectLocation location={userInfo.location} onChange={value => {
            userInfo.location = value
          }} />
        </LegacyForm.Item>
      </Card>
    )
  }

confObj.map(seg => {
      return (
        <Descriptions.Item key={seg.seg} label={(
          <>
            {seg.seg}
            <span style={{color: '#999'}}>
              {seg.config.dis_name ? ` - ${seg.config.dis_name}` : ''}
            </span>
            {seg.config.desc ? (
              <Tooltip title={seg.config.desc}>
                {' '}
                <Icon type="question-circle-o" />
              </Tooltip>
            ) : null}
          </>
        )}>
          {seg.configs ? this.renderObject(seg.configs) : seg.config.value}
        </Descriptions.Item>
      )
    })

render() {
    const {userInfo} = this.state

    return (
      <LegacyForm {...Constants.DEF_FORM_ITEM_LAYOUT} layout="horizontal">
        <Row gutter={8}>
          <Col span={18}>
            {this.renderGeneralForm()}
            {this.renderContactlForm()}
            {this.renderRoleForm()}
          </Col>
          <Col span={6} align="center">
            <AvatarForm src={userInfo.avatar} onUploadResult={avatarUrl => {
              if (avatarUrl) {
                userInfo.avatar = avatarUrl
                this.setState({userInfo})
              }
            }} />
          </Col>
        </Row>
      </LegacyForm>
    )
  }

tags.map(tag => {
        if (typeof tag === 'object') {
          return (
            <JsonViewModal data={tag}>
              <Icon type="eye" /> 查看
            </JsonViewModal>
          )
        }

        const isLongTag = tag.length > 20
        const tagElem = (
          <Tag key={tag} color="blue" closable onClose={() => handleClose(tag)}>
            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
          </Tag>
        )

        return isLongTag ? (
          <Tooltip title={tag} key={tag}>
            {tagElem}
          </Tooltip>
        ) : (
          tagElem
        )
      })

return (
  <Card title="角色权限" bordered={false} size="small">
    <LegacyForm.Item label="角色">
      <div>
        {userInfo.roles ? userInfo.roles.map(role => {
        }) : '未设置'}
      </div>
    </LegacyForm.Item>
    <LegacyForm.Item label={<Tooltip title="用户实际权限为角色权限+管理员设置权限">权限 <Icon type="question-circle" /></Tooltip>}>
      <div>
        {userInfo.permissions ? userInfo.permissions.map(perm => {
        }) : '未设置'}
      </div>
    </LegacyForm.Item>
  </Card>

tableColumns.push({
      title: '操作',
      dataIndex: 'enabled',
      valueType: 'operation',
      align: 'center',
      fixed: 'right',
      width: 100,
      render: (text, record) => (
        <>
          <>
            <a title="编辑" onClick={async () => {
              await setValueEditMode(2)
              await setSelectedRowData(record)
              await setValueModalVisible(true)
              props.form.setFieldsValue(record)
            }}>
              <Icon type="edit" />
            </a>
            <Divider type="vertical" />
            <a title="删除" onClick={() => {
              handleRemove(record)
            }}>
              <Icon type="delete" />
            </a>
          </>
        </>
      ),
    })

renderContactlForm() {
    const {getFieldDecorator} = this.props.form
    const {userInfo} = this.state

    return (
      <Card title="联系信息" bordered={false} size="small">
        <LegacyForm.Item label="手机号码">
          {getFieldDecorator('mobile')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="电子邮件">
          {getFieldDecorator('email')(<Input />)}
        </LegacyForm.Item>
        <LegacyForm.Item label="地区">
          <SelectLocation location={userInfo.location} onChange={value => {
            userInfo.location = value
            this.setState({userInfo})
          }} />
        </LegacyForm.Item>
      </Card>
    )
  }

  }}>
    <a title="编辑">
      <Icon type="edit" />
      <Divider type="vertical" />
    </a>
    handleRemove(record)
  }}>
    <Icon type="delete" />
  </a>
</>

<LoginContext.Provider value={this.getContext()}>
  <div className={classNames(className, styles.login)}>
    <Form onSubmit={this.handleSubmit}>
      {tabs.length ? (
        <React.Fragment>

LegacyForm.create()(props => {
  const {editMode, modelInstance, formRef} = props
  const {getFieldDecorator} = props.form
    <LegacyForm {...Constants.DEF_FORM_ITEM_LAYOUT} layout="horizontal">
      <LegacyForm.Item required label="分类英文名">
        {getFieldDecorator('name', {
          rules: [
      </LegacyForm.Item>
      <LegacyForm.Item required label="分类显示名">
        {getFieldDecorator('dis_name', {
          rules: [{required: true, message: '显示名称必填'}]
        })(<Input placeholder="请输入" />)}
      </LegacyForm.Item>
    </LegacyForm>

<LegacyForm.Item>
  <div>
    <Avatar src={avatarSrc} size={128} icon={avatarSrc ? undefined : <Icon type="user" />} style={{marginTop: 50}} />
  </div>
  <div style={{marginTop: 10}}>
    </UploadFile>
  </div>
</LegacyForm.Item>

</Row>
<Row gutter={[10, 20]}>
  <Col span={6} align="right"><Tooltip title="用户实际权限为角色权限+管理员设置权限"><Icon type="question-circle" /></Tooltip> 权限：</Col>
  <Col span={18}>
    {userInfo.permissions && userInfo.permissions.length > 0 ? userInfo.permissions.map(perm => {

return (
  <JsonViewModal title={`${record.dis_name} DB Schema`} data={record.schema}>
    <Icon type="console-sql" />
  </JsonViewModal>
      {value}{' '}
      <Tooltip title="修改分类显示名称，也可以通过修改系统字典中的 sys_category 字典相关键值修改分类名称">
        <Icon type="edit" onClick={() => this.handleChangeCatName(row.category_name, value)} />
      </Tooltip>
      <br />{row.category_name}