@cmstops/pro-compo 0.3.71 → 0.3.73

package/es/selectResourceModal/component.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, createElementVNode, createCommentVNode, createVNode, isRef, createTextVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, createElementVNode, createCommentVNode, createVNode, isRef, Fragment, createTextVNode } from "vue";
 import { Drawer, Modal, Button } from "@arco-design/web-vue";
 import emptyData from "../emptyData/index.js";
 import _sfc_main$1 from "./components/ListTabs/index.js";
@@ -13,10 +13,6 @@ const _hoisted_3 = {
   key: 0,
   class: "resource-select-container"
 };
-const _hoisted_4 = {
-  key: 0,
-  class: "footer-right"
-};
 const _sfc_main = defineComponent({
   ...{ name: "selectResourceModal" },
   __name: "component",
@@ -37,7 +33,19 @@ const _sfc_main = defineComponent({
     const emits = __emit;
     const { selected, selectedKeys, disableSelect, handleSelect, handleClear } = useResourceSelect(props);
     const { activeKey, activeComponent, tabKeyList, handelChangeTab } = useTabFilter(props);
-    const { wrapProps, close, submit } = useCompoentLifycycle(props, emits);
+    const { wrapProps, close, submit } = useCompoentLifycycle(props, emits, {
+      onClose: () => {
+        handleClear();
+      }
+    });
+    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") {
@@ -50,8 +58,15 @@ const _sfc_main = 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 openBlock(), createElementBlock("div", _hoisted_1, [
@@ -67,7 +82,8 @@ const _sfc_main = defineComponent({
                   onClose: unref(close)
                 }, null, 8, ["model-value", "tabList", "onClose"]),
                 createCommentVNode(" \u5217\u8868\u5206\u53D1\u5668 "),
-                (openBlock(), createBlock(resolveDynamicComponent(unref(activeComponent)), {
+                _ctx.visible ? (openBlock(), createBlock(resolveDynamicComponent(unref(activeComponent)), {
+                  key: 0,
                   "active-key": unref(activeKey),
                   onChangeTab: unref(handelChangeTab)
                 }, {
@@ -80,14 +96,32 @@ const _sfc_main = defineComponent({
                       onOptions: (e) => handleOptions(e, onOptions)
                     }, null, 8, ["item", "select-keys", "disable", "onSelect", "onOptions"])
                   ]),
-                  "footer-extra": withCtx(() => [
-                    unref(selected).length ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                      createVNode(_sfc_main$3, {
-                        maxcount: _ctx.maxcount,
-                        selected: unref(selected),
-                        onRemove: unref(handleSelect),
-                        onClear: unref(handleClear)
-                      }, null, 8, ["maxcount", "selected", "onRemove", "onClear"]),
+                  "footer-extra": withCtx(({ type, onConfirm }) => [
+                    type !== "video" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      unref(selected).length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        createVNode(_sfc_main$3, {
+                          maxcount: _ctx.maxcount,
+                          selected: unref(selected),
+                          onRemove: unref(handleSelect),
+                          onClear: unref(handleClear)
+                        }, null, 8, ["maxcount", "selected", "onRemove", "onClear"]),
+                        createVNode(unref(Button), { onClick: unref(close) }, {
+                          default: withCtx(() => [
+                            createTextVNode("\u53D6\u6D88")
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]),
+                        createVNode(unref(Button), {
+                          type: "primary",
+                          onClick: confirm
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(" \u786E\u5B9A ")
+                          ]),
+                          _: 1
+                        })
+                      ], 64)) : createCommentVNode("v-if", true)
+                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                       createVNode(unref(Button), { onClick: unref(close) }, {
                         default: withCtx(() => [
                           createTextVNode("\u53D6\u6D88")
@@ -96,17 +130,26 @@ const _sfc_main = defineComponent({
                       }, 8, ["onClick"]),
                       createVNode(unref(Button), {
                         type: "primary",
-                        onClick: handleConfirm
+                        onClick: ($event) => confirm("crop", onConfirm)
                       }, {
                         default: withCtx(() => [
-                          createTextVNode(" \u786E\u5B9A ")
+                          createTextVNode(" \u88C1\u526A ")
                         ]),
-                        _: 1
-                      })
-                    ])) : createCommentVNode("v-if", true)
+                        _: 2
+                      }, 1032, ["onClick"]),
+                      createVNode(unref(Button), {
+                        type: "primary",
+                        onClick: ($event) => confirm("use", onConfirm)
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(" \u4F7F\u7528 ")
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ], 64))
                   ]),
                   _: 1
-                }, 40, ["active-key", "onChangeTab"]))
+                }, 40, ["active-key", "onChangeTab"])) : createCommentVNode("v-if", true)
               ])) : (openBlock(), createBlock(unref(emptyData), {
                 key: 1,
                 type: "empty",

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

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

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

@@ -16,6 +16,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 = defineComponent({
   __name: "ListWraper",
   props: {
@@ -51,7 +55,9 @@ const _sfc_main = defineComponent({
         ]),
         createElementVNode("div", _hoisted_6, [
           renderSlot(_ctx.$slots, "footer"),
-          renderSlot(_ctx.$slots, "footer-extra")
+          _ctx.$slots["footer-extra"] ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "footer-extra")
+          ])) : createCommentVNode("v-if", true)
         ])
       ]);
     };

