amis2/examples/components/EChartsEditor/Common.tsx

/**
 * @file 生成一些通用的配置项
 */

/**
 * 创建一个层级，比如 name 是 title，这里面的子组件 name 就相当于 title.name
 * @param name
 * @param label
 */

export const createHierarchy = (name: string, controls: any[]) => {
  return {
    name: name,
    type: 'combo',
    label: '',
    noBorder: true,
    multiLine: true,
    items: controls
  };
};

/**
 * 方便生成颜色类的控件
 * @param name
 * @param label
 */
export const color = (
  name: string,
  label: string,
  defaultColor?: string,
  labelRemark?: string
) => {
  return {
    type: 'color',
    format: 'rgba',
    pipeIn: (value: any) => {
      if (
        typeof value === 'undefined' &&
        defaultColor &&
        defaultColor !== 'null'
      ) {
        return defaultColor;
      }
      return value;
    },
    labelRemark: labelRemark
      ? {
          type: 'remark',
          content: labelRemark
        }
      : undefined,
    name: name,
    label: label
  };
};

/**
 * 默认值是 true 的 switch，并且 inline
 * @param name
 * @param label
 */
export const trueSwitch = (
  name: string,
  label: string,
  labelRemark?: string
) => {
  return {
    type: 'switch',
    name: name,
    mode: 'inline',
    className: 'w-full',
    label: label,
    labelRemark: labelRemark
      ? {
          type: 'remark',
          content: labelRemark
        }
      : undefined,
    pipeIn: (value: any) => {
      if (typeof value === 'undefined') {
        return true;
      }
      return value;
    }
  };
};

/**
 * 默认值是 false 的 switch，并且 inline
 * @param name
 * @param label
 */
export const falseSwitch = (
  name: string,
  label: string,
  labelRemark?: string
) => {
  return {
    type: 'switch',
    name: name,
    mode: 'inline',
    className: 'w-full',
    labelRemark: labelRemark
      ? {
          type: 'remark',
          content: labelRemark
        }
      : undefined,
    label: label
  };
};

/**
 * 如果没数据就默认用第一个的 select
 * @param name
 * @param label
 * @param options
 */
export const select = (
  name: string,
  label: string,
  options: any[],
  labelRemark?: string
) => {
  return {
    type: 'select',
    name: name,
    label: label,
    labelRemark: labelRemark
      ? {
          type: 'remark',
          content: labelRemark
        }
      : undefined,
    pipeIn: (value: any) => {
      if (typeof value === 'undefined') {
        return options[0];
      }
      return value;
    },
    options: options
  };
};

/**
 * fieldSet 辅助
 * @param label
 * @param controls
 * @param collapsed
 */
export const fieldSet = (
  label: string,
  controls: any[],
  collapsed: boolean = false
) => {
  return {
    type: 'fieldSet',
    title: label,
    collapsable: true,
    collapsed: collapsed,
    mountOnEnter: true,
    body: controls
  };
};

/**
 * 控制一组控件的显隐
 * @param visibleOn
 * @param controls
 */
export const visibleOn = (visibleOn: string, controls: any[]) => {
  return {
    type: 'container',
    visibleOn: visibleOn,
    body: controls
  };
};

/**
 * 方便生成数字类的控件
 * @param name
 * @param label
 * @param isInteger 是否是整数
 */
export const number = (
  name: string,
  label: string,
  labelRemark?: string,
  defaultNumber?: number,
  min: number = -1e4,
  max: number = 1e4,
  step: number = 1
) => {
  const control: any = {
    type: 'input-number',
    name: name,
    label: label
  };
  if (labelRemark) {
    control.labelRemark = {
      type: 'remark',
      content: labelRemark
    };
  }
  if (typeof defaultNumber !== 'undefined') {
    control.pipeIn = (value: any) => {
      if (typeof value === 'undefined') {
        return defaultNumber;
      }
      return value;
    };
  }
  control.min = min;
  control.max = max;
  control.step = step;
  return control;
};

/**
 * 生成文本控件
 * @param name
 * @param label
 * @param labelRemark
 * @param defaultText
 */
