chore: chart数据映射配置升级、api适配器提示不展示问题修复 (#8155)

Co-authored-by: wanglinfang <wanglinfang@baidu.com>

packages/amis-editor-core/scss/control/_api-control.scss

@@ -130,7 +130,8 @@
   }
 }
 
-.ae-AdaptorControl {
+.ae-AdaptorControl,
+.ae-FunctionEditorControl {
   &-func {
     &-header,
     &-footer {

packages/amis-editor/src/index.tsx

@@ -47,6 +47,7 @@ import './renderer/crud2-control/CRUDColumnControl';
 import './renderer/crud2-control/CRUDToolbarControl';
 import './renderer/crud2-control/CRUDFiltersControl';
 import './renderer/InputRangeValueControl';
+import './renderer/FunctionEditorControl';
 
 import 'amis-theme-editor/lib/locale/zh-CN';
 import 'amis-theme-editor/lib/locale/en-US';

packages/amis-editor/src/plugin/Chart.tsx

@@ -287,24 +287,29 @@ export class ChartPlugin extends BasePlugin {
                   },
                   {
                     name: 'dataFilter',
-                    type: 'js-editor',
+                    type: 'ae-functionEditorControl',
                     allowFullscreen: true,
                     mode: 'normal',
                     label: tipedLabel(
                       '数据映射（dataFilter）',
                       '如果后端没有直接返回 Echart 配置，可以自己写一段函数来包装'
                     ),
-                    size: 'lg',
-                    placeholder: `/* 参数说明
-    * config 原始数据
-    * echarts echarts 对象
-    * data 如果配置了数据接口，接口返回的数据通过此变量传入
-    示例
-    * debugger; // 可以浏览器中断点调试
-    * console.log(config); // 查看原始数据
-    * return {}; // 返回新的结果
-  */
-  (config, echarts, data) => config`
+                    renderLabel: true,
+                    params: [
+                      {
+                        label: 'config',
+                        tip: '原始数据'
+                      },
+                      {
+                        label: 'echarts',
+                        tip: 'echarts 对象'
+                      },
+                      {
+                        label: 'data',
+                        tip: '如果配置了数据接口，接口返回的数据通过此变量传入'
+                      }
+                    ],
+                    placeholder: `debugger; // 可以浏览器中断点调试\n\n// 查看原始数据\nconsole.log(config)\n\n// 返回新的结果 \nreturn {}`
                   },
                   getSchemaTpl('switch', {
                     label: tipedLabel(

packages/amis-editor/src/renderer/APIAdaptorControl.tsx

@@ -9,6 +9,7 @@ import {tipedLabel} from 'amis-editor-core';
 import {FormControlProps} from 'amis-core';
 import {FormItem, Icon, TooltipWrapper} from 'amis';
 import {TooltipObject} from 'amis-ui/lib/components/TooltipWrapper';
+
 interface AdaptorFuncParam {
   label: string;
   tip?: string | TooltipObject;
@@ -102,70 +103,30 @@ export default class APIAdaptorControl extends React.Component<
       params = [],
       allowFullscreen,
       value,
-      name,
       editorPlaceholder,
       editorDesc,
-      mergeParams
+      mergeParams,
+      mode
     } = this.props;
 
-    const lastParams =
-      typeof mergeParams === 'function' ? mergeParams(params) : params;
-
     return (
       <>
-        {render('api-adaptor-control-editor/0', {
-          type: 'container',
-          className: 'ae-AdaptorControl-func-header',
-          body: [
-            '<span class="mtk6">function&nbsp;</span>',
-            '<span class="mtk1 bracket-highlighting-0">(</span>',
-            ...lastParams
-              .map(({label, tip}, index) => {
-                return [
-                  {
-                    type: 'button',
-                    level: 'link',
-                    label,
-                    className: 'ae-AdaptorControl-func-arg',
-                    ...(tip ? {tooltip: this.genTooltipProps(tip)} : {})
-                  },
-                  ...(index === lastParams.length - 1
-                    ? []
-                    : ['<span class="mtk1">,&nbsp;</span>'])
-                ];
-              })
-              .flat(),
-            '<span class="mtk1 bracket-highlighting-0">)&nbsp;{</span>'
-          ]
-        })}
-
         {render(
-          'api-adaptor-control-editor/1',
+          'api-adaptor-control-editor',
           {
-            label: '',
-            name: '__whatever_name_adpator',
-            placeholder: editorPlaceholder || '',
-            mode: 'normal',
-            type: 'js-editor',
-            className: 'ae-AdaptorControl-func-editor',
-            allowFullscreen
+            type: 'ae-functionEditorControl',
+            placeholder: editorPlaceholder,
+            desc: editorDesc,
+            allowFullscreen,
+            params,
+            mode: mode || 'normal'
           },
           {
             value,
+            mergeParams,
             onChange: this.onChange
           }
         )}
-
-        {render('api-adaptor-control-editor/2', {
-          type: 'container',
-          body: '<span class="mtk1 bracket-highlighting-0">}</span>',
-          className: 'ae-AdaptorControl-func-footer'
-        })}
-        {render('api-adaptor-control-editor/3', {
-          type: 'container',
-          className: 'cxd-Form-description',
-          body: editorDesc
-        })}
       </>
     );
   }
@@ -203,7 +164,9 @@ export default class APIAdaptorControl extends React.Component<
                   }) as any
                 }
               >
-                <Icon icon="editor-help" className="icon" color="#84868c" />
+                <span className="leading-3 cursor-pointer">
+                  <Icon icon="editor-help" className="icon" color="#84868c" />
+                </span>
               </TooltipWrapper>
             ]
           : [])

packages/amis-editor/src/renderer/FunctionEditorControl.tsx

@@ -0,0 +1,153 @@
+/**
+ * @file 函数编辑器
+ */
+
+import React from 'react';
+import {autobind} from 'amis-editor-core';
+import {FormControlProps} from 'amis-core';
+import {FormItem} from 'amis';
+import {TooltipObject} from 'amis-ui/lib/components/TooltipWrapper';
+
+interface FuncParam {
+  label: string;
+  tip?: string | TooltipObject;
+}
+
+export interface FunctionEditorControlProps extends FormControlProps {
+  /**
+   * 适配器函数参数
+   */
+  params?: FuncParam[];
+  /**
+   * 复用适配器 函数参数提示
+   */
+  mergeParams?: (params: FuncParam[]) => FuncParam[];
+  /**
+   * 代码编辑器底部的 description
+   */
+  desc?: any;
+  /**
+   * 代码编辑器的placeholder
+   */
+  placeholder?: string;
+  /**
+   * 自定义提示参数
+   */
+  tooltipProps?: TooltipObject;
+}
+
+export default class FunctionEditorControl extends React.Component<
+  FunctionEditorControlProps,
+  {}
+> {
+  static defaultProps: Pick<FunctionEditorControlProps, 'params'> = {
+    params: []
+  };
+
+  @autobind
+  onChange(value: any = '') {
+    this.props.onChange?.(value);
+  }
+
+  // 生成tooltip 的参数
+  genTooltipProps(content: any, othersProps?: TooltipObject) {
+    const {render} = this.props;
+    return {
+      tooltipTheme: 'light',
+      trigger: 'hover',
+      rootClose: true,
+      placement: 'top',
+      tooltipClassName: 'ae-FunctionEditorControl-desc-tooltip',
+      ...(typeof content === 'string'
+        ? {content}
+        : {
+            content: ' ', // amis缺陷，必须有这个字段，否则显示不出来
+            children: () =>
+              React.isValidElement(content)
+                ? content
+                : render('content', content)
+          }),
+      ...(this.props.tooltipProps || {}),
+      ...(othersProps || {})
+    };
+  }
+
+  render() {
+    const {
+      render,
+      params = [],
+      allowFullscreen,
+      value,
+      placeholder,
+      desc,
+      mergeParams
+    } = this.props;
+
+    const lastParams =
+      typeof mergeParams === 'function' ? mergeParams(params) : params;
+
+    return (
+      <>
+        {render('api-function-editor-control-editor/0', {
+          type: 'container',
+          className: 'ae-FunctionEditorControl-func-header',
+          body: [
+            '<span class="mtk6">function&nbsp;</span>',
+            '<span class="mtk1 bracket-highlighting-0">(</span>',
+            ...lastParams
+              .map(({label, tip}, index) => {
+                return [
+                  {
+                    type: 'button',
+                    level: 'link',
+                    label,
+                    className: 'ae-FunctionEditorControl-func-arg',
+                    ...(tip ? {tooltip: this.genTooltipProps(tip)} : {})
+                  },
+                  ...(index === lastParams.length - 1
+                    ? []
+                    : ['<span class="mtk1">,&nbsp;</span>'])
+                ];
+              })
+              .flat(),
+            '<span class="mtk1 bracket-highlighting-0">)&nbsp;{</span>'
+          ]
+        })}
+
+        {render(
+          'api-function-editor-control-editor/1',
+          {
+            label: '',
+            name: '__whatever_name_adpator',
+            placeholder: placeholder || '',
+            mode: 'normal',
+            type: 'js-editor',
+            className: 'ae-FunctionEditorControl-func-editor',
+            allowFullscreen
+          },
+          {
+            value,
+            onChange: this.onChange
+          }
+        )}
+
+        {render('api-function-editor-control-editor/2', {
+          type: 'container',
+          body: '<span class="mtk1 bracket-highlighting-0">}</span>',
+          className: 'ae-FunctionEditorControl-func-footer'
+        })}
+        {render('api-function-editor-control-editor/3', {
+          type: 'container',
+          className: 'cxd-Form-description',
+          body: desc
+        })}
+      </>
+    );
+  }
+}
+
+@FormItem({
+  type: 'ae-functionEditorControl',
+  renderLabel: false
+})
+export class FunctionEditorControlRenderer extends FunctionEditorControl {}