修复样式问题，修复拖拽边界溢出，添加清空功能

src/components/Carousel/index.js

@@ -15,6 +15,8 @@ const XCarousel = memo(props => {
     });
   };
 
+  console.log(isTpl);
+
   return (
     <div style={{ width: '100%', overflow: 'hidden' }}>
       {isTpl ? (

src/components/DynamicEngine/index.js

@@ -17,8 +17,8 @@ const DynamicFunc = type =>
       }
 
       return props => {
-        const { config } = props;
+        const { config, isTpl } = props;
-        return <Component {...config} />;
+        return <Component {...config} isTpl={isTpl} />;
       };
     },
     loading: () => (
@@ -29,11 +29,11 @@ const DynamicFunc = type =>
   });
 
 const DynamicEngine = memo(props => {
-  const { type, config } = props;
+  const { type, config, isTpl } = props;
   const Dynamic = useMemo(() => {
     return DynamicFunc(type);
   }, [type, config]);
-  return <Dynamic type={type} config={config} />;
+  return <Dynamic type={type} config={config} isTpl={isTpl} />;
 });
 
 export default DynamicEngine;

src/components/Form/data.js

@@ -1,346 +0,0 @@
-export default [
-  {
-    "Date": "2010-01",
-    "scales": 1998
-  },
-  {
-    "Date": "2010-02",
-    "scales": 1850
-  },
-  {
-    "Date": "2010-03",
-    "scales": 1720
-  },
-  {
-    "Date": "2010-04",
-    "scales": 1818
-  },
-  {
-    "Date": "2010-05",
-    "scales": 1920
-  },
-  {
-    "Date": "2010-06",
-    "scales": 1802
-  },
-  {
-    "Date": "2010-07",
-    "scales": 1945
-  },
-  {
-    "Date": "2010-08",
-    "scales": 1856
-  },
-  {
-    "Date": "2010-09",
-    "scales": 2107
-  },
-  {
-    "Date": "2010-10",
-    "scales": 2140
-  },
-  {
-    "Date": "2010-11",
-    "scales": 2311
-  },
-  {
-    "Date": "2010-12",
-    "scales": 1972
-  },
-  {
-    "Date": "2011-01",
-    "scales": 1760
-  },
-  {
-    "Date": "2011-02",
-    "scales": 1824
-  },
-  {
-    "Date": "2011-03",
-    "scales": 1801
-  },
-  {
-    "Date": "2011-04",
-    "scales": 2001
-  },
-  {
-    "Date": "2011-05",
-    "scales": 1640
-  },
-  {
-    "Date": "2011-06",
-    "scales": 1502
-  },
-  {
-    "Date": "2011-07",
-    "scales": 1621
-  },
-  {
-    "Date": "2011-08",
-    "scales": 1480
-  },
-  {
-    "Date": "2011-09",
-    "scales": 1549
-  },
-  {
-    "Date": "2011-10",
-    "scales": 1390
-  },
-  {
-    "Date": "2011-11",
-    "scales": 1325
-  },
-  {
-    "Date": "2011-12",
-    "scales": 1250
-  },
-  {
-    "Date": "2012-01",
-    "scales": 1394
-  },
-  {
-    "Date": "2012-02",
-    "scales": 1406
-  },
-  {
-    "Date": "2012-03",
-    "scales": 1578
-  },
-  {
-    "Date": "2012-04",
-    "scales": 1465
-  },
-  {
-    "Date": "2012-05",
-    "scales": 1689
-  },
-  {
-    "Date": "2012-06",
-    "scales": 1755
-  },
-  {
-    "Date": "2012-07",
-    "scales": 1495
-  },
-  {
-    "Date": "2012-08",
-    "scales": 1508
-  },
-  {
-    "Date": "2012-09",
-    "scales": 1433
-  },
-  {
-    "Date": "2012-10",
-    "scales": 1344
-  },
-  {
-    "Date": "2012-11",
-    "scales": 1201
-  },
-  {
-    "Date": "2012-12",
-    "scales": 1065
-  },
-  {
-    "Date": "2013-01",
-    "scales": 1255
-  },
-  {
-    "Date": "2013-02",
-    "scales": 1429
-  },
-  {
-    "Date": "2013-03",
-    "scales": 1398
-  },
-  {
-    "Date": "2013-04",
-    "scales": 1678
-  },
-  {
-    "Date": "2013-05",
-    "scales": 1524
-  },
-  {
-    "Date": "2013-06",
-    "scales": 1688
-  },
-  {
-    "Date": "2013-07",
-    "scales": 1500
-  },
-  {
-    "Date": "2013-08",
-    "scales": 1670
-  },
-  {
-    "Date": "2013-09",
-    "scales": 1734
-  },
-  {
-    "Date": "2013-10",
-    "scales": 1699
-  },
-  {
-    "Date": "2013-11",
-    "scales": 1508
-  },
-  {
-    "Date": "2013-12",
-    "scales": 1680
-  },
-  {
-    "Date": "2014-01",
-    "scales": 1750
-  },
-  {
-    "Date": "2014-02",
-    "scales": 1602
-  },
-  {
-    "Date": "2014-03",
-    "scales": 1834
-  },
-  {
-    "Date": "2014-04",
-    "scales": 1722
-  },
-  {
-    "Date": "2014-05",
-    "scales": 1430
-  },
-  {
-    "Date": "2014-06",
-    "scales": 1280
-  },
-  {
-    "Date": "2014-07",
-    "scales": 1367
-  },
-  {
-    "Date": "2014-08",
-    "scales": 1155
-  },
-  {
-    "Date": "2014-09",
-    "scales": 1289
-  },
-  {
-    "Date": "2014-10",
-    "scales": 1104
-  },
-  {
-    "Date": "2014-11",
-    "scales": 1246
-  },
-  {
-    "Date": "2014-12",
-    "scales": 1098
-  },
-  {
-    "Date": "2015-01",
-    "scales": 1189
-  },
-  {
-    "Date": "2015-02",
-    "scales": 1276
-  },
-  {
-    "Date": "2015-03",
-    "scales": 1033
-  },
-  {
-    "Date": "2015-04",
-    "scales": 956
-  },
-  {
-    "Date": "2015-05",
-    "scales": 845
-  },
-  {
-    "Date": "2015-06",
-    "scales": 1089
-  },
-  {
-    "Date": "2015-07",
-    "scales": 944
-  },
-  {
-    "Date": "2015-08",
-    "scales": 1043
-  },
-  {
-    "Date": "2015-09",
-    "scales": 893
-  },
-  {
-    "Date": "2015-10",
-    "scales": 840
-  },
-  {
-    "Date": "2015-11",
-    "scales": 934
-  },
-  {
-    "Date": "2015-12",
-    "scales": 810
-  },
-  {
-    "Date": "2016-01",
-    "scales": 782
-  },
-  {
-    "Date": "2016-02",
-    "scales": 1089
-  },
-  {
-    "Date": "2016-03",
-    "scales": 745
-  },
-  {
-    "Date": "2016-04",
-    "scales": 680
-  },
-  {
-    "Date": "2016-05",
-    "scales": 802
-  },
-  {
-    "Date": "2016-06",
-    "scales": 697
-  },
-  {
-    "Date": "2016-07",
-    "scales": 583
-  },
-  {
-    "Date": "2016-08",
-    "scales": 456
-  },
-  {
-    "Date": "2016-09",
-    "scales": 524
-  },
-  {
-    "Date": "2016-10",
-    "scales": 398
-  },
-  {
-    "Date": "2016-11",
-    "scales": 278
-  },
-  {
-    "Date": "2016-12",
-    "scales": 195
-  },
-  {
-    "Date": "2017-01",
-    "scales": 145
-  },
-  {
-    "Date": "2017-02",
-    "scales": 207
-  }
-]

