@cmstops/pro-compo 3.9.2-alpha.24 → 3.9.2-alpha.26

package/lib/docPreview/scripts/hook.js

@@ -16,6 +16,13 @@ function generateDocPreviewLink(BASE_API, params) {
     data: params
   });
 }
+function generateDocPreviewLinkPC(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v3/preview/document/generate/pc",
+    method: "post",
+    data: params
+  });
+}
 function getTimeToNow(second) {
   second = parseInt((second / 1e3).toFixed(0), 10);
   function need(value, label) {
@@ -47,22 +54,54 @@ const EXPIRE_TIME_OPTIONS = [
 function useDocPreview(BASE_API, hashid) {
   const isPublish = vue.ref(false);
   const innerUrl = vue.ref("");
+  const pcInnerUrl = vue.ref("");
   const shareData = vue.ref(null);
+  const pcShareData = vue.ref(null);
   const expireTime = vue.ref(60 * 60 * 24);
+  const numpc = vue.ref(0);
   const loading = vue.ref(false);
   const qrCode = vue.ref("");
   const intervalTime = vue.ref("");
+  const pcIntervalTime = vue.ref("");
   let interval = null;
+  let pcInterval = null;
   function startInterval() {
     var _a;
     if (!((_a = shareData.value) == null ? void 0 : _a.expiredAt)) {
       clearInterval(interval);
       interval = null;
+      intervalTime.value = "";
       return;
     }
     const now = new Date().getTime();
     const expire = new Date(shareData.value.expiredAt).getTime();
-    intervalTime.value = getTimeToNow(expire - now);
+    const remaining = expire - now;
+    if (remaining <= 0) {
+      intervalTime.value = "\u5DF2\u8FC7\u671F";
+      clearInterval(interval);
+      interval = null;
+      return;
+    }
+    intervalTime.value = getTimeToNow(remaining);
+  }
+  function startPCInterval() {
+    var _a;
+    if (!((_a = pcShareData.value) == null ? void 0 : _a.expired_at)) {
+      clearInterval(pcInterval);
+      pcInterval = null;
+      pcIntervalTime.value = "";
+      return;
+    }
+    const now = new Date().getTime();
+    const expire = new Date(pcShareData.value.expired_at).getTime();
+    const remaining = expire - now;
+    if (remaining <= 0) {
+      pcIntervalTime.value = "\u5DF2\u8FC7\u671F";
+      clearInterval(pcInterval);
+      pcInterval = null;
+      return;
+    }
+    pcIntervalTime.value = getTimeToNow(remaining);
   }
   function genQrCode(shareUrl, selector) {
     innerUrl.value = shareUrl;
@@ -103,7 +142,8 @@ function useDocPreview(BASE_API, hashid) {
         };
         qrCode.value = base64;
         innerUrl.value = `${inner_url}?reqTime=${+new Date()}`;
-        setInterval(startInterval, 1e3);
+        interval = setInterval(startInterval, 1e3);
+        startInterval();
       }
       return true;
     } catch (e) {
@@ -113,6 +153,50 @@ function useDocPreview(BASE_API, hashid) {
       loading.value = false;
     }
   }
+  async function generatePC(cancel2 = false) {
+    loading.value = true;
+    const params = {
+      force: true,
+      hash_id: hashid.value,
+      expiration: expireTime.value
+    };
+    if (cancel2)
+      params.expiration = 0;
+    try {
+      const { code, message } = await generateDocPreviewLinkPC(
+        BASE_API,
+        params
+      );
+      if (code !== 0)
+        return false;
+      const { expired_at, share_url, inner_url } = message;
+      if (cancel2) {
+        pcShareData.value = null;
+        pcInnerUrl.value = "";
+        clearInterval(pcInterval);
+        pcInterval = null;
+        pcIntervalTime.value = "";
+      } else {
+        pcShareData.value = message;
+        pcInnerUrl.value = `${inner_url}?reqTime=${+new Date()}`;
+        pcInterval = setInterval(startPCInterval, 1e3);
+        startPCInterval();
+      }
+      return true;
+    } catch (e) {
+      console.log("\u751F\u6210PC\u9884\u89C8\u94FE\u63A5\u5931\u8D25", e);
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+  function previewSite() {
+    if (isPublish.value) {
+      window.open(pcInnerUrl.value, "_blank");
+    } else {
+      window.open(pcInnerUrl.value, "_blank");
+    }
+  }
   async function cancel(update) {
     const flag = await generate(true);
     if (!flag)
@@ -120,6 +204,12 @@ function useDocPreview(BASE_API, hashid) {
     const text = update ? "\u5DF2\u53D6\u6D88\u9884\u89C8\uFF0C\u8BF7\u66F4\u65B0\u6709\u6548\u671F\u91CD\u65B0\u751F\u6210\u9884\u89C8\u94FE\u63A5" : "\u5DF2\u53D6\u6D88\u9884\u89C8\u94FE\u63A5";
     webVue.Message.warning(text);
   }
+  async function cancelPc() {
+    const flag = await generatePC(true);
+    if (!flag)
+      return;
+    webVue.Message.warning("\u5DF2\u53D6\u6D88\u9884\u89C8\u94FE\u63A5");
+  }
   async function copy() {
     var _a;
     if (!((_a = shareData.value) == null ? void 0 : _a.shareUrl))
@@ -129,20 +219,42 @@ function useDocPreview(BASE_API, hashid) {
       webVue.Message.success("\u590D\u5236\u6210\u529F");
     }
   }
+  async function copyPC() {
+    var _a;
+    if (!((_a = pcShareData.value) == null ? void 0 : _a.shareUrl))
+      return;
+    const res = await index.copyContent(pcShareData.value.shareUrl);
+    if (res) {
+      webVue.Message.success("\u590D\u5236\u6210\u529F");
+    }
+  }
+  function btn_device(device) {
+    numpc.value = device === "pc" ? 1 : 0;
+  }
   return {
     genQrCode,
     generate,
     cancel,
     copy,
+    copyPC,
     qrCode,
     isPublish,
     loading,
     expireTime,
     innerUrl,
     shareData,
-    intervalTime
+    pcShareData,
+    intervalTime,
+    pcIntervalTime,
+    numpc,
+    btn_device,
+    pcInnerUrl,
+    generatePC,
+    previewSite,
+    cancelPc
   };
 }
 exports.EXPIRE_TIME_OPTIONS = EXPIRE_TIME_OPTIONS;
 exports.generateDocPreviewLink = generateDocPreviewLink;
+exports.generateDocPreviewLinkPC = generateDocPreviewLinkPC;
 exports.useDocPreview = useDocPreview;

package/lib/docPreview/style/index.css

@@ -30,6 +30,33 @@
   border: none;
   outline: none;
 }
+.iframe-container-pc {
+  position: relative;
+  height: 95vh;
+  overflow: hidden;
+  aspect-ratio: 1920 / 1080;
+}
+.iframe-container-pc img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container-pc .iframe-content-pc {
+  position: absolute;
+  top: 70px;
+  left: 56px;
+  width: calc(100% - 106px);
+  height: calc(100% - 140px);
+  overflow: hidden;
+  background-color: white;
+  border-radius: 15px;
+}
+.iframe-container-pc iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+}
 .doc-preview-container {
   position: fixed;
   top: 0;
@@ -147,3 +174,24 @@
   font-size: 20px;
   cursor: pointer;
 }
+.v-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 100%;
+  z-index: 999;
+  width: 100%;
+  color: #fff;
+  font-size: 12px;
+  transform: translateX(-60%);
+}
+.v-bottom span {
+  width: 120px;
+  height: 42px;
+  margin-right: 16px;
+  padding: 10px 16px;
+  font-size: 12px;
+  background: rgba(216, 216, 216, 0.05);
+  background-color: #00000068;
+  border-radius: 6px;
+  opacity: 1;
+}

package/lib/docPreview/style/index.less

@@ -138,3 +138,26 @@
     cursor: pointer;
   }
 }
