@cmstops/pro-compo 0.1.8 → 0.1.9

package/es/resourceModal/components/MediaSelection/index.js

@@ -0,0 +1,272 @@
+import { defineComponent, ref, onMounted, computed, openBlock, createElementBlock, createElementVNode, createCommentVNode, createVNode, unref, withCtx, createBlock, normalizeStyle, withDirectives, Fragment, renderList, createTextVNode, toDisplayString, vShow } from "vue";
+import { Tabs, TabPane, Button, Breadcrumb, BreadcrumbItem } from "@arco-design/web-vue";
+import { IconArrowLeft } from "@arco-design/web-vue/es/icon";
+import { getAttachmentsAll, getAttachmentsMy, getDirectories } from "../../script/api.js";
+import _sfc_main$1 from "./DocAiMediaSelected/index.js";
+import _sfc_main$2 from "./ToolbarSearch/index.js";
+import _sfc_main$3 from "./MainContent/index.js";
+const _hoisted_1 = {
+  class: "media-selection",
+  unselectable: "on"
+};
+const _hoisted_2 = { class: "media-selection-section" };
+const _hoisted_3 = { class: "components-title" };
+const _hoisted_4 = { class: "simple-resources" };
+const _hoisted_5 = { class: "directory-breadcrumb" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    selectedMax: {},
+    base_api: {},
+    catalogProps: {},
+    preview: { type: Boolean },
+    addType: {},
+    ai_static_covers: {},
+    ai_gif_covers: {}
+  },
+  emits: ["add"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const add = (itemData) => {
+      emit("add", itemData);
+    };
+    const breadCrumbs = ref([
+      { directory_id: 0, alias: "\u6839\u76EE\u5F55" }
+    ]);
+    const folderList = ref([]);
+    const fileList = ref([]);
+    const fileListCount = ref(0);
+    const getFilesQueryParam = ref({
+      directory_id: 0,
+      limit: 30,
+      offset: 0,
+      catalog: ""
+    });
+    const filter = ref(null);
+    const activeMediaType = ref(
+      props.ai_static_covers && props.ai_static_covers.length ? "ai" : "all"
+    );
+    const api = ref({ getAttachmentsAll, getAttachmentsMy });
+    const currentDirectory = ref({
+      directory_id: 0,
+      alias: ""
+    });
+    const isOver = ref(false);
+    const getMoreData = ref();
+    onMounted(() => {
+      if (props.catalogProps && props.catalogProps !== "all") {
+        getFilesQueryParam.value.catalog = props.catalogProps;
+      }
+      loadData();
+    });
+    const resourcesHeight = computed(() => {
+      var _a, _b;
+      if (((_a = filter.value) == null ? void 0 : _a.keyword) && breadCrumbs.value.length > 1)
+        return "calc(100% - 194px)";
+      if ((_b = filter.value) == null ? void 0 : _b.keyword)
+        return "calc(100% - 150px)";
+      if (breadCrumbs.value.length > 1)
+        return "calc(100% - 146px)";
+      if (activeMediaType.value !== "ai")
+        return "calc(100% - 102px)";
+      return "calc(100% - 40px)";
+    });
+    const resetQuery = (item) => {
+      filter.value = null;
+      getMoreData.value.reset();
+      getFilesQueryParam.value.directory_id = item ? item[breadCrumbs.value.length - 2].directory_id : 0;
+      getFilesQueryParam.value.offset = 0;
+    };
+    const MediaTypeChange = (e) => {
+      activeMediaType.value = e;
+      resetQuery();
+      loadData();
+      breadCrumbs.value = [{ directory_id: 0, alias: "\u6839\u76EE\u5F55" }];
+    };
+    const changeDirectory = (item) => {
+      getFilesQueryParam.value.directory_id = item.id;
+      getFilesQueryParam.value.offset = 0;
+      currentDirectory.value = { alias: item.alias, directory_id: item.id };
+      filter.value = null;
+      loadData({ toDir: true });
+    };
+    const returnAny = (item) => {
+      getFilesQueryParam.value.directory_id = item.directory_id;
+      getFilesQueryParam.value.offset = 0;
+      currentDirectory.value = {
+        alias: item.alias,
+        directory_id: item.directory_id
+      };
+      let curIndex = 0;
+      breadCrumbs.value.forEach((cur, index) => {
+        if (item.directory_id === cur.directory_id)
+          curIndex = index;
+      });
+      breadCrumbs.value = breadCrumbs.value.slice(0, curIndex + 1);
+      filter.value = null;
+      loadData();
+    };
+    const goBackDirectory = () => {
+      resetQuery(breadCrumbs.value);
+      loadData({ goBack: true });
+    };
+    const loadData = (params) => {
+      isOver.value = false;
+      const API = activeMediaType.value === "all" ? api.value.getAttachmentsAll : api.value.getAttachmentsMy;
+      let query = { ...getFilesQueryParam.value };
+      if (filter.value) {
+        query = Object.assign(query, filter.value);
+        folderList.value = [];
+      }
+      const promise = filter.value ? [API(props.base_api, query)] : [
+        API(props.base_api, query),
+        getDirectories(props.base_api, { parent_id: query.directory_id })
+      ];
+      Promise.all(promise).then((res) => {
+        const files = res[0].code === 0 ? res[0].message.data || [] : [];
+        const folders = res[1] && res[1].code === 0 ? res[1].message.data || [] : [];
+        folderList.value = folders;
+        if (params && params.more) {
+          fileList.value = fileList.value.concat(files);
+        } else {
+          fileList.value = files;
+        }
+        if (params && params.goBack) {
+          breadCrumbs.value.pop();
+        } else if (params && params.toDir) {
+          breadCrumbs.value.push(currentDirectory.value);
+        }
+        fileListCount.value = res[0].code === 0 ? res[0].message.count || 0 : 0;
+        if (fileListCount.value < 30) {
+          isOver.value = true;
+        }
+      });
+    };
+    const loadFileMore = () => {
+      if (fileListCount.value > 30 && fileList.value.length < fileListCount.value) {
+        isOver.value = false;
+        getFilesQueryParam.value.offset = fileList.value.length;
+        loadData({ more: true });
+      } else {
+        isOver.value = true;
+      }
+    };
+    const search = (value) => {
+      getFilesQueryParam.value.offset = 0;
+      filter.value = value === null ? null : { ...value };
+      loadData();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createCommentVNode(" \u9876\u90E8\u6807\u9898\uFF0C\u5173\u95ED\u6309\u94AE\uFF0C\u6587\u4EF6\u4E0A\u4F20 "),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(Tabs), {
+              modelValue: activeMediaType.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeMediaType.value = $event),
+              class: "media-tabs",
+              onTabClick: MediaTypeChange
+            }, {
+              default: withCtx(() => [
+                _ctx.ai_static_covers && _ctx.ai_static_covers.length ? (openBlock(), createBlock(unref(TabPane), {
+                  key: "ai",
+                  title: "AI\u4F18\u9009"
+                })) : createCommentVNode("v-if", true),
+                createVNode(unref(TabPane), {
+                  key: "all",
+                  title: "\u5168\u90E8\u7D20\u6750"
+                }),
+                createVNode(unref(TabPane), {
+                  key: "my",
+                  title: "\u6211\u7684\u7D20\u6750"
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", {
+            class: "resources",
+            style: normalizeStyle({ height: resourcesHeight.value })
+          }, [
+            createCommentVNode(" ai\u4F18\u9009\u7D20\u6750 "),
+            activeMediaType.value === "ai" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              ai_static_covers: _ctx.ai_static_covers,
+              ai_gif_covers: _ctx.ai_gif_covers,
+              "selected-max": _ctx.selectedMax,
+              preview: _ctx.preview,
+              "add-type": _ctx.addType,
+              onAdd: add
+            }, null, 8, ["ai_static_covers", "ai_gif_covers", "selected-max", "preview", "add-type"])) : createCommentVNode("v-if", true),
+            createCommentVNode(" \u7D20\u6750\u5E93\u7D20\u6750 "),
+            createCommentVNode(" \u7EC4\u7EC7\u3001\u6587\u4EF6\u5939\u9762\u5305\u5C51 "),
+            withDirectives(createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createVNode(_sfc_main$2, {
+                  ref_key: "getMoreData",
+                  ref: getMoreData,
+                  class: "tool-search-box",
+                  "active-media-type": activeMediaType.value,
+                  base_api: _ctx.base_api,
+                  onSearch: search
+                }, {
+                  other: withCtx(() => [
+                    breadCrumbs.value.length > 1 ? (openBlock(), createBlock(unref(Button), {
+                      key: 0,
+                      class: "back",
+                      type: "secondary",
+                      size: "medium",
+                      onClick: goBackDirectory
+                    }, {
+                      icon: withCtx(() => [
+                        createVNode(unref(IconArrowLeft))
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("v-if", true)
+                  ]),
+                  _: 1
+                }, 8, ["active-media-type", "base_api"])
+              ]),
+              breadCrumbs.value.length > 1 ? (openBlock(), createBlock(unref(Breadcrumb), {
+                key: 0,
+                separator: "/",
+                class: "breadcrumb"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(breadCrumbs.value, (item) => {
+                    return openBlock(), createBlock(unref(BreadcrumbItem), {
+                      key: item.directory_id,
+                      class: "breadcrumbItem",
+                      onClick: ($event) => returnAny(item)
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.alias), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"]);
+                  }), 128))
+                ]),
+                _: 1
+              })) : createCommentVNode("v-if", true),
+              createCommentVNode(" \u6211\u7684\u5DE5\u7A0B\u3001\u89C6\u9891\u5217\u8868 "),
+              createVNode(_sfc_main$3, {
+                "folder-list": folderList.value,
+                "file-list": fileList.value,
+                "file-list-count": fileListCount.value,
+                "is-over": isOver.value,
+                preview: _ctx.preview,
+                "add-type": _ctx.addType,
+                "change-directory": changeDirectory,
+                "load-file-more": loadFileMore,
+                onAdd: add
+              }, null, 8, ["folder-list", "file-list", "file-list-count", "is-over", "preview", "add-type"])
+            ], 512), [
+              [vShow, ["all", "my"].includes(activeMediaType.value)]
+            ])
+          ], 4)
+        ])
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/resourceModal/script/api.d.ts

