feat: 调整布局

src/components/NiceForm/components/CustomAddArray.tsx

@@ -3,26 +3,21 @@ import styled from 'styled-components'
 import { toArr } from '@formily/shared';
 import { SchemaField, FormPath } from '@formily/antd';
 import { Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 
 // 由于自增列表里 无法进行mega布局， 所以只能在该组件下 重写样式
-const RowStyleLayout = styled(props => <div {...props} />)`
-  .ant-btn {
-    margin-right: 16px;
-  }
-  .ant-form-item {
-    display: inline-flex;
-    margin-right: 16px;
-    margin-bottom: 16px;
-  }
+const RowStyleLayout = styled(({ style, ...restProps }) => <div {...restProps} style={{ paddingRight: 56, position: 'relative', ...style, }} />)`
   > .ant-form-item {
-    margin-bottom: 20px;
-    margin-right: 20px;
+    width: 100%;
+    flex: 1;
   }
-  > .ant-form-item:last-child {
-    margin-right: 0;
+  .schema-wrap {
+    width: 100%;
   }
-  .ant-form-item-control {
-    max-width: none;
+  .btn-remove {
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 `
 
@@ -34,17 +29,21 @@ const CustomAddArray = (props) => {
   const onRemove = index => mutators.remove(index)
 
   return (
-    <div>
+    <div style={{ width: '100%', flex: 1 }}>
       {toArr(value).map((item, index, arr) => (
         <RowStyleLayout {...componentProps} key={index}>
           <SchemaField path={FormPath.parse(path).concat(index)} onlyRenderProperties/>
-          <Button onClick={onAdd.bind(null, index)} type='primary'>+</Button>
-          <Button onClick={onRemove.bind(null, index)}>-</Button>
+          <Button className="btn-remove" onClick={onRemove.bind(null, index)}>-</Button>
         </RowStyleLayout>
       ))}
-      {(!value || !value.length) && (
-        <Button onClick={onAdd} type='primary'>+</Button>
-      )}
+      <Button
+        onClick={onAdd}
+        type="dashed"
+        icon={<PlusOutlined />}
+        block
+      >
+        添加
+      </Button>
     </div>
   )
 }