@cmstops/pro-compo 0.1.14 → 0.1.15

package/lib/index.css

@@ -1293,6 +1293,372 @@
 .add-category-modal-wrapper .arco-modal-footer {
   border-top: 0;
 }
+.cropper-container {
+  position: relative;
+  font-size: 0;
+  line-height: 0;
+  direction: ltr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.cropper-container img {
+  display: block;
+  width: 100%;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: 100%;
+  min-height: 0 !important;
+  max-height: none !important;
+  image-orientation: 0deg;
+}
+.cropper-canvas,
+.cropper-crop-box,
+.cropper-drag-box,
+.cropper-modal,
+.cropper-wrap-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.cropper-canvas,
+.cropper-wrap-box {
+  overflow: hidden;
+}
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+.cropper-view-box {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+}
+.cropper-dashed {
+  position: absolute;
+  display: block;
+  border: 0 dashed #eee;
+  opacity: 0.5;
+}
+.cropper-dashed.dashed-h {
+  top: 33.33333%;
+  left: 0;
+  width: 100%;
+  height: 33.33333%;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+.cropper-dashed.dashed-v {
+  top: 0;
+  left: 33.33333%;
+  width: 33.33333%;
+  height: 100%;
+  border-right-width: 1px;
+  border-left-width: 1px;
+}
+.cropper-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0;
+  height: 0;
+  opacity: 0.75;
+}
+.cropper-center::after,
+.cropper-center::before {
+  position: absolute;
+  display: block;
+  background-color: #eee;
+  content: ' ';
+}
+.cropper-center::before {
+  top: 0;
+  left: -3px;
+  width: 7px;
+  height: 1px;
+}
+.cropper-center::after {
+  top: -3px;
+  left: 0;
+  width: 1px;
+  height: 7px;
+}
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0.1;
+}
+.cropper-face {
+  top: 0;
+  left: 0;
+  background-color: #fff;
+}
+.cropper-line {
+  background-color: #39f;
+}
+.cropper-line.line-e {
+  top: 0;
+  right: -3px;
+  width: 5px;
+  cursor: e-resize;
+}
+.cropper-line.line-n {
+  top: -3px;
+  left: 0;
+  height: 5px;
+  cursor: n-resize;
+}
+.cropper-line.line-w {
+  top: 0;
+  left: -3px;
+  width: 5px;
+  cursor: w-resize;
+}
+.cropper-line.line-s {
+  bottom: -3px;
+  left: 0;
+  height: 5px;
+  cursor: s-resize;
+}
+.cropper-point {
+  width: 5px;
+  height: 5px;
+  background-color: #39f;
+  opacity: 0.75;
+}
+.cropper-point.point-e {
+  top: 50%;
+  right: -3px;
+  margin-top: -3px;
+  cursor: e-resize;
+}
+.cropper-point.point-n {
+  top: -3px;
+  left: 50%;
+  margin-left: -3px;
+  cursor: n-resize;
+}
+.cropper-point.point-w {
+  top: 50%;
+  left: -3px;
+  margin-top: -3px;
+  cursor: w-resize;
+}
+.cropper-point.point-s {
+  bottom: -3px;
+  left: 50%;
+  margin-left: -3px;
+  cursor: s-resize;
+}
+.cropper-point.point-ne {
+  top: -3px;
+  right: -3px;
+  cursor: ne-resize;
+}
+.cropper-point.point-nw {
+  top: -3px;
+  left: -3px;
+  cursor: nw-resize;
+}
+.cropper-point.point-sw {
+  bottom: -3px;
+  left: -3px;
+  cursor: sw-resize;
+}
+.cropper-point.point-se {
+  right: -3px;
+  bottom: -3px;
+  width: 20px;
+  height: 20px;
+  cursor: se-resize;
+  opacity: 1;
+}
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    width: 15px;
+    height: 15px;
+  }
+}
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    width: 10px;
+    height: 10px;
+  }
+}
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    width: 5px;
+    height: 5px;
+    opacity: 0.75;
+  }
+}
+.cropper-point.point-se::before {
+  position: absolute;
+  right: -50%;
+  bottom: -50%;
+  display: block;
+  width: 200%;
+  height: 200%;
+  background-color: #39f;
+  opacity: 0;
+  content: ' ';
+}
+.cropper-invisible {
+  opacity: 0;
+}
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+.cropper-hide {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+}
+.cropper-hidden {
+  display: none !important;
+}
+.cropper-move {
+  cursor: move;
+}
+.cropper-crop {
+  cursor: crosshair;
+}
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
+.image-crop-modal-wrapper .arco-modal-footer {
+  padding: 0;
+}
+.image-crop-modal-body {
+  height: calc(100vh - 16vh - 114px);
+  padding: 0;
+  overflow: hidden;
+  background: var(--color-fill-3);
+}
+.image-crop-modal-body .image-cropper {
+  height: 100%;
+}
+.image-crop-modal-body .image-cropper .edit {
+  height: calc(100% - 86px);
+  padding: 24px;
+  text-align: center;
+}
+.image-crop-modal-body .image-cropper .edit.fullHeight {
+  height: 100%;
+}
+.image-crop-modal-body .image-cropper .edit .edit-cropper {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+}
+.image-crop-modal-body .image-cropper .edit .edit-cropper #cropper_img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-crop-modal-body .image-cropper .edit .edit-cropper #cropper_img.position {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.image-crop-modal-body .image-cropper .edit .edit-cropper .cropper-bg {
+  background: none !important;
+}
+.image-crop-modal-body .image-cropper .tool {
+  width: 100%;
+  height: 86px;
+  line-height: 86px;
+  text-align: center;
+  background: #fff;
+}
+.image-crop-modal-body .image-cropper .tool .btn {
+  display: inline-block;
+  margin: 0 30px;
+  color: #474747;
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  letter-spacing: 0;
+  vertical-align: middle;
+  border: 1px solid #333;
+  cursor: pointer;
+  opacity: 0.8;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn1 {
+  width: 41px;
+  height: 33px;
+  line-height: 33px;
+  border: 1px dashed #333;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn2 {
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn3 {
+  width: 46px;
+  height: 33px;
+  line-height: 33px;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn4 {
+  width: 34px;
+  height: 47px;
+  line-height: 47px;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn5 {
+  width: 59px;
+  height: 33px;
+  line-height: 33px;
+}
+.image-crop-modal-body .image-cropper .tool .btn.btn6 {
+  width: 33px;
+  height: 59px;
+  line-height: 59px;
+}
+.image-crop-modal-body .image-cropper .tool .btn:hover,
+.image-crop-modal-body .image-cropper .tool .btn.active {
+  color: #4886ff;
+  border-color: #4886ff;
+}
+.image-crop-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 30px;
+  overflow: hidden;
+  border-top: solid 1px var(--color-border-1);
+}
+.image-crop-modal-footer .cropper-btn {
+  padding: 6px !important;
+  font-size: 18px;
+}
+.image-crop-modal-footer .cropper-btn + .cropper-btn {
+  margin-left: 10px;
+}
 .tooltip-button {
   height: auto;
   padding: 20px;
@@ -2208,6 +2574,7 @@
   height: 40px !important;
 }
 .user-director-modal-body {
+  background: var(--color-bg-1);
   padding: 0;
 }
 .user-director-modal-body .arco-collapse {
@@ -2216,7 +2583,7 @@
 .user-director-modal-body .arco-collapse-item-content {
   padding-left: 10px;
   padding-right: 0;
-  background: white;
+  background: var(--color-bg-1);
 }
 .user-select-content {
   height: 50vh;
@@ -2274,3 +2641,104 @@
 .user-select-content .arco-tree-node:hover .tree-action {
   display: inline-block;
 }
+.select-thumb-container .thumb-card-container {
+  width: 100px;
+  height: 58px;
+  margin-right: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.select-thumb-container .thumb-card-container.model-5 {
+  width: 75px;
+  height: 100px;
+}
+.select-thumb-container .thumb-card-container.model-7 {
+  width: 232px;
+  height: 58px;
+}
+.select-thumb-container .thumb-card-container .img-v {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.select-thumb-container .thumb-card-container .img-v .change-icon {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+  color: #ffffff;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item.add-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+}
+.select-thumb-container .thumb-card-container .mask {
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  color: #eaeaea;
+  font-size: 18px;
+}
+.select-thumb-container .thumb-card-container .mask i {
+  display: inline-block;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .mask i:active {
+  opacity: 0.4;
+}
+.select-thumb-container .thumb-card-container .mask .half {
+  height: 100%;
+  width: 48%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.select-thumb-container .thumb-card-container .mask .half:hover {
+  opacity: 0.7;
+}
+.select-thumb-container .thumb-card-container .img-v:hover .mask {
+  display: flex;
+}
+.select-thumb-container .title {
+  font-size: 14px;
+  color: #4e5969;
+  font-weight: 700;
+  line-height: 40px;
+  margin: 5px 0px;
+}
+.select-thumb-container .title span {
+  margin-right: 10px;
+}
+.select-thumb-container .title .tip {
+  font-size: 12px;
+  color: rgba(78, 89, 105, 0.4);
+}
+.select-thumb-container .thumb-list-view {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.select-thumb-container .star {
+  color: red;
+  margin-right: 2px !important;
+}

package/lib/index.js

@@ -10,12 +10,14 @@ var index$5 = require("./contentModal/index.js");
 var index$6 = require("./resourceModal/index.js");
 var index$7 = require("./previousVersion/index.js");
 var index$8 = require("./selectGategory/index.js");
-var index$9 = require("./uploadBefore/index.js");
-var index$a = require("./contentDetailList/index.js");
-var index$b = require("./emptyData/index.js");
-var index$c = require("./mediaFilter/index.js");
-var index$d = require("./selectAvatarList/index.js");
-var index$e = require("./userDirector/index.js");
+var index$9 = require("./imageCrop/index.js");
+var index$a = require("./uploadBefore/index.js");
+var index$b = require("./contentDetailList/index.js");
+var index$c = require("./emptyData/index.js");
+var index$d = require("./mediaFilter/index.js");
+var index$e = require("./selectAvatarList/index.js");
+var index$f = require("./userDirector/index.js");
+var index$g = require("./selectThumb/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -26,9 +28,11 @@ exports.contentModal = index$5;
 exports.resourceModal = index$6;
 exports.previousVersion = index$7;
 exports.selectGategory = index$8;
-exports.uploadBefore = index$9;
-exports.contentDetailList = index$a;
-exports.emptyData = index$b;
-exports.mediaFilter = index$c;
-exports.selectAvatarList = index$d;
-exports.userDirector = index$e;
+exports.imageCrop = index$9;
+exports.uploadBefore = index$a;
+exports.contentDetailList = index$b;
+exports.emptyData = index$c;
+exports.mediaFilter = index$d;
+exports.selectAvatarList = index$e;
+exports.userDirector = index$f;
+exports.selectThumb = index$g;

package/lib/index.less

@@ -8,9 +8,11 @@
 @import './resourceModal/style/index.less';
 @import './previousVersion/style/index.less';
 @import './selectGategory/style/index.less';
+@import './imageCrop/style/index.less';
 @import './uploadBefore/style/index.less';
 @import './contentDetailList/style/index.less';
 @import './emptyData/style/index.less';
 @import './mediaFilter/style/index.less';
 @import './selectAvatarList/style/index.less';
 @import './userDirector/style/index.less';
+@import './selectThumb/style/index.less';

package/lib/mediaFilter/component.js

@@ -16,9 +16,8 @@ const _sfc_main = vue.defineComponent({
     BASE_API: {}
   },
   emits: ["search", "change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
     const props = __props;
-    const emits = __emit;
     props.BASE_API || config.DEFAULT_BASE_API;
     function handleFilterChange(params) {
       emits("change", params);

package/lib/mediaFilter/components/DocFilter.js

@@ -15,9 +15,8 @@ const _sfc_main = vue.defineComponent({
     filterType: { default: "APV" }
   },
   emits: ["search", "change"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
     const props = __props;
-    const emits = __emit;
     const { highLevelSearchOptions, showHighLevelSearch, sortOptions } = optionsGetter.useHighLevelSearch(props.filterType);
     const filter = vue.ref({
       keywords: "",

package/lib/messageBox/list.js

@@ -32,8 +32,7 @@ const _sfc_main = vue.defineComponent({
     isNorMore: { type: Boolean }
   },
   emits: ["loadMoreMsg"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
+  setup(__props, { emit: emits }) {
     const props = __props;
     const isEmptyList = vue.computed(() => {
       if (props.list.length === 0) {

package/lib/previousVersion/component.js

@@ -37,9 +37,8 @@ const _sfc_main = vue.defineComponent({
     targetArr: {}
   },
   emits: ["update:visible", "cancel"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
-    const emit = __emit;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
     const title = props.title || "\u4E0A\u7248";
     const targetArr = vue.computed(() => {

package/lib/resourceModal/component.js

@@ -12,16 +12,14 @@ const _sfc_main = vue.defineComponent({
     ai_static_covers: {},
     ai_gif_covers: {},
     preview: { type: Boolean },
-    addType: {},
     base_api: {}
   },
   emits: ["update:dialogVisible", "submit"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const BASE_API = props.base_api || config.DEFAULT_BASE_API;
     const selectedMax = vue.ref(1);
-    const emit = __emit;
-    const add = (itemData) => {
+    const submit = (itemData) => {
       emit("submit", itemData);
     };
     const setVisible = (bool) => {
@@ -65,9 +63,8 @@ const _sfc_main = vue.defineComponent({
             ai_static_covers: _ctx.ai_static_covers,
             ai_gif_covers: _ctx.ai_gif_covers,
             preview: _ctx.preview,
-            "add-type": _ctx.addType,
-            onAdd: add
-          }, null, 8, ["selected-max", "catalog-props", "base_api", "ai_static_covers", "ai_gif_covers", "preview", "add-type"])
+            onConfirm: submit
+          }, null, 8, ["selected-max", "catalog-props", "base_api", "ai_static_covers", "ai_gif_covers", "preview"])
         ]),
         _: 1
       }, 8, ["visible"]);

package/lib/resourceModal/components/MediaPreviewer/index.js

@@ -27,10 +27,9 @@ const _sfc_main = vue.defineComponent({
     url: {}
   },
   emits: ["close"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const imageVisible = vue.computed(() => props.type === "image");
-    const emit = __emit;
     const closePreviewer = () => {
       emit("close", false);
     };

package/lib/resourceModal/components/MediaSelection/DocAiMediaSelected/index.js

@@ -22,20 +22,13 @@ const _sfc_main = vue.defineComponent({
     selectedMax: {},
     ai_static_covers: {},
     ai_gif_covers: {},
-    preview: { type: Boolean },
-    addType: {}
+    preview: { type: Boolean }
   },
-  emits: ["add"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const add = (itemData) => {
-      if (selectedUrl.value.includes(itemData.url)) {
-        selectedUrl.value = [];
-        emit("add", null);
-      } else {
-        selectedUrl.value = [itemData.url];
-        emit("add", itemData);
-      }
+  emits: ["confirm"],
+  setup(__props, { emit }) {
+    const confirm = (itemData) => {
+      selectedUrl.value = [itemData.url];
+      emit("confirm", itemData);
     };
     const selectedUrl = vue.ref([]);
     return (_ctx, _cache) => {
@@ -57,7 +50,6 @@ const _sfc_main = vue.defineComponent({
                       }, [
                         vue.createVNode(index, {
                           preview: _ctx.preview,
-                          "add-type": _ctx.addType,
                           "item-data": {
                             catalog: "image",
                             alias: item,
@@ -65,8 +57,8 @@ const _sfc_main = vue.defineComponent({
                             url: item,
                             realUrl: item
                           },
-                          onAdd: add
-                        }, null, 8, ["preview", "add-type", "item-data"])
+                          onConfirm: confirm
+                        }, null, 8, ["preview", "item-data"])
                       ], 2)
                     ])
                   ]);
@@ -86,7 +78,6 @@ const _sfc_main = vue.defineComponent({
                         }, [
                           vue.createVNode(index, {
                             preview: _ctx.preview,
-                            "add-type": _ctx.addType,
                             "item-data": {
                               catalog: "image",
                               alias: item,
@@ -94,8 +85,8 @@ const _sfc_main = vue.defineComponent({
                               url: item,
                               realUrl: item
                             },
-                            onAdd: add
-                          }, null, 8, ["preview", "add-type", "item-data"])
+                            onConfirm: confirm
+                          }, null, 8, ["preview", "item-data"])
                         ], 2)
                       ])
                     ]);