export const text = (
  name: string,
  label: string,
  labelRemark?: string,
  defaultText?: string
) => {
  const control: any = {
    type: 'input-text',
    name: name,
    label: label
  };
  if (labelRemark) {
    if (labelRemark) {
      control.labelRemark = {
        type: 'remark',
        content: labelRemark
      };
    }
  }
  if (typeof defaultText !== 'undefined') {
    control.pipeIn = (value: any) => {
      if (typeof value === 'undefined') {
        return defaultText;
      }
      return value;
    };
  }
  return control;
};

/**
 * 用于 left/top 等，支持三种类型，一种是关键字，比如 auto，一种是数字，另一种是百分比
 * @param name
 * @param label
 * @param labelForRadio 切换按钮的文字
 * @param keywordList 关键字列表
 */
export const viewportControl = (
  name: string,
  label: string,
  labelForRadio: string,
  keywordList: string[]
) => {
  return [
    {
      type: 'button-group',
      name: name,
      label: labelForRadio,
      options: [
        {
          label: '关键字',
          value: keywordList[0]
        },
        {
          label: '数字',
          value: 2
        },
        {
          label: '百分比',
          value: 3
        }
      ],
      pipeIn: (value: any) => {
        if (typeof value === 'undefined') {
          return keywordList[0];
        }
        if (typeof value === 'string') {
          if (value.indexOf('%') !== -1) {
            return 3;
          } else {
            return keywordList[0];
          }
        } else if (typeof value === 'number') {
          return 2;
        } else {
          return keywordList[0];
        }
      },
      pipeOut: (value: number) => {
        if (value === 1) {
          return keywordList[0];
        } else if (value === 2) {
          return 0;
        } else if (value === 3) {
          return '0%';
        } else {
          return keywordList[0];
        }
      }
    },
    {
      type: 'select',
      name: name,
      label: label,
      options: keywordList,
      visibleOn: `(typeof this.${name} === "undefined") || ((typeof this.${name} === "string") && (this.${name}.indexOf("%") === -1))`
    },
    {
      type: 'input-number',
      name: name,
      label: label,
      visibleOn: `(typeof this.${name} === "number")`
    },
    {
      type: 'input-text',
      name: name,
      label: label,
      visibleOn: `(typeof this.${name} === "string") && (this.${name}.indexOf("%") !== -1)`
    }
  ];
};

/**
 * 设置某个组件在容器中的距离
 * @param label 前缀
 * @param label 组件名
 */
export const viewport = (scope: string, label: string) => {
  return {
    type: 'fieldSet',
    title: '离容器边距',
    collapsable: true,
    collapsed: true,
    mountOnEnter: true,
    body: [
      ...viewportControl(
        `${scope}left`,
        `${label}离容器左侧的距离`,
        '左侧距离值类型',
        ['auto', 'left', 'center', 'right']
      ),
      ...viewportControl(
        `${scope}top`,
        `${label}离容器上侧的距离`,
        '上侧距离值类型',
        ['auto', 'top', 'middle', 'bottom']
      ),
      ...viewportControl(
        `${scope}right`,
        `${label}离容器右侧的距离`,
        '右侧距离值类型',
        ['auto']
      ),
      ...viewportControl(
        `${scope}bottom`,
        `${label}离容器下侧的距离`,
        '下侧距离值类型',
        ['auto']
      )
    ]
  };
};

/**
 * 设置宽度的便捷方法
 * @param label
 */
export const width = (label: string) => {
  return keywordOrNumber('width', `${label}的宽度`, '宽度的单位', ['auto']);
};

/**
 * 设置高度的便捷方法
 * @param label
 */
export const height = (label: string) => {
  return keywordOrNumber('height', `${label}的高度`, '高度的单位', ['auto']);
};

/**
 * 设置 padding 的便捷方法
 * @param label
 */
export const padding = (label: string) => {
  return numberOrArray('padding', label + '内边距', '单独设置每个内边距');
};

/**
 * 设置 orient 的便捷方法
 * @param label
 */
export const origin = (label: string) => {
  return select('origin', `${label}列表的布局朝向`, ['horizontal', 'vertical']);
};

/**
 * formatter 的简便方法，不过这里不支持函数
 * @param label
 */
export const formatter = (label: string) => {
  return {
    type: 'input-text',
    name: 'formatter',
    label: `格式化${label}文本`
  };
};

