@cmstops/pro-compo 0.3.17 → 0.3.19

package/lib/index.js

@@ -22,6 +22,8 @@ var index$h = require("./editMetaInfo/index.js");
 var index$i = require("./baseFilter/index.js");
 var index$j = require("./dataTags/index.js");
 var index$k = require("./colorPalette/index.js");
+var index$l = require("./mediaGridList/index.js");
+var index$m = require("./mediaView/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -44,3 +46,5 @@ exports.editMetaInfo = index$h;
 exports.baseFilter = index$i;
 exports.dataTags = index$j;
 exports.colorPalette = index$k;
+exports.mediaGridList = index$l;
+exports.mediaView = index$m;

package/lib/index.less

@@ -20,3 +20,5 @@
 @import './baseFilter/style/index.less';
 @import './dataTags/style/index.less';
 @import './colorPalette/style/index.less';
+@import './mediaGridList/style/index.less';
+@import './mediaView/style/index.less';

package/lib/mediaGridList/component.js

@@ -0,0 +1,223 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var vueCmstopIcons = require("@arco-iconbox/vue-cmstop-icons");
+var component = require("../typeIcons/component.js");
+var index = require("./components/FileTypeThumb/index.js");
+var filter = require("../utils/filter.js");
+const _hoisted_1 = { class: "file-wrap" };
+const _hoisted_2 = {
+  key: 0,
+  class: "folder-list clearfix"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "wrap" };
+const _hoisted_5 = { class: "thumb" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "wrap" };
+const _hoisted_8 = { class: "thumb" };
+const _hoisted_9 = { class: "folder-more-wrap" };
+const _hoisted_10 = { class: "file-list clearfix" };
+const _hoisted_11 = { class: "thumb-wrap" };
+const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
+  /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-progress" }, "\u8F6C\u7801\u4E2D\u2026")
+], -1);
+const _hoisted_13 = {
+  key: 1,
+  class: "load_more_title"
+};
+const _hoisted_14 = {
+  key: 1,
+  class: "nomore_tips"
+};
+const _hoisted_15 = {
+  key: 2,
+  class: "null-file"
+};
+const _hoisted_16 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
+const _hoisted_17 = [
+  _hoisted_16
+];
+const _sfc_main = vue.defineComponent({
+  ...{ name: "mediaGridList" },
+  __name: "component",
+  props: {
+    folderList: {},
+    fileList: {},
+    fileListCount: {},
+    isOver: { type: Boolean },
+    showFolder: { type: Boolean },
+    preview: { type: Boolean },
+    changeDirectory: { type: Function },
+    loadFileMore: { type: Function }
+  },
+  emits: ["confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const isFold = vue.ref(true);
+    vue.watch(
+      () => {
+        var _a;
+        return (_a = props.folderList) == null ? void 0 : _a.length;
+      },
+      (n) => {
+        isFold.value = n > 10;
+      },
+      { immediate: true }
+    );
+    const emit = __emit;
+    const confirm = (itemData) => {
+      selectedData.value = [itemData];
+      emit("confirm", selectedData.value);
+    };
+    const selectedData = vue.ref([]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Scrollbar), { class: "media-grid-list-scroll" }, {
+        default: vue.withCtx(() => {
+          var _a, _b, _c, _d, _e;
+          return [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createCommentVNode(" \u6587\u4EF6\u5939 "),
+              _ctx.folderList ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                vue.createCommentVNode(" \u6587\u4EF6\u5939\u6570\u91CF<10 "),
+                !isFold.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.folderList, (item, index2) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: index2,
+                    class: "item folder-item",
+                    onClick: ($event) => _ctx.changeDirectory(item)
+                  }, [
+                    vue.createElementVNode("div", _hoisted_4, [
+                      vue.createVNode(vue.unref(webVue.Tooltip), {
+                        content: item.alias,
+                        "open-delay": 500,
+                        class: "item",
+                        effect: "dark",
+                        placement: "top"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode("div", _hoisted_5, [
+                            vue.createElementVNode("h4", null, vue.toDisplayString(item.alias), 1)
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["content"])
+                    ])
+                  ], 8, _hoisted_3);
+                }), 128)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                  vue.createCommentVNode(" \u6587\u4EF6\u5939\u6570\u91CF>10 "),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.folderList) == null ? void 0 : _a.slice(0, 9), (item, index2) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: index2,
+                      class: "item folder-item",
+                      onClick: ($event) => _ctx.changeDirectory(item)
+                    }, [
+                      vue.createElementVNode("div", _hoisted_7, [
+                        vue.createVNode(vue.unref(webVue.Tooltip), {
+                          content: item.alias,
+                          "open-delay": 500,
+                          class: "item",
+                          effect: "dark",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createElementVNode("div", _hoisted_8, [
+                              vue.createElementVNode("h4", null, vue.toDisplayString(item.alias), 1)
+                            ])
+                          ]),
+                          _: 2
+                        }, 1032, ["content"])
+                      ])
+                    ], 8, _hoisted_6);
+                  }), 128))
+                ], 64)),
+                ((_b = _ctx.folderList) == null ? void 0 : _b.length) > 10 ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 2,
+                  class: "folder-more-button",
+                  onClick: _cache[0] || (_cache[0] = ($event) => isFold.value = !isFold.value)
+                }, [
+                  vue.createElementVNode("div", _hoisted_9, [
+                    isFold.value ? (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconDoubleDown), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconDoubleUp), { key: 1 })),
+                    vue.createTextVNode(" " + vue.toDisplayString(isFold.value ? "\u5C55\u5F00\u5168\u90E8" : "\u6536\u7F29\u5168\u90E8"), 1)
+                  ])
+                ])) : vue.createCommentVNode("v-if", true)
+              ], 512)), [
+                [vue.vShow, ((_c = _ctx.folderList) == null ? void 0 : _c.length) !== 0 && _ctx.showFolder]
+              ]) : vue.createCommentVNode("v-if", true),
+              vue.createCommentVNode(" \u6587\u4EF6 "),
+              vue.createElementVNode("div", _hoisted_10, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.fileList, (item, index$1) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: index$1,
+                    class: "item"
+                  }, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"])
+                    }, [
+                      vue.createElementVNode("div", _hoisted_11, [
+                        vue.createVNode(index, {
+                          "item-data": item,
+                          preview: _ctx.preview,
+                          onConfirm: confirm
+                        }, null, 8, ["item-data", "preview"])
+                      ]),
+                      vue.createElementVNode("h4", null, [
+                        vue.createVNode(component, {
+                          doc: item.catalog !== "image",
+                          resource: item.catalog === "image",
+                          type: item.catalog,
+                          class: "icon"
+                        }, null, 8, ["doc", "resource", "type"]),
+                        vue.createVNode(vue.unref(webVue.Tooltip), {
+                          content: item.alias,
+                          "open-delay": 500,
+                          effect: "dark",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createElementVNode("span", null, vue.toDisplayString(item.alias), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["content"])
+                      ]),
+                      vue.createElementVNode("p", null, vue.toDisplayString(vue.unref(filter.timeFormat)(item.updated_at)), 1),
+                      vue.createCommentVNode(" \u89C6\u9891\u8F6C\u7801\u8FDB\u5EA6 "),
+                      item.task ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Tooltip), {
+                        key: 0,
+                        "open-delay": 2e3,
+                        content: "\u8F6C\u7801\u4E2D\uFF0C\u6682\u4E0D\u53EF\u7528",
+                        effect: "dark",
+                        placement: "bottom"
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_12
+                        ]),
+                        _: 1
+                      })) : vue.createCommentVNode("v-if", true)
+                    ], 2)
+                  ]);
+                }), 128))
+              ]),
+              _ctx.fileListCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+                !_ctx.isOver ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Button), {
+                  key: 0,
+                  class: "loadmore_tips",
+                  size: "small",
+                  type: "text",
+                  onClick: _ctx.loadFileMore
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode("\u52A0\u8F7D\u66F4\u591A\u2026 ")
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
+              ])) : vue.createCommentVNode("v-if", true),
+              !((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, _hoisted_17)) : vue.createCommentVNode("v-if", true)
+            ])
+          ];
+        }),
+        _: 1
+      });
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/mediaGridList/components/FileTypeThumb/index.js

