chore: optimize action designer

packages/core/client/src/schema-component/antd/action/Action.tsx

@@ -2,14 +2,14 @@ import { observer, RecursionField, useField, useFieldSchema, useForm } from '@fo
 import { App, Button, Popover } from 'antd';
 import classnames from 'classnames';
 import lodash from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useActionContext } from '../..';
 import { useDesignable } from '../../';
 import { Icon } from '../../../icon';
 import { useRecord } from '../../../record-provider';
 import { SortableItem } from '../../common';
-import { useCompile, useComponent, useDesigner } from '../../hooks';
+import { useCompile, useComponent, useDesigner, useDesignerControl } from '../../hooks';
 import { useProps } from '../../hooks/useProps';
 import ActionContainer from './Action.Container';
 import { ActionDesigner } from './Action.Designer';
@@ -43,6 +43,7 @@ export const Action: ComposedAction = observer(
     const [visible, setVisible] = useState(false);
     const [formValueChanged, setFormValueChanged] = useState(false);
     const Designer = useDesigner();
+    const { designerVisible, showDesigner, hideDesigner } = useDesignerControl();
     const field = useField<any>();
     const { run, element } = useAction();
     const fieldSchema = useFieldSchema();
@@ -57,6 +58,7 @@ export const Action: ComposedAction = observer(
     const { designable } = useDesignable();
     const tarComponent = useComponent(component) || component;
     const { modal } = App.useApp();
+
     let actionTitle = title || compile(fieldSchema.title);
     actionTitle = lodash.isString(actionTitle) ? t(actionTitle) : actionTitle;
 
@@ -71,6 +73,29 @@ export const Action: ComposedAction = observer(
         });
     }, [linkageRules, values, designable]);
 
+    const handleButtonClick = useCallback(
+      (e: React.MouseEvent) => {
+        if (!disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+          const onOk = () => {
+            onClick?.(e);
+            setVisible(true);
+            run();
+          };
+          if (confirm) {
+            modal.confirm({
+              ...confirm,
+              onOk,
+            });
+          } else {
+            onOk();
+          }
+        }
+      },
+      [confirm, disabled, modal, onClick, run],
+    );
+
     const renderButton = () => {
       if (!designable && field?.data?.hidden) {
         return null;
@@ -86,31 +111,15 @@ export const Action: ComposedAction = observer(
             ...others.style,
             opacity: designable && field?.data?.hidden && 0.1,
           }}
-          onClick={(e: React.MouseEvent) => {
-            if (!disabled) {
-              e.preventDefault();
-              e.stopPropagation();
-              const onOk = () => {
-                onClick?.(e);
-                setVisible(true);
-                run();
-              };
-              if (confirm) {
-                modal.confirm({
-                  ...confirm,
-                  onOk,
-                });
-              } else {
-                onOk();
-              }
-            }
-          }}
+          onClick={handleButtonClick}
+          onMouseEnter={showDesigner}
+          onMouseLeave={hideDesigner}
           component={tarComponent || Button}
           className={classnames(componentCls, hashId, className)}
           type={props.type === 'danger' ? undefined : props.type}
         >
           {actionTitle}
-          <Designer {...designerProps} />
+          {designerVisible ? <Designer {...designerProps} /> : null}
         </SortableItem>
       );
     };

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

@@ -82,9 +82,11 @@ export const SortableItem: React.FC<SortableItemProps> = observer(
           removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
         }}
       >
-        <Sortable id={eid} {...others}>
-          {props.children}
-        </Sortable>
+        <div onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave}>
+          <Sortable id={eid} {...others}>
+            {props.children}
+          </Sortable>
+        </div>
       </SortableProvider>
     );
   },

packages/core/client/src/schema-component/hooks/useDesigner.ts

@@ -1,4 +1,5 @@
 import { useFieldSchema } from '@formily/react';
+import { useCallback, useState } from 'react';
 import { useComponent, useDesignable } from '.';
 
 const Def = () => null;
@@ -9,3 +10,12 @@ export const useDesigner = () => {
   const component = useComponent(fieldSchema['x-designer'], Def);
   return designable ? component : Def;
 };
+
+export const useDesignerControl = () => {
+  const [designerVisible, setDesignerVisible] = useState(false);
+
+  const showDesigner = useCallback(() => setDesignerVisible(true), []);
+  const hideDesigner = useCallback(() => setDesignerVisible(false), []);
+
+  return { designerVisible, showDesigner, hideDesigner };
+};