add common

2026-03-10 09:55:53 +00:00 · 2020-09-23 22:49:10 +08:00 · 2020-09-23 22:49:10 +08:00 · 8274cf6030
commit 8274cf6030
parent 25c3a3c993
26 changed files with 460 additions and 153 deletions
--- a/package.json
+++ b/package.json
@ -51,7 +51,6 @@
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@antv/f2": "^3.7.7",
-    "@types/node": "^14.6.2",
    "@umijs/plugin-sass": "^1.1.1",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.2.19",
@ -82,6 +81,7 @@
  },
  "license": "MIT",
  "devDependencies": {
+    "@types/qrcode.react": "^1.0.1",
    "@types/classnames": "^2.2.10",
    "@types/codemirror": "^0.0.98",
    "@types/events": "^3.0.0",
@ -90,6 +90,7 @@
    "@types/react-color": "^3.0.4",
    "@types/react-grid-layout": "^1.1.0",
    "@types/redux-logger": "^3.0.8",
+    "@types/xlsx": "^0.0.36",
    "@typescript-eslint/eslint-plugin": "4.1.1",
    "@typescript-eslint/parser": "4.1.1",
    "babel-eslint": "10.x",
--- a/src/components/BasicShop/BasicComponents/Carousel/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Carousel/index.tsx
@ -1,13 +1,9 @@
-import React, { memo, PropsWithChildren } from 'react';
+import React, { memo } from 'react';
 import { Carousel } from 'zarm';
 import styles from './index.less';
 import { ICarouselConfig } from './schema';

-interface CarouselTypes extends ICarouselConfig {
-  isTpl: boolean;
-}
-
-const XCarousel = memo((props: PropsWithChildren<CarouselTypes>) => {
+const XCarousel = memo((props: ICarouselConfig) => {
  const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props;
  const contentRender = () => {
    return imgList.map((item, i) => {
@ -19,25 +15,38 @@ const XCarousel = memo((props: PropsWithChildren<CarouselTypes>) => {
    });
  };
  return (
-    <div style={{ width: '100%', overflow: 'hidden' }}>
+    <>
      {isTpl ? (
        <div className={styles.carousel__item__pic}>
          <img src={tplImg} alt="" />
        </div>
      ) : (
-        <Carousel
-          onChange={index => {
-            // console.log(`onChange: ${index}`);
+        <div
+          style={{
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+                        scale(${props.baseScale / 100}) 
+                        rotate(${props.baseRotate}deg)`,
          }}
-          direction={direction}
-          swipeable={swipeable}
-          autoPlay={autoPlay}
-          loop
        >
-          {contentRender()}
-        </Carousel>
+          <Carousel
+            onChange={index => {
+              // console.log(`onChange: ${index}`);
+            }}
+            direction={direction}
+            swipeable={swipeable}
+            autoPlay={autoPlay}
+            loop
+          >
+            {contentRender()}
+          </Carousel>
+        </div>
      )}
-    </div>
+    </>
  );
 });

--- a/src/components/BasicShop/BasicComponents/Carousel/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Carousel/schema.ts
@ -1,18 +1,23 @@
 import {
  IDataListConfigType,
+  INumberConfigType,
  IRadioConfigType,
  ISwitchConfigType,
  TDataListDefaultType,
  TRadioDefaultType,
  TSwitchDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';

 export type CarouselDirectionKeyType = 'down' | 'left';

 export type TCarouselEditData = Array<
-  IRadioConfigType<CarouselDirectionKeyType> | ISwitchConfigType | IDataListConfigType
+  | INumberConfigType
+  | IRadioConfigType<CarouselDirectionKeyType>
+  | ISwitchConfigType
+  | IDataListConfigType
 >;
-export interface ICarouselConfig {
+export interface ICarouselConfig extends ICommonBaseType {
  direction: TRadioDefaultType<CarouselDirectionKeyType>;
  swipeable: TSwitchDefaultType;
  autoPlay: TSwitchDefaultType;
@ -27,6 +32,8 @@ export interface ICarouselSchema {

 const Carousel: ICarouselSchema = {
  editData: [
+    ...baseConfig,
+
    {
      key: 'direction',
      name: '方向',
@ -92,6 +99,7 @@ const Carousel: ICarouselSchema = {
        ],
      },
    ],
+    ...baseDefault,
    tplImg: 'http://io.nainor.com/uploads/carousal_17442e1420f.png',
  },
 };
--- a/src/components/BasicShop/BasicComponents/Footer/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Footer/index.tsx
@ -2,19 +2,51 @@ import React, { memo } from 'react';
 import { IFooterConfig } from './schema';
 const Footer = memo((props: IFooterConfig) => {
  const { bgColor, text, color, align, fontSize, height } = props;
+  console.log(props);
  return (
-    <footer
-      style={{
-        backgroundColor: bgColor,
-        color,
-        fontSize,
-        textAlign: align,
-        height,
-        lineHeight: height + 'px',
-      }}
-    >
-      {text}
-    </footer>
+    <>
+      {props.isTpl && (
+        <footer
+          style={{
+            backgroundColor: bgColor,
+            color,
+            fontSize,
+            textAlign: align,
+            height,
+            lineHeight: height + 'px',
+          }}
+        >
+          {text}
+        </footer>
+      )}
+      {!props.isTpl && (
+        <div
+          style={{
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+                scale(${props.baseScale / 100}) 
+                rotate(${props.baseRotate}deg)`,
+          }}
+        >
+          <footer
+            style={{
+              backgroundColor: bgColor,
+              color,
+              fontSize,
+              textAlign: align,
+              height,
+              lineHeight: height + 'px',
+            }}
+          >
+            {text}
+          </footer>
+        </div>
+      )}
+    </>
  );
 });

--- a/src/components/BasicShop/BasicComponents/Footer/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Footer/schema.ts
@ -8,13 +8,14 @@ import {
  TSelectDefaultType,
  TTextDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';

 export type TfooterSelectKeyType = 'left' | 'center' | 'right';

 export type TFooterEditData = Array<
  IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TfooterSelectKeyType>
 >;
-export interface IFooterConfig {
+export interface IFooterConfig extends ICommonBaseType {
  bgColor: TColorDefaultType;
  text: TTextDefaultType;
  color: TColorDefaultType;
@ -30,6 +31,7 @@ export interface IFooterSchema {

 const Footer: IFooterSchema = {
  editData: [
+    ...baseConfig,
    {
      key: 'bgColor',
      name: '背景色',
@ -82,6 +84,7 @@ const Footer: IFooterSchema = {
    align: 'center',
    fontSize: 16,
    height: 48,
+    ...baseDefault,
  },
 };
 export default Footer;
--- a/src/components/BasicShop/BasicComponents/Form/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Form/index.tsx
@ -31,30 +31,73 @@ const FormComponent = (props: IFormConfig) => {
    }
  };
  return (
-    <div className={styles.formWrap} style={{ backgroundColor: bgColor }}>
-      {title && (
-        <div className={styles.title} style={{ fontSize, color: titColor }}>
-          {title}
+    <>
+      {props.isTpl && (
+        <div className={styles.formWrap} style={{ backgroundColor: bgColor }}>
+          {title && (
+            <div className={styles.title} style={{ fontSize, color: titColor }}>
+              {title}
+            </div>
+          )}
+          <div className={styles.formContent}>
+            {formControls.map(item => {
+              const FormItem = BaseForm[item.type];
+              return <FormItem onChange={handleChange.bind(this, item)} {...item} key={item.id} />;
+            })}
+            <div style={{ textAlign: 'center', padding: '16px 0' }}>
+              <Button
+                theme="primary"
+                size="sm"
+                block
+                onClick={handleSubmit}
+                style={{ backgroundColor: btnColor, borderColor: btnColor, color: btnTextColor }}
+              >
+                提交
+              </Button>
+            </div>
+          </div>
        </div>
      )}
-      <div className={styles.formContent}>
-        {formControls.map(item => {
-          const FormItem = BaseForm[item.type];
-          return <FormItem onChange={handleChange.bind(this, item)} {...item} key={item.id} />;
-        })}
-        <div style={{ textAlign: 'center', padding: '16px 0' }}>
-          <Button
-            theme="primary"
-            size="sm"
-            block
-            onClick={handleSubmit}
-            style={{ backgroundColor: btnColor, borderColor: btnColor, color: btnTextColor }}
-          >
-            提交
-          </Button>
+      {!props.isTpl && (
+        <div
+          className={styles.formWrap}
+          style={{
+            backgroundColor: bgColor,
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+                scale(${props.baseScale / 100}) 
+                rotate(${props.baseRotate}deg)`,
+          }}
+        >
+          {title && (
+            <div className={styles.title} style={{ fontSize, color: titColor }}>
+              {title}
+            </div>
+          )}
+          <div className={styles.formContent}>
+            {formControls.map(item => {
+              const FormItem = BaseForm[item.type];
+              return <FormItem onChange={handleChange.bind(this, item)} {...item} key={item.id} />;
+            })}
+            <div style={{ textAlign: 'center', padding: '16px 0' }}>
+              <Button
+                theme="primary"
+                size="sm"
+                block
+                onClick={handleSubmit}
+                style={{ backgroundColor: btnColor, borderColor: btnColor, color: btnTextColor }}
+              >
+                提交
+              </Button>
+            </div>
+          </div>
        </div>
-      </div>
-    </div>
+      )}
+    </>
  );
 };

--- a/src/components/BasicShop/BasicComponents/Form/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Form/schema.ts
@ -8,11 +8,12 @@ import {
  TNumberDefaultType,
  TTextDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';

 export type TFormEditData = Array<
  ITextConfigType | INumberConfigType | IColorConfigType | ITextConfigType | IFormItemsConfigType
 >;
-export interface IFormConfig {
+export interface IFormConfig extends ICommonBaseType {
  title: TTextDefaultType;
  fontSize: TNumberDefaultType;
  titColor: TColorDefaultType;
@ -30,6 +31,7 @@ export interface IFormSchema {

 const Form: IFormSchema = {
  editData: [
+    ...baseConfig,
    {
      key: 'title',
      name: '标题',
@ -103,6 +105,7 @@ const Form: IFormSchema = {
        ],
      },
    ],
+    ...baseDefault,
  },
 };
 export default Form;
--- a/src/components/BasicShop/BasicComponents/Header/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Header/index.tsx
@ -6,14 +6,41 @@ import { IHeaderConfig } from './schema';
 const Header = memo((props: IHeaderConfig) => {
  const { bgColor, logo, logoText, fontSize, color } = props;
  return (
-    <header className={styles.header} style={{ backgroundColor: bgColor }}>
-      <div className={styles.logo}>
-        <img src={logo && logo[0].url} alt={logoText} />
-      </div>
-      <div className={styles.title} style={{ fontSize, color }}>
-        {logoText}
-      </div>
-    </header>
+    <>
+      {props.isTpl && (
+        <header className={styles.header} style={{ backgroundColor: bgColor }}>
+          <div className={styles.logo}>
+            <img src={logo && logo[0].url} alt={logoText} />
+          </div>
+          <div className={styles.title} style={{ fontSize, color }}>
+            {logoText}
+          </div>
+        </header>
+      )}
+      {!props.isTpl && (
+        <header
+          className={styles.header}
+          style={{
+            backgroundColor: bgColor,
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+        scale(${props.baseScale / 100}) 
+        rotate(${props.baseRotate}deg)`,
+          }}
+        >
+          <div className={styles.logo}>
+            <img src={logo && logo[0].url} alt={logoText} />
+          </div>
+          <div className={styles.title} style={{ fontSize, color }}>
+            {logoText}
+          </div>
+        </header>
+      )}
+    </>
  );
 });

--- a/src/components/BasicShop/BasicComponents/Header/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Header/schema.ts
@ -8,11 +8,12 @@ import {
  TTextDefaultType,
  TUploadDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';

 export type THeaderEditData = Array<
  IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType
 >;
-export interface IHeaderConfig {
+export interface IHeaderConfig extends ICommonBaseType {
  bgColor: TColorDefaultType;
  logo: TUploadDefaultType;
  logoText: TTextDefaultType;
@ -28,6 +29,7 @@ export interface IHeaderSchema {

 const Header: IHeaderSchema = {
  editData: [
+    ...baseConfig,
    {
      key: 'bgColor',
      name: '背景色',
@ -75,6 +77,7 @@ const Header: IHeaderSchema = {
    fontSize: 20,
    color: 'rgba(255,255,255,1)',
    height: 50,
+    ...baseDefault,
  },
 };

--- a/src/components/BasicShop/BasicComponents/Image/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Image/index.tsx
@ -3,7 +3,15 @@ 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' }}>
+    <div
+      style={{
+        borderRadius: round,
+        width: '100%',
+        textAlign: 'center',
+        overflow: 'hidden',
+        position: 'absolute',
+      }}
+    >
      <img src={imgUrl && imgUrl[0].url} alt="" style={{ width: '100%' }} />
    </div>
  );
--- a/src/components/BasicShop/BasicComponents/Image/schema.ts
+++ b/src/components/BasicShop/BasicComponents/Image/schema.ts
@ -4,9 +4,10 @@ import {
  TNumberDefaultType,
  TUploadDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';

 export type TImageEditData = Array<IUploadConfigType | INumberConfigType>;
-export interface IImageConfig {
+export interface IImageConfig extends ICommonBaseType {
  imgUrl: TUploadDefaultType;
  round: TNumberDefaultType;
 }
@ -18,6 +19,7 @@ export interface IImageSchema {

 const Image: IImageSchema = {
  editData: [
+    ...baseConfig,
    {
      key: 'imgUrl',
      name: '上传',
@ -40,6 +42,7 @@ const Image: IImageSchema = {
      },
    ],
    round: 0,
+    ...baseDefault,
  },
 };

--- a/src/components/BasicShop/BasicComponents/List/index.tsx
+++ b/src/components/BasicShop/BasicComponents/List/index.tsx
@ -4,47 +4,106 @@ import { IListConfig } from './schema';
 const List = memo((props: IListConfig) => {
  const { round, sourceData, imgSize, fontSize, color } = props;
  return (
-    <div className={styles.list}>
-      <div className={styles.sourceList}>
-        {sourceData.map((item, i) => {
-          return (
-            <div className={styles.sourceItem} key={i}>
-              <div className={styles.imgWrap}>
-                <img
-                  src={
-                    item.imgUrl[0]
-                      ? item.imgUrl[0].url
-                      : 'http://io.nainor.com/uploads/01_173e15d3493.png'
-                  }
-                  alt={item.desc}
-                  style={{
-                    width: parseFloat(imgSize),
-                    height: imgSize,
-                    objectFit: 'cover',
-                    borderRadius: round,
-                  }}
-                />
-              </div>
-              <div className={styles.content}>
-                <a
-                  className={styles.tit}
-                  style={{ fontSize, color }}
-                  href={item.link ? item.link : '#'}
-                >
-                  {item.title}
-                  <div
-                    className={styles.desc}
-                    style={{ fontSize: fontSize * 0.8, color: 'rgba(0,0,0, .3)' }}
-                  >
-                    {item.desc}
+    <>
+      {props.isTpl && (
+        <div className={styles.list}>
+          <div className={styles.sourceList}>
+            {sourceData.map((item, i) => {
+              return (
+                <div className={styles.sourceItem} key={i}>
+                  <div className={styles.imgWrap}>
+                    <img
+                      src={
+                        item.imgUrl[0]
+                          ? item.imgUrl[0].url
+                          : 'http://io.nainor.com/uploads/01_173e15d3493.png'
+                      }
+                      alt={item.desc}
+                      style={{
+                        width: parseFloat(imgSize),
+                        height: imgSize,
+                        objectFit: 'cover',
+                        borderRadius: round,
+                      }}
+                    />
                  </div>
-                </a>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
+                  <div className={styles.content}>
+                    <a
+                      className={styles.tit}
+                      style={{ fontSize, color }}
+                      href={item.link ? item.link : '#'}
+                    >
+                      {item.title}
+                      <div
+                        className={styles.desc}
+                        style={{ fontSize: fontSize * 0.8, color: 'rgba(0,0,0, .3)' }}
+                      >
+                        {item.desc}
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      {!props.isTpl && (
+        <div
+          className={styles.list}
+          style={{
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+      scale(${props.baseScale / 100}) 
+      rotate(${props.baseRotate}deg)`,
+          }}
+        >
+          <div className={styles.sourceList}>
+            {sourceData.map((item, i) => {
+              return (
+                <div className={styles.sourceItem} key={i}>
+                  <div className={styles.imgWrap}>
+                    <img
+                      src={
+                        item.imgUrl[0]
+                          ? item.imgUrl[0].url
+                          : 'http://io.nainor.com/uploads/01_173e15d3493.png'
+                      }
+                      alt={item.desc}
+                      style={{
+                        width: parseFloat(imgSize),
+                        height: imgSize,
+                        objectFit: 'cover',
+                        borderRadius: round,
+                      }}
+                    />
+                  </div>
+                  <div className={styles.content}>
+                    <a
+                      className={styles.tit}
+                      style={{ fontSize, color }}
+                      href={item.link ? item.link : '#'}
+                    >
+                      {item.title}
+                      <div
+                        className={styles.desc}
+                        style={{ fontSize: fontSize * 0.8, color: 'rgba(0,0,0, .3)' }}
+                      >
+                        {item.desc}
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
  );
 });

--- a/src/components/BasicShop/BasicComponents/List/schema.ts
+++ b/src/components/BasicShop/BasicComponents/List/schema.ts
@ -8,11 +8,12 @@ import {
  TNumberDefaultType,
  TSelectDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
 export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150';
 export type TListEditData = Array<
  IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType<TListSelectKeyType>
 >;
-export interface IListConfig {
+export interface IListConfig extends ICommonBaseType {
  sourceData: TDataListDefaultType;
  round: TNumberDefaultType;
  imgSize: TSelectDefaultType<TListSelectKeyType>;
@ -27,6 +28,7 @@ export interface IListSchema {

 const List: IListSchema = {
  editData: [
+    ...baseConfig,
    {
      key: 'sourceData',
      name: '数据源',
@ -110,6 +112,7 @@ const List: IListSchema = {
    imgSize: '80',
    fontSize: 16,
    color: 'rgba(153,153,153,1)',
+    ...baseDefault,
  },
 };

--- a/src/components/BasicShop/common.ts
+++ b/src/components/BasicShop/common.ts
@ -0,0 +1,63 @@
+import { INumberConfigType, TNumberDefaultType } from '../PanelComponents/FormEditor/types';
+
+///提取所有公用设置，传来时加到这里，约定公用类型
+//公用配置需满足条件，所有组件初始值统一，否则不放公用设置
+
+export interface ICommonBaseType {
+  baseTop: TNumberDefaultType;
+  baseLeft: TNumberDefaultType;
+  baseRadius: TNumberDefaultType;
+  baseRotate: TNumberDefaultType;
+  baseScale: TNumberDefaultType;
+  baseHeight: TNumberDefaultType;
+  baseWidth: TNumberDefaultType;
+  isTpl?: boolean;
+}
+
+export const baseConfig: INumberConfigType[] = [
+  {
+    key: 'baseTop',
+    name: '纵向位移',
+    type: 'Number',
+  },
+  {
+    key: 'baseLeft',
+    name: '横向位移',
+    type: 'Number',
+  },
+  {
+    key: 'baseRadius',
+    name: '圆角',
+    type: 'Number',
+  },
+  {
+    key: 'baseRotate',
+    name: '旋转',
+    type: 'Number',
+  },
+  {
+    key: 'baseScale',
+    name: '缩放',
+    type: 'Number',
+  },
+  {
+    key: 'baseHeight',
+    name: '容器高度%',
+    type: 'Number',
+  },
+  {
+    key: 'baseWidth',
+    name: '容器宽度%',
+    type: 'Number',
+  },
+];
+
+export const baseDefault = {
+  baseTop: 0,
+  baseLeft: 0,
+  baseRadius: 0,
+  baseRotate: 0,
+  baseScale: 100,
+  baseHeight: 100,
+  baseWidth: 100,
+};
--- a/src/components/Calibration/index.tsx
+++ b/src/components/Calibration/index.tsx
@ -7,8 +7,9 @@ export interface calibrationTypes {
  height: number;
 }
 export type CalibrationTypes = {
-  direction: 'up' | 'left';
+  direction: 'up' | 'left' | 'right';
  multiple: number;
+  id: string;
 };

 export default function Calibration(props: CalibrationTypes) {
--- a/src/components/DynamicEngine/index.tsx
+++ b/src/components/DynamicEngine/index.tsx
@ -6,7 +6,7 @@ import React from 'react';

 export type componentsType = 'media' | 'base' | 'visible';

-const DynamicFunc = (type: any, componentsType: componentsType) =>
+const DynamicFunc = (type: any, componentsType: string) =>
  dynamic({
    loader: async function() {
      let Component: FC<{ isTpl: boolean }>;
@ -37,7 +37,7 @@ type DynamicType = {
  config: { [key: string]: any };
  type: any;
  componentsType: componentsType;
-  category: componentsType;
+  category: string;
 };
 const DynamicEngine = memo((props: DynamicType) => {
  const { type, config, category } = props;
--- a/src/components/PanelComponents/FormEditor/index.tsx
+++ b/src/components/PanelComponents/FormEditor/index.tsx
@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { Form, Select, InputNumber, Input, Switch, Radio, Button } from 'antd';
 import Upload from '../Upload';
 import DataList from '../DataList';
@ -36,7 +36,6 @@ interface FormEditorProps {

 const FormEditor = (props: FormEditorProps) => {
  const { config, defaultValue, onSave, onDel, uid } = props;
-  console.log(defaultValue, config);
  const onFinish = (values: Store) => {
    onSave && onSave(values);
  };
@ -65,7 +64,7 @@ const FormEditor = (props: FormEditorProps) => {
          <React.Fragment key={i}>
            {item.type === 'Number' && (
              <Form.Item label={item.name} name={item.key}>
-                <InputNumber min={1} max={item.range && item.range[1]} />
+                <InputNumber max={item.range && item.range[1]} />
              </Form.Item>
            )}
            {item.type === 'Text' && (
--- a/src/components/PanelComponents/FormItems/EditorModal.tsx
+++ b/src/components/PanelComponents/FormItems/EditorModal.tsx
@ -1,7 +1,6 @@
 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';
+import { baseFormOptionsType } from '../FormEditor/types';

 const { Option } = Select;

--- a/src/components/PanelComponents/Table/index.tsx
+++ b/src/components/PanelComponents/Table/index.tsx
@ -265,6 +265,7 @@ class EditableTable extends React.Component<any, any> {
          _this.props.onChange && _this.props.onChange(sourceData);
        };
        reader.readAsBinaryString(file);
+        return true;
      },
    };
    return (
--- a/src/global.css
+++ b/src/global.css
@ -38,3 +38,7 @@ body {

@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/material.css';
+
+.react-grid-item{
+  overflow: hidden;
+}
--- a/src/pages/editor/Container.tsx
+++ b/src/pages/editor/Container.tsx
@ -12,23 +12,23 @@ import HeaderComponent from './components/Header';
 import SourceBox from './SourceBox';
 import TargetBox from './TargetBox';
 import Calibration from 'components/Calibration';
-import DynamicEngine from 'components/DynamicEngine';
+import DynamicEngine, { componentsType } from 'components/DynamicEngine';
 import FormEditor from 'components/PanelComponents/FormEditor';
 import template from 'components/BasicShop/BasicComponents/template';
 import mediaTpl from 'components/BasicShop/MediaComponents/template';
 import graphTpl from 'components/BasicShop/VisualComponents/template';
 import schema from 'components/BasicShop/schema';
 import { ActionCreators } from 'redux-undo';
-
+import { StateWithHistory } from 'redux-undo';
 import styles from './index.less';

 const { TabPane } = Tabs;

-const Container = props => {
+const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => {
  const [scaleNum, setScale] = useState(1);

  const { pstate, dispatch } = props;
-
+  console.log(props);
  const pointData = pstate ? pstate.pointData : {};
  const curPoint = pstate ? pstate.curPoint : {};
  // 指定画布的id
@ -44,7 +44,7 @@ const Container = props => {
    visible: <PieChartOutlined />,
  };

-  const generateHeader = (type, text) => {
+  const generateHeader = (type: componentsType, text: string) => {
    return (
      <div>
        {CpIcon[type]} {text}
@ -52,18 +52,18 @@ const Container = props => {
    );
  };

-  const handleSliderChange = v => {
+  const handleSliderChange = (v: number) => {
    setScale(prev => (v >= 150 ? 1.5 : v / 100));
  };

-  const handleSlider = type => {
+  const handleSlider = (type: any) => {
    if (type) {
      setScale(prev => (prev >= 1.5 ? 1.5 : prev + 0.1));
    } else {
      setScale(prev => (prev <= 0.5 ? 0.5 : prev - 0.1));
    }
  };
-  const handleFormSave = data => {
+  const handleFormSave = (data: any) => {
    dispatch({
      type: 'editorModal/modPointData',
      payload: { ...curPoint, item: { ...curPoint.item, config: data } },
@ -74,7 +74,7 @@ const Container = props => {
    dispatch({ type: 'editorModal/clearAll' });
  };

-  const handleDel = id => {
+  const handleDel = (id: any) => {
    dispatch({
      type: 'editorModal/delPointData',
      payload: { id },
@ -94,7 +94,7 @@ const Container = props => {
  }, []);

  const allType = useMemo(() => {
-    let arr = [];
+    let arr: string[] = [];
    template.forEach(v => {
      arr.push(v.type);
    });
@ -138,7 +138,7 @@ const Container = props => {
                    <TargetBox item={value} key={i} canvasId={canvasId}>
                      <DynamicEngine
                        {...value}
-                        config={schema[value.type].config}
+                        config={schema[value.type as keyof typeof schema].config}
                        componentsType="base"
                        isTpl={true}
                      />
@ -151,7 +151,7 @@ const Container = props => {
                  <TargetBox item={value} key={i} canvasId={canvasId}>
                    <DynamicEngine
                      {...value}
-                      config={schema[value.type].config}
+                      config={schema[value.type as keyof typeof schema].config}
                      componentsType="media"
                      isTpl={true}
                    />
@ -163,8 +163,8 @@ const Container = props => {
                  <TargetBox item={value} key={i} canvasId={canvasId}>
                    <DynamicEngine
                      {...value}
-                      config={schema[value.type].config}
-                      componentsType="visible"
+                      config={schema[value.type as keyof typeof schema].config}
+                      componentsType={'visible' as componentsType}
                      isTpl={true}
                    />
                  </TargetBox>
@ -229,6 +229,6 @@ const Container = props => {
  );
 };

-export default connect(state => {
+export default connect((state: StateWithHistory<any>) => {
  return { pstate: state.present.editorModal };
 })(Container);
--- a/src/pages/editor/SourceBox.tsx
+++ b/src/pages/editor/SourceBox.tsx
@ -1,27 +1,37 @@
 import React, { memo, useEffect, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import Draggable from 'react-draggable';
-import GridLayout from 'react-grid-layout';
+import GridLayout, { ItemCallback } from 'react-grid-layout';
 import { Tooltip } from 'antd';
 import { connect } from 'dva';
 import DynamicEngine from 'components/DynamicEngine';
 import styles from './index.less';
 import { uuid } from '@/utils/tool';
+import { Dispatch } from 'umi';
+import { StateWithHistory } from 'redux-undo';

-const SourceBox = memo(props => {
+interface SourceBoxProps {
+  pstate: { pointData: { id: string; item: any; point: any }[] };
+  scaleNum: number;
+  canvasId: string;
+  allType: string[];
+  dispatch: Dispatch;
+}
+
+const SourceBox = memo((props: SourceBoxProps) => {
  const { pstate, scaleNum, canvasId, allType, dispatch } = props;

-  const pointData = pstate ? pstate.pointData : {};
-  const [canvasRect, setCanvasRect] = useState([]);
+  const pointData = pstate ? pstate.pointData : [];
+  const [canvasRect, setCanvasRect] = useState<number[]>([]);
  const [isShowTip, setIsShowTip] = useState(true);
  const [{ isOver }, drop] = useDrop({
    accept: allType,
-    drop: (item, monitor) => {
+    drop: (item: { h: number; type: string }, monitor) => {
      let parentDiv = document.getElementById(canvasId),
-        pointRect = parentDiv.getBoundingClientRect(),
+        pointRect = parentDiv!.getBoundingClientRect(),
        top = pointRect.top,
        pointEnd = monitor.getSourceClientOffset(),
-        y = pointEnd.y < top ? 0 : pointEnd.y - top,
+        y = pointEnd!.y < top ? 0 : pointEnd!.y - top,
        col = 24, // 网格列数
        cellHeight = 2,
        w = item.type === 'Icon' ? 3 : col;
@ -43,7 +53,7 @@ const SourceBox = memo(props => {
    }),
  });

-  const dragStop = (layout, oldItem, newItem, placeholder, e, element) => {
+  const dragStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => {
    const curPointData = pointData.filter(item => item.id === newItem.i)[0];
    dispatch({
      type: 'editorModal/modPointData',
@ -51,7 +61,7 @@ const SourceBox = memo(props => {
    });
  };

-  const onDragStart = (layout, oldItem, newItem, placeholder, e, element) => {
+  const onDragStart: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => {
    const curPointData = pointData.filter(item => item.id === newItem.i)[0];
    dispatch({
      type: 'editorModal/modPointData',
@ -59,7 +69,7 @@ const SourceBox = memo(props => {
    });
  };

-  const onResizeStop = (layout, oldItem, newItem, placeholder, e, element) => {
+  const onResizeStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => {
    const curPointData = pointData.filter(item => item.id === newItem.i)[0];
    dispatch({
      type: 'editorModal/modPointData',
@ -68,7 +78,7 @@ const SourceBox = memo(props => {
  };

  useEffect(() => {
-    let { width, height } = document.getElementById(canvasId).getBoundingClientRect();
+    let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect();
    setCanvasRect([width, height]);
  }, [canvasId]);

@ -81,7 +91,7 @@ const SourceBox = memo(props => {
    };
  }, []);
  const opacity = isOver ? 0.7 : 1;
-  const backgroundColor = isOver ? 1 : 0.7;
+  // const backgroundColor = isOver ? 1 : 0.7;
  return (
    <Draggable handle=".js_box">
      <div className={styles.canvasBox}>
@ -98,7 +108,6 @@ const SourceBox = memo(props => {
            className={styles.canvas}
            style={{
              opacity,
-              backgroundColor,
            }}
            ref={drop}
          >
@ -144,4 +153,6 @@ const SourceBox = memo(props => {
  );
 });

-export default connect(state => ({ pstate: state.present.editorModal }))(SourceBox);
+export default connect((state: StateWithHistory<any>) => ({ pstate: state.present.editorModal }))(
+  SourceBox,
+);
--- a/src/pages/editor/TargetBox.tsx
+++ b/src/pages/editor/TargetBox.tsx
@ -1,16 +1,22 @@
-import React, { useMemo, memo } from 'react';
+import React, { useMemo, memo, ReactNode } from 'react';
 import { useDrag } from 'react-dnd';
 import schema from 'components/BasicShop/schema';
 import styles from './index.less';

-const TargetBox = memo(props => {
+interface TargetBoxProps {
+  item: any;
+  children: ReactNode;
+  canvasId: string;
+}
+
+const TargetBox = memo((props: TargetBoxProps) => {
  const { item } = props;
  const [{ isDragging }, drag] = useDrag({
    item: {
      type: item.type,
-      config: schema[item.type].config,
+      config: schema[item.type as keyof typeof schema].config,
      h: item.h,
-      editableEl: schema[item.type].editData,
+      editableEl: schema[item.type as keyof typeof schema].editData,
      category: item.category,
    },
    collect: monitor => ({
--- a/src/pages/editor/components/Header/index.tsx
+++ b/src/pages/editor/components/Header/index.tsx
@ -22,9 +22,17 @@ const { confirm } = Modal;

 const isDev = process.env.NODE_ENV === 'development';

-const HeaderComponent = memo(props => {
+interface HeaderComponentProps {
+  pointData: any;
+  location: any;
+  clearData: any;
+  undohandler: any;
+  redohandler: any;
+}
+
+const HeaderComponent = memo((props: HeaderComponentProps) => {
  const { pointData, location, clearData, undohandler, redohandler } = props;
-  const iptRef = useRef(null);
+  const iptRef = useRef<Input>(null);

  const toPreview = () => {
    localStorage.setItem('pointData', JSON.stringify(pointData));
@ -65,7 +73,7 @@ const HeaderComponent = memo(props => {
      okText: '保存',
      cancelText: '取消',
      onOk() {
-        let name = iptRef.current.state.value;
+        let name = iptRef.current!.state.value;
        req.post('/visible/tpl/save', { name, tpl: pointData }).then(res => {
          console.log(res);
        });
--- a/src/utils/tool.ts
+++ b/src/utils/tool.ts
@ -58,7 +58,6 @@ export function useGetScrollBarWidth(ref: RefObject<HTMLElement>) {
  useLayoutEffect(() => {
    if (ref.current) {
      const diff = ref.current.offsetWidth - ref.current.clientWidth;
-      console.log(diff);
      setWidth(diff);
    }
  }, [ref]);
--- a/yarn.lock
+++ b/yarn.lock
@ -2192,6 +2192,13 @@
  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==

+"@types/qrcode.react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.1.tgz#0904e7a075a6274a5258f19567b4f64013c159d8"
+  integrity sha512-PcVCjpsiT2KFKfJibOgTQtkt0QQT/6GbQUp1Np/hMPhwUzMJ2DRUkR9j7tXN9Q8X06qukw+RbaJ8lJ22SBod+Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/qs@*":
  version "6.9.5"
  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
@ -2432,6 +2439,13 @@
    "@types/webpack-sources" "*"
    source-map "^0.6.0"

+"@types/xlsx@^0.0.36":
+  version "0.0.36"
+  resolved "https://registry.yarnpkg.com/@types/xlsx/-/xlsx-0.0.36.tgz#b5062003e5c5374ab4f08fdd3bf69da4d4013af8"
+  integrity sha512-mvfrKiKKMErQzLMF8ElYEH21qxWCZtN59pHhWGmWCWFJStYdMWjkDSAy6mGowFxHXaXZWe5/TW7pBUiWclIVOw==
+  dependencies:
+    xlsx "*"
+
 "@types/yargs-parser@*", "@types/yargs-parser@15.0.0":
  version "15.0.0"
  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@ -14540,7 +14554,7 @@ ws@~6.1.0:
  dependencies:
    async-limiter "~1.0.0"

-xlsx@^0.16.7:
+xlsx@*, xlsx@^0.16.7:
  version "0.16.7"
  resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.16.7.tgz#62fd6590addac7c4419daaaa2b0c5388015d5f69"
  integrity sha512-Xc4NRjci2Grbh9NDk/XoaWycJurxEug1wwn0aJCmB0NvIMyQuHYq2muWLWGidYNZPf94aUbqm6K8Fbjd7gKTZg==