src/components/Form/index.js

@@ -1,27 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Area } from '@ant-design/charts';
-import data from './data';
-
-const XArea = (props) => {
-  const { configData: { title, description } } = props
-  const config = {
-    title: {
-      visible: true,
-      text: title || '',
-    },
-    description: {
-      visible: true,
-      text: description || '',
-    },
-    data,
-    xField: 'Date',
-    yField: 'scales',
-    xAxis: {
-      type: 'dateTime',
-      tickCount: 5,
-    }
-  };
-  return <Area {...config} />;
-};
-
-export default XArea;

src/components/Zan/index.js

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { Button, Popover } from 'antd';
+import styles from './index.less';
+
+const content = (
+  <div className={styles.imgWrap}>
+    <img src="http://io.nainor.com/uploads/WechatIMG2_1742b586c3d.jpeg" />
+  </div>
+);
+
+export default memo(function ZanPao() {
+  return (
+    <div className={styles.takeCat}>
+      <Popover placement="top" title={null} content={content} trigger="hover">
+        <Button type="primary" danger>
+          请作者喝茶🍵～
+        </Button>
+      </Popover>
+    </div>
+  );
+});

src/components/Zan/index.less

@@ -0,0 +1,6 @@
+.imgWrap {
+  width: 160px;
+  img {
+    width: 100%;
+  }
+}

