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,30 +94,37 @@ const RequestTest = () => {
         {(fields, { add, remove }) => (
           <>
             {fields.map(field => (
-              <Space key={field.key} align="start">
-                <Form.Item
-                  {...field}
-                  label="key"
-                  name={[field.name, 'key']}
-                  fieldKey={[field.fieldKey, 'key']}
-                  rules={[{ required: true, message: 'Missing key' }]}
-                >
-                  <Input />
-                </Form.Item>
-                <Form.Item
-                  {...field}
-                  label="value"
-                  fieldKey={[field.fieldKey, 'value']}
-                  name={[field.name, 'value']}
-                >
-                  <Input />
-                </Form.Item>
-                <MinusCircleOutlined
-                  onClick={() => console.log(field) || remove(field.name)}
-                />
-              </Space>
+              <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 />
+                  </Form.Item>
+                  <Form.Item
+                    {...field}
+                    label="value"
+                    {...paramItemLayout}
+                    fieldKey={[field.fieldKey, 'value']}
+                    name={[field.name, 'value']}
+                  >
+                    <Input />
+                  </Form.Item>
+                  <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>