feat: improve styling

packages/client/src/schemas/action/ActionBar.tsx

@@ -86,7 +86,13 @@ export const ActionBar = observer((props: any) => {
         }
       }}
     >
-      <DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
+      <DragOverlay
+        dropAnimation={{
+          duration: 10,
+          easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+        }}
+        style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
+      >
         {dragOverlayContent}
         {/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
       </DragOverlay>
@@ -160,7 +166,7 @@ function generateActionSchema(type) {
       'x-component-props': {
         confirm: {
           title: '删除数据',
-          content: '删除后无法恢复，确定要删除吗？'
+          content: '删除后无法恢复，确定要删除吗？',
         },
         useAction: '{{ Table.useTableDestroyAction }}',
       },
@@ -218,7 +224,12 @@ function AddActionButton() {
         </Menu>
       }
     >
-      <Button className={'designable-btn designable-btn-dash'} style={{ marginLeft: 8 }} type={'dashed'} icon={<PlusOutlined />}>
+      <Button
+        className={'designable-btn designable-btn-dash'}
+        style={{ marginLeft: 8 }}
+        type={'dashed'}
+        icon={<PlusOutlined />}
+      >
         配置操作
       </Button>
     </Dropdown>

packages/client/src/schemas/table/index.tsx

@@ -593,7 +593,10 @@ function AddColumn() {
                       const values = await FormDialog(`添加字段`, () => {
                         return (
                           <FormLayout layout={'vertical'}>
-                            <SchemaField scope={{ loadCollections }} schema={item} />
+                            <SchemaField
+                              scope={{ loadCollections }}
+                              schema={item}
+                            />
                           </FormLayout>
                         );
                       }).open({
@@ -1368,7 +1371,13 @@ Table.ActionBar = observer((props: any) => {
         }
       }}
     >
-      <DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
+      <DragOverlay
+        dropAnimation={{
+          duration: 10,
+          easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+        }}
+        style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
+      >
         {dragOverlayContent}
         {/* <div style={{ transform: 'translateX(-100%)' }} dangerouslySetInnerHTML={{__html: dragOverlayContent}}></div> */}
       </DragOverlay>

packages/client/src/schemas/table/style.less

@@ -264,4 +264,29 @@ td.nb-table-operation {
     width: 2px;
     background-color: #f18b62;
   }
+}
+
+.ant-space-item {
+  .droppable {
+    position: relative;
+  }
+  .droppable.isDragging::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #f18b62;
+    opacity: .3;
+  }
+  .droppable:not(.isDragging).isOver::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -5px;
+    height: 100%;
+    width: 2px;
+    background-color: #f18b62;
+  }
 }

packages/client/src/schemas/tabs/index.tsx

@@ -105,7 +105,13 @@ export const Tabs: any = observer((props: any) => {
           await updateSchema(data);
         }}
       >
-        <DragOverlay style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}>
+        <DragOverlay
+          dropAnimation={{
+            duration: 10,
+            easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+          }}
+          style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
+        >
           {dragOverlayContent}
         </DragOverlay>
         <AntdTabs

packages/client/src/schemas/tabs/style.less

@@ -80,4 +80,26 @@
     margin: -24px;
     padding: 24px;
   }
+}
+
+.ant-tabs-tab-btn {
+  .droppable.isDragging::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -16px;
+    height: 100%;
+    left: -16px;
+    background-color: #f18b62;
+    opacity: .3;
+  }
+  .droppable:not(.isDragging).isOver::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -16px;
+    height: 100%;
+    width: 2px;
+    background-color: #f18b62;
+  }
 }