@cmstops/pro-compo 0.3.2 → 0.3.4

package/es/contentDetailList/components/Content/index.js

@@ -97,7 +97,8 @@ const _sfc_main = defineComponent({
     index: {},
     abttrites: {},
     extraAttrs: {},
-    parmas: {}
+    parmas: {},
+    BASE_API: {}
   },
   emits: [
     "cellMouseEnter",
@@ -127,6 +128,7 @@ const _sfc_main = defineComponent({
           item: { ..._ctx.item, index: _ctx.index },
           abttrites: _ctx.abttrites,
           extraAttrs: _ctx.extraAttrs,
+          BASE_API: _ctx.BASE_API,
           onClickTitle: clickTitle,
           onCellMouseEnter: cellMouseEnter,
           onCellMouseLeave: cellMouseLeave
@@ -163,7 +165,7 @@ const _sfc_main = defineComponent({
             })
           ]),
           _: 3
-        }, 8, ["item", "abttrites", "extraAttrs"])) : _ctx.item.catalog === "contentList" && _ctx.item.list_type === 7 && _ctx.item.target_type === 6 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        }, 8, ["item", "abttrites", "extraAttrs", "BASE_API"])) : _ctx.item.catalog === "contentList" && _ctx.item.list_type === 7 && _ctx.item.target_type === 6 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createCommentVNode(" \u7EC4\u4EF6 "),
           (openBlock(), createBlock(_sfc_main$2, {
             key: `compo-${_ctx.item.post_id}`,

package/es/contentDetailList/components/Doc/index.js

@@ -6,7 +6,8 @@ const _sfc_main = defineComponent({
     abttrites: {},
     extraAttrs: {},
     item: {},
-    index: {}
+    index: {},
+    BASE_API: {}
   },
   emits: ["cellMouseEnter", "cellMouseLeave", "clickTitle"],
   setup(__props, { emit: __emit }) {
@@ -25,6 +26,7 @@ const _sfc_main = defineComponent({
         item: _ctx.item,
         abttrites: _ctx.abttrites,
         extraAttrs: _ctx.extraAttrs,
+        BASE_API: _ctx.BASE_API,
         onClickTitle: clickTitle,
         onCellMouseEnter: cellMouseEnter,
         onCellMouseLeave: cellMouseLeave
@@ -48,7 +50,7 @@ const _sfc_main = defineComponent({
           })
         ]),
         _: 3
-      }, 8, ["item", "abttrites", "extraAttrs"]);
+      }, 8, ["item", "abttrites", "extraAttrs", "BASE_API"]);
     };
   }
 });

package/es/contentDetailList/components/ShowQRCode/QrcodeView/index.js

