From bf8851589e69e1a41c3b7f342776ac361f6b12f6 Mon Sep 17 00:00:00 2001 From: xujiang Date: Fri, 28 Aug 2020 08:24:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BD=91=E7=AB=99=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=EF=BC=8C=20=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 4 +- src/components/DynamicEngine/index.js | 4 +- src/components/LoadingCp/index.js | 13 ++-- src/global.css | 5 ++ src/pages/document.ejs | 18 ++++++ src/pages/editor/Container.js | 89 +++++++++++++++------------ 6 files changed, 86 insertions(+), 47 deletions(-) create mode 100644 src/pages/document.ejs diff --git a/readme.md b/readme.md index fab423f..1071a6c 100644 --- a/readme.md +++ b/readme.md @@ -15,7 +15,7 @@ ### ✨ [Demo](http://io.nainor.com/h5_plus/editor?tid=123456) -H5可视化编辑器 +H5可视化编辑器 ## Author @@ -48,7 +48,7 @@ Give a ⭐️ if this project helped you! ## 需求分析 在思考需求分析之前我们先来看看**Dooring**的使用演示： -![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7000035ac7f44898d3450c24468cc65~tplv-k3u1fbpfcp-zoom-1.image) +![](http://io.nainor.com/uploads/55_174302afefd.png) 由上面的gif图我们可以分析出，可视化编辑器主要有以下几部分组成： * 可拖拽的组件库 draggable components * 盛放组件的画布 canvas diff --git a/src/components/DynamicEngine/index.js b/src/components/DynamicEngine/index.js index 996c682..d98a10d 100644 --- a/src/components/DynamicEngine/index.js +++ b/src/components/DynamicEngine/index.js @@ -1,5 +1,5 @@ import { dynamic } from 'umi'; -import { Spin } from 'antd'; +import Loading from '../LoadingCp'; import { useMemo, memo } from 'react'; const needList = ['Tab', 'Carousel', 'Upload', 'Video'] @@ -21,7 +21,7 @@ const DynamicFunc = (type) => dynamic({ } }, loading: () =>
- +
}) diff --git a/src/components/LoadingCp/index.js b/src/components/LoadingCp/index.js index 6d5d3ac..d804338 100644 --- a/src/components/LoadingCp/index.js +++ b/src/components/LoadingCp/index.js @@ -1,8 +1,11 @@ -import { Spin } from 'antd'; - -export default () => ( -
- + export default () => ( +
+
+
+
+
+
+
) \ No newline at end of file diff --git a/src/global.css b/src/global.css index fb378a2..1db5c58 100644 --- a/src/global.css +++ b/src/global.css @@ -6,5 +6,10 @@ body { margin: 0; } +:root { + --sk-size: 40px; + --sk-color: #06c; +} + @import '~react-grid-layout/css/styles.css'; @import '~react-resizable/css/styles.css'; diff --git a/src/pages/document.ejs b/src/pages/document.ejs new file mode 100644 index 0000000..3e58547 --- /dev/null +++ b/src/pages/document.ejs @@ -0,0 +1,18 @@ + + + + + + + H5编辑器之神-Dooring + + + + + + + + +
+ + \ No newline at end of file diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.js index b34275e..0456ae9 100644 --- a/src/pages/editor/Container.js +++ b/src/pages/editor/Container.js @@ -1,8 +1,10 @@ import React, { useState, useEffect, memo } from 'react' -import { Input, Collapse, Slider, Empty } from 'antd' +import { Input, Slider, Result, Tabs } from 'antd' import { PieChartOutlined, - ExpandOutlined + ExpandOutlined, + PlayCircleOutlined, + HighlightOutlined } from '@ant-design/icons' import { connect } from 'dva' import HeaderComponent from './components/Header' @@ -19,7 +21,7 @@ import schema from 'components/DynamicEngine/schema' import styles from './index.less' const { Search } = Input; -const { Panel } = Collapse; +const { TabPane } = Tabs; const Container = memo((props) => { const [ scaleNum , setScale ] = useState(1) @@ -33,8 +35,14 @@ const Container = memo((props) => { setScale(1) } - const generateHeader = (text) => { - return
{ text }
+ const CpIcon = { + base: , + media: , + visible: + } + + const generateHeader = (type, text) => { + return
{ CpIcon[type] } { text }
} const handleSliderChange = (v) => { @@ -78,35 +86,35 @@ const Container = memo((props) => { console.log(value)} enterButton />
- - - { - template.map((value,i) => - - - - ) - } - - - { - mediaTpl.map((value,i) => - - - - ) - } - - - { - graphTpl.map((value,i) => - - - - ) - } - - + + + { + template.map((value,i) => + + + + ) + } + + + { + mediaTpl.map((value,i) => + + + + ) + } + + + { + graphTpl.map((value,i) => + + + + ) + } + +
@@ -118,9 +126,9 @@ const Container = memo((props) => {
- - - + + + -
@@ -137,9 +145,14 @@ const Container = memo((props) => { onDel={handleDel} /> : -
+
+ +
} -