@cmstops/pro-compo 0.3.2 → 0.3.4

package/lib/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/lib/contentDetailList/style/ShowQRCode.less

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

package/lib/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/lib/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/lib/contentModal/style/columnTree.less

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

package/lib/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/lib/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/lib/hooks/usePopper.js

@@ -18,8 +18,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;
+    }
     core.createPopper(triggerEl.value, pannel.value, {
-      placement
+      placement,
+      modifiers: [
+        {
+          name: "computeStyles",
+          options: {
+            gpuAcceleration: false
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset
+          }
+        }
+      ]
     });
   };
   return {

package/lib/index.css

@@ -329,7 +329,7 @@
   padding: 0 15px;
 }
 .column-selection-popover-content {
-  padding: 0;
+  padding: 0 !important;
 }
 .column-selection-popover-content .search-column {
   margin-bottom: 4px;
@@ -494,8 +494,8 @@
   border-bottom: none;
 }
 .add-content-modal-body {
-  padding: 0;
   height: 70vh;
+  padding: 0 !important;
 }
 .add-content-modal-body .content-tabs {
   height: 100%;
@@ -3142,6 +3142,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/lib/utils/date.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+function tow(n) {
+  return n >= 0 && n < 10 ? `0${n}` : `${n}`;
+}
+function need(value, label) {
+  if (!value)
+    return "";
+  return tow(value) + label;
+}
+function getSpaceDate(date) {
+  const oDate = new Date();
+  const oldTime = oDate.getTime();
+  const newDate = new Date(date);
+  const newTime = newDate.getTime();
+  let second = Math.floor((newTime - oldTime) / 1e3);
+  if (second <= 0) {
+    return 0;
+  }
+  const day = Math.floor(second / 86400);
+  second %= 86400;
+  const hour = Math.floor(second / 3600);
+  second %= 3600;
+  const minute = Math.floor(second / 60);
+  second %= 60;
+  const str = `${need(day, "\u5929") + need(hour, "\u5C0F\u65F6") + need(minute, "\u5206\u949F") + tow(second)}\u79D2`;
+  return str;
+}
+exports.getSpaceDate = getSpaceDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "",
   "keywords": [
     "vue",
@@ -99,12 +99,14 @@
     "fs-extra": "^9.1.0",
     "gif-to-canvas": "^1.0.0",
     "gif.js": "^0.2.0",
+    "html2canvas": "^1.4.1",
     "husky": "^4.3.7",
     "jest": "^29.7.0",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
+    "qrcodejs2": "^0.0.2",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-rational-order": "^0.1.2",
@@ -128,5 +130,6 @@
     "es",
     "lib",
     "dist"
-  ]
+  ],
+  "dependencies": {}
 }