@@ -0,0 +1,265 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, toDisplayString, createTextVNode, nextTick } from "vue";
+import { Spin, Select, Option, Button, Message } from "@arco-design/web-vue";
+import { IconQrcode } from "@arco-design/web-vue/es/icon";
+import html2canvas from "html2canvas";
+import QRCode from "qrcodejs2";
+import { getSpaceDate } from "../../../../utils/date.js";
+import { generateDocPreviewLink } from "../../../script/api.js";
+const _hoisted_1 = { class: "preview-qrcode-iframe-container-v" };
+const _hoisted_2 = { class: "doc-qrcode-preview-container-v" };
+const _hoisted_3 = ["id"];
+const _hoisted_4 = {
+  key: 0,
+  class: "qrcode"
+};
+const _hoisted_5 = { class: "no-pub" };
+const _hoisted_6 = {
+  key: 1,
+  class: "qrcode"
+};
+const _hoisted_7 = {
+  key: 2,
+  class: "qrcode-hint"
+};
+const _hoisted_8 = {
+  key: 3,
+  class: "setting"
+};
+const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "label" }, "\u94FE\u63A5\u6709\u6548\u65F6\u957F", -1);
+const _hoisted_10 = {
+  key: 4,
+  class: "time-go"
+};
+const _hoisted_11 = {
+  key: 5,
+  class: "time-go"
+};
+const _hoisted_12 = { class: "btns" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    docData: {},
+    BASE_API: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const qrcode = ref();
+    const dataInfo = ref(null);
+    const expirationOptions = ref([
+      { 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 }
+    ]);
+    const expiration = ref(60 * 60 * 24);
+    const loading = ref(false);
+    const interval = ref(null);
+    const time = ref("");
+    const local_url = ref("");
+    const is_publish = computed(() => {
+      var _a;
+      return dataInfo.value && [14, 15, 19].includes((_a = dataInfo.value) == null ? void 0 : _a.state);
+    });
+    const is_share = computed(() => {
+      var _a;
+      return (_a = dataInfo == null ? void 0 : dataInfo.value) == null ? void 0 : _a.share;
+    });
+    const dynamicQRId = computed(() => {
+      var _a;
+      return `qrcode-${(_a = dataInfo.value) == null ? void 0 : _a.id}`;
+    });
+    const showGetLink = computed(() => {
+      return !is_share.value || !is_publish.value && is_share.value && !is_share.value.expired_at;
+    });
+    const needLoadQR = computed(() => {
+      var _a;
+      const flag = false;
+      if (is_publish.value)
+        return true;
+      if (is_share.value && ((_a = is_share.value) == null ? void 0 : _a.expired_at))
+        return true;
+      return flag;
+    });
+    const clip = (data) => {
+      const clipboard = typeof data === "string" ? navigator.clipboard.writeText(data) : navigator.clipboard.write(data);
+      clipboard.then(
+        () => {
+          Message.success({
+            content: "\u5DF2\u4FDD\u5B58\u5230\u7C98\u8D34\u677F"
+          });
+        },
+        () => {
+          Message.success({
+            content: "\u4FDD\u5B58\u5931\u8D25"
+          });
+        }
+      );
+    };
+    const clipUrl = (type) => {
+      if (!dataInfo.value.share.share_url)
+        return;
+      if (type === "text") {
+        clip(dataInfo.value.share.share_url);
+      } else {
+        const img = document.querySelector(`#${dynamicQRId.value} img`);
+        html2canvas(img).then((canvas) => {
+          canvas.toBlob((blob) => {
+            const data = [new ClipboardItem({ [blob.type]: blob })];
+            clip(data);
+          }, "image/png");
+        });
+      }
+    };
+    const genTimeLink = async (expiration2, force = true, tip = true) => {
+      loading.value = true;
+      const data = {
+        force,
+        hash_id: dataInfo.value.hash_id || dataInfo.value.hashid
+      };
+      if (expiration2) {
+        data.expiration = expiration2;
+      }
+      const { code, message } = await generateDocPreviewLink(props.BASE_API, data);
+      if (code === 0) {
+        if (expiration2 || !force) {
+          tip && Message.success("\u94FE\u63A5\u751F\u6210\u6210\u529F");
+          dataInfo.value.share = message;
+          const reqTime = `${new Date().getTime()}`;
+          local_url.value = `${message.inner_url}?reqTime=${reqTime}`;
+          nextTick(() => {
+            loadQrcode(`${message.inner_url}?reqTime=${reqTime}`);
+            setTimeout(() => {
+              loading.value = false;
+            }, 500);
+          });
+        } else {
+          Message.success("\u5DF2\u53D6\u6D88\u9884\u89C8\u94FE\u63A5");
+          dataInfo.value.share = null;
+          qrcode.value.innerHTML = "";
+          clearInterval(interval.value);
+          interval.value = null;
+          time.value = 0;
+        }
+      } else {
+        Message.error(message);
+      }
+    };
+    const loadQrcode = (url) => {
+      new QRCode(dynamicQRId.value, {
+        width: 200,
+        height: 200,
+        text: url
+      });
+      if (dataInfo.value.share.expired_at) {
+        interval.value = setInterval(() => {
+          time.value = getSpaceDate(dataInfo.value.share.expired_at);
+        }, 1e3);
+      }
+    };
+    onMounted(() => {
+      dataInfo.value = props.docData;
+      console.log(1111, dataInfo.value);
+      if (needLoadQR.value) {
+        genTimeLink(60 * 60 * 24, false, false);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (interval.value) {
+        clearInterval(interval.value);
+        interval.value = null;
+        time.value = "";
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" \u9884\u89C8\u624B\u673A\u626B\u7801 "),
+        createVNode(unref(Spin), {
+          loading: loading.value,
+          style: { "width": "100%", "height": "100%" }
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              is_share.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                id: dynamicQRId.value,
+                ref_key: "qrcode",
+                ref: qrcode,
+                class: "qrcode"
+              }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                !is_publish.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    createVNode(unref(IconQrcode), { size: 200 })
+                  ])
+                ])) : (openBlock(), createElementBlock("div", _hoisted_6, "\u6682\u65E0\u4E8C\u7EF4\u7801"))
+              ], 64)),
+              is_share.value ? (openBlock(), createElementBlock("div", _hoisted_7, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE")) : (openBlock(), createElementBlock("div", _hoisted_8, [
+                _hoisted_9,
+                createElementVNode("span", null, [
+                  createVNode(unref(Select), {
+                    modelValue: expiration.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expiration.value = $event),
+                    size: "mini",
+                    placeholder: "\u8BF7\u9009\u62E9"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(expirationOptions.value, (time2, index) => {
+                        return openBlock(), createBlock(unref(Option), {
+                          key: index,
+                          label: time2.label,
+                          value: time2.value
+                        }, null, 8, ["label", "value"]);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"])
+                ])
+              ])),
+              is_share.value && time.value ? (openBlock(), createElementBlock("div", _hoisted_10, "\u94FE\u63A5\u5269\u4F59\u65F6\u95F4: " + toDisplayString(time.value), 1)) : is_share.value && time.value === 0 ? (openBlock(), createElementBlock("div", _hoisted_11, "\u94FE\u63A5\u5DF2\u8FC7\u671F")) : createCommentVNode("v-if", true),
+              createElementVNode("div", _hoisted_12, [
+                showGetLink.value ? (openBlock(), createBlock(unref(Button), {
+                  key: 0,
+                  type: "primary",
+                  light: "",
+                  onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
+                  ]),
+                  _: 1
+                })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createVNode(unref(Button), {
+                    class: "auto",
+                    light: "",
+                    onClick: _cache[2] || (_cache[2] = ($event) => clipUrl("img"))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u590D\u5236\u4E8C\u7EF4\u7801")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(Button), {
+                    class: "auto",
+                    type: "primary",
+                    light: "",
+                    onClick: _cache[3] || (_cache[3] = ($event) => clipUrl("text"))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(time.value ? "\u590D\u5236\u9884\u89C8\u5730\u5740" : "\u590D\u5236\u8BBF\u95EE\u5730\u5740"), 1)
+                    ]),
+                    _: 1
+                  })
+                ], 64))
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["loading"])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/contentDetailList/components/ShowQRCode/index.js

