@cmstops/pro-compo 0.3.12 → 0.3.14

package/lib/contentDetailList/style/GroupPieceItem.less

@@ -0,0 +1,108 @@
+.medialist-group-piece-item-view {
+  display: flex;
+  // width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  .cover-view {
+    position: relative;
+    flex-shrink: 0;
+    width: 110px;
+    height: 70px;
+    margin-right: 20px;
+    background: transparent;
+
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .no-img {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 30px;
+    }
+  }
+
+  .info-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: calc(100% - 130px);
+    padding: 2px 0;
+
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      overflow: hidden;
+      color: #1d2129;
+      font-weight: 400;
+      font-size: 16px;
+      font-style: normal;
+      line-height: 22px;
+      cursor: pointer;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .abttrite-v {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        min-width: 510px;
+        color: #808692;
+        font-size: 12px;
+
+        .icon {
+          margin-right: 8px;
+        }
+
+        .tags {
+          display: inline-block;
+          width: 200px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          cursor: pointer;
+        }
+
+        .abttr {
+          width: 35%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          cursor: pointer;
+
+          &.value {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .right {
+        flex-shrink: 0;
+        margin-right: 20px;
+      }
+    }
+  }
+}

package/lib/contentDetailList/style/index.css

@@ -639,6 +639,99 @@
 .popper-categories {
   max-width: 600px;
 }
