@cmstops/pro-compo 0.1.13 → 0.1.15

package/lib/selectThumb/style/index.css

@@ -0,0 +1,101 @@
+.select-thumb-container .thumb-card-container {
+  width: 100px;
+  height: 58px;
+  margin-right: 10px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.select-thumb-container .thumb-card-container.model-5 {
+  width: 75px;
+  height: 100px;
+}
+.select-thumb-container .thumb-card-container.model-7 {
+  width: 232px;
+  height: 58px;
+}
+.select-thumb-container .thumb-card-container .img-v {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.select-thumb-container .thumb-card-container .img-v .change-icon {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+  color: #ffffff;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .item.add-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+}
+.select-thumb-container .thumb-card-container .mask {
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  position: absolute;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  color: #eaeaea;
+  font-size: 18px;
+}
+.select-thumb-container .thumb-card-container .mask i {
+  display: inline-block;
+  cursor: pointer;
+}
+.select-thumb-container .thumb-card-container .mask i:active {
+  opacity: 0.4;
+}
+.select-thumb-container .thumb-card-container .mask .half {
+  height: 100%;
+  width: 48%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.select-thumb-container .thumb-card-container .mask .half:hover {
+  opacity: 0.7;
+}
+.select-thumb-container .thumb-card-container .img-v:hover .mask {
+  display: flex;
+}
+.select-thumb-container .title {
+  font-size: 14px;
+  color: #4e5969;
+  font-weight: 700;
+  line-height: 40px;
+  margin: 5px 0px;
+}
+.select-thumb-container .title span {
+  margin-right: 10px;
+}
+.select-thumb-container .title .tip {
+  font-size: 12px;
+  color: rgba(78, 89, 105, 0.4);
+}
+.select-thumb-container .thumb-list-view {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.select-thumb-container .star {
+  color: red;
+  margin-right: 2px !important;
+}

package/lib/selectThumb/style/index.js

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

package/lib/selectThumb/style/index.less

@@ -0,0 +1,27 @@
+.select-thumb-container {
+  @import './card.less';
+  @import './colorPalette.less';
+  .title {
+    font-size: 14px;
+    color: #4e5969;
+    font-weight: 700;
+    line-height: 40px;
+    margin: 5px 0px;
+    span {
+      margin-right: 10px;
+    }
+    .tip {
+      font-size: 12px;
+      color: rgba(78, 89, 105, 0.4);
+    }
+  }
+  .thumb-list-view {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .star {
+    color: red;
+    margin-right: 2px !important;
+  }
+}

package/lib/uploadBefore/component.js

@@ -16,11 +16,10 @@ const _sfc_main = vue.defineComponent({
     uploadMethod: {}
   },
   emits: ["onProgress", "onListReady"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
+    const props = __props;
     const { state: visBeforeUpload, open: openBeforePannel } = toggle.useToggle();
     const { state: visUploadList, open: openListPannel } = toggle.useToggle();
-    const props = __props;
-    const emits = __emit;
     const baseApi = vue.ref(props.BASE_API || config.DEFAULT_BASE_API);
     const { preOptionsList, uploadFileToShowFileTrans } = uploadHooks.usePreUploadOptions();
     const { fileList, uploadFileAdd } = uploadHooks.useUplaodList();

package/lib/uploadBefore/components/UploadBefore.js

@@ -14,9 +14,8 @@ const _sfc_main = vue.defineComponent({
     BASE_API: {}
   },
   emits: ["confirm", "update:visable", "update:file-list"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
     const props = __props;
-    const emits = __emit;
     const modalVis = vue.toRef(props, "visable");
     const fileList = vue.toRef(props, "fileList");
     const column = [

package/lib/uploadBefore/components/UploadForClick.js

@@ -7,8 +7,7 @@ const _sfc_main = vue.defineComponent({
     uploadMethod: {}
   },
   emits: ["after-choose"],
-  setup(__props, { emit: __emit }) {
-    const emits = __emit;
+  setup(__props, { emit: emits }) {
     const tusUpload = (option) => {
       const { fileItem } = option;
       emits("after-choose", fileItem);

package/lib/uploadStep/component.js

@@ -27,7 +27,8 @@ const _sfc_main = vue.defineComponent({
     global: { type: Boolean }
   },
   emits: ["update:visable"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit: emits }) {
+    const props = __props;
     const progressEnum = {
       UPLOADING: "normal",
       WATING: "normal",
@@ -40,8 +41,6 @@ const _sfc_main = vue.defineComponent({
       SUCCESS: "\u4E0A\u4F20\u5B8C\u6210",
       ERROR: "\u4E0A\u4F20\u5931\u8D25"
     };
-    const emits = __emit;
-    const props = __props;
     const showList = vue.toRef(props, "fileList");
     const { state: expend, toggle: toggleExp } = toggle.useToggle(true);
     const { state: scale, toggle: toggleSca } = toggle.useToggle();

package/lib/userDirector/component.js

@@ -22,17 +22,13 @@ const _sfc_main = vue.defineComponent({
     visible: { type: Boolean },
     title: {}
   },
-  emits: ["update:visible"],
-  setup(__props, { emit: __emit }) {
+  emits: ["update:visible", "submit"],
+  setup(__props, { emit }) {
     const props = __props;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
-    const emit = __emit;
     const RoleTreeData = vue.ref([]);
     const DepartTreeData = vue.ref([]);
     const userSelectedList = vue.ref([]);
-    const selectRoleNode = (selectedKeys, data) => {
-      console.log("selectRoleNode", data);
-    };
     const clearUserSelectedList = () => {
       userSelectedList.value = [];
     };
@@ -53,9 +49,6 @@ const _sfc_main = vue.defineComponent({
         data.node.children = await loadRoleAllUser(data.node.id);
       }
     };
-    const selectDepartNode = (selectedKeys, data) => {
-      console.log("selectDepartNode", data);
-    };
     const loadDepartUserList = async (id) => {
       const res = await api.getDepartUserList(BASE_API, { pid: id });
       if (res.code === 0) {
@@ -155,6 +148,11 @@ const _sfc_main = vue.defineComponent({
     const removeUserSelected = (index) => {
       userSelectedList.value.splice(index, 1);
     };
+    const handleOpen = () => {
+      if (props.defaultData) {
+        userSelectedList.value = [].concat(props.defaultData || []);
+      }
+    };
     vue.onMounted(() => {
       getUserList();
     });
@@ -170,7 +168,7 @@ const _sfc_main = vue.defineComponent({
       emit("update:visible", bool);
     };
     const handleOk = () => {
-      setVisible(false);
+      emit("submit", JSON.parse(JSON.stringify(userSelectedList.value)));
     };
     const handleCancel = () => {
       setVisible(false);
@@ -183,6 +181,7 @@ const _sfc_main = vue.defineComponent({
         "title-align": "start",
         "body-class": "user-director-modal-body",
         "unmount-on-close": "",
+        onOpen: handleOpen,
         onOk: handleOk,
         onCancel: handleCancel
       }, {
@@ -225,7 +224,6 @@ const _sfc_main = vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(userTree, {
                             list: RoleTreeData.value,
-                            onSelect: selectRoleNode,
                             onExpand: expandRoleNode,
                             onAdd: addItem
                           }, null, 8, ["list"])
@@ -245,7 +243,6 @@ const _sfc_main = vue.defineComponent({
                         default: vue.withCtx(() => [
                           vue.createVNode(userTree, {
                             list: DepartTreeData.value,
-                            onSelect: selectDepartNode,
                             onExpand: expandDepartNode,
                             onAdd: addItem
                           }, null, 8, ["list"])
@@ -273,15 +270,19 @@ const _sfc_main = vue.defineComponent({
                   _: 1
                 })
               ]),
-              vue.createVNode(vue.unref(webVue.Scrollbar), { style: { "height": "100%", "overflow": "auto" } }, {
+              vue.createVNode(vue.unref(webVue.Scrollbar), {
+                "outer-class": "scroll",
+                style: { "height": "100%", "overflow": "auto" }
+              }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(userSelectedList.value, (item, index) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       key: item.uid,
-                      class: "user-item"
+                      class: "user-item padding"
                     }, [
                       vue.createElementVNode("div", _hoisted_5, [
                         vue.createVNode(vue.unref(webVue.Avatar), {
+                          class: "avatar",
                           size: 32,
                           "image-url": item.avatar
                         }, null, 8, ["image-url"]),

package/lib/userDirector/components/userTree.js

@@ -10,7 +10,7 @@ const _sfc_main = vue.defineComponent({
     list: {}
   },
   emits: ["select", "expand", "add"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const loadMore = () => {
     };
@@ -19,7 +19,6 @@ const _sfc_main = vue.defineComponent({
       title: "alias",
       key: "node_key"
     };
-    const emit = __emit;
     const select = (selectedKeys, data) => {
       emit("select", selectedKeys, data);
     };
@@ -48,6 +47,7 @@ const _sfc_main = vue.defineComponent({
             vue.createElementVNode("div", _hoisted_2, [
               nodeData.isUser ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Avatar), {
                 key: 0,
+                class: "avatar",
                 size: 22,
                 "image-url": nodeData.avatar
               }, null, 8, ["image-url"])) : vue.createCommentVNode("v-if", true),

package/lib/userDirector/style/index.css

@@ -1,4 +1,5 @@
 .user-director-modal-body {
+  background: var(--color-bg-1);
   padding: 0;
 }
 .user-director-modal-body .arco-collapse {
@@ -7,10 +8,10 @@
 .user-director-modal-body .arco-collapse-item-content {
   padding-left: 10px;
   padding-right: 0;
-  background: white;
+  background: var(--color-bg-1);
 }
 .user-select-content {
-  height: 60vh;
+  height: 50vh;
   display: flex;
 }
 .user-select-content .user-select-left,
@@ -21,6 +22,9 @@
 .user-select-content .user-select-left {
   border-right: 1px solid var(--color-neutral-3);
 }
+.user-select-content .user-select-right .scroll {
+  height: calc(100% - 40px);
+}
 .user-select-content .user-select-right .user-select-right-title {
   display: flex;
   justify-content: space-between;
@@ -29,19 +33,28 @@
   padding: 6px 16px;
   border-bottom: 1px solid var(--color-neutral-3);
 }
-.user-select-content .user-select-right .user-item {
+.user-select-content .user-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
+}
+.user-select-content .user-item.padding {
   padding: 5px 16px;
 }
-.user-select-content .user-select-right .user-item .action {
+.user-select-content .user-item .left {
+  display: flex;
+  align-items: center;
+}
+.user-select-content .user-item .left .avatar {
+  margin-right: 10px;
+}
+.user-select-content .user-item .action {
   display: none;
 }
-.user-select-content .user-select-right .user-item:hover {
+.user-select-content .user-item:hover {
   background-color: var(--color-fill-1);
 }
-.user-select-content .user-select-right .user-item:hover .action {
+.user-select-content .user-item:hover .action {
   display: flex;
 }
 .user-select-content .tree-action {

package/lib/userDirector/style/index.less

@@ -1,4 +1,5 @@
 .user-director-modal-body {
+  background: var(--color-bg-1);
   padding: 0;
   .arco-collapse {
     height: calc(100% - 36px);
@@ -7,11 +8,11 @@
   .arco-collapse-item-content {
     padding-left: 10px;
     padding-right: 0;
-    background: white;
+    background: var(--color-bg-1);
   }
 }
 .user-select-content {
-  height: 60vh;
+  height: 50vh;
   display: flex;
   .user-select-left,
   .user-select-right {
@@ -22,6 +23,9 @@
     border-right: 1px solid var(--color-neutral-3);
   }
   .user-select-right {
+    .scroll {
+      height: calc(100% - 40px);
+    }
     .user-select-right-title {
       display: flex;
       justify-content: space-between;
@@ -30,19 +34,28 @@
       padding: 6px 16px;
       border-bottom: 1px solid var(--color-neutral-3);
     }
-    .user-item {
+  }
+  .user-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &.padding {
+      padding: 5px 16px;
+    }
+    .left {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      padding: 5px 16px;
-      .action {
-        display: none;
+      .avatar {
+        margin-right: 10px;
       }
-      &:hover {
-        background-color: var(--color-fill-1);
-        .action {
-          display: flex;
-        }
+    }
+    .action {
+      display: none;
+    }
+    &:hover {
+      background-color: var(--color-fill-1);
+      .action {
+        display: flex;
       }
     }
   }

package/lib/utils/doc.js

@@ -15,12 +15,35 @@ const stateOptions = () => {
   return [{ value: "", label: "\u5168\u90E8" }, ...arr];
 };
 const docThumbObjMap = {
-  1: { alias: "\u4E09\u56FE", maxLength: 3, value: "1", ratio: 4 / 3 },
-  2: { alias: "\u5927\u56FE", maxLength: 1, value: "2", ratio: 16 / 9 },
-  3: { alias: "\u5355\u56FE", maxLength: 1, value: "3", ratio: 4 / 3 },
-  4: { alias: "\u65E0\u56FE", maxLength: 0, value: "4", ratio: 1 },
-  5: { alias: "\u7AD6\u56FE", maxLength: 1, value: "5", ratio: 3 / 4 },
-  7: { alias: "\u7A84\u56FE", maxLength: 1, value: "7", ratio: 4 / 1 }
+  1: { alias: "\u4E09\u56FE", maxLength: 3, value: "1", ratioStr: "4:3", ratio: 4 / 3 },
+  2: {
+    alias: "\u5927\u56FE",
+    maxLength: 1,
+    value: "2",
+    ratioStr: "16:9",
+    ratio: 16 / 9
+  },
+  3: {
+    alias: "\u5355\u56FE",
+    maxLength: 1,
+    value: "3",
+    ratioStr: "4:3 ",
+    ratio: 4 / 3
+  },
+  4: { alias: "\u65E0\u56FE", maxLength: 0, value: "4", ratioStr: "", ratio: 1 },
+  5: { alias: "\u7AD6\u56FE", maxLength: 1, value: "5", ratioStr: "3:4", ratio: 3 / 4 },
+  7: { alias: "\u7A84\u56FE", maxLength: 1, value: "7", ratioStr: "4:1", ratio: 4 / 1 }
+};
+const docThumbRatioMap = () => {
+  const obj = {};
+  Object.keys(docThumbObjMap).map((key) => {
+    obj[key] = docThumbObjMap[key].ratio;
+    return {};
+  });
+  return obj;
+};
+const docThumbArrMap = () => {
+  return Object.values(docThumbObjMap);
 };
 const docThumbTypeMap = () => {
   const arr = Object.keys(docThumbObjMap).map((key) => {
@@ -53,7 +76,9 @@ const typeOptions = () => {
 };
 exports.docPubStateMap = docPubStateMap;
 exports.docSeries = docSeries;
+exports.docThumbArrMap = docThumbArrMap;
 exports.docThumbObjMap = docThumbObjMap;
+exports.docThumbRatioMap = docThumbRatioMap;
 exports.docThumbTypeMap = docThumbTypeMap;
 exports.stateOptions = stateOptions;
 exports.typeOptions = typeOptions;

package/lib/utils/index.js

@@ -31,6 +31,12 @@ const to = (promise, errorExt) => {
     return [err, void 0];
   });
 };
+function replaceSuffix(str, insert) {
+  const reg = /\.[^\.]+$/;
+  const match = str.match(reg);
+  return match ? str.replace(reg, insert + match) : str + insert;
+}
 exports.dateYYYYDDMMHHmm = dateYYYYDDMMHHmm;
 exports.generateUUID = generateUUID;
+exports.replaceSuffix = replaceSuffix;
 exports.to = to;

package/lib/utils/tusUpload.js

@@ -36,7 +36,7 @@ function uploadByTUS(file, progressCallback) {
         reject(error);
       },
       onProgress: (bytesSent, bytesTotal) => {
-        progressCallback(bytesSent, bytesTotal);
+        progressCallback && progressCallback(bytesSent, bytesTotal);
       },
       onSuccess: () => {
         resolve(upload);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "",
   "keywords": [
     "vue",
@@ -44,7 +44,17 @@
     ]
   },
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.2.0",
+    "vuedraggable": "^4.1.0",
+    "tus-js-client": "^3.1.1",
+    "dayjs": "^1.11.9",
+    "@arco-design/web-vue": "~2",
+    "@arco-iconbox/vue-cmstop-icons": "^0.0.4",
+    "@popperjs/core": "^2.11.8",
+    "gif-to-canvas": "^1.0.0",
+    "gif.js": "^0.2.0",
+    "colorthief": "^2.4.0",
+    "cropperjs": "^1.6.1"
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
@@ -73,6 +83,8 @@
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/test-utils": "^2.0.0-beta.14",
     "babel-loader": "^8.2.2",
+    "colorthief": "^2.4.0",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.11.9",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -83,6 +95,8 @@
     "eslint-plugin-vue": "^7.7.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^9.1.0",
+    "gif-to-canvas": "^1.0.0",
+    "gif.js": "^0.2.0",
     "husky": "^4.3.7",
     "jest": "^29.7.0",
     "less": "^4.1.1",