@cmstops/pro-compo 0.3.31 → 0.3.33

package/lib/selectResourceModal/style/listSelected.less

@@ -0,0 +1,67 @@
+.list-panel-wrapper {
+  * {
+    user-select: none;
+
+    &::selection {
+      display: none;
+    }
+  }
+
+  width: 420px;
+  max-height: 600px;
+  padding: 0 !important;
+  overflow: hidden;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+
+  .arco-popover-content {
+    margin-top: 0;
+  }
+
+  .list-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 11px 15px;
+    color: white;
+    font-weight: 500;
+    background-color: #165dff;
+
+    .header-options {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      div {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .list-selected-record {
+    display: flex;
+    flex-direction: column;
+
+    .list-selected-item {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      padding: 9px 16px;
+      overflow: hidden;
+
+      .item-thumb {
+        width: 50px;
+        height: 38px;
+        overflow: hidden;
+      }
+
+      .item-alias {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

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.31",
+  "version": "0.3.33",
   "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",