@cmstops/pro-compo 0.3.71 → 0.3.73-beta

package/lib/index.css

@@ -4530,7 +4530,7 @@
 .resource-list-footer {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
 }
 .resource-list-footer .footer-right {
   display: flex;
@@ -4926,23 +4926,25 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
   overflow: hidden;
 }
 .video-thumb .video-player-container {
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
-.video-thumb .video-player-container video {
-  height: 100%;
+.video-thumb .video-player-container img {
+  max-width: 800px;
+  max-height: 100%;
 }
 .video-thumb .video-thumb-list {
   position: relative;
   display: flex;
   height: 80px;
-  padding: 20px 0;
+  padding: 10px 0;
 }
 .video-thumb .video-thumb-list .video-thumb-list-item {
   flex: 1;
@@ -4961,10 +4963,15 @@
 }
 .video-thumb .video-thumb-list .video-thumb-list-drager {
   position: absolute;
-  top: 20px;
+  top: 10px;
   left: 0;
+  z-index: 100;
   width: 6px;
-  height: calc(100% - 40px);
+  height: calc(100% - 20px);
   background-color: rgb(var(--primary-5));
   cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager:hover {
+  transform: scale(1.05);
 }

package/lib/selectResourceModal/component.js

@@ -14,10 +14,6 @@ const _hoisted_3 = {
   key: 0,
   class: "resource-select-container"
 };
-const _hoisted_4 = {
-  key: 0,
-  class: "footer-right"
-};
 const _sfc_main = vue.defineComponent({
   ...{ name: "selectResourceModal" },
   __name: "component",
@@ -38,7 +34,19 @@ const _sfc_main = vue.defineComponent({
     const emits = __emit;
     const { selected, selectedKeys, disableSelect, handleSelect, handleClear } = useResourceSelect.useResourceSelect(props);
     const { activeKey, activeComponent, tabKeyList, handelChangeTab } = useTabFilter(props);
-    const { wrapProps, close, submit } = useCompoLf(props, emits);
+    const { wrapProps, close, submit } = useCompoLf(props, emits, {
+      onClose: () => {
+        handleClear();
+      }
+    });
+    vue.watch(
+      () => props.visible,
+      (val) => {
+        if (val)
+          activeKey.value = tabKeyList.value[0].key;
+      },
+      { immediate: true }
+    );
     const handleOptions = (options, handleOptions2) => {
       const { key, item } = options;
       if (key === "select-one") {
@@ -51,8 +59,15 @@ const _sfc_main = vue.defineComponent({
       }
       handleOptions2 && handleOptions2(options);
     };
-    function handleConfirm() {
-      submit(selected.value);
+    function confirm(type, meta) {
+      let result = JSON.parse(JSON.stringify(selected.value));
+      if (meta && typeof meta === "function")
+        result = meta();
+      if (type === "crop") {
+        submit(result, "edit");
+      } else {
+        submit(result);
+      }
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -68,7 +83,8 @@ const _sfc_main = vue.defineComponent({
                   onClose: vue.unref(close)
                 }, null, 8, ["model-value", "tabList", "onClose"]),
                 vue.createCommentVNode(" \u5217\u8868\u5206\u53D1\u5668 "),
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), {
+                _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), {
+                  key: 0,
                   "active-key": vue.unref(activeKey),
                   onChangeTab: vue.unref(handelChangeTab)
                 }, {
@@ -81,14 +97,32 @@ const _sfc_main = vue.defineComponent({
                       onOptions: (e) => handleOptions(e, onOptions)
                     }, null, 8, ["item", "select-keys", "disable", "onSelect", "onOptions"])
                   ]),
-                  "footer-extra": vue.withCtx(() => [
-                    vue.unref(selected).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-                      vue.createVNode(index$1, {
-                        maxcount: _ctx.maxcount,
-                        selected: vue.unref(selected),
-                        onRemove: vue.unref(handleSelect),
-                        onClear: vue.unref(handleClear)
-                      }, null, 8, ["maxcount", "selected", "onRemove", "onClear"]),
+                  "footer-extra": vue.withCtx(({ type, onConfirm }) => [
+                    type !== "video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      vue.unref(selected).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                        vue.createVNode(index$1, {
+                          maxcount: _ctx.maxcount,
+                          selected: vue.unref(selected),
+                          onRemove: vue.unref(handleSelect),
+                          onClear: vue.unref(handleClear)
+                        }, null, 8, ["maxcount", "selected", "onRemove", "onClear"]),
+                        vue.createVNode(vue.unref(webVue.Button), { onClick: vue.unref(close) }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode("\u53D6\u6D88")
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        vue.createVNode(vue.unref(webVue.Button), {
+                          type: "primary",
+                          onClick: confirm
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(" \u786E\u5B9A ")
+                          ]),
+                          _: 1
+                        })
+                      ], 64)) : vue.createCommentVNode("v-if", true)
+                    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                       vue.createVNode(vue.unref(webVue.Button), { onClick: vue.unref(close) }, {
                         default: vue.withCtx(() => [
                           vue.createTextVNode("\u53D6\u6D88")
@@ -97,17 +131,26 @@ const _sfc_main = vue.defineComponent({
                       }, 8, ["onClick"]),
                       vue.createVNode(vue.unref(webVue.Button), {
                         type: "primary",
-                        onClick: handleConfirm
+                        onClick: ($event) => confirm("crop", onConfirm)
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createTextVNode(" \u786E\u5B9A ")
+                          vue.createTextVNode(" \u88C1\u526A ")
                         ]),
-                        _: 1
-                      })
-                    ])) : vue.createCommentVNode("v-if", true)
+                        _: 2
+                      }, 1032, ["onClick"]),
+                      vue.createVNode(vue.unref(webVue.Button), {
+                        type: "primary",
+                        onClick: ($event) => confirm("use", onConfirm)
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(" \u4F7F\u7528 ")
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ], 64))
                   ]),
                   _: 1
-                }, 40, ["active-key", "onChangeTab"]))
+                }, 40, ["active-key", "onChangeTab"])) : vue.createCommentVNode("v-if", true)
               ])) : (vue.openBlock(), vue.createBlock(vue.unref(index$2), {
                 key: 1,
                 type: "empty",

package/lib/selectResourceModal/components/List/ListVideo/index.js

@@ -6,13 +6,34 @@ const _sfc_main = vue.defineComponent({
   __name: "index",
   setup(__props) {
     const videoThumbOptions = vue.inject("videoThumbOptions");
+    const curSelect = vue.ref("");
+    function handlerConfirm() {
+      const url = curSelect.value;
+      return [
+        {
+          url,
+          alias: url,
+          catalog: "image",
+          thumb: url
+        }
+      ];
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(ListWraper, null, {
-        "footer-extra": vue.withCtx(() => []),
+        "footer-extra": vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "footer-extra", {
+            type: "video",
+            onConfirm: handlerConfirm
+          })
+        ]),
         default: vue.withCtx(() => [
-          vue.unref(videoThumbOptions) ? (vue.openBlock(), vue.createBlock(vue.unref(index), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(videoThumbOptions))), null, 16)) : vue.createCommentVNode("v-if", true)
+          vue.unref(videoThumbOptions) ? (vue.openBlock(), vue.createBlock(vue.unref(index), vue.mergeProps({
+            key: 0,
+            value: curSelect.value,
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => curSelect.value = $event)
+          }, vue.unref(videoThumbOptions), { offset: 115 }), null, 16, ["value"])) : vue.createCommentVNode("v-if", true)
         ]),
-        _: 1
+        _: 3
       });
     };
   }

