修复轮播图拖拽样式问题

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.umi/

src/components/Carousel/index.js

@@ -6,7 +6,10 @@ const XCarousel = memo(props => {
   const {
     direction,
     swipeable,
-    imgList
+    autoPlay,
+    isTpl,
+    imgList,
+    tplImg
   } = props
   
   const contentRender = () => {
@@ -20,17 +23,23 @@ const XCarousel = memo(props => {
   }
 
   return <div style={{width: '100%', overflow: 'hidden'}}>
-          <Carousel
+          {
-            onChange={(index) => {
+            isTpl ? <div className={styles.carousel__item__pic}>
-              // console.log(`onChange: ${index}`);
+                      <img src={tplImg} alt="" />
-            }}
+                    </div>
-            direction={direction}
+                  :
-            swipeable={swipeable}
+                    <Carousel
-            autoPlay
+                      onChange={(index) => {
-            loop
+                        // console.log(`onChange: ${index}`);
-          >
+                      }}
-            {contentRender()}
+                      direction={direction}
-          </Carousel>
+                      swipeable={swipeable}
+                      autoPlay={autoPlay}
+                      loop
+                    >
+                      {contentRender()}
+                    </Carousel>
+          }
         </div>
 })
 

src/components/DynamicEngine/schema.js

@@ -21,6 +21,11 @@ export default {
         "name": "是否可拖拽",
         "type": "Switch",
       },
+      {
+        "key": "autoPlay",
+        "name": "是否自动播放",
+        "type": "Switch",
+      },
       {
         "key": "imgList",
         "name": "图片列表",
@@ -30,6 +35,7 @@ export default {
     "config": {
       "direction": "left",
       "swipeable": false,
+      "autoPlay": false,
       "imgList": [
         {
           "id": 1,
@@ -59,7 +65,8 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      "tplImg": "http://io.nainor.com/uploads/carousal_17442e1420f.png"
     }
   },
   "Text": {

src/pages/editor/Container.js

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, memo } from 'react'
+import React, { useState, useEffect, useCallback, memo } from 'react'
-import { Input, Slider, Result, Tabs } from 'antd'
+import { Slider, Result, Tabs, Alert } from 'antd'
 import {
   PieChartOutlined,
   ExpandOutlined,
   PlayCircleOutlined,
   HighlightOutlined
 } from '@ant-design/icons'
+import TextLoop from 'react-text-loop'
 import { connect } from 'dva'
 import HeaderComponent from './components/Header'
 import SourceBox  from './SourceBox'
@@ -17,10 +18,10 @@ import template from 'components/DynamicEngine/template'
 import mediaTpl from 'components/DynamicEngine/mediaTpl'
 import graphTpl from 'components/DynamicEngine/graphTpl'
 import schema from 'components/DynamicEngine/schema'
+import { uuid } from 'utils/tool'
 
 import styles from './index.less'
 
-const { Search } = Input;
 const { TabPane } = Tabs;
 
 const Container = memo((props) => {
@@ -64,6 +65,10 @@ const Container = memo((props) => {
     })
   }
 
+  const clearData = useCallback(() => {
+    dispatch({ type: 'editorModal/clearAll' })
+  }, [])
+
   const handleDel = (id) => {
     dispatch({
       type: 'editorModal/delPointData',
@@ -75,15 +80,30 @@ const Container = memo((props) => {
     if(window.innerWidth < 1024) {
       props.history.push('/mobileTip')
     }
+    // 存储用户唯一信息
+    if(!localStorage.getItem('uid') || !sessionStorage.getItem('sid')) {
+      localStorage.setItem('uid', uuid(8, 10))
+      sessionStorage.setItem('sid', uuid(5, 10))
+    }
   }, [])
 
   return (
     <div className={styles.editorWrap}>
-      <HeaderComponent pointData={pointData} location={props.location} />
+      <HeaderComponent pointData={pointData} clearData={clearData} location={props.location} />
       <div className={styles.container}>
         <div className={styles.list} >
           <div className={styles.searchBar}>
-            <Search placeholder="搜索组件" onSearch={value => console.log(value)} enterButton />
+          <Alert
+            banner
+            message={
+              <TextLoop mask>
+                <div>Dooring升级啦！</div>
+                <div>Dooring添加自动保存功能</div>
+                <div>已有500+人使用</div>
+                <div>持续迭代中...</div>
+              </TextLoop>
+            }
+          />
           </div>
           <div className={styles.componentList}>
             <Tabs defaultActiveKey="1">
@@ -91,7 +111,7 @@ const Container = memo((props) => {
                 {
                   template.map((value,i) => 
                     <TargetBox item={value} key={i} canvasId={canvasId}>
-                      <DynamicEngine {...value} config={schema[value.type].config} />
+                      <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                     </TargetBox>
                   )
                 }
@@ -100,7 +120,7 @@ const Container = memo((props) => {
                 {
                   mediaTpl.map((value,i) => 
                     <TargetBox item={value} key={i} canvasId={canvasId}>
-                      <DynamicEngine {...value} config={schema[value.type].config} />
+                      <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                     </TargetBox>
                   )
                 }
@@ -109,7 +129,7 @@ const Container = memo((props) => {
                 {
                   graphTpl.map((value,i) => 
                     <TargetBox item={value} key={i} canvasId={canvasId}>
-                      <DynamicEngine {...value} config={schema[value.type].config} />
+                      <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                     </TargetBox>
                   )
                 }

src/pages/editor/SourceBox.js

@@ -75,12 +75,12 @@ const SourceBox = memo((props) => {
               <div 
                 className="js_box" 
                 style={{
-                  width: '12px',
+                  width: '10px',
                   height: '100%',
                   position: 'absolute',
                   borderRadius: '0 6px 6px 0',
                   backgroundColor: '#2f54eb',
-                  right: '-12px',
+                  right: '-10px',
                   top: '0',
                   color: '#fff',
                   cursor: 'move'
@@ -103,7 +103,7 @@ const SourceBox = memo((props) => {
                 {
                   pointData.map(value => 
                     <div className={styles.dragItem} key={value.id} data-grid={value.point}>
-                      <DynamicEngine {...value.item} />
+                      <DynamicEngine {...value.item} isTpl={false} />
                     </div>
                   )
                 }

src/pages/editor/preview.js

@@ -35,13 +35,17 @@ const PreviewPage = memo((props) => {
 
   useEffect(() => {
     const  { tid } = props.location.query
+    const timer = null
     req.get('/visible/preview/get', { params: { tid } }).then(res => {
       setPointData(res.map(item => ({...item, point: {...item.point, isDraggable: false, isResizable: false } })))
     }).catch(err => {
-      setTimeout(() => {
+      timer = setTimeout(() => {
         window.close()
       }, 3000)
     })
+    return () => {
+      clearTimeout(timer)
+    }
   }, [])
 
   return (