From f1e5a915e9f4f291d0e8a1136d0a6242c9c4075f Mon Sep 17 00:00:00 2001
From: xujiang <xujiang156@qq.com>
Date: Mon, 31 Aug 2020 13:07:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=BD=AE=E6=92=AD=E5=9B=BE?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                             |  2 ++
 src/components/Carousel/index.js       | 33 ++++++++++++++---------
 src/components/DynamicEngine/schema.js |  9 ++++++-
 src/pages/editor/Container.js          | 36 ++++++++++++++++++++------
 src/pages/editor/SourceBox.js          |  6 ++---
 src/pages/editor/preview.js            |  6 ++++-
 6 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6704566..bf2d02e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.umi/
diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js
index 53be0e8..64247c5 100644
--- a/src/components/Carousel/index.js
+++ b/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) => {
-              // console.log(`onChange: ${index}`);
-            }}
-            direction={direction}
-            swipeable={swipeable}
-            autoPlay
-            loop
-          >
-            {contentRender()}
-          </Carousel>
+          {
+            isTpl ? <div className={styles.carousel__item__pic}>
+                      <img src={tplImg} alt="" />
+                    </div>
+                  :
+                    <Carousel
+                      onChange={(index) => {
+                        // console.log(`onChange: ${index}`);
+                      }}
+                      direction={direction}
+                      swipeable={swipeable}
+                      autoPlay={autoPlay}
+                      loop
+                    >
+                      {contentRender()}
+                    </Carousel>
+          }
         </div>
 })
 
diff --git a/src/components/DynamicEngine/schema.js b/src/components/DynamicEngine/schema.js
index 375173f..b8083be 100644
--- a/src/components/DynamicEngine/schema.js
+++ b/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": {
diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.js
index 0456ae9..dfe4062 100644
--- a/src/pages/editor/Container.js
+++ b/src/pages/editor/Container.js
@@ -1,11 +1,12 @@
-import React, { useState, useEffect, memo } from 'react'
-import { Input, Slider, Result, Tabs } from 'antd'
+import React, { useState, useEffect, useCallback, memo } from 'react'
+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>
                   )
                 }
diff --git a/src/pages/editor/SourceBox.js b/src/pages/editor/SourceBox.js
index 2b013d6..91b47d0 100644
--- a/src/pages/editor/SourceBox.js
+++ b/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>
                   )
                 }
diff --git a/src/pages/editor/preview.js b/src/pages/editor/preview.js
index 84cce3f..c07cf8b 100644
--- a/src/pages/editor/preview.js
+++ b/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 (