package/es/selectResourceModal/scripts/useCompoLf.d.ts

@@ -1,9 +1,13 @@
-export default function useCompoentLifycycle(props: any, emits: any): {
+declare type LifeCycleHandler = {
+    onClose: () => void;
+};
+export default function useCompoentLifycycle(props: any, emits: any, handler?: LifeCycleHandler): {
     wrapProps: import("vue").ComputedRef<{
         class: string;
         header: boolean;
         width: string;
         footer: boolean;
+        unmountOnClose: boolean;
         bodyClass?: undefined;
         closable?: undefined;
         hideTitle?: undefined;
@@ -13,9 +17,11 @@ export default function useCompoentLifycycle(props: any, emits: any): {
         closable: boolean;
         hideTitle: boolean;
         footer: boolean;
+        unmountOnClose: boolean;
         class?: undefined;
         header?: undefined;
     }>;
-    close: () => any;
-    submit: (data: any) => any;
+    close: () => void;
+    submit: (data: any, ...args: any) => void;
 };
+export {};

package/es/selectResourceModal/scripts/useCompoLf.js

@@ -1,6 +1,6 @@
 import { computed, provide } from "vue";
 import { DEFAULT_BASE_API } from "../../config.js";
-function useCompoentLifycycle(props, emits) {
+function useCompoentLifycycle(props, emits, handler) {
   const BASE_API = props.BASE_API || DEFAULT_BASE_API;
   const wrapProps = computed(() => {
     if (props.wrap === "drawer") {
@@ -8,7 +8,8 @@ function useCompoentLifycycle(props, emits) {
         class: "resource-select-drawer",
         header: false,
         width: "1024px",
-        footer: false
+        footer: false,
+        unmountOnClose: true
       };
     }
     return {
@@ -16,7 +17,8 @@ function useCompoentLifycycle(props, emits) {
       width: "986px",
       closable: false,
       hideTitle: false,
-      footer: false
+      footer: false,
+      unmountOnClose: true
     };
   });
   provide("baseAPI", BASE_API);
@@ -25,10 +27,17 @@ function useCompoentLifycycle(props, emits) {
   provide("mediaUseType", computed(() => props.mediaUseType));
   provide("aiThumbList", computed(() => props.aiThumbList));
   provide("videoThumbOptions", 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();
+    }
   };
 }
 export { useCompoentLifycycle as default };

package/es/selectResourceModal/scripts/useTabFilter.js

@@ -26,7 +26,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/es/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/es/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/es/videoThumb/component.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, unref, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
 import { DEFAULT_BASE_API } from "../config.js";
-import { useVideoThumbs } from "./scripts/useVideoThumbs.js";
+import { useVideoThumbs, useDragger } from "./scripts/useVideoThumbs.js";
 const _hoisted_1 = { class: "video-thumb" };
 const _hoisted_2 = { class: "video-player-container" };
 const _hoisted_3 = ["src"];
@@ -11,10 +11,12 @@ const _sfc_main = 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;
@@ -22,46 +24,44 @@ const _sfc_main = defineComponent({
     const { thumbs, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs();
     const videoThumbRef = ref();
     const videoThumbDrager = ref();
-    const isDrag = ref(false);
     const width = computed(() => {
       if (!videoThumbRef.value)
         return 0;
       const rect = videoThumbRef.value.getBoundingClientRect();
       return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
     });
+    const startPos = 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 } = useDragger(moveDragger, upDragger, downDragger);
     watch(
       () => curThumb.value,
-      () => emit("select", curThumb.value),
+      () => {
+        emit("select", curThumb.value);
+        emit("update:value", curThumb.value);
+      },
       { immediate: true }
     );
     onMounted(() => {
@@ -78,12 +78,13 @@ const _sfc_main = defineComponent({
           ref: videoThumbRef,
           class: "video-thumb-list"
         }, [
-          createElementVNode("div", {
+          unref(thumbs).length > 0 ? (openBlock(), createElementBlock("div", {
+            key: 0,
             ref_key: "videoThumbDrager",
             ref: videoThumbDrager,
             class: "video-thumb-list-drager",
-            onMousedown: handleMousedown
-          }, null, 544),
+            onMousedown: _cache[0] || (_cache[0] = (...args) => unref(handleMousedown) && unref(handleMousedown)(...args))
+          }, null, 544)) : createCommentVNode("v-if", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(thumbs), (thumb, idx) => {
             return openBlock(), createElementBlock("div", {
               key: thumb,

package/es/videoThumb/scripts/useVideoThumbs.d.ts

@@ -5,3 +5,7 @@ export declare function useVideoThumbs(): {
     getVideoThumbs: (BASE_API: string, url: string, duration: number) => Promise<void>;
     handleSelectThumb: (idx: number) => void;
 };
+export declare function useDragger(moveCallback: any, upCallback: any, downCallback: any): {
+    isDrag: import("vue").Ref<boolean>;
+    handleMousedown: (e: MouseEvent) => void;
+};

package/es/videoThumb/scripts/useVideoThumbs.js

@@ -45,4 +45,31 @@ function useVideoThumbs() {
     handleSelectThumb
   };
 }
-export { useVideoThumbs };
+function useDragger(moveCallback, upCallback, downCallback) {
+  const x = ref(0);
+  const isDrag = 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
+  };
+}
+export { useDragger, useVideoThumbs };

package/es/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/es/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/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);
 }