/**
 * selectedMode 的简便写法
 * @param label
 */
export const selectedMode = (label: string) => {
  return booleanOrKeyword('selectedMode', `${label}选择的模式`, [
    {label: '单选', value: 'single'},
    {label: '多选', value: 'multiple'}
  ]);
};

/**
 * 生成动画相关的控件
 * @param scope
 */
export const animation = (scope?: string, collapsed: boolean = true) => {
  let prefix = '';
  if (scope) {
    prefix = `${scope}.`;
  }
  const easing = [
    'linear',
    'quadraticIn',
    'quadraticOut',
    'quadraticInOut',
    'cubicIn',
    'cubicOut',
    'cubicInOut',
    'quarticIn',
    'quarticOut',
    'quarticInOut',
    'quinticIn',
    'quinticOut',
    'quinticInOut',
    'sinusoidalIn',
    'sinusoidalOut',
    'sinusoidalInOut',
    'exponentialIn',
    'exponentialOut',
    'exponentialInOut',
    'circularIn',
    'circularOut',
    'circularInOut',
    'elasticIn',
    'elasticOut',
    'elasticInOut',
    'backIn',
    'backOut',
    'backInOut',
    'bounceIn',
    'bounceOut',
    'bounceInOut'
  ];
  return fieldSet('动画', [
    trueSwitch(`${prefix}animation`, '是否开启动画'),
    visibleOn(`this.${prefix}animation`, [
      number(
        `${prefix}animationThreshold`,
        '是否开启动画的阈值',
        '当单个系列显示的图形数量大于这个阈值时会关闭动画',
        2000
      ),
      number(
        `${prefix}animationDuration`,
        '初始动画的时长',
        '支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果，不过只能写代码',
        1000
      ),
      select(`${prefix}animationEasing`, '初始动画的缓动效果', easing),
      number(
        `${prefix}animationDelay`,
        '初始动画的延迟',
        '初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果',
        0
      )
    ]),
    number(
      `${prefix}animationDurationUpdate`,
      '数据更新动画的时长',
      '支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果',
      200
    ),
    select(`${prefix}animationEasingUpdate`, '数据更新动画的缓动效果', easing),
    number(
      `${prefix}animationDelayUpdate`,
      '数据更新动画的延迟',
      '支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果'
    )
  ]);
};

/**
 * icon 的简版写法
 */
export const icon = (label: string) => {
  return keywordOrString(
    'icon',
    `${label}的 icon`,
    '切换类型为 url',
    [
      'circle',
      'rect',
      'roundRect',
      'triangle',
      'diamond',
      'pin',
      'arrow',
      'none'
    ],
    'image://http://',
    `可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

  URL 为图片链接例如：

  'image://http://xxx.xxx.xxx/a/b.png'
  URL 为 dataURI 例如：

  'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
  可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。`
  );
};

/**
 * 用于生成类似 padding 那种可以是数字或数组的控件
 * @param name
 * @param label
 * @param labelForSwitch 切换按钮的文字
 * @param defaultNumber 默认数字
 * @param defaultArray 默认数组
 */
export const numberOrArray = (
  name: string,
  label: string,
  labelForSwitch: string,
  defaultNumber: number = 5,
  defaultArray = [0, 0, 0, 0]
) => {
  return [
    {
      type: 'group',
      body: [
        {
          type: 'input-number',
          name: name,
          hiddenOn: `Array.isArray(this.${name})`,
          label: label
        },
        {
          type: 'switch',
          name: name,
          label: labelForSwitch,
          pipeIn: (value: any) => {
            return Array.isArray(value);
          },
          pipeOut: (value: any, oldValue: any) => {
            return value ? defaultArray : defaultNumber;
          }
        }
      ]
    },

    {
      type: 'input-array',
      name: name,
      label: label,
      labelRemark:
        '设置两个值将分别是上下、左右；设置四个值则分别是上、右、下、左',
      visibleOn: `Array.isArray(this.${name})`,
      minLength: 2,
      maxLength: 4,
      items: {
        type: 'input-number'
      }
    }
  ];
};

/**
 * 用于生成类似 padding 那种可以是数字或数组的控件
 * @param name
 * @param label
 * @param labelForSwitch 切换按钮的文字
 * @param labelRemark remark
 * @param defaultNumber 默认数字
 * @param defaultArray 默认数组
 */
