添加画布引导提示

src/pages/editor/SourceBox.js

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useState } from 'react'
 import { useDrop } from 'react-dnd'
 import Draggable from 'react-draggable'
 import GridLayout from 'react-grid-layout'
+import { Tooltip } from 'antd'
 import { connect } from 'dva'
 import DynamicEngine from 'components/DynamicEngine'
 import styles from './index.less'
@@ -9,6 +10,7 @@ import styles from './index.less'
 const SourceBox = memo((props) => {
   const { pointData, scaleNum, canvasId, dispatch } = props
   const [canvasRect, setCanvasRect] = useState([])
+  const [isShowTip, setIsShowTip] = useState(true)
   const [{ isOver }, drop] = useDrop({
     accept: [],
     collect: (monitor) => ({
@@ -47,6 +49,12 @@ const SourceBox = memo((props) => {
     setCanvasRect([width, height])
   }, [canvasId])
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIsShowTip(false)
+    }, 3000)
+  }, [])
+
   const opacity = isOver ? 0.7 : 1
   const backgroundColor = isOver ? 1 : 0.7
 
@@ -63,6 +71,7 @@ const SourceBox = memo((props) => {
             }} 
             ref={drop} 
           >
+            <Tooltip placement="right" title="鼠标按住此处拖拽画布" visible={isShowTip}>
               <div 
                 className="js_box" 
                 style={{
@@ -76,8 +85,9 @@ const SourceBox = memo((props) => {
                   color: '#fff',
                   cursor: 'move'
                 }}
-          >  
+              /> 
-          </div>
+            </Tooltip>
+           
             {
               pointData.length > 0 ?
               <GridLayout