@cmstops/pro-compo 0.3.31 → 0.3.33

package/es/selectResourceModal/style/listContent.less

@@ -0,0 +1,67 @@
+.card-list-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(4, 1fr);
+
+  .card-wrapper-image {
+    position: relative;
+    overflow: hidden;
+
+    .card-wrapper {
+      overflow: hidden;
+      // 宽高：43
+      aspect-ratio: 4 / 3;
+    }
+
+    .card-alias {
+      width: 100%;
+      margin-top: 6px;
+      overflow: hidden;
+      color: #3d3d3d;
+      font-size: 14px;
+      line-height: 22px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &:hover .check-box-wrapper .check-box,
+    .check-box-wrapper .check-box.active {
+      opacity: 1;
+    }
+
+    .check-box-wrapper {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      cursor: pointer;
+
+      .check-box {
+        box-sizing: border-box;
+        width: 22px;
+        height: 22px;
+        font-size: 14px;
+        line-height: 22px;
+        text-align: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        border: 1px solid white;
+        border-radius: 50%;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+
+        &::selection {
+          display: none;
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+
+        &.active {
+          color: white;
+          background-color: #165dff;
+          border-color: #165dff;
+        }
+      }
+    }
+  }
+}

package/es/selectResourceModal/style/listFilter.less

@@ -0,0 +1,17 @@
+.list-filter-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  .filter-list {
+    display: flex;
+    gap: 10px;
+
+    .filter-item {
+      width: 100px;
+    }
+  }
+
+  .arco-input-prepend {
+    padding: 0;
+  }
+}

package/es/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/es/thumbCard/component.js

@@ -0,0 +1,114 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createBlock, unref, withCtx, createVNode, createTextVNode, createElementVNode, Fragment, createCommentVNode, mergeProps, renderList, toDisplayString } from "vue";
+import { IconPlus } from "@arco-design/web-vue/es/icon";
+import { IconResource, IconComputer } from "@arco-iconbox/vue-cmstop-icons";
+import { Dropdown, Doption, Image } from "@arco-design/web-vue";
+import { DEFAULT_BASE_API } from "../config.js";
+const _hoisted_1 = { class: "thumb-add" };
+const _hoisted_2 = { class: "thumb-handler-list" };
+const _hoisted_3 = ["onClick"];
+const _sfc_main = 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 || DEFAULT_BASE_API;
+    const WATER_BG_URL = `${BASE_API}/static/images/waterBg.png`;
+    const thumb = computed(() => {
+      return props.thumb || props.url || "";
+    });
+    const styleObject = computed(() => ({
+      backgroundImage: `url(${WATER_BG_URL})`
+    }));
+    const aImageAttr = 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 openBlock(), createElementBlock("div", {
+        class: "thumb-select-wrapper",
+        style: normalizeStyle(styleObject.value)
+      }, [
+        _ctx.isEdit && !_ctx.url ? (openBlock(), createBlock(unref(Dropdown), {
+          key: 0,
+          trigger: "click",
+          onSelect: handleEdit
+        }, {
+          content: withCtx(() => [
+            createVNode(unref(Doption), { value: "resource" }, {
+              default: withCtx(() => [
+                createVNode(unref(IconResource)),
+                createTextVNode(" \u7D20\u6750\u5E93\u9009\u62E9 ")
+              ]),
+              _: 1
+            }),
+            createVNode(unref(Doption), { value: "local" }, {
+              default: withCtx(() => [
+                createVNode(unref(IconComputer)),
+                createTextVNode(" \u672C\u5730\u4E0A\u4F20 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createVNode(unref(IconPlus))
+            ])
+          ]),
+          _: 1
+        })) : _ctx.catalog && _ctx.url ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createCommentVNode(" \u56FE\u7247 "),
+          _ctx.catalog === "image" ? (openBlock(), createBlock(unref(Image), mergeProps({
+            key: 0,
+            class: "thumb-image",
+            src: thumb.value
+          }, aImageAttr.value), null, 16, ["src"])) : _ctx.catalog === "video" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createCommentVNode(" \u89C6\u9891 "),
+            createVNode(unref(Image), mergeProps({
+              class: "thumb-image",
+              src: thumb.value
+            }, aImageAttr.value), null, 16, ["src"])
+          ], 64)) : _ctx.catalog === "audio" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createCommentVNode(" \u97F3\u9891 "),
+            createTextVNode(" \u97F3\u9891 ")
+          ], 64)) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
+          createElementVNode("div", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.handlersKey, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.key,
+                class: "handler-item",
+                onClick: () => handleOption(item.key)
+              }, toDisplayString(item.label), 9, _hoisted_3);
+            }), 128))
+          ])
+        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          createTextVNode(" \u7F3A\u7701\u56FE ")
+        ], 64))
+      ], 4);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/thumbCard/index.d.ts

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

package/es/thumbCard/index.js

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

package/es/thumbCard/style/css.js

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

package/es/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/es/thumbCard/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/thumbCard/style/index.js

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

package/es/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/es/utils/typeMap.d.ts

@@ -168,3 +168,22 @@ export declare const matrixPublishFormalStateMap: {
     12: string;
     13: string;
 };