export const vector = (
  name: string,
  label: string,
  labelForSwitch: string,
  labelRemark?: string,
  defaultNumber: number = 0,
  defaultArray = [0, 0, 0, 0]
) => {
  return [
    {
      type: 'input-array',
      name: name,
      label: label,
      visibleOn: `Array.isArray(this.${name})`,
      minLength: 2,
      maxLength: 4,
      items: {
        type: 'input-number'
      }
    },
    {
      type: 'group',
      body: [
        {
          type: 'input-number',
          name: name,
          hiddenOn: `Array.isArray(this.${name})`,
          label: label
        },
        {
          type: 'switch',
          name: name,
          label: labelForSwitch,
          pipeIn: (value: any) => {
            return Array.isArray(value);
          },
          pipeOut: (value: any) => {
            return value ? defaultArray : defaultNumber;
          },
          labelRemark: labelRemark
            ? {
                type: 'remark',
                content: labelRemark
              }
            : undefined
        }
      ]
    }
  ];
};

/**
 * 阴影相关的控件
 */
export const shadowControls = (scope: string) => {
  return {
    type: 'fieldSet',
    title: '阴影',
    collapsable: true,
    collapsed: true,
    mountOnEnter: true,
    body: [
      color(`${scope}shadowColor`, '阴影颜色'),
      number(`${scope}shadowBlur`, '阴影模糊大小'),
      number(`${scope}shadowOffsetX`, '阴影水平方向上的偏移距离'),
      number(`${scope}shadowOffsetY`, '阴影垂直方向上的偏移距离')
    ]
  };
};

/**
 * 关键字或数字，比如 fontWeight，可以是 normal，或者 100
 * @param name
 * @param label
 * @param labelForSwitch
 * @param keywordList
 */
export const keywordOrNumber = (
  name: string,
  label: string,
  labelForSwitch: string,
  keywordList: string[],
  defaultNumber: number = 100
) => {
  return {
    type: 'group',
    body: [
      {
        type: 'switch',
        label: labelForSwitch,
        name: name,
        pipeIn: (value: any, data: any) => {
          if (typeof data[name] === 'undefined') {
            return false;
          }
          return typeof data[name] !== 'string';
        },
        pipeOut: (value: any, oldValue: any, data: any) => {
          if (value) {
            return defaultNumber;
          } else {
            return keywordList[0];
          }
        }
      },
      {
        type: 'input-number',
        name: name,
        visibleOn: `typeof(this.${name}) === 'number'`,
        label: label
      },
      {
        type: 'select',
        name: name,
        label: label,
        visibleOn: `typeof(this.${name}) === 'undefined' || typeof(this.${name}) === 'string'`,
        options: keywordList
      }
    ]
  };
};

/**
 * 可以是关键字或者是字符串
 * @param name
 * @param label
 * @param labelForSwitch
 * @param keywordList
 * @param remark
 */
export const keywordOrString = (
  name: string,
  label: string,
  labelForSwitch: string,
  keywordList: string[],
  defaultString: string = '',
  remark?: string
) => {
  return {
    type: 'group',
    body: [
      {
        type: 'switch',
        label: labelForSwitch,
        name: name,
        pipeIn: (value: any) => {
          if (typeof value === 'undefined') {
            return false;
          }
          return keywordList.indexOf(value) === -1;
        },
        pipeOut: (value: any, oldValue: any, data: any) => {
          if (value) {
            return defaultString;
          } else {
            return keywordList[0];
          }
        },
        labelRemark: remark
      },
      {
        type: 'input-text',
        name: name,
        visibleOn: `this.${name} && ${JSON.stringify(
          keywordList
        )}.indexOf(this.${name}) === -1`,
        label: label
      },
      {
        type: 'select',
        name: name,
        label: label,
        visibleOn: `typeof(this.${name}) === 'undefined' || ${JSON.stringify(
          keywordList
        )}.indexOf(this.${name}) !== -1`,
        options: keywordList
      }
    ]
  };
};

/**
 * 对象或者对象数组
 * TODO: 这样会造成配置项 double，是否有更好的方法？
 * @param name
 * @param label
 * @param labelForSwitch
 * @param keywordList
 * @param controls
 */