@@ -0,0 +1,66 @@
+import { defineComponent, ref, openBlock, createBlock, unref, withCtx, withModifiers, createCommentVNode, createElementVNode, createVNode } from "vue";
+import { Popover, Tooltip } from "@arco-design/web-vue";
+import { IconQrcode } from "@arco-design/web-vue/es/icon";
+import { getDocDetailsNew } from "../../script/api.js";
+import _sfc_main$1 from "./QrcodeView/index.js";
+const _hoisted_1 = { class: "qr-code" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    item: {},
+    BASE_API: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const docData = ref(null);
+    const showQR = ref(false);
+    const getDocDetail = async () => {
+      const { code, message } = await getDocDetailsNew(props.BASE_API, {
+        hashid: props.item.hashid || props.item.hash_id
+      });
+      if (code === 0 && message) {
+        docData.value = { ...props.item, share: message.preview };
+      }
+    };
+    const openPopover = () => {
+      getDocDetail();
+      setTimeout(() => {
+        showQR.value = true;
+      }, 500);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Popover), {
+        position: "bottom",
+        trigger: "hover",
+        onShow: openPopover,
+        onHide: _cache[1] || (_cache[1] = ($event) => showQR.value = false)
+      }, {
+        content: withCtx(() => [
+          showQR.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            BASE_API: _ctx.BASE_API,
+            docData: docData.value || props.item,
+            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["stop"]))
+          }, null, 8, ["BASE_API", "docData"])) : createCommentVNode("v-if", true)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("section", _hoisted_1, [
+            createVNode(unref(Tooltip), {
+              effect: "dark",
+              content: "\u70B9\u51FB\u53EF\u67E5\u770B\u5185\u5BB9\u5206\u4EAB\u4E8C\u7EF4\u7801",
+              position: "top"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(IconQrcode))
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export { _sfc_main as default };

package/es/contentDetailList/script/api.d.ts

@@ -0,0 +1,6 @@
+interface Params {
+    [key: string]: any;
+}
+export declare function generateDocPreviewLink(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
+export declare function getDocDetailsNew(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
+export {};

package/es/contentDetailList/script/api.js

@@ -0,0 +1,16 @@
+import request from "../../utils/request.js";
+function generateDocPreviewLink(BASE_API, query) {
+  return request(BASE_API, {
+    url: "/poplar/v3/preview/document/generate",
+    method: "post",
+    data: query
+  });
+}
+function getDocDetailsNew(BASE_API, query) {
+  const url = `/poplar/v3/document/${query == null ? void 0 : query.hashid}`;
+  return request(BASE_API, {
+    url,
+    method: "get"
+  });
+}
+export { generateDocPreviewLink, getDocDetailsNew };

package/es/contentDetailList/style/QrCodeView.less

@@ -0,0 +1,93 @@
+.doc-qrcode-preview-container-v {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  color: #4e5969;
+  font-size: 14px;
+  background: white;
+  border-radius: 6px;
+
+  .qrcode {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    color: #4886ff;
+    background: #edf3ff;
+
+    .no-pub {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% - 40px);
+        height: 100%;
+        padding: 0 20px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.5);
+        content: '内容暂未发布，如需链接预览请在下方生成临时预览链接';
+        // z-index: 2;
+      }
+    }
+  }
+
+  .qrcode-hint {
+    opacity: 0.6;
+  }
+
+  .setting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .label {
+      font-weight: 500;
+    }
+
+    .a-select {
+      width: 100px;
+
+      .a-input__inner {
+        color: #86909c;
+        text-align: center;
+        background: #f3f4f5;
+        border: none;
+      }
+    }
+  }
+
+  .btns {
+    display: flex;
+    gap: 10px;
+    justify-content: space-between;
+    width: 100%;
+
+    .arco-btn {
+      width: 100%;
+      margin-left: 0;
+      padding: 10px 5px;
+      font-size: 14px;
+
+      &.auto {
+        flex: 1;
+        width: auto;
+      }
+    }
+  }
+
+  .time-go {
+    font-size: 12px;
+  }
+}

package/es/contentDetailList/style/ShowQRCode.less

@@ -0,0 +1,3 @@
+.qr-code {
+  margin-right: 5px;
+}

package/es/contentDetailList/style/index.css

@@ -1115,6 +1115,89 @@
   margin-right: 20px;
   text-align: end;
 }