@@ -0,0 +1,8 @@
+interface Params {
+    [key: string]: any;
+}
+export declare function getAttachmentsAll(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
+export declare function getAttachmentsMy(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
+export declare function getDirectories(BASE_API: string, query?: Params): import("axios").AxiosPromise<any>;
+export declare function getAccountList(BASE_API: string, id: number, query: Params): import("axios").AxiosPromise<any>;
+export {};

package/es/resourceModal/script/api.js

@@ -0,0 +1,30 @@
+import request from "../../utils/request.js";
+function getAttachmentsAll(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function getAttachmentsMy(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/my/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function getDirectories(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/directories`,
+    method: "get",
+    params: query
+  });
+}
+function getAccountList(BASE_API, id, query) {
+  return request(BASE_API, {
+    url: `/poplar/v2/accounts/${id}`,
+    method: "get",
+    params: query
+  });
+}
+export { getAccountList, getAttachmentsAll, getAttachmentsMy, getDirectories };

package/es/resourceModal/script/filter.d.ts

@@ -0,0 +1,8 @@
+export declare const rateOptions: import("vue").Ref<{
+    label: string;
+    value: string;
+}[]>;
+export declare const keywordsSelection: import("vue").Ref<{
+    name: string;
+    value: string;
+}[]>;

package/es/resourceModal/script/filter.js

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+const rateOptions = ref([
+  { label: "\u5168\u90E8\u6BD4\u4F8B", value: "" },
+  { label: "16:9", value: "16:9" },
+  { label: "4:3", value: "4:3" },
+  { label: "4:1", value: "4:1" },
+  { label: "3:4", value: "3:4" },
+  { label: "\u5176\u4ED6", value: "others" }
+]);
+const keywordsSelection = ref([
+  { name: "\u5168\u90E8\u7ED3\u679C", value: "" },
+  { name: "\u6807\u9898", value: "alias" },
+  { name: "\u624B\u52A8\u6807\u7B7E", value: "tags" },
+  { name: "\u4EBA\u8138", value: "ai_figure" },
+  { name: "\u573A\u666F", value: "ai_scenario" },
+  { name: "\u5B9E\u4F53(\u56FE\u50CF)", value: "ai_entity" },
+  { name: "Logo", value: "ai_logo" },
+  { name: "\u6587\u672C(OCR)", value: "ai_ocr_keywords" },
+  { name: "\u8BED\u97F3", value: "ai_speech_keywords" },
+  { name: "\u77E5\u8BC6\u56FE\u8C31", value: "ai_knowledge_graph" }
+]);
+export { keywordsSelection, rateOptions };

package/es/resourceModal/script/mediaSelection.d.ts

@@ -0,0 +1,10 @@
+export declare type BreadCrumbsType = {
+    directory_id: number;
+    alias: string;
+};
+export declare type FilesQueryParamType = {
+    directory_id: number;
+    limit: number;
+    offset: number;
+    catalog: string;
+};

package/es/resourceModal/style/DocAiMediaSelected.less

@@ -0,0 +1,56 @@
+.doc-ai-media-selected {
+  height: 100%;
+
+  .arco-scrollbar {
+    height: 100%;
+
+    .doc-ai-media-selected-scrollbar {
+      height: 100%;
+      overflow: auto;
+
+      .thumb_type {
+        margin: 20px 0 10px 20px;
+      }
+
+      .thumb-list {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-left: 18px;
+
+        .thumb-wrap {
+          width: 20%;
+          height: 100px;
+          margin-bottom: 20px;
+
+          .thumb-item {
+            height: 100%;
+            margin-right: 20px;
+
+            .pic {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              overflow: hidden;
+              overflow: hidden;
+              border: solid 3px transparent;
+              border-radius: 4px;
+
+              &.active {
+                border: solid 3px #4886ff;
+                border-radius: 4px;
+              }
+
+              img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/es/resourceModal/style/FileTypeThumb.less

@@ -0,0 +1,183 @@
+.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;
+    }
+  }
+
+  .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%;
+  }
+}