export const objectOrArray = (
  name: string,
  labelForSwitch: string,
  controls: any[]
) => {
  return [
    {
      type: 'switch',
      label: labelForSwitch,
      mode: 'inline',
      name: name,
      pipeIn: (value: any) => {
        if (typeof value === 'undefined') {
          return false;
        }
        return Array.isArray(value);
      },
      pipeOut: (value: any, oldValue: any, data: any) => {
        if (value) {
          if (data[name]) {
            return [data[name]];
          }
          return [{}];
        } else {
          if (data[name] && Array.isArray(data[name])) {
            return data[name][0];
          }
          return {};
        }
      }
    },
    {
      type: 'combo',
      name: name,
      label: '',
      noBorder: true,
      multiLine: true,
      visibleOn: `typeof(this.${name}) === 'undefined' || !Array.isArray(this.${name})`,
      multiple: false,
      items: controls
    },
    {
      type: 'combo',
      name: name,
      label: '',
      noBorder: true,
      multiLine: true,
      visibleOn: `Array.isArray(this.${name})`,
      multiple: true,
      items: controls
    }
  ];
};

/**
 * 常见样式设置
 * @param label
 */
export const commonStyle = (scope: string, label: string) => {
  return [
    color(`${scope}backgroundColor`, `${label}背景色，默认透明`),
    color(`${scope}borderColor`, `${label}的边框颜色`),
    number(`${scope}borderWidth`, `${label}的边框线宽`),
    ...numberOrArray(
      `${scope}borderRadius`,
      '圆角半径',
      '单独设置每个圆角半径'
    ),
    shadowControls(scope)
  ];
};

/**
 * 布尔类型或关键字，优先布尔类型
 * @param name
 * @param label
 * @param keywordList
 */
export const booleanOrKeyword = (
  name: string,
  label: string,
  keywordList: any[],
  defaultBoolean: boolean = true
) => {
  return {
    type: 'select',
    name: name,
    label: label,
    pipeIn: (value: any) => {
      if (typeof value === 'undefined') {
        return defaultBoolean ? 'true' : 'false';
      }
      return value;
    },
    pipeOut: (value: any) => {
      if (value === 'true') {
        return true;
      } else if (value === 'false') {
        return false;
      } else {
        return value;
      }
    },
    options: [
      {label: '开启', value: 'true'},
      {label: '关闭', value: 'false'},
      ...keywordList
    ]
  };
};

/**
 * enum 辅助方法
 * @param name
 * @param label
 * @param keywordList
 */
export const enumControl = (
  name: string,
  label: string,
  keywordList: any[],
  defaultValue: string,
  labelRemark?: string
) => {
  return {
    type: 'select',
    name: name,
    label: label,
    labelRemark: labelRemark
      ? {
          type: 'remark',
          content: labelRemark
        }
      : undefined,
    pipeIn: (value: any) => {
      if (typeof value === 'undefined') {
        defaultValue;
      }
      if (value === true) {
        return 'true';
      }
      if (value === false) {
        return 'false';
      }
      return value;
    },
    pipeOut: (value: any) => {
      if (value === 'true') {
        return true;
      } else if (value === 'false') {
        return false;
      } else {
        return value;
      }
    },
    options: keywordList
  };
};

/**
 * 数字或百分比
 * @param name
 * @param label
 * @param labelForSwitch
 * @param keywordList
 */
export const numberOrPercentage = (
  name: string,
  label: string,
  labelForSwitch: string,
  labelRemark?: string,
  defaultPercent: string = '1%',
  defaultNumber: number = 100
) => {
  return [
    {
      type: 'group',
      body: [
        {
          type: 'switch',
          label: labelForSwitch,
          name: name,
          pipeIn: (value: any) => {
            if (typeof value === 'undefined') {
              return false;
            }
            return typeof value !== 'string';
          },
          pipeOut: (value: any) => {
            if (value) {
              return defaultNumber;
            } else {
              return defaultPercent;
            }
          },
          labelRemark: labelRemark
            ? {
                type: 'remark',
                content: labelRemark
              }
            : undefined
        },
        {
          type: 'input-number',
          name: name,
          visibleOn: `typeof(this.${name}) === 'number'`,
          label: label
        },
        {
          type: 'input-text',
          name: name,
          label: label,
          visibleOn: `typeof(this.${name}) === 'undefined' || typeof(this.${name}) === 'string'`
        }
      ]
    }
  ];
};

