refactor

src/components/BasicShop/BasicComponents/Carousel/index.tsx

@@ -1,9 +1,9 @@
-import { CarouselConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo, PropsWithChildren } from 'react';
 import { Carousel } from 'zarm';
 import styles from './index.less';
+import { ICarouselConfig } from './schema';
 
-interface CarouselTypes extends CarouselConfigType {
+interface CarouselTypes extends ICarouselConfig {
   isTpl: boolean;
 }
 

src/components/BasicShop/BasicComponents/Carousel/schema.ts

@@ -1,4 +1,31 @@
-const Carousel = {
+import {
+  IDataListConfigType,
+  IRadioConfigType,
+  ISwitchConfigType,
+  TDataListDefaultType,
+  TRadioDefaultType,
+  TSwitchDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type CarouselDirectionKeyType = 'down' | 'left';
+
+export type TCarouselEditData = Array<
+  IRadioConfigType<CarouselDirectionKeyType> | ISwitchConfigType | IDataListConfigType
+>;
+export interface ICarouselConfig {
+  direction: TRadioDefaultType<CarouselDirectionKeyType>;
+  swipeable: TSwitchDefaultType;
+  autoPlay: TSwitchDefaultType;
+  imgList: TDataListDefaultType;
+  tplImg: string;
+}
+
+export interface ICarouselSchema {
+  editData: TCarouselEditData;
+  config: ICarouselConfig;
+}
+
+const Carousel: ICarouselSchema = {
   editData: [
     {
       key: 'direction',

src/components/BasicShop/BasicComponents/Footer/index.tsx

@@ -1,6 +1,6 @@
-import { FooterConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
-const Footer = memo((props: FooterConfigType) => {
+import { IFooterConfig } from './schema';
+const Footer = memo((props: IFooterConfig) => {
   const { bgColor, text, color, align, fontSize, height } = props;
   return (
     <footer

src/components/BasicShop/BasicComponents/Footer/schema.ts

@@ -1,4 +1,34 @@
-const Footer = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ISelectConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TfooterSelectKeyType = 'left' | 'center' | 'right';
+
+export type TFooterEditData = Array<
+  IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TfooterSelectKeyType>
+>;
+export interface IFooterConfig {
+  bgColor: TColorDefaultType;
+  text: TTextDefaultType;
+  color: TColorDefaultType;
+  align: TSelectDefaultType<TfooterSelectKeyType>;
+  fontSize: TNumberDefaultType;
+  height: TNumberDefaultType;
+}
+
+export interface IFooterSchema {
+  editData: TFooterEditData;
+  config: IFooterConfig;
+}
+
+const Footer: IFooterSchema = {
   editData: [
     {
       key: 'bgColor',

src/components/BasicShop/BasicComponents/Form/BaseForm.tsx

@@ -1,9 +1,23 @@
 import { Input, Cell, DateSelect, Radio, Select } from 'zarm';
 import styles from './baseForm.less';
 import React from 'react';
+import {
+  baseFormDateTpl,
+  baseFormMyRadioTpl,
+  baseFormMySelectTpl,
+  baseFormNumberTpl,
+  baseFormTextAreaTpl,
+  baseFormTextTpl,
+  baseFormUnionType,
+} from '@/components/PanelComponents/FormEditor/types';
 // 维护表单控件， 提高form渲染性能
-const BaseForm = {
+
-  Text: props => {
+type TBaseForm = {
+  [key in baseFormUnionType]: any;
+};
+
+const BaseForm: TBaseForm = {
+  Text: (props: baseFormTextTpl & { onChange: (v: string | undefined) => void }) => {
     const { label, placeholder, onChange } = props;
     return (
       <Cell title={label}>
@@ -11,7 +25,7 @@ const BaseForm = {
       </Cell>
     );
   },
-  Textarea: props => {
+  Textarea: (props: baseFormTextAreaTpl & { onChange: (v: string | undefined) => void }) => {
     const { label, placeholder, onChange } = props;
     return (
       <Cell title={label}>
@@ -26,7 +40,7 @@ const BaseForm = {
       </Cell>
     );
   },
-  Number: props => {
+  Number: (props: baseFormNumberTpl & { onChange: (v: string | undefined | number) => void }) => {
     const { label, placeholder, onChange } = props;
     return (
       <Cell title={label}>
@@ -34,7 +48,7 @@ const BaseForm = {
       </Cell>
     );
   },
-  MyRadio: props => {
+  MyRadio: (props: baseFormMyRadioTpl & { onChange: (v: string | undefined | number) => void }) => {
     const { label, options, onChange } = props;
     return (
       <div className={styles.radioWrap}>
@@ -53,7 +67,7 @@ const BaseForm = {
       </div>
     );
   },
-  Date: props => {
+  Date: (props: baseFormDateTpl & { onChange: (v: Date) => void }) => {
     const { label, placeholder, onChange } = props;
     return (
       <Cell title={label}>
@@ -67,7 +81,9 @@ const BaseForm = {
       </Cell>
     );
   },
-  MySelect: props => {
+  MySelect: (
+    props: baseFormMySelectTpl & { onChange: ((v: Record<string, any>) => void) | undefined },
+  ) => {
     const { label, options, onChange } = props;
     return (
       <Cell title={label}>

src/components/BasicShop/BasicComponents/Form/index.tsx

@@ -1,20 +1,12 @@
-import React, { memo, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import { Button } from 'zarm';
 import BaseForm from './BaseForm';
-import req from 'utils/req';
 import styles from './index.less';
+import { IFormConfig } from './schema';
 
-function unParams(params = '?a=1&b=2&c=3') {
+const FormComponent = (props: IFormConfig) => {
-  let obj = {};
-  params &&
-    params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m, a, b, c) => {
-      if (b || c) obj[b] = c;
-    });
-  return obj;
-}
-const FormComponent = props => {
   const { title, bgColor, fontSize, titColor, btnColor, btnTextColor, api, formControls } = props;
-  const formData = {};
+  const formData: Record<string, any> = {};
   const handleChange = useCallback(
     (item, v) => {
       if (item.options) {

src/components/BasicShop/BasicComponents/Form/schema.ts

@@ -1,4 +1,34 @@
-const Form = {
+import {
+  IColorConfigType,
+  IFormItemsConfigType,
+  INumberConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TFormItemsDefaultType,
+  TNumberDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TFormEditData = Array<
+  ITextConfigType | INumberConfigType | IColorConfigType | ITextConfigType | IFormItemsConfigType
+>;
+export interface IFormConfig {
+  title: TTextDefaultType;
+  fontSize: TNumberDefaultType;
+  titColor: TColorDefaultType;
+  bgColor: TColorDefaultType;
+  btnColor: TColorDefaultType;
+  btnTextColor: TColorDefaultType;
+  api: TTextDefaultType;
+  formControls: TFormItemsDefaultType;
+}
+
+export interface IFormSchema {
+  editData: TFormEditData;
+  config: IFormConfig;
+}
+
+const Form: IFormSchema = {
   editData: [
     {
       key: 'title',

src/components/BasicShop/BasicComponents/Header/index.tsx

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 import styles from './index.less';
 import React from 'react';
-import { HeaderConfigType } from '@/components/DynamicEngine/schema';
+import { IHeaderConfig } from './schema';
 
-const Header = memo((props: HeaderConfigType) => {
+const Header = memo((props: IHeaderConfig) => {
   const { bgColor, logo, logoText, fontSize, color } = props;
   return (
     <header className={styles.header} style={{ backgroundColor: bgColor }}>

src/components/BasicShop/BasicComponents/Header/schema.ts

@@ -1,4 +1,32 @@
-const Header = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ITextConfigType,
+  IUploadConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TTextDefaultType,
+  TUploadDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type THeaderEditData = Array<
+  IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType
+>;
+export interface IHeaderConfig {
+  bgColor: TColorDefaultType;
+  logo: TUploadDefaultType;
+  logoText: TTextDefaultType;
+  fontSize: TNumberDefaultType;
+  color: TColorDefaultType;
+  height: TNumberDefaultType;
+}
+
+export interface IHeaderSchema {
+  editData: THeaderEditData;
+  config: IHeaderConfig;
+}
+
+const Header: IHeaderSchema = {
   editData: [
     {
       key: 'bgColor',

src/components/BasicShop/BasicComponents/Icon/index.tsx

@@ -2,13 +2,11 @@ import React, { memo } from 'react';
 import * as Icon from '@ant-design/icons';
 import IconImg from 'assets/icon.png';
 import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
-import { IconConfigType } from '../../../DynamicEngine/schema';
 import { AntdIconType } from './icon';
+import { IIconConfig } from './schema';
 
-interface IconType extends Omit<IconConfigType, 'spin' | 'color'> {
+interface IconType extends IIconConfig {
   isTpl?: boolean;
-  spin?: IconConfigType['spin'];
-  color?: IconConfigType['color'];
 }
 const XIcon = memo((props: IconType) => {
   const { color, size, type, spin, isTpl } = props;

src/components/BasicShop/BasicComponents/Icon/schema.ts

@@ -1,3 +1,29 @@
+import {
+  ICardPickerConfigType,
+  IColorConfigType,
+  INumberConfigType,
+  ISwitchConfigType,
+  TCardPickerDefaultType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TSwitchDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TIconEditData = Array<
+  IColorConfigType | INumberConfigType | ISwitchConfigType | ICardPickerConfigType<IconTypes>
+>;
+export interface IIconConfig {
+  color: TColorDefaultType;
+  size: TNumberDefaultType;
+  spin: TSwitchDefaultType;
+  type: TCardPickerDefaultType<IconTypes>;
+}
+
+export interface IIconSchema {
+  editData: TIconEditData;
+  config: IIconConfig;
+}
+
 export type IconTypes =
   | 'AccountBookTwoTone'
   | 'AlertTwoTone'
@@ -41,7 +67,7 @@ export type IconTypes =
   | 'SettingTwoTone'
   | 'RocketTwoTone';
 
-const Icon = {
+const Icon: IIconSchema = {
   editData: [
     {
       key: 'color',

src/components/BasicShop/BasicComponents/Image/index.tsx

@@ -1,6 +1,6 @@
-import { ImageConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
-const Image = memo((props: ImageConfigType) => {
+import { IImageConfig } from './schema';
+const Image = memo((props: IImageConfig) => {
   const { imgUrl, round = 0 } = props;
   return (
     <div style={{ borderRadius: round, width: '100%', textAlign: 'center', overflow: 'hidden' }}>

src/components/BasicShop/BasicComponents/Image/schema.ts

@@ -1,4 +1,22 @@
-const Image = {
+import {
+  INumberConfigType,
+  IUploadConfigType,
+  TNumberDefaultType,
+  TUploadDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TImageEditData = Array<IUploadConfigType | INumberConfigType>;
+export interface IImageConfig {
+  imgUrl: TUploadDefaultType;
+  round: TNumberDefaultType;
+}
+
+export interface IImageSchema {
+  editData: TImageEditData;
+  config: IImageConfig;
+}
+
+const Image: IImageSchema = {
   editData: [
     {
       key: 'imgUrl',

src/components/BasicShop/BasicComponents/List/index.tsx

@@ -1,7 +1,7 @@
-import { ListConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
 import styles from './index.less';
-const List = memo((props: ListConfigType) => {
+import { IListConfig } from './schema';
+const List = memo((props: IListConfig) => {
   const { round, sourceData, imgSize, fontSize, color } = props;
   return (
     <div className={styles.list}>
@@ -18,7 +18,7 @@ const List = memo((props: ListConfigType) => {
                   }
                   alt={item.desc}
                   style={{
-                    width: imgSize,
+                    width: parseFloat(imgSize),
                     height: imgSize,
                     objectFit: 'cover',
                     borderRadius: round,

src/components/BasicShop/BasicComponents/List/schema.ts

@@ -1,4 +1,31 @@
-const List = {
+import {
+  IColorConfigType,
+  IDataListConfigType,
+  INumberConfigType,
+  ISelectConfigType,
+  TColorDefaultType,
+  TDataListDefaultType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150';
+export type TListEditData = Array<
+  IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType<TListSelectKeyType>
+>;
+export interface IListConfig {
+  sourceData: TDataListDefaultType;
+  round: TNumberDefaultType;
+  imgSize: TSelectDefaultType<TListSelectKeyType>;
+  fontSize: TNumberDefaultType;
+  color: TColorDefaultType;
+}
+
+export interface IListSchema {
+  editData: TListEditData;
+  config: IListConfig;
+}
+
+const List: IListSchema = {
   editData: [
     {
       key: 'sourceData',
@@ -16,23 +43,23 @@ const List = {
       type: 'Select',
       range: [
         {
-          key: 60,
+          key: '60',
           text: '60 x 60',
         },
         {
-          key: 80,
+          key: '80',
           text: '80 x 80',
         },
         {
-          key: 100,
+          key: '100',
           text: '100 x 100',
         },
         {
-          key: 120,
+          key: '120',
           text: '120 x 120',
         },
         {
-          key: 150,
+          key: '150',
           text: '150 x 150',
         },
       ],
@@ -80,7 +107,7 @@ const List = {
       },
     ],
     round: 0,
-    imgSize: 80,
+    imgSize: '80',
     fontSize: 16,
     color: 'rgba(153,153,153,1)',
   },

src/components/BasicShop/BasicComponents/LongText/index.tsx

@@ -1,7 +1,7 @@
-import { LongTextConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
 import styles from './index.less';
-const LongText = memo((props: LongTextConfigType) => {
+import { ILongTextConfig } from './schema';
+const LongText = memo((props: ILongTextConfig) => {
   const { text, fontSize, color, indent, lineHeight, textAlign } = props;
   return (
     <div

src/components/BasicShop/BasicComponents/LongText/schema.ts

@@ -1,4 +1,36 @@
-const LongText = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ISelectConfigType,
+  ITextAreaConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+  TTextAreaDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+export type TLongTextSelectKeyType = 'left' | 'center' | 'right';
+
+export type TLongTextEditData = Array<
+  | ITextAreaConfigType
+  | IColorConfigType
+  | INumberConfigType
+  | ISelectConfigType<TLongTextSelectKeyType>
+>;
+export interface ILongTextConfig {
+  text: TTextAreaDefaultType;
+  color: TColorDefaultType;
+  fontSize: TNumberDefaultType;
+  indent: TNumberDefaultType;
+  lineHeight: TNumberDefaultType;
+  textAlign: TSelectDefaultType<TLongTextSelectKeyType>;
+}
+
+export interface ILongTextSchema {
+  editData: TLongTextEditData;
+  config: ILongTextConfig;
+}
+
+const LongText: ILongTextSchema = {
   editData: [
     {
       key: 'text',

src/components/BasicShop/BasicComponents/Notice/index.tsx

@@ -1,7 +1,7 @@
 import { NoticeBar } from 'zarm';
 import React, { memo } from 'react';
-import { NoticeConfigType } from '@/components/DynamicEngine/schema';
+import { INoticeConfig } from './schema';
-const Notice = memo((props: NoticeConfigType) => {
+const Notice = memo((props: INoticeConfig) => {
   const { text, speed, theme, isClose = false } = props;
   return (
     <NoticeBar theme={theme === 'default' ? undefined : theme} closable={isClose} speed={speed}>

src/components/BasicShop/BasicComponents/Notice/schema.ts

@@ -1,4 +1,31 @@
-const Notice = {
+import {
+  INumberConfigType,
+  ISelectConfigType,
+  ISwitchConfigType,
+  ITextConfigType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+  TSwitchDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TNoticeSelectKeyType = 'default' | 'warning' | 'primary' | 'success' | 'danger';
+export type TNoticeEditData = Array<
+  ITextConfigType | INumberConfigType | ISelectConfigType<TNoticeSelectKeyType> | ISwitchConfigType
+>;
+export interface INoticeConfig {
+  text: TTextDefaultType;
+  speed: TNumberDefaultType;
+  theme: TSelectDefaultType<TNoticeSelectKeyType>;
+  isClose: TSwitchDefaultType;
+}
+
+export interface INoticeSchema {
+  editData: TNoticeEditData;
+  config: INoticeConfig;
+}
+
+const Notice: INoticeSchema = {
   editData: [
     {
       key: 'text',
@@ -45,7 +72,6 @@ const Notice = {
   ],
   config: {
     text: '通知栏: 趣谈前端上线啦',
-    link: '',
     speed: 50,
     theme: 'warning',
     isClose: false,

src/components/BasicShop/BasicComponents/Qrcode/index.tsx

@@ -1,7 +1,7 @@
-import { QRCodeConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
+import { IQrcodeConfig } from './schema';
 
-const Qrcode = memo((props: QRCodeConfigType) => {
+const Qrcode = memo((props: IQrcodeConfig) => {
   const { qrcode, text, color, fontSize = 14 } = props;
   return (
     <div style={{ width: '240px', margin: '16px auto' }}>

src/components/BasicShop/BasicComponents/Qrcode/schema.ts

@@ -1,4 +1,30 @@
-const Qrcode = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ITextConfigType,
+  IUploadConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TTextDefaultType,
+  TUploadDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TQrcodeEditData = Array<
+  IUploadConfigType | ITextConfigType | IColorConfigType | INumberConfigType
+>;
+export interface IQrcodeConfig {
+  qrcode: TUploadDefaultType;
+  text: TTextDefaultType;
+  color: TColorDefaultType;
+  fontSize: TNumberDefaultType;
+}
+
+export interface IQrcodeSchema {
+  editData: TQrcodeEditData;
+  config: IQrcodeConfig;
+}
+
+const Qrcode: IQrcodeSchema = {
   editData: [
     {
       key: 'qrcode',

src/components/BasicShop/BasicComponents/Tab/index.tsx

@@ -1,11 +1,11 @@
-import { TabConfigType } from '@/components/DynamicEngine/schema';
 import React, { useEffect, useRef } from 'react';
 import { Tabs } from 'zarm';
 import styles from './index.less';
+import { ITabConfig } from './schema';
 
 const { Panel } = Tabs;
 
-const XTab = (props: TabConfigType) => {
+const XTab = (props: ITabConfig) => {
   const { tabs = ['分类一', '分类二'], activeColor, color, fontSize, sourceData } = props;
 
   const tabWrapRef = useRef<HTMLDivElement>(null);

src/components/BasicShop/BasicComponents/Tab/schema.ts

@@ -1,4 +1,32 @@
-const Tab = {
+import {
+  IColorConfigType,
+  IDataListConfigType,
+  IMutiTextConfigType,
+  INumberConfigType,
+  TColorDefaultType,
+  TDataListDefaultType,
+  TMutiTextDefaultType,
+  TNumberDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TTabEditData = Array<
+  IMutiTextConfigType | IColorConfigType | INumberConfigType | IDataListConfigType
+>;
+export interface ITabConfig {
+  tabs: TMutiTextDefaultType;
+  color: TColorDefaultType;
+  activeColor: TColorDefaultType;
+  fontSize: TNumberDefaultType;
+  imgSize: TNumberDefaultType;
+  sourceData: TDataListDefaultType;
+}
+
+export interface ITabSchema {
+  editData: TTabEditData;
+  config: ITabConfig;
+}
+
+const Tab: ITabSchema = {
   editData: [
     {
       key: 'tabs',

src/components/BasicShop/BasicComponents/Text/index.tsx

@@ -1,8 +1,8 @@
-import { TextConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
 import styles from './index.less';
+import { ITextConfig } from './schema';
 
-const Text = memo((props: TextConfigType) => {
+const Text = memo((props: ITextConfig) => {
   const { align, text, fontSize, color, lineHeight } = props;
   return (
     <div className={styles.textWrap} style={{ color, textAlign: align, fontSize, lineHeight }}>

src/components/BasicShop/BasicComponents/Text/schema.ts

@@ -1,4 +1,31 @@
-const Text = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ISelectConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TTextSelectKeyType = 'left' | 'right' | 'center';
+export type TTextEditData = Array<
+  ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType<TTextSelectKeyType>
+>;
+export interface ITextConfig {
+  text: TTextDefaultType;
+  color: TColorDefaultType;
+  fontSize: TNumberDefaultType;
+  align: TSelectDefaultType<TTextSelectKeyType>;
+  lineHeight: TNumberDefaultType;
+}
+
+export interface ITextSchema {
+  editData: TTextEditData;
+  config: ITextConfig;
+}
+const Text: ITextSchema = {
   editData: [
     {
       key: 'text',

src/components/BasicShop/MediaComponents/Video/index.tsx

@@ -1,9 +1,9 @@
-import { VideoConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
 import { Player, BigPlayButton } from 'video-react';
 import './index.css';
+import { IVideoConfig } from './schema';
 
-const VideoPlayer = memo((props: VideoConfigType) => {
+const VideoPlayer = memo((props: IVideoConfig) => {
   const { poster, url } = props;
   return (
     <div>

src/components/BasicShop/MediaComponents/Video/schema.ts

@@ -1,4 +1,22 @@
-const Video = {
+import {
+  ITextConfigType,
+  IUploadConfigType,
+  TTextDefaultType,
+  TUploadDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TVideoEditData = Array<IUploadConfigType | ITextConfigType>;
+export interface IVideoConfig {
+  poster: TUploadDefaultType;
+  url: TTextDefaultType;
+}
+
+export interface IVideoSchema {
+  editData: TVideoEditData;
+  config: IVideoConfig;
+}
+
+const Video: IVideoSchema = {
   editData: [
     {
       key: 'poster',

src/components/BasicShop/VisualComponents/Chart/index.tsx

@@ -1,25 +1,16 @@
 import { Chart } from '@antv/f2';
-import React, { memo, PropsWithChildren, useEffect, useRef } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 // import { uuid } from 'utils/tool';
 import ChartImg from '@/assets/chart.png';
 
 import styles from './index.less';
+import { IChartConfig } from './schema';
 
-type DataItem = {
+interface XChartProps extends IChartConfig {
-  name: string;
-  value: number;
-};
-
-interface XChartProps {
   isTpl: boolean;
-  title: string;
-  color: string;
-  size: number;
-  paddingTop: number;
-  data: Array<DataItem>;
 }
 
-const XChart = (props: PropsWithChildren<XChartProps>) => {
+const XChart = (props: XChartProps) => {
   const { isTpl, data, color, size, paddingTop, title } = props;
   const chartRef = useRef(null);
   useEffect(() => {
@@ -44,7 +35,7 @@ const XChart = (props: PropsWithChildren<XChartProps>) => {
       // Step 4: 渲染图表
       chart.render();
     }
-  }, []);
+  }, [data, isTpl]);
   return (
     <div className={styles.chartWrap}>
       <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>

src/components/BasicShop/VisualComponents/Chart/schema.ts

@@ -1,4 +1,31 @@
-const Chart = {
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ITableConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TTableDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TChartEditData = Array<
+  ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
+>;
+export interface IChartConfig {
+  title: TTextDefaultType;
+  size: TNumberDefaultType;
+  color: TColorDefaultType;
+  paddingTop: TNumberDefaultType;
+  data: TTableDefaultType;
+}
+
+export interface IChartSchema {
+  editData: TChartEditData;
+  config: IChartConfig;
+}
+
+const Chart: IChartSchema = {
   editData: [
     {
       key: 'title',

src/components/BasicShop/VisualComponents/XProgress/index.tsx

@@ -1,9 +1,9 @@
-import { XProgressConfigType } from '@/components/DynamicEngine/schema';
 import React, { memo } from 'react';
 import { Progress } from 'zarm';
 import styles from './index.less';
+import { IXProgressConfig } from './schema';
 
-const XProgress = memo((props: XProgressConfigType) => {
+const XProgress = memo((props: IXProgressConfig) => {
   const { theme, size, shape, percent, strokeWidth } = props;
   return (
     <div className={styles.textWrap} style={{ textAlign: 'center' }}>

src/components/BasicShop/VisualComponents/XProgress/schema.ts

@@ -1,4 +1,32 @@
-const XProgress = {
+import {
+  INumberConfigType,
+  IRadioConfigType,
+  ISelectConfigType,
+  TNumberDefaultType,
+  TRadioDefaultType,
+  TSelectDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+export type TXProgressSelectKeyType = 'success' | 'warning' | 'danger';
+export type TXProgressRadiotKeyType = 'circle' | 'line' | 'semi-circle';
+export type TXProgressEditData = Array<
+  | ISelectConfigType<TXProgressSelectKeyType>
+  | IRadioConfigType<TXProgressRadiotKeyType>
+  | INumberConfigType
+>;
+export interface IXProgressConfig {
+  theme: TSelectDefaultType<TXProgressSelectKeyType>;
+  shape: TRadioDefaultType<TXProgressRadiotKeyType>;
+  size: TNumberDefaultType;
+  percent: TNumberDefaultType;
+  strokeWidth: TNumberDefaultType;
+}
+
+export interface IXProgressSchema {
+  editData: TXProgressEditData;
+  config: IXProgressConfig;
+}
+
+const XProgress: IXProgressSchema = {
   editData: [
     {
       key: 'theme',

src/components/PanelComponents/CardPicker/index.tsx

@@ -2,18 +2,17 @@ import { useState, useEffect, memo } from 'react';
 import classnames from 'classnames';
 import Icon from '../../BasicShop/BasicComponents/Icon';
 import styles from './index.less';
-import { IconTypes } from '../../DynamicEngine/schema';
 import React from 'react';
+import { IconTypes } from '@/components/BasicShop/BasicComponents/Icon/schema';
+import { ICardPickerConfigType } from '../FormEditor/types';
 
-interface CardPickerType {
+interface CardPickerType extends Omit<ICardPickerConfigType<IconTypes>, 'type' | 'key' | 'name'> {
-  type: IconTypes;
-  icons: Array<IconTypes>;
   onChange?: (v: string) => void;
+  type: IconTypes;
 }
 
 export default memo((props: CardPickerType) => {
   const { type, icons, onChange } = props;
-  console.log(type);
   const [selected, setSelected] = useState<IconTypes>(type);
 
   const handlePicker = (v: IconTypes) => {
@@ -37,7 +36,7 @@ export default memo((props: CardPickerType) => {
             onClick={() => handlePicker(item)}
             key={i}
           >
-            <Icon type={item} size={20} />
+            <Icon type={item} size={20} color={'#4091f7'} spin={false} />
           </span>
         );
       })}

src/components/PanelComponents/DataList/editorModal.tsx

@@ -1,13 +1,10 @@
 import React, { memo, useEffect, FC } from 'react';
 import { Form, Select, Input, Modal } from 'antd';
 import Upload from '../Upload';
-import { BasicDataSource } from '../../DynamicEngine/schema';
 import { Store } from 'antd/lib/form/interface';
-
+import { TDataListDefaultTypeItem } from '../FormEditor/types';
 // import styles from './index.less';
 const normFile = (e: any) => {
-  console.log('Upload event:', e);
-  console.log('ffffffffff'); //待修改？
   if (Array.isArray(e)) {
     return e;
   }
@@ -24,7 +21,7 @@ const formItemLayout = {
 export type EditorModalProps = {
   visible: boolean;
   onCancel: ((e: React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-  item?: BasicDataSource;
+  item?: TDataListDefaultTypeItem;
   onSave: Function;
 };
 

src/components/PanelComponents/DataList/index.tsx

@@ -18,7 +18,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import EditorModal from './editorModal';
 import { uuid } from '@/utils/tool';
 import styles from './index.less';
-import { BasicDataSource } from '../../DynamicEngine/schema';
+import { TDataListDefaultType, TDataListDefaultTypeItem } from '../FormEditor/types';
 
 type ListItemProps = DndItemProps & {
   isDragging: boolean;
@@ -66,7 +66,7 @@ function ListItem(props: ListItemProps) {
   );
 }
 
-type DndItemProps = BasicDataSource & {
+type DndItemProps = TDataListDefaultTypeItem & {
   onDel: Function;
   onEdit: Function;
   key: number;
@@ -127,8 +127,8 @@ const DndItem = DropTarget(
 )(DragSource(type, dragSpec, dragCollect)(ListItem));
 
 export type DataListMemo = {
-  onChange?: (v: BasicDataSource[]) => void;
+  onChange?: (v: TDataListDefaultType) => void;
-  value?: BasicDataSource[];
+  value?: TDataListDefaultType;
 };
 
 export type DataListType = DataListMemo & {
@@ -139,7 +139,7 @@ const List = function(props: DataListType) {
   const { onChange, value, connectDropTarget } = props;
   const [list, setList] = useState(value);
   const [visible, setVisible] = useState(false);
-  const [curItem, setCurItem] = useState<BasicDataSource>();
+  const [curItem, setCurItem] = useState<TDataListDefaultTypeItem>();
 
   const handleDel = (id: string) => {
     if (value && onChange) {
@@ -172,13 +172,13 @@ const List = function(props: DataListType) {
     setVisible(false);
   }, []);
 
-  const handleEdit = useCallback((item: BasicDataSource) => {
+  const handleEdit = useCallback((item: TDataListDefaultTypeItem) => {
     setVisible(true);
     setCurItem(item);
   }, []);
 
   const handleSave = useCallback(
-    (item: BasicDataSource) => {
+    (item: TDataListDefaultTypeItem) => {
       setVisible(false);
       if (onChange) {
         onChange(list!.map(p => (p.id === item.id ? item : p)));

src/components/PanelComponents/FormEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Form, Select, InputNumber, Input, Switch, Radio, Button } from 'antd';
 import Upload from '../Upload';
 import DataList from '../DataList';
@@ -7,7 +7,6 @@ import Color from '../Color';
 import CardPicker from '../CardPicker';
 import Table from '../Table';
 import { Store } from 'antd/lib/form/interface';
-import { BasicRangeType, IconSchema } from '../../DynamicEngine/schema';
 import FormItems from '../FormItems';
 // import styles from './index.less';
 const normFile = (e: any) => {
@@ -37,6 +36,7 @@ interface FormEditorProps {
 
 const FormEditor = (props: FormEditorProps) => {
   const { config, defaultValue, onSave, onDel, uid } = props;
+  console.log(defaultValue, config);
   const onFinish = (values: Store) => {
     onSave && onSave(values);
   };
@@ -51,7 +51,7 @@ const FormEditor = (props: FormEditorProps) => {
     return () => {
       form.resetFields();
     };
-  }, [defaultValue]);
+  }, [defaultValue, form]);
   return (
     <Form
       form={form}
@@ -96,7 +96,7 @@ const FormEditor = (props: FormEditorProps) => {
             {item.type === 'Select' && (
               <Form.Item label={item.name} name={item.key}>
                 <Select placeholder="请选择">
-                  {item.range.map((v: BasicRangeType<string>, i: number) => {
+                  {item.range.map((v: any, i: number) => {
                     return (
                       <Option value={v.key} key={i}>
                         {v.text}
@@ -109,7 +109,7 @@ const FormEditor = (props: FormEditorProps) => {
             {item.type === 'Radio' && (
               <Form.Item label={item.name} name={item.key}>
                 <Radio.Group>
-                  {item.range.map((v: BasicRangeType<string>, i: number) => {
+                  {item.range.map((v: any, i: number) => {
                     return (
                       <Radio value={v.key} key={i}>
                         {v.text}
@@ -136,10 +136,7 @@ const FormEditor = (props: FormEditorProps) => {
             )}
             {item.type === 'CardPicker' && (
               <Form.Item label={item.name} name={item.key} valuePropName="type">
-                <CardPicker
+                <CardPicker icons={item.icons} type={defaultValue['type']} />
-                  icons={item.icons}
-                  type={defaultValue['type'] as IconSchema['config']['type']}
-                />
               </Form.Item>
             )}
             {item.type === 'Table' && (

src/components/PanelComponents/FormEditor/types.ts

@@ -1,14 +1,199 @@
-export interface ItextAreaConfigType {
+////////////////////
+export interface IUploadConfigType {
+  key: string;
+  name: string;
+  type: 'Upload';
+  isCrop?: boolean;
+  cropRate?: number;
+}
+
+export type TUploadDefaultType = Array<{
+  uid: string;
+  name: string;
+  status: string;
+  url: string;
+}>;
+/////////////////
+export interface ITextConfigType {
+  key: string;
+  name: string;
+  type: 'Text';
+}
+export type TTextDefaultType = string;
+////////////////////////
+export interface ITextAreaConfigType {
   key: string;
   name: string;
   type: 'TextArea';
 }
-export type TtextAreaDefaultType = string;
+export type TTextAreaDefaultType = string;
-
+////////////////////////////
-export interface InumberConfigType {
+export interface INumberConfigType {
   key: string;
   name: string;
   type: 'Number';
   range?: [number, number];
   step?: number;
 }
+
+export type TNumberDefaultType = number;
+
+///////////////////
+export interface IDataListConfigType {
+  key: string;
+  name: string;
+  type: 'DataList';
+}
+
+export type TDataListDefaultTypeItem = {
+  id: string;
+  title: string;
+  desc: string;
+  link: string;
+  type?: number;
+  imgUrl: TUploadDefaultType;
+};
+
+export type TDataListDefaultType = Array<TDataListDefaultTypeItem>;
+
+////////////////////
+export interface IColorConfigType {
+  key: string;
+  name: string;
+  type: 'Color';
+}
+
+export type TColorDefaultType = string;
+
+export interface IMutiTextConfigType {
+  key: string;
+  name: string;
+  type: 'MutiText';
+}
+
+export type TMutiTextDefaultType = Array<string>;
+
+/////////////////////////////////
+export interface ISelectConfigType<KeyType> {
+  key: string;
+  name: string;
+  type: 'Select';
+  range: Array<{
+    key: KeyType;
+    text: string;
+  }>;
+}
+export type TSelectDefaultType<KeyType> = KeyType;
+
+/////////////////////////
+export interface IRadioConfigType<KeyType> {
+  key: string;
+  name: string;
+  type: 'Radio';
+  range: Array<{
+    key: KeyType;
+    text: string;
+  }>;
+}
+export type TRadioDefaultType<KeyType> = KeyType;
+
+///////////////
+
+export interface ISwitchConfigType {
+  key: string;
+  name: string;
+  type: 'Switch';
+}
+export type TSwitchDefaultType = boolean;
+
+/////////////////////////////
+export interface ICardPickerConfigType<T> {
+  key: string;
+  name: string;
+  type: 'CardPicker';
+  icons: Array<T>;
+}
+export type TCardPickerDefaultType<T> = T;
+
+/////////////
+
+export interface ITableConfigType {
+  key: string;
+  name: string;
+  type: 'Table';
+}
+export type TTableDefaultType = Array<{
+  name: string;
+  value: number;
+}>;
+
+//////////////////
+export interface IFormItemsConfigType {
+  key: string;
+  name: string;
+  type: 'FormItems';
+}
+
+//0---------baseform
+export type baseFormOptionsType = {
+  label: string;
+  value: string;
+};
+
+export type baseFormTextTpl = {
+  id: string;
+  type: 'Text';
+  label: string;
+  placeholder: string;
+};
+export type baseFormNumberTpl = {
+  id: string;
+  type: 'Number';
+  label: string;
+  placeholder: string;
+};
+
+export type baseFormTextAreaTpl = {
+  id: string;
+  type: 'Textarea';
+  label: string;
+  placeholder: string;
+};
+
+export type baseFormMyRadioTpl = {
+  id: string;
+  type: 'MyRadio';
+  label: string;
+  options: baseFormOptionsType[];
+};
+
+export type baseFormMySelectTpl = {
+  id: string;
+  type: 'MySelect';
+  label: string;
+  options: baseFormOptionsType[];
+};
+
+export type baseFormDateTpl = {
+  id: string;
+  type: 'Date';
+  label: string;
+  placeholder: string;
+};
+
+export type baseFormUnion =
+  | baseFormTextTpl
+  | baseFormNumberTpl
+  | baseFormTextAreaTpl
+  | baseFormMyRadioTpl
+  | baseFormMySelectTpl
+  | baseFormDateTpl;
+export type baseFormUnionType =
+  | baseFormTextTpl['type']
+  | baseFormNumberTpl['type']
+  | baseFormTextAreaTpl['type']
+  | baseFormMyRadioTpl['type']
+  | baseFormMySelectTpl['type']
+  | baseFormDateTpl['type'];
+
+export type TFormItemsDefaultType = Array<baseFormUnion>;

src/components/PanelComponents/FormItems/EditorModal.tsx

@@ -1,5 +1,7 @@
-import React, { memo, useEffect } from 'react';
+import React, { FC, memo, useEffect } from 'react';
 import { Form, Select, Input, Modal } from 'antd';
+import { baseFormOptionsType, baseFormUnion } from '../FormEditor/types';
+import { Store } from 'antd/lib/form/interface';
 
 const { Option } = Select;
 
@@ -8,10 +10,17 @@ const formItemLayout = {
   wrapperCol: { span: 14 },
 };
 
-const EditorModal = props => {
+interface EditorModalProps {
+  item: any;
+  onSave: (data: any) => void;
+  visible: boolean;
+  onCancel: () => void;
+}
+
+const EditorModal: FC<EditorModalProps> = props => {
   const { item, onSave, visible, onCancel } = props;
 
-  const onFinish = values => {
+  const onFinish = (values: any) => {
     onSave && onSave(values);
   };
 
@@ -19,7 +28,6 @@ const EditorModal = props => {
     form
       .validateFields()
       .then(values => {
-        console.log(values);
         values.id = item.id;
         onSave && onSave(values);
       })
@@ -34,10 +42,11 @@ const EditorModal = props => {
     return () => {
       form.resetFields();
     };
-  }, [item]);
+  }, [form, item]);
 
   return (
-    !!item && (
+    <>
+      {!!item && (
         <Modal
           title="编辑表单组件"
           visible={visible}
@@ -85,7 +94,7 @@ const EditorModal = props => {
                   maxTagCount={39}
                   maxTagTextLength={16}
                 >
-                {item.options.map((v, i) => {
+                  {item.options.map((v: baseFormOptionsType, i: number) => {
                     return (
                       <Option value={v.value} key={i}>
                         {v.label}
@@ -97,7 +106,8 @@ const EditorModal = props => {
             )}
           </Form>
         </Modal>
-    )
+      )}
+    </>
   );
 };
 

src/components/PanelComponents/FormItems/FormItems.tsx

@@ -1,14 +1,13 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState } from 'react';
 import BaseForm from '../../BasicShop/BasicComponents/Form/BaseForm';
 import EditorModal from './EditorModal';
-
 import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import styles from './formItems.less';
+import { baseFormUnion, TFormItemsDefaultType } from '../FormEditor/types';
 
 // import { Popconfirm } from 'antd';
 
-import styles from './formItems.less';
+const formTpl: TFormItemsDefaultType = [
-
-const formTpl = [
   {
     id: '1',
     type: 'Text',
@@ -50,29 +49,35 @@ const formTpl = [
     id: '6',
     type: 'Date',
     label: '日期框',
+    placeholder: '',
   },
 ];
 
-const FormItems = props => {
+interface FormItemsProps {
-  const { formList, onChange } = props;
+  formList?: TFormItemsDefaultType;
-  console.log(props);
+  onChange?: (v: TFormItemsDefaultType) => void;
-  const [formData, setFormData] = useState(formList || []);
+  data: any;
-  const [visible, setVisible] = useState(false);
+}
-  const [curItem, setCurItem] = useState();
 
-  const handleAddItem = item => {
+const FormItems = (props: FormItemsProps) => {
+  const { formList, onChange } = props;
+  const [formData, setFormData] = useState<TFormItemsDefaultType>(formList || []);
+  const [visible, setVisible] = useState(false);
+  const [curItem, setCurItem] = useState<baseFormUnion>();
+
+  const handleAddItem = (item: baseFormUnion) => {
     let tpl = formTpl.find(v => v.type === item.type);
-    let newData = [...formData, tpl];
+    let newData = [...formData, tpl!];
     setFormData(newData);
     onChange && onChange(newData);
   };
 
-  const handleEditItem = item => {
+  const handleEditItem = (item: baseFormUnion) => {
     setVisible(true);
     setCurItem(item);
   };
 
-  const handleDelItem = item => {
+  const handleDelItem = (item: baseFormUnion) => {
     let newData = formData.filter(v => v.type !== item.type);
     setFormData(newData);
     onChange && onChange(newData);
@@ -82,7 +87,7 @@ const FormItems = props => {
     setVisible(false);
   };
 
-  const handleSaveItem = data => {
+  const handleSaveItem = (data: baseFormUnion) => {
     let newData = formData.map(v => (v.type === data.type ? data : v));
     setFormData(newData);
     onChange && onChange(newData);
@@ -91,7 +96,7 @@ const FormItems = props => {
   return (
     <div className={styles.formItemWrap}>
       <div className={styles.editForm}>
-        {formData.map((item, i) => {
+        {formData.map((item: baseFormUnion, i: number) => {
           let FormItem = BaseForm[item.type];
           return (
             <div className={styles.formItem} key={i}>

src/components/PanelComponents/MutiText/index.tsx

@@ -2,11 +2,11 @@ import React, { memo, useState, useEffect } from 'react';
 import { Input, Button, Popconfirm } from 'antd';
 import { MinusCircleOutlined } from '@ant-design/icons';
 import styles from './index.less';
-import { TabConfigType } from '../../DynamicEngine/schema';
+import { TMutiTextDefaultType } from '../FormEditor/types';
 
 type MultiTextProps = {
-  onChange?: (v: TabConfigType['tabs']) => void;
+  onChange?: (v: TMutiTextDefaultType) => void;
-  value?: TabConfigType['tabs'];
+  value?: TMutiTextDefaultType;
 };
 
 export default memo(function MutiText(props: MultiTextProps) {

yarn.lock

@@ -2020,9 +2020,9 @@
   integrity sha512-rpU8FNMGxhYIF6bUlxZYO4drNjqUWCGrf4UINABAJzdcrPs4bP+Bz5VXzp8rOPZsNynnaDXbiU/MyjOGlfeczg==
 
 "@types/history@*":
-  version "4.7.7"
+  version "4.7.8"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
-  integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==
+  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
 
 "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
@@ -2153,9 +2153,9 @@
   integrity sha512-wH6Tu9mbiOt0n5EvdoWy0VGQaJMHfLIxY/6wS0xLC7CV1taM6gESEzcYy0ZlWvxxiiljYvfDIvz4hHbUUDRlhw==
 
 "@types/node@*", "@types/node@^14.6.2":
-  version "14.10.1"
+  version "14.10.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.10.1.tgz#cc323bad8e8a533d4822f45ce4e5326f36e42177"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.10.3.tgz#5ae1f119c96643fc9b19b2d1a83bfa2ec3dbb7ea"
-  integrity sha512-aYNbO+FZ/3KGeQCEkNhHFRIzBOUgc7QvcVNKXbfnhDkSfwUv91JsQQa10rDgKSTSLkXZ1UIyPe4FJJNVgw1xWQ==
+  integrity sha512-zdN0hor7TLkjAdKTnYW+Y22oIhUUpil5ZD1V1OFq0CR0CLKw+NdR6dkziTfkWRLo6sKzisayoj/GNpNbe4LY9Q==
 
 "@types/node@14.0.23":
   version "14.0.23"
@@ -2193,9 +2193,9 @@
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
 "@types/qs@*":
-  version "6.9.4"
+  version "6.9.5"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.4.tgz#a59e851c1ba16c0513ea123830dd639a0a15cb6a"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
-  integrity sha512-+wYo+L6ZF6BMoEjtf8zB2esQsqdV6WsjRK/GP9WOgLPrq87PbNWgIxS76dS5uvl/QXtHGakZmwTznIfcPXcKlQ==
+  integrity sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==
 
 "@types/range-parser@*":
   version "1.2.3"
@@ -5619,9 +5619,9 @@ ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.564:
-  version "1.3.568"
+  version "1.3.570"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.568.tgz#0fa28cd3e5cbd9e8c66f72309eef0646f65a5b66"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz#3f5141cc39b4e3892a276b4889980dabf1d29c7f"
-  integrity sha512-j9MlEwgTHVW/lq93Hw8yhzA886oLjDm3Hz7eDkWP2v4fzLVuqOWhpNluziSnmR/tBqgoYldagbLknrdg+B7Tlw==
+  integrity sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==
 
 elliptic@^6.5.3:
   version "6.5.3"
@@ -8807,9 +8807,9 @@ lines-and-columns@^1.1.6:
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
 lint-staged@^10.0.7:
-  version "10.3.0"
+  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.3.0.tgz#388c3d440590c45c339e7163f669ea69ae90b1e0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.4.0.tgz#d18628f737328e0bbbf87d183f4020930e9a984e"
-  integrity sha512-an3VgjHqmJk0TORB/sdQl0CTkRg4E5ybYCXTTCSJ5h9jFwZbcgKIx5oVma5e7wp/uKt17s1QYFmYqT9MGVosGw==
+  integrity sha512-uaiX4U5yERUSiIEQc329vhCTDDwUcSvKdRLsNomkYLRzijk3v8V9GWm2Nz0RMVB87VcuzLvtgy6OsjoH++QHIg==
   dependencies:
     chalk "^4.1.0"
     cli-truncate "^2.1.0"
@@ -10887,7 +10887,7 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.32:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -10896,6 +10896,15 @@ postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.34"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
+  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -11324,9 +11333,9 @@ rc-image@~3.0.6:
     rc-util "^5.0.6"
 
 rc-input-number@~6.0.0:
-  version "6.0.0"
+  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-6.0.0.tgz#0c0af57c8183f3ca6b87f7edf6fed3bd5a3ba16f"
+  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-6.0.1.tgz#51d7a3762a4eaec091666e153e0056f372922dc5"
-  integrity sha512-vbe+g7HvR/joknSnvLkBTi9N9I+LsV4kljfuog8WNiS7OAF3aEN0QcHSOQ4+xk6+Hx9P1tU63z2+TyEx8W/j2Q==
+  integrity sha512-cS1k6IB/V84VUQd5qWzGFrLHvZjWGHGmYbrvR0QP/C1Ju1SlBqlhqhOBTc6w+dpPs84PCH5caZtNzsHeWZ1zYA==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.5"
@@ -11438,9 +11447,9 @@ rc-resize-observer@^0.2.0, rc-resize-observer@^0.2.1, rc-resize-observer@^0.2.3:
     resize-observer-polyfill "^1.5.1"
 
 rc-select@^11.1.1, rc-select@~11.2.0:
-  version "11.2.1"
+  version "11.2.2"
-  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-11.2.1.tgz#6758d99da3338e9b3451618a39eb0d92be2f89a6"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-11.2.2.tgz#ea929e01ece1a7254ed113ad2b376f9d36b6bc9a"
-  integrity sha512-CAJHCDeHL37QH+VgQRz9DpPfIEbOU0Kx+3NF6RRuzeQ2EsXmFcagrObwPbroxVyfRx/eS5WKfK5eYS3u1llDlQ==
+  integrity sha512-pfQu3CoW6cYXi4tsCYnoCVEf/1ze8t1vvK9X8NbBtOxL4l9VIAAGf8oAMvotPKNTHrrAouxbORtL8ZZ3uw5lTA==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
@@ -11503,9 +11512,9 @@ rc-switch@~3.2.0:
     rc-util "^5.0.1"
 
 rc-table@~7.9.2:
-  version "7.9.8"
+  version "7.9.9"
-  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.9.8.tgz#6a70085125d59eac2ee49763fdd8af1260afa0c1"
+  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.9.9.tgz#6f1203a6ea82507f11f1a0b56e86862193f0ebba"
-  integrity sha512-gC1ft3iLZgUwmpEi+KeSq6OahPmH1k/NwCo5YKYhI+OCjl5BdXAErro2cKfSA2reaM0r+OqIAoNp8YL5jf+t4A==
+  integrity sha512-DlOlHtXDo/ypHV9XCY3IBKsyTfdkMyz9ZmSZFZq4qXGG3HbdKfsGlUb8COhjTDUl7QxZETiQG5c9isds25TU9A==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.5"
@@ -13039,9 +13048,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.5"
+  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz#c80757383c28abf7296744998cbc106ae8b854ce"
-  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==
 
 spdy-transport@^3.0.0:
   version "3.0.0"