feat(client): improve code

packages/client/src/schema-component/antd/block-item/BlockItem.tsx

@@ -1,3 +1,5 @@
+import { css } from '@emotion/css';
+import cls from 'classnames';
 import React from 'react';
 import { SortableItem } from '../../common';
 import { useDesigner } from '../../hooks';
@@ -5,7 +7,55 @@ import { useDesigner } from '../../hooks';
 export const BlockItem: React.FC<any> = (props) => {
   const Designer = useDesigner();
   return (
-    <SortableItem className={'nb-block-item'} style={{ position: 'relative' }}>
+    <SortableItem
+      className={cls(
+        'nb-block-item',
+        props.className,
+        css`
+          position: relative;
+          &:hover {
+            > .general-schema-designer {
+              display: block;
+            }
+          }
+          &.nb-form-item:hover {
+            .general-schema-designer {
+              background: rgba(241, 139, 98, 0.06) !important;
+              border: 0 !important;
+              top: -5px !important;
+              bottom: -5px !important;
+              left: -5px !important;
+              right: -5px !important;
+            }
+          }
+          .general-schema-designer {
+            position: absolute;
+            z-index: 999;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            display: none;
+            border: 2px solid rgba(241, 139, 98, 0.3);
+            pointer-events: none;
+            .general-schema-designer-icons {
+              position: absolute;
+              right: 2px;
+              top: 2px;
+              line-height: 16px;
+              pointer-events: all;
+              .ant-space-item {
+                background-color: #f18b62;
+                color: #fff;
+                line-height: 16px;
+                width: 16px;
+                padding-left: 1px;
+              }
+            }
+          }
+        `,
+      )}
+    >
       <Designer />
       {props.children}
     </SortableItem>

packages/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -1,11 +1,25 @@
 import { FormItem as Item } from '@formily/antd';
 import React from 'react';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { BlockItem } from '../block-item';
 
-export const FormItem: React.FC = (props) => {
+export const FormItem: any = (props) => {
   return (
     <BlockItem className={'nb-form-item'}>
       <Item {...props} />
     </BlockItem>
   );
 };
+
+FormItem.Designer = () => {
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

packages/client/src/schema-component/antd/form/Form.Designer.tsx

@@ -4,7 +4,12 @@ import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'
 export const FormDesigner = () => {
   return (
     <GeneralSchemaDesigner>
-      <SchemaSettings.Remove />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
     </GeneralSchemaDesigner>
   );
 };

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

@@ -17,7 +17,7 @@ const ColDivider = (props) => {
   });
 
   const droppableStyle = {
-    backgroundColor: isOver ? 'green' : undefined,
+    backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined,
   };
 
   return <div ref={setNodeRef} style={{ width: 24, ...droppableStyle }}></div>;
@@ -32,7 +32,7 @@ const RowDivider = (props) => {
   const droppableStyle = {};
 
   if (isOver) {
-    droppableStyle['backgroundColor'] = 'green';
+    droppableStyle['backgroundColor'] = 'rgba(241, 139, 98, .1)';
   }
 
   const [active, setActive] = useState(false);

packages/client/src/schema-component/antd/markdown/Markdown.Void.Designer.tsx

@@ -13,7 +13,12 @@ export const MarkdownVoidDesigner = () => {
         }}
       />
       <SchemaSettings.Divider />
-      <SchemaSettings.Remove />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
     </GeneralSchemaDesigner>
   );
 };

packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx

@@ -4,7 +4,12 @@ import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'
 export const VoidTableDesigner = () => {
   return (
     <GeneralSchemaDesigner>
-      <SchemaSettings.Remove />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
     </GeneralSchemaDesigner>
   );
 };

packages/client/src/schema-component/common/dnd-context/index.tsx

@@ -1,4 +1,4 @@
-import { DndContext as DndKitContext, DragEndEvent, rectIntersection } from '@dnd-kit/core';
+import { DndContext as DndKitContext, DragEndEvent, DragOverlay, rectIntersection } from '@dnd-kit/core';
 import { observer } from '@formily/react';
 import React from 'react';
 import { useAPIClient } from '../../../';
@@ -49,6 +49,9 @@ const useDragEnd = () => {
 export const DndContext = observer((props) => {
   return (
     <DndKitContext collisionDetection={rectIntersection} onDragEnd={useDragEnd()}>
+      <DragOverlay>
+        <span style={{ whiteSpace: 'nowrap' }}>拖拽中</span>
+      </DragOverlay>
       {props.children}
     </DndKitContext>
   );

packages/client/src/schema-component/common/sortable-item/SortableItem.tsx

@@ -19,7 +19,7 @@ export const Sortable = (props: any) => {
   const droppableStyle = { ...style };
 
   if (isOver) {
-    droppableStyle['color'] = 'green';
+    droppableStyle['color'] = 'rgba(241, 139, 98, .1)';
   }
 
   return (
@@ -35,17 +35,13 @@ export const SortableItem: React.FC<any> = observer((props) => {
   const field = useField();
   const fieldSchema = useFieldSchema();
   return (
-    <Sortable
+    <Sortable {...props} id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
-      {...props}
-      id={field.address.toString()}
-      data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}
-    >
       {props.children}
     </Sortable>
   );
 });
 
-export const DragHandler = () => {
+export const DragHandler = (props) => {
   const { isDragging, attributes, listeners, setNodeRef, transform } = useContext(DraggableContext);
   const style = transform
     ? {
@@ -57,18 +53,19 @@ export const DragHandler = () => {
     <div
       style={{
         display: 'inline-block',
+        width: 12,
+        height: 12,
+        lineHeight: '12px',
+        textAlign: 'left',
       }}
     >
-      <div style={{ display: isDragging ? 'inline-block' : 'none', fontSize: 10, position: 'absolute', zIndex: 0 }}>
-        Drag
-      </div>
       <div
         ref={setNodeRef}
         style={{
-          ...style,
+          // ...style,
           position: 'relative',
           zIndex: 1,
-          backgroundColor: '#333',
+          // backgroundColor: '#333',
           lineHeight: 0,
           height: 2,
           width: 2,
@@ -78,7 +75,7 @@ export const DragHandler = () => {
         {...listeners}
         {...attributes}
       >
-        <div style={{ fontSize: 10 }}>Drag</div>
+        <span style={{ cursor: 'move', fontSize: 12 }}>{props.children}</span>
       </div>
     </div>
   );

packages/client/src/schema-initializer/Initializers/DetailsActionInitializer/index.tsx

@@ -58,21 +58,20 @@ export const DetailsActionInitializer = observer((props: any) => {
           children: [
             {
               type: 'item',
-              title: 'Create',
+              title: 'Edit',
               component: InitializeAction,
               schema: {
-                title: 'Create',
+                title: 'Edit',
-                'x-action': 'posts:create',
+                'x-action': 'update',
-                'x-align': 'left',
               },
             },
             {
               type: 'item',
-              title: 'Update',
+              title: 'Delete',
               component: InitializeAction,
               schema: {
-                title: 'Update',
+                title: 'Delete',
-                'x-action': 'posts:update',
+                'x-action': 'delete',
               },
             },
           ],

packages/client/src/schema-initializer/Initializers/FormItemInitializer/index.tsx

@@ -16,7 +16,7 @@ const useFormItems = () => {
       component: InitializeFormItem,
       schema: {
         name: field.name,
-        'x-designer': 'TestDesigner',
+        'x-designer': 'FormItem.Designer',
         'x-component': 'CollectionField',
         'x-decorator': 'FormItem',
         'x-collection-field': `${name}.${field.name}`,

packages/client/src/schema-initializer/SchemaInitializer.tsx

@@ -92,7 +92,14 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
       {...dropdown}
       overlay={menu}
     >
-      <Button {...others} />
+      <Button
+        {...others}
+        type={'dashed'}
+        style={{
+          borderColor: '#f18b62',
+          color: '#f18b62',
+        }}
+      />
     </Dropdown>
   );
 });

packages/client/src/schema-settings/GeneralSchemaDesigner.tsx

@@ -1,4 +1,6 @@
+import { DragOutlined, MenuOutlined } from '@ant-design/icons';
 import { useField, useFieldSchema } from '@formily/react';
+import { Space } from 'antd';
 import React from 'react';
 import { DragHandler, useDesignable } from '../schema-component';
 import { SchemaSettings } from './SchemaSettings';
@@ -13,11 +15,17 @@ export const GeneralSchemaDesigner = (props: any) => {
     fieldSchema,
   };
   return (
-    <div>
+    <div className={'general-schema-designer'}>
-      <SchemaSettings title={'配置'} {...schemaSettingsProps}>
+      <div className={'general-schema-designer-icons'}>
-        {props.children}
+        <Space size={2} align={'center'}>
-      </SchemaSettings>
+          <DragHandler>
-      <DragHandler />
+            <DragOutlined />
+          </DragHandler>
+          <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
+            {props.children}
+          </SchemaSettings>
+        </Space>
+      </div>
     </div>
   );
 };

packages/client/src/schema-settings/SchemaSettings.tsx

@@ -1,5 +1,5 @@
 import { GeneralField } from '@formily/core';
-import { Schema } from '@formily/react';
+import { ISchema, Schema } from '@formily/react';
 import { Dropdown, Menu, MenuItemProps } from 'antd';
 import React, { createContext, useContext } from 'react';
 import { Designable } from '..';
@@ -23,8 +23,13 @@ export const useSchemaSettings = () => {
   return useContext(SchemaSettingsContext);
 };
 
+interface RemoveProps {
+  removeParentsIfNoChildren?: boolean;
+  breakRemoveOn?: ISchema | ((s: ISchema) => boolean);
+}
+
 type SchemaSettingsNested = {
-  Remove?: React.FC;
+  Remove?: React.FC<RemoveProps>;
   Item?: React.FC<MenuItemProps>;
   Divider?: React.FC;
   [key: string]: any;
@@ -59,7 +64,11 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
 };
 
 SchemaSettings.Item = (props) => {
-  return <Menu.Item {...props}>{props.children || props.title}</Menu.Item>;
+  return (
+    <Menu.Item {...props} style={{ minWidth: 120 }}>
+      {props.children || props.title}
+    </Menu.Item>
+  );
 };
 
 SchemaSettings.ItemGroup = (props) => {
@@ -74,12 +83,17 @@ SchemaSettings.Divider = (props) => {
   return <Menu.Divider {...props} />;
 };
 
-SchemaSettings.Remove = () => {
+SchemaSettings.Remove = (props: any) => {
+  const { removeParentsIfNoChildren, breakRemoveOn } = props;
   const { dn } = useSchemaSettings();
   return (
     <Menu.Item
+      style={{ minWidth: 120 }}
       onClick={() => {
-        dn.remove();
+        dn.remove(null, {
+          removeParentsIfNoChildren,
+          breakRemoveOn,
+        });
       }}
     >
       移除