style: 优化页面展示

src/pages/testPages/request.jsx

 import React, { useState } from 'react';
-import { Form, Input, Button, Space, Select } from 'antd';
+import { Form, Input, Button, Space, Select, Col } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { get, post } from 'services';
 
@@ -56,11 +56,22 @@ const RequestTest = () => {
     </Select>
   );
 
+  const formItemLayout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 14 },
+  };
+
+  const paramItemLayout = {
+    labebCol: { span: 8 },
+    wrapperCol: { span: 24 },
+  };
+
   return (
     <Form
       form={form}
       name="dynamic_form_nest_item"
       onFinish={onFinish}
+      {...formItemLayout}
       autoComplete="off"
     >
       <Form.Item
@@ -83,12 +94,14 @@ const RequestTest = () => {
         {(fields, { add, remove }) => (
           <>
             {fields.map(field => (
+              <Col span={14} offset={5}>
                 <Space key={field.key} align="start">
                   <Form.Item
                     {...field}
                     label="key"
                     name={[field.name, 'key']}
                     fieldKey={[field.fieldKey, 'key']}
+                    {...paramItemLayout}
                     rules={[{ required: true, message: 'Missing key' }]}
                   >
                     <Input />
@@ -96,17 +109,22 @@ const RequestTest = () => {
                   <Form.Item
                     {...field}
                     label="value"
+                    {...paramItemLayout}
                     fieldKey={[field.fieldKey, 'value']}
                     name={[field.name, 'value']}
                   >
                     <Input />
                   </Form.Item>
-                <MinusCircleOutlined
-                  onClick={() => console.log(field) || remove(field.name)}
-                />
+                  <MinusCircleOutlined onClick={() => remove(field.name)} />
                 </Space>
+              </Col>
             ))}
-            <Form.Item>
+            <Form.Item
+              wrapperCol={{
+                span: 14,
+                offset: 5,
+              }}
+            >
               <Button
                 type="dashed"
                 onClick={() => {
@@ -121,8 +139,8 @@ const RequestTest = () => {
         )}
       </Form.List>
 
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
+      <Form.Item wrapperCol={{ span: 5, offset: 10 }}>
+        <Button type="primary" htmlType="submit" block>
           Submit
         </Button>
       </Form.Item>