From dde1bd4fc2cf7947156853538021e59c1ff0952e Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Fri, 3 Sep 2021 15:52:58 +0800
Subject: [PATCH] feat: improve styling

---
 .../client/src/schemas/action/ActionBar.tsx   | 17 ++++++++++---
 packages/client/src/schemas/table/index.tsx   | 13 ++++++++--
 packages/client/src/schemas/table/style.less  | 25 +++++++++++++++++++
 packages/client/src/schemas/tabs/index.tsx    |  8 +++++-
 packages/client/src/schemas/tabs/style.less   | 22 ++++++++++++++++
 5 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/schemas/action/ActionBar.tsx b/packages/client/src/schemas/action/ActionBar.tsx
index 52d6f77ac..1215e377e 100644
--- a/packages/client/src/schemas/action/ActionBar.tsx
+++ b/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>
diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx
index f8ab0e596..f17c27e61 100644
--- a/packages/client/src/schemas/table/index.tsx
+++ b/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>
diff --git a/packages/client/src/schemas/table/style.less b/packages/client/src/schemas/table/style.less
index fa5bb4204..a18a70ff8 100644
--- a/packages/client/src/schemas/table/style.less
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/packages/client/src/schemas/tabs/index.tsx b/packages/client/src/schemas/tabs/index.tsx
index da49a9985..39316a690 100644
--- a/packages/client/src/schemas/tabs/index.tsx
+++ b/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
diff --git a/packages/client/src/schemas/tabs/style.less b/packages/client/src/schemas/tabs/style.less
index b4d127fe5..6c43e61cc 100644
--- a/packages/client/src/schemas/tabs/style.less
+++ b/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;
+  }
 }
\ No newline at end of file