fix: FixedBlock related ui (#1632)

* fix: the AssociationFilter

* feat: grid dragging area support compact theme

packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx

@@ -8,6 +8,7 @@ import { SortableItem } from '../../common';
 import { useCompile, useDesigner, useProps } from '../../hooks';
 import { getLabelFormatValue, useLabelUiSchema } from '../record-picker';
 import { AssociationFilter } from './AssociationFilter';
+import { EllipsisWithTooltip } from '../input';
 
 const { Panel } = Collapse;
 
@@ -218,13 +219,22 @@ export const AssociationFilterItem = (props) => {
           <Tree
             style={{ padding: '16px 0' }}
             onExpand={onExpand}
+            rootClassName={css`
+              .ant-tree-node-content-wrapper {
+                overflow-x: hidden;
+              }
+            `}
             expandedKeys={expandedKeys}
             autoExpandParent={autoExpandParent}
             treeData={list}
             onSelect={onSelect}
             fieldNames={fieldNames}
             titleRender={(node) => {
-              return getLabelFormatValue(labelUiSchema, compile(node[labelKey]));
+              return (
+                <EllipsisWithTooltip ellipsis>
+                  {getLabelFormatValue(labelUiSchema, compile(node[labelKey]))}
+                </EllipsisWithTooltip>
+              );
             }}
             selectedKeys={selectedKeys}
             blockNode

packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx

@@ -26,6 +26,8 @@ export const AssociationFilter = (props) => {
           'nb-block-item',
           props.className,
           css`
+            height: 100%;
+            overflow-y: auto;
             position: relative;
             &:hover {
               > .general-schema-designer {

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -126,7 +126,7 @@ const ColDivider = (props) => {
       className={cls(
         'nb-col-divider',
         css`
-          width: 24px;
+          width: var(--nb-spacing);
         `,
       )}
       style={{ ...droppableStyle }}
@@ -152,7 +152,7 @@ const ColDivider = (props) => {
                     background: rgba(241, 139, 98, 0.06) !important;
                   }
                 }
-                width: 24px;
+                width: var(--nb-spacing);
                 height: 100%;
                 position: absolute;
                 cursor: col-resize;
@@ -219,10 +219,10 @@ const RowDivider = (props) => {
       className={cls(
         'nb-row-divider',
         css`
-          height: 24px;
+          height: var(--nb-spacing);
           width: 100%;
           position: absolute;
-          margin-top: -24px;
+          margin-top: calc(-1 * var(--nb-spacing));
         `,
       )}
       style={{
@@ -370,7 +370,7 @@ Grid.Row = observer(() => {
         className={cls(
           'nb-grid-row',
           css`
-            margin: 0 -24px;
+            margin: 0 calc(-1 * var(--nb-spacing));
             display: flex;
             position: relative;
             /* z-index: 0; */
@@ -419,7 +419,7 @@ Grid.Col = observer((props: any) => {
   let width = '';
   if (cols?.length) {
     const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
-    width = `calc(${w}% - 24px - 24px / ${cols.length})`;
+    width = `calc(${w}% - var(--nb-spacing) * 2 / ${cols.length})`;
   }
   const { setNodeRef } = useDroppable({
     id: field.address.toString(),

packages/core/client/src/schema-component/antd/index.less

@@ -16,7 +16,11 @@
   font-size: inherit !important;
 }
 
+:root {
+  --nb-spacing: 24px;
+}
 .theme-compact {
+  --nb-spacing: 16px;
   .ant-formily-item {
     margin-bottom: 16px;
   }