From f2dc49c7c08b19169eda0c0bd251ee1f1054860f Mon Sep 17 00:00:00 2001
From: katherinehhh <shunai.tang@hand-china.com>
Date: Thu, 22 Feb 2024 08:25:23 +0800
Subject: [PATCH] refactor: formula field should not trigger form value change
 (#3518)

* refactor: formula field should not trigger form value change

* style: list block style improve
---
 .../antd/action/Action.Modal.tsx              | 24 +++++++------------
 .../antd/list/List.Decorator.tsx              |  2 +-
 .../schema-component/antd/list/List.Item.tsx  | 15 +++++++++++-
 .../schema-component/antd/list/List.style.ts  |  7 ++----
 .../src/client/components/Formula/Result.tsx  |  2 +-
 5 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
index 1a56987193..a04dc02fd8 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/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
           )
diff --git a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx b/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
index adbb182fb2..ed412aa820 100644
--- a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
+++ b/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;
               }
             `)}
           >
diff --git a/packages/core/client/src/schema-component/antd/list/List.Item.tsx b/packages/core/client/src/schema-component/antd/list/List.Item.tsx
index de640b6f14..786e397d32 100644
--- a/packages/core/client/src/schema-component/antd/list/List.Item.tsx
+++ b/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>
   );
diff --git a/packages/core/client/src/schema-component/antd/list/List.style.ts b/packages/core/client/src/schema-component/antd/list/List.style.ts
index 18e85fcc01..df67186a3a 100644
--- a/packages/core/client/src/schema-component/antd/list/List.style.ts
+++ b/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,
         },
diff --git a/packages/plugins/@nocobase/plugin-formula-field/src/client/components/Formula/Result.tsx b/packages/plugins/@nocobase/plugin-formula-field/src/client/components/Formula/Result.tsx
index f6f0aebbb5..887748ce13 100644
--- a/packages/plugins/@nocobase/plugin-formula-field/src/client/components/Formula/Result.tsx
+++ b/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;