From 06431449e6b6ab7b5b8d95143f39bfb97cf01845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Mon, 8 Jun 2020 17:55:36 +0800
Subject: [PATCH] feat: add view (#23)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 一些修改

* feat: plugins 删除

* fix: 修复 scenes 逻辑

* feat: 添加 view

* feat: 修改 demo

* refactor: useSubmit 重构

* feat: submit 重构

* fix: test

* feat: 搜索场景完善

* fix: 修复 placeholder

* test: snap

* fix: 修复渲染 dom 样式问题 去掉 scens 参数

* feat: custom 支持 showType

* fix: 单选自定义 render

* test: 完善单元测试

* test: test

* feat: add flags

* test: test

* test: test

* test: test

* test: test

* test: test

* test: test

* test: test

* test: test

* test: test

* feat: 0.8.5

* feat: 添加日期区间

* test: remove _item_type

* feat: 添加初步对比功能

* feat: 开始做 isShow Function 判断

* feat: items 添加 isshow function

* feat: 如果字段是 undefined 则不需要执行 set 了

* fix: 修复值渲染问题

* fix: test

* fix: test

* feat: 代码优化

* fix:  List 透传 scenes

* refactor: format 修改为 2 个参数

* refactor: 删除 showType

* feat: 添加 modify

* feat: date 重构格式化方式

* feat: 完善基础 diff view

* fix: 修复报错抛出

* feat: test

* feat: list 处理参数

* fix: 修复会改 name 源数据

* feat: 优化代码

* feat: 开始做 ModalForm

* feat: 删除 required

* feat: 更新规则

* feat: 添加 space

* feat: 添加校验

* feat: 终于可以多层级有动态对比交互

* fix: test

* chore: 此方案不通，不太好

* feat: 完善 diff 逻辑

* chore: 删除未使用

* feat: vercel

Co-authored-by: crazyair <jianfeng.huang@yunzhanghu.com>
---
 .eslintrc.js                                  |  49 +--
 .github/workflows/{now.yml => vercel.yml}     |   2 +-
 docs/apis/hooks.md                            |   4 +-
 docs/apis/index.md                            |   1 -
 docs/examples/demo/demo1.tsx                  |  20 +-
 docs/examples/demo/demo3.tsx                  |  12 +-
 docs/examples/demo/diff.tsx                   | 291 +++++++++++++++++
 docs/examples/demo/edit.tsx                   |   3 +-
 docs/examples/demo/search.tsx                 |   2 +-
 docs/examples/demo/shouldUpdate.tsx           |   4 +-
 docs/examples/index.md                        |  12 +
 docs/types/demo/index.tsx                     |   8 +-
 docs/types/demo/list.tsx                      |   1 -
 docs/types/demo/oneLine.tsx                   |  12 +-
 docs/types/demo/secureButton.tsx              |   2 +-
 docs/types/demo/space.tsx                     |  28 ++
 docs/types/demo/submit.tsx                    |   2 +-
 docs/types/space.md                           |  25 ++
 package.json                                  |  65 ++--
 packages/yforms/src/YForm/Context.ts          |   9 +-
 packages/yforms/src/YForm/Form.tsx            |  44 +--
 packages/yforms/src/YForm/ItemChildren.tsx    |  44 +--
 packages/yforms/src/YForm/Items.tsx           | 115 ++++---
 packages/yforms/src/YForm/ItemsType.tsx       | 122 +++----
 packages/yforms/src/YForm/ItemsTypeModify.tsx | 302 ++++++++++++++++++
 .../src/YForm/__test__/YFormItems.test.tsx    |   6 +-
 .../__snapshots__/Submit.test.tsx.snap        |  10 +-
 .../__snapshots__/YFormItems.test.tsx.snap    |  10 +-
 .../__snapshots__/index.test.tsx.snap         |  38 +--
 packages/yforms/src/YForm/__test__/fields.tsx |   1 -
 .../yforms/src/YForm/__test__/index.test.tsx  |   6 +-
 .../src/YForm/component/ComponentView.tsx     | 124 +++----
 packages/yforms/src/YForm/component/Diff.tsx  |  87 +++++
 packages/yforms/src/YForm/component/List.tsx  |  56 ++--
 .../yforms/src/YForm/component/OneLine.tsx    |  26 +-
 packages/yforms/src/YForm/component/Space.tsx |  31 ++
 .../yforms/src/YForm/component/Submit.tsx     |   7 -
 .../yforms/src/YForm/component/TextArea.tsx   |  23 --
 packages/yforms/src/YForm/index.less          |   9 +
 packages/yforms/src/YForm/index.ts            |   4 +-
 packages/yforms/src/YForm/scenes.tsx          | 102 ++++--
 packages/yforms/src/YForm/scenesComps.tsx     |  54 ++++
 packages/yforms/src/YForm/utils.ts            |  22 +-
 now.json => vercel.json                       |   0
 44 files changed, 1303 insertions(+), 492 deletions(-)
 rename .github/workflows/{now.yml => vercel.yml} (84%)
 create mode 100644 docs/examples/demo/diff.tsx
 create mode 100644 docs/types/demo/space.tsx
 create mode 100644 docs/types/space.md
 create mode 100644 packages/yforms/src/YForm/ItemsTypeModify.tsx
 create mode 100644 packages/yforms/src/YForm/component/Diff.tsx
 create mode 100644 packages/yforms/src/YForm/component/Space.tsx
 create mode 100644 packages/yforms/src/YForm/scenesComps.tsx
 rename now.json => vercel.json (100%)

diff --git a/.eslintrc.js b/.eslintrc.js
index b0ea627..41de9b7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,47 +1,24 @@
 module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'react-hooks'],
-  extends: ['airbnb-typescript', 'prettier/@typescript-eslint'],
+  plugins: ['react-hooks'],
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   rules: {
     'react-hooks/rules-of-hooks': 'error', // 检查 Hook 的规则
     'react-hooks/exhaustive-deps': 'error', // 检查 effect 的依赖
-    'jsx-a11y/heading-has-content': 0,
-    'react/destructuring-assignment': 0,
-    'react/prop-types': 0,
-    'jsx-a11y/label-has-associated-control': 0,
-    'arrow-body-style': 0,
-    'import/no-extraneous-dependencies': 0,
-    'no-param-reassign': 0,
-    'object-curly-newline': 0,
-    'import/prefer-default-export': 0,
-    'react/jsx-indent': 0,
-    'react/jsx-indent-props': 0,
-    'comma-dangle': 0,
-    'no-template-curly-in-string': 0,
-    'implicit-arrow-linebreak': 0,
-    'react/jsx-one-expression-per-line': 0,
-    'import/no-cycle': 0,
+    'import/no-unresolved': 0,
     'no-underscore-dangle': 0,
-    'consistent-return': 0,
-    'max-len': 0,
-    'operator-linebreak': 0,
-    'no-shadow': 0,
-    'prefer-promise-reject-errors': 0,
-    'no-else-return': 0,
+    'import/no-extraneous-dependencies': 0,
+    'global-require': 0,
+    'import/no-dynamic-require': 0,
+    'react/sort-comp': 0,
+    'jsx-a11y/aria-role': 0,
     'no-void': 0,
+    'no-param-reassign': 0,
     'no-control-regex': 0,
     'no-plusplus': 0,
+    'consistent-return': 0,
+    'no-template-curly-in-string': 0,
+    'prefer-promise-reject-errors': 0,
     'no-lonely-if': 0,
-    'no-undef': 0,
-    'no-tabs': 0,
-    'no-mixed-spaces-and-tabs': 0,
-    'import/no-unresolved': [0],
-    'no-unused-expressions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/anchor-is-valid': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'arrow-parens': 0,
-    '@typescript-eslint/camelcase': 0,
+    'no-shadow': 0,
   },
 };
diff --git a/.github/workflows/now.yml b/.github/workflows/vercel.yml
similarity index 84%
rename from .github/workflows/now.yml
rename to .github/workflows/vercel.yml
index d95ca98..761f09b 100644
--- a/.github/workflows/now.yml
+++ b/.github/workflows/vercel.yml
@@ -16,4 +16,4 @@ jobs:
         run: |
           yarn
           yarn doc:build
