feat:事件动作面板支持查看调用链

baidu · Nov 5, 2024 · ae11c44 · ae11c44
1 parent 99ef8ac
commit ae11c44
Show file tree

Hide file tree

Showing 29 changed files with 382 additions and 198 deletions.
diff --git a/packages/amis-editor-core/scss/control/_event-action.scss b/packages/amis-editor-core/scss/control/_event-action.scss
@@ -31,8 +31,14 @@
       width: 100%;
     }
   }
-  &-content-oldentry {
-    margin-top: 100px !important;
+  &-header-m {
+    margin-top: #{px2rem(45px)} !important;
+  }
+  &-content-m {
+    margin-top: #{px2rem(97px)} !important;
+  }
+  &-content-l {
+    margin-top: #{px2rem(150px)} !important;
   }
   &-content {
     padding: 0;
@@ -147,13 +153,31 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            .variable-left {
-              color: #2468f2;
-              margin-left: #{px2rem(4px)};
-            }
-            .variable-right {
-              color: #2468f2;
-              margin-right: #{px2rem(4px)};
+            .action-desc {
+              display: flex;
+              .desc-tag {
+                max-width: 133px;
+                color: #2468f2;
+                display: inline-block;
+                margin-bottom: -5px;
+              }
+              .variable-left {
+                margin-left: #{px2rem(4px)};
+              }
+              .variable-right {
+                margin-right: #{px2rem(4px)};
+              }
+              .component-action-tag {
+                background-color: rgb(82, 142, 255);
+                display: inline-block;
+                color: #fff;
+                padding: 0 5px;
+                border-radius: 3px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 100%;
+              }
             }
           }
           &--dragging {
@@ -252,7 +276,7 @@
   }
 }
 
-.action-config-dialog {
+.ae-action-config-dialog {
   *:not(svg) {
     font-size: 12px;
   }
@@ -423,21 +447,24 @@
   }
 }
 
-.event-item-header-tip {
+.ae-event-item-header-tip {
   background: #070c14d9 !important;
   box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
   border: none;
   div {
     font-size: 12px;
     color: #fff;
   }
-}
-
-.event-item-header-tip {
   & > div {
     &:after {
       border-top-color: #070c14d9 !important;
       border-bottom-color: #070c14d9 !important;
     }
   }
 }
+
+.ae-action-relation-panel {
+  width: 255px;
+  max-height: 360px;
+  overflow: auto;
+}
diff --git a/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx b/packages/amis-editor/src/plugin/CRUD2/BaseCRUD.tsx
@@ -114,9 +114,9 @@ export class BaseCRUDPlugin extends BasePlugin {
           actionType: 'search',
           actionLabel: '数据查询',
           description: '使用指定条件完成列表数据查询',
-          descDetail: (info: any) => {
+          descDetail: (info: any, context: any, props: any) => {
             return (
-              <div>
+              <div className="action-desc">
                 <span className="variable-right">{info?.__rendererLabel}</span>
                 触发数据查询
               </div>
@@ -135,9 +135,9 @@ export class BaseCRUDPlugin extends BasePlugin {
           actionType: 'loadMore',
           actionLabel: '加载更多',
           description: '加载更多条数据到列表容器',
-          descDetail: (info: any) => {
+          descDetail: (info: any, context: any, props: any) => {
             return (
-              <div>
+              <div className="action-desc">
                 <span className="variable-right">{info?.__rendererLabel}</span>
                 加载更多数据
               </div>

diff --git a/packages/amis-editor/src/plugin/Collapse.tsx b/packages/amis-editor/src/plugin/Collapse.tsx
@@ -120,9 +120,9 @@ export class CollapsePlugin extends BasePlugin {
       actionType: 'expand',
       actionLabel: '组件展开',
       description: '组件折叠状态变更为展开',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.rendererLabel}</span>
             展开
           </div>

diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx
@@ -364,9 +364,9 @@ export class FormPlugin extends BasePlugin {
       actionLabel: '校验表单',
       actionType: 'validate',
       description: '触发表单校验',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             校验
             <span className="variable-left variable-right">
               {info?.rendererLabel}

diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@@ -189,9 +189,9 @@ export class TreeControlPlugin extends BasePlugin {
       actionLabel: '展开',
       description: '展开指定层级',
       innerArgs: ['openLevel'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             展开到第
             <span className="variable-left variable-right">

diff --git a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
@@ -213,9 +213,9 @@ export class TabsTransferPlugin extends BasePlugin {
       actionType: 'changeTabKey',
       actionLabel: '修改选中tab',
       description: '修改当前选中tab，来选择其他选项',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             修改选中tab
           </div>

diff --git a/packages/amis-editor/src/plugin/Tabs.tsx b/packages/amis-editor/src/plugin/Tabs.tsx
@@ -119,9 +119,9 @@ export class TabsPlugin extends BasePlugin {
       actionLabel: '激活指定选项卡',
       description: '修改当前激活tab项的key',
       config: ['activeKey'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             激活第
             <span className="variable-left variable-right">
               {info?.args?.activeKey}
@@ -144,9 +144,9 @@ export class TabsPlugin extends BasePlugin {
       actionType: 'deleteKey',
       actionLabel: '删除指定选项卡',
       description: '删除指定tab项',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             删除第
             <span className="variable-left variable-right">
               {info?.args?.deleteKey}

diff --git a/packages/amis-editor/src/plugin/Wizard.tsx b/packages/amis-editor/src/plugin/Wizard.tsx
@@ -258,9 +258,9 @@ export class WizardPlugin extends BasePlugin {
       actionType: 'stepSubmit',
       actionLabel: '分步提交',
       description: '提交当前步骤数据',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             提交当前步骤数据
           </div>
@@ -271,9 +271,9 @@ export class WizardPlugin extends BasePlugin {
       actionType: 'prev',
       actionLabel: '上一步',
       description: '返回上一步',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.rendererLabel}</span>
             {info?.__rendererName === 'carousel' ? '滚动至上一张' : null}
             {info?.__rendererName === 'wizard' ? '返回前一步' : null}
@@ -285,9 +285,9 @@ export class WizardPlugin extends BasePlugin {
       actionType: 'next',
       actionLabel: '下一步',
       description: '提交当前步骤数据',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.rendererLabel}</span>
             {info?.__rendererName === 'carousel' ? '滚动至下一张' : null}
             {info?.__rendererName === 'wizard' ? '提交当前步骤数据' : null}
@@ -300,9 +300,9 @@ export class WizardPlugin extends BasePlugin {
       actionLabel: '定位步骤',
       description: '切换到指定步骤',
       innerArgs: ['step'],
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">{info?.__rendererLabel}</span>
             切换到第
             <span className="variable-left variable-right">

diff --git a/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx b/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
@@ -237,7 +237,7 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
         type: 'dialog',
         title: '动作配置',
         headerClassName: 'font-bold',
-        className: 'action-config-dialog',
+        className: 'ae-action-config-dialog',
         bodyClassName: 'action-config-dialog-body',
         closeOnEsc: closeOnEsc,
         closeOnOutside: false,

diff --git a/...mis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx b/...mis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/clear.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import {registerActionPanel} from '../../actionsPanelManager';
 import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
 
 registerActionPanel('clear', {
   label: '清空表单',
   tag: '组件',
   description: '清空表单数据',
-  descDetail: (info: any) => {
+  descDetail: (info: any, context: any, props: any) => {
     return (
-      <div>
+      <div className="action-desc">
         清空
-        <span className="variable-left variable-right">
-          {info?.rendererLabel || info.componentId || '-'}
-        </span>
+        {buildLinkActionDesc(props.manager, info)}
         的数据
       </div>
     );

diff --git a/...is-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx b/...is-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reload.tsx
@@ -9,20 +9,19 @@ import {
 } from 'amis-editor-core';
 import {registerActionPanel} from '../../actionsPanelManager';
 import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
 
 registerActionPanel('reload', {
   label: '重新请求数据',
   tag: '组件',
   description:
     '如果开启发送数据，会先发送配置数据到目标组件，然后重新请求数据。',
-  descDetail: (info: any) => {
+  descDetail: (info: any, context: any, props: any) => {
     // TODO: actionConfig
     return (
-      <div>
+      <div className="action-desc">
         刷新
-        <span className="variable-left variable-right">
-          {info?.rendererLabel || info.componentId || '-'}
-        </span>
+        {buildLinkActionDesc(props.manager, info)}
         组件
       </div>
     );

diff --git a/...mis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx b/...mis-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/reset.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import {registerActionPanel} from '../../actionsPanelManager';
 import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
 
 registerActionPanel('reset', {
   label: '重置表单',
   tag: '组件',
   description: '重置表单数据',
-  descDetail: (info: any) => {
+  descDetail: (info: any, context: any, props: any) => {
     return (
-      <div>
+      <div className="action-desc">
         重置
-        <span className="variable-left variable-right">
-          {info?.rendererLabel || info.componentId || '-'}
-        </span>
+        {buildLinkActionDesc(props.manager, info)}
         的数据
       </div>
     );

diff --git a/...-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx b/...-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/setValue.tsx
@@ -8,7 +8,7 @@ import {
 import {getRendererByName} from 'amis-core';
 import {registerActionPanel} from '../../actionsPanelManager';
 import {renderCmptActionSelect, renderCmptIdInput} from './helper';
-import {getArgsWrapper} from '../../helper';
+import {buildLinkActionDesc, getArgsWrapper} from '../../helper';
 import {getRootManager} from '../../eventControlConfigHelper';
 
 // 下拉展示可赋值属性范围
@@ -115,10 +115,10 @@ registerActionPanel('setValue', {
     '__comboType',
     '__containerType'
   ],
-  descDetail: (info: any) => {
+  descDetail: (info: any, context: any, props: any) => {
     const variableManager = info?.variableManager;
     return (
-      <div>
+      <div className="action-desc">
         {/* 只要path字段存在就认为是应用变量赋值，无论是否有值 */}
         {typeof info?.args?.path === 'string' && !info?.componentId ? (
           <>
@@ -131,9 +131,7 @@ registerActionPanel('setValue', {
         ) : (
           <>
             设置组件
-            <span className="variable-left variable-right">
-              {info?.rendererLabel || info.componentId || '-'}
-            </span>
+            {buildLinkActionDesc(props.manager, info)}
             的数据
           </>
         )}

diff --git a/...tor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx b/...tor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/staticStatus.tsx
@@ -11,9 +11,9 @@ registerActionPanel('staticStatus', {
   actions: [
     {
       actionType: 'static',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">
               {info?.rendererLabel || info.componentId}
             </span>
@@ -24,9 +24,9 @@ registerActionPanel('staticStatus', {
     },
     {
       actionType: 'nonstatic',
-      descDetail: (info: any) => {
+      descDetail: (info: any, context: any, props: any) => {
         return (
-          <div>
+          <div className="action-desc">
             <span className="variable-right">
               {info?.rendererLabel || info.componentId}
             </span>

diff --git a/...is-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx b/...is-editor/src/renderer/event-control/actionsPanelPlugins/componentActionsPanel/submit.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import {registerActionPanel} from '../../actionsPanelManager';
 import {renderCmptSelect, renderCmptIdInput} from './helper';
+import {buildLinkActionDesc} from '../../helper';
 
 registerActionPanel('submit', {
   label: '提交表单',
   tag: '组件',
   description: '触发表单提交',
-  descDetail: (info: any) => {
+  descDetail: (info: any, context: any, props: any) => {
     return (
-      <div>
+      <div className="action-desc">
         提交
-        <span className="variable-left variable-right">
-          {info?.rendererLabel || info.componentId || '-'}
-        </span>
+        {buildLinkActionDesc(props.manager, info)}
         的数据
       </div>
     );