@@ -0,0 +1,128 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var component = require("../../../mediaView/component.js");
+const _hoisted_1 = { class: "file-type-thumb" };
+const _hoisted_2 = {
+  key: 0,
+  class: "rate-info-tag tag"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "ai-tag tag"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "rate-info-tag tag"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ai-tag tag"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "mask"
+};
+const _sfc_main = vue.defineComponent({
+  __name: "index",
+  props: {
+    itemData: {},
+    preview: { type: Boolean }
+  },
+  emits: ["confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = vue.ref(false);
+    const previewType = vue.computed(() => props.itemData.catalog);
+    const previewUrl = vue.computed(() => props.itemData.url || "");
+    const openPreview = () => visible.value = true;
+    const closePreviewer = (val) => visible.value = val;
+    const add = () => {
+      emit("confirm", props.itemData);
+    };
+    const getRate = vue.computed(() => {
+      if (!props.itemData.metas)
+        return "";
+      const { metas } = props.itemData;
+      let width = 0;
+      let height = 0;
+      metas.forEach((item) => {
+        if (item.key === "width") {
+          width = typeof item.value === "string" ? parseInt(item.value, 10) : item.value;
+        }
+        if (item.key === "height") {
+          height = typeof item.value === "string" ? parseInt(item.value, 10) : item.value;
+        }
+      });
+      const rate = (width / height).toFixed(1);
+      if (rate === (16 / 9).toFixed(1))
+        return "16:9";
+      if (rate === (4 / 3).toFixed(1))
+        return "4:3";
+      if (rate === (4 / 1).toFixed(1))
+        return "4:1";
+      if (rate === (3 / 4).toFixed(1))
+        return "3:4";
+      return "\u5176\u4ED6";
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          _ctx.itemData.thumb ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "pic",
+            style: vue.normalizeStyle({ "background-image": "url(" + _ctx.itemData.thumb + ")" })
+          }, [
+            getRate.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(getRate.value), 1)) : vue.createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, "AI\u751F\u6210")) : vue.createCommentVNode("v-if", true)
+          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: vue.normalizeClass(["pic", `${_ctx.itemData.catalog} ${_ctx.itemData.series}`])
+          }, [
+            getRate.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(getRate.value), 1)) : vue.createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, "AI\u751F\u6210")) : vue.createCommentVNode("v-if", true)
+          ], 2)),
+          vue.createVNode(vue.Transition, { name: "el-fade-in" }, {
+            default: vue.withCtx(() => [
+              _ctx.preview ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                vue.createElementVNode("span", {
+                  class: "half",
+                  onClick: vue.withModifiers(openPreview, ["stop"])
+                }, [
+                  vue.createVNode(vue.unref(icon.IconEye), {
+                    "stroke-width": 6,
+                    size: 20
+                  })
+                ]),
+                vue.createVNode(vue.unref(webVue.Divider), { direction: "vertical" }),
+                vue.createElementVNode("span", {
+                  class: "half",
+                  onClick: vue.withModifiers(add, ["stop"])
+                }, [
+                  vue.createVNode(vue.unref(icon.IconPlus), {
+                    "stroke-width": 6,
+                    size: 20
+                  })
+                ])
+              ])) : (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "transparent",
+                onClick: vue.withModifiers(add, ["stop"])
+              }))
+            ]),
+            _: 1
+          })
+        ]),
+        visible.value ? (vue.openBlock(), vue.createBlock(component, {
+          key: 0,
+          type: previewType.value,
+          url: previewUrl.value,
+          onClose: closePreviewer
+        }, null, 8, ["type", "url"])) : vue.createCommentVNode("v-if", true)
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/mediaGridList/index.js

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

