使用 JavaScript React Antd 写个表单 表单由折叠面板包裹类型Collapse 表单 参数有 名称类型Input禁止编辑 描述类型Input禁止编辑 语法类型Input禁止编辑 OID类型Input禁止编辑 允许修改属性类型Switch 单值属性类型Switch 并且输入框对齐 并且label为中文 并且拥有删除与编辑按钮靠右展示

以下是使用 JavaScript React Antd 编写的表单，表单由折叠面板包裹，包含名称、描述、语法、OID、允许修改属性和单值属性参数：

import React, { useState } from 'react';
import { Collapse, Input, Switch, Button, Form } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';

const FormItem = Form.Item;

const MyForm = () => {
  const [editable, setEditable] = useState(false);

  const handleEdit = () => {
    setEditable(true);
  };

  const handleDelete = () => {
    // TODO: Delete the form item
  };

  const handleSave = (values) => {
    // TODO: Save the form item
    setEditable(false);
  };

  return (
    <Form onFinish={handleSave}>
      <Collapse defaultActiveKey={['1']}>
        <Collapse.Panel header="表单" key="1">
          <FormItem label="名称" name="name">
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label="描述" name="description">
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label="语法" name="syntax">
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label="OID" name="oid">
            <Input disabled={!editable} />
          </FormItem>
          <FormItem label="允许修改属性" name="allowEdit">
            <Switch disabled={!editable} />
          </FormItem>
          <FormItem label="单值属性" name="singleValue">
            <Switch disabled={!editable} />
          </FormItem>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginRight: 16 }}
              disabled={!editable}
            >
              保存
            </Button>
            {editable ? (
              <>
                <Button
                  icon={<DeleteOutlined />}
                  onClick={handleDelete}
                  style={{ marginRight: 8 }}
                >
                  删除
                </Button>
                <Button icon={<EditOutlined />} onClick={handleEdit}>
                  编辑
                </Button>
              </>
            ) : (
              <Button icon={<EditOutlined />} onClick={handleEdit}>
                查看
              </Button>
            )}
          </div>
        </Collapse.Panel>
      </Collapse>
    </Form>
  );
};

export default MyForm;

在上述代码中，我们使用了 Collapse 组件来包裹整个表单，其中 FormItem 组件用于渲染每个表单项，包含一个 label 和一个 Input 或 Switch。我们还添加了三个按钮：保存、删除和编辑/查看，其中删除和编辑按钮在编辑模式下显示，查看模式下只显示编辑按钮。我们还使用了 useState 钩子来管理表单的可编辑状态。