From 362a83804eaee9d172389fb0f0448af3cad25f4f Mon Sep 17 00:00:00 2001
From: Katherine <shunai.tang@hand-china.com>
Date: Thu, 20 Jun 2024 14:40:54 +0800
Subject: [PATCH] fix(grid): grid style (#4715)

* fix: grid style

* fix: bug
---
 .../antd/action/ActionBar.tsx                 |  2 +-
 .../schema-component/antd/form-v2/Form.tsx    |  9 +-
 .../src/schema-component/antd/form-v2/hook.ts | 13 +--
 .../src/schema-component/antd/grid/Grid.tsx   | 88 +++++++++----------
 4 files changed, 50 insertions(+), 62 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
index 62c10bb57a..ac17ee46d8 100644
--- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
@@ -73,7 +73,7 @@ export const ActionBar = withDynamicSchemaProps(
         <Portal>
           <DndContext>
             <div
-              style={{ display: 'flex', alignItems: 'center', gap: 8, ...style, marginTop: token.marginLG }}
+              style={{ display: 'flex', alignItems: 'center', gap: 8, ...style }}
               {...others}
               className={cx(others.className, 'nb-action-bar')}
             >
diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
index b1e017ca51..33b4171253 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
@@ -52,14 +52,11 @@ const FormComponent: React.FC<FormProps> = (props) => {
         <FormLayout layout={'vertical'} {...others}>
           <div
             className={css`
-              .nb-grid {
+              .nb-grid-container {
                 height: ${height ? height + 'px' : '100%'};
                 overflow-y: auto;
-                .nb-grid-warp {
-                  width: 100%;
-                  overflow-x: clip;
-                  padding-right: ${token.paddingSM + 'px'};
-                }
+                margin: 0px -${token.marginLG}px;
+                padding: 0px ${token.paddingLG}px;
               }
             `}
           >
diff --git a/packages/core/client/src/schema-component/antd/form-v2/hook.ts b/packages/core/client/src/schema-component/antd/form-v2/hook.ts
index 4e536910c1..82828ccfa3 100644
--- a/packages/core/client/src/schema-component/antd/form-v2/hook.ts
+++ b/packages/core/client/src/schema-component/antd/form-v2/hook.ts
@@ -29,23 +29,14 @@ export const useFormBlockHeight = () => {
     }
     return buf;
   });
-  const isFilterForm = schema.parent?.['x-decorator'] === 'FilterFormBlockProvider';
-  const isDetailForm = schema.parent?.['x-decorator'] === 'DetailsBlockProvider';
 
   const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0;
-  const unDesignableActionBar = () => {
-    return token.marginLG;
-  };
-  const actionBarHeight =
-    hasFormActions || designable
-      ? token.controlHeight +
-        (isFilterForm || !isDetailForm ? (designable ? 2 : 1) * token.marginLG : 2 * token.marginLG)
-      : unDesignableActionBar();
+  const actionBarHeight = hasFormActions || designable ? token.controlHeight + 2 * token.marginLG : 2 * token.marginLG;
   const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
   const { data } = useDataBlockRequest() || {};
   const { count, pageSize } = (data as any)?.meta || ({} as any);
   const hasPagination = count > pageSize;
-  const paginationHeight = hasPagination ? token.controlHeightSM + (designable ? 1 : 0) * token.paddingLG : 0;
+  const paginationHeight = hasPagination ? token.controlHeightSM + 1 * token.paddingLG : 0;
   const dataTemplateHeight = display && enabled ? token.controlHeight + 2 * token.padding + token.margin : 0;
   return height - actionBarHeight - token.paddingLG - blockTitleHeaderHeight - paginationHeight - dataTemplateHeight;
 };
diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
index 45df2e5b5d..9d2d29a475 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -361,57 +361,57 @@ export const Grid: any = observer(
         <GridContext.Provider value={gridContextValue}>
           <div
             className={cls(
-              `nb-grid ${styles.container}`,
+              'nb-grid-container',
               css`
                 & {
                   margin-bottom: ${designable ? 0 : -token.marginLG}px;
                 }
               `,
             )}
-            style={{ position: 'relative' }}
-            ref={gridRef}
           >
-            <div className="nb-grid-warp">
-              <DndWrapper dndContext={props.dndContext}>
-                {showDivider ? (
-                  <RowDivider
-                    rows={rows}
-                    first
-                    id={`${addr}_0`}
-                    data={{
-                      breakRemoveOn: breakRemoveOnGrid,
-                      wrapSchema: wrapRowSchema,
-                      insertAdjacent: 'afterBegin',
-                      schema: fieldSchema,
-                    }}
-                  />
-                ) : null}
-                {rows.map((schema, index) => {
-                  return (
-                    <React.Fragment key={index}>
-                      {distributedValue ? (
-                        <SchemaComponent name={schema.name} schema={schema} distributed />
-                      ) : (
-                        <MemorizedRecursionField name={schema.name} schema={schema} />
-                      )}
-                      {showDivider ? (
-                        <RowDivider
-                          rows={rows}
-                          index={index}
-                          id={`${addr}_${index + 1}`}
-                          data={{
-                            breakRemoveOn: breakRemoveOnGrid,
-                            wrapSchema: wrapRowSchema,
-                            insertAdjacent: 'afterEnd',
-                            schema,
-                          }}
-                        />
-                      ) : null}
-                    </React.Fragment>
-                  );
-                })}
-              </DndWrapper>
-              {render()}
+            <div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
+              <div className="nb-grid-warp">
+                <DndWrapper dndContext={props.dndContext}>
+                  {showDivider ? (
+                    <RowDivider
+                      rows={rows}
+                      first
+                      id={`${addr}_0`}
+                      data={{
+                        breakRemoveOn: breakRemoveOnGrid,
+                        wrapSchema: wrapRowSchema,
+                        insertAdjacent: 'afterBegin',
+                        schema: fieldSchema,
+                      }}
+                    />
+                  ) : null}
+                  {rows.map((schema, index) => {
+                    return (
+                      <React.Fragment key={index}>
+                        {distributedValue ? (
+                          <SchemaComponent name={schema.name} schema={schema} distributed />
+                        ) : (
+                          <MemorizedRecursionField name={schema.name} schema={schema} />
+                        )}
+                        {showDivider ? (
+                          <RowDivider
+                            rows={rows}
+                            index={index}
+                            id={`${addr}_${index + 1}`}
+                            data={{
+                              breakRemoveOn: breakRemoveOnGrid,
+                              wrapSchema: wrapRowSchema,
+                              insertAdjacent: 'afterEnd',
+                              schema,
+                            }}
+                          />
+                        ) : null}
+                      </React.Fragment>
+                    );
+                  })}
+                </DndWrapper>
+                {render()}
+              </div>
             </div>
           </div>
         </GridContext.Provider>