package/lib/selectResourceModal/components/List/ListWraper.js

@@ -17,6 +17,10 @@ const _hoisted_5 = {
   class: "resource-list-content-empty"
 };
 const _hoisted_6 = { class: "resource-list-footer" };
+const _hoisted_7 = {
+  key: 0,
+  class: "footer-right"
+};
 const _sfc_main = vue.defineComponent({
   __name: "ListWraper",
   props: {
@@ -52,7 +56,9 @@ const _sfc_main = vue.defineComponent({
         ]),
         vue.createElementVNode("div", _hoisted_6, [
           vue.renderSlot(_ctx.$slots, "footer"),
-          vue.renderSlot(_ctx.$slots, "footer-extra")
+          _ctx.$slots["footer-extra"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+            vue.renderSlot(_ctx.$slots, "footer-extra")
+          ])) : vue.createCommentVNode("v-if", true)
         ])
       ]);
     };

package/lib/selectResourceModal/scripts/useCompoLf.js

@@ -1,7 +1,7 @@
 "use strict";
 var vue = require("vue");
 var config = require("../../config.js");
-function useCompoentLifycycle(props, emits) {
+function useCompoentLifycycle(props, emits, handler) {
   const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
   const wrapProps = vue.computed(() => {
     if (props.wrap === "drawer") {
@@ -9,7 +9,8 @@ function useCompoentLifycycle(props, emits) {
         class: "resource-select-drawer",
         header: false,
         width: "1024px",
-        footer: false
+        footer: false,
+        unmountOnClose: true
       };
     }
     return {
@@ -17,7 +18,8 @@ function useCompoentLifycycle(props, emits) {
       width: "986px",
       closable: false,
       hideTitle: false,
-      footer: false
+      footer: false,
+      unmountOnClose: true
     };
   });
   vue.provide("baseAPI", BASE_API);
@@ -26,10 +28,17 @@ function useCompoentLifycycle(props, emits) {
   vue.provide("mediaUseType", vue.computed(() => props.mediaUseType));
   vue.provide("aiThumbList", vue.computed(() => props.aiThumbList));
   vue.provide("videoThumbOptions", vue.computed(() => props.videoThumbOptions));
+  function close() {
+    emits("update:visible", false);
+    handler == null ? void 0 : handler.onClose();
+  }
   return {
     wrapProps,
-    close: () => emits("update:visible", false),
-    submit: (data) => emits("submit", JSON.parse(JSON.stringify(data)))
+    close,
+    submit: (data, ...args) => {
+      emits("submit", JSON.parse(JSON.stringify(data)), ...args);
+      close();
+    }
   };
 }
 module.exports = useCompoentLifycycle;

package/lib/selectResourceModal/scripts/useTabFilter.js

@@ -27,7 +27,6 @@ function useTabFilter(props) {
       keys.unshift("ai");
     if (videoThumbOptions)
       keys.unshift("video");
-    [activeKey.value] = keys;
     return keys.map((key) => ({
       key,
       title: TAB_DICT[key].title

package/lib/selectResourceModal/style/index.css

@@ -178,7 +178,7 @@
 .resource-list-footer {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
 }
 .resource-list-footer .footer-right {
   display: flex;

package/lib/selectResourceModal/style/list.less

@@ -21,7 +21,7 @@
   &-footer {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 10px;
+    padding-bottom: 20px;
 
     .footer-right {
       display: flex;

package/lib/videoThumb/component.js

@@ -12,10 +12,12 @@ const _sfc_main = vue.defineComponent({
   __name: "component",
   props: {
     BASE_API: {},
+    value: {},
     src: {},
-    duration: {}
+    duration: {},
+    offset: {}
   },
-  emits: ["select"],
+  emits: ["select", "update:value"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -23,46 +25,44 @@ const _sfc_main = vue.defineComponent({
     const { thumbs, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs.useVideoThumbs();
     const videoThumbRef = vue.ref();
     const videoThumbDrager = vue.ref();
-    const isDrag = vue.ref(false);
     const width = vue.computed(() => {
       if (!videoThumbRef.value)
         return 0;
       const rect = videoThumbRef.value.getBoundingClientRect();
       return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
     });
+    const startPos = vue.ref(0);
     function moveDragger(moveX) {
       if (!videoThumbDrager.value || !videoThumbRef.value)
         return;
       const rect = videoThumbRef.value.getBoundingClientRect();
-      if (moveX < 0 || moveX > rect.width)
+      const pos = startPos.value + moveX;
+      if (pos < 0 || pos > rect.width - 5)
         return;
-      videoThumbDrager.value.style.left = `${moveX}px`;
-      const index = Math.floor(moveX / width.value);
-      curThumb.value = thumbs.value[index];
+      videoThumbDrager.value.style.left = `${pos}px`;
+      const index = Math.floor(pos / width.value);
+      curThumb.value = thumbs.value[index < thumbs.value.length ? index : thumbs.value.length - 1];
     }
-    const handleMousedown = () => {
-      isDrag.value = true;
-      window.onmouseup = handleMouseup;
-      window.onmousemove = handleMousemove;
-    };
-    const handleMouseup = () => {
-      isDrag.value = false;
-      window.onmouseup = null;
-      window.onmousemove = null;
-    };
-    const handleMousemove = (e) => {
-      if (!isDrag.value)
+    function upDragger() {
+      startPos.value = 0;
+    }
+    function downDragger() {
+      if (!videoThumbDrager.value)
         return;
-      const moveX = e.x - 30;
-      moveDragger(moveX);
-    };
+      const originX = parseInt(videoThumbDrager.value.style.left.replace("px", ""), 10) || 0;
+      startPos.value = originX;
+    }
     function handleSelect(idx) {
       handleSelectThumb(idx);
       moveDragger(idx * width.value + width.value / 2);
     }
+    const { handleMousedown } = useVideoThumbs.useDragger(moveDragger, upDragger, downDragger);
     vue.watch(
       () => curThumb.value,
-      () => emit("select", curThumb.value),
+      () => {
+        emit("select", curThumb.value);
+        emit("update:value", curThumb.value);
+      },
       { immediate: true }
     );
     vue.onMounted(() => {
@@ -79,12 +79,13 @@ const _sfc_main = vue.defineComponent({
           ref: videoThumbRef,
           class: "video-thumb-list"
         }, [
-          vue.createElementVNode("div", {
+          vue.unref(thumbs).length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
             ref_key: "videoThumbDrager",
             ref: videoThumbDrager,
             class: "video-thumb-list-drager",
-            onMousedown: handleMousedown
-          }, null, 544),
+            onMousedown: _cache[0] || (_cache[0] = (...args) => vue.unref(handleMousedown) && vue.unref(handleMousedown)(...args))
+          }, null, 544)) : vue.createCommentVNode("v-if", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(thumbs), (thumb, idx) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: thumb,

package/lib/videoThumb/scripts/useVideoThumbs.js

@@ -47,4 +47,32 @@ function useVideoThumbs() {
     handleSelectThumb
   };
 }
+function useDragger(moveCallback, upCallback, downCallback) {
+  const x = vue.ref(0);
+  const isDrag = vue.ref(false);
+  const handleMousedown = (e) => {
+    isDrag.value = true;
+    x.value = e.x;
+    window.onmouseup = handleMouseup;
+    window.onmousemove = handleMousemove;
+    downCallback && downCallback();
+  };
+  const handleMouseup = () => {
+    isDrag.value = false;
+    x.value = 0;
+    window.onmouseup = null;
+    window.onmousemove = null;
+    upCallback && upCallback();
+  };
+  const handleMousemove = (e) => {
+    if (!isDrag.value)
+      return;
+    moveCallback && moveCallback(e.x - x.value);
+  };
+  return {
+    isDrag,
+    handleMousedown
+  };
+}
+exports.useDragger = useDragger;
 exports.useVideoThumbs = useVideoThumbs;

package/lib/videoThumb/style/index.css

@@ -5,23 +5,25 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
   overflow: hidden;
 }
 .video-thumb .video-player-container {
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
-.video-thumb .video-player-container video {
-  height: 100%;
+.video-thumb .video-player-container img {
+  max-width: 800px;
+  max-height: 100%;
 }
 .video-thumb .video-thumb-list {
   position: relative;
   display: flex;
   height: 80px;
-  padding: 20px 0;
+  padding: 10px 0;
 }
 .video-thumb .video-thumb-list .video-thumb-list-item {
   flex: 1;
@@ -40,10 +42,15 @@
 }
 .video-thumb .video-thumb-list .video-thumb-list-drager {
   position: absolute;
-  top: 20px;
+  top: 10px;
   left: 0;
+  z-index: 100;
   width: 6px;
-  height: calc(100% - 40px);
+  height: calc(100% - 20px);
   background-color: rgb(var(--primary-5));
   cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager:hover {
+  transform: scale(1.05);
 }

package/lib/videoThumb/style/index.less

@@ -5,7 +5,6 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
   overflow: hidden;
 
   // 播放器
@@ -13,10 +12,13 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
 
-    video {
-      height: 100%;
+    img {
+      max-width: 800px;
+      max-height: 100%;
     }
   }
 
@@ -25,7 +27,7 @@
     position: relative;
     display: flex;
     height: 80px;
-    padding: 20px 0;
+    padding: 10px 0;
 
     .video-thumb-list-item {
       flex: 1;
@@ -50,12 +52,18 @@
 
     .video-thumb-list-drager {
       position: absolute;
-      top: 20px;
+      top: 10px;
       left: 0;
+      z-index: 100;
       width: 6px;
-      height: calc(100% - 40px);
+      height: calc(100% - 20px);
       background-color: rgb(var(--primary-5));
       cursor: pointer;
+      transition: transform 0.3s ease-in-out;
+
+      &:hover {
+        transform: scale(1.05);
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.71",
+  "version": "0.3.73-beta",
   "description": "",
   "keywords": [
     "vue",
@@ -133,5 +133,8 @@
     "es",
     "lib",
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "@cmstops/utils": "^1.0.4"
+  }
 }