@cmstops/pro-compo 0.1.2 → 0.1.4

package/lib/index.css

@@ -1,14 +1,10 @@
-.tooltip-button {
-  height: auto;
-  padding: 20px;
-}
 .reference-btn {
   border: none;
   padding: 12px 16px;
   border-radius: 4px;
   color: #5f5f5f;
 }
-.app-list-wrap {
+.apps-box-popover {
   position: relative;
   padding: 10px;
 }
@@ -92,3 +88,143 @@
   top: 2px;
   right: 4px;
 }
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+.message-boxs-popover {
+  width: 435px;
+  position: relative;
+}
+.message-boxs-popover .arco-tabs-content {
+  padding-top: 0;
+}
+.message-boxs-popover .msg-scroll-bar {
+  height: 80vh;
+  overflow-y: auto;
+  display: block;
+}
+.message-boxs-popover .message-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.message-boxs-popover .message-item {
+  padding: 16px;
+  padding-bottom: 0px;
+}
+.message-boxs-popover .message-item:last-child .message-body {
+  border-bottom: none;
+}
+.message-boxs-popover .message-item .message-body {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  padding-bottom: 16px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content {
+  width: 100%;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #4e5969;
+  margin-bottom: 18px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #1d2129;
+  font-size: 14px;
+  line-height: 14px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title .icon {
+  margin-right: 4px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title:hover {
+  text-decoration: underline;
+}
+.user-avater-content-info {
+  width: 328px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-bottom: 0px;
+  line-height: 1;
+}
+.user-avater-content-info .avatar {
+  width: 74px;
+  height: 74px;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.user-avater-content-info .avatar .arco-avatar {
+  width: 100%;
+  height: 100%;
+}
+.user-avater-content-info .nick-name {
+  font-size: 16px;
+  color: #1D2129;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.user-avater-content-info .user-name,
+.user-avater-content-info .user-email {
+  font-size: 14px;
+  color: #86909C;
+  margin-bottom: 10px;
+}
+.user-avater-content-info .org-alias {
+  border: 1px solid #EBEEF5;
+  padding: 10px 20px;
+  border-radius: 40px;
+}
+.user-avater-content-info .b_info_bottom {
+  height: 52px;
+  padding: 10px 16px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.type-icons-container {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 18px;
+}
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}
+.add-content-modal-wrapper .arco-modal-header {
+  border-bottom: none;
+}
+.add-content-modal-body {
+  padding: 0;
+  height: 70vh;
+}
+.add-content-modal-body .content-tabs {
+  height: 100%;
+}
+.add-content-modal-body .arco-tabs-content {
+  padding-top: 0;
+}
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}

package/lib/index.js

@@ -1,8 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 var components = require("./components.js");
-var index = require("./button/index.js");
-var index$1 = require("./appCenter/index.js");
+var index = require("./appCenter/index.js");
+var index$1 = require("./messageBox/index.js");
+var index$2 = require("./userAvater/index.js");
+var index$3 = require("./typeIcons/index.js");
+var index$4 = require("./uploadStep/index.js");
+var index$5 = require("./contentModal/index.js");
+var index$6 = require("./resourceModal/index.js");
 exports["default"] = components;
-exports.button = index;
-exports.appCenter = index$1;
+exports.appCenter = index;
+exports.messageBox = index$1;
+exports.userAvater = index$2;
+exports.typeIcons = index$3;
+exports.uploadStep = index$4;
+exports.contentModal = index$5;
+exports.resourceModal = index$6;

package/lib/index.less

@@ -1,3 +1,8 @@
 @import './style/index.less';
-@import './button/style/index.less';
 @import './appCenter/style/index.less';
+@import './messageBox/style/index.less';
+@import './userAvater/style/index.less';
+@import './typeIcons/style/index.less';
+@import './uploadStep/style/index.less';
+@import './contentModal/style/index.less';
+@import './resourceModal/style/index.less';

package/lib/messageBox/component.js

@@ -0,0 +1,147 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var list = require("./list.js");
+var api = require("./script/api.js");
+var config = require("../config.js");
+const _hoisted_1 = { class: "message-boxs-container" };
+const _hoisted_2 = {
+  key: 1,
+  class: "reference-btn"
+};
+const _hoisted_3 = { class: "message-boxs-popover" };
+const _sfc_main = vue.defineComponent({
+  ...{ name: "messageBox" },
+  __name: "component",
+  props: {
+    BASE_API: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const slotTest = !!vue.useSlots().reference;
+    const readMessagesCount = vue.ref(0);
+    const unreadMessagesCount = vue.ref(0);
+    const isLoadingMore = vue.ref(false);
+    const unreadMessages = vue.ref([]);
+    const readMessages = vue.ref([]);
+    const isNoMore = vue.ref(false);
+    const page = vue.ref({ limit: 20, offset: 0 });
+    const handlePopupVisibleChange = (visible) => {
+      if (!visible) {
+        setAllMsgToRead();
+      }
+    };
+    const setAllMsgToRead = async () => {
+      try {
+        const res = await api.setAllMsgRead(BASE_API);
+        if (res.code === 0) {
+          setData();
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    const setData = async () => {
+      isLoadingMore.value = true;
+      const res = await api.getNoticeList(BASE_API, {}).catch(() => {
+        isLoadingMore.value = false;
+      });
+      if ((res == null ? void 0 : res.code) === 0 && (res == null ? void 0 : res.message)) {
+        const data = res.message;
+        if (data.notice_state) {
+          unreadMessages.value = data.notice_state[0] && data.notice_state[0].notices || [];
+          readMessages.value = data.notice_state[1] && data.notice_state[1].notices || [];
+        }
+        readMessagesCount.value = data.readed || 0;
+        unreadMessagesCount.value = data.unread || 0;
+        isLoadingMore.value = false;
+      }
+    };
+    const loadMore = async () => {
+      if (unreadMessages.value.length !== 0)
+        return;
+      isLoadingMore.value = true;
+      try {
+        page.value.offset = readMessages.value.length;
+        const res = await api.getNoticeList(BASE_API, {
+          state: 1,
+          ...page.value
+        }).catch(() => {
+          isLoadingMore.value = false;
+        });
+        if (res.code === 0 && res.message) {
+          const { notice_state } = res.message;
+          notice_state[1].notices.length < page.value.limit && (isNoMore.value = true);
+          readMessages.value = readMessages.value.concat(
+            notice_state[1] && notice_state[1].notices || []
+          );
+        }
+        isLoadingMore.value = false;
+      } catch (error) {
+      }
+    };
+    vue.onMounted(() => {
+      setData();
+    });
+    return (_ctx, _cache) => {
+      const _directive_loading = vue.resolveDirective("loading");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.Popover), {
+          trigger: "hover",
+          position: "bottom",
+          "arrow-style": { display: "none" },
+          "content-style": { padding: 0, minWidth: "400px" },
+          "popup-visible-change": handlePopupVisibleChange
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createVNode(vue.unref(webVue.Tabs), null, {
+                default: vue.withCtx(() => [
+                  vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(webVue.TabPane), { key: "1" }, {
+                    title: vue.withCtx(() => [
+                      vue.createTextVNode("\u6D88\u606F")
+                    ]),
+                    default: vue.withCtx(() => [
+                      unreadMessages.value.length === 0 ? (vue.openBlock(), vue.createBlock(list, {
+                        key: 0,
+                        list: readMessages.value,
+                        "onUpdate:list": _cache[0] || (_cache[0] = ($event) => readMessages.value = $event),
+                        "list-type": "unread",
+                        "is-loading-more": isLoadingMore.value,
+                        "is-no-more": isNoMore.value,
+                        onLoadMoreMsg: loadMore
+                      }, null, 8, ["list", "is-loading-more", "is-no-more"])) : (vue.openBlock(), vue.createBlock(list, {
+                        key: 1,
+                        list: unreadMessages.value,
+                        "onUpdate:list": _cache[1] || (_cache[1] = ($event) => unreadMessages.value = $event),
+                        "list-type": "unread",
+                        "is-loading-more": isLoadingMore.value,
+                        "is-no-more": isNoMore.value,
+                        onLoadMoreMsg: loadMore
+                      }, null, 8, ["list", "is-loading-more", "is-no-more"]))
+                    ]),
+                    _: 1
+                  })), [
+                    [_directive_loading, isLoadingMore.value]
+                  ])
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Badge), { count: unreadMessagesCount.value }, {
+              default: vue.withCtx(() => [
+                slotTest ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("button", _hoisted_2, "\u6D88\u606F\u5217\u8868"))
+              ]),
+              _: 3
+            }, 8, ["count"])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/messageBox/index.js

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

package/lib/messageBox/list.js

@@ -0,0 +1,117 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+const _hoisted_1 = {
+  key: 0,
+  class: "empty-list"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "message-list"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "message-body"
+};
+const _hoisted_4 = { class: "media-message-content" };
+const _hoisted_5 = { class: "message-content" };
+const _hoisted_6 = { class: "title" };
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = { class: "time" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "message-media-title" };
+const _hoisted_11 = { class: "message-media-title-hover" };
+const _hoisted_12 = { class: "action" };
+const _sfc_main = vue.defineComponent({
+  __name: "list",
+  props: {
+    listType: {},
+    list: {},
+    isLoadingMore: { type: Boolean },
+    isNorMore: { type: Boolean }
+  },
+  emits: ["loadMoreMsg"],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const isEmptyList = vue.computed(() => {
+      if (props.list.length === 0) {
+        return true;
+      }
+      return false;
+    });
+    const listData = vue.computed(() => {
+      return props.list;
+    });
+    const approvalStateMapText = vue.ref({
+      approval_msg: { label: "\u63D0\u4EA4\u4E86\u4E00\u9879\u5185\u5BB9\uFF0C\u5F85\u60A8\u5BA1\u6838", show_user_alias: true },
+      approval_cc_msg: { label: "\u63D0\u4EA4\u4E86\u4E00\u9879\u5185\u5BB9\uFF0C\u6284\u9001\u7ED9\u60A8" },
+      approval_pass: { label: "\u60A8\u63D0\u4EA4\u4E86\u4E00\u9879\u5185\u5BB9\u5DF2\u5BA1\u6838\u901A\u8FC7" },
+      approval_fail: { label: "\u60A8\u63D0\u4EA4\u4E86\u4E00\u9879\u5185\u5BB9\u5BA1\u6838\u88AB\u9A73\u56DE" },
+      approval_retrial: { label: "\u60A8\u63D0\u4EA4\u4E86\u4E00\u9879\u5185\u5BB9\u5BA1\u6838\u88AB\u9A73\u56DE\u91CD\u5BA1" }
+    });
+    const openApprovalDetail = (msg) => {
+      console.log(msg);
+    };
+    const handleScroll = (e) => {
+      e && e.stopPropagation();
+      if (e.target) {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollTop + clientHeight >= scrollHeight) {
+          if (props.isLoadingMore === false && !props.isNorMore) {
+            emits("loadMoreMsg", props.listType);
+          }
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        isEmptyList.value === true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createVNode(vue.unref(webVue.Empty))
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.createVNode(vue.unref(webVue.Scrollbar), {
+          class: "msg-scroll-bar",
+          onScroll: handleScroll
+        }, {
+          default: vue.withCtx(() => [
+            listData.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_2, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(listData.value, (item) => {
+                return vue.openBlock(), vue.createElementBlock("li", {
+                  key: "list_" + item.msg.nid,
+                  class: "message-item"
+                }, [
+                  vue.createCommentVNode(" \u901A\u77E5\u5185\u5BB9 "),
+                  item.msg ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                    vue.createElementVNode("div", _hoisted_4, [
+                      vue.createElementVNode("div", _hoisted_5, [
+                        vue.createElementVNode("span", _hoisted_6, [
+                          approvalStateMapText.value[item.msg.t].show_user_alias ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(item.msg.alias), 1)) : vue.createCommentVNode("v-if", true),
+                          vue.createTextVNode(" " + vue.toDisplayString(approvalStateMapText.value[item.msg.t].label), 1)
+                        ]),
+                        vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(item.msg.time), 1)
+                      ]),
+                      vue.createElementVNode("div", {
+                        class: "message-info",
+                        onClick: vue.withModifiers(($event) => openApprovalDetail(item.msg), ["stop"])
+                      }, [
+                        vue.createElementVNode("div", _hoisted_10, [
+                          vue.createCommentVNode(' <FileTypeIcons\n                  class="icon"\n                  :file-type="item.msg.catalog"\n                  :doc-type="item.msg.series"\n                ></FileTypeIcons> '),
+                          vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(item.msg.title), 1)
+                        ]),
+                        vue.createElementVNode("div", _hoisted_12, [
+                          vue.createVNode(vue.unref(icon.IconRight))
+                        ])
+                      ], 8, _hoisted_9)
+                    ])
+                  ])) : vue.createCommentVNode("v-if", true)
+                ]);
+              }), 128))
+            ])) : vue.createCommentVNode("v-if", true)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/messageBox/script/api.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function getNoticeList(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v2/notice",
+    method: "post",
+    data: params
+  });
+}
+function setAllMsgRead(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v2/notice/readed",
+    method: "post",
+    data: params
+  });
+}
+exports.getNoticeList = getNoticeList;
+exports.setAllMsgRead = setAllMsgRead;

package/lib/messageBox/style/index.css

@@ -0,0 +1,64 @@
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+.message-boxs-popover {
+  width: 435px;
+  position: relative;
+}
+.message-boxs-popover .arco-tabs-content {
+  padding-top: 0;
+}
+.message-boxs-popover .msg-scroll-bar {
+  height: 80vh;
+  overflow-y: auto;
+  display: block;
+}
+.message-boxs-popover .message-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.message-boxs-popover .message-item {
+  padding: 16px;
+  padding-bottom: 0px;
+}
+.message-boxs-popover .message-item:last-child .message-body {
+  border-bottom: none;
+}
+.message-boxs-popover .message-item .message-body {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  padding-bottom: 16px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content {
+  width: 100%;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #4e5969;
+  margin-bottom: 18px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #1d2129;
+  font-size: 14px;
+  line-height: 14px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title .icon {
+  margin-right: 4px;
+}
+.message-boxs-popover .message-item .message-body .media-message-content .message-info .message-media-title:hover {
+  text-decoration: underline;
+}

package/lib/messageBox/style/index.less

@@ -0,0 +1,71 @@
+.reference-btn {
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  color: #5f5f5f;
+}
+
+.message-boxs-popover {
+  width: 435px;
+  position: relative;
+  // padding: 10px;
+
+  .arco-tabs-content {
+    padding-top: 0;
+  }
+
+  .msg-scroll-bar {
+    height: 80vh;
+    overflow-y: auto;
+    display: block;
+  }
+  
+  .message-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .message-item {
+    padding: 16px;
+    padding-bottom: 0px;
+    &:last-child .message-body {
+      border-bottom: none;
+    }
+    .message-body {
+      border-bottom: 1px solid rgba(0,0,0,.05);
+      padding-bottom: 16px;
+      
+      .media-message-content {
+        width: 100%;
+        .message-content {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 12px;
+          color: #4e5969;
+          margin-bottom: 18px;
+        }
+        .message-info {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #1d2129;
+          font-size: 14px;
+          line-height: 14px;
+          .message-media-title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .icon {
+              margin-right: 4px;
+            }
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/resourceModal/component.js

@@ -0,0 +1,15 @@
+"use strict";
+var vue = require("vue");
+const _sfc_main = vue.defineComponent({
+  ...{ name: "resourceModal" },
+  __name: "component",
+  props: {
+    BASE_API: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, "resourceModal");
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/resourceModal/index.js

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

package/lib/resourceModal/style/css.js

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

package/lib/resourceModal/style/index.css

@@ -0,0 +1,4 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}

package/lib/resourceModal/style/index.js

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

package/lib/resourceModal/style/index.less

@@ -0,0 +1,4 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}