src/pages/editor/components/Header/index.js

@@ -1,117 +1,173 @@
-import React, { useRef, memo } from 'react'
+import React, { useRef, memo } from 'react';
-import { Button, Input, Popover, Modal } from 'antd'
+import { Button, Input, Popover, Modal } from 'antd';
 import {
   ArrowLeftOutlined,
   MobileOutlined,
   DownloadOutlined,
-  CopyOutlined
+  CopyOutlined,
-} from '@ant-design/icons'
+  DeleteOutlined,
-import QRCode from 'qrcode.react'
+} from '@ant-design/icons';
-import { saveAs } from 'file-saver'
+import QRCode from 'qrcode.react';
-import req from '@/utils/req'
+import { saveAs } from 'file-saver';
-import Code from '@/assets/code.png'
+import Zan from 'components/Zan';
+import req from '@/utils/req';
+import Code from '@/assets/code.png';
 
-import styles from './index.less'
+import styles from './index.less';
 
 const { confirm } = Modal;
 
 const isDev = process.env.NODE_ENV === 'development';
 
-const HeaderComponent = memo((props) => {
+const HeaderComponent = memo(props => {
-  const { pointData, location } = props
+  const { pointData, location, clearData } = props;
-  const iptRef = useRef(null)
+  const iptRef = useRef(null);
 
   const toPreview = () => {
-    localStorage.setItem('pointData', JSON.stringify(pointData))
+    localStorage.setItem('pointData', JSON.stringify(pointData));
-    savePreview()
+    savePreview();
     setTimeout(() => {
-      window.open(isDev ? `/preview?tid=${props.location.query.tid}` : `http://io.nainor.com/h5_plus/preview?tid=${props.location.query.tid}`)
+      window.open(
-    }, 600)
+        isDev
-  }
+          ? `/preview?tid=${props.location.query.tid}`
+          : `http://io.nainor.com/h5_plus/preview?tid=${props.location.query.tid}`,
+      );
+    }, 600);
+  };
 
   const content = () => {
-    const { tid } = location.query || ''
+    const { tid } = location.query || '';
-    return <QRCode value={`${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`} />
+    return (
-  }
+      <QRCode
+        value={`${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`}
+      />
+    );
+  };
 
   const handleSaveTpl = () => {
     confirm({
       title: '确定要保存吗？',
-      content: <div className={styles.saveForm}>
+      content: (
-        <div className={styles.formIpt}>
+        <div className={styles.saveForm}>
-          <span>模版名称：</span><Input ref={iptRef} />
+          <div className={styles.formIpt}>
+            <span>模版名称：</span>
+            <Input ref={iptRef} />
+          </div>
+          <div className={styles.formIpt}>
+            <span>访问链接：</span>
+            <Input disabled value="暂未开放，保存之后可以在模版库中访问" />
+          </div>
         </div>
-        <div className={styles.formIpt}>
+      ),
-          <span>访问链接：</span><Input disabled value="暂未开放，保存之后可以在模版库中访问" />
-        </div>
-      </div>,
       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)
+          console.log(res);
-        })
+        });
       },
       onCancel() {
         console.log('Cancel');
       },
     });
