diff --git a/designable/antd/package.json b/designable/antd/package.json
index 80ece923842..85c442d6650 100644
--- a/designable/antd/package.json
+++ b/designable/antd/package.json
@@ -30,7 +30,7 @@
     "start": "webpack-dev-server --config playground/webpack.dev.ts"
   },
   "devDependencies": {
-    "@designable/react-settings-form": "^0.4.2",
+    "@designable/react-settings-form": "^0.4.7",
     "autoprefixer": "^9.0",
     "file-loader": "^5.0.2",
     "fs-extra": "^8.1.0",
@@ -56,9 +56,9 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.2",
-    "@designable/formily": "^0.4.2",
-    "@designable/react": "^0.4.2",
+    "@designable/core": "^0.4.7",
+    "@designable/formily": "^0.4.7",
+    "@designable/react": "^0.4.7",
     "@formily/antd": "2.0.0-beta.77",
     "@formily/core": "2.0.0-beta.77",
     "@formily/react": "2.0.0-beta.77",
diff --git a/designable/antd/playground/template.ejs b/designable/antd/playground/template.ejs
index 034b95f4fcf..a859d890a89 100644
--- a/designable/antd/playground/template.ejs
+++ b/designable/antd/playground/template.ejs
@@ -14,7 +14,7 @@
   <div id="root">
   </div>
   <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
-  <script src="https://unpkg.com/react/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
 </body>
\ No newline at end of file
diff --git a/designable/setters/package.json b/designable/setters/package.json
index fe1b953f539..f49c30ba0d0 100644
--- a/designable/setters/package.json
+++ b/designable/setters/package.json
@@ -40,10 +40,11 @@
     "react-is": ">=16.8.0 || >=17.0.0"
   },
   "dependencies": {
-    "@designable/core": "^0.4.2",
-    "@designable/formily": "^0.4.2",
-    "@designable/react": "^0.4.2",
-    "@designable/react-settings-form": "^0.4.2",
+    "@designable/core": "^0.4.7",
+    "@designable/formily": "^0.4.7",
+    "@designable/react": "^0.4.7",
+    "@designable/shared": "^0.4.7",
+    "@designable/react-settings-form": "^0.4.7",
     "@formily/antd": "2.0.0-beta.77",
     "@formily/core": "2.0.0-beta.77",
     "@formily/react": "2.0.0-beta.77",
diff --git a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx b/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx
index 23e0006161d..3532c14a408 100644
--- a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx
+++ b/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx
@@ -55,10 +55,10 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
   return (
     <div className={prefix}>
       <Menu
-        mode="inline"
+        mode="vertical"
         style={{
           width: 240,
-          height: 300,
+          height: 200,
           paddingRight: 4,
           overflowY: 'auto',
           overflowX: 'hidden',
@@ -88,8 +88,8 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
       </Menu>
       <div className={prefix + '-coder-wrapper'}>
         <div
-          className={prefix + '-coder-title'}
-        >{`$self.${selectKeys[0]} = `}</div>
+          className={prefix + '-coder-start'}
+        >{`$self.${selectKeys[0]} = {{`}</div>
         <div className={prefix + '-coder'}>
           <MonacoInput
             key={selectKeys[0]}
@@ -108,6 +108,7 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
             }}
           />
         </div>
+        <div className={prefix + '-coder-end'}>{`}}`}</div>
       </div>
     </div>
   )
diff --git a/designable/setters/src/components/ReactionsSetter/index.tsx b/designable/setters/src/components/ReactionsSetter/index.tsx
index d06867db408..844dc3fce64 100644
--- a/designable/setters/src/components/ReactionsSetter/index.tsx
+++ b/designable/setters/src/components/ReactionsSetter/index.tsx
@@ -3,9 +3,10 @@ import { clone } from '@formily/shared'
 import { createForm, isVoidField } from '@formily/core'
 import { createSchemaField } from '@formily/react'
 import { GlobalRegistry } from '@designable/core'
+import { requestIdle } from '@designable/shared'
 import { usePrefix, TextWidget } from '@designable/react'
 import { MonacoInput } from '@designable/react-settings-form'
-import { Form, ArrayTable, Input, FormItem } from '@formily/antd'
+import { Form, ArrayTable, Input, FormItem, FormCollapse } from '@formily/antd'
 import { Modal, Card, Button } from 'antd'
 import { PathSelector } from './PathSelector'
 import { FieldPropertySetter } from './FieldPropertySetter'
@@ -20,6 +21,7 @@ export interface IReactionsSetterProps {
 const SchemaField = createSchemaField({
   components: {
     Card,
+    FormCollapse,
     Input,
     FormItem,
     PathSelector,
@@ -42,9 +44,14 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
   const closeModal = () => setModalVisible(false)
   useEffect(() => {
     if (modalVisible) {
-      requestIdleCallback(() => {
-        setInnerVisible(true)
-      })
+      requestIdle(
+        () => {
+          setInnerVisible(true)
+        },
+        {
+          timeout: 400,
+        }
+      )
     } else {
       setInnerVisible(false)
     }
@@ -59,6 +66,7 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
           'SettingComponents.ReactionsSetter.configureReactions'
         )}
         width="65%"
+        centered
         bodyStyle={{ padding: 10 }}
         transitionName=""
         maskTransitionName=""
@@ -210,25 +218,30 @@ export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
                   />
                 </SchemaField.Void>
                 <SchemaField.Void
-                  x-component="Card"
+                  x-component="FormCollapse"
                   x-component-props={{
-                    title: GlobalRegistry.getDesignerMessage(
-                      'SettingComponents.ReactionsSetter.actionReactions'
-                    ),
-                    size: 'small',
-                    type: 'inner',
                     style: { marginBottom: 10 },
                   }}
                 >
-                  <SchemaField.String
-                    name="fulfill.run"
-                    x-component="MonacoInput"
+                  <SchemaField.Void
+                    x-component="FormCollapse.CollapsePanel"
                     x-component-props={{
-                      width: '100%',
-                      height: 200,
-                      language: 'typescript',
+                      key: 'run',
+                      header: GlobalRegistry.getDesignerMessage(
+                        'SettingComponents.ReactionsSetter.actionReactions'
+                      ),
                     }}
-                  />
+                  >
+                    <SchemaField.String
+                      name="fulfill.run"
+                      x-component="MonacoInput"
+                      x-component-props={{
+                        width: '100%',
+                        height: 200,
+                        language: 'typescript',
+                      }}
+                    />
+                  </SchemaField.Void>
                 </SchemaField.Void>
               </SchemaField>
             </Form>
diff --git a/designable/setters/src/components/ReactionsSetter/styles.less b/designable/setters/src/components/ReactionsSetter/styles.less
index 9bd67b12b95..96c51451b36 100644
--- a/designable/setters/src/components/ReactionsSetter/styles.less
+++ b/designable/setters/src/components/ReactionsSetter/styles.less
@@ -2,7 +2,7 @@
 
 .dn-reactions-setter {
   width: 100%;
-  min-height: 600px;
+  min-height: 523px;
 
   ::-webkit-scrollbar {
     width: 5px;
@@ -18,29 +18,73 @@
   ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(0, 0, 0, 0.3);
   }
+
+  .@{ant-prefix}-collapse {
+    border: 1px solid @border-color-split;
+
+    &-header {
+      padding: 8px 10px !important;
+      background-color: @background-color-light  !important;
+      border-bottom: 1px solid @border-color-split  !important;
+      font-weight: 500 !important;
+
+      .@{ant-prefix}-collapse-arrow {
+        margin-right: 4px !important;
+      }
+    }
+
+    &-item {
+      border: none !important;
+    }
+
+    &-content {
+      border: none !important;
+    }
+
+    &-content-box {
+      padding: 12px 0 12px 0 !important;
+    }
+  }
 }
 
 .dn-field-property-setter {
   display: flex;
-  height: 300px;
+  height: 200px;
 
   &-coder-wrapper {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    flex-grow: 2;
     height: 100%;
+    padding-left: 4px;
     position: relative;
   }
 
-  &-coder-title {
-    font-size: 30px;
+  &-coder-start {
+    font-size: 18px;
+    line-height: 30px;
+    margin-bottom: 4px;
+    color: @text-color;
+    padding-left: 20px;
+    font-weight: 300;
+    flex-grow: 0;
+    opacity: 0.96;
+  }
+
+  &-coder-end {
+    font-size: 18px;
     color: @text-color;
-    padding-left: 68px;
-    padding-bottom: 10px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-left: 20px;
+    line-height: 30px;
+    font-weight: 300;
+    flex-grow: 0;
+    opacity: 0.96;
   }
 
   &-coder {
     min-width: 0;
     flex-grow: 2;
   }
-}
+}
\ No newline at end of file
diff --git a/designable/setters/src/locales/en-US.ts b/designable/setters/src/locales/en-US.ts
index c53f3470bb7..cd20f808e9a 100644
--- a/designable/setters/src/locales/en-US.ts
+++ b/designable/setters/src/locales/en-US.ts
@@ -40,6 +40,7 @@ export default {
         componentProps: 'Component Props',
         decorator: 'Decorator',
         decoratorProps: 'Decorator Props',
+        pleaseSelect: 'Please Select',
       },
     },
   },
diff --git a/designable/setters/src/locales/zh-CN.ts b/designable/setters/src/locales/zh-CN.ts
index d669e47bcad..9a54015e0fc 100644
--- a/designable/setters/src/locales/zh-CN.ts
+++ b/designable/setters/src/locales/zh-CN.ts
@@ -38,6 +38,7 @@ export default {
         componentProps: '组件属性',
         decorator: '容器',
         decoratorProps: '容器属性',
+        pleaseSelect: '请选择',
       },
     },
   },
diff --git a/packages/core/src/__tests__/form.spec.ts b/packages/core/src/__tests__/form.spec.ts
index dadd98819ef..b0dac11de93 100644
--- a/packages/core/src/__tests__/form.spec.ts
+++ b/packages/core/src/__tests__/form.spec.ts
@@ -1092,3 +1092,26 @@ test('form lifecycle can be triggered after call form.setXXX', () => {
   expect(initialValuesTriggerNum).toEqual(3)
   expect(valuesTriggerNum).toEqual(6)
 })
+
+test('form values change with array field(default value)', async () => {
+  const handler = jest.fn()
+  const form = attach(
+    createForm({
+      effects() {
+        onFormValuesChange(handler)
+      },
+    })
+  )
+  const array = attach(
+    form.createArrayField({
+      name: 'array',
+      initialValue: [
+        {
+          hello: 'world',
+        },
+      ],
+    })
+  )
+  await array.push({})
+  expect(handler).toBeCalledTimes(2)
+})
diff --git a/packages/core/src/shared/internals.ts b/packages/core/src/shared/internals.ts
index 34ad0932508..1fd2be0c26f 100644
--- a/packages/core/src/shared/internals.ts
+++ b/packages/core/src/shared/internals.ts
@@ -10,6 +10,7 @@ import {
   isPlainObj,
   toArr,
   isNumberLike,
+  shallowClone,
 } from '@formily/shared'
 import { ValidatorTriggerType, validate } from '@formily/validator'
 import { action, batch, toJS } from '@formily/reactive'
@@ -432,16 +433,16 @@ export const initFieldValue = (field: Field, designable: boolean) => {
       field.props.initialValue
     )
     if (isEmptyValue && !isEmptyInitialValue) {
-      field.value = field.props.initialValue
+      field.value = shallowClone(field.props.initialValue)
     } else if (isValid(field.props.value)) {
       field.value = field.props.value
     } else if (isValid(field.props.initialValue)) {
-      field.value = field.props.initialValue
+      field.value = shallowClone(field.props.initialValue)
     }
   }
   if (designable) {
     if (isValid(field.props.initialValue)) {
-      field.initialValue = field.props.initialValue
+      field.initialValue = shallowClone(field.props.initialValue)
     }
     if (isValid(field.props.value)) {
       field.value = field.props.value
diff --git a/yarn.lock b/yarn.lock
index ce0e306136e..65082183979 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1156,12 +1156,12 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
   integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
 
-"@designable/core@0.4.2", "@designable/core@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.2.tgz#999cf5fe2c397f5285a6729b1e4f5145bc7b67bc"
-  integrity sha512-+f0Bq2kupI7ZOe7Wsqr8ZfF/pD+Ls8W7rBHjnx4Raq2NT0+eWadIPyYFo7R/Wa5zfzubqy9mevY4YAl7t8T2fA==
+"@designable/core@0.4.6", "@designable/core@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.6.tgz#46a2ac8b19a7f00920b19b41f533ddcf677aa12f"
+  integrity sha512-BDihc1NY9CH11lqRjok0HatF7crgxIv1ZiBEeuCDa4OiL4uHD6ZPpb/AmiTxXi7/wFxmsagwIeMjQlcXBvdEWA==
   dependencies:
-    "@designable/shared" "0.4.2"
+    "@designable/shared" "0.4.6"
     "@formily/json-schema" "^2.0.0-beta.76"
     "@formily/path" "^2.0.0-beta.76"
     "@formily/reactive" "^2.0.0-beta.76"
@@ -1178,25 +1178,25 @@
     "@formily/reactive" "^2.0.0-beta.50"
     "@juggle/resize-observer" "^3.3.1"
 
-"@designable/formily@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.2.tgz#201347f3ae68153fbf65b92a45ec66bd0d81a58b"
-  integrity sha512-CXCvkov25oTQr4vLF3ZyEGTlCpDzL22ZQBY9QQAtAQJ73lzHOoyHeViMAIZdWQcvEQqv4O/vD0kDXPADmmc8GQ==
+"@designable/formily@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.6.tgz#1a1596540885d95f842e550bedb2ac8f791721a7"
+  integrity sha512-/JI62dMkIU7BSCvZbnf0uMhY7+i0Yfo31b4OLrUA5uDIjHdNETYtqO+StV9hbt+ZR3F2NL/xwSMPcEFaxUTIJg==
   dependencies:
-    "@designable/core" "0.4.2"
-    "@designable/shared" "0.4.2"
+    "@designable/core" "0.4.6"
+    "@designable/shared" "0.4.6"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/json-schema" "^2.0.0-beta.76"
 
-"@designable/react-settings-form@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.2.tgz#e7acc759aa90c3bf2b072a6267e68faf8a421f5a"
-  integrity sha512-C9zuJ6dm8kNvapGMhwcuJxsm5sndN+1iGozGo+EgF7PDuHz+NGL7MepZReY9nld1V2H7ZssTi67aPVouOUmS9A==
+"@designable/react-settings-form@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.6.tgz#9ad93b7594666606f1563d9d3aba89cfd9c96826"
+  integrity sha512-xUnH13a1seupUtQU/JxTHALFYfU4mAEpg+EqSV6oYEkW86VHymJSz3a18YaR0dAj1ITUMU8DJLfvrCHjWrkdFg==
   dependencies:
     "@babel/parser" "^7.14.7"
-    "@designable/core" "0.4.2"
-    "@designable/react" "0.4.2"
-    "@designable/shared" "0.4.2"
+    "@designable/core" "0.4.6"
+    "@designable/react" "0.4.6"
+    "@designable/shared" "0.4.6"
     "@formily/antd" "^2.0.0-beta.76"
     "@formily/core" "^2.0.0-beta.76"
     "@formily/react" "^2.0.0-beta.76"
@@ -1209,13 +1209,13 @@
     react-color "^2.19.3"
     react-tiny-popover "^6.0.5"
 
-"@designable/react@0.4.2", "@designable/react@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.2.tgz#3912c35b53e88d9ae4750055f43b462386db3120"
-  integrity sha512-R5TmkI/uJNHo1gw8vJj+1oV0/Yo6spb6Vg5LgDoV23ru3tV5cTzOZA3XO8NKMpJTQtPoDtHjM2tnzWIeCHc7ew==
+"@designable/react@0.4.6", "@designable/react@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.6.tgz#fcf70ee10ef9ac3e3d07bafed37d13f40a9a2255"
+  integrity sha512-r3/93hw3/vTSGyDhS369omJSI3bhaggm7Kwmv2YyyVgGmpBarq8glhBoS/zBkSMRlWsEgjPZEncCNUYdJVzu5w==
   dependencies:
-    "@designable/core" "0.4.2"
-    "@designable/shared" "0.4.2"
+    "@designable/core" "0.4.6"
+    "@designable/shared" "0.4.6"
     "@formily/reactive" "^2.0.0-beta.76"
     "@formily/reactive-react" "^2.0.0-beta.76"
     "@juggle/resize-observer" "^3.3.1"
@@ -1227,10 +1227,10 @@
   dependencies:
     requestidlecallback "^0.3.0"
 
-"@designable/shared@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.2.tgz#6a81ed933aebc7b9bff6ffe8680d66db9c6c63f0"
-  integrity sha512-5mDqVcybv4lSKE1dOJy9J3ky+t2oPpdMLTYydVgYcOrhbzf1aRacS82C4kVNja20TWcncGKBZrryXRmts189bg==
+"@designable/shared@0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.6.tgz#1b59550513b84d9717bf7c06e79340b9f532230e"
+  integrity sha512-MLwsZ+sOyALTC09bYr2WdOweO8dzGo/wnk5v5xojewfS6fxZfGWbNPADXRwXaRROjIQaEsS0nIuU6eJLzdTf+A==
   dependencies:
     requestidlecallback "^0.3.0"