-          now --token=$ZEIT_TOKEN --prod --confirm --force
+          vercel --token=$ZEIT_TOKEN --prod --confirm --force
diff --git a/docs/apis/hooks.md b/docs/apis/hooks.md
index 12b26d7..4dcc2a5 100644
--- a/docs/apis/hooks.md
+++ b/docs/apis/hooks.md
@@ -46,7 +46,7 @@ export default () => {
 
   onFormatFieldsValue([
     { name: 'append_field', format: () => '追加字段' },
-    { name: 'name', format: ({ name }) => `${name}_改变字段值` },
+    { name: 'name', format: (value) => `${value}_改变字段值` },
   ]);
 
   return (
@@ -104,7 +104,7 @@ export default () => {
   return (
     <>
       <h4>{typeName}</h4>
-      <YForm {...layout} required onFinish={onFinish} submit={submit} params={{ type: 'create' }}>
+      <YForm {...layout} onFinish={onFinish} submit={submit} params={{ type: 'create' }}>
         {[{ type: 'input', label: '姓名', name: 'name' }, { type: 'submit' }]}
       </YForm>
     </>
diff --git a/docs/apis/index.md b/docs/apis/index.md
index 6d456f7..5ec7238 100644
--- a/docs/apis/index.md
+++ b/docs/apis/index.md
@@ -17,7 +17,6 @@ nav:
 | -------- | ---------------- | -------------------------- | ------ |
 | isShow   | 是否渲染         | boolean                    | -      |
 | disabled | 字段是否全部禁用 | boolean                    | -      |
-| required | 字段是否全部必填 | boolean                    | -      |
 | children | 数据源           | YFormItemProps['children'] | -      |
 
 ## YForm
diff --git a/docs/examples/demo/demo1.tsx b/docs/examples/demo/demo1.tsx
index 4cba02b..cf9e3cf 100644
--- a/docs/examples/demo/demo1.tsx
+++ b/docs/examples/demo/demo1.tsx
@@ -68,7 +68,6 @@ const Demo = () => {
       onSave={onSave}
       scenes={{ view: disabled }}
       params={{ type: 'view' }}
-      required
     >
       {[
         // {
@@ -176,18 +175,23 @@ const Demo = () => {
         { label: '文本', name: 'text', type: 'text' },
         {
           label: '自定义渲染',
-          showType: 'input',
           type: 'custom',
           name: 'custom',
           component: <Input />,
         },
-        { type: 'submit' },
         {
-          type: 'button',
-          componentProps: {
-            onClick: () => message.success(JSON.stringify(form.getFormatFieldsValue())),
-            children: '获取提交前数据',
-          },
+          type: 'space',
+          items: [
+            { type: 'submit' },
+            {
+              type: 'button',
+              noStyle: true,
+              componentProps: {
+                onClick: () => message.success(JSON.stringify(form.getFormatFieldsValue())),
+                children: '获取提交前数据',
+              },
+            },
+          ],
         },
       ]}
     </YForm>
diff --git a/docs/examples/demo/demo3.tsx b/docs/examples/demo/demo3.tsx
index 79bf3f7..14a7bf2 100644
--- a/docs/examples/demo/demo3.tsx
+++ b/docs/examples/demo/demo3.tsx
@@ -21,9 +21,6 @@ const Demo: React.FC<RouteComponentProps> = () => {
     console.log('Failed:', errorInfo);
   };
 
-  const onSave = async (values: any) => {
-    console.log('values:', values);
-  };
   return (
     <>
       <Button type="link" onClick={() => setVisible(true)}>
@@ -40,9 +37,7 @@ const Demo: React.FC<RouteComponentProps> = () => {
       >
         <YForm
           {...layout}
-          required
           onFinish={onFinish}
-          onSave={onSave}
           onFinishFailed={onFinishFailed}
           onCancel={handleCancel}
           params={{ type: 'create' }}
@@ -51,12 +46,7 @@ const Demo: React.FC<RouteComponentProps> = () => {
             {[{ type: 'input', name: 'age', label: '姓名' }]}
           </YForm.Items>
           <YForm.Items className="ant-modal-footer">
-            {[
-              {
-                type: 'submit',
-                componentProps: { reverseBtns: true, showBtns: { showSave: false } },
-              },
-            ]}
+            {[{ type: 'submit', className: 'mb0', componentProps: { reverseBtns: true } }]}
           </YForm.Items>
         </YForm>
       </Modal>
diff --git a/docs/examples/demo/diff.tsx b/docs/examples/demo/diff.tsx
new file mode 100644
index 0000000..c1ee0df
--- /dev/null
+++ b/docs/examples/demo/diff.tsx
@@ -0,0 +1,291 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-console */
+import React, { useState, useEffect } from 'react';
+import { YForm } from 'yforms';
+import { message, Input } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import { omit } from 'lodash';
+import { YFormItemProps } from 'yforms/lib/YForm/Items';
+
+moment.locale('zh-cn');
+
+const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
+const options = [
+  { id: '1', name: '语文' },
+  { id: '2', name: '数学' },
+];
+
+const initialValues = {
+  name: '张三',
+  age: '10',
+  文本域: '这里是长文本',
+  text: '这里是文本',
+  custom: '这里是自定义文本',
+  money: '999999999',
+  单选: true,
+  开关: true,
+  多选: ['1', '2'],
+  下拉框多选: ['1', '2'],
+  下拉框: '1',
+  单选按钮: '1',
+  users: [
+    { name: '张三', age: '10' },
+    { name: '李四', age: '20' },
+  ],
+  // phones: [{ phone: '17777777777', users: [{ name: 'aaa' }] }, { phone: '18888888888' }],
+  phones: [
+    { phone: '17777777777', users: [{ name: 'aaa' }] },
+    // { phone: '18888888888' },
+    { phone: '18888888888' },
+  ],
+  date: moment(),
+  range: [moment(), moment()],
+};
+const oldValues = {
+  name: '张三1',
+  phones: [
+    { phone: '17777777777', users: [{ name: 'aaa' }, { name: 'bbb' }] },
+    { phone: '18888888881' },
+    { phone: '18888888888', users: [{ name: '被删掉的' }] },
+  ],
+  users: [{ name: '李四2', age: '30' }],
+  多选: ['1'],
+  money: '999999998',
+  下拉框: '2',
+  单选: true,
+  单选按钮: '2',
+  文本域: '这里是长文本2',
+  下拉框多选: ['2'],
+  date: moment('2020-01-01 12:00:00'),
+  range: [moment('2020-01-01 12:00:00'), moment('2020-01-01 12:00:00')],
+};
+
+const Demo = () => {
+  const [data, setData] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [form] = YForm.useForm();
+
+  const { submit, disabled } = YForm.useSubmit();
+
+  useEffect(() => {
+    setTimeout(() => {
+      setData(initialValues);
+      setLoading(false);
+    }, 10);
+  }, []);
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+  const onSave = (values: any) => {
+    console.log('values:', values);
+  };
+
+  return (
+    <YForm
+      {...layout}
+      form={form}
+      submit={submit}
+      name="basic"
+      initialValues={{
+        ...data,
+        // _old_fields: oldValues
+      }}
+      onFinish={onFinish}
+      loading={loading}
+      onFinishFailed={onFinishFailed}
+      onSave={onSave}
+      onCancel={({ changeDisabled }) => changeDisabled(!disabled)}
+      scenes={{ view: disabled, diff: true }}
+      params={{ type: 'create' }}
+      diffProps={{ oldValues }}
+    >
+      {[
+        // {
+        //   type: 'button',
+        //   scenes: { disabled: false },
+        //   componentProps: { onClick: () => setView((c) => !c), children: '查看表单' },
+        // },
+        {
+          type: 'button',
+          scenes: { disabled: false },
+          componentProps: { onClick: () => form.resetFields(), children: '重置表单' },
+        },
+        // { type: 'custom', component: 1, label: 'xx' },
+        // { type: 'input', label: '空值', name: 'names' },
+        { type: 'input', label: '姓名', name: 'name' },
+        {
+          type: 'list',
+          name: 'phones',
+          componentProps: { showIcons: { showBottomAdd: { text: '添加手机号' } } },
+          items: ({ index }): YFormItemProps['children'] => {
+            return [
+              {
+                label: index === 0 && '手机号',
+                type: 'input',
+                name: [index, 'phone'],
+                rules: [{ required: true, message: '请输入手机号' }],
+                componentProps: { placeholder: '请输入手机号' },
+              },
+              {
+                label: '用户',
+                type: 'list',
+                offset: 2,
+                name: [index, 'users'],
+                items: ({ index }): YFormItemProps['children'] => [
+                  {
+                    type: 'oneLine',
+                    componentProps: { oneLineStyle: ['50%', 8, '50%'] },
+                    items: (): YFormItemProps['children'] => [
+                      { label: '姓名', type: 'input', name: [index, 'name'] },
+                      <span key="center" />,
+                      { label: '年龄', type: 'input', name: [index, 'age'] },
+                    ],
+                  },
+                ],
+              },
+            ];
+          },
+        },
+        // {
+        //   label: '用户',
+        //   type: 'list',
+        //   name: 'users',
+        //   items: ({ index }) => {
+        //     return [
+        //       {
+        //         type: 'oneLine',
+        //         componentProps: { oneLineStyle: ['50%', 8, '50%'] },
+        //         items: () => [
+        //           { label: '姓名', type: 'input', name: [index, 'name'] },
+        //           <span key="center" />,
+        //           { label: '年龄', type: 'input', name: [index, 'age'] },
+        //         ],
+        //       },
+        //     ];
+        //   },
+        // },
+        // {
+        //   type: 'input',
+        //   label: '姓名',
+        //   name: 'name',
+        //   format: (value) => `${value} 修改了`,
+        // },
+        // {
+        //   type: 'datePicker',
+        //   label: '日期',
+        //   name: 'date',
+        //   // initialValue: moment('2020-01-01 12:00:00'),
+        //   // componentProps: { showTime: true },
+        //   componentProps: { picker: 'quarter' },
+        //   // viewProps: { format: (value) => moment(value).format('YYYY-MM-DD') },
+        //   // format: ({ date }) => moment(date).format('YYYY-MM-DD'),
+        //   // unFormat: () => moment('2021-01-01 12:00:00'),
+        // },
+        // { label: '开关', type: 'radio', name: 'type', componentProps: { options } },
+        // {
+        //   label: '精简使用',
+        //   type: 'input',
+        //   name: 'children_field2',
+        //   format: ({ date }) => moment(date).format('YYYY-MM-DD'),
+        //   shouldUpdate: (prevValues, curValues) => prevValues.type !== curValues.type,
+        //   isShow: (values) => values.type === '2',
+        // },
+        // {
+        //   type: 'rangePicker',
+        //   label: '日期区间',
+        //   name: 'range',
+        //   scenes: { required: false },
+        //   // format: (value = []) => {
+        //   //   return `${moment(value[0]).format('YYYY-MM-DD')}-${moment(value[1]).format(
+        //   //     'YYYY-MM-DD',
+        //   //   )}`;
+        //   // },
+        //   format: (value = []) => {
+        //     return {
+        //       start: `${moment(value[0]).format('YYYY-MM-DD')}-${moment(value[1]).format(
+        //         'YYYY-MM-DD',
+        //       )}`,
+        //     };
+        //   },
+        //   // format: [
+        //   //   { name: 'range', format: () => undefined },
+        //   //   { name: 'start', format: (_, { range }) => moment(range[0]).format('YYYY-MM-DD') },
+        //   //   { name: 'end', format: (_, { range }) => moment(range[1]).format('YYYY-MM-DD') },
+        //   // ],
+        // },
+        // {
+        //   type: 'money',
+        //   label: '金额',
+        //   componentProps: { addonAfter: '其它', suffix: '元' },
+        //   name: 'money',
+        // },
+        // { type: 'textarea', label: '文本域', name: '文本域', componentProps: { inputMax: 2 } },
+        // { type: 'checkbox', label: '单选', name: '单选', componentProps: { children: '已阅读' } },
+        // {
+        //   type: 'checkboxGroup',
+        //   label: '多选',
+        //   name: '多选',
+        //   componentProps: { options },
+        // },
+        // {
+        //   type: 'switch',
+        //   label: '开关',
+        //   name: '开关',
+        //   componentProps: { checkedChildren: '开', unCheckedChildren: '关' },
+        // },
+        // {
+        //   type: 'select',
+        //   label: '下拉框',
+        //   name: '下拉框',
+        //   componentProps: {
+        //     // optionLabelProp: 'checked-value',
+        //     // onAddProps: (item) => ({ 'checked-value': `(${item.name})` }),
+        //     // // onAddProps: (item) => ({ 'checked-value': <span>({item.name})</span> }),
+        //     // showField: (record) => `${record.id}-${record.name}`,
+        //     options,
+        //   },
+        // },
+        // {
+        //   type: 'select',
+        //   label: '下拉框多选',
+        //   name: '下拉框多选',
+        //   componentProps: { mode: 'multiple', options },
+        // },
+        // {
+        //   type: 'radio',
+        //   label: '单选按钮',
+        //   name: '单选按钮',
+        //   componentProps: { showField: (record) => `${record.id}-${record.name}`, options },
+        // },
+        // { label: '文本', name: 'text', type: 'text' },
+        // {
+        //   label: '自定义渲染',
+        //   type: 'custom',
+        //   name: 'custom',
+        //   component: <Input />,
+        // },
+        { type: 'submit' },
+        // {
+        //   type: 'button',
+        //   componentProps: {
+        //     onClick: () => message.success(JSON.stringify(form.getFormatFieldsValue())),
+        //     children: '获取提交前数据',
+        //   },
+        // },
+        // {
+        //   type: 'button',
+        //   componentProps: {
+        //     onClick: () => setIsShow((c) => !c),
+        //     children: '获取提交前数据',
+        //   },
+        // },
+      ]}
+    </YForm>
+  );
+};
+export default Demo;
diff --git a/docs/examples/demo/edit.tsx b/docs/examples/demo/edit.tsx
index e3dd8ea..c4c6458 100644
--- a/docs/examples/demo/edit.tsx
+++ b/docs/examples/demo/edit.tsx
@@ -33,7 +33,7 @@ const Demo: React.FC<RouteComponentProps> = (props) => {
 
   onFormatFieldsValue([
     { name: 'append_field', format: () => '提交前追加字段' },
-    { name: 'name', format: ({ name }) => `${name}_改变了` },
+    { name: 'name', format: (value) => `${value}_改变了` },
   ]);
 
   const onFinish = async (values: any) => {
@@ -72,7 +72,6 @@ const Demo: React.FC<RouteComponentProps> = (props) => {
         name="basic"
         onFinish={onFinish}
         onFinishFailed={onFinishFailed}
-        required
         formatFieldsValue={formatFieldsValue}
         loading={loading}
         onSave={onSave}
diff --git a/docs/examples/demo/search.tsx b/docs/examples/demo/search.tsx
index 3ff10e8..d29b7c3 100644
--- a/docs/examples/demo/search.tsx
+++ b/docs/examples/demo/search.tsx
@@ -64,7 +64,7 @@ export default () => {
         <QueueAnim type={['top', 'top']}>{expand && <Row key="必须">{fieldDom2}</Row>}</QueueAnim>
       </YForm>
       <p>普通场景</p>
-      <YForm required {...layout} name="base_form" onFinish={onFinish}>
+      <YForm {...layout} name="base_form" onFinish={onFinish}>
         {fieldDom}
         {fieldDom2}
         {[{ type: 'submit' }]}
diff --git a/docs/examples/demo/shouldUpdate.tsx b/docs/examples/demo/shouldUpdate.tsx
index edade2a..720d96a 100644
--- a/docs/examples/demo/shouldUpdate.tsx
+++ b/docs/examples/demo/shouldUpdate.tsx
@@ -10,7 +10,7 @@ const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
 
 const Demo = () => {
   return (
-    <YForm {...layout} name="basic" required initialValues={{ type: '1' }}>
+    <YForm {...layout} name="basic" initialValues={{ type: '1' }}>
       {[
         {
           label: '开关',
@@ -59,7 +59,7 @@ const Demo = () => {
           type: 'input',
           name: 'children_field2',
           shouldUpdate: (prevValues, curValues) => prevValues.type !== curValues.type,
-          isShow: values => values.type === '2',
+          isShow: (values) => values.type === '2',
         },
       ]}
     </YForm>
diff --git a/docs/examples/index.md b/docs/examples/index.md
index cfeba06..9bd479e 100644
--- a/docs/examples/index.md
+++ b/docs/examples/index.md
@@ -10,3 +10,15 @@ nav:
 ## 基础使用
 
 <code src="./demo/demo1.tsx" />
+
+## 弹窗使用
+
+<code src="./demo/demo3.tsx" />
+
+## 依赖使用
+
+<code src="./demo/shouldUpdate.tsx" />
+
+## 新旧数据对比使用
+
+<code src="./demo/diff.tsx" />
diff --git a/docs/types/demo/index.tsx b/docs/types/demo/index.tsx
index 682b8f1..d3df579 100644
--- a/docs/types/demo/index.tsx
+++ b/docs/types/demo/index.tsx
@@ -17,7 +17,7 @@ export default () => {
   };
 
   return (
-    <YForm {...layout} required onFinish={onFinish} onFinishFailed={onFinishFailed} onSave={onSave}>
+    <YForm {...layout} onFinish={onFinish} onFinishFailed={onFinishFailed} onSave={onSave}>
       {[
         { type: 'input', label: '文本', name: 'input' },
         { type: 'money', label: '金额', name: 'money' },
@@ -52,8 +52,8 @@ export default () => {
           name: '下拉框',
           componentProps: {
             optionLabelProp: 'checkedValue',
-            onAddProps: item => ({ checkedValue: `(${item.name})` }),
-            showField: record => (
+            onAddProps: (item) => ({ checkedValue: `(${item.name})` }),
+            showField: (record) => (
               <div>
                 <div>{record.id}</div>-{record.name}
               </div>
@@ -69,7 +69,7 @@ export default () => {
           label: '开关',
           name: '开关',
           componentProps: {
-            showField: record => `${record.id}-${record.name}`,
+            showField: (record) => `${record.id}-${record.name}`,
             postField: 'id',
             options: [
               { id: '1', name: '开' },
diff --git a/docs/types/demo/list.tsx b/docs/types/demo/list.tsx
index 4f00c9d..e644ed9 100644
--- a/docs/types/demo/list.tsx
+++ b/docs/types/demo/list.tsx
@@ -16,7 +16,6 @@ export default () => {
   return (
     <YForm
       onFinish={onFinish}
-      required
       {...layout}
       disabled={disabled}
       initialValues={{ phones: [{}, {}], card: [{}], users: [{}] }}
diff --git a/docs/types/demo/oneLine.tsx b/docs/types/demo/oneLine.tsx
index 15ea1a9..f0b02c9 100644
--- a/docs/types/demo/oneLine.tsx
+++ b/docs/types/demo/oneLine.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
 import { YForm } from 'yforms';
-import { YFormOneLineProps } from 'yforms/lib/YForm/component/OneLine';
+import { YFormItemProps } from 'yforms/lib/YForm/Items';
 
 const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
 
 export default () => {
   return (
-    <YForm {...layout} required>
+    <YForm {...layout}>
       {[
         {
           label: '用户 1',
           type: 'oneLine',
+          // name: 'xxx',
           componentProps: { oneLineStyle: ['50%', 8, '50%'] },
-          items: (): ReturnType<Required<YFormOneLineProps>['items']> => [
+          items: (): YFormItemProps['children'] => [
             { label: '姓名', type: 'input', name: 'name' },
             <span key="center" />,
             { label: '年龄', type: 'input', name: 'age' },
@@ -22,15 +23,14 @@ export default () => {
           label: '用户 2',
           type: 'oneLine',
           componentProps: { oneLineStyle: ['50%', 8, '50%'] },
-          items: ({ style }): ReturnType<Required<YFormOneLineProps>['items']> => {
+          items: ({ style }): YFormItemProps['children'] => {
             return [
               { label: '姓名', type: 'input', name: 'name2' },
               <span key="center" />,
               {
                 noStyle: true,
                 shouldUpdate: true,
-                scenes: { noCol: true },
-                children: () => {
+                children: (): YFormItemProps['children'] => {
                   return [{ style: style[2], label: '年龄', type: 'input', name: 'age2' }];
                 },
               },
diff --git a/docs/types/demo/secureButton.tsx b/docs/types/demo/secureButton.tsx
index 4851373..01ac082 100644
--- a/docs/types/demo/secureButton.tsx
+++ b/docs/types/demo/secureButton.tsx
@@ -14,7 +14,7 @@ export default () => {
     console.log('ok');
   };
   return (
-    <YForm {...layout} required onFinish={onFinish}>
+    <YForm {...layout} onFinish={onFinish}>
       {[{ type: 'secureButton', componentProps: { children: '测试', onClick } }]}
     </YForm>
   );
diff --git a/docs/types/demo/space.tsx b/docs/types/demo/space.tsx
new file mode 100644
index 0000000..5356003
--- /dev/null
+++ b/docs/types/demo/space.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { YForm } from 'yforms';
+
+const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
+
+export default () => {
+  return (
+    <YForm {...layout}>
+      {[
+        {
+          label: '用户',
+          type: 'space',
+          items: [
+            { label: '姓名', type: 'input', name: 'name2' },
+            { label: '年龄', type: 'input', name: 'age2' },
+          ],
+        },
+        {
+          type: 'space',
+          items: [
+            { type: 'button', componentProps: { children: '确定', type: 'primary' } },
+            { type: 'button', componentProps: { children: '取消' } },
+          ],
+        },
+      ]}
+    </YForm>
+  );
+};
diff --git a/docs/types/demo/submit.tsx b/docs/types/demo/submit.tsx
index cf1abfa..81e749e 100644
--- a/docs/types/demo/submit.tsx
+++ b/docs/types/demo/submit.tsx
@@ -9,7 +9,7 @@ export default () => {
     console.log('Success:', values);
   };
   return (
-    <YForm {...layout} required onFinish={onFinish}>
+    <YForm {...layout} onFinish={onFinish}>
       {[{ type: 'input', label: '姓名', name: 'name' }, { type: 'submit' }]}
     </YForm>
   );
diff --git a/docs/types/space.md b/docs/types/space.md
new file mode 100644
index 0000000..51bd4d5
--- /dev/null
+++ b/docs/types/space.md
@@ -0,0 +1,25 @@
+---
+title: space
+nav:
+  title: Type
+---
+
+# space
+
+内联样式。
+
+## 何时使用
+
+- 需要一行显示多个元素的时候。
+
+## 用例
+
+<code src="./demo/space.tsx" />
+
+## API
+
+| 参数  | 说明                | 类型 | 默认值 |
+| ----- | ------------------- | ---- | ------ |
+| items | YForm children 类型 | -    | -      |
+
+[componentProps](https://ant-design.gitee.io/components/space-cn/#API)
diff --git a/package.json b/package.json
index 15e0e57..af62ae9 100644
--- a/package.json
+++ b/package.json
@@ -36,55 +36,58 @@
     }
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
-    "@babel/polyfill": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+    "@babel/polyfill": "^7.10.1",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/react-hooks": "^3.1.1",
-    "@types/classnames": "^2.2.9",
+    "@testing-library/react": "^10.2.1",
+    "@testing-library/react-hooks": "^3.3.0",
+    "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.3",
-    "@types/lodash": "^4.14.149",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/react-test-renderer": "^16.0.3",
+    "@types/lodash": "^4.14.155",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-test-renderer": "^16.9.2",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.13.0",
-    "@typescript-eslint/parser": "^2.18.0",
-    "@umijs/fabric": "^2.0.3",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
+    "@umijs/fabric": "^2.1.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
     "conventional-changelog": "^3.1.21",
     "cross-env": "^7.0.2",
-    "dumi": "^1.0.25",
+    "dumi": "^1.0.31",
     "enzyme": "^3.11.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.2.0",
     "eslint-config-umi": "^1.6.0",
-    "eslint-plugin-flowtype": "^5.1.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-flowtype": "^5.1.3",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.11.1",
-    "eslint-plugin-react-hooks": "^4.0.2",
-    "father-build": "^1.17.2",
-    "husky": "^4.2.3",
-    "lerna": "^3.20.2",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
+    "father-build": "^1.18.0",
+    "husky": "^4.2.5",
+    "lerna": "^3.22.0",
     "lerna-changelog": "^1.0.1",
-    "lint-staged": "^10.0.8",
+    "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",
-    "rc-util": "^4.19.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "rc-util": "^5.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.7.0",
-    "typescript": "^3.7.5",
-    "umi": "^3.1.4",
-    "umi-test": "^1.9.3"
+    "react-test-renderer": "^16.13.1",
+    "typescript": "^3.9.5",
+    "umi": "^3.2.3",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-jest": "^23.13.2",
+    "eslint-plugin-unicorn": "^20.1.0",
+    "umi-test": "^1.9.6"
   },
   "license": "MIT",
   "dependencies": {
-    "antd": "^4.2.4",
+    "antd": "^4.3.1",
     "rc-queue-anim": "^1.8.5"
   }
 }
diff --git a/packages/yforms/src/YForm/Context.ts b/packages/yforms/src/YForm/Context.ts
index 78e2f32..6ffc5ba 100644
--- a/packages/yforms/src/YForm/Context.ts
+++ b/packages/yforms/src/YForm/Context.ts
@@ -1,7 +1,14 @@
 import React from 'react';
 import { YFormProps } from './Form';
-import { YFormItemsProps } from './Items';
+import { YFormItemsProps, YFormItemProps } from './Items';
+import { YFormListItems } from './component/List';
 
 export const YFormContext = React.createContext<YFormProps>({});
 
+export const YFormListContent = React.createContext<{
+  isList?: boolean;
+  field?: YFormListItems['field'];
+  prefixName?: YFormItemProps['name'];
+}>({});
+
 export const YFormItemsContext = React.createContext<YFormItemsProps>({});
diff --git a/packages/yforms/src/YForm/Form.tsx b/packages/yforms/src/YForm/Form.tsx
index ad7bb9b..317b56d 100644
--- a/packages/yforms/src/YForm/Form.tsx
+++ b/packages/yforms/src/YForm/Form.tsx
@@ -29,14 +29,15 @@ export type YFormScene = {
 export interface YFormConfig {
   itemsType?: YFormItemsType;
   getScene?: { [key: string]: YFormScene };
-  scenes?: { base?: boolean; [key: string]: boolean };
-}
-
-export function useFormatFieldsValue<T = any>() {
-  const formatFieldsValue = useRef([]);
-  return {
-    onFormatFieldsValue: onFormatFieldsValue<T>(formatFieldsValue.current),
-    formatFieldsValue: formatFieldsValue.current,
+  scenes?: {
+    labelLayout?: boolean;
+    noCol?: boolean;
+    disabled?: boolean;
+    placeholder?: boolean;
+    view?: boolean;
+    diff?: boolean;
+    search?: boolean;
+    [key: string]: boolean;
   };
 }
 
@@ -57,10 +58,11 @@ export interface YFormInstance<T = any> extends FormInstance {
   getFormatFieldsValue?: (value?: T) => T;
 }
 
+type CancelType = 'onSave' | 'onSubmit' | 'onCancel';
+
 export interface YFormProps<T = any> extends FormProps, YFormConfig {
   isShow?: boolean;
   disabled?: boolean;
-  required?: boolean;
   loading?: boolean;
   form?: YFormInstance;
   submit?: YFormUseSubmitReturnProps['submit'];
@@ -71,8 +73,17 @@ export interface YFormProps<T = any> extends FormProps, YFormConfig {
   children?: YFormItemProps['children'];
   onSave?: (values: { [key: string]: any }) => void;
   submitComponentProps?: YFormSubmitProps;
-  onCancel?: (p: { type: 'onSave' | 'onSubmit' | 'onCancel' }) => void;
+  onCancel?: (p: { type: CancelType; changeDisabled: (disabled: boolean) => void }) => void;
   params?: ParamsType;
+  diffProps?: any;
+}
+
+export function useFormatFieldsValue<T = any>() {
+  const formatFieldsValue = useRef([]);
+  return {
+    onFormatFieldsValue: onFormatFieldsValue<T>(formatFieldsValue.current),
+    formatFieldsValue: formatFieldsValue.current,
+  };
 }
 
 // 全局默认值
@@ -101,7 +112,6 @@ const InternalForm = React.memo<YFormProps>((props) => {
 
   const {
     disabled,
-    required,
     loading,
     itemsType,
     children,
@@ -128,7 +138,7 @@ const InternalForm = React.memo<YFormProps>((props) => {
 
   // 改变状态
   const handleChangeDisabled = useCallback(
-    (disabled: boolean) => {
+    (disabled) => {
       setDisabled(disabled);
       if (submit) {
         submit.forceUpdate({ params: iParams, disabled });
@@ -152,10 +162,10 @@ const InternalForm = React.memo<YFormProps>((props) => {
     window.history.back();
   };
 
-  const handleReset: YFormProps['onCancel'] = useCallback(
+  const handleReset: (p: { type: CancelType }) => void = useCallback(
     ({ type }) => {
       if (typeof onCancel === 'function') {
-        onCancel({ type });
+        onCancel({ type, changeDisabled: handleChangeDisabled });
       } else {
         resetFields();
         if (create) {
@@ -236,9 +246,8 @@ const InternalForm = React.memo<YFormProps>((props) => {
         },
       },
     },
-    { ..._props, itemsType: _itemsTypeAll },
+    { ...omit(_props, ['name']), itemsType: _itemsTypeAll },
   );
-
   if ('isShow' in _props && !_props.isShow) {
     return null;
   }
@@ -249,10 +258,9 @@ const InternalForm = React.memo<YFormProps>((props) => {
       </div>
     );
   }
-
   return (
     <Form
-      {...omit(rest, ['scenes'])}
+      {...omit(rest, ['scenes', 'diffProps'])}
       form={form}
       className={classNames('yforms', className)}
       onFinish={handleOnFinish}
diff --git a/packages/yforms/src/YForm/ItemChildren.tsx b/packages/yforms/src/YForm/ItemChildren.tsx
index ef62cec..31ec056 100644
--- a/packages/yforms/src/YForm/ItemChildren.tsx
+++ b/packages/yforms/src/YForm/ItemChildren.tsx
@@ -1,39 +1,47 @@
 import React from 'react';
 import { Form } from 'antd';
-import { forEach, omit } from 'lodash';
+import { forEach, omit, isArray } from 'lodash';
 import { FormItemProps } from 'antd/lib/form';
 import { YFormItemProps } from './Items';
+import { YForm } from '..';
+
+export default React.memo<YFormItemProps & { _addonAfter?: React.ReactNode }>((props) => {
+  const context = React.useContext(YForm.ListContent);
+  const { isList, field } = context;
+
+  const { children, addonAfter, _addonAfter, addonBefore, isShow, ...rest } = props;
+  const { name } = rest;
 
-export default (props: YFormItemProps) => {
-  const { children, addonAfter, isShow, ...rest } = props;
-  const { shouldUpdate } = rest;
   let _required: boolean | undefined = false;
   // 根据 rules required 判断外部 Form.Item 是否必填
-  forEach(props.rules, item => {
+  forEach(props.rules, (item) => {
     if ('required' in item) _required = item.required;
   });
 
+  let itemProps = {};
+  if (isList) {
+    const _name = [...(isArray(name) ? name : [name])];
+    if (isArray(name) && typeof name[0] === 'number') {
+      _name[0] = 'keep';
+    }
+    itemProps = {
+      isListField: true,
+      fieldKey: [field.fieldKey, ..._name],
+    };
+  }
   const ItemDom = children ? (
     <Form.Item
       required={_required}
       {...omit(rest, ['name', 'rules', 'dependencies', 'shouldUpdate'])}
     >
-      <Form.Item noStyle {...rest}>
+      <>{addonBefore}</>
+      <Form.Item noStyle {...itemProps} {...rest}>
         {children as FormItemProps['children']}
       </Form.Item>
+      <>{_addonAfter}</>
       <>{addonAfter}</>
     </Form.Item>
   ) : null;
 
-  if (typeof isShow === 'function') {
-    return (
-      <Form.Item noStyle shouldUpdate={shouldUpdate}>
-        {form => {
-          return isShow(form.getFieldsValue()) && ItemDom;
-        }}
-      </Form.Item>
-    );
-  } else {
-    return ItemDom;
-  }
-};
+  return ItemDom;
+});
diff --git a/packages/yforms/src/YForm/Items.tsx b/packages/yforms/src/YForm/Items.tsx
index 614029c..ace8417 100644
--- a/packages/yforms/src/YForm/Items.tsx
+++ b/packages/yforms/src/YForm/Items.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, isValidElement } from 'react';
 import classNames from 'classnames';
 import warning from 'warning';
-import { find, omit, merge, forEach, isObject, isArray, mapKeys, get, pick } from 'lodash';
+import { omit, merge, forEach, isObject, isArray, mapKeys, get, pick } from 'lodash';
 import { FormItemProps } from 'antd/lib/form';
 
 import { YForm } from '..';
@@ -16,15 +16,13 @@ type isShowFunc = (values: any) => boolean;
 
 export interface YFormItemProps<T = any> extends Omit<FormItemProps, 'children'> {
   isShow?: boolean | isShowFunc;
-  required?: boolean;
   className?: string;
-  addonAfter?: React.ReactElement;
-  componentView?: React.ReactNode;
-  noField?: boolean;
+  addonAfter?: React.ReactNode;
+  addonBefore?: React.ReactNode;
   format?: FormatFieldsValue<T>['format'];
+  unFormat?: FormatFieldsValue<T>['format'];
   style?: React.CSSProperties;
   scenes?: YFormConfig['scenes'];
-  showType?: YFormFieldBaseProps['showType'];
   offset?: number;
   children?:
     | (YFormDataSource | YFormDataSource[] | boolean)[]
@@ -32,11 +30,14 @@ export interface YFormItemProps<T = any> extends Omit<FormItemProps, 'children'>
     | YFormRenderChildren
     | boolean;
   dataSource?: YFormItemProps['children'];
+  componentView?: React.ReactNode;
+  viewProps?: YFormFieldBaseProps['viewProps'];
+  diffProps?: any;
 }
 
 export interface FormatFieldsValue<T = any> {
   name: FormItemProps['name'];
-  format: (values: T) => any;
+  format: (value: any, values: T) => any;
 }
 
 // 内部使用，类型不重要
@@ -46,10 +47,13 @@ interface InternalYFormItemProps extends YFormItemProps {
   scenes?: any;
   component?: any;
   onSave?: any;
+  _addonAfter?: React.ReactNode;
 }
 
 export interface YFormItemsProps
-  extends Omit<YFormProps, 'loading' | 'itemsType' | 'formatFieldsValue'> {
+  extends Omit<YFormProps, 'loading' | 'itemsType' | 'formatFieldsValue' | 'isShow'> {
+  isShow?: YFormItemProps['isShow'];
+  shouldUpdate?: YFormItemProps['shouldUpdate'];
   offset?: number;
   noStyle?: boolean;
 }
@@ -60,9 +64,8 @@ const Items = (props: YFormItemsProps) => {
   const { itemsType } = formProps;
 
   let mergeProps = merge({}, formProps, itemsProps, props);
-  const { scenes, getScene, onFormatFieldsValue } = mergeProps;
-
-  const _defaultData = { formProps: props, itemsProps: props };
+  const { scenes, getScene, onFormatFieldsValue, shouldUpdate } = mergeProps;
+  const _defaultData = { formProps, itemsProps: props };
   mapKeys(scenes, (value: boolean, key: string) => {
     if (value && getScene[key] && getScene[key].items) {
       const data = getScene[key].items(_defaultData);
@@ -75,9 +78,10 @@ const Items = (props: YFormItemsProps) => {
   const _props = _defaultData.itemsProps;
   if ('isShow' in _props && !_props.isShow) return null;
 
-  const { children = [], className, style, noStyle } = _props;
+  const { isShow, children = [], className, style, noStyle } = _props;
 
   const list: React.ReactNode[] = [];
+  let offset = 0;
 
   const each = (lists: YFormItemsTypeArray<InternalYFormItemProps>[], pIndex?: number) => {
     forEach(lists, (item, index: number) => {
@@ -100,16 +104,21 @@ const Items = (props: YFormItemsProps) => {
 
         let _itemProps = { ...item };
         let _componentProps = { ...item.componentProps };
-
+        const typeProps = get(itemsType, item.type) || {};
+        typeProps.type = item.type;
         const defaultData = {
           formProps,
           itemsProps: mergeProps,
-          typeProps: itemsType[item.type] || {},
+          typeProps,
           itemProps: item,
-          componentProps: item.componentProps,
+          componentProps: _componentProps,
         };
         // 参数修改
         let _defaultData = defaultData;
+        const { modifyProps } = typeProps;
+        if (modifyProps) {
+          _defaultData = merge({}, defaultData, modifyProps(defaultData));
+        }
 
         const _scenes = merge({}, scenes, item.scenes);
         mapKeys(_scenes, (value: boolean, key: string) => {
@@ -124,27 +133,21 @@ const Items = (props: YFormItemsProps) => {
             }
           }
         });
-        const typeProps = get(itemsType, get(_defaultData, ['itemProps', 'type'])) || {};
-        const { modifyProps } = typeProps;
-        if (modifyProps) {
-          _defaultData = merge({}, defaultData, modifyProps(defaultData));
-        }
+
         _itemProps = _defaultData.itemProps;
         _componentProps = _defaultData.componentProps;
-        const _base = merge({}, formProps, itemsProps, _itemProps);
-        const {
-          type,
-          dataSource,
-          items,
-          addonAfter,
-          componentProps,
-          format,
-          ...formItemProps
-        } = _itemProps;
+        const _base = merge({}, mergeProps, _itemProps);
+        if (typeof _base.offset === 'number') {
+          offset += _base.offset;
+          _base.offset = offset;
+        }
+
+        const { type, dataSource, items, componentProps, format, ...formItemProps } = _itemProps;
 
         const _formItemProps = formItemProps;
-        const { name } = _formItemProps;
+        const { name, isShow, shouldUpdate } = _formItemProps;
 
+        // 提交前格式化
         if (format) {
           onFormatFieldsValue([{ name, format }]);
         }
@@ -153,27 +156,22 @@ const Items = (props: YFormItemsProps) => {
         // 默认用 FormItem 包裹
         let _hasFormItem = true;
 
-        let key: React.ReactText = _index;
-
         if (type && itemsType) {
           const _fieldData = itemsType[type];
           if (_fieldData) {
             const { component } = _fieldData;
             _hasFormItem = 'hasFormItem' in _fieldData ? _fieldData.hasFormItem : _hasFormItem;
 
-            const _key = name ? `${name}` : key;
-            key = find(list, { key: _key }) ? key : _key;
             // 包含 items 类型把当前 item 属性全部透传过去
             if (items) {
-              _componentProps = { ..._base, key };
+              _componentProps = { ..._base };
             }
             const _component = component || item.component;
             if (isValidElement(_component)) {
               const _props = component
                 ? { ...component.props, ..._componentProps } // 内置组件 componentProps 在后面
                 : { ..._componentProps, ...item.component.props }; // 自定义组件 componentProps 在前面
-              const _elementProps = { ..._props, _item_type: item.type };
-              _children = React.cloneElement(_component, _elementProps);
+              _children = React.cloneElement(_component, _props);
             } else {
               _children = _component;
             }
@@ -200,18 +198,29 @@ const Items = (props: YFormItemsProps) => {
                 );
               }
             : _children;
+        let dom;
         if (_hasFormItem) {
-          list.push(
+          dom = (
             <ItemChildren
-              key={key}
-              addonAfter={addonAfter}
-              {...omit(_formItemProps, ['component', 'scenes', 'showType'])}
+              key={_index}
+              {...omit(_formItemProps, ['component', 'scenes', 'viewProps', 'unFormat'])}
             >
               {domChildren}
-            </ItemChildren>,
+            </ItemChildren>
           );
         } else {
-          list.push(<React.Fragment key={key}>{domChildren}</React.Fragment>);
+          dom = <React.Fragment key={_index}>{domChildren}</React.Fragment>;
+        }
+        if (typeof isShow === 'function') {
+          list.push(
+            <YForm.Item key={_index} noStyle shouldUpdate={shouldUpdate}>
+              {(form) => {
+                return isShow(form.getFieldsValue()) && dom;
+              }}
+            </YForm.Item>,
+          );
+        } else {
+          list.push(dom);
         }
       } else {
         return list.push(item);
@@ -225,17 +234,25 @@ const Items = (props: YFormItemsProps) => {
     list.push(children);
   }
   const child = (
-    <YForm.YFormItemsContext.Provider value={omit(mergeProps, ['scenes'])}>
-      {list}
-    </YForm.YFormItemsContext.Provider>
+    <YForm.YFormItemsContext.Provider value={mergeProps}>{list}</YForm.YFormItemsContext.Provider>
   );
-  return noStyle ? (
+  const dom = noStyle ? (
     child
   ) : (
     <div className={classNames('yform-items', className)} style={style}>
       {child}
     </div>
   );
+  if (typeof isShow === 'function') {
+    return (
+      <YForm.Item noStyle shouldUpdate={shouldUpdate}>
+        {(form) => {
+          return isShow(form.getFieldsValue()) && dom;
+        }}
+      </YForm.Item>
+    );
+  }
+  return dom;
 };
 
-export default Items;
+export default React.memo(Items);
diff --git a/packages/yforms/src/YForm/ItemsType.tsx b/packages/yforms/src/YForm/ItemsType.tsx
index 6140deb..4d2ca36 100644
--- a/packages/yforms/src/YForm/ItemsType.tsx
+++ b/packages/yforms/src/YForm/ItemsType.tsx
@@ -6,40 +6,51 @@ import { SwitchProps } from 'antd/lib/switch';
 import { ButtonProps } from 'antd/lib/button';
 import { CheckboxProps } from 'antd/lib/checkbox';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
+import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
 
-import { DatePickerProps } from 'antd/lib/date-picker';
 import { YFormItemProps, YFormItemsProps } from './Items';
 import { searchSelect } from './utils';
-
 import CustomTypography from './component/Typography';
-import OneLine, {
-  YFormOneLineComponentProps,
-  YFormOneLineProps,
-  oneLineModify,
-} from './component/OneLine';
+import OneLine, { YFormOneLineComponentProps, YFormOneLineProps } from './component/OneLine';
 import Radio, { YRadioProps } from './component/Radio';
 import List, { YFormListComponentProps, YFormListProps } from './component/List';
 import CheckboxGroup, { YCheckGroupProps } from './component/CheckboxGroup';
 import Select, { YSelectProps } from './component/Select';
-import TextArea, { YTextAreaProps, textModify } from './component/TextArea';
+import TextArea, { YTextAreaProps } from './component/TextArea';
 import Money, { YMoneyProps } from './component/Money';
-import Submit, { YFormSubmitProps, submitModify } from './component/Submit';
+import Submit, { YFormSubmitProps } from './component/Submit';
 import SecureButton, { YFormSecureButtonProps } from './component/SecureButton';
 import { YFormProps, YFormConfig } from './Form';
 import ComponentView from './component/ComponentView';
+import {
+  datePickerModify,
+  rangePickerModify,
+  checkboxModify,
+  switchModify,
+  textModify,
+  oneLineModify,
+  submitModify,
+  checkboxGroupModify,
+  selectModify,
+  moneyModify,
+  radioModify,
+  SpaceModify,
+} from './ItemsTypeModify';
+import Space, { YFormSpaceComponentProps, YFormSpaceProps } from './component/Space';
 
 export interface YFormFieldBaseProps<T = any> {
   component?: React.ReactElement;
-  componentView?: React.ReactElement;
+  type?: string;
   formItemProps?: YFormItemProps;
   formatStr?: string;
-  showType?: 'input' | 'layout' | 'utils' | 'action';
-  noField?: boolean;
   hasFormItem?: boolean;
   scenes?: YFormConfig['scenes'];
   modifyProps?: (
     props: Required<modifyType<T>>,
   ) => Pick<modifyType<T>, 'itemProps' | 'componentProps'>;
+  componentView?: React.ReactElement;
+  viewProps?: { format?: (value: any, pureValue?: boolean) => React.ReactNode };
+  diffProps?: any;
 }
 
 export type modifyType<T = any> = {
@@ -74,6 +85,7 @@ export interface YFormItemsTypeDefine {
   input: { componentProps?: InputProps };
   view: { componentProps?: any };
   datePicker: { componentProps?: DatePickerProps };
+  rangePicker: { componentProps?: RangePickerProps };
   password: { componentProps?: PasswordProps };
   textarea: { componentProps?: YTextAreaProps };
   money: { componentProps?: YMoneyProps };
@@ -87,7 +99,14 @@ export interface YFormItemsTypeDefine {
   button: { componentProps?: ButtonProps };
   // 其它功能类型
   oneLine: { componentProps?: YFormOneLineComponentProps; items?: YFormOneLineProps['items'] };
-  list: { componentProps?: YFormListComponentProps; items?: YFormListProps['items'] };
+  space: { componentProps?: YFormSpaceComponentProps; items?: YFormSpaceProps['items'] };
+  list: {
+    componentProps?: YFormListComponentProps;
+    disabled?: boolean;
+    items?: YFormListProps['items'];
+    // 用于 diff 状态下处理数据
+    addonBefore?: React.ReactNode;
+  };
   custom: { componentProps?: any; component?: React.ReactNode };
   submit: { componentProps?: YFormSubmitProps };
   secureButton: { componentProps?: YFormSecureButtonProps };
@@ -97,65 +116,50 @@ export type YFormItemsType<T = YFormFieldBaseProps> = {
   [P in keyof YFormItemsTypeDefine]?: { type?: P } & YFormItemsTypeDefine[P] & T;
 };
 
-const checkboxProps: YFormFieldBaseProps<CheckboxProps>['modifyProps'] = ({ itemProps }) => {
-  return { itemProps: { valuePropName: 'checked', ...itemProps } };
-};
-
-const switchProps: YFormFieldBaseProps<SwitchProps>['modifyProps'] = ({ itemProps }) => {
-  return { itemProps: { valuePropName: 'checked', ...itemProps } };
-};
-
 export type YFormItemsTypeArray<T> = YFormItemsType<T>[keyof YFormItemsType];
 
 export const itemsType: YFormItemsType = {
-  input: { showType: 'input', component: <Input />, formatStr: '请输入${label}' },
-  datePicker: { showType: 'input', component: <DatePicker />, formatStr: '请选择${label}' },
-  password: { showType: 'input', component: <Input.Password />, formatStr: '请输入${label}' },
-  textarea: {
-    showType: 'input',
-    component: <TextArea />,
-    formatStr: '请输入${label}',
-    modifyProps: textModify,
+  // 纯文本类
+  input: { component: <Input />, formatStr: '请输入${label}' },
+  password: { component: <Input.Password />, formatStr: '请输入${label}' },
+  textarea: { component: <TextArea />, formatStr: '请输入${label}', modifyProps: textModify },
+  money: { component: <Money />, formatStr: '请输入${label}', modifyProps: moneyModify },
+  text: { component: <CustomTypography />, formatStr: '请输入${label}' },
+  // 日期类
+  datePicker: {
+    component: <DatePicker />,
+    formatStr: '请选择${label}',
+    modifyProps: datePickerModify,
   },
-  money: { showType: 'input', component: <Money />, formatStr: '请输入${label}' },
-  checkbox: {
-    showType: 'input',
-    component: <Checkbox />,
+  rangePicker: {
+    component: <DatePicker.RangePicker />,
     formatStr: '请选择${label}',
-    modifyProps: checkboxProps,
+    modifyProps: rangePickerModify,
   },
-  switch: {
-    showType: 'input',
-    component: <Switch />,
+  // 单选复选类
+  checkbox: { component: <Checkbox />, formatStr: '请选择${label}', modifyProps: checkboxModify },
+  switch: { component: <Switch />, formatStr: '请选择${label}', modifyProps: switchModify },
+  checkboxGroup: {
+    component: <CheckboxGroup />,
     formatStr: '请选择${label}',
-    modifyProps: switchProps,
+    modifyProps: checkboxGroupModify,
   },
-  checkboxGroup: { showType: 'input', component: <CheckboxGroup />, formatStr: '请选择${label}' },
-  radio: { showType: 'input', component: <Radio />, formatStr: '请选择${label}' },
+  radio: { component: <Radio />, modifyProps: radioModify },
   select: {
-    showType: 'input',
     component: <Select {...searchSelect} />,
     formatStr: '请选择${label}',
+    modifyProps: selectModify,
   },
-  text: { showType: 'input', component: <CustomTypography /> },
-  oneLine: {
-    showType: 'layout',
-    component: <OneLine />,
-    modifyProps: oneLineModify,
-    noField: true,
-  },
-  list: { showType: 'layout', component: <List />, hasFormItem: false, noField: true },
-  button: { showType: 'action', component: <Button />, noField: true },
-  secureButton: { showType: 'action', component: <SecureButton />, noField: true },
-  custom: { showType: 'layout', formatStr: '请输入${label}', noField: true },
-  submit: {
-    showType: 'utils',
-    component: <Submit />,
-    hasFormItem: false,
-    modifyProps: submitModify,
-    noField: true,
-  },
+  // 工具类
+  oneLine: { component: <OneLine />, modifyProps: oneLineModify },
+  list: { component: <List />, hasFormItem: false },
+  button: { component: <Button /> },
+  secureButton: { component: <SecureButton /> },
+  submit: { component: <Submit />, hasFormItem: false, modifyProps: submitModify },
+  // 展示类
+  custom: {},
   view: { component: <ComponentView /> },
+  space: { component: <Space />, modifyProps: SpaceModify },
 };
 
 export default itemsType;
diff --git a/packages/yforms/src/YForm/ItemsTypeModify.tsx b/packages/yforms/src/YForm/ItemsTypeModify.tsx
new file mode 100644
index 0000000..052e5c6
--- /dev/null
+++ b/packages/yforms/src/YForm/ItemsTypeModify.tsx
@@ -0,0 +1,302 @@
+import React from 'react';
+import { Tag } from 'antd';
+import moment, { isMoment } from 'moment';
+import { CheckboxProps } from 'antd/lib/checkbox';
+import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
+import { PickerPanelDateProps } from 'antd/lib/calendar/generateCalendar';
+import { PickerMode } from 'rc-picker/lib/interface';
+import { SwapRightOutlined } from '@ant-design/icons';
+import { SwitchProps } from 'antd/lib/switch';
+import Numbro from 'numbro';
+import classNames from 'classnames';
+import { isArray, map, includes } from 'lodash';
+import { YFormFieldBaseProps } from './ItemsType';
+import { YTextAreaProps } from './component/TextArea';
+import { calculateStrLength } from './utils';
+import { YFormOneLineProps } from './component/OneLine';
+import { YFormSubmitProps } from './component/Submit';
+import { YCheckGroupProps } from './component/CheckboxGroup';
+import { YSelectProps } from './component/Select';
+import { YMoneyProps } from './component/Money';
+import { YRadioProps } from './component/Radio';
+import { YFormSpaceProps } from './component/Space';
+
+const noData = <span style={{ color: '#ccc' }}>-/-</span>;
+
+const dateFormat = (
+  value?: any,
+  props?: { picker?: PickerMode; format?: string | string[] },
+  type?: string,
+  pureValue?: boolean,
+) => {
+  const { picker = 'date', format } = props;
+  let _format;
+  if (format) {
+    _format = format;
+  } else if (picker === 'date') {
+    const { showTime } = props as PickerPanelDateProps<'date'>;
+    let timeFormat = '';
+    if (showTime) {
+      timeFormat = typeof showTime === 'boolean' ? 'HH:mm:ss' : showTime.format;
+    }
+    _format = timeFormat ? `YYYY-MM-DD ${timeFormat}` : 'YYYY-MM-DD';
+  } else if (picker === 'year') {
+    _format = 'YYYY';
+  } else if (picker === 'quarter') {
+    _format = 'YYYY-\\QQ';
+  } else if (picker === 'month') {
+    _format = 'YYYY-MM';
+  } else if (picker === 'week') {
+    _format = 'YYYY-wo';
+  } else if (picker === 'time') {
+    _format = 'HH:mm:ss';
+  }
+  const dateFormat = typeof _format === 'string' ? _format : _format[0];
+
+  if (type === 'datePicker') {
+    if (isMoment(value)) {
+      return moment(value).format(dateFormat);
+    }
+  } else if (type === 'rangePicker') {
+    const { separator } = props as any;
+    const [start, end] = value || [];
+    if (pureValue) {
+      return `${start && moment(start).format(dateFormat)}${end && moment(end).format(dateFormat)}`;
+    }
+    return (
+      value && (
+        <>
+          {value && value[0] ? moment(value[0]).format(dateFormat) : noData}
+          &nbsp;{separator || <SwapRightOutlined />}&nbsp;
+          {value && value[1] ? moment(value[1]).format(dateFormat) : noData}
+        </>
+      )
+    );
+  }
+};
+
+export const datePickerModify: YFormFieldBaseProps<DatePickerProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+  typeProps,
+}) => {
+  return {
+    itemProps: {
+      viewProps: { format: (value) => dateFormat(value, componentProps, typeProps.type) },
+      ...itemProps,
+    },
+  };
+};
+export const rangePickerModify: YFormFieldBaseProps<RangePickerProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+  typeProps,
+}) => {
+  return {
+    itemProps: {
+      viewProps: {
+        format: (value, pureValue) => dateFormat(value, componentProps, typeProps.type, pureValue),
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const checkboxModify: YFormFieldBaseProps<CheckboxProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const { children } = componentProps;
+  return {
+    itemProps: {
+      valuePropName: 'checked',
+      viewProps: {
+        format: (value, pureValue) => {
+          if (pureValue) {
+            return !!value;
+          }
+          return value ? <Tag>{children}</Tag> : noData;
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const switchModify: YFormFieldBaseProps<SwitchProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const { checkedChildren = '开', unCheckedChildren = '关' } = componentProps;
+  return {
+    itemProps: {
+      valuePropName: 'checked',
+      viewProps: {
+        format: (value, pureValue) => {
+          // !!value 解释：undefined 设置为 false 来对比
+          return pureValue ? !!value : <Tag>{value ? checkedChildren : unCheckedChildren}</Tag>;
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const textModify: YFormFieldBaseProps<YTextAreaProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const _fProps = { ...itemProps };
+  if (componentProps.inputMax) {
+    _fProps.rules = [
+      ...(_fProps.rules || []),
+      () => ({
+        validator(_, value) {
+          if (value && calculateStrLength(value) > Number(componentProps.inputMax)) {
+            return Promise.reject('数量超长');
+          }
+          return Promise.resolve();
+        },
+      }),
+    ];
+  }
+
+  return { itemProps: _fProps };
+};
+
+export const oneLineModify: YFormFieldBaseProps<YFormOneLineProps>['modifyProps'] = ({
+  itemProps = {},
+}) => {
+  return {
+    itemProps: { ...itemProps, className: classNames(itemProps.className, 'mb0') },
+  };
+};
+
+export const submitModify: YFormFieldBaseProps<YFormSubmitProps>['modifyProps'] = ({
+  componentProps,
+}) => {
+  return { componentProps: { showBtns: { showSave: false }, ...componentProps } };
+};
+
+export const checkboxGroupModify: YFormFieldBaseProps<YCheckGroupProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const { options } = componentProps;
+  return {
+    itemProps: {
+      viewProps: {
+        format: (value, pureValue) => {
+          if (value && isArray(value)) {
+            const list = map(options, (item) => {
+              if (includes(value, item.id)) {
+                return item.name;
+              }
+            });
+            if (pureValue) {
+              if (isArray(value)) {
+                return map(value, (item) => item).join('-');
+              }
+              return value;
+            }
+            return map(list, (item, index) => <Tag key={index}>{item}</Tag>);
+          }
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const selectModify: YFormFieldBaseProps<YSelectProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const { options, optionLabelProp, onAddProps, showField = 'name' } = componentProps;
+  return {
+    itemProps: {
+      viewProps: {
+        format: (value, pureValue) => {
+          const list = [];
+          map(options, (item, index) => {
+            if (includes(isArray ? value : [value], item.id)) {
+              if (optionLabelProp && onAddProps) {
+                list.push(onAddProps(item, index)[optionLabelProp]);
+              } else if (typeof showField === 'function') {
+                list.push(showField(item, index));
+              } else {
+                list.push(item[showField]);
+              }
+            }
+          });
+          if (pureValue) {
+            if (isArray(value)) {
+              return map(value, (item) => item).join('-');
+            }
+            return value;
+          }
+          return map(list, (item) => <Tag key={item}>{item}</Tag>);
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const moneyModify: YFormFieldBaseProps<YMoneyProps>['modifyProps'] = ({ itemProps }) => {
+  return {
+    itemProps: {
+      viewProps: {
+        format: (value) => {
+          try {
+            return Numbro(value).format('0,0.00');
+          } catch (error) {
+            return value;
+          }
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const radioModify: YFormFieldBaseProps<YRadioProps>['modifyProps'] = ({
+  itemProps,
+  componentProps,
+}) => {
+  const { options, showField = 'name' } = componentProps;
+  return {
+    itemProps: {
+      viewProps: {
+        format: (value, pureValue) => {
+          const list = [];
+          map(options, (item, index) => {
+            if (value === item.id) {
+              if (typeof showField === 'function') {
+                list.push(showField(item, index));
+              } else {
+                list.push(item[showField]);
+              }
+            }
+          });
+          if (pureValue) {
+            if (isArray(value)) {
+              return map(value, (item) => item).join('-');
+            }
+            return value;
+          }
+          return map(list, (item) => <Tag key={item}>{item}</Tag>);
+        },
+      },
+      ...itemProps,
+    },
+  };
+};
+
+export const SpaceModify: YFormFieldBaseProps<YFormSpaceProps>['modifyProps'] = ({
+  itemProps = {},
+}) => {
+  return {
+    itemProps: { ...itemProps, className: classNames(itemProps.className, 'mb0') },
+  };
+};
diff --git a/packages/yforms/src/YForm/__test__/YFormItems.test.tsx b/packages/yforms/src/YForm/__test__/YFormItems.test.tsx
index 9fd0e50..35760f9 100644
--- a/packages/yforms/src/YForm/__test__/YFormItems.test.tsx
+++ b/packages/yforms/src/YForm/__test__/YFormItems.test.tsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { mount } from 'enzyme';
-import { YForm } from '../../index';
+import { YForm } from '../..';
 import { YFormItemsProps } from '../Items';
 import Submit from '../component/Submit';
 import { fields, initialValues } from './fields';
@@ -51,7 +51,7 @@ const YFormSubmitDemo = (props: any) => {
 
   onFormatFieldsValue([
     { name: 'append_field', format: () => '提交前追加字段' },
-    { name: 'name', format: ({ name }) => `${name}_改变了` },
+    { name: 'name', format: (value) => `${value}_改变了` },
   ]);
 
   return (
@@ -119,7 +119,7 @@ describe('YFormItems', () => {
   });
   test('more children', () => {
     const wrapper = mount(
-      <YForm required>
+      <YForm>
         <YForm.Items>
           {fields}
           {[{ type: 'noType', name: 'a' }] as any}
diff --git a/packages/yforms/src/YForm/__test__/__snapshots__/Submit.test.tsx.snap b/packages/yforms/src/YForm/__test__/__snapshots__/Submit.test.tsx.snap
index 56c9b81..16e5365 100644
--- a/packages/yforms/src/YForm/__test__/__snapshots__/Submit.test.tsx.snap
+++ b/packages/yforms/src/YForm/__test__/__snapshots__/Submit.test.tsx.snap
@@ -195,7 +195,6 @@ Object {
                     class="ant-form-item-control-input-content"
                   >
                     <input
-                      _item_type="input"
                       class="ant-input"
                       id="demo"
                       placeholder=""
@@ -213,7 +212,7 @@ Object {
                 class="ant-col ant-form-item-label"
               >
                 <label
-                  class=""
+                  class="ant-form-item-required"
                   title="money"
                 >
                   money
@@ -232,7 +231,6 @@ Object {
                       class="input-money"
                     >
                       <input
-                        _item_type="money"
                         class="ant-input"
                         id="money"
                         placeholder="请输入money"
@@ -263,7 +261,6 @@ Object {
                       class="yform-items"
                     >
                       <button
-                        _item_type="button"
                         class="ant-btn ant-btn-primary"
                         type="submit"
                       >
@@ -304,7 +301,6 @@ Object {
                   class="ant-form-item-control-input-content"
                 >
                   <input
-                    _item_type="input"
                     class="ant-input"
                     id="demo"
                     placeholder=""
@@ -322,7 +318,7 @@ Object {
               class="ant-col ant-form-item-label"
             >
               <label
-                class=""
+                class="ant-form-item-required"
                 title="money"
               >
                 money
@@ -341,7 +337,6 @@ Object {
                     class="input-money"
                   >
                     <input
-                      _item_type="money"
                       class="ant-input"
                       id="money"
                       placeholder="请输入money"
@@ -372,7 +367,6 @@ Object {
                     class="yform-items"
                   >
                     <button
-                      _item_type="button"
                       class="ant-btn ant-btn-primary"
                       type="submit"
                     >
diff --git a/packages/yforms/src/YForm/__test__/__snapshots__/YFormItems.test.tsx.snap b/packages/yforms/src/YForm/__test__/__snapshots__/YFormItems.test.tsx.snap
index 56c9b81..16e5365 100644
--- a/packages/yforms/src/YForm/__test__/__snapshots__/YFormItems.test.tsx.snap
+++ b/packages/yforms/src/YForm/__test__/__snapshots__/YFormItems.test.tsx.snap
@@ -195,7 +195,6 @@ Object {
                     class="ant-form-item-control-input-content"
                   >
                     <input
-                      _item_type="input"
                       class="ant-input"
                       id="demo"
                       placeholder=""
@@ -213,7 +212,7 @@ Object {
                 class="ant-col ant-form-item-label"
               >
                 <label
-                  class=""
+                  class="ant-form-item-required"
                   title="money"
                 >
                   money
@@ -232,7 +231,6 @@ Object {
                       class="input-money"
                     >
                       <input
-                        _item_type="money"
                         class="ant-input"
                         id="money"
                         placeholder="请输入money"
@@ -263,7 +261,6 @@ Object {
                       class="yform-items"
                     >
                       <button
-                        _item_type="button"
                         class="ant-btn ant-btn-primary"
                         type="submit"
                       >
@@ -304,7 +301,6 @@ Object {
                   class="ant-form-item-control-input-content"
                 >
                   <input
-                    _item_type="input"
                     class="ant-input"
                     id="demo"
                     placeholder=""
@@ -322,7 +318,7 @@ Object {
               class="ant-col ant-form-item-label"
             >
               <label
-                class=""
+                class="ant-form-item-required"
                 title="money"
               >
                 money
@@ -341,7 +337,6 @@ Object {
                     class="input-money"
                   >
                     <input
-                      _item_type="money"
                       class="ant-input"
                       id="money"
                       placeholder="请输入money"
@@ -372,7 +367,6 @@ Object {
                     class="yform-items"
                   >
                     <button
-                      _item_type="button"
                       class="ant-btn ant-btn-primary"
                       type="submit"
                     >
diff --git a/packages/yforms/src/YForm/__test__/__snapshots__/index.test.tsx.snap b/packages/yforms/src/YForm/__test__/__snapshots__/index.test.tsx.snap
index e890fec..633547b 100644
--- a/packages/yforms/src/YForm/__test__/__snapshots__/index.test.tsx.snap
+++ b/packages/yforms/src/YForm/__test__/__snapshots__/index.test.tsx.snap
@@ -86,7 +86,6 @@ Object {
                     class="ant-form-item-control-input-content"
                   >
                     <input
-                      _item_type="input"
                       class="ant-input"
                       id="demo"
                       placeholder=""
@@ -104,7 +103,7 @@ Object {
                 class="ant-col ant-col-8 ant-form-item-label"
               >
                 <label
-                  class=""
+                  class="ant-form-item-required"
                   title="money"
                 >
                   money
@@ -123,7 +122,6 @@ Object {
                       class="input-money"
                     >
                       <input
-                        _item_type="money"
                         class="ant-input"
                         id="money"
                         placeholder="请输入money"
@@ -156,7 +154,6 @@ Object {
                       class="yform-items"
                     >
                       <button
-                        _item_type="button"
                         class="ant-btn ant-btn-primary"
                         type="submit"
                       >
@@ -190,7 +187,6 @@ Object {
                     class="ant-form-item-control-input-content"
                   >
                     <input
-                      _item_type="input"
                       class="ant-input"
                       id="demo"
                       placeholder=""
@@ -208,7 +204,7 @@ Object {
                 class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-4"
               >
                 <label
-                  class=""
+                  class="ant-form-item-required"
                   title="money"
                 >
                   money
@@ -227,7 +223,6 @@ Object {
                       class="input-money"
                     >
                       <input
-                        _item_type="money"
                         class="ant-input"
                         id="money"
                         placeholder="请输入money"
@@ -260,7 +255,6 @@ Object {
                       class="yform-items"
                     >
                       <button
-                        _item_type="button"
                         class="ant-btn ant-btn-primary"
                         type="submit"
                       >
@@ -299,7 +293,6 @@ Object {
                   class="ant-form-item-control-input-content"
                 >
                   <input
-                    _item_type="input"
                     class="ant-input"
                     id="demo"
                     placeholder=""
@@ -317,7 +310,7 @@ Object {
               class="ant-col ant-col-8 ant-form-item-label"
             >
               <label
-                class=""
+                class="ant-form-item-required"
                 title="money"
               >
                 money
@@ -336,7 +329,6 @@ Object {
                     class="input-money"
                   >
                     <input
-                      _item_type="money"
                       class="ant-input"
                       id="money"
                       placeholder="请输入money"
@@ -369,7 +361,6 @@ Object {
                     class="yform-items"
                   >
                     <button
-                      _item_type="button"
                       class="ant-btn ant-btn-primary"
                       type="submit"
                     >
@@ -403,7 +394,6 @@ Object {
                   class="ant-form-item-control-input-content"
                 >
                   <input
-                    _item_type="input"
                     class="ant-input"
                     id="demo"
                     placeholder=""
@@ -421,7 +411,7 @@ Object {
               class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-4"
             >
               <label
-                class=""
+                class="ant-form-item-required"
                 title="money"
               >
                 money
@@ -440,7 +430,6 @@ Object {
                     class="input-money"
                   >
                     <input
-                      _item_type="money"
                       class="ant-input"
                       id="money"
                       placeholder="请输入money"
@@ -473,7 +462,6 @@ Object {
                     class="yform-items"
                   >
                     <button
-                      _item_type="button"
                       class="ant-btn ant-btn-primary"
                       type="submit"
                     >
@@ -568,9 +556,7 @@ Object {
                 <div
                   class="ant-form-item-control-input-content"
                 >
-                  <p
-                    _item_type="demo"
-                  >
+                  <p>
                     123
                   </p>
                 </div>
@@ -601,9 +587,7 @@ Object {
               <div
                 class="ant-form-item-control-input-content"
               >
-                <p
-                  _item_type="demo"
-                >
+                <p>
                   123
                 </p>
               </div>
@@ -802,7 +786,6 @@ Object {
                   class="ant-form-item-control-input-content"
                 >
                   <input
-                    _item_type="input"
                     class="ant-input"
                     id="demo"
                     placeholder=""
@@ -820,7 +803,7 @@ Object {
               class="ant-col ant-form-item-label"
             >
               <label
-                class=""
+                class="ant-form-item-required"
                 title="money"
               >
                 money
@@ -839,7 +822,6 @@ Object {
                     class="input-money"
                   >
                     <input
-                      _item_type="money"
                       class="ant-input"
                       id="money"
                       placeholder="请输入money"
@@ -872,7 +854,6 @@ Object {
                     class="yform-items"
                   >
                     <button
-                      _item_type="button"
                       class="ant-btn ant-btn-primary"
                       type="submit"
                     >
@@ -909,7 +890,6 @@ Object {
                 class="ant-form-item-control-input-content"
               >
                 <input
-                  _item_type="input"
                   class="ant-input"
                   id="demo"
                   placeholder=""
@@ -927,7 +907,7 @@ Object {
             class="ant-col ant-form-item-label"
           >
             <label
-              class=""
+              class="ant-form-item-required"
               title="money"
             >
               money
@@ -946,7 +926,6 @@ Object {
                   class="input-money"
                 >
                   <input
-                    _item_type="money"
                     class="ant-input"
                     id="money"
                     placeholder="请输入money"
@@ -979,7 +958,6 @@ Object {
                   class="yform-items"
                 >
                   <button
-                    _item_type="button"
                     class="ant-btn ant-btn-primary"
                     type="submit"
                   >
diff --git a/packages/yforms/src/YForm/__test__/fields.tsx b/packages/yforms/src/YForm/__test__/fields.tsx
index 0e6a8d8..9f3f79b 100644
--- a/packages/yforms/src/YForm/__test__/fields.tsx
+++ b/packages/yforms/src/YForm/__test__/fields.tsx
@@ -147,7 +147,6 @@ const fields: YFormItemProps['children'] = [
   { label: '文本', name: 'text', type: 'text' },
   {
     label: '自定义渲染',
-    showType: 'input',
     type: 'custom',
     name: 'custom',
     component: <Input />,
diff --git a/packages/yforms/src/YForm/__test__/index.test.tsx b/packages/yforms/src/YForm/__test__/index.test.tsx
index 66fbe72..e85dc2a 100644
--- a/packages/yforms/src/YForm/__test__/index.test.tsx
+++ b/packages/yforms/src/YForm/__test__/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { mount } from 'enzyme';
 
-import { YForm } from '../../index';
+import { YForm } from '../..';
 import { layout, layoutMore } from '../utils';
 import { YFormProps } from '../Form';
 
@@ -13,7 +13,9 @@ const YFormDemo = (props: YFormProps) => {
 
   const { onFormatFieldsValue, formatFieldsValue } = YForm.useFormatFieldsValue();
 
-  onFormatFieldsValue([{ name: ['demo', 'aa'], format: (value: { users: any }) => value.users }]);
+  onFormatFieldsValue([
+    { name: ['demo', 'aa'], format: (_, values: { users: any }) => values.users },
+  ]);
 
   return (
     <YForm
diff --git a/packages/yforms/src/YForm/component/ComponentView.tsx b/packages/yforms/src/YForm/component/ComponentView.tsx
index 69e4034..6db64cc 100644
--- a/packages/yforms/src/YForm/component/ComponentView.tsx
+++ b/packages/yforms/src/YForm/component/ComponentView.tsx
@@ -1,103 +1,53 @@
 import React from 'react';
-import moment, { isMoment } from 'moment';
-import Numbro from 'numbro';
-import { Tag } from 'antd';
-import { includes, isArray, map } from 'lodash';
+import classNames from 'classnames';
+import { get, isArray } from 'lodash';
 
-import { YFormItemsTypeDefine } from '../ItemsType';
+import { YFormItemProps } from '../Items';
+
+const noData = <span style={{ color: '#ccc' }}>-/-</span>;
 
 export interface YFormComponentView {
-  _item_type?: string;
   value?: React.ReactNode;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
   suffix?: React.ReactNode;
-  [key: string]: any;
+  prefix?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  _show_type?: string;
+  oldValue?: any;
+  itemProps?: YFormItemProps;
 }
 
-export default (props: YFormComponentView) => {
-  const { _item_type, children, addonBefore, addonAfter, suffix, value } = props;
-  let _value = value;
-
-  const _addonAfter = addonAfter || suffix;
-  const _addonBefore = addonBefore;
-
-  if (_item_type === 'money') {
-    _value = Numbro(_value).format('0,0.00');
-  }
-  if (_item_type === 'datePicker') {
-    if (isMoment(_value)) {
-      _value = moment(_value).format('YYYY-MM-DD');
-    }
-  }
-  if (_item_type === 'checkbox') {
-    if (value) _value = <Tag>{children}</Tag>;
-  }
-  if (_item_type === 'select') {
-    const {
-      options,
-      optionLabelProp,
-      onAddProps,
-      showField = 'name',
-    } = props as YFormItemsTypeDefine['select']['componentProps'];
-    const list = [];
-    map(options, (item, index) => {
-      if (includes(isArray ? value : [value], item.id)) {
-        if (optionLabelProp && onAddProps) {
-          list.push(onAddProps(item, index)[optionLabelProp]);
-        } else if (typeof showField === 'function') {
-          list.push(showField(item, index));
-        } else {
-          list.push(item[showField]);
-        }
-      }
-    });
-    _value = map(list, (item) => <Tag key={item}>{item}</Tag>);
-  }
-  if (_item_type === 'radio') {
-    const {
-      options,
-      showField = 'name',
-    } = props as YFormItemsTypeDefine['radio']['componentProps'];
-    if (value) {
-      const list = [];
-      _value = map(options, (item, index) => {
-        if (value === item.id) {
-          if (typeof showField === 'function') {
-            list.push(showField(item, index));
-          } else {
-            list.push(item[showField]);
-          }
-        }
-      });
-      _value = map(list, (item) => <Tag key={item}>{item}</Tag>);
-    }
-  }
-  if (_item_type === 'checkboxGroup') {
-    const { options } = props as YFormItemsTypeDefine['checkboxGroup']['componentProps'];
-    if (value && isArray(value)) {
-      const list = map(options, (item) => {
-        if (includes(value, item.id)) {
-          return item.name;
-        }
-      });
-      _value = map(list, (item, index) => <Tag key={index}>{item}</Tag>);
-    }
-  }
+export default React.memo<YFormComponentView>((props) => {
+  const {
+    _show_type,
+    addonBefore,
+    addonAfter,
+    suffix,
+    prefix,
+    className,
+    oldValue,
+    itemProps = {},
+  } = props;
+  const { valuePropName = 'value' } = itemProps;
+  const { format } = itemProps.viewProps || {};
+  // diff 渲染使用 oldValue
+  let _value = _show_type === 'diff' ? oldValue : get(props, valuePropName);
 
-  if (_item_type === 'switch') {
-    const {
-      checkedChildren = '开',
-      unCheckedChildren = '关',
-    } = props as YFormItemsTypeDefine['switch']['componentProps'];
-    _value = <Tag>{value ? checkedChildren : unCheckedChildren}</Tag>;
+  if (format) {
+    _value = format(_value);
   }
 
   return (
-    <span className="ant-form-text">
-      <span style={{ color: '#999' }}>{_addonBefore} </span>
-      {_value === undefined || _value === '' ? <span style={{ color: '#ccc' }}>-/-</span> : _value}
-      <span style={{ color: '#999' }}> {_addonAfter}</span>
+    <span className={classNames('ant-form-text', className)}>
+      {addonBefore && <span style={{ color: '#999' }}>{addonBefore} </span>}
+      {prefix && <span style={{ color: '#999' }}>{prefix} </span>}
+      {_value === undefined || _value === '' || (isArray(_value) && _value.length === 0)
+        ? noData
+        : _value}
+      {suffix && <span style={{ color: '#999' }}> {suffix}</span>}
+      {addonAfter && <span style={{ color: '#999' }}> {addonAfter}</span>}
     </span>
   );
-};
+});
diff --git a/packages/yforms/src/YForm/component/Diff.tsx b/packages/yforms/src/YForm/component/Diff.tsx
new file mode 100644
index 0000000..880742e
--- /dev/null
+++ b/packages/yforms/src/YForm/component/Diff.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { get, concat, isArray, forEach, isEqual } from 'lodash';
+import moment from 'moment';
+import ComponentView from './ComponentView';
+import { YForm } from '../..';
+
+const equalFunc = (value: any, oldValue: any): boolean => {
+  let equal = false;
+  // 如果有个是数组则用数组
+  if (isArray(value) || isArray(oldValue)) {
+    // 数组对比有一个不是数组则为 false
+    if (!isArray(value) || !isArray(oldValue)) return false;
+    // 长度不一致为 false
+    if (value.length !== oldValue.length) return false;
+
+    // 数据情况下对索引数据挨个对比。
+    forEach(value, (item: any, index: number) => {
+      if (moment.isMoment(item)) {
+        // 对比数据到秒级，忽略毫秒
+        equal = item.isSame(oldValue[index], 'seconds');
+      } else if (moment.isMoment(oldValue[index])) {
+        equal = oldValue[index].isSame(item, 'seconds');
+      } else {
+        equal = isEqual(item, oldValue[index]);
+      }
+      if (!equal) {
+        return false;
+      }
+    });
+  } else if (moment.isMoment(value)) {
+    // 对比数据到秒级，忽略毫秒
+    equal = value.isSame(oldValue, 'seconds');
+  } else if (moment.isMoment(oldValue)) {
+    equal = oldValue.isSame(value, 'seconds');
+  } else {
+    equal = isEqual(value, oldValue);
+  }
+
+  return equal;
+};
+
+const DiffDom = React.memo<any>((props) => {
+  const { oldValues, name, itemProps, type } = props;
+  const context = React.useContext(YForm.ListContent);
+
+  const _name = context.prefixName ? concat(context.prefixName, name) : name;
+  return (
+    <YForm.Items className="diff">
+      {[
+        {
+          noStyle: true,
+          shouldUpdate: (prevValues, curValues) => get(prevValues, _name) !== get(curValues, _name),
+          children: ({ getFieldValue }) => {
+            // 如果字段为 undefined 则改为 ''，为了字段输入值再删除一样的道理
+            const value = getFieldValue(_name) === undefined ? '' : getFieldValue(_name);
+            const oldValue = get(oldValues, _name) === undefined ? '' : get(oldValues, _name);
+            let equal = equalFunc(value, oldValue);
+            // 如果有渲染方法，就按照次来对比
+            if (itemProps.viewProps) {
+              const { format } = itemProps.viewProps;
+              // 这里用的 pureValue = true（纯值），直接 === 判断就可以。
+              equal = format(value, true) === format(oldValue, true);
+            }
+
+            if (equal) {
+              return null;
+            }
+            return (
+              <div style={{ padding: '5px 0' }}>
+                <ComponentView
+                  _show_type="diff"
+                  {...itemProps.componentProps}
+                  itemProps={itemProps}
+                  className="old-value"
+                  _item_type={type}
+                  oldValue={oldValue}
+                />
+              </div>
+            );
+          },
+        },
+      ]}
+    </YForm.Items>
+  );
+});
+
+export default DiffDom;
diff --git a/packages/yforms/src/YForm/component/List.tsx b/packages/yforms/src/YForm/component/List.tsx
index 426cacf..f6891bd 100644
--- a/packages/yforms/src/YForm/component/List.tsx
+++ b/packages/yforms/src/YForm/component/List.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form } from 'antd';
 import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
-import { map, merge, isArray } from 'lodash';
+import { map, merge, isArray, concat } from 'lodash';
 import classNames from 'classnames';
 
 import YForm from '../index';
@@ -22,11 +22,12 @@ export interface YFormListComponentProps extends BaseComponentProps {
   showRightIcons?: boolean;
   showIcons?: ShowIconsType;
   onShowIcons?: (p: { index: number }) => Pick<ShowIconsType, 'showAdd' | 'showRemove'>;
+  parentName?: YFormItemProps['name'];
 }
 
 export interface YFormListItems {
   index: number;
-  field: { name: number; key: number; fieldKey: number };
+  field: { name: number; key: number; fieldKey: number; isListField?: boolean };
   add: () => void;
   remove: (index: number) => void;
   move: (from: number, to: number) => void;
@@ -34,17 +35,16 @@ export interface YFormListItems {
 }
 
 export interface YFormListProps
-  extends Pick<YFormItemProps, 'label'>,
-    Pick<YFormProps, 'children' | 'disabled'> {
-  // TODO  field-form 和 antd 的 name 类型不一致
-  name?: string | number | (string | number)[];
+  extends Pick<YFormItemProps, 'label' | 'name' | 'scenes' | 'initialValue'>,
+    Pick<YFormProps, 'form' | 'children' | 'disabled'> {
   items?: (p: YFormListItems) => YFormItemProps['children'];
   componentProps?: YFormListComponentProps;
   offset?: number;
+  addonBefore?: React.ReactNode;
 }
 
 export default (props: YFormListProps) => {
-  const { label, items, disabled, componentProps = {}, name, offset } = props;
+  const { label, items, disabled, componentProps = {}, name, offset, addonBefore, scenes } = props;
   const {
     maxNum,
     minNum,
@@ -52,9 +52,14 @@ export default (props: YFormListProps) => {
     showIcons: { showBottomAdd = true, showAdd = true, showRemove = true } = {} as ShowIconsType,
     onShowIcons,
   } = componentProps;
+  const context = React.useContext(YForm.ListContent);
+  // 支持多级 List name 拼接
+  const _name = context.prefixName ? concat(context.prefixName, name) : name;
+
   return (
     <div className="list">
-      <Form.List name={name || ''}>
+      {addonBefore}
+      <Form.List name={name}>
         {(fields, { add, remove, move }) => {
           const isMax = maxNum ? fields.length < maxNum : true;
           const isMin = minNum ? fields.length > minNum : true;
@@ -78,7 +83,7 @@ export default (props: YFormListProps) => {
                           // 先增加一位
                           add();
                           // 再把最后一位移动到当前
-                          move(fields.length, index + 1);
+                          move(fields.length, index);
                         }}
                       />,
                     );
@@ -103,29 +108,38 @@ export default (props: YFormListProps) => {
                     const _item = merge(
                       {},
                       {
+                        scenes,
                         offset,
                         componentProps: !disabled &&
                           showRightIcons && { style: { ..._oneLineStyle[0] } },
                         label: index === 0 && _label,
-                        addonAfter: showRightIcons && !disabled && index === 0 && (
-                          <div
-                            className={classNames('padding-icons', 'inline-icons')}
-                            style={_oneLineStyle[1]}
-                          >
-                            {icons}
-                          </div>
-                        ),
                       },
                       item,
-                      { key: index },
+                      {
+                        // 内部使用
+                        _addonAfter: [
+                          showRightIcons && !disabled && index === 0 && (
+                            <div
+                              key="yform-list-icons"
+                              className={classNames('padding-icons', 'inline-icons')}
+                              style={_oneLineStyle[1]}
+                            >
+                              {icons}
+                            </div>
+                          ),
+                        ].filter((x) => x),
+                      },
                     );
                     return _item;
                   });
                 }
                 return (
-                  <YForm.Items noStyle key={field.key}>
-                    {_children}
-                  </YForm.Items>
+                  <YForm.ListContent.Provider
+                    key={field.key}
+                    value={{ isList: true, field, prefixName: _name }}
+                  >
+                    <YForm.Items noStyle>{_children}</YForm.Items>
+                  </YForm.ListContent.Provider>
                 );
               })}
               {showBottomAdd && isMax && !disabled && (
diff --git a/packages/yforms/src/YForm/component/OneLine.tsx b/packages/yforms/src/YForm/component/OneLine.tsx
index 815a99f..637f84d 100644
--- a/packages/yforms/src/YForm/component/OneLine.tsx
+++ b/packages/yforms/src/YForm/component/OneLine.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { map, merge, get, isArray, isObject } from 'lodash';
 import classNames from 'classnames';
+import warning from 'warning';
 
 import { oneLineItemStyle } from '../utils';
-import { BaseComponentProps, YFormFieldBaseProps } from '../ItemsType';
+import { BaseComponentProps } from '../ItemsType';
 import YForm from '..';
 import { YFormItemProps } from '../Items';
 
@@ -18,20 +19,17 @@ export interface YFormOneLineProps {
   componentProps?: YFormOneLineComponentProps;
   className?: string;
   style?: React.CSSProperties;
+  scenes?: YFormItemProps['scenes'];
   items?: (p: YFormOneLineItems) => YFormItemProps['children'];
 }
 
-export const oneLineModify: YFormFieldBaseProps<YFormOneLineProps>['modifyProps'] = ({
-  itemProps = {},
-}) => {
-  return {
-    itemProps: { ...itemProps, className: classNames(itemProps.className, 'mb0') },
-  };
-};
-
 export default (props: YFormOneLineProps) => {
-  const { items, componentProps = {} } = props;
+  const { items, componentProps = {}, scenes } = props;
   const { oneLineStyle, className, style } = componentProps as YFormOneLineComponentProps;
+  if (get(props, 'name')) {
+    warning(false, 'oneLine 不支持 name');
+    return null;
+  }
 
   const styleObj = oneLineItemStyle(oneLineStyle || []);
   const _dataSource = items && items({ style: styleObj });
@@ -41,11 +39,9 @@ export default (props: YFormOneLineProps) => {
       if (!item) return;
       const _style = get(styleObj, index, {});
       if (isObject(item)) {
-        return merge(
-          {},
-          { style: { display: 'inline-block', ..._style } },
-          { ...item, className: classNames('dib', get(item, 'className')) },
-        );
+        return merge({}, { style: { display: 'inline-block', ..._style } }, { scenes }, item, {
+          className: classNames('dib', get(item, 'className')),
+        });
       }
     }).filter((x) => x);
   }
diff --git a/packages/yforms/src/YForm/component/Space.tsx b/packages/yforms/src/YForm/component/Space.tsx
new file mode 100644
index 0000000..b0e5b5e
--- /dev/null
+++ b/packages/yforms/src/YForm/component/Space.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { map, isArray } from 'lodash';
+import { Space } from 'antd';
+import { SpaceProps } from 'antd/lib/space';
+
+import YForm from '..';
+import { YFormItemProps } from '../Items';
+
+export interface YFormSpaceComponentProps extends SpaceProps {}
+
+export interface YFormSpaceProps {
+  componentProps?: YFormSpaceComponentProps;
+  items?: YFormItemProps['children'];
+}
+
+export default (props: YFormSpaceProps) => {
+  const { items } = props;
+  return (
+    <Space>
+      {isArray(items)
+        ? map(items, (item, index) => {
+            return (
+              <YForm.Items scenes={{ noCol: true }} key={index} noStyle>
+                {[item]}
+              </YForm.Items>
+            );
+          })
+        : items}
+    </Space>
+  );
+};
diff --git a/packages/yforms/src/YForm/component/Submit.tsx b/packages/yforms/src/YForm/component/Submit.tsx
index 2882e0a..8ed54f1 100644
--- a/packages/yforms/src/YForm/component/Submit.tsx
+++ b/packages/yforms/src/YForm/component/Submit.tsx
@@ -6,13 +6,6 @@ import { YForm } from '../..';
 import { YFormProps } from '../Form';
 import { YFormItemProps, YFormDataSource } from '../Items';
 import { YFormSecureButtonProps } from './SecureButton';
-import { YFormFieldBaseProps } from '../ItemsType';
-
-export const submitModify: YFormFieldBaseProps<YFormSubmitProps>['modifyProps'] = ({
-  componentProps,
-}) => {
-  return { componentProps: { showBtns: { showSave: false }, ...componentProps } };
-};
 
 export interface ShowBtns {
   showSubmit?: ButtonProps;
diff --git a/packages/yforms/src/YForm/component/TextArea.tsx b/packages/yforms/src/YForm/component/TextArea.tsx
index cfb0617..5e45de2 100644
--- a/packages/yforms/src/YForm/component/TextArea.tsx
+++ b/packages/yforms/src/YForm/component/TextArea.tsx
@@ -3,34 +3,11 @@ import { Input } from 'antd';
 import { TextAreaProps } from 'antd/lib/input';
 
 import { calculateStrLength } from '../utils';
-import { YFormFieldBaseProps } from '../ItemsType';
 
 export interface YTextAreaProps extends TextAreaProps {
   inputMax?: number;
 }
 
-export const textModify: YFormFieldBaseProps<YTextAreaProps>['modifyProps'] = ({
-  itemProps,
-  componentProps,
-}) => {
-  const _fProps = { ...itemProps };
-  if (componentProps.inputMax) {
-    _fProps.rules = [
-      ...(_fProps.rules || []),
-      () => ({
-        validator(_, value) {
-          if (value && calculateStrLength(value) > Number(componentProps.inputMax)) {
-            return Promise.reject('数量超长');
-          }
-          return Promise.resolve();
-        },
-      }),
-    ];
-  }
-
-  return { itemProps: _fProps };
-};
-
 export default (props: YTextAreaProps) => {
   const { inputMax, ...rest } = props;
   const { value } = rest;
diff --git a/packages/yforms/src/YForm/index.less b/packages/yforms/src/YForm/index.less
index 4cda171..8e455a3 100644
--- a/packages/yforms/src/YForm/index.less
+++ b/packages/yforms/src/YForm/index.less
@@ -56,6 +56,7 @@
   }
 
   .button-more-left {
+    .mb0;
     button + button {
       margin-left: 8px;
     }
@@ -65,6 +66,14 @@
     margin-top: 0px;
     margin-bottom: 0;
   }
+  .diff {
+    .old-value {
+      background: #fbe9eb;
+      word-wrap: break-word;
+      padding: 1px 0;
+      width: 100%;
+    }
+  }
 }
 
 .yforms-search-form {
diff --git a/packages/yforms/src/YForm/index.ts b/packages/yforms/src/YForm/index.ts
index d914cd6..f2b4f6a 100644
--- a/packages/yforms/src/YForm/index.ts
+++ b/packages/yforms/src/YForm/index.ts
@@ -6,7 +6,7 @@ import useSubmit from './useSubmit';
 import useForm from './useForm';
 
 import './index.less';
-import { YFormItemsContext, YFormContext } from './Context';
+import { YFormItemsContext, YFormContext, YFormListContent } from './Context';
 
 type InternalYForm = typeof YForm;
 interface RefYForm extends InternalYForm {
@@ -18,6 +18,7 @@ interface RefYForm extends InternalYForm {
   useSubmit: typeof useSubmit;
   YFormContext: typeof YFormContext;
   YFormItemsContext: typeof YFormItemsContext;
+  ListContent: typeof YFormListContent;
 }
 
 const Form: RefYForm = YForm as RefYForm;
@@ -30,5 +31,6 @@ Form.useFormatFieldsValue = useFormatFieldsValue;
 Form.useSubmit = useSubmit;
 Form.YFormContext = YFormContext;
 Form.YFormItemsContext = YFormItemsContext;
+Form.ListContent = YFormListContent;
 
 export default Form;
diff --git a/packages/yforms/src/YForm/scenes.tsx b/packages/yforms/src/YForm/scenes.tsx
index e1490be..1939915 100644
--- a/packages/yforms/src/YForm/scenes.tsx
+++ b/packages/yforms/src/YForm/scenes.tsx
@@ -1,9 +1,15 @@
+import React from 'react';
 import { merge, forEach } from 'lodash';
 import classNames from 'classnames';
 
 import { YFormConfig } from './Form';
 import { modifyType } from './ItemsType';
 import { replaceMessage, getLabelLayout } from './utils';
+import DiffDom from './component/Diff';
+import { DiffSetFields } from './scenesComps';
+
+// TODO 以下判断是如果有 name 并且不是 list 类型才当做为表单字段从而注入 view diff 等功能
+// itemProps.name && typeProps.type !== 'list'
 
 const scenes: YFormConfig = {
   getScene: {
@@ -35,25 +41,22 @@ const scenes: YFormConfig = {
     },
     // 判断如果是 required 则每个 item 添加 rules
     required: {
-      item: ({ formProps, itemProps, typeProps }) => {
+      item: ({ itemProps, typeProps }) => {
         const _itemProps: modifyType['itemProps'] = {};
-        const { required } = formProps;
         const { label, rules } = itemProps;
-        const { formatStr, showType } = merge({}, typeProps, itemProps);
+        const { formatStr } = merge({}, typeProps, itemProps);
 
         const _message = typeof label === 'string' && replaceMessage(formatStr || '', { label });
-        if (showType === 'input') {
-          if (required) {
-            let hasRequired = false;
-            forEach(rules, (item) => {
-              hasRequired = 'required' in item;
-            });
-            if (!hasRequired) {
-              _itemProps.rules = [
-                { required, message: _message || '此处不能为空' },
-                ...(itemProps.rules || []),
-              ];
-            }
+        if (itemProps.name && typeProps.type !== 'list') {
+          let hasRequired = false;
+          forEach(rules, (item) => {
+            hasRequired = 'required' in item;
+          });
+          if (!hasRequired) {
+            _itemProps.rules = [
+              { required: true, message: _message || '此处不能为空' },
+              ...(itemProps.rules || []),
+            ];
           }
         }
         return {
@@ -66,11 +69,14 @@ const scenes: YFormConfig = {
       item: ({ itemProps, componentProps, typeProps }) => {
         const _componentProps: modifyType['componentProps'] = {};
         const { label } = itemProps;
-        const { formatStr, showType } = merge({}, typeProps, itemProps);
+        const { formatStr } = merge({}, typeProps, itemProps);
 
         const _message = typeof label === 'string' && replaceMessage(formatStr || '', { label });
-        if (showType === 'input') {
-          _componentProps.placeholder = _message || '';
+        if (itemProps.name && typeProps.type !== 'list') {
+          // rangePicker 不需要设置 placeholder
+          if (typeProps.type !== 'rangePicker') {
+            _componentProps.placeholder = _message || '';
+          }
         }
         return {
           componentProps: { ..._componentProps, ...componentProps },
@@ -82,8 +88,7 @@ const scenes: YFormConfig = {
       item: ({ formProps, componentProps, itemProps, typeProps }) => {
         const _componentProps: modifyType['componentProps'] = {};
         const { disabled } = formProps;
-        const { showType } = merge({}, typeProps, itemProps);
-        if (showType === 'input') {
+        if (itemProps.name && typeProps.type !== 'list') {
           _componentProps.disabled = disabled;
         }
         return {
@@ -91,30 +96,73 @@ const scenes: YFormConfig = {
         };
       },
     },
-    // 查看情况下每个 item 并且 showType = input  使用 view 类型渲染
+    // 查看情况下每个 item 使用 view 类型渲染
     view: {
-      item: ({ itemProps, typeProps }) => {
-        const { showType } = merge({}, typeProps, itemProps);
+      item: ({ itemProps, typeProps, componentProps }) => {
         let _itemProps;
-        if (showType === 'input') {
+        let _componentProps;
+        if (itemProps.name && typeProps.type !== 'list') {
+          // 使用 ComponentView 组件渲染
           _itemProps = { className: 'mb0', type: 'view' };
+          // ComponentView 组件需要 itemProps 参数
+          _componentProps = { itemProps };
         }
+        let hasRequired = false;
+        forEach(itemProps.rules, (item) => {
+          if ('required' in item) {
+            hasRequired = item.required;
+          }
+        });
         return {
-          itemProps: { ...itemProps, ..._itemProps },
+          // 清空 rules ，避免提交会校验
+          // 如果之前是必填的，这里则保留红色 *
+          itemProps: { ...itemProps, ..._itemProps, rules: [], required: hasRequired },
+          componentProps: { ...componentProps, ..._componentProps },
         };
       },
     },
+    diff: {
+      item: (props) => {
+        const { formProps, itemProps, typeProps } = props;
+        const { diffProps: { oldValues } = {} } = formProps;
+
+        let _itemProps;
+        if (typeProps.type === 'list') {
+          _itemProps = {
+            addonBefore: [itemProps.addonBefore, <DiffSetFields key="append" {...props} />],
+          };
+        }
+        if (itemProps.name && typeProps.type !== 'list') {
+          _itemProps = {
+            addonAfter: [
+              itemProps.addonAfter,
+              <DiffDom
+                key="diff-dom"
+                type={typeProps.type}
+                oldValues={oldValues}
+                name={itemProps.name}
+                {...props}
+              />,
+            ],
+          };
+        }
+        return { itemProps: { ...itemProps, ..._itemProps } };
+      },
+    },
     // 搜索场景
     search: {
       form: ({ formProps }) => ({
         formProps: {
-          ...formProps,
-          className: classNames('yforms-search-form', formProps.className),
           // 搜索成功后不重置表单
           onCancel: () => {},
+          ...formProps,
+          // 搜索场景表单不必填
+          scenes: merge({}, { required: false }, formProps.scenes),
+          className: classNames('yforms-search-form', formProps.className),
         },
       }),
       items: ({ itemsProps }) => {
+        // 字段样式去掉
         return { itemsProps: { noStyle: true, ...itemsProps } };
       },
       item: ({ itemProps, componentProps }) => {
diff --git a/packages/yforms/src/YForm/scenesComps.tsx b/packages/yforms/src/YForm/scenesComps.tsx
new file mode 100644
index 0000000..8b54226
--- /dev/null
+++ b/packages/yforms/src/YForm/scenesComps.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { concat, get } from 'lodash';
+
+import { YForm } from '..';
+import { modifyType } from './ItemsType';
+import { YFormItemsProps, YFormItemProps } from './Items';
+
+const DiffSetFieldsChildren = (props: {
+  value: any[];
+  oldValue: any[];
+  name: YFormItemProps['name'];
+  form: YFormItemsProps['form'];
+}) => {
+  const {
+    name,
+    value,
+    form: { setFields },
+    oldValue,
+  } = props;
+  const diffLength = oldValue.length - value.length;
+  useEffect(() => {
+    if (diffLength > 0) {
+      setFields([{ name, value: concat(value, new Array(diffLength).fill(null)) }]);
+    }
+  }, [name, diffLength, value, setFields]);
+  return null;
+};
+const DiffSetFields = (props: modifyType) => {
+  const { itemProps, formProps } = props;
+  const { initialValues, diffProps: { oldValues } = {} } = formProps;
+  const context = React.useContext(YForm.ListContent);
+  const { name } = itemProps;
+  const _name = context.prefixName ? concat(context.prefixName, name) : name;
+  const value = get(initialValues, _name, []);
+
+  const oldValue = get(oldValues, _name, []);
+  return (
+    <YForm.Items>
+      {[
+        {
+          noStyle: true,
+          shouldUpdate: (prevValues, curValues) => {
+            return get(prevValues, _name, []).length !== get(curValues, _name, []).length;
+          },
+          children: (form) => (
+            <DiffSetFieldsChildren form={form} name={_name} value={value} oldValue={oldValue} />
+          ),
+        },
+      ]}
+    </YForm.Items>
+  );
+};
+
+export { DiffSetFields };
diff --git a/packages/yforms/src/YForm/utils.ts b/packages/yforms/src/YForm/utils.ts
index c0c958f..dab82d8 100644
--- a/packages/yforms/src/YForm/utils.ts
+++ b/packages/yforms/src/YForm/utils.ts
@@ -14,6 +14,7 @@ import {
 } from 'lodash';
 import { ColProps } from 'antd/lib/col';
 
+import warning from 'warning';
 import { stringAndFunc } from './ItemsType';
 import { FieldsType, KeyValue, ParamsType } from './Form';
 import { FormatFieldsValue } from './Items';
@@ -80,12 +81,12 @@ export const searchSelect = {
         const d = map(_value, (item) => {
           if (isValidElement(item)) {
             return getValue(item);
-          } else {
-            return item;
           }
+          return item;
         });
         return join(d, '');
-      } else if (isValidElement(_value)) {
+      }
+      if (isValidElement(_value)) {
         return getValue(_value);
       }
       return join(_value, '');
@@ -157,13 +158,22 @@ export function submitFormatValues<T>(
     if (!item) return;
     if (isArray(item.name)) {
       return -item.name.length;
-    } else {
-      return -`${item.name}`.length;
     }
+    return -`${item.name}`.length;
   });
   forEach(list, (item) => {
     if (item && item.name) {
-      set(_values, item.name, item.format({ ...values }));
+      // 如果字段是 undefined 则不需要执行 set 了
+      if (get(_values, item.name) !== undefined) {
+        try {
+          set(_values, item.name, item.format(get(values, item.name), { ...values }));
+        } catch (error) {
+          // 如果 format 代码报错这里抛出异常
+          // eslint-disable-next-line no-console
+          console.error(error);
+          warning(false, error);
+        }
+      }
     }
   });
   return _values;
diff --git a/now.json b/vercel.json
similarity index 100%
rename from now.json
rename to vercel.json