@cmstops/pro-compo 0.3.30 → 0.3.32

package/lib/selectThumb/components/card.js

@@ -3,7 +3,12 @@ var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
 var config = require("../../config.js");
-const _hoisted_1 = {
+const _hoisted_1 = { class: "thumb-card-container-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "img-v"
+};
+const _hoisted_3 = {
   key: 0,
   class: "img-v"
 };
@@ -17,7 +22,8 @@ const _sfc_main = vue.defineComponent({
     parentRef: {},
     idx: {},
     along: { type: Boolean },
-    model: {}
+    model: {},
+    isPopover: { type: Boolean }
   },
   emits: [
     "open",
@@ -63,64 +69,110 @@ const _sfc_main = vue.defineComponent({
       emit("remove");
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Popover), {
-        trigger: "hover",
-        position: "bottom",
-        "popup-container": props.parentRef
-      }, {
-        content: vue.withCtx(() => [
-          vue.createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
-          vue.createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
-        ]),
-        default: vue.withCtx(() => {
-          var _a;
-          return [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["thumb-card-container", classObj.value])
-            }, [
-              ((_a = props.data) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-                vue.createVNode(vue.unref(webVue.Image), {
-                  class: "item",
-                  fit: "cover",
-                  src: props.data.url,
-                  "show-loader": ""
-                }, null, 8, ["src"]),
-                vue.createVNode(vue.Transition, { name: "fade" }, {
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", {
-                      class: "mask",
-                      onClick: clickMask
-                    }, [
-                      vue.createElementVNode("span", {
-                        class: "half",
-                        onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
-                      }, [
-                        vue.createVNode(vue.unref(icon.IconEdit))
-                      ]),
-                      _ctx.along ? (vue.openBlock(), vue.createElementBlock("span", {
-                        key: 0,
-                        class: "half",
-                        onClick: vue.withModifiers(remove, ["stop"])
+      var _a;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        _ctx.isPopover ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Popover), {
+          key: 0,
+          trigger: "hover",
+          position: "bottom",
+          "popup-container": props.parentRef
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
+            vue.createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
+          ]),
+          default: vue.withCtx(() => {
+            var _a2;
+            return [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["thumb-card-container", classObj.value])
+              }, [
+                ((_a2 = props.data) == null ? void 0 : _a2.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                  vue.createVNode(vue.unref(webVue.Image), {
+                    class: "item",
+                    fit: "cover",
+                    src: props.data.url,
+                    "show-loader": ""
+                  }, null, 8, ["src"]),
+                  vue.createVNode(vue.Transition, { name: "fade" }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", {
+                        class: "mask",
+                        onClick: clickMask
                       }, [
-                        vue.createVNode(vue.unref(icon.IconDelete))
-                      ])) : vue.createCommentVNode("v-if", true)
-                    ])
+                        vue.createElementVNode("span", {
+                          class: "half",
+                          onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
+                        }, [
+                          vue.createVNode(vue.unref(icon.IconEdit))
+                        ]),
+                        _ctx.along ? (vue.openBlock(), vue.createElementBlock("span", {
+                          key: 0,
+                          class: "half",
+                          onClick: vue.withModifiers(remove, ["stop"])
+                        }, [
+                          vue.createVNode(vue.unref(icon.IconDelete))
+                        ])) : vue.createCommentVNode("v-if", true)
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ])) : (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  class: "item add-thumb",
+                  style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` }),
+                  onClick: openDialogMediaSelection
+                }, [
+                  vue.createVNode(vue.unref(icon.IconPlus))
+                ], 4))
+              ], 2)
+            ];
+          }),
+          _: 1
+        }, 8, ["popup-container"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["thumb-card-container", classObj.value])
+        }, [
+          ((_a = props.data) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.createVNode(vue.unref(webVue.Image), {
+              class: "item",
+              fit: "cover",
+              src: props.data.url,
+              "show-loader": ""
+            }, null, 8, ["src"]),
+            vue.createVNode(vue.Transition, { name: "fade" }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: "mask",
+                  onClick: clickMask
+                }, [
+                  vue.createElementVNode("span", {
+                    class: "half",
+                    onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
+                  }, [
+                    vue.createVNode(vue.unref(icon.IconEdit))
                   ]),
-                  _: 1
-                })
-              ])) : (vue.openBlock(), vue.createElementBlock("div", {
-                key: 1,
-                class: "item add-thumb",
-                style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` }),
-                onClick: openDialogMediaSelection
-              }, [
-                vue.createVNode(vue.unref(icon.IconPlus))
-              ], 4))
-            ], 2)
-          ];
-        }),
-        _: 1
-      }, 8, ["popup-container"]);
+                  _ctx.along ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 0,
+                    class: "half",
+                    onClick: vue.withModifiers(remove, ["stop"])
+                  }, [
+                    vue.createVNode(vue.unref(icon.IconDelete))
+                  ])) : vue.createCommentVNode("v-if", true)
+                ])
+              ]),
+              _: 1
+            })
+          ])) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "item add-thumb",
+            style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` }),
+            onClick: openDialogMediaSelection
+          }, [
+            vue.createVNode(vue.unref(icon.IconPlus))
+          ], 4))
+        ], 2))
+      ]);
     };
   }
 });

package/lib/thumbCard/component.js

@@ -0,0 +1,115 @@
+"use strict";
+var vue = require("vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var vueCmstopIcons = require("@arco-iconbox/vue-cmstop-icons");
+var webVue = require("@arco-design/web-vue");
+var config = require("../config.js");
+const _hoisted_1 = { class: "thumb-add" };
+const _hoisted_2 = { class: "thumb-handler-list" };
+const _hoisted_3 = ["onClick"];
+const _sfc_main = vue.defineComponent({
+  ...{ name: "thumbCard" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    url: {},
+    thumb: {},
+    isEdit: { type: Boolean },
+    options: {},
+    meta: {},
+    catalog: {},
+    handlersKey: {}
+  },
+  emits: ["handle", "edit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const WATER_BG_URL = `${BASE_API}/static/images/waterBg.png`;
+    const thumb = vue.computed(() => {
+      return props.thumb || props.url || "";
+    });
+    const styleObject = vue.computed(() => ({
+      backgroundImage: `url(${WATER_BG_URL})`
+    }));
+    const aImageAttr = vue.computed(() => {
+      return {
+        fit: "contain",
+        preview: false,
+        width: "100%",
+        height: "100%",
+        ...props.options
+      };
+    });
+    function handleOption(key) {
+      emits("handle", { key, item: props.meta });
+    }
+    function handleEdit(key) {
+      emits("edit", { key });
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "thumb-select-wrapper",
+        style: vue.normalizeStyle(styleObject.value)
+      }, [
+        _ctx.isEdit && !_ctx.url ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Dropdown), {
+          key: 0,
+          trigger: "click",
+          onSelect: handleEdit
+        }, {
+          content: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Doption), { value: "resource" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(vueCmstopIcons.IconResource)),
+                vue.createTextVNode(" \u7D20\u6750\u5E93\u9009\u62E9 ")
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(webVue.Doption), { value: "local" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(vueCmstopIcons.IconComputer)),
+                vue.createTextVNode(" \u672C\u5730\u4E0A\u4F20 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createVNode(vue.unref(icon.IconPlus))
+            ])
+          ]),
+          _: 1
+        })) : _ctx.catalog && _ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          vue.createCommentVNode(" \u56FE\u7247 "),
+          _ctx.catalog === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), vue.mergeProps({
+            key: 0,
+            class: "thumb-image",
+            src: thumb.value
+          }, aImageAttr.value), null, 16, ["src"])) : _ctx.catalog === "video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.createCommentVNode(" \u89C6\u9891 "),
+            vue.createVNode(vue.unref(webVue.Image), vue.mergeProps({
+              class: "thumb-image",
+              src: thumb.value
+            }, aImageAttr.value), null, 16, ["src"])
+          ], 64)) : _ctx.catalog === "audio" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            vue.createCommentVNode(" \u97F3\u9891 "),
+            vue.createTextVNode(" \u97F3\u9891 ")
+          ], 64)) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
+          vue.createElementVNode("div", _hoisted_2, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.handlersKey, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.key,
+                class: "handler-item",
+                onClick: () => handleOption(item.key)
+              }, vue.toDisplayString(item.label), 9, _hoisted_3);
+            }), 128))
+          ])
+        ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          vue.createTextVNode(" \u7F3A\u7701\u56FE ")
+        ], 64))
+      ], 4);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/thumbCard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const thumbCard = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = thumbCard;

package/lib/thumbCard/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/thumbCard/style/index.css

@@ -0,0 +1,53 @@
+.thumb-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-add {
+  color: var(--color-text-2);
+  font-size: 16px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-image img {
+  width: 100%;
+  height: 100%;
+}
+.thumb-select-wrapper .thumb-handler-list {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+.thumb-select-wrapper .thumb-handler-list .handler-item {
+  padding: 0 8px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 26px;
+  background-color: #000000b3;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.thumb-select-wrapper .thumb-handler-list .handler-item:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+.thumb-select-wrapper:hover .thumb-handler-list {
+  opacity: 1;
+}
+.arco-dropdown-option-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+}

package/lib/thumbCard/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");

package/lib/thumbCard/style/index.less

@@ -0,0 +1,70 @@
+.thumb-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // 高度宽度不在这里定义，根据具体的业务场景去处理，更灵活
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 2px;
+  cursor: pointer;
+
+  // 添加模式
+  .thumb-add {
+    color: var(--color-text-2);
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  // 样式
+  .thumb-image {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // 扩展按钮
+  .thumb-handler-list {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+
+    .handler-item {
+      padding: 0 8px;
+      color: #fff;
+      font-size: 12px;
+      line-height: 26px;
+      // 50%透明度
+      background-color: #000000b3;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+  }
+
+  &:hover {
+    .thumb-handler-list {
+      opacity: 1;
+    }
+  }
+}
+
+// 素材选择
+.arco-dropdown-option-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+}

package/lib/utils/typeMap.js

@@ -1,6 +1,9 @@
 "use strict";
 var _a, _b, _c;
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+function object2LabelList(object) {
+  return Object.keys(object).map((key) => ({ value: key, label: object[key] }));
+}
 const mpName = ((_c = (_b = (_a = window.situoyun) == null ? void 0 : _a.config) == null ? void 0 : _b.oem_config) == null ? void 0 : _c.mp_name) || "\u516C\u4F17\u53F7";
 const key_target_type_map = {
   3: "doc",
@@ -160,6 +163,23 @@ const matrixPublishFormalStateMap = {
   12: "\u672A\u77E5",
   13: "\u79C1\u5BC6"
 };
+const RESOURCE_SOURCE_DICT = {
+  ai: "AI \u751F\u6210",
+  live_rec: "\u76F4\u64AD\u6536\u5F55",
+  backend: "\u540E\u53F0\u4E0A\u4F20"
+};
+const RESOURCE_CATALOG_DICT = {
+  image: "\u56FE\u7247",
+  video: "\u89C6\u9891",
+  audio: "\u97F3\u9891",
+  other: "\u5176\u4ED6"
+};
+const RESOURCE_SOURCE_OPTIONS = object2LabelList(RESOURCE_SOURCE_DICT);
+const RESOURCE_CATALOG_OPTIONS = object2LabelList(RESOURCE_CATALOG_DICT);
+exports.RESOURCE_CATALOG_DICT = RESOURCE_CATALOG_DICT;
+exports.RESOURCE_CATALOG_OPTIONS = RESOURCE_CATALOG_OPTIONS;
+exports.RESOURCE_SOURCE_DICT = RESOURCE_SOURCE_DICT;
+exports.RESOURCE_SOURCE_OPTIONS = RESOURCE_SOURCE_OPTIONS;
 exports.approveFlowStatusMap = approveFlowStatusMap;
 exports.calcApprovingDependent = calcApprovingDependent;
 exports.calcApprovingUser = calcApprovingUser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.30",
+  "version": "0.3.32",
   "description": "",
   "keywords": [
     "vue",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
-    "@arco-iconbox/vue-cmstop-icons": "^0.0.24",
+    "@arco-iconbox/vue-cmstop-icons": "^0.0.29",
     "@babel/core": "^7.14.6",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",