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,22 +73,8 @@ export const Action: ComposedAction = observer(
         });
     }, [linkageRules, values, designable]);
 
-    const renderButton = () => {
-      if (!designable && field?.data?.hidden) {
-        return null;
-      }
-      return (
-        <SortableItem
-          data-testid={`${fieldSchema['x-action'] || fieldSchema.name}-action`}
-          {...others}
-          loading={field?.data?.loading}
-          icon={icon ? <Icon type={icon} /> : null}
-          disabled={disabled}
-          style={{
-            ...others.style,
-            opacity: designable && field?.data?.hidden && 0.1,
-          }}
-          onClick={(e: React.MouseEvent) => {
+    const handleButtonClick = useCallback(
+      (e: React.MouseEvent) => {
         if (!disabled) {
           e.preventDefault();
           e.stopPropagation();
@@ -104,13 +92,34 @@ export const Action: ComposedAction = observer(
             onOk();
           }
         }
+      },
+      [confirm, disabled, modal, onClick, run],
+    );
+
+    const renderButton = () => {
+      if (!designable && field?.data?.hidden) {
+        return null;
+      }
+      return (
+        <SortableItem
+          data-testid={`${fieldSchema['x-action'] || fieldSchema.name}-action`}
+          {...others}
+          loading={field?.data?.loading}
+          icon={icon ? <Icon type={icon} /> : null}
+          disabled={disabled}
+          style={{
+            ...others.style,
+            opacity: designable && field?.data?.hidden && 0.1,
           }}
+          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,
         }}
       >
+        <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 };
+};