refactor: formula field should not trigger form value change (#3518)

* refactor: formula field should not trigger form value change

* style: list block style improve

packages/core/client/src/schema-component/antd/action/Action.Modal.tsx

@@ -60,22 +60,14 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
         )}
         footer={
           footerSchema ? (
-            <div
-              className={css`
-                display: flex;
-                justify-content: flex-end;
-                width: 100%;
-              `}
-            >
-              <RecursionField
-                basePath={field.address}
-                schema={schema}
-                onlyRenderProperties
-                filterProperties={(s) => {
-                  return s['x-component'] === footerNodeName;
-                }}
-              />
-            </div>
+            <RecursionField
+              basePath={field.address}
+              schema={schema}
+              onlyRenderProperties
+              filterProperties={(s) => {
+                return s['x-component'] === footerNodeName;
+              }}
+            />
           ) : (
             false
           )

packages/core/client/src/schema-component/antd/list/List.Decorator.tsx

@@ -40,7 +40,7 @@ const InternalListBlockProvider = (props) => {
                 line-height: 34px;
               }
               .ant-formily-item-feedback-layout-loose {
-                margin-bottom: 0;
+                margin-bottom: 12px;
               }
             `)}
           >

packages/core/client/src/schema-component/antd/list/List.Item.tsx

@@ -2,13 +2,26 @@ import React from 'react';
 import { ObjectField } from '@formily/core';
 import { useField } from '@formily/react';
 import classnames from 'classnames';
+import { css, cx } from '@emotion/css';
+import { useDesignable } from '../../hooks';
 
 import { RecordProvider } from '../../../record-provider';
 
 export const ListItem = (props) => {
   const field = useField<ObjectField>();
+  const { designable } = useDesignable();
   return (
-    <div className={classnames('itemCss', props.className)}>
+    <div
+      className={cx(classnames(props.className), [
+        'itemCss',
+        css`
+          .nb-action-bar {
+            gap: 20px !important;
+            margin-top: ${designable ? '20px' : '0px'};
+          }
+        `,
+      ])}
+    >
       <RecordProvider record={field.value}>{props.children}</RecordProvider>
     </div>
   );

packages/core/client/src/schema-component/antd/list/List.style.ts

@@ -2,12 +2,11 @@ import { genStyleHook } from '../__builtins__';
 
 const useStyles = genStyleHook('nb-list', (token) => {
   const { componentCls } = token;
-
   return {
     [componentCls]: {
       width: '100%',
-      marginBottom: token.marginLG,
-      '.nb-action-bar:not(:empty)': { marginTop: token.marginXS },
+      marginBottom: 0,
+      // '.nb-action-bar:not(:empty)': { marginTop: token.marginXS },
       '&:hover': { '> .general-schema-designer': { display: 'block' } },
       '> .general-schema-designer': {
         position: 'absolute',
@@ -35,12 +34,10 @@ const useStyles = genStyleHook('nb-list', (token) => {
           },
         },
       },
-
       '.itemCss': {
         display: 'flex',
         width: '100%',
         flexDirection: 'column',
-
         '&:not(:first-child)': {
           paddingTop: token.paddingContentVertical,
         },

packages/plugins/@nocobase/plugin-formula-field/src/client/components/Formula/Result.tsx

@@ -88,7 +88,7 @@ export function Result(props) {
         setEditingValue(v);
       }
       setEditingValue(v);
-      others?.onChange?.(v);
+      form.setValuesIn(fieldName, v);
     });
   });
   const Component = TypedComponents[dataType] ?? InputString;