feat: improve styling

packages/client/src/components/Sortable/index.tsx

@@ -76,7 +76,7 @@ export function Droppable(props: DroppableProps) {
   return (
     <Component
       {...others}
-      className={cls(className, `droppable-${id}`, {
+      className={cls(className, `droppable droppable-${id}`, {
         isOver,
       })}
       ref={(el: HTMLElement) => {
@@ -138,7 +138,7 @@ export function SortableItem(props: SortableItemProps) {
     <Component
       {...others}
       // {...attributes}
-      className={cls(className, `droppable-${id}`, {
+      className={cls(className, `droppable droppable-${id}`, {
         isOver,
         isDragging,
       })}

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

@@ -398,11 +398,27 @@ Menu.SubMenu = observer((props: any) => {
   ) : (
     <AntdMenu.SubMenu
       {...props}
-      icon={<IconPicker type={icon} />}
+      icon={null}
+      // icon={<IconPicker type={icon} />}
       title={
-        <>
-          {schema.title} <DesignableBar />
-        </>
+        <SortableItem
+          id={schema.name}
+          data={{
+            title: schema.title,
+            path: getSchemaPath(schema),
+          }}
+        >
+          {icon && (
+            <span style={{ marginRight: 10 }}>
+              <IconPicker type={icon} />
+            </span>
+          )}
+          {schema.title}
+          <DesignableBar />
+        </SortableItem>
+        // <>
+        //   {schema.title} <DesignableBar />
+        // </>
       }
       eventKey={schema.name}
       key={schema.name}
@@ -734,16 +750,13 @@ Menu.DesignableBar = (props) => {
                         _.set(initialValues, name, get(schema, name));
                       },
                     );
-                    const values = await FormDialog(
-                      `编辑菜单项`,
-                      () => {
+                    const values = await FormDialog(`编辑菜单项`, () => {
                       return (
                         <FormLayout layout={'vertical'}>
                           <SchemaField schema={formConfig.schema} />
                         </FormLayout>
                       );
-                      },
-                    ).open({
+                    }).open({
                       initialValues,
                     });
                     if (values.title) {

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

@@ -6,6 +6,10 @@
 
 .ant-menu-horizontal {
   width: 100%;
+  .ant-menu-item:active,
+  .ant-menu-submenu-title:active {
+    background-color: inherit !important;
+  }
 }
 
 .ant-menu-item-active .designable-bar {
@@ -110,3 +114,39 @@
 .nb-add-new-menu-item.menu-mode-inline {
   margin: 0 14px;
 }
+
+.ant-menu-horizontal {
+  .ant-menu-submenu,
+  .ant-menu-item {
+    .droppable.isDragging {
+      opacity: .2;
+    }
+    .droppable:not(.isDragging).isOver::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 2px;
+      background-color: #f18b62;
+    }
+  }
+}
+
+.ant-menu-inline {
+  .ant-menu-submenu,
+  .ant-menu-item {
+    .droppable.isDragging {
+      opacity: .2;
+    }
+    .droppable:not(.isDragging).isOver::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      width: 100%;
+      background-color: #f18b62;
+    }
+  }
+}

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

@@ -173,7 +173,13 @@ export function SortableHeaderRow(props) {
         }}
       >
         {createPortal(
-          <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>,
           document.body,

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

@@ -243,3 +243,19 @@ td.nb-table-operation {
   margin-top: -13px;
   margin-bottom: -13px;
 }
+
+.ant-table-cell {
+  &.droppable.isDragging {
+    opacity: .5;
+    background-color: rgba(241, 139, 98, 0.06) !important;
+  }
+  &.droppable:not(.isDragging).isOver::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 2px;
+    background-color: #f18b62;
+  }
+}