amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Carousel.tsx

@@ -0,0 +1,377 @@
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin, BasicToolbarItem} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {mockValue} from '../mocker';
+
+export class CarouselPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'carousel';
+  $schema = '/schemas/CarouselSchema.json';
+
+  // 组件名称
+  name = '轮播图';
+  isBaseComponent = true;
+  description =
+    '用来渲染轮播图，可以配置每一页的内容（不只是图片），可以配置过渡动画。';
+  docLink = '/amis/zh-CN/components/carousel';
+  tags = ['展示'];
+  icon = 'fa fa-images';
+  scaffold = {
+    type: 'carousel',
+    options: [
+      {
+        image: mockValue({type: 'image'})
+      },
+      {
+        html:
+          '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+      },
+      {
+        image: mockValue({type: 'image'})
+      }
+    ]
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '轮播图';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isUnderField = /\/field\/\w+$/.test(context.path as string);
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            isUnderField
+              ? {
+                  type: 'tpl',
+                  inline: false,
+                  className: 'text-info text-sm',
+                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+                }
+              : null,
+            {
+              type: 'formula',
+              name: '__mode',
+              autoSet: false,
+              formula:
+                '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+            },
+            {
+              label: '数据源',
+              name: '__mode',
+              type: 'button-group-select',
+              size: 'xs',
+              mode: 'inline',
+              className: 'w-full',
+              options: [
+                {
+                  label: '关联字段',
+                  value: 1
+                },
+                {
+                  label: '静态设置',
+                  value: 2
+                }
+              ]
+            },
+            {
+              label: '字段名',
+              name: 'name',
+              type: 'input-text',
+              description: '设置字段名，关联当前数据作用域中的数据。',
+              visibleOn: 'this.__mode == 1'
+            },
+            {
+              type: 'combo',
+              name: 'options',
+              visibleOn: 'this.__mode == 2',
+              label: '轮播选项内容',
+              multiple: true,
+              multiLine: true,
+              addable: true,
+              removable: true,
+              typeSwitchable: false,
+              conditions: [
+                {
+                  label: '图片',
+                  test: 'this.type === "image"',
+                  items: [
+                    getSchemaTpl('imageUrl', {
+                      name: 'content'
+                    }),
+                    {
+                      type: 'input-text',
+                      label: '图片标题',
+                      name: 'title',
+                      visibleOn: 'this.type == "image"'
+                    },
+                    getSchemaTpl('className', {
+                      label: '图片标题类名',
+                      name: 'titleClassName',
+                      visibleOn: 'this.type == "image"'
+                    }),
+                    {
+                      type: 'textarea',
+                      label: '图片描述',
+                      name: 'description',
+                      visibleOn: 'this.type == "image"'
+                    },
+                    getSchemaTpl('className', {
+                      label: '图片描述类名',
+                      name: 'descriptionClassName',
+                      visibleOn: 'this.type == "image"'
+                    }),
+                    {
+                      type: 'input-text',
+                      label: '打开外部链接',
+                      name: 'href',
+                      visibleOn: 'this.type == "image"'
+                    }
+                  ],
+                  scaffold: {
+                    type: 'input-image',
+                    image: ''
+                  }
+                },
+
+                {
+                  label: 'HTML',
+                  test: 'this.type === "html"',
+                  items: [
+                    getSchemaTpl('richText', {
+                      label: '内容',
+                      name: 'content'
+                    })
+                  ],
+                  scaffold: {
+                    type: 'html',
+                    content: '<p>html 片段</p>'
+                  }
+                }
+              ],
+              pipeIn: (value: any) => {
+                return Array.isArray(value) && value.length
+                  ? value.map(
+                      (item: {
+                        html?: string;
+                        image?: string;
+                        title?: string;
+                        titleClassName?: string;
+                        description?: string;
+                        descriptionClassName?: string;
+                      }) =>
+                        item && item.hasOwnProperty('html')
+                          ? {
+                              type: 'html',
+                              content: item.html
+                            }
+                          : {
+                              type: 'image',
+                              content: item.image,
+                              title: item.title,
+                              titleClassName: item.titleClassName,
+                              description: item.description,
+                              descriptionClassName: item.descriptionClassName
+                            }
+                    )
+                  : [];
+              },
+              pipeOut: (value: any, originValue: any, data: any) => {
+                return Array.isArray(value) && value.length
+                  ? value.map(
+                      (item: {
+                        type: string;
+                        content: string;
+                        title?: string;
+                        titleClassName?: string;
+                        description?: string;
+                        descriptionClassName?: string;
+                      }) => {
+                        return item.type === 'html'
+                          ? {
+                              html: item.content
+                            }
+                          : {
+                              image: item.content,
+                              title: item.title,
+                              titleClassName: item.titleClassName,
+                              description: item.description,
+                              descriptionClassName: item.descriptionClassName
+                            };
+                      }
+                    )
+                  : [];
+              }
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            {
+              name: 'auto',
+              type: 'switch',
+              mode: 'inline',
+              className: 'w-full',
+              label: '自动轮播',
+              pipeIn: defaultValue(true)
+            },
+            {
+              name: 'interval',
+              type: 'input-range',
+              label: '动画间隔',
+              min: 1,
+              max: 100,
+              step: 1,
+              unit: 's',
+              pipeIn: (value: any) => (value ?? 3000) / 1000,
+              pipeOut: (value: any, originValue: any, data: any) => value * 1000
+            },
+            {
+              name: 'duration',
+              type: 'input-range',
+              label: '动画时长',
+              min: 100,
+              max: 2000,
+              step: 10,
+              pipeIn: defaultValue(500),
+              unit: 'ms'
+            },
+            {
+              name: 'animation',
+              label: '动画效果',
+              type: 'button-group-select',
+              mode: 'inline',
+              className: 'w-full',
+              size: 'sm',
+              pipeIn: defaultValue('fade'),
+              options: [
+                {
+                  label: 'fade',
+                  value: 'fade'
+                },
+                {
+                  label: 'slide',
+                  value: 'slide'
+                }
+              ]
+            },
+            {
+              name: 'controlsTheme',
+              label: '控制按钮主题',
+              type: 'button-group-select',
+              size: 'sm',
+              pipeIn: defaultValue('light'),
+              mode: 'inline',
+              className: 'w-full',
+              options: [
+                {
+                  label: 'light',
+                  value: 'light'
+                },
+                {
+                  label: 'dark',
+                  value: 'dark'
+                }
+              ]
+            },
+            {
+              name: 'controls',
+              label: '控制显示',
+              type: 'button-group-select',
+              size: 'sm',
+              mode: 'inline',
+              className: 'w-full',
+              pipeIn: defaultValue('dots,arrows'),
+              multiple: true,
+              options: [
+                {
+                  label: '底部圆点',
+                  value: 'dots'
+                },
+                {
+                  label: '左右箭头',
+                  value: 'arrows'
+                }
+              ]
+            },
+            {
+              name: 'width',
+              type: 'input-text',
+              label: '宽度',
+              validations: 'isNumeric',
+              addOn: {
+                type: 'button',
+                label: 'px'
+              }
+            },
+            {
+              name: 'height',
+              type: 'input-text',
+              label: '高度',
+              validations: 'isNumeric',
+              addOn: {
+                type: 'button',
+                label: 'px'
+              }
+            },
+            getSchemaTpl('className')
+          ]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        }
+      ])
+    ];
+  };
+
+  filterProps(props: any) {
+    // 编辑的时候别自动轮播，影响编辑
+    props.auto = false;
+    return props;
+  }
+
+  /**
+   * 补充切换的 toolbar
+   * @param context
+   * @param toolbars
+   */
+  buildEditorToolbar(
+    context: BaseEventContext,
+    toolbars: Array<BasicToolbarItem>
+  ) {
+    if (
+      context.info.plugin === this &&
+      context.info.renderer.name === 'carousel' &&
+      !context.info.hostId
+    ) {
+      const node = context.node;
+
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-left',
+        tooltip: '上个卡片',
+        onClick: () => {
+          const control = node.getComponent();
+          control?.prev?.();
+        }
+      });
+
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-right',
+        tooltip: '下个卡片',
+        onClick: () => {
+          const control = node.getComponent();
+
+          control?.next?.();
+        }
+      });
+    }
+  }
+}
+
+registerEditorPlugin(CarouselPlugin);