+export declare const RESOURCE_SOURCE_DICT: {
+    ai: string;
+    live_rec: string;
+    backend: string;
+};
+export declare const RESOURCE_CATALOG_DICT: {
+    image: string;
+    video: string;
+    audio: string;
+    other: string;
+};
+export declare const RESOURCE_SOURCE_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const RESOURCE_CATALOG_OPTIONS: {
+    value: string;
+    label: string;
+}[];

package/es/utils/typeMap.js

@@ -1,4 +1,7 @@
 var _a, _b, _c;
+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",
@@ -158,4 +161,17 @@ const matrixPublishFormalStateMap = {
   12: "\u672A\u77E5",
   13: "\u79C1\u5BC6"
 };
-export { approveFlowStatusMap, calcApprovingDependent, calcApprovingUser, compoColumnsMap, componentsColumns, contentList_layout_map, contentList_list_type_map, contentList_relation_type_map, groupPieceType, ilive_type_map, key_target_type_map, kongo_source_map, local_live_doc_status, local_live_doc_type, matrixPublishFormalStateMap, matrixPublishStateMap, mp_type_map };
+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);
+export { RESOURCE_CATALOG_DICT, RESOURCE_CATALOG_OPTIONS, RESOURCE_SOURCE_DICT, RESOURCE_SOURCE_OPTIONS, approveFlowStatusMap, calcApprovingDependent, calcApprovingUser, compoColumnsMap, componentsColumns, contentList_layout_map, contentList_list_type_map, contentList_relation_type_map, groupPieceType, ilive_type_map, key_target_type_map, kongo_source_map, local_live_doc_status, local_live_doc_type, matrixPublishFormalStateMap, matrixPublishStateMap, mp_type_map };

package/lib/hooks/useAttachement.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var request = require("../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 getAttachmentsMyMessage(BASE_API, query) {
+  return request(BASE_API, {
+    url: `/poplar/v3/remind/to/my/attachments`,
+    method: "get",
+    params: query
+  });
+}
+function useAttachement(options) {
+  const key = vue.ref(options.key);
+  const limit = vue.ref(20);
+  const offset = vue.ref(0);
+  const filter = vue.ref({});
+  const params = vue.computed(() => {
+    return {
+      limit: limit.value,
+      offset: offset.value,
+      ...filter.value
+    };
+  });
+  const loading = vue.ref(true);
+  const list = vue.ref([]);
+  const total = vue.ref(0);
+  async function loadData() {
+    let apiFunc;
+    if (key.value === "all")
+      apiFunc = getAttachmentsAll;
+    if (key.value === "my")
+      apiFunc = getAttachmentsMy;
+    if (key.value === "remind")
+      apiFunc = getAttachmentsMyMessage;
+    list.value = [];
+    if (!apiFunc)
+      return;
+    loading.value = true;
+    try {
+      const { code, message } = await apiFunc(options.BASE_API, params.value);
+      if (code !== 0)
+        return;
+      const { data, count } = message;
+      list.value = data || [];
+      total.value = count;
+    } catch (e) {
+      console.log("\u83B7\u53D6\u7D20\u6750\u5217\u8868\u5F02\u5E38", e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function changePage(o) {
+    offset.value = o;
+    loadData();
+  }
+  function changeSize(s) {
+    limit.value = s;
+    loadData();
+  }
+  function changeKey(k) {
+    if (k === key.value)
+      return;
+    key.value = k;
+    changePage(0);
+  }
+  function changeFilter(f) {
+    filter.value = f;
+    changePage(0);
+  }
+  return {
+    list,
+    total,
+    limit,
+    offset,
+    loading,
+    changeFilter,
+    changeKey,
+    changePage,
+    changeSize,
+    loadData
+  };
+}
+exports["default"] = useAttachement;
+exports.getAttachmentsAll = getAttachmentsAll;
+exports.getAttachmentsMy = getAttachmentsMy;
+exports.getAttachmentsMyMessage = getAttachmentsMyMessage;

package/lib/hooks/useSelection.js

@@ -0,0 +1,60 @@
+"use strict";
+var vue = require("vue");
+function getLabelValue(list, options) {
+  const { labelStr, valueStr } = options;
+  return list.map((item) => {
+    return {
+      label: item[labelStr],
+      value: item[valueStr]
+    };
+  });
+}
+function useSelection(params) {
+  const { func, labelStr, valueStr } = params;
+  const lVParams = { labelStr, valueStr };
+  const limit = vue.ref(10);
+  const offset = vue.ref(0);
+  const keyword = vue.ref("");
+  const options = vue.ref([]);
+  const loading = vue.ref(false);
+  const queryParams = vue.computed(() => {
+    return {
+      limit: limit.value,
+      offset: offset.value,
+      keyword: keyword.value
+    };
+  });
+  async function load(more) {
+    loading.value = !more;
+    try {
+      const list = await func(queryParams.value);
+      if (more) {
+        options.value = options.value.concat(getLabelValue(list, lVParams));
+      } else {
+        options.value = getLabelValue(list, lVParams);
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function loadMore() {
+    offset.value += limit.value;
+    load(true);
+  }
+  function handleSearch(kw) {
+    keyword.value = kw;
+    offset.value = 0;
+    load();
+  }
+  return {
+    options,
+    loading,
+    keyword,
+    load,
+    handleSearch,
+    loadMore
+  };
+}
+module.exports = useSelection;