+.qr-code {
+  margin-right: 5px;
+}
+.doc-qrcode-preview-container-v {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  color: #4e5969;
+  font-size: 14px;
+  background: white;
+  border-radius: 6px;
+}
+.doc-qrcode-preview-container-v .qrcode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  color: #4886ff;
+  background: #edf3ff;
+}
+.doc-qrcode-preview-container-v .qrcode .no-pub {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.doc-qrcode-preview-container-v .qrcode .no-pub::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 40px);
+  height: 100%;
+  padding: 0 20px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+  content: '内容暂未发布，如需链接预览请在下方生成临时预览链接';
+}
+.doc-qrcode-preview-container-v .qrcode-hint {
+  opacity: 0.6;
+}
+.doc-qrcode-preview-container-v .setting {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.doc-qrcode-preview-container-v .setting .label {
+  font-weight: 500;
+}
+.doc-qrcode-preview-container-v .setting .a-select {
+  width: 100px;
+}
+.doc-qrcode-preview-container-v .setting .a-select .a-input__inner {
+  color: #86909c;
+  text-align: center;
+  background: #f3f4f5;
+  border: none;
+}
+.doc-qrcode-preview-container-v .btns {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  width: 100%;
+}
+.doc-qrcode-preview-container-v .btns .arco-btn {
+  width: 100%;
+  margin-left: 0;
+  padding: 10px 5px;
+  font-size: 14px;
+}
+.doc-qrcode-preview-container-v .btns .arco-btn.auto {
+  flex: 1;
+  width: auto;
+}
+.doc-qrcode-preview-container-v .time-go {
+  font-size: 12px;
+}
 .gray-for-state-hide {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);

package/es/contentDetailList/style/index.less

@@ -10,6 +10,8 @@
 @import './courseItem.less';
 @import './funhdItem.less';
 @import './MatrixItem.less';
+@import './ShowQRCode.less';
+@import './QrCodeView.less';
 
 .gray-for-state-hide {
   -webkit-filter: grayscale(100%);

package/es/contentModal/style/columnTree.less

@@ -3,7 +3,7 @@
 }
 
 .column-selection-popover-content {
-  padding: 0;
+  padding: 0 !important;
 
   .search-column {
     margin-bottom: 4px;

package/es/contentModal/style/index.css

@@ -2,7 +2,7 @@
   padding: 0 15px;
 }
 .column-selection-popover-content {
-  padding: 0;
+  padding: 0 !important;
 }
 .column-selection-popover-content .search-column {
   margin-bottom: 4px;
@@ -167,8 +167,8 @@
   border-bottom: none;
 }
 .add-content-modal-body {
-  padding: 0;
   height: 70vh;
+  padding: 0 !important;
 }
 .add-content-modal-body .content-tabs {
   height: 100%;

package/es/contentModal/style/index.less

@@ -2,18 +2,22 @@
 @import './MediaFilter.less';
 @import './storeBox.less';
 @import './ViewAllColumn.less';
+
 .add-content-modal-wrapper {
   .arco-modal-header {
     border-bottom: none;
   }
 }
+
 .add-content-modal-body {
-  padding: 0;
   height: 70vh;
+  padding: 0 !important;
+
   .content-tabs {
     height: 100%;
   }
+
   .arco-tabs-content {
     padding-top: 0;
   }
-}
+}

package/es/hooks/usePopper.js

@@ -17,8 +17,26 @@ function usePopper(pannel, triggerEl) {
   const initPopper = (placement = "bottom-start") => {
     if (!pannel.value || !triggerEl.value)
       return;
+    const offset = [0, 10];
+    if (window.__POWERED_BY_WUJIE__) {
+      offset[1] = -54;
+    }
     createPopper(triggerEl.value, pannel.value, {
-      placement
+      placement,
+      modifiers: [
+        {
+          name: "computeStyles",
+          options: {
+            gpuAcceleration: false
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset
+          }
+        }
+      ]
     });
   };
   return {