@cmstops/pro-compo 0.1.13 → 0.1.15

package/es/selectThumb/component.js

@@ -0,0 +1,410 @@
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, withCtx, withDirectives, vShow } from "vue";
+import { RadioGroup, Radio, Switch } from "@arco-design/web-vue";
+import { docThumbObjMap, docThumbArrMap, docThumbRatioMap } from "../utils/doc.js";
+import _sfc_main$3 from "../resourceModal/component.js";
+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";
+const _hoisted_1 = { class: "select-thumb-container" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = {
+  key: 0,
+  class: "tip"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "thumb-list-view"
+};
+const _hoisted_5 = { class: "banner-view" };
+const _hoisted_6 = { class: "title" };
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
+const _hoisted_8 = { class: "title" };
+const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_10 = [
+  _hoisted_9
+];
+const _hoisted_11 = { class: "banner-view" };
+const _hoisted_12 = { class: "title" };
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = { key: 1 };
+const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", { class: "star" }, "*", -1);
+const _hoisted_16 = { key: 2 };
+const _hoisted_17 = /* @__PURE__ */ createElementVNode("span", { class: "tip" }, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", -1);
+const _hoisted_18 = { class: "title" };
+const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u4E13\u9898\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_20 = [
+  _hoisted_19
+];
+const _sfc_main = defineComponent({
+  ...{ name: "selectThumb" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    mode: {},
+    dataValue: {},
+    title: {},
+    cropper: { type: Boolean },
+    aiImages: {},
+    series: {}
+  },
+  emits: ["update:dataValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const useCropper = ref(props.cropper || false);
+    const oldData = ref(null);
+    const styleData = ref({});
+    const thumbBannerModel = ref("banner");
+    const dialogMediaSelectionShow = ref(false);
+    const dialogCropperShow = ref(false);
+    const thumbOptionIndex = ref(0);
+    const aspectRatioProp = ref(16 / 9);
+    const cropperData = ref([]);
+    const model = computed({
+      get() {
+        if (!styleData.value.model)
+          return "4";
+        return `${styleData.value.model}`;
+      },
+      set(value) {
+        styleData.value.model = parseInt(value, 10);
+        callback(styleData.value);
+      }
+    });
+    watch(
+      () => props.dataValue,
+      () => {
+        loadData(props.dataValue);
+      }
+    );
+    const loadData = (value) => {
+      let data = null;
+      if (!value) {
+        data = { model: 3, data: [{ url: "", thumb: "" }] };
+      } else if (props.mode === "smiple") {
+        data = { model: 3, data: [{ url: value, thumb: value }] };
+      } else {
+        data = { ...JSON.parse(value) };
+      }
+      if (!oldData.value) {
+        oldData.value = { ...data };
+      }
+      styleData.value = data;
+    };
+    const callback = (value) => {
+      var _a;
+      const temp = JSON.parse(JSON.stringify(value));
+      if (Array.isArray(temp.data)) {
+        temp.data = temp.data.map((item) => {
+          return item || {};
+        });
+      }
+      if (props.mode === "smiple") {
+        emit("update:dataValue", ((_a = temp.data[0]) == null ? void 0 : _a.url) || "");
+      } else {
+        if (!temp.data) {
+          temp.data = [];
+        }
+        emit("update:dataValue", JSON.stringify(temp));
+      }
+    };
+    const curtemplate = computed(() => {
+      if (props.mode !== "doc") {
+        return docThumbObjMap[3];
+      }
+      return docThumbObjMap[parseInt(model.value, 10)];
+    });
+    const modelList = computed(() => {
+      return docThumbArrMap().filter((item) => {
+        return FromThumbArr.value.split(",").includes(item.value);
+      });
+    });
+    const FromThumbArr = computed(() => {
+      const { series } = props;
+      if (series) {
+        if (series === "imagetext")
+          return "1,2,3,4";
+        if (series === "svideo")
+          return "2,5";
+        if (series === "video")
+          return "1,2,3,4";
+        if (series === "atlas")
+          return "1,2,3,4";
+        if (series === "audio")
+          return "1,2,3,4";
+        if (series === "link")
+          return "1,2,3,4,7";
+        if (series === "h5")
+          return "1,2,3,4,7";
+      }
+      return "1,2,3,4,5,7";
+    });
+    const currentModel = computed(() => {
+      if (props.mode !== "doc") {
+        return docThumbObjMap[3];
+      }
+      return modelList.value.find((item) => item.value === model.value);
+    });
+    const thumbList = computed(() => {
+      var _a;
+      return ((_a = styleData.value) == null ? void 0 : _a.data) || [];
+    });
+    const previewList = computed(() => {
+      return thumbList.value.map((item) => item.url);
+    });
+    const openDialogMediaSelection = (type, index) => {
+      thumbBannerModel.value = type || "thumb";
+      thumbOptionIndex.value = index || 0;
+      dialogMediaSelectionShow.value = true;
+    };
+    const docSeriesShowTopThemeColor = computed(() => {
+      const { series } = props;
+      return ["special", "special_v3", "video_album", "audio_album"].includes(
+        series
+      );
+    });
+    const submitCallback = (data) => {
+      var _a;
+      console.log("submitCallback", data);
+      const isPcBaner = props.mode === "doc" && thumbBannerModel.value === "pcBanner" && !docSeriesShowTopThemeColor.value;
+      const _useCropper = props.mode === "doc" ? true : useCropper.value;
+      if (isPcBaner || !_useCropper) {
+        dialogMediaSelectionShow.value = false;
+        data.map(async (media) => {
+          const { width, height } = await loadImage(media.url);
+          styleData.value.pc_banner_url = `${media.url}?width=${width}&height=${height}`;
+          styleData.value.pc_banner_url_info = JSON.stringify({ width, height });
+          callback(styleData.value);
+          return media;
+        });
+      } else {
+        cropperData.value = [].concat(data);
+        if (thumbBannerModel.value === "banner" || docSeriesShowTopThemeColor.value) {
+          aspectRatioProp.value = docThumbRatioMap()[2];
+        }
+        if (thumbBannerModel.value === "thumb") {
+          aspectRatioProp.value = docThumbRatioMap()[model.value];
+          if (data.length) {
+            const media = data[0];
+            const wh = [];
+            (_a = media.metas) == null ? void 0 : _a.map((item) => {
+              if (item.key === "width")
+                wh.unshift(parseInt(item.value, 10));
+              if (item.key === "height")
+                wh.push(parseInt(item.value, 10));
+              return item;
+            });
+            if (wh.length === 2 && Math.abs(wh[0] / wh[1] - curtemplate.value.ratio) <= 0.05) {
+              const [width, height] = wh;
+              const temp = JSON.parse(JSON.stringify(styleData.value.data || []));
+              temp[thumbOptionIndex.value] = {
+                url: `${media.url}?width=${width}&height=${height}`,
+                thumb: `${media.url}?width=${width}&height=${height}`
+              };
+              styleData.value.data = temp;
+              callback(styleData.value);
+              dialogMediaSelectionShow.value = false;
+              return false;
+            }
+          }
+        }
+        setTimeout(() => {
+          dialogCropperShow.value = true;
+        }, 300);
+      }
+    };
+    const cropConfirm = (data) => {
+      dialogMediaSelectionShow.value = false;
+      if (thumbBannerModel.value === "banner") {
+        styleData.value.banner_url = data[0].url;
+        styleData.value.banner_colorList = JSON.parse(
+          JSON.stringify(data[0].banner_theme_color)
+        );
+        styleData.value.banner_theme_color = `rgb(${data[0].banner_theme_color[1]})`;
+      }
+      if (thumbBannerModel.value === "pcBanner" && docSeriesShowTopThemeColor.value) {
+        styleData.value.top_image_url = data[0].url;
+        styleData.value.pc_banner_url = data[0].url;
+        styleData.value.top_colorList = JSON.parse(
+          JSON.stringify(data[0].banner_theme_color)
+        );
+        styleData.value.top_theme_color = `rgb(${data[0].banner_theme_color[1]})`;
+      }
+      if (thumbBannerModel.value === "thumb") {
+        const temp = JSON.parse(JSON.stringify(styleData.value.data || []));
+        temp[thumbOptionIndex.value] = {
+          url: data[0].url,
+          thumb: data[0].url
+        };
+        styleData.value.data = temp;
+      }
+      callback(styleData.value);
+    };
+    const loadImage = (url) => {
+      return new Promise((resolve, reject) => {
+        const _img = new Image();
+        _img.src = url;
+        _img.onload = () => {
+          resolve(_img);
+        };
+        _img.onerror = reject;
+      });
+    };
+    const modelChange = () => {
+      if (!props.dataValue)
+        return;
+      if (styleData.value.model === oldData.value.model) {
+        styleData.value.data = oldData.value.data;
+      } else {
+        styleData.value.data = [];
+      }
+      callback(styleData.value);
+    };
+    const banner = computed(() => {
+      const { banner: banner2, banner_theme_color, banner_url } = styleData.value;
+      return { banner: banner2, banner_theme_color, url: banner_url };
+    });
+    const hasBanner = computed({
+      get() {
+        var _a;
+        return !!((_a = banner.value) == null ? void 0 : _a.banner);
+      },
+      set(value) {
+        styleData.value.banner = value;
+        callback(styleData.value);
+      }
+    });
+    const pcBanner = computed(() => {
+      const { pc_banner_url_info, pc_banner_url } = styleData.value;
+      return { pc_banner_url_info, url: pc_banner_url };
+    });
+    const colorChange = (styleData2) => {
+      callback(styleData2);
+    };
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createTextVNode(toDisplayString(_ctx.title ? _ctx.title : "\u5C01\u9762") + " ", 1),
+          ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" ? (openBlock(), createElementBlock("span", _hoisted_3, "(" + toDisplayString((_b = curtemplate.value) == null ? void 0 : _b.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_c = curtemplate.value) == null ? void 0 : _c.ratioStr) + ")", 1)) : createCommentVNode("v-if", true)
+        ]),
+        currentModel.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(currentModel.value.maxLength, (item, index) => {
+            return openBlock(), createBlock(_sfc_main$1, {
+              key: index,
+              id: `thumb-card-${index}`,
+              data: thumbList.value[index],
+              model: model.value,
+              "preview-list": previewList.value,
+              "thumb-model": "thumb",
+              onOpen: ($event) => openDialogMediaSelection($event, index)
+            }, null, 8, ["id", "data", "model", "preview-list", "onOpen"]);
+          }), 128))
+        ])) : createCommentVNode("v-if", true),
+        _ctx.mode === "doc" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
+          createVNode(unref(RadioGroup), {
+            modelValue: model.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+            size: "small",
+            type: "button",
+            onChange: modelChange
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(modelList.value, (item, index) => {
+                return openBlock(), createBlock(unref(Radio), {
+                  key: index,
+                  value: item.value
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.alias), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          createCommentVNode(" \u72EC\u7ACB\u8F6E\u535A\u56FE "),
+          createElementVNode("div", _hoisted_5, [
+            createElementVNode("div", _hoisted_6, [
+              _hoisted_7,
+              createVNode(unref(Switch), {
+                modelValue: hasBanner.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hasBanner.value = $event),
+                size: "small"
+              }, null, 8, ["modelValue"])
+            ]),
+            withDirectives(createVNode(_sfc_main$1, {
+              id: `banner-card`,
+              data: banner.value,
+              "preview-list": previewList.value,
+              "thumb-model": "banner",
+              onOpen: openDialogMediaSelection
+            }, null, 8, ["data", "preview-list"]), [
+              [vShow, hasBanner.value]
+            ]),
+            withDirectives(createElementVNode("div", _hoisted_8, _hoisted_10, 512), [
+              [vShow, hasBanner.value && styleData.value.banner_theme_color]
+            ]),
+            createCommentVNode(" banner\u8C03\u8272\u677F "),
+            withDirectives(createVNode(_sfc_main$2, {
+              "style-data": styleData.value,
+              model: "banner",
+              onChange: colorChange
+            }, null, 8, ["style-data"]), [
+              [vShow, hasBanner.value]
+            ])
+          ]),
+          createCommentVNode(" pc\u5C01\u9762\u56FE\uFF08\u4E13\u9898\u5934\u56FE\u5171\u7528\u4E00\u4E2A\u5B57\u6BB5\uFF09 "),
+          createElementVNode("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_12, [
+              ["special", "special_v3"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_13, "\u4E13\u9898\u5934\u56FE")) : ["video_album", "audio_album"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_14, [
+                _hoisted_15,
+                createTextVNode("\u5C01\u9762\u5934\u56FE")
+              ])) : (openBlock(), createElementBlock("span", _hoisted_16, "PC\u5C01\u9762\u56FE")),
+              _hoisted_17
+            ]),
+            createVNode(_sfc_main$1, {
+              id: `pc-banner-card`,
+              data: pcBanner.value,
+              previewList: previewList.value,
+              thumbModel: "pcBanner",
+              onOpen: openDialogMediaSelection
+            }, null, 8, ["data", "previewList"]),
+            withDirectives(createElementVNode("div", _hoisted_18, _hoisted_20, 512), [
+              [vShow, docSeriesShowTopThemeColor.value && styleData.value.top_theme_color]
+            ]),
+            withDirectives(createVNode(_sfc_main$2, {
+              styleData: styleData.value,
+              model: "top",
+              onChange: colorChange
+            }, null, 8, ["styleData"]), [
+              [vShow, docSeriesShowTopThemeColor.value]
+            ])
+          ])
+        ], 64)) : createCommentVNode("v-if", true),
+        createVNode(_sfc_main$3, {
+          dialogVisible: dialogMediaSelectionShow.value,
+          "onUpdate:dialogVisible": _cache[2] || (_cache[2] = ($event) => dialogMediaSelectionShow.value = $event),
+          preview: false,
+          "catalog-props": "image",
+          ai_static_covers: _ctx.aiImages,
+          base_api: unref(BASE_API),
+          onSubmit: submitCallback
+        }, null, 8, ["dialogVisible", "ai_static_covers", "base_api"]),
+        createVNode(_sfc_main$4, {
+          visible: dialogCropperShow.value,
+          "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => dialogCropperShow.value = $event),
+          "aspect-ratio-prop": aspectRatioProp.value,
+          BASE_API: unref(BASE_API),
+          "corp-data": cropperData.value,
+          "generate-assets": false,
+          onConfirm: cropConfirm
+        }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectThumb/components/card.js

@@ -0,0 +1,86 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, Transition, withCtx, createElementVNode, withModifiers, createCommentVNode } from "vue";
+import { Image } from "@arco-design/web-vue";
+import { IconEdit, IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
+const _hoisted_1 = {
+  key: 0,
+  class: "img-v"
+};
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["onClick"];
+const _sfc_main = defineComponent({
+  ...{ name: "thumbCard" },
+  __name: "card",
+  props: {
+    data: {},
+    previewList: {},
+    thumbModel: {},
+    along: { type: Boolean },
+    model: {}
+  },
+  emits: ["open", "remove"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const classObj = computed(() => {
+      var _a;
+      if (!props.model)
+        return {};
+      return {
+        [`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
+      };
+    });
+    const clickMask = () => {
+      props.along && openDialogMediaSelection();
+    };
+    const openDialogMediaSelection = () => {
+      emit("open", props.thumbModel);
+    };
+    const remove = () => {
+      emit("remove");
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["thumb-card-container", classObj.value])
+      }, [
+        ((_a = props.data) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(unref(Image), {
+            class: "item",
+            fit: "cover",
+            src: (_b = props.data) == null ? void 0 : _b.url
+          }, null, 8, ["src"]),
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: "mask",
+                onClick: clickMask
+              }, [
+                createElementVNode("span", {
+                  class: "half",
+                  onClick: withModifiers(openDialogMediaSelection, ["stop"])
+                }, [
+                  createVNode(unref(IconEdit))
+                ], 8, _hoisted_2),
+                _ctx.along ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: "half",
+                  onClick: withModifiers(remove, ["stop"])
+                }, [
+                  createVNode(unref(IconDelete))
+                ], 8, _hoisted_3)) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 1
+          })
+        ])) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "item add-thumb",
+          onClick: withModifiers(openDialogMediaSelection, ["stop"])
+        }, [
+          createVNode(unref(IconPlus))
+        ], 8, _hoisted_4))
+      ], 2);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectThumb/components/colorPalette.js

@@ -0,0 +1,75 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode } from "vue";
+import { RadioGroup, Radio } from "@arco-design/web-vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "color-palette-container"
+};
+const _sfc_main = defineComponent({
+  __name: "colorPalette",
+  props: {
+    styleData: {},
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const color = ref("rgb(101,121,109)");
+    const colorList = ref([]);
+    watch(
+      () => props.styleData,
+      () => {
+        if (props.styleData) {
+          const _color = props.styleData[`${props.model}_theme_color`] || "";
+          color.value = colorRgb(_color);
+          const colorList2 = props.styleData.value[`${props.model}_colorList`];
+          if (colorList2 == null ? void 0 : colorList2.length) {
+            colorList2.value = colorList2.map((color2) => `rgb(${color2})`);
+          } else if (color.value) {
+            colorList2.value = [color.value];
+          }
+        }
+      }
+    );
+    const colorChange = (color2) => {
+      if (color2) {
+        color2.value = color2.replace(/\s+/g, "");
+        const styleData = JSON.parse(JSON.stringify(props.styleData));
+        styleData[`${props.model}_theme_color`] = color2.value;
+        emit("change", styleData);
+      }
+    };
+    const colorRgb = (_color) => {
+      if (_color.includes("rgb")) {
+        return _color;
+      }
+      const colorChange2 = [];
+      for (let i = 1; i < 7; i += 2) {
+        colorChange2.push(parseInt(`0x${_color.slice(i, i + 2)}`, 10) || 0);
+      }
+      return `rgb(${colorChange2.join(",")})`;
+    };
+    return (_ctx, _cache) => {
+      return colorList.value && colorList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(RadioGroup), {
+          modelValue: color.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
+          class: "color-radio-group",
+          type: "button",
+          onChange: colorChange
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (colr, index) => {
+              return openBlock(), createBlock(unref(Radio), {
+                key: index,
+                style: normalizeStyle({ background: `${colr}` }),
+                value: colr
+              }, null, 8, ["style", "value"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectThumb/index.d.ts

@@ -0,0 +1,2 @@
+declare const selectThumb: any;
+export default selectThumb;

package/es/selectThumb/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const selectThumb = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { selectThumb as default };

package/es/selectThumb/style/card.less

@@ -0,0 +1,79 @@
+.thumb-card-container {
+    width: 100px;
+    height: 58px;
+    margin-right: 10px;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+    &.model-5 {
+      width: 75px;
+      height: 100px;
+    }
+    &.model-7 {
+      width: 232px;
+      height: 58px;
+    }
+    .img-v {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .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;
+      }
+    }
+    .item {
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      &.add-thumb {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f9f9f9;
+      }
+    }
+    .mask {
+      display: none;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.3);
+      position: absolute;
+      top: 0;
+      // display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #eaeaea;
+      font-size: 18px;
+      i {
+        display: inline-block;
+        cursor: pointer;
+        &:active {
+          opacity: 0.4;
+        }
+      }
+      .half {
+        height: 100%;
+        width: 48%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+    .img-v:hover .mask {
+      display: flex;
+    }
+  }

package/es/selectThumb/style/css.js

@@ -0,0 +1 @@
+import "./index.css";