-  }
+  };
 
   const useTemplate = () => {
     Modal.info({
-        title: '该功能正在升级，可以关注下方公众号实时查看动态',
+      title: '该功能正在升级，可以关注下方公众号实时查看动态',
-        content: (
+      content: (
-            <div style={{textAlign: 'center'}}>
+        <div style={{ textAlign: 'center' }}>
-               <img src={Code} alt="趣谈前端" style={{width: "180px"}} />
+          <img src={Code} alt="趣谈前端" style={{ width: '180px' }} />
-            </div>
+        </div>
-        ),
+      ),
-        okText: '客官知道啦'
+      okText: '客官知道啦',
-    })
+    });
-  }
+  };
 
   const downLoadJson = () => {
-    const jsonStr = JSON.stringify(pointData)
+    const jsonStr = JSON.stringify(pointData);
-    const blob = new Blob([jsonStr], { type: "text/plain;charset=utf-8" })
+    const blob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' });
-    saveAs(blob, "template.json")
+    saveAs(blob, 'template.json');
-  }
+  };
 
   const toLogin = () => {
-    const { tid } = props.location.query || ''
+    const { tid } = props.location.query || '';
-    window.location.href = `/h5_plus/login?tid=${tid}`
+    window.location.href = `/h5_plus/login?tid=${tid}`;
-  }
+  };
 
   const savePreview = () => {
-    const { tid } = props.location.query || ''
+    const { tid } = props.location.query || '';
-    req.post('/visible/preview', { tid, tpl: pointData })
+    req.post('/visible/preview', { tid, tpl: pointData });
-  }
+  };
 
-  const handleSaveCode = () => {
+  const handleSaveCode = () => {};
-    
-  }
 
   return (
     <div className={styles.header}>
-        <div className={styles.logoArea}>
+      <div className={styles.logoArea}>
-          <div className={styles.backBtn} onClick={toLogin}><ArrowLeftOutlined /></div>
+        <div className={styles.backBtn} onClick={toLogin}>
-          <div className={styles.logo}>Dooring</div>
+          <ArrowLeftOutlined />
-        </div>
-        <div className={styles.controlArea}>
-          <div className={styles.tit}>H5可视化编辑器</div>
-        </div>
-        <div className={styles.btnArea}>
-          <Button type="primary" style={{marginRight: '9px'}} onClick={useTemplate}>使用模版库</Button>
-          <Button type="primary" style={{marginRight: '9px'}} onClick={handleSaveTpl} disabled={!pointData.length}><DownloadOutlined />保存模版</Button>
-          <Button style={{marginRight: '9px'}} onClick={handleSaveCode} disabled={!pointData.length}><DownloadOutlined /></Button>
-          <Button style={{marginRight: '9px'}} title="下载json文件" onClick={downLoadJson} disabled={!pointData.length}><CopyOutlined /></Button>
-          <Popover placement="bottom" title={null} content={content} trigger="click">
-            <Button style={{marginRight: '9px'}} onClick={savePreview} disabled={!pointData.length}><MobileOutlined /></Button>
-          </Popover>
-          <Button onClick={toPreview} disabled={!pointData.length}>预览</Button>
         </div>
+        <div className={styles.logo}>Dooring</div>
+      </div>
+      <div className={styles.controlArea}>
+        <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>
+          模版库
+        </Button>
+        <Button
+          type="link"
+          style={{ marginRight: '9px' }}
+          onClick={handleSaveTpl}
+          disabled={!pointData.length}
+        >
+          保存模版
+        </Button>
+        <Button
+          type="link"
+          style={{ marginRight: '9px' }}
+          onClick={handleSaveCode}
+          disabled={!pointData.length}
+        >
+          <DownloadOutlined />
+        </Button>
+        <Button
+          type="link"
+          style={{ marginRight: '9px' }}
+          title="下载json文件"
+          onClick={downLoadJson}
+          disabled={!pointData.length}
+        >
+          <CopyOutlined />
+        </Button>
+        <Popover placement="bottom" title={null} content={content} trigger="click">
+          <Button
+            type="link"
+            style={{ marginRight: '9px' }}
+            onClick={savePreview}
+            disabled={!pointData.length}
+          >
+            <MobileOutlined />
+          </Button>
+        </Popover>
+        <Button
+          type="link"
+          style={{ marginRight: '9px' }}
+          title="清空"
+          onClick={clearData}
+          disabled={!pointData.length}
+        >
+          <DeleteOutlined />
+        </Button>
+        <Button type="link" onClick={toPreview} disabled={!pointData.length}>
+          预览
+        </Button>
+      </div>
+      <div className={styles.btnArea}>
+        <Zan />
+      </div>
     </div>
-  )
+  );
-})
+});
 