package/src/plugin/Chart.tsx

@@ -0,0 +1,230 @@
+import {Button} from 'amis';
+import React from 'react';
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin,
+  RegionConfig,
+  RendererInfo
+} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {diff} from '../util';
+import AMisCodeEditor from '../component/Panel/AMisCodeEditor';
+import {RendererAction} from '../event-action';
+
+const ChartConfigEditor = ({value, onChange}: any) => {
+  return (
+    <div className="ae-JsonEditor">
+      <AMisCodeEditor value={value} onChange={onChange} />
+    </div>
+  );
+};
+
+export class ChartPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'chart';
+  $schema = '/schemas/ChartSchema.json';
+
+  // 组件名称
+  name = '图表';
+  isBaseComponent = true;
+  description =
+    '用来渲染图表，基于 echarts 图表库，理论上 echarts 所有图表类型都支持。';
+  docLink = '/amis/zh-CN/components/chart';
+  tags = ['展示'];
+  icon = 'fa fa-pie-chart';
+  scaffold = {
+    type: 'chart',
+    config: {
+      xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: 'line'
+        }
+      ]
+    },
+    replaceChartOption: true
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '更新数据',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelTitle = '图表';
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            getSchemaTpl('api', {
+              label: '接口拉取',
+              description:
+                '接口可以返回配置，或者数据，建议返回数据可映射到 Echarts 配置中'
+            }),
+
+            getSchemaTpl('switch', {
+              label: '初始是否拉取',
+              name: 'initFetch',
+              visibleOn: 'data.api',
+              pipeIn: defaultValue(true)
+            }),
+
+            {
+              name: 'interval',
+              label: '定时刷新间隔',
+              type: 'input-number',
+              step: 500,
+              visibleOn: 'data.api',
+              description: '设置后将自动定时刷新，最小3000, 单位 ms'
+            },
+            {
+              name: 'config',
+              asFormItem: true,
+              component: ChartConfigEditor,
+              // type: 'json-editor',
+              label: 'Echarts 配置',
+              description: '支持数据映射，可将接口返回的数据填充进来'
+              // size: 'lg'
+              // pipeOut: (value: any) => {
+              //   try {
+              //     return value ? JSON.parse(value) : null;
+              //   } catch (e) {}
+              //   return null;
+              // }
+            },
+            {
+              name: 'clickAction',
+              asFormItem: true,
+              children: ({onChange, value}: any) => (
+                <div className="m-b">
+                  <Button
+                    size="sm"
+                    level={value ? 'danger' : 'info'}
+                    onClick={this.editDrillDown.bind(this, context.id)}
+                  >
+                    配置 DrillDown
+                  </Button>
+
+                  {value ? (
+                    <Button
+                      size="sm"
+                      level="link"
+                      className="m-l"
+                      onClick={() => onChange('')}
+                    >
+                      删除 DrillDown
+                    </Button>
+                  ) : null}
+                </div>
+              )
+            },
+            {
+              name: 'dataFilter',
+              type: 'js-editor',
+              allowFullscreen: true,
+              label: '数据加工',
+              size: 'lg',
+              description: `
+              如果后端没有直接返回 Echart 配置，可以自己写一段函数来包装。
+              <p>签名：(config, echarts, data) => config</p>
+              <p>参数说明</p>
+              <ul>
+              <li><code>config</code> 原始数据</li>
+              <li><code>echarts</code> echarts 对象</li>
+              <li><code>data</code> 如果配置了数据接口，接口返回的数据通过此变量传入</li>
+              </ul>
+              <p>示例</p>
+              <pre>debugger; // 可以浏览器中断点调试\n\n// 查看原始数据\nconsole.log(config)\n\n// 返回新的结果 \nreturn {}</pre>
+              `
+            },
+
+            getSchemaTpl('switch', {
+              label: 'Chart 配置完全替换',
+              name: 'replaceChartOption',
+              labelRemark: {
+                trigger: 'click',
+                className: 'm-l-xs',
+                rootClose: true,
+                content:
+                  '默认为追加模式，新的配置会跟旧的配置合并，如果勾选将直接完全覆盖。',
+                placement: 'left'
+              }
+            })
+          ]
+        },
+        {
+          title: '外观',
+          body: [getSchemaTpl('className')]
+        },
+        {
+          title: '显隐',
+          body: [getSchemaTpl('visible')]
+        },
+        {
+          title: '其他',
+          body: [getSchemaTpl('name')]
+        }
+      ])
+    ];
+  };
+
+  editDrillDown(id: string) {
+    const manager = this.manager;
+    const store = manager.store;
+    const node = store.getNodeById(id);
+    const value = store.getValueOf(id);
+
+    const dialog = (value.clickAction && value.clickAction.dialog) || {
+      title: '标题',
+      body: ['<p>内容 <code>${value|json}</code></p>']
+    };
+
+    node &&
+      value &&
+      this.manager.openSubEditor({
+        title: '配置 DrillDown 详情',
+        value: {
+          type: 'container',
+          ...dialog
+        },
+        slot: {
+          type: 'container',
+          body: '$$'
+        },
+        typeMutable: false,
+        onChange: newValue => {
+          newValue = {
+            ...value,
+            clickAction: {
+              actionType: 'dialog',
+              dialog: newValue
+            }
+          };
+          manager.panelChangeValue(newValue, diff(value, newValue));
+        }
+      });
+  }
+}
+
+registerEditorPlugin(ChartPlugin);

package/src/plugin/CodeView.tsx

@@ -0,0 +1,60 @@
+/**
+ * @file 代码高亮显示
+ */
+import {registerEditorPlugin} from '../manager';
+import {BaseEventContext, BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+
+export class CodeViewPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'code';
+  $schema = '/schemas/CodeSchema.json';
+
+  // 组件名称
+  name = '代码高亮';
+  isBaseComponent = true;
+  icon = 'fa fa-code';
+  description = '代码高亮';
+  docLink = '/amis/zh-CN/components/code';
+  tags = ['展示'];
+  scaffold = {
+    type: 'code',
+    language: 'html',
+    value: '<div>html</div>'
+  };
+  previewSchema: any = {
+    ...this.scaffold
+  };
+
+  panelTitle = '代码高亮';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            type: 'input-text',
+            label: '名称',
+            name: 'name'
+          },
+          {
+            type: 'editor',
+            label: '固定值',
+            allowFullscreen: true,
+            name: 'value'
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [getSchemaTpl('className')]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }
+    ])
+  ];
+}
+
+registerEditorPlugin(CodeViewPlugin);