🆕 新增模版库功能, 但需要配合独立server端调用模版数据

package.json

@@ -62,6 +62,7 @@
     "axios": "^0.19.2",
     "chatbot-antd": "^0.6.0",
     "codemirror": "^5.57.0",
+    "dom-to-image": "^2.6.0",
     "file-saver": "^2.0.2",
     "http-server": "^0.12.3",
     "qrcode.react": "^1.0.0",

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

@@ -40,6 +40,11 @@
     text-align: right;
   }
 }
+.saveForm {
+  .formIpt {
+    margin-bottom: 20px;
+  }
+}
 @media screen and (min-width: 1280px) {
   .header {
     .logoArea {

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

@@ -1,4 +1,4 @@
-import React, { useRef, memo, useContext } from 'react';
+import React, { useRef, memo, useContext, useState, useEffect } from 'react';
 import { Button, Input, Popover, Modal, Select } from 'antd';
 import {
   ArrowLeftOutlined,
@@ -34,6 +34,7 @@ interface HeaderComponentProps {
 
 const HeaderComponent = memo((props: HeaderComponentProps) => {
   const { pointData, location, clearData, undohandler, redohandler } = props;
+  const [showModalIframe, setShowModalIframe] = useState(false);
   const iptRef = useRef<Input>(null);
 
   const toPreview = () => {
@@ -72,6 +73,20 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
             <span>模版名称：</span>
             <Input ref={iptRef} />
           </div>
+          <div className={styles.formIpt}>
+            <span>封面设置：</span>
+            <Button
+              type="primary"
+              size="small"
+              style={{ marginRight: '20px' }}
+              onClick={() => generateFace(1)}
+            >
+              一键生成封面
+            </Button>
+            <Button size="small" onClick={() => generateFace(0)}>
+              使用默认封面
+            </Button>
+          </div>
           <div className={styles.formIpt}>
             <span>访问链接：</span>
             <Input disabled value="暂未开放，保存之后可以在模版库中访问" />
@@ -146,6 +161,14 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
       },
     });
   };
+
+  useEffect(() => {
+    // 定义截图子页面句柄函数
+    window.getFaceUrl = url => {
+      setFaceUrl(url);
+      setShowModalIframe(false);
+    };
+  }, []);
   const { setTheme } = useContext(dooringContext);
   return (
     <div className={styles.header}>
@@ -248,6 +271,19 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           会员登录
         </Button>
       </div>
+      <Modal
+        title="正在生成封面..."
+        visible={showModalIframe}
+        footer={null}
+        width={420}
+        closable={false}
+        destroyOnClose={true}
+      >
+        <iframe
+          src={`/h5_plus/preview?tid=${props.location.query.tid}&gf=1`}
+          style={{ width: '100%', border: 'none', height: '600px' }}
+        ></iframe>
+      </Modal>
     </div>
   );
 });

src/pages/editor/preview.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, memo, useEffect, useMemo, useRef, useState } from 'react';
 import GridLayout from 'react-grid-layout';
 import DynamicEngine from 'components/DynamicEngine';
+import domtoimage from 'dom-to-image';
 import req from '@/utils/req';
 import styles from './index.less';
 import { useGetScrollBarWidth } from '@/utils/tool';
@@ -35,20 +36,29 @@ const PreviewPage = memo((props: PreviewPageProps) => {
   const vw = window.innerWidth;
 
   useEffect(() => {
-    const tid = props.location.query?.tid;
-    req
-      .get<any, PointDataItem[]>('/visible/preview/get', { params: { tid } })
-      .then(res => {
-        setPointData(
-          res.map(item => ({
-            ...item,
-            point: { ...item.point, isDraggable: false, isResizable: false },
-          })),
-        );
-      })
-      .catch(err => {
-        console.error(err);
+    const { tid, gf } = props.location.query!;
+    if (!gf) {
+      req
+        .get<any, PointDataItem[]>('/visible/preview/get', { params: { tid } })
+        .then(res => {
+          setPointData(
+            res.map(item => ({
+              ...item,
+              point: { ...item.point, isDraggable: false, isResizable: false },
+            })),
+          );
+        })
+        .catch(err => {
+          console.error(err);
+        });
+      return;
+    }
+
+    setTimeout(() => {
+      generateImg((url: string) => {
+        parent.window.getFaceUrl(url);
       });
+    }, 3000);
   }, [props.location.query]);
 
   const ref = useRef<HTMLDivElement>(null);
@@ -64,6 +74,21 @@ const PreviewPage = memo((props: PreviewPageProps) => {
     };
   }, [width]);
 
+  const generateImg = (cb: any) => {
+    domtoimage
+      .toBlob(ref.current)
+      .then(function(blob: Blob) {
+        const formData = new FormData();
+        formData.append('file', blob, 'tpl.jpg');
+        req.post('/files/xxx', formData).then((res: any) => {
+          cb && cb(res.url);
+        });
+      })
+      .catch(function(error: any) {
+        console.error('oops, something went wrong!', error);
+      });
+  };
+
   return (
     <>
       <div ref={ref} style={vw > 800 ? pcStyle : {}}>

src/typings.d.ts

@@ -4,3 +4,9 @@ declare module '*.less';
 interface Window {
   currentCates: null | Array<string>;
 }
+declare module 'dom-to-image' {
+  const domtoimage: any;
+  export default domtoimage;
+}
+
+declare var getFaceUrl: any;