feat: 新增常用动作

packages/amis-editor-core/scss/control/_event-action.scss

@@ -253,6 +253,21 @@
 }
 
 .action-config-dialog {
+  *:not(svg) {
+    font-size: 12px;
+  }
+
+  .common-actions {
+    position: absolute;
+    top: #{px2rem(-41px)};
+    left: #{px2rem(80px)};
+
+    .common-actions-label {
+      line-height: #{px2rem(24px)};
+      margin-right: 4px;
+    }
+  }
+
   .action-config-panel {
     background: #ffffff;
     border: 1px solid #e8e9eb;

packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx

@@ -7,14 +7,15 @@ import {
   RendererPluginAction,
   tipedLabel,
   getSchemaTpl,
-  defaultValue
+  defaultValue,
+  persistGet
 } from 'amis-editor-core';
 import React from 'react';
 import {ActionConfig, ComponentInfo} from './types';
 import ActionConfigPanel from './action-config-panel';
 import {BASE_ACTION_PROPS} from './comp-action-select';
 import {findActionNode} from './helper';
-import {PlainObject, SchemaNode} from 'amis-core';
+import {PlainObject, SchemaNode, Option} from 'amis-core';
 
 interface ActionDialogProp {
   show: boolean;
@@ -164,6 +165,41 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
     }
   }
 
+  // 获取常用动作列表schema
+  getCommonUseActionSchema() {
+    const commonUseActions = persistGet('common-use-actions', []).slice(0, 5);
+    return commonUseActions.map((action: Option) => {
+      return {
+        type: 'tag',
+        label: action.label,
+        displayMode: 'rounded',
+        color: 'active',
+        style: {
+          borderColor: '#2468f2',
+          cursor: 'pointer'
+        },
+        onEvent: {
+          click: {
+            actions: [
+              {
+                actionType: 'setValue',
+                componentName: 'actionType',
+                args: {
+                  value: action.value
+                }
+              },
+              {
+                actionType: 'custom',
+                script:
+                  "document.querySelector('.action-tree li .is-checked')?.scrollIntoView()"
+              }
+            ]
+          }
+        }
+      };
+    });
+  }
+
   render() {
     const {
       data,
@@ -176,6 +212,7 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
       onClose,
       render
     } = this.props;
+    const commonUseActionSchema = this.getCommonUseActionSchema();
 
     return render(
       'inner',
@@ -206,6 +243,20 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
             // debug: true,
             onSubmit: this.props.onSubmit?.bind(this, type),
             body: [
+              {
+                type: 'flex',
+                className: 'common-actions',
+                justify: 'flex-start',
+                visibleOn: `${commonUseActionSchema.length}`,
+                items: [
+                  {
+                    type: 'tpl',
+                    tpl: '常用动作：',
+                    className: 'common-actions-label'
+                  },
+                  ...commonUseActionSchema
+                ]
+              },
               {
                 type: 'grid',
                 className: 'h-full',

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -10,6 +10,8 @@ import {
   getSchemaTpl,
   JsonGenerateID,
   JSONGetById,
+  persistGet,
+  persistSet,
   PluginActions,
   RendererPluginAction,
   RendererPluginEvent,
@@ -24,7 +26,8 @@ import {
   mapTree,
   normalizeApi,
   PlainObject,
-  Schema
+  Schema,
+  Option
 } from 'amis-core';
 import {Button} from 'amis';
 import {i18n as _i18n} from 'i18n-runtime';
@@ -3497,3 +3500,22 @@ export const getEventControlConfig = (
     }
   };
 };
+
+/**
+ * 更新localStorage存储的常用动作
+ */
+export const updateCommonUseActions = (action: Option) => {
+  const commonUseActions = persistGet('common-use-actions', []);
+  const index = commonUseActions.findIndex(
+    (item: Option) => item.value === action.value
+  );
+  if (index >= 0) {
+    commonUseActions[index].use += 1;
+  } else {
+    commonUseActions.unshift(action);
+  }
+  commonUseActions.sort(
+    (before: Option, next: Option) => next.use - before.use
+  );
+  persistSet('common-use-actions', commonUseActions);
+};

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -21,7 +21,8 @@ import {
   getEventStrongDesc,
   getEventLabel,
   getPropOfAcion,
-  SELECT_PROPS_CONTAINER
+  SELECT_PROPS_CONTAINER,
+  updateCommonUseActions
 } from './helper';
 import {
   ActionConfig,
@@ -995,6 +996,12 @@ export class EventControl extends React.Component<
       }
     }
 
+    updateCommonUseActions({
+      label: action.__title,
+      value: config.actionType,
+      use: 1
+    });
+
     this.removeDataSchema();
     this.setState({showAcionDialog: false});
     this.setState({actionData: undefined});