@cmstops/pro-compo 0.3.18 → 0.3.19

package/es/mediaGridList/component.js

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

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

@@ -0,0 +1,127 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode, normalizeClass, createVNode, Transition, withCtx, withModifiers, unref, createBlock } from "vue";
+import { Divider } from "@arco-design/web-vue";
+import { IconEye, IconPlus } from "@arco-design/web-vue/es/icon";
+import _sfc_main$1 from "../../../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 = defineComponent({
+  __name: "index",
+  props: {
+    itemData: {},
+    preview: { type: Boolean }
+  },
+  emits: ["confirm"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = ref(false);
+    const previewType = computed(() => props.itemData.catalog);
+    const previewUrl = computed(() => props.itemData.url || "");
+    const openPreview = () => visible.value = true;
+    const closePreviewer = (val) => visible.value = val;
+    const add = () => {
+      emit("confirm", props.itemData);
+    };
+    const getRate = 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 openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          _ctx.itemData.thumb ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "pic",
+            style: normalizeStyle({ "background-image": "url(" + _ctx.itemData.thumb + ")" })
+          }, [
+            getRate.value ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(getRate.value), 1)) : createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (openBlock(), createElementBlock("div", _hoisted_3, "AI\u751F\u6210")) : createCommentVNode("v-if", true)
+          ], 4)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["pic", `${_ctx.itemData.catalog} ${_ctx.itemData.series}`])
+          }, [
+            getRate.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(getRate.value), 1)) : createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (openBlock(), createElementBlock("div", _hoisted_5, "AI\u751F\u6210")) : createCommentVNode("v-if", true)
+          ], 2)),
+          createVNode(Transition, { name: "el-fade-in" }, {
+            default: withCtx(() => [
+              _ctx.preview ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                createElementVNode("span", {
+                  class: "half",
+                  onClick: withModifiers(openPreview, ["stop"])
+                }, [
+                  createVNode(unref(IconEye), {
+                    "stroke-width": 6,
+                    size: 20
+                  })
+                ]),
+                createVNode(unref(Divider), { direction: "vertical" }),
+                createElementVNode("span", {
+                  class: "half",
+                  onClick: withModifiers(add, ["stop"])
+                }, [
+                  createVNode(unref(IconPlus), {
+                    "stroke-width": 6,
+                    size: 20
+                  })
+                ])
+              ])) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: "transparent",
+                onClick: withModifiers(add, ["stop"])
+              }))
+            ]),
+            _: 1
+          })
+        ]),
+        visible.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          type: previewType.value,
+          url: previewUrl.value,
+          onClose: closePreviewer
+        }, null, 8, ["type", "url"])) : createCommentVNode("v-if", true)
+      ], 64);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/mediaGridList/index.d.ts

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

package/es/mediaGridList/index.js

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

package/es/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/es/mediaGridList/style/css.js

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