package/lib/mediaGridList/style/FileTypeThumb.less

@@ -0,0 +1,204 @@
+.file-type-thumb {
+  position: relative;
+  width: 100%;
+
+  &:hover .mask {
+    display: flex;
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: #eaeaea;
+    font-size: 18px;
+    background: rgba(0, 0, 0, 0.3);
+
+    i {
+      display: inline-block;
+      cursor: pointer;
+
+      &:active {
+        opacity: 0.4;
+      }
+    }
+
+    .half {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48%;
+      height: 100%;
+
+      &:hover {
+        cursor: pointer;
+        opacity: 0.7;
+      }
+    }
+
+    .el-divider {
+      margin: 0;
+      opacity: 0.4;
+    }
+  }
+
+  .transparent {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .tag {
+    position: absolute;
+    top: 8px;
+    left: 5px;
+    padding: 2px 8px;
+    color: white;
+    font-size: 12px;
+    background-color: rgba(#000, #000, #000, 0.4);
+    border-radius: 12px;
+  }
+
+  .rate-info-tag {
+    top: 8px;
+    left: 5px;
+  }
+
+  .ai-tag {
+    top: 8px;
+    right: 5px;
+  }
+
+  .pic {
+    width: 100%;
+    padding-top: 56.25%;
+    background-color: #fff;
+    background-image: url('../../assets/images/unknown.png');
+    background-repeat: no-repeat;
+    background-repeat: repeat-x;
+    background-position: top;
+    background-size: cover;
+
+    &:hover {
+      transform: scale(1.02);
+      transition: ease-out 0.4s;
+    }
+  }
+
+  .audio {
+    background-image: url('../../assets/images/music.png') !important;
+
+    &.doc {
+      background-image: url('../../assets/images/draf.png') !important;
+    }
+  }
+
+  .project {
+    background-image: url('../../assets/images/project1.png') !important;
+  }
+
+  .doc {
+    background-image: url('../../assets/images/draf.png');
+  }
+
+  .link {
+    background-image: url('../../assets/images/link.png');
+  }
+
+  .sp_topic {
+    background-image: url('../../assets/images/link.png');
+  }
+
+  .live {
+    background-image: url('../../assets/images/live.png');
+  }
+
+  .pdf {
+    background-image: url('../../assets/images/pdf.png') !important;
+  }
+
+  .officeexcel {
+    background-image: url('../../assets/images/excel.png') !important;
+  }
+
+  .officeppt {
+    background-image: url('../../assets/images/ppt.png') !important;
+  }
+
+  .zip {
+    background-image: url('../../assets/images/zip.png') !important;
+  }
+
+  .rar {
+    background-image: url('../../assets/images/rar.png') !important;
+  }
+
+  .txt {
+    background-image: url('../../assets/images/txt.png') !important;
+  }
+
+  .exe {
+    background-image: url('../../assets/images/exe.png') !important;
+  }
+
+  .html {
+    background-image: url('../../assets/images/html.png') !important;
+  }
+
+  .officedoc {
+    background-image: url('../../assets/images/word.png') !important;
+  }
+
+  .wechat {
+    background-image: url('../../assets/images/wechat.png') !important;
+  }
+
+  .h5 {
+    background-image: url('../../assets/images/h5.png') !important;
+  }
+
+  .ad {
+    background-image: url('../../assets/images/ad.png') !important;
+  }
+
+  .booklink {
+    background-image: url('../../assets/images/booklink.png') !important;
+  }
+
+  .activity {
+    background-image: url('../../assets/images/activity.png') !important;
+  }
+
+  .svideo {
+    background-image: url('../../assets/images/svideo.png') !important;
+  }
+
+  .cloud_lottery {
+    background-image: url('../../assets/images/cloud_lottery.png') !important;
+  }
+
+  .cloud_form {
+    background-image: url('../../assets/images/cloud_form.png') !important;
+  }
+
+  .illegal-media-warning {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.65);
+    background-image: url('../../assets/images/unknown.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
+  }
+}

package/lib/mediaGridList/style/css.js

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