/**
 * 生成文本样式的控件
 * @param scope
 */
export const textStyleControls = (scope: string, label: string) => {
  return createHierarchy(scope, [
    {
      type: 'fieldSet',
      title: label,
      collapsable: true,
      body: [
        color('color', `${label}文字的颜色`),
        select('fontStyle', `${label}文字字体的风格`, [
          'normal',
          'italic',
          'oblique'
        ]),
        keywordOrNumber(
          'fontWeight',
          `${label}文字字体的粗细`,
          '字体粗细格式使用数字',
          ['normal', 'bold', 'bolder', 'lighter']
        ),
        {
          type: 'input-text',
          name: 'fontFamily',
          label: `${label}文字的字体`,
          options: [
            'Arial',
            'Bookman',
            'Candara',
            'Courier New',
            'Courier',
            'Garamond',
            'Georgia',
            'Helvetica',
            'Impact',
            'Microsoft YaHei',
            'Monaco',
            'monospace',
            'Palatino',
            'Roboto',
            'sans-serif',
            'serif',
            'Times New Roman',
            'Verdana'
          ]
        },
        number('fontSize', `${label}文字的字体大小`),
        number('lineHeight', `${label}行高`),
        // TODO：用处不大，要不别支持了
        numberOrPercentage('width', '文字块宽度', '宽度使用数字'),
        numberOrPercentage('height', '文字块高度', '高度使用数字'),
        color('textBorderColor', '文字本身的描边颜色'),
        number('textBorderWidth', '文字本身的描边宽度'),
        color('textShadowColor', '文字本身的阴影颜色'),
        number('textShadowBlur', '文字本身的阴影长度'),
        number('textShadowOffsetX', '文字本身的阴影 X 偏移'),
        number('textShadowOffsetY', '文字本身的阴影 Y 偏移')
        // TODO: rich 暂时不支持
      ]
    }
  ]);
};

// 对于一些没正确识别的 label 手动处理
const FIX_LABEL = {
  symbolKeepAspect: '是否在缩放时保持该图形的长宽比',
  pageIcons: '图例控制块的图标',
  pageIconColor: '翻页按钮的颜色',
  pageIconInactiveColor: '翻页按钮不激活时（即翻页到头时）的颜色',
  pageIconSize: '翻页按钮的大小',
  scrollDataIndex: '图例当前最左上显示项的 dataIndex',
  pageButtonItemGap: '图例控制块中，按钮和页信息之间的间隔',
  pageButtonGap: '图例控制块和图例项之间的间隔',
  pageButtonPosition: '图例控制块的位置',
  pageFormatter: '图例控制块中，页信息的显示格式',
  appendToBody: '是否添加为 HTML 的 <body> 的子节点'
};

/**
 * 构建某个基于文档的控件
 * @param name
 * @param option
 */
