@cmstops/pro-compo 0.3.35 → 0.3.37

package/lib/docPreview/scripts/hook.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var request = require("../../utils/request.js");
+var index = require("../../utils/index.js");
+function generateDocPreviewLink(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v3/preview/document/generate",
+    method: "post",
+    data: params
+  });
+}
+function getTimeToNow(second) {
+  second = parseInt((second / 1e3).toFixed(0), 10);
+  function need(value, label) {
+    if (!value)
+      return "";
+    const tow = (n) => {
+      return n >= 0 && n < 10 ? `0${n}` : `${n}`;
+    };
+    return tow(value) + label;
+  }
+  const day = Math.floor(second / 86400);
+  second %= 86400;
+  const hour = Math.floor(second / 3600);
+  second %= 3600;
+  const minute = Math.floor(second / 60);
+  second %= 60;
+  return need(day, "\u5929") + need(hour, "\u5C0F\u65F6") + need(minute, "\u5206\u949F") + need(second, "\u79D2");
+}
+const EXPIRE_TIME_OPTIONS = [
+  { label: "1\u5C0F\u65F6", value: 60 * 60 },
+  { label: "6\u5C0F\u65F6", value: 60 * 60 * 6 },
+  { label: "12\u5C0F\u65F6", value: 60 * 60 * 12 },
+  { label: "24\u5C0F\u65F6", value: 60 * 60 * 24 },
+  { label: "3\u5929", value: 60 * 60 * 24 * 3 },
+  { label: "7\u5929", value: 60 * 60 * 24 * 7 },
+  { label: "15\u5929", value: 60 * 60 * 24 * 15 },
+  { label: "30\u5929", value: 60 * 60 * 24 * 30 }
+];
+function useDocPreview(BASE_API, hashid) {
+  const innerUrl = vue.ref("");
+  const shareData = vue.ref(null);
+  const expireTime = vue.ref(60 * 60 * 24);
+  const loading = vue.ref(false);
+  const intervalTime = vue.ref("");
+  let interval = null;
+  function startInterval() {
+    var _a;
+    if (!((_a = shareData.value) == null ? void 0 : _a.expiredAt)) {
+      clearInterval(interval);
+      interval = null;
+      return;
+    }
+    const now = new Date().getTime();
+    const expire = new Date(shareData.value.expiredAt).getTime();
+    intervalTime.value = getTimeToNow(expire - now);
+  }
+  async function generate(cancel2) {
+    loading.value = true;
+    const params = { force: true, hash_id: hashid.value };
+    if (!cancel2)
+      params.expiration = expireTime.value;
+    else
+      params.expiration = 0;
+    try {
+      const { code, message } = await generateDocPreviewLink(BASE_API, params);
+      if (code !== 0)
+        return false;
+      const { expired_at, share_url, inner_url, qr_code } = message;
+      if (cancel2) {
+        shareData.value = null;
+        clearInterval(interval);
+        interval = null;
+        intervalTime.value = "";
+      } else {
+        shareData.value = {
+          qrCode: `data:image/png;base64,${qr_code}`,
+          shareUrl: share_url,
+          expiredAt: expired_at
+        };
+        innerUrl.value = `${inner_url}?reqTime=${+new Date()}`;
+        setInterval(startInterval, 1e3);
+      }
+      return true;
+    } catch (e) {
+      console.log(e, "----");
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function cancel(update) {
+    const flag = await generate(true);
+    if (!flag)
+      return;
+    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 copy() {
+    var _a;
+    if (!((_a = shareData.value) == null ? void 0 : _a.shareUrl))
+      return;
+    const res = await index.copyContent(shareData.value.shareUrl);
+    if (res) {
+      webVue.Message.success("\u590D\u5236\u6210\u529F");
+    }
+  }
+  return {
+    generate,
+    cancel,
+    copy,
+    loading,
+    expireTime,
+    innerUrl,
+    shareData,
+    intervalTime
+  };
+}
+exports.EXPIRE_TIME_OPTIONS = EXPIRE_TIME_OPTIONS;
+exports.generateDocPreviewLink = generateDocPreviewLink;
+exports.useDocPreview = useDocPreview;

package/lib/docPreview/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/docPreview/style/index.css

@@ -0,0 +1,139 @@
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+}
+.iframe-container::-webkit-scrollbar {
+  display: none;
+}
+.iframe-container img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container .iframe-content {
+  position: absolute;
+  top: calc(100% / 8);
+  left: 19px;
+  z-index: 1000;
+  width: calc(100% - 38px);
+  height: calc(100% - 100% / 8 - 16px);
+  overflow: hidden;
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+.iframe-container .iframe-content iframe {
+  width: calc(100% + 20px);
+  height: 100%;
+  border: none;
+  outline: none;
+}
+.doc-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.doc-preview-container .loading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 12px;
+}
+.doc-preview-container .doc-preview-share-img {
+  width: 300px;
+  height: 300px;
+}
+.doc-preview-container .doc-preview-share-img img {
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share-img-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  margin-top: 20px;
+  margin-left: 20px;
+  color: #4886ff;
+  background-color: #edf3ff;
+  border-radius: 6px;
+}
+.doc-preview-container .doc-preview-share-tips,
+.doc-preview-container .doc-preview-share-header,
+.doc-preview-container .doc-preview-share-link,
+.doc-preview-container .doc-preview-share-action {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px;
+}
+.doc-preview-container .doc-preview-share-tips {
+  color: #333;
+  font-size: 14px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0 5px;
+}
+.doc-preview-container .doc-preview-share-link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.doc-preview-container .doc-preview-share-link-value {
+  display: -webkit-box;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  overflow: hidden;
+  color: #86909c;
+  line-height: 25px;
+  word-break: break-all;
+  background: #f2f2f2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.doc-preview-container .doc-preview-share-link-hint {
+  margin-top: 10px;
+  color: #86909c;
+  font-size: 12px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-action {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+.doc-preview-container .preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}

package/lib/docPreview/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");

package/lib/docPreview/style/index.less

@@ -0,0 +1,129 @@
+@import './previewIframe.less';
+
+// 变量
+@qrCodeWidth: 300px;
+
+.doc-preview-container {
+  position: fixed;
+  // 遮罩层
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+
+  .loading-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .doc-preview-share {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: @qrCodeWidth;
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: 12px;
+
+    &-img {
+      width: @qrCodeWidth;
+      height: @qrCodeWidth;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &-hint {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% - 40px);
+        height: calc(100% - 40px);
+        margin-top: 20px;
+        margin-left: 20px;
+        color: #4886ff;
+        background-color: #edf3ff;
+        border-radius: 6px;
+      }
+    }
+
+    &-tips,
+    &-header,
+    &-link,
+    &-action {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 20px;
+    }
+
+    // 备注
+    &-tips {
+      color: #333;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    // header 控件
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 10px 0 5px;
+    }
+
+    // 链接展示
+    &-link {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      &-value {
+        display: -webkit-box;
+        box-sizing: border-box;
+        padding: 6px 10px;
+        overflow: hidden;
+        color: #86909c;
+        line-height: 25px;
+        word-break: break-all;
+        background: #f2f2f2;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      &-hint {
+        margin-top: 10px;
+        color: #86909c;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+
+    &-action {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      margin: 20px 0;
+    }
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

package/lib/docPreview/style/previewIframe.less

@@ -0,0 +1,36 @@
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .iframe-content {
+    position: absolute;
+    top: calc(100% / 8);
+    left: 19px;
+    z-index: 1000;
+    width: calc(100% - 38px);
+    height: calc(100% - 100% / 8 - 16px);
+    overflow: hidden;
+    border-bottom-right-radius: 40px;
+    border-bottom-left-radius: 40px;
+
+    iframe {
+      width: calc(100% + 20px);
+      height: 100%;
+      border: none;
+      outline: none;
+    }
+  }
+}

package/lib/hooks/useSelection.js

@@ -12,7 +12,7 @@ function getLabelValue(list, options) {
 function useSelection(params) {
   const { func, labelStr, valueStr } = params;
   const lVParams = { labelStr, valueStr };
-  const limit = vue.ref(10);
+  const limit = vue.ref(30);
   const offset = vue.ref(0);
   const keyword = vue.ref("");
   const options = vue.ref([]);

package/lib/index.css

@@ -4302,11 +4302,26 @@
 .thumb-select-wrapper:hover .thumb-handler-list {
   opacity: 1;
 }
+.thumb-select-wrapper:hover .thumb-select-tag {
+  opacity: 0;
+}
 .thumb-select-wrapper.thumb-no-mask {
   background-color: #f2f3f5;
   border: 1px dashed #e5e6eb !important;
 }
-.arco-dropdown-option-content {
+.thumb-select-wrapper .thumb-select-tag {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 2px 10px;
+  color: #fff;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 16px;
+  opacity: 1;
+  transition: all 0.3s ease-in-out;
+}
+.thumb-select-wrapper .arco-dropdown-option-content {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -4489,7 +4504,7 @@
   padding: 0 40px;
 }
 .resource-select-container .resource-select-header {
-  padding: 10px 24px 0;
+  padding: 10px 24px 0 24px;
 }
 .resource-select-container .resource-select-header .arco-tabs-nav::before {
   display: none;
@@ -4511,3 +4526,142 @@
   gap: 10px;
   align-items: center;
 }
+.iframe-container {
+  position: relative;
+  height: 95vh;
+  max-height: 750px;
+  overflow: hidden;
+  aspect-ratio: 390 / 750;
+}
+.iframe-container::-webkit-scrollbar {
+  display: none;
+}
+.iframe-container img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.iframe-container .iframe-content {
+  position: absolute;
+  top: calc(100% / 8);
+  left: 19px;
+  z-index: 1000;
+  width: calc(100% - 38px);
+  height: calc(100% - 100% / 8 - 16px);
+  overflow: hidden;
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+.iframe-container .iframe-content iframe {
+  width: calc(100% + 20px);
+  height: 100%;
+  border: none;
+  outline: none;
+}
+.doc-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.doc-preview-container .loading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 12px;
+}
+.doc-preview-container .doc-preview-share-img {
+  width: 300px;
+  height: 300px;
+}
+.doc-preview-container .doc-preview-share-img img {
+  width: 100%;
+  height: 100%;
+}
+.doc-preview-container .doc-preview-share-img-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: calc(100% - 40px);
+  margin-top: 20px;
+  margin-left: 20px;
+  color: #4886ff;
+  background-color: #edf3ff;
+  border-radius: 6px;
+}
+.doc-preview-container .doc-preview-share-tips,
+.doc-preview-container .doc-preview-share-header,
+.doc-preview-container .doc-preview-share-link,
+.doc-preview-container .doc-preview-share-action {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px;
+}
+.doc-preview-container .doc-preview-share-tips {
+  color: #333;
+  font-size: 14px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0 5px;
+}
+.doc-preview-container .doc-preview-share-link {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.doc-preview-container .doc-preview-share-link-value {
+  display: -webkit-box;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  overflow: hidden;
+  color: #86909c;
+  line-height: 25px;
+  word-break: break-all;
+  background: #f2f2f2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.doc-preview-container .doc-preview-share-link-hint {
+  margin-top: 10px;
+  color: #86909c;
+  font-size: 12px;
+  text-align: center;
+}
+.doc-preview-container .doc-preview-share-action {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+.doc-preview-container .preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}

package/lib/index.js

@@ -26,6 +26,7 @@ var index$l = require("./resourceGridList/index.js");
 var index$m = require("./mediaView/index.js");
 var index$n = require("./thumbCard/index.js");
 var index$o = require("./selectResourceModal/index.js");
+var index$p = require("./docPreview/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -52,3 +53,4 @@ exports.resourceGridList = index$l;
 exports.mediaView = index$m;
 exports.thumbCard = index$n;
 exports.selectResourceModal = index$o;
+exports.docPreview = index$p;

package/lib/index.less

@@ -24,3 +24,4 @@
 @import './mediaView/style/index.less';
 @import './thumbCard/style/index.less';
 @import './selectResourceModal/style/index.less';
+@import './docPreview/style/index.less';

package/lib/selectResourceModal/component.js

@@ -1,6 +1,7 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
 var index$4 = require("../emptyData/index.js");
 var index = require("./components/ListFilter/index.js");
 var index$1 = require("./components/ListContent/index.js");
@@ -50,8 +51,7 @@ const _sfc_main = vue.defineComponent({
       changeKey,
       changeFilter,
       changePage,
-      changeSize,
-      loadData
+      changeSize
     } = useAttachement["default"]({ key: "all", BASE_API });
     const selected = vue.ref([]);
     const selectedKeys = vue.computed(() => selected.value.map((item) => item.id));
@@ -85,9 +85,6 @@ const _sfc_main = vue.defineComponent({
       changeKey("local");
       activeKey.value = "local";
     }
-    vue.onMounted(() => {
-      loadData();
-    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.Drawer), {
         visible: _ctx.visible,
@@ -107,11 +104,12 @@ const _sfc_main = vue.defineComponent({
               }, {
                 extra: vue.withCtx(() => [
                   vue.createVNode(vue.unref(webVue.Button), {
-                    type: "text",
+                    type: "secondary",
+                    shape: "round",
                     onClick: handleClose
                   }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("\u5173\u95ED")
+                    icon: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconClose))
                     ]),
                     _: 1
                   })

package/lib/selectResourceModal/components/ListContent/index.js

@@ -48,8 +48,11 @@ const _sfc_main = vue.defineComponent({
                 meta: item,
                 "use-mask": true,
                 "handlers-key": handlersKey.value,
+                options: {
+                  fit: item.catalog === "image" ? "contain" : "cover"
+                },
                 onHandle: handleOption
-              }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key"])
+              }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key", "options"])
             ]),
             _: 2
           }, 1032, ["item", "select-keys", "disable", "onSelect"]);