-export default HeaderComponent
+export default HeaderComponent;

src/pages/editor/models/editorModal.js

@@ -1,80 +1,63 @@
-// 将用户数据存贮到localstorage中
+const pointData = localStorage.getItem('userData') || '[]';
+
 function overSave(name, data) {
-  localStorage.setItem(name, JSON.stringify(data))
+  localStorage.setItem(name, JSON.stringify(data));
 }
 
 export default {
   namespace: 'editorModal',
   state: {
-    pointData: [],
+    pointData: JSON.parse(pointData),
     curPoint: null,
   },
   reducers: {
     addPointData(state, { payload }) {
+      let pointData = [...state.pointData, payload];
+      overSave('userData', pointData);
       return {
         ...state,
-        pointData: [...state.pointData, payload], 
+        pointData,
-        curPoint: payload
+        curPoint: payload,
-      }
+      };
     },
     modPointData(state, { payload }) {
-      const { id } = payload
+      const { id } = payload;
       const pointData = state.pointData.map(item => {
-        if(item.id === id) {
+        if (item.id === id) {
-          return payload
+          return payload;
         }
-        return { ...item }
+        return { ...item };
-
+      });
-      })
+      overSave('userData', pointData);
       return {
         ...state,
         pointData,
-        curPoint: payload
+        curPoint: payload,
-      }
+      };
     },
     delPointData(state, { payload }) {
-      const { id } = payload
+      const { id } = payload;
-      const pointData = state.pointData.filter(item => item.id !== id)
+      const pointData = state.pointData.filter(item => item.id !== id);
+      overSave('userData', pointData);
       return {
         ...state,
         pointData,
-        curPoint: null
+        curPoint: null,
-      }
+      };
-    }
+    },
-  },
+    clearAll(state) {
-  effects: {
+      overSave('userData', []);
-    // 更新一条数据模型信息
+      return {
-    // *modifyDataModel({ payload }, { call, put }) {
+        ...state,
-    //   const modifyDataModel = yield call(mesService.modifyDataModel, payload)
+        pointData: [],
-    //   const activate = yield call(mesService.activateModifiedTableDataModel, modifyDataModel.dataModelId)
+        curPoint: null,
-    //   const responseMessage = yield call(mesService.getDetailDataModel, { dataModelId: activate.dataModelId, showDataModelFieldFlag: true })
+      };
-    //   yield put({
+    },
-    //     type: 'receiveDetailDataModel',
-    //     payload: responseMessage && responseMessage
-    //   })
-    // },
-
-    // 创建一条数据模型
-    // *createDataModel({ payload }, { call, put }) {
-    //   const responseMessage = yield call(mesService.createDataModel, payload)
-    //   if (responseMessage.dataModelId) {
-
-    //     router.push({
-    //       pathname: '/dataModel/view',
-    //       query: { id: responseMessage.dataModelId }
-    //     })
-    //   }
-    // },
   },
+  effects: {},
   subscriptions: {
     setup({ dispatch, history }) {
-      return history.listen(({ pathname, query }) => {
+      return history.listen(({ pathname, query }) => {});
-        // Subscription 语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、
+    },
-        // 服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等
+  },
-        if (pathname !== '/dataModel/view') {
+};
-          dispatch({ type: 'initDetail', data: {} })
-        }
-      })
-    }
-  }
-}

src/utils/req.ts

@@ -15,8 +15,8 @@ instance.interceptors.request.use(
   function(config) {
     // 在发送请求之前做些什么
     config.headers = {
-      'x-requested-with': localStorage.getItem('user') || '',
+      'x-requested-with': '',
-      authorization: localStorage.getItem('token') || '',
+      authorization: '',
     };
     return config;
   },
@@ -30,10 +30,7 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   function(response) {
     // 对响应数据做点什么
-    if (response.headers['x-show-msg'] === 'zxzk_msg_200') {
+    // 你的业务数据
-      message.success(response.data.msg);
-    }
-    return response.data.result;
   },
   function(error) {
     // 对响应错误做点什么