+
+.v-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 100%;
+  z-index: 999;
+  width: 100%;
+  color: #fff;
+  font-size: 12px;
+  transform: translateX(-60%);
+
+  span {
+    width: 120px;
+    height: 42px;
+    margin-right: 16px;
+    padding: 10px 16px;
+    font-size: 12px;
+    background: rgba(216, 216, 216, 0.05);
+    background-color: #00000068;
+    border-radius: 6px;
+    opacity: 1;
+  }
+}

package/lib/docPreview/style/previewIframe.less

@@ -34,3 +34,34 @@
     }
   }
 }
+
+.iframe-container-pc {
+  position: relative;
+  height: 95vh;
+  overflow: hidden;
+  aspect-ratio: 1920 / 1080;
+
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .iframe-content-pc {
+    position: absolute;
+    top: 70px;
+    left: 56px;
+    width: calc(100% - 106px);
+    height: calc(100% - 140px);
+    overflow: hidden;
+    background-color: white;
+    border-radius: 15px;
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+  }
+}

package/lib/index.css

@@ -4742,6 +4742,33 @@
   border: none;
   outline: none;
 }
+.iframe-container-pc {
+  position: relative;
+  height: 95vh;
+  overflow: hidden;
+  aspect-ratio: 1920 / 1080;
+}
+.iframe-container-pc img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container-pc .iframe-content-pc {
+  position: absolute;
+  top: 70px;
+  left: 56px;
+  width: calc(100% - 106px);
+  height: calc(100% - 140px);
+  overflow: hidden;
+  background-color: white;
+  border-radius: 15px;
+}
+.iframe-container-pc iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+}
 .doc-preview-container {
   position: fixed;
   top: 0;
@@ -4859,6 +4886,27 @@
   font-size: 20px;
   cursor: pointer;
 }
+.v-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 100%;
+  z-index: 999;
+  width: 100%;
+  color: #fff;
+  font-size: 12px;
+  transform: translateX(-60%);
+}
+.v-bottom span {
+  width: 120px;
+  height: 42px;
+  margin-right: 16px;
+  padding: 10px 16px;
+  font-size: 12px;
+  background: rgba(216, 216, 216, 0.05);
+  background-color: #00000068;
+  border-radius: 6px;
+  opacity: 1;
+}
 .doc-diff-panel-wrap {
   box-sizing: border-box;
   width: 100% !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "3.9.2-alpha.24",
+  "version": "3.9.2-alpha.26",
   "description": "",
   "keywords": [
     "vue",