add common

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",

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 {
+const XCarousel = memo((props: ICarouselConfig) => {
-  isTpl: boolean;
-}
-
-const XCarousel = memo((props: PropsWithChildren<CarouselTypes>) => {
   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
+        <div
-          onChange={index => {
+          style={{
-            // console.log(`onChange: ${index}`);
+            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>
+    </>
   );
 });
 

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',
   },
 };

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={{
+      {props.isTpl && (
-        backgroundColor: bgColor,
+        <footer
-        color,
+          style={{
-        fontSize,
+            backgroundColor: bgColor,
-        textAlign: align,
+            color,
-        height,
+            fontSize,
-        lineHeight: height + 'px',
+            textAlign: align,
-      }}
+            height,
-    >
+            lineHeight: height + 'px',
-      {text}
+          }}
-    </footer>
+        >
+          {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>
+      )}
+    </>
   );
 });
 

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;

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

@@ -31,30 +31,73 @@ const FormComponent = (props: IFormConfig) => {
     }
   };
   return (
-    <div className={styles.formWrap} style={{ backgroundColor: bgColor }}>
+    <>
-      {title && (
+      {props.isTpl && (
-        <div className={styles.title} style={{ fontSize, color: titColor }}>
+        <div className={styles.formWrap} style={{ backgroundColor: bgColor }}>
-          {title}
+          {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}>
+      {!props.isTpl && (
-        {formControls.map(item => {
+        <div
-          const FormItem = BaseForm[item.type];
+          className={styles.formWrap}
-          return <FormItem onChange={handleChange.bind(this, item)} {...item} key={item.id} />;
+          style={{
-        })}
+            backgroundColor: bgColor,
-        <div style={{ textAlign: 'center', padding: '16px 0' }}>
+            overflow: 'hidden',
-          <Button
+            position: 'absolute',
-            theme="primary"
+            width: `${props.baseWidth}%`,
-            size="sm"
+            height: `${props.baseHeight}%`,
-            block
+            borderRadius: props.baseRadius,
-            onClick={handleSubmit}
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
-            style={{ backgroundColor: btnColor, borderColor: btnColor, color: btnTextColor }}
+                scale(${props.baseScale / 100}) 
-          >
+                rotate(${props.baseRotate}deg)`,
-            提交
+          }}
-          </Button>
+        >
+          {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>
+    </>
   );
 };
 

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;

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}>
+      {props.isTpl && (
-        <img src={logo && logo[0].url} alt={logoText} />
+        <header className={styles.header} style={{ backgroundColor: bgColor }}>
-      </div>
+          <div className={styles.logo}>
-      <div className={styles.title} style={{ fontSize, color }}>
+            <img src={logo && logo[0].url} alt={logoText} />
-        {logoText}
+          </div>
-      </div>
+          <div className={styles.title} style={{ fontSize, color }}>
-    </header>
+            {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>
+      )}
+    </>
   );
 });
 

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,
   },
 };
 

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>
   );

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,
   },
 };
 

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}>
+      {props.isTpl && (
-        {sourceData.map((item, i) => {
+        <div className={styles.list}>
-          return (
+          <div className={styles.sourceList}>
-            <div className={styles.sourceItem} key={i}>
+            {sourceData.map((item, i) => {
-              <div className={styles.imgWrap}>
+              return (
-                <img
+                <div className={styles.sourceItem} key={i}>
-                  src={
+                  <div className={styles.imgWrap}>
-                    item.imgUrl[0]
+                    <img
-                      ? item.imgUrl[0].url
+                      src={
-                      : 'http://io.nainor.com/uploads/01_173e15d3493.png'
+                        item.imgUrl[0]
-                  }
+                          ? item.imgUrl[0].url
-                  alt={item.desc}
+                          : 'http://io.nainor.com/uploads/01_173e15d3493.png'
-                  style={{
+                      }
-                    width: parseFloat(imgSize),
+                      alt={item.desc}
-                    height: imgSize,
+                      style={{
-                    objectFit: 'cover',
+                        width: parseFloat(imgSize),
-                    borderRadius: round,
+                        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 className={styles.content}>
-              </div>
+                    <a
-            </div>
+                      className={styles.tit}
-          );
+                      style={{ fontSize, color }}
-        })}
+                      href={item.link ? item.link : '#'}
-      </div>
+                    >
-    </div>
+                      {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>
+      )}
+    </>
   );
 });
 

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,
   },
 };
 

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,
+};

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) {

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;

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' && (

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 { baseFormOptionsType } from '../FormEditor/types';
-import { Store } from 'antd/lib/form/interface';
 
 const { Option } = Select;
 

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 (

src/global.css

@@ -38,3 +38,7 @@ body {
 
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/material.css';
+
+.react-grid-item{
+  overflow: hidden;
+}

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}
+                      config={schema[value.type as keyof typeof schema].config}
-                      componentsType="visible"
+                      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);

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 pointData = pstate ? pstate.pointData : [];
-  const [canvasRect, setCanvasRect] = useState([]);
+  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,
+);

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 => ({

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);
         });

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]);

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==