Merge pull request #37 from MrXujiang/yehuozhiliwork

Yehuozhiliwork

Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx:latest
+COPY ./default.conf /etc/nginx/conf.d/default.conf

src/layouts/index.tsx

@@ -47,7 +47,7 @@ export default function Layout({ children }: IRouteComponentProps) {
     <div>welcome!欢迎使用h5-Dooring，你有任何问题，都可以咨询我哦～</div>,
   );
   return (
-    <div>
+    <div style={{ height: '100%', width: '100%' }}>
       <div
         style={{
           position: 'fixed',

src/pages/editor/Container.tsx

@@ -5,6 +5,7 @@ import {
   ExpandOutlined,
   PlayCircleOutlined,
   HighlightOutlined,
+  ReloadOutlined,
 } from '@ant-design/icons';
 import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
@@ -194,7 +195,11 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
             canvasId={canvasId}
             allType={allType}
           />
+          <div className={styles.resetBall}>
+            <ReloadOutlined onClick={() => setDragState({ x: 0, y: 0 })} />
+          </div>
           <div className={styles.controllBall}>{render}</div>
+
           <div className={styles.sliderWrap}>
             <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 1)}>
               +

src/pages/editor/components/Header/index.tsx

@@ -41,7 +41,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
       window.open(
         isDev
           ? `/preview?tid=${props.location.query.tid}`
-          : `http://io.nainor.com/h5_plus/preview?tid=${props.location.query.tid}`,
+          : `/preview?tid=${props.location.query.tid}`,
       );
     }, 600);
   };
@@ -49,9 +49,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
   const content = () => {
     const { tid } = location.query || '';
     return (
-      <QRCode
-        value={`${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`}
-      />
+      <QRCode value={`${window.location.protocol}//${window.location.host}/preview?tid=${tid}`} />
     );
   };
 
@@ -114,7 +112,10 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
   const newPage = () => {
     let prev = localStorage.getItem('myH5');
     try {
-      localStorage.setItem('myH5', JSON.stringify(prev ? [...prev, pointData] : [pointData]));
+      localStorage.setItem(
+        'myH5',
+        JSON.stringify(prev ? [...Array.from(prev), pointData] : [pointData]),
+      );
     } catch (err) {
       console.error(err);
     }

src/pages/editor/index.less

@@ -1,19 +1,24 @@
 .layout {
+  height: 100%;
+  width: 100%;
   .editorWrap {
     background-color: rgba(245, 245, 245, 1);
+    height: 100%;
+    width: 100%;
   }
   .container {
-    width: 100vw;
+    width: 100%; //写vw产生滚动条会出现横向滚动条
     // height: 100vh;
+    height: calc(100% - 56px);
     display: flex;
     .list {
       width: 350px;
-      height: 100vh;
+      height: 100%;
       padding: 10px 16px 16px;
       box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
       display: inline-block;
       background-color: #fff;
-      overflow: scroll;
+      overflow: auto;
       .searchBar {
         margin-bottom: 20px;
       }
@@ -42,7 +47,7 @@
     .tickMark {
       width: calc(100% - 750px);
       overflow: hidden;
-      height: 100vh;
+      height: 100%;
       position: relative;
       .tickMarkTop {
         width: 100%;
@@ -92,6 +97,11 @@
           }
         }
       }
+      .resetBall {
+        position: absolute;
+        right: 24px;
+        bottom: 445px;
+      }
       .controllBall {
         position: absolute;
         bottom: 380px;
@@ -128,9 +138,9 @@
       width: 400px;
       padding: 20px 0 20px 20px;
       background: #fff;
-      height: 100vh;
+      height: 100%;
       box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
-      overflow: scroll;
+      overflow: auto;
       .tit {
         margin-bottom: 16px;
         font-size: 18px;

src/pages/editor/preview.tsx

@@ -56,7 +56,7 @@ const PreviewPage = memo((props: PreviewPageProps) => {
   const width = useGetScrollBarWidth(ref);
   const pcStyle = useMemo(() => {
     return {
-      width: isMac ? 395 : 375 + width,
+      width: isMac ? 395 : 375 + width + 1, //小数会有偏差
       margin: '20px auto',
       border: '10px solid #000',
       borderRadius: '20px',

src/pages/home/index.tsx

@@ -82,7 +82,12 @@ const Home = () => {
             <a href="https://github.com/MrXujiang/h5-Dooring">
               <GithubOutlined />
             </a>
-            <p>Welcome to H5-Dooring 👋</p>
+            <p>
+              Welcome to H5-Dooring{' '}
+              <span role="img" aria-label="welcome">
+                👋
+              </span>
+            </p>
           </div>
         </footer>
       </div>