@cmstops/pro-compo 0.3.13 → 0.3.14

package/es/selectThumb/component.js

@@ -6,6 +6,7 @@ import _sfc_main$4 from "../imageCrop/component.js";
 import _sfc_main$1 from "./components/card.js";
 import _sfc_main$2 from "./components/colorPalette.js";
 import { DEFAULT_BASE_API } from "../config.js";
+import { getThemeColor } from "../utils/index.js";
 const _hoisted_1 = {
   key: 0,
   class: "star"
@@ -279,9 +280,27 @@ const _sfc_main = defineComponent({
         styleData.value.data = temp;
       } else if (thumbBannerModel.value === "banner") {
         styleData.value.banner_url = data[0].url;
+        const getColors = 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 = 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;

package/es/utils/index.d.ts

@@ -11,3 +11,5 @@ export declare function replaceSuffix(str: string, insert: string): string;
 export declare const noCoverText: (item: any) => any;
 export declare const timeFormat: (value: any) => string;
 export declare const validateForm: (formRef: any) => Promise<unknown>;
+export declare function getRealUrl(BASE_API: string, url: string): Promise<unknown>;
+export declare function getThemeColor(BASE_API: string, src: string): Promise<unknown>;

package/es/utils/index.js

@@ -1,4 +1,7 @@
 import dayjs from "dayjs";
+import ColorThief from "colorthief";
+import { getFileRealUrl } from "../imageCrop/script/api.js";
+import { DEFAULT_UPLOAD_URL } from "../config.js";
 const dateYYYYDDMMHHmm = (date) => {
   if (!date)
     return "--";
@@ -60,4 +63,48 @@ const validateForm = (formRef) => {
     }
   });
 };
-export { dateYYYYDDMMHHmm, generateUUID, noCoverText, replaceSuffix, timeFormat, to, validateForm };
+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(DEFAULT_UPLOAD_URL);
+      if (flag || extented || cape) {
+        resove(url);
+      } else {
+        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();
+      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);
+    });
+  });
+}
+export { dateYYYYDDMMHHmm, generateUUID, getRealUrl, getThemeColor, noCoverText, replaceSuffix, timeFormat, to, validateForm };

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/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/package.json

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