添加网站图标，优化布局

2026-01-08 04:48:11 +00:00 · 2020-08-28 08:24:48 +08:00 · 2020-08-28 08:24:48 +08:00 · bf8851589e
commit bf8851589e
parent 3571969a6b
6 changed files with 86 additions and 47 deletions
--- a/readme.md
+++ b/readme.md
@ -15,7 +15,7 @@

 ### ✨ [Demo](http://io.nainor.com/h5_plus/editor?tid=123456)

-<img src="http://io.nainor.com/uploads/56_1741c466be0.png" alt="H5可视化编辑器" />
+<img src="http://io.nainor.com/uploads/55_174302afefd.png" alt="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
--- 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: () => <div style={{ paddingTop: 10, textAlign: 'center' }}>
-                  <Spin size="large" />
+                  <Loading />
                </div>
 })

--- a/src/components/LoadingCp/index.js
+++ b/src/components/LoadingCp/index.js
@ -1,8 +1,11 @@

-import { Spin } from 'antd';
- 
-export default () => (
-  <div style={{ paddingTop: 100, textAlign: 'center' }}>
-    <Spin size="large" />
+ export default () => (
+  <div style={{ paddingTop: 100, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div className="sk-fold">
+        <div className="sk-fold-cube"></div>
+        <div className="sk-fold-cube"></div>
+        <div className="sk-fold-cube"></div>
+        <div className="sk-fold-cube"></div>
+    </div>
  </div>
 )
--- 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';
--- a/src/pages/document.ejs
+++ b/src/pages/document.ejs
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="http://io.nainor.com/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>H5编辑器之神-Dooring</title>
+    <meta name="description" content="Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
+    <meta name="keywords" content="H5,HTML5,javascript,react,nodejs,前端开发,github,开源">
+    <meta name="author" content="徐小夕">
+    <!-- <meta name="robots" content="noindex, nofollow"> -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link href="https://cdn.bootcdn.net/ajax/libs/spinkit/2.0.1/spinkit.min.css" rel="stylesheet">
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
--- 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 <div><PieChartOutlined /> { text }</div>
+  const CpIcon = {
+    base: <HighlightOutlined />,
+    media: <PlayCircleOutlined />,
+    visible: <PieChartOutlined />
+  }
+
+  const generateHeader = (type, text) => {
+    return <div>{ CpIcon[type] } { text }</div>
  }

  const handleSliderChange = (v) => {
@ -78,35 +86,35 @@ const Container = memo((props) => {
            <Search placeholder="搜索组件" onSearch={value => console.log(value)} enterButton />
          </div>
          <div className={styles.componentList}>
-          <Collapse accordion ghost expandIconPosition="right">
-            <Panel header={generateHeader("基础组件")} key="1">
-              {
-                template.map((value,i) => 
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
-                  </TargetBox>
-                )
-              }
-            </Panel>
-            <Panel header={generateHeader("媒体组件")} key="2">
-              {
-                mediaTpl.map((value,i) => 
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
-                  </TargetBox>
-                )
-              }
-            </Panel>
-            <Panel header={generateHeader("可视化组件")} key="3">
-              {
-                graphTpl.map((value,i) => 
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
-                  </TargetBox>
-                )
-              }
-            </Panel>
-          </Collapse>
+            <Tabs defaultActiveKey="1">
+              <TabPane tab={generateHeader("base","基础组件")} key="1">
+                {
+                  template.map((value,i) => 
+                    <TargetBox item={value} key={i} canvasId={canvasId}>
+                      <DynamicEngine {...value} config={schema[value.type].config} />
+                    </TargetBox>
+                  )
+                }
+              </TabPane>
+              <TabPane tab={generateHeader("media","媒体组件")} key="2">
+                {
+                  mediaTpl.map((value,i) => 
+                    <TargetBox item={value} key={i} canvasId={canvasId}>
+                      <DynamicEngine {...value} config={schema[value.type].config} />
+                    </TargetBox>
+                  )
+                }
+              </TabPane>
+              <TabPane tab={generateHeader("visible","可视化组件")} key="3">
+                {
+                  graphTpl.map((value,i) => 
+                    <TargetBox item={value} key={i} canvasId={canvasId}>
+                      <DynamicEngine {...value} config={schema[value.type].config} />
+                    </TargetBox>
+                  )
+                }
+              </TabPane>
+            </Tabs>
          </div>
        </div>
        <div className={styles.tickMark} id='calibration'>
@ -118,9 +126,9 @@ const Container = memo((props) => {
          </div>
          <SourceBox scaleNum={scaleNum} canvasId={canvasId} />
          <div className={styles.sliderWrap}>
-            <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 0)}>-</span>
-            <Slider defaultValue={100} className={styles.slider} onChange={handleSliderChange} min={50} max={150} value={scaleNum * 100} />
            <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 1)}>+</span>
+            <Slider vertical defaultValue={100} className={styles.slider} onChange={handleSliderChange} min={50} max={150} value={scaleNum * 100} />
+            <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 0)}>-</span>
          </div>
          <div className={styles.backSize}><ExpandOutlined onClick={backSize} /></div>
        </div>
@ -137,9 +145,14 @@ const Container = memo((props) => {
                onDel={handleDel}
              />
            </> :
-            <div style={{paddingTop: '100px'}}><Empty /></div>
+            <div style={{paddingTop: '100px'}}>
+              <Result
+                status="404"
+                title="还没有数据哦"
+                subTitle="赶快拖拽组件来生成你的H5页面吧～"
+              />
+            </div>
          }
-          
        </div>
      </div>