feat:downloadZip

src/services/download.ts

@@ -330,6 +330,7 @@ export enum Frame {
   vue3,
   react,
   html,
+  zip
 }
 
 
@@ -867,4 +868,77 @@ export const getFrameDownloadList =(meta2dData: any, path: string = 'v',type:Fra
   });
 
   return lists;
-};
+};
+
+export const getDownloadZipList = (meta2dData: any, zips:any) => {
+  const lists = new Set();
+  // const pngs = new Set<string>();
+  if (meta2dData._id) delete meta2dData._id;
+  if (meta2dData.id) delete meta2dData.id;
+  let _fileName =
+    (meta2dData.name && meta2dData.name.replace(/\//g, '_').replace(/:/g, '_')) ||
+    'le5le.meta2d';
+  lists.add({
+    data:JSON.stringify(meta2dData).replaceAll(img_cdn, '').replaceAll(img_upCdn, ''),
+    path: `${_fileName}.json`
+  });
+  for (let key in zips) {
+    lists.add({
+      data:JSON.stringify(zips[key].data).replaceAll(img_cdn, '').replaceAll(img_upCdn, ''),
+      path: `${key}/${zips[key].data.name.replace(/\//g, '_').replace(/:/g, '_')}.json`
+    });
+    // zips[key].pngs.forEach(item => pngs.add(item));
+    getDataPngs(zips[key].data).forEach(item => lists.add(item));
+  }
+  getDataPngs(meta2dData).forEach(item => lists.add(item));
+  return lists;
+}
+
+export const getDataPngs = (meta2dData: any)=>{
+  const lists = new Set();
+  let img = meta2dData.bkImage;
+  if (img) {
+    if (
+      img.startsWith('/') ||
+      img.startsWith(img_cdn) ||
+      img.startsWith(img_upCdn)
+    ) {
+      let _img = img.replace(img_cdn, '').replace(img_upCdn, '');
+      // if (_img.startsWith('/v/')) {
+      //   _img = _img.slice(2);
+      // }
+      lists.add({
+        url: img,
+        path: _img.split('?')[0],
+      });
+    }
+  }
+
+  //图片图元(image strokeImage backgroundImage)
+  const imageKeys = ['image', 'strokeImage', 'backgroundImage'];
+  const images: string[] = [];
+  for (const pen of meta2dData.pens) {
+    for (const i of imageKeys) {
+      const image = pen[i];
+      if (image) {
+        if (
+          image.startsWith('/') ||
+          image.startsWith(img_cdn) ||
+          image.startsWith(img_upCdn)
+        ) {
+          // 只考虑相对路径下的 image ，绝对路径图片无需下载
+          let _img = image.replace(img_cdn, '').replace(img_upCdn, '');
+          if (!images.includes(image)) {
+            // let _img = image.replace(cdn, '').replace(upCdn, '');
+            lists.add({
+              url: image,
+              path:_img.split('?')[0],
+            });
+          }
+        }
+      }
+    }
+  }
+
+  return lists;
+}

src/views/components/Header.vue

@@ -553,7 +553,8 @@ import {
   img_cdn,
   img_upCdn,
   getDeployGoods,
-  getFrameDownloadList
+  getFrameDownloadList,
+  getDownloadZipList
 } from '@/services/download';
 import { formComponents, rootDomain } from '@/services/defaults';
 import Pay from './Pay.vue';
@@ -587,6 +588,9 @@ const data = reactive<any>({
     expend:false,
     list:[],
     payAll:false
+  },
+  zips:{
+
   },
   payGoods:{},
 });
@@ -612,6 +616,7 @@ const initMeta2dName = () => {
 };
 
 let downloadList = new Set<any>();
+let downloadZip3dList:any[] = [];
 let iframeNum = 0;
 let compareNum = 0;
 const prePayList = reactive({
@@ -654,16 +659,25 @@ const dealWithMessage = async (e) => {
       if (data.type) {
         if (data.name === 'download') {
           let list = data.data;
-          let folderName =downloadType===Frame.vue3?'meta2d-vue3':downloadType===Frame.vue2?'meta2d-vue2': 'meta2d-react';
-          list.forEach((item) => {
-            if(item.path.startsWith('/meta3d/')){
-              item.path = `/${folderName}/public/${item.path}`;
+          if(downloadType === Frame.zip){
+            compareNum += 1;
+            downloadZip3dList = [...downloadZip3dList, ...list];
+            if (compareNum >= iframeNum) {
+              doDownloadZip();
+            }
+            
+          }else{
+            let folderName =downloadType===Frame.vue3?'meta2d-vue3':downloadType===Frame.vue2?'meta2d-vue2': 'meta2d-react';
+            list.forEach((item) => {
+              if(item.path.startsWith('/meta3d/')){
+                item.path = `/${folderName}/public/${item.path}`;
+              }
+            });
+            downloadList = new Set([...downloadList, ...list]);
+            compareNum += 1;
+            if (compareNum >= iframeNum) {
+              saveDownload();
             }
-          });
-          downloadList = new Set([...downloadList, ...list]);
-          compareNum += 1;
-          if (compareNum >= iframeNum) {
-            saveDownload();
           }
         } else if (data.name === 'payList') {
           prePayList.pngs = new Set([...prePayList.pngs, ...data.data.pngs]);
@@ -982,32 +996,80 @@ const downloadZip = async () => {
     gotoAccount();
     return;
   }
-  preDownloadZip();
-  return;
-  MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
-  const [{ default: JSZip }, { saveAs }] = await Promise.all([
-    import('jszip'),
-    import('file-saver'),
-  ]);
-
-  const zip: any = new JSZip();
-  const data: Meta2dBackData = meta2d.data();
-  let _fileName =
-    (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
-    'le5le.meta2d';
-  const _zip = zip.folder(`${_fileName}`);
-  if (data._id) delete data._id;
-  if (data.id) delete data.id;
-  checkData(data);
-  _zip.file(
-    `${_fileName}.json`,
-    JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
+    //提前存储iframe嵌入2d数据
+  downloadType = Frame.zip;
+  downloadZip3dList = [];
+  data.zips = {};
+  const pen_pay = meta2d.store.data.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf(`/2d/`) !== -1 ||
+        pen.iframe.indexOf('/2d?') !== -1 || 
+        pen.iframe.indexOf(`/v/`) !== -1 ||
+        pen.iframe.indexOf('/v?') !== -1)
   );
-  await zipBkImg(_zip);
-  await zipImages(_zip, meta2d.store.data.pens);
+  if (pen_pay && pen_pay.length) {
+    for(let i=0;i<pen_pay.length;i++){
+    // pen_pay.forEach(async(pen) => {
+      const pen = pen_pay[i];
+      let arr = pen.iframe.split('?');
+      let params = queryURLParams(arr[1]);
+      if(params.id){
+        if(arr[0].indexOf('2d') !== -1 ){
+          const ret: any = await axios.post('/api/data/2d/get', {
+            id:params.id
+          });
+          if(ret.data){
+            let payList = getPayList(ret.data);
+            // payList.pngs.forEach(item => pngs.add(item));
+            data.zips[params.id] = {
+              data:ret.data,
+              pngs:payList.pngs
+            }
+          }
+        }else if(arr[0].indexOf('v') !== -1){
+          const ret: any = await axios.post('/api/data/v/get', {
+            id:params.id
+          });
+          if(ret.data){
+            let payList = getPayList(ret.data);
+            // payList.pngs.forEach(item => pngs.add(item));
+            data.zips[params.id] = {
+              data:ret.data,
+              pngs:payList.pngs
+            }
+          }
+        }
+      }
+    // })
+    }
+  }
+  preDoDownloadZip();
+  return;
+  // MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
+  // const [{ default: JSZip }, { saveAs }] = await Promise.all([
+  //   import('jszip'),
+  //   import('file-saver'),
+  // ]);
+
+  // const zip: any = new JSZip();
+  // const data: Meta2dBackData = meta2d.data();
+  // let _fileName =
+  //   (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
+  //   'le5le.meta2d';
+  // const _zip = zip.folder(`${_fileName}`);
+  // if (data._id) delete data._id;
+  // if (data.id) delete data.id;
+  // checkData(data);
+  // _zip.file(
+  //   `${_fileName}.json`,
+  //   JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
+  // );
+  // await zipBkImg(_zip);
+  // await zipImages(_zip, meta2d.store.data.pens);
 
-  const blob = await zip.generateAsync({ type: 'blob' });
-  saveAs(blob, `${_fileName}.zip`);
+  // const blob = await zip.generateAsync({ type: 'blob' });
+  // saveAs(blob, `${_fileName}.zip`);
 };
 
 const preDownloadZip =async () =>{
@@ -1051,33 +1113,105 @@ const prePayDownloadZip = async ()=>{
     doDownloadZip();
   }
 }
+const preDoDownloadZip = async ()=>{
+  const meta2dData:any = meta2d.data();
+  const pen_3d = meta2dData.pens.filter(
+    (pen) =>
+      pen.name === 'iframe' &&
+      (pen.iframe.indexOf(`3d${rootDomain}`) !== -1 ||
+        pen.iframe.indexOf(`view${rootDomain}/3d`) !== -1||
+        pen.iframe.indexOf(`/view/3d`) !== -1 //安装包
+        ));
+  if (pen_3d && pen_3d.length) {
+   
+      pen_3d.forEach((pen) => {
+        //发送消息
+        let params = queryURLParams(pen.iframe.split('?')[1]);
+        (
+          meta2d.store.pens[pen.id].calculative.singleton.div
+            .children[0] as HTMLIFrameElement
+        ).contentWindow.postMessage(
+          JSON.stringify({
+            name: 'deployAsZip',
+            // id: params.id,
+            type: 1,
+            path: `3d-${params.id}`,
+          }),
+          '*'
+        );
+        // pen.iframe = `/view?data=3d-${params.id}`;
+      });
+  }else{
+    doDownloadZip();
+  }
+}
 
 const doDownloadZip = async ()=>{
-  downloadZipDialog.show = false;
+  // downloadZipDialog.show = false;
   MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
   const [{ default: JSZip }, { saveAs }] = await Promise.all([
     import('jszip'),
     import('file-saver'),
   ]);
-
   const zip: any = new JSZip();
-  const data: Meta2dBackData = meta2d.data();
+  const _data: Meta2dBackData = meta2d.data();
   let _fileName =
-    (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
+    (_data.name && _data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
     'le5le.meta2d';
   const _zip = zip.folder(`${_fileName}`);
-  if (data._id) delete data._id;
-  if (data.id) delete data.id;
-  checkData(data);
-  _zip.file(
-    `${_fileName}.json`,
-    JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
+  let list = getDownloadZipList(_data,data.zips);
+  await Promise.all(
+    [...list,...downloadZip3dList].map(async (item: any) => {
+      if (item.url) {
+        //接口请求
+        try{
+          let url = item.url.startsWith('/')?(cdn+item.url):item.url;
+          if(url.includes('?')){
+            url = url + `&r=${Date.now()}`;
+          }else{
+            url = url + `?r=${Date.now()}`;
+          }
+          const res: Blob = await axios.get(url, {
+            responseType: 'blob',
+          });
+          _zip.file(item.path.split('?')[0], res, { createFolders: true });
+        }catch(e){
+          console.log(e);
+        }
+      } else if (item.data) {
+        //直接写数据
+        _zip.file(item.path, item.data, { createFolders: true });
+      }
+    })
   );
-  await zipBkImg(_zip);
-  await zipImages(_zip, meta2d.store.data.pens);
-
   const blob = await zip.generateAsync({ type: 'blob' });
   saveAs(blob, `${_fileName}.zip`);
+
+  // downloadZipDialog.show = false;
+  // MessagePlugin.info('正在下载打包中，可能需要几分钟，请耐心等待...');
+  // const [{ default: JSZip }, { saveAs }] = await Promise.all([
+  //   import('jszip'),
+  //   import('file-saver'),
+  // ]);
+
+  // const zip: any = new JSZip();
+  // const data: Meta2dBackData = meta2d.data();
+  // let _fileName =
+  //   (data.name && data.name.replace(/\//g, '_').replace(/:/g, '_')) ||
+  //   'le5le.meta2d';
+  // const _zip = zip.folder(`${_fileName}`);
+  // if (data._id) delete data._id;
+  // if (data.id) delete data.id;
+  // checkData(data);
+  // _zip.file(
+  //   `${_fileName}.json`,
+  //   JSON.stringify(data).replaceAll(cdn, '').replaceAll(upCdn, '')
+  // );
+  // await zipBkImg(_zip);
+  // await zipImages(_zip, meta2d.store.data.pens);
+
+  // const blob = await zip.generateAsync({ type: 'blob' });
+  // saveAs(blob, `${_fileName}.zip`);
 }
 
 // const zip3D = (name: string) => {