const buildOneOption = (scope: string, name: string, option: any) => {
  if (name.indexOf('<') !== -1) {
    return;
  }
  if (name.indexOf('.0') != -1) {
    return;
  }
  if (name.indexOf('.1') != -1) {
    return;
  }
  const desc = option.desc.trim();
  const uiControl = option.uiControl;
  if (!desc) {
    console.warn('must have desc', name);
    return false;
  }
  const descSplit = desc.split('。');
  let label = descSplit[0]
    .trim()
    .replace('<p>', '')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&#39;/g, '')
    .replace(/<\/?[^>]+(>|$)/g, '');

  let remark =
    descSplit.length > 1 ? descSplit[1].trim().replace('</p>', '') : '';
  // 有些描述太长了，再通过逗号拆分一下
  const labelSplitComma = label.split('，');
  if (labelSplitComma.length > 1) {
    label = labelSplitComma[0];
    remark = labelSplitComma[1] + remark;
  }

  if (name in FIX_LABEL) {
    label = FIX_LABEL[name as keyof typeof FIX_LABEL];
  }

  remark = `「${name}」${remark}`;

  name = scope + name;
  if (!uiControl || !uiControl.type) {
    // 这种可能只有 desc
    return text(name, label, remark);
  }
  const uiControlType = uiControl.type;
  if (uiControlType === 'boolean') {
    if (uiControl.default) {
      return trueSwitch(name, label, remark);
    } else {
      return falseSwitch(name, label, remark);
    }
  } else if (uiControlType === 'color') {
    return color(name, label, uiControl.default, remark);
  } else if (uiControlType === 'number' || uiControlType === 'angle') {
    const defaultValue =
      typeof uiControl.default === 'undefined' ? 0 : +uiControl.default;
    const min = typeof uiControl.min === 'undefined' ? -1e4 : +uiControl.min;
    const max = typeof uiControl.max === 'undefined' ? 1e4 : +uiControl.max;
    const step = typeof uiControl.step === 'undefined' ? 1 : +uiControl.step;
    return number(name, label, remark, defaultValue, min, max, step);
  } else if (uiControlType === 'percent') {
    return numberOrPercentage(name, label, '使用绝对值', remark);
  } else if (uiControlType === 'enum') {
    if (uiControl.options) {
      return enumControl(
        name,
        label,
        uiControl.options.split(',').map((item: string) => item.trim()),
        uiControl.default,
        remark
      );
    } else {
      console.warn('enum do not have options, fallback to text', name);
      return text(name, label, remark);
    }
  } else if (uiControlType === 'vector') {
    return vector(name, label, '单独设置', remark);
  } else if (uiControlType === 'percentvector') {
    // TODO: 可能需要特殊处理
    // return vector(name, label, '单独设置', remark);
  } else if (uiControlType === 'text') {
    // return text(name, label, remark, uiControl.default);
  } else {
    console.warn('unknow type', name, uiControlType);
  }
};

export const buildGroupOptions = (
  scope: string,
  parentName: string,
  options: any
) => {
  let controls: any[] = [];
  for (const name in options) {
    if (name.startsWith(parentName + '.')) {
      const control = buildOneOption(scope, name, options[name]);
      if (control) {
        if (Array.isArray(control)) {
          controls = controls.concat(control);
        } else {
          controls.push(control);
        }
      }
    }
  }
  return controls;
};

/**
 * 基于 ECharts 文档的数据构建控件，对常见元素做分组
 * @param scope 前缀，虽然可以用 combo，但加前缀可以方便 debug，空字符串就是没前缀
 * @param options
 */
export const buildOptions = (scope: string, options: any) => {
  const commonStyleKeys = new Set([
    'backgroundColor',
    'borderColor',
    'borderWidth',
    'borderRadius'
  ]);

  const viewportKeys = new Set(['left', 'top', 'right', 'bottom']);

  // 没啥用的
  const uselessKeys = new Set(['id', 'z', 'zlevel']);

  let controls = [];

  // 有些属性有深层结构，对它们进行特殊处理，使用 fieldSet 来自动折叠
  const groupKeys = new Set();

  for (const name in options) {
    if (name.indexOf('.') !== -1) {
      groupKeys.add(name.split('.')[0]);
    }
  }

  for (const name in options) {
    // if (!name.startsWith('label.padding')) {
    //   continue; // 用于开发时单独测试某个属性
    // }
    // 这些样式单独处理或忽略
    if (
      commonStyleKeys.has(name) ||
      viewportKeys.has(name) ||
      uselessKeys.has(name)
    ) {
      continue;
    }
    if (
      name.startsWith('textStyle') ||
      name.startsWith('subtextStyle') ||
      name.startsWith('pageTextStyle') ||
      name.startsWith('animation')
    ) {
      continue;
    }
    // TODO: 后续单独处理
    if (name === 'data' || name === 'tooltip') {
      continue;
    }

    if (groupKeys.has(name)) {
      controls.push(
        fieldSet(name, buildGroupOptions(scope, name, options), true)
      );
    }

    if (name.indexOf('.') !== -1) {
      // 前面已经处理了
      continue;
    }

    const control = buildOneOption(scope, name, options[name]);

    if (control) {
      if (Array.isArray(control)) {
        controls = controls.concat(control);
      } else {
        controls.push(control);
      }
    } else {
      console.warn('build control error', name);
    }
  }

  return controls;
};