修改问题

src/components/card-preview/video-modal/index.tsx

@@ -3,8 +3,7 @@ import {
   onMounted,
   onUnmounted,
   reactive,
-  toRefs,
-  watch
+  toRefs
 } from 'vue';
 import { ref } from 'vue';
 import TCPlayer from 'tcplayer.js';
@@ -74,14 +73,6 @@ export default defineComponent({
     const videoItem = ref();
     const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
 
-    watch(
-      () => props.src,
-      () => {
-        onToggleVideo()
-        onReplay();
-      }
-    );
-
     // 对时间进行格式化
     const timeFormat = (num: number) => {
       if (num > 0) {

src/components/layout/guide-section/guide-drag.ts

@@ -32,13 +32,29 @@ type baseSizeType = {
   minHeight: number;
   maxHeight: number;
   maxWidth: number;
-  borderRadius: number;
   transformX: number;
   transformY: number;
+  defaultWidth: number;
+  defaultHeight: number;
   width: number;
   height: number;
 };
 
+type initSizeType = {
+  /** 默认宽 */
+  width?: number;
+  /** 默认高 */
+  height?: number;
+  /** 最小宽 */
+  minWidth?: number;
+  /** 最小高 */
+  minHeight?: number;
+  /** 允许拖动方向 上/上右/右/下右/下/下左/左/上左 */
+  resizeDirection?: boolean[];
+  /** 初始定位 */
+  defaultPosition?: string;
+};
+
 /***
  * 初始化默认弹窗位置
  */
@@ -61,7 +77,7 @@ export default function useDrag(
   classList: string[],
   boxClass: string,
   dragShow: Ref<boolean>,
-  initSize?: any
+  initSize?: initSizeType
 ) {
   const windowInfo = reactive({
     // 小窗口 侧边大窗口
@@ -125,82 +141,66 @@ export default function useDrag(
   });
 
   const baseSize = reactive<baseSizeType>({
-    resizeDirection: [true, false, false, false, true, false, false, false],
+    resizeDirection: initSize?.resizeDirection || [
+      true,
+      false,
+      false,
+      false,
+      true,
+      false,
+      false,
+      false
+    ],
     layoutTopHeight: 0,
     windowHeight: window.innerHeight,
     windowWidth: window.innerWidth,
     // 窗口模式的尺寸
     winWidth: 1010,
     winHeight: 650,
-    winMinWidth: 800,
-    minWidth: 400,
-    minHeight: 640,
+    winMinWidth: initSize?.minWidth || 800,
+    minWidth: initSize?.minWidth || 400,
+    minHeight: initSize?.minHeight || 340,
     maxHeight: window.innerHeight,
     maxWidth: window.innerWidth > 1024 ? 1024 : window.innerWidth,
-    borderRadius: 12,
     transformX: window.innerWidth - 400 - initPos.right,
     transformY: (window.innerHeight - 640) / 2,
+    defaultWidth: initSize?.width || 400,
+    defaultHeight: initSize?.height || 640,
     height: initSize?.height || 640,
     width: initSize?.width || 400
   });
   const dragStyles = reactive({
     maxHeight: getSizeToUnit(baseSize.maxHeight),
     minWidth: getSizeToUnit(baseSize.minWidth),
-    minHeight: getSizeToUnit(baseSize.minHeight),
-    borderRadius: '0px'
+    minHeight: getSizeToUnit(baseSize.minHeight)
   });
+
   nextTick(() => {
     const layoutTopHeight =
       document.querySelector('.layoutTop')?.clientHeight || 0;
     baseSize.layoutTopHeight = Math.ceil(layoutTopHeight);
     baseSize.windowHeight = window.innerHeight - layoutTopHeight;
     baseSize.maxHeight = window.innerHeight - layoutTopHeight;
+    // 判断窗口的高度与默认高度比例
+    if (baseSize.defaultHeight >= baseSize.maxHeight) {
+      baseSize.defaultHeight = baseSize.maxHeight - 100;
+    }
 
-    const translateY = (baseSize.windowHeight - baseSize.minHeight) / 2;
+    const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
     baseSize.transformX =
-      baseSize.windowWidth - baseSize.minWidth - initPos.right;
+      baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
     baseSize.transformY = translateY;
     dragStyles.maxHeight = getSizeToUnit(baseSize.maxHeight);
 
     // 初始化定位
     if (initSize?.defaultPosition === 'center') {
       // alert(initSize.width)
-      const transformX = (window.innerWidth - (initSize.width || 400)) / 2;
-      const transformY = (baseSize.windowHeight - (initSize.height || 640)) / 2;
-      console.log({ transformX, transformY });
+      const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
+      const transformY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
       baseSize.transformX = transformX;
       baseSize.transformY = transformY;
     }
-  });
-  // watch(dragShow, () => {
-  //   if (dragShow.value) {
-  //     // 初始化pos值
-  //     // initPos();
-  //     // window.addEventListener('resize', refreshPos);
-  //     nextTick(() => {
-  //       const boxClassDom = document.querySelector(
-  //         `.${boxClass}`
-  //       ) as HTMLElement;
-  //       if (!boxClassDom) {
-  //         return;
-  //       }
-  //       console.log(boxClassDom, 'boxClassDom');
-  //       classList.map((className: string) => {
-  //         const classDom = document.querySelector(
-  //           `.${className}`
-  //         ) as HTMLElement;
-  //         if (classDom) {
-  //           classDom.style.cursor = 'move';
-  //           drag(classDom, boxClassDom, baseSize);
-  //         }
-  //       });
-  //     });
-  //   } else {
-  //     // window.removeEventListener('resize', refreshPos);
-  //   }
-  // });
 
-  nextTick(() => {
     const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
     if (!boxClassDom) {
       return;
@@ -216,24 +216,41 @@ export default function useDrag(
     });
   });
 
+  // watch(dragShow, () => {
+  //   if (dragShow.value) {
+  //     // 初始化pos值
+  //     // initPos();
+  //     window.addEventListener('resize', refreshPos);
+  //     // nextTick(() => {
+  //     //   const boxClassDom = document.querySelector(
+  //     //     `.${boxClass}`
+  //     //   ) as HTMLElement;
+  //     //   if (!boxClassDom) {
+  //     //     return;
+  //     //   }
+  //     //   console.log(boxClassDom, 'boxClassDom');
+  //     //   classList.map((className: string) => {
+  //     //     const classDom = document.querySelector(
+  //     //       `.${className}`
+  //     //     ) as HTMLElement;
+  //     //     if (classDom) {
+  //     //       classDom.style.cursor = 'move';
+  //     //       drag(classDom, boxClassDom, baseSize);
+  //     //     }
+  //     //   });
+  //     // });
+
+  //   } else {
+  //     window.removeEventListener('resize', refreshPos);
+  //   }
+  // });
+
   /**
    * 添加功能放大缩小操作DOM
    * @param parentElement {添加拖动父级元素}
    * @param direction {允许拖动的位置 上/上右/右/下右/下/下左/左/上左}
    */
-  function addReSizeDom(
-    parentElement: HTMLElement,
-    direction: boolean[] = [
-      true,
-      false,
-      false,
-      false,
-      true,
-      false,
-      false,
-      false
-    ]
-  ) {
+  function addReSizeDom(parentElement: HTMLElement, direction: boolean[] = []) {
     function addResizeDirection(params: {
       width: string;
       height: string;
@@ -256,7 +273,7 @@ export default function useDrag(
       dom.style.top = params.top;
       dom.style.bottom = params.bottom;
       dom.style.right = params.right;
-      dom.style.zIndex = params.zIndex || '0';
+      dom.style.zIndex = params.zIndex || '9';
       dom.style.cursor = params.cursor;
       dom.style.pointerEvents = params.pointerEvents;
       parentElement.appendChild(dom);
@@ -279,7 +296,7 @@ export default function useDrag(
       height: '20px',
       right: '-10px',
       top: '-10px',
-      zIndex: '1',
+      zIndex: '10',
       cursor: 'ne-resize',
       direction: 'TOP_RIGHT',
       pointerEvents: direction[1] ? 'all' : 'none'
@@ -303,7 +320,7 @@ export default function useDrag(
       right: '-10px',
       bottom: '-10px',
       cursor: 'se-resize',
-      zIndex: '1',
+      zIndex: '10',
       direction: 'BOTTOM_RIGHT',
       pointerEvents: direction[3] ? 'all' : 'none'
     });
@@ -326,7 +343,7 @@ export default function useDrag(
       left: '-10px',
       bottom: '-10px',
       cursor: 'sw-resize',
-      zIndex: '1',
+      zIndex: '10',
       direction: 'BOTTOM_LEFT',
       pointerEvents: direction[5] ? 'all' : 'none'
     });
@@ -349,34 +366,36 @@ export default function useDrag(
       left: '-10px',
       top: '-10px',
       cursor: 'nw-resize',
-      zIndex: '1',
+      zIndex: '10',
       direction: 'TOP_LEFT',
       pointerEvents: direction[7] ? 'all' : 'none'
     });
   }
 
   function refreshPos() {
-    if (pos.value.left === -1 && pos.value.top === -1) {
-      return;
-    }
-    const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
-    if (!boxClassDom) return;
-    const parentElementRect = boxClassDom.getBoundingClientRect();
-    const clientWidth = document.documentElement.clientWidth;
-    const clientHeight = document.documentElement.clientHeight;
-    const { top, left } = pos.value;
-    const maxLeft = clientWidth - parentElementRect.width;
-    const maxTop = clientHeight - parentElementRect.height;
-    let moveX = left;
-    let moveY = top;
-    const minLeft = 0;
-    const minTop = 0;
-    moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX;
-    moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY;
-    pos.value = {
-      top: moveY,
-      left: moveX
-    };
+    // if (pos.value.left === -1 && pos.value.top === -1) {
+    //   return;
+    // }
+    // const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
+    // if (!boxClassDom) return;
+    // const parentElementRect = boxClassDom.getBoundingClientRect();
+    // const clientWidth = document.documentElement.clientWidth;
+    // const clientHeight = document.documentElement.clientHeight;
+    // const { top, left } = pos.value;
+    // const maxLeft = clientWidth - parentElementRect.width;
+    // const maxTop = clientHeight - parentElementRect.height;
+    // let moveX = left;
+    // let moveY = top;
+    // const minLeft = 0;
+    // const minTop = 0;
+    // moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX;
+    // moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY;
+    // pos.value = {
+    //   top: moveY,
+    //   left: moveX
+    // };
+
+    onReset();
   }
 
   /** 切换窗口 */
@@ -389,52 +408,68 @@ export default function useDrag(
         baseSize.layoutTopHeight / 2;
       baseSize.width = baseSize.winWidth;
       baseSize.height = baseSize.winHeight;
-      dragStyles.borderRadius = getSizeToUnit(baseSize.borderRadius);
     } else if (windowInfo.windowType === 'LARGE') {
       windowInfo.windowType = 'SMALL';
-      const translateY = (baseSize.windowHeight - baseSize.minHeight) / 2;
+      const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
       baseSize.transformX =
-        baseSize.windowWidth - baseSize.minWidth - initPos.right;
+        baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
       baseSize.transformY =
         translateY > initPos.top
           ? translateY + (translateY - initPos.top)
           : translateY;
-      baseSize.width = baseSize.minWidth;
-      baseSize.height = baseSize.minHeight;
-      dragStyles.borderRadius = '0';
+      baseSize.width = baseSize.defaultWidth;
+      baseSize.height = baseSize.defaultHeight;
     }
   }
 
   /** 格式化尺寸 */
   function onResize() {
+    windowInfo.windowType = 'SMALL';
     if (windowInfo.currentType === 'SMALL') {
       windowInfo.currentType = 'LARGE';
-      windowInfo.windowType = 'SMALL';
-      baseSize.transformX = baseSize.windowWidth - baseSize.minWidth;
+      baseSize.transformX = baseSize.windowWidth - baseSize.defaultWidth;
       baseSize.transformY = 0;
-      baseSize.width = baseSize.minWidth;
+      baseSize.width = baseSize.defaultWidth;
       baseSize.height = baseSize.maxHeight;
-      dragStyles.borderRadius = '0';
     } else if (windowInfo.currentType === 'LARGE') {
       windowInfo.currentType = 'SMALL';
-      windowInfo.windowType = 'SMALL';
       baseSize.transformX =
-        baseSize.windowWidth - baseSize.minWidth - initPos.right;
+        baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
       baseSize.transformY =
-        baseSize.windowHeight - baseSize.minHeight - initPos.top;
-      baseSize.width = baseSize.minWidth;
-      baseSize.height = baseSize.minHeight;
-      dragStyles.borderRadius = '0';
+        baseSize.windowHeight - baseSize.defaultHeight - initPos.top;
+      baseSize.width = baseSize.defaultWidth;
+      baseSize.height = baseSize.defaultHeight;
     }
   }
 
+  /** 重置样式 */
+  function onReset() {
+    windowInfo.currentType = 'SMALL';
+    windowInfo.windowType = 'SMALL';
+    if (initSize?.defaultPosition === 'center') {
+      const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
+      const transformY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
+      baseSize.transformX = transformX;
+      baseSize.transformY = transformY;
+    } else {
+      baseSize.transformX =
+        baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
+      baseSize.transformY =
+        baseSize.windowHeight - baseSize.defaultHeight - initPos.top;
+    }
+
+    baseSize.width = baseSize.defaultWidth;
+    baseSize.height = baseSize.defaultHeight;
+  }
+
   return {
     pos,
     baseSize,
     windowInfo,
     styleDrag,
     onScreen,
-    onResize
+    onResize,
+    onReset
   };
 }
 
@@ -482,13 +517,6 @@ function drag(
       }
     }
     function onRight(moveX: number) {
-      // moveX =
-      //   moveX < minLeft
-      //     ? minLeft
-      //     : moveX > maxResizeLeft
-      //     ? maxResizeLeft
-      //     : moveX;
-
       const suffix = Math.ceil(
         baseWidth + moveX - (baseSize.width + baseSize.transformX)
       );

src/components/layout/guide-section/index.module.less

@@ -90,6 +90,10 @@
       background: url('./images/resize.png') no-repeat center;
       background-size: contain;
     }
+    .resizeLarge {
+      background: url('./images/resize-large.png') no-repeat center;
+      background-size: contain;
+    }
     .close {
       background: url('./images/close.png') no-repeat center;
       background-size: contain;
@@ -238,7 +242,9 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%);
+        // transform: translate(-50%);
+        margin-left: -25px;
+        margin-top: -25px;
         pointer-events: none;
       }
     }
@@ -251,7 +257,7 @@
   touch-action: none;
   // width: 400Px;
   // height: 621Px;
-  display: inline-block;
+  // display: flex;
   top: 0px;
   left: 0px;
   cursor: auto;

src/components/layout/guide-section/index.tsx

@@ -13,7 +13,6 @@ import {
   NCollapseItem,
   NImage,
   NImageGroup,
-  NModal,
   NSpace,
   NSpin
 } from 'naive-ui';
@@ -25,7 +24,6 @@ import {
 } from '/src/api/user';
 import TheEmpty from '../../TheEmpty';
 import VideoModal from '../../card-preview/video-modal';
-import { modalClickMask } from '/src/state';
 import useDrag from './guide-drag';
 import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 
@@ -49,7 +47,7 @@ export default defineComponent({
     const previewImgList = ref<string[]>([]);
 
     const guideBoxClass = 'guideBoxClass_drag';
-    const { styleDrag, windowInfo, onScreen, onResize } = useDrag(
+    const { styleDrag, windowInfo, onScreen, onResize, onReset } = useDrag(
       [`${guideBoxClass} .guideTitle`],
       guideBoxClass,
       toRef(opInfo, 'showGuide')
@@ -61,6 +59,9 @@ export default defineComponent({
       videoBoxClass,
       previewShow,
       {
+        resizeDirection: [true, true, true, true, true, true, true, true],
+        minHeight: 400,
+        minWidth: 616.5,
         defaultPosition: 'center',
         width: 1000,
         height: 640
@@ -84,12 +85,14 @@ export default defineComponent({
 
       if (!opInfo.showGuide) {
         previewShow.value = false;
+        videoBoxData.onReset();
       }
     };
 
     /** 操作视频窗口状态 */
     const onToggleVideo = () => {
       previewShow.value = !previewShow.value;
+      if (!previewShow.value) videoBoxData.onReset();
     };
 
     const onClickItem = async (item: any) => {
@@ -147,7 +150,7 @@ export default defineComponent({
           '<div class="videoSection"><video class="manualVideo" onClick="onLookVideo(this)" '
         );
         opFlow = opFlow.replace(/<\/video>/gi, '</video></div>');
-        opFlow = opFlow.replace(/controls/gi, '');
+        opFlow = opFlow.replace(/controls/gi, 'c');
         data.opFlow = opFlow;
 
         opInfo.manualDetail = data || {};
@@ -171,6 +174,7 @@ export default defineComponent({
     onBeforeRouteUpdate((route: any) => {
       if (route.path !== opInfo.routePath) {
         opInfo.showGuide = false;
+        onReset();
         opInfo.routePath = route.path === '/' ? '/Home' : route.path;
         windowInfo.showType = 'MENU';
         opInfo.searchValue = '';
@@ -196,6 +200,7 @@ export default defineComponent({
 
       // 默认关闭视频
       previewShow.value = false;
+      videoBoxData.onReset();
     };
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -203,11 +208,16 @@ export default defineComponent({
     window.onLookVideo = (target: any) => {
       const sourceElement = target.querySelector('source');
       const videoSrc = sourceElement ? sourceElement.src : null;
-      previewUrl.value = videoSrc;
-      previewShow.value = true;
-      // nextTick(() => {
+      // previewUrl.value = '';
 
+      // nextTick(() => {
+      //   setTimeout(() => {
+      //     previewUrl.value = videoSrc;
+      //     previewShow.value = true;
+      //   }, 0);
       // });
+      previewUrl.value = videoSrc;
+      previewShow.value = true;
     };
 
     return () => (
@@ -219,7 +229,10 @@ export default defineComponent({
           ]}>
           <div
             class={[styles.guideSection, guideBoxClass]}
-            style={{ ...styleDrag.value }}>
+            style={{
+              ...styleDrag.value,
+              borderRadius: windowInfo.windowType === 'LARGE' ? '16px' : ''
+            }}>
             <div class={styles.guideCenter}>
               <div class={[styles.guideTitle, 'guideTitle']}>
                 <div class={styles.name} onClick={onClickMenu}>
@@ -238,7 +251,14 @@ export default defineComponent({
                         : ''
                     ]}
                     onClick={onScreen}></i>
-                  <i class={styles.resize} onClick={onResize}></i>
+                  <i
+                    class={[
+                      styles.resize,
+                      windowInfo.currentType === 'SMALL'
+                        ? styles.resizeLarge
+                        : ''
+                    ]}
+                    onClick={onResize}></i>
                   <i class={styles.close} onClick={onToggle}></i>
                 </div>
               </div>
@@ -347,27 +367,11 @@ export default defineComponent({
             </div>
           </div>
 
-          {/* <NModal
-            maskClosable={modalClickMask}
-            v-model:show={previewShow.value}
-            preset="card"
-            showIcon={false}
-            class={['modalTitle background cardPreviewGuide']}
-            title="预览"
-            blockScroll={false}>
-            <VideoModal
-              title="预览"
-              src={previewUrl.value}
-              isDownload
-              fullscreen
-            />
-          </NModal> */}
-
           <div
             class={[styles.videoModal, videoBoxClass]}
             style={{
               ...videoBoxData.styleDrag.value,
-              display: previewShow.value ? 'block' : 'none'
+              display: previewShow.value ? 'flex' : 'none'
             }}>
             <div class={[styles.guideTitle, 'guideTitleVideo']}>
               <div class={styles.name}>预览</div>
@@ -377,6 +381,7 @@ export default defineComponent({
             </div>
             {previewShow.value ? (
               <VideoModal
+                key={previewUrl.value}
                 title="预览"
                 src={previewUrl.value}
                 isDownload={false}