feat: add Action.Group

packages/client/src/schemas/action/index.md

@@ -421,6 +421,40 @@ export default () => {
 };
 ```
 
+### Action.Group
+
+```tsx
+import React from 'react';
+import { SchemaRenderer } from '@nocobase/client';
+
+const schema = {
+  type: 'void',
+  name: 'group1',
+  'x-component': 'Action.Group',
+  properties: {
+    a1: {
+      type: 'void',
+      title: '按钮1',
+      'x-component': 'Action',
+      'x-component-props': {},
+    },
+    a2: {
+      type: 'void',
+      title: '按钮2',
+      'x-component': 'Action',
+      'x-component-props': {},
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaRenderer 
+      schema={schema} 
+    />
+  );
+};
+```
 
 ### Action.Bar
 

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

@@ -44,7 +44,7 @@ import { VisibleContext } from '../../context';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { createPortal } from 'react-dom';
 import { ActionBar } from './ActionBar';
-import { DragHandle } from '../../components/Sortable';
+import { DragHandle, SortableItem } from '../../components/Sortable';
 import { useDisplayedMapContext } from '../../constate';
 
 export const ButtonComponentContext = createContext(null);
@@ -96,6 +96,71 @@ Action.URL = observer((props: any) => {
   );
 });
 
+Action.Group = observer((props: any) => {
+  const { type = 'button' } = props;
+  const { root, schema, insertAfter, remove } = useDesignable();
+  const moveToAfter = (path1, path2) => {
+    if (!path1 || !path2) {
+      return;
+    }
+    if (path1.join('.') === path2.join('.')) {
+      return;
+    }
+    const data = findPropertyByPath(root, path1);
+    if (!data) {
+      return;
+    }
+    remove(path1);
+    return insertAfter(data.toJSON(), path2);
+  };
+  const [dragOverlayContent, setDragOverlayContent] = useState('');
+  return (
+    <DndContext
+      onDragStart={(event) => {
+        console.log({ event });
+        setDragOverlayContent(event.active.data?.current?.title || '');
+      }}
+      onDragEnd={async (event) => {
+        const path1 = event.active?.data?.current?.path;
+        const path2 = event.over?.data?.current?.path;
+        const data = moveToAfter(path1, path2);
+        await updateSchema(data);
+      }}
+    >
+      {createPortal(
+        <DragOverlay
+          zIndex={2222}
+          style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
+          dropAnimation={{
+            duration: 10,
+            easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+          }}
+        >
+          {dragOverlayContent}
+        </DragOverlay>,
+        document.body,
+      )}
+      <div className={cls(`ant-btn-group-${type}`)}>
+        <Space size={16}>
+          {schema.mapProperties((s) => {
+            return (
+              <SortableItem
+                id={s.name}
+                data={{
+                  title: s.title,
+                  path: getSchemaPath(s),
+                }}
+              >
+                <RecursionField name={s.name} schema={s} />
+              </SortableItem>
+            );
+          })}
+        </Space>
+      </div>
+    </DndContext>
+  );
+});
+
 Action.Modal = observer((props: any) => {
   const {
     useOkAction = useDefaultAction,

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

@@ -93,3 +93,17 @@
     color: #fff;
   }
 }
+
+.ant-btn-group-link {
+  display: inline-block;
+  .ant-btn {
+    padding: 0;
+    height: auto;
+    .designable-bar {
+      top: -6px !important;
+      left: -12px !important;
+      bottom: -6px !important;
+      right: -12px !important;
+    }
+  }
+}