+.medialist-group-piece-item-view {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.medialist-group-piece-item-view:hover {
+  background: #fafafa;
+}
+.medialist-group-piece-item-view .cover-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 110px;
+  height: 70px;
+  margin-right: 20px;
+  background: transparent;
+}
+.medialist-group-piece-item-view .cover-view .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-group-piece-item-view .cover-view .image img {
+  width: 100%;
+  height: 100%;
+}
+.medialist-group-piece-item-view .cover-view .no-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 30px;
+}
+.medialist-group-piece-item-view .info-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: calc(100% - 130px);
+  padding: 2px 0;
+}
+.medialist-group-piece-item-view .info-view .title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  overflow: hidden;
+  color: #1d2129;
+  font-weight: 400;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 510px;
+  color: #808692;
+  font-size: 12px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .icon {
+  margin-right: 8px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .tags {
+  display: inline-block;
+  width: 200px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .abttr {
+  width: 35%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .abttr.value {
+  margin-left: 10px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .right {
+  flex-shrink: 0;
+  margin-right: 20px;
+}
 .medialist-mpdoc-item-view {
   display: flex;
   padding: 10px;

package/lib/contentDetailList/style/index.less

@@ -6,6 +6,7 @@
 @import './MaccountItem.less';
 @import './Doc.less';
 @import './DocItem.less';
+@import './GroupPieceItem.less';
 @import './DocMpItem.less';
 @import './courseItem.less';
 @import './funhdItem.less';

package/lib/index.css

@@ -2666,6 +2666,99 @@
 .popper-categories {
   max-width: 600px;
 }
+.medialist-group-piece-item-view {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.medialist-group-piece-item-view:hover {
+  background: #fafafa;
+}
+.medialist-group-piece-item-view .cover-view {
+  position: relative;
+  flex-shrink: 0;
+  width: 110px;
+  height: 70px;
+  margin-right: 20px;
+  background: transparent;
+}
+.medialist-group-piece-item-view .cover-view .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+.medialist-group-piece-item-view .cover-view .image img {
+  width: 100%;
+  height: 100%;
+}
+.medialist-group-piece-item-view .cover-view .no-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 30px;
+}
+.medialist-group-piece-item-view .info-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: calc(100% - 130px);
+  padding: 2px 0;
+}
+.medialist-group-piece-item-view .info-view .title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  overflow: hidden;
+  color: #1d2129;
+  font-weight: 400;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 22px;
+  cursor: pointer;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 510px;
+  color: #808692;
+  font-size: 12px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .icon {
+  margin-right: 8px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .tags {
+  display: inline-block;
+  width: 200px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .abttr {
+  width: 35%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .left .abttr.value {
+  margin-left: 10px;
+}
+.medialist-group-piece-item-view .info-view .abttrite-v .right {
+  flex-shrink: 0;
+  margin-right: 20px;
+}
 .medialist-mpdoc-item-view {
   display: flex;
   padding: 10px;

package/lib/selectThumb/component.js

@@ -7,6 +7,7 @@ var component$1 = require("../imageCrop/component.js");
 var card = require("./components/card.js");
 var colorPalette = require("./components/colorPalette.js");
 var config = require("../config.js");
+var index = require("../utils/index.js");
 const _hoisted_1 = {
   key: 0,
   class: "star"
@@ -236,14 +237,14 @@ const _sfc_main = vue.defineComponent({
       tempThumbFiles.value.push(data);
       submitCallback(tempThumbFiles.value);
     };
-    const changeThumbType = (type, index) => {
+    const changeThumbType = (type, index2) => {
       tempThumbFiles.value = [];
       thumbBannerModel.value = type;
-      thumbOptionIndex.value = index;
+      thumbOptionIndex.value = index2;
     };
-    const openDialogMediaSelection = (type, index) => {
+    const openDialogMediaSelection = (type, index2) => {
       thumbBannerModel.value = type || "thumb";
-      thumbOptionIndex.value = index || 0;
+      thumbOptionIndex.value = index2 || 0;
       dialogMediaSelectionShow.value = true;
     };
     const docSeriesShowTopThemeColor = vue.computed(() => {
@@ -280,9 +281,27 @@ const _sfc_main = vue.defineComponent({
         styleData.value.data = temp;
       } else if (thumbBannerModel.value === "banner") {
         styleData.value.banner_url = data[0].url;
+        const getColors = index.getThemeColor(BASE_API, data[0].url);
+        getColors.then((themes) => {
+          styleData.value.banner_colorList = JSON.parse(JSON.stringify(themes));
+          styleData.value.banner_theme_color = `rgb(${themes[1]})`;
+          callback(styleData.value);
+        }).catch((e) => {
+          styleData.value.banner_theme_color = `rgb(255, 255, 255)`;
+          callback(styleData.value);
+        });
       } else {
         styleData.value.top_image_url = data[0].url;
         styleData.value.pc_banner_url = data[0].url;
+        const getColors = index.getThemeColor(BASE_API, data[0].url);
+        getColors.then((themes) => {
+          styleData.value.top_colorList = JSON.parse(JSON.stringify(themes));
+          styleData.value.top_theme_color = `rgb(${themes[1]})`;
+          callback(styleData.value);
+        }).catch((e) => {
+          styleData.value.top_theme_color = `rgb(255, 255, 255)`;
+          callback(styleData.value);
+        });
       }
       callback(styleData.value);
       dialogMediaSelectionShow.value = false;
@@ -390,40 +409,40 @@ const _sfc_main = vue.defineComponent({
           ], 4)) : vue.createCommentVNode("v-if", true),
           vue.createElementVNode("div", _hoisted_3, [
             ["thumbs"].includes(_ctx.mode) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(thumbsLengthList.value, (item, index) => {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(thumbsLengthList.value, (item, index2) => {
                 return vue.openBlock(), vue.createBlock(card, {
-                  key: index,
-                  id: `thumb-card-${index}`,
-                  data: thumbList.value[index],
-                  "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                  key: index2,
+                  id: `thumb-card-${index2}`,
+                  data: thumbList.value[index2],
+                  "onUpdate:data": ($event) => thumbList.value[index2] = $event,
                   parentRef: selectThumbRef.value,
-                  idx: index,
+                  idx: index2,
                   "preview-list": previewList.value,
                   "thumb-model": "thumb",
                   onFileForShowThumb: fileForShowThumb,
                   onChangeThumbType: changeThumbType,
                   onUploadLocal: _cache[0] || (_cache[0] = (cb) => _ctx.$emit("upload", cb)),
-                  onOpen: ($event) => openDialogMediaSelection($event, index)
+                  onOpen: ($event) => openDialogMediaSelection($event, index2)
                 }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "idx", "preview-list", "onOpen"]);
               }), 128))
             ])) : currentModel.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createCommentVNode(" \u5C01\u9762\u56FEcard "),
               vue.createElementVNode("div", _hoisted_5, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentModel.value.maxLength, (item, index) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentModel.value.maxLength, (item, index2) => {
                   return vue.openBlock(), vue.createBlock(card, {
-                    key: index,
-                    id: `thumb-card-${index}`,
-                    data: thumbList.value[index],
-                    "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                    key: index2,
+                    id: `thumb-card-${index2}`,
+                    data: thumbList.value[index2],
+                    "onUpdate:data": ($event) => thumbList.value[index2] = $event,
                     parentRef: selectThumbRef.value,
                     model: model.value,
-                    idx: index,
+                    idx: index2,
                     "preview-list": previewList.value,
                     "thumb-model": "thumb",
                     onFileForShowThumb: fileForShowThumb,
                     onChangeThumbType: changeThumbType,
                     onUploadLocal: _cache[1] || (_cache[1] = (cb) => _ctx.$emit("upload", cb)),
-                    onOpen: ($event) => openDialogMediaSelection($event, index)
+                    onOpen: ($event) => openDialogMediaSelection($event, index2)
                   }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "model", "idx", "preview-list", "onOpen"]);
                 }), 128))
               ])
@@ -443,9 +462,9 @@ const _sfc_main = vue.defineComponent({
                 onChange: modelChange
               }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modelList.value, (item, index) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modelList.value, (item, index2) => {
                     return vue.openBlock(), vue.createBlock(vue.unref(webVue.Radio), {
-                      key: index,
+                      key: index2,
                       value: item.value
                     }, {
                       default: vue.withCtx(() => [

package/lib/selectThumb/components/card.js

@@ -111,7 +111,8 @@ const _sfc_main = vue.defineComponent({
               ])) : (vue.openBlock(), vue.createElementBlock("div", {
                 key: 1,
                 class: "item add-thumb",
-                style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` })
+                style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` }),
+                onClick: openDialogMediaSelection
               }, [
                 vue.createVNode(vue.unref(icon.IconPlus))
               ], 4))

package/lib/utils/index.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 var dayjs = require("dayjs");
+var ColorThief = require("colorthief");
+var api = require("../imageCrop/script/api.js");
+var config = require("../config.js");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
 var dayjs__default = /* @__PURE__ */ _interopDefaultLegacy(dayjs);
+var ColorThief__default = /* @__PURE__ */ _interopDefaultLegacy(ColorThief);
 const dateYYYYDDMMHHmm = (date) => {
   if (!date)
     return "--";
@@ -66,8 +70,54 @@ const validateForm = (formRef) => {
     }
   });
 };
+function getRealUrl(BASE_API, url) {
+  return new Promise((resove, reject) => {
+    try {
+      const flag = !url.includes("/poplar/v2");
+      const cape = url.includes("cape/v1/upload");
+      const extented = !url.includes(BASE_API) && !url.includes(config.DEFAULT_UPLOAD_URL);
+      if (flag || extented || cape) {
+        resove(url);
+      } else {
+        api.getFileRealUrl(BASE_API, url).then((res) => {
+          resove(res.message);
+        });
+      }
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+function getThemeColor(BASE_API, src) {
+  return new Promise((resolve, reject) => {
+    const getUrl = getRealUrl(BASE_API, src);
+    getUrl.then((url) => {
+      const colorThief = new ColorThief__default["default"]();
+      const img = document.createElement("img");
+      img.crossOrigin = "Anonymous";
+      img.setAttribute("src", `${url}?t=${+new Date()}`);
+      img.onload = () => {
+        let themeColors = [];
+        const getResult = colorThief.getPalette(img);
+        if (getResult) {
+          themeColors = getResult.slice(0, 6);
+        } else {
+          themeColors = [[255, 255, 255]];
+        }
+        resolve(themeColors);
+      };
+      img.onerror = (e) => {
+        reject(e);
+      };
+    }).catch((e) => {
+      reject(e);
+    });
+  });
+}
 exports.dateYYYYDDMMHHmm = dateYYYYDDMMHHmm;
 exports.generateUUID = generateUUID;
+exports.getRealUrl = getRealUrl;
+exports.getThemeColor = getThemeColor;
 exports.noCoverText = noCoverText;
 exports.replaceSuffix = replaceSuffix;
 exports.timeFormat = timeFormat;

package/lib/utils/typeMap.js

@@ -18,7 +18,7 @@ const key_target_type_map = {
   16: "mp_content",
   17: "funhd",
   18: "course",
-  19: "matrix"
+  19: "group_piece"
 };
 const approveFlowStatusMap = {
   1: "\u5BA1\u6838\u4E2D",
@@ -30,6 +30,11 @@ const approveFlowStatusMap = {
   7: "\u91CD\u65B0\u53D1\u8D77",
   8: "\u5DF2\u7ED3\u675F"
 };
+const groupPieceType = {
+  category_list: "\u7ED1\u5B9A\u9891\u9053",
+  component: "\u7ED1\u5B9A\u7EC4\u4EF6",
+  special: "\u7ED1\u5B9A\u4E13\u9898"
+};
 const componentsColumns = {
   banner: { value: "banner", label: "\u8F6E\u64AD\u7EC4\u4EF6" },
   top: { value: "top", label: "\u7F6E\u9876\u7EC4\u4EF6" },
@@ -45,7 +50,8 @@ const componentsColumns = {
   kongo: { value: "kongo", label: "\u529F\u80FD\u5BFC\u822A\u7EC4\u4EF6" },
   picture: { value: "picture", label: "\u56FE\u7247\u7EC4\u4EF6", simple: true },
   timeline: { value: "timeline", label: "\u65F6\u95F4\u94FE\u7EC4\u4EF6" },
-  rank: { value: "rank", label: "\u699C\u5355\u7EC4\u4EF6" }
+  rank: { value: "rank", label: "\u699C\u5355\u7EC4\u4EF6" },
+  group_piece: { value: "group_piece", label: "\u5206\u7EC4\u7EC4\u4EF6" }
 };
 const compoColumnsMap = () => {
   const obj = {};
@@ -162,6 +168,7 @@ exports.componentsColumns = componentsColumns;
 exports.contentList_layout_map = contentList_layout_map;
 exports.contentList_list_type_map = contentList_list_type_map;
 exports.contentList_relation_type_map = contentList_relation_type_map;
+exports.groupPieceType = groupPieceType;
 exports.ilive_type_map = ilive_type_map;
 exports.key_target_type_map = key_target_type_map;
 exports.kongo_source_map = kongo_source_map;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "",
   "keywords": [
     "vue",