Merge branch 'iteration-20250110-last' into jenkins

src/App.tsx

@@ -7,45 +7,34 @@ import { lighten } from './utils';
 import RouterError from './components/RouterError';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useUserStore } from './store/modules/users';
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    // console.log('unregister - pwa');
-    // navigator.serviceWorker.ready.then(registration => {
-    //   registration.unregister();
-    // });
-    // navigator.serviceWorker
-    //   .getRegistrations()
-    //   .then(registrations => {
-    //     for (const registration of registrations) {
-    //       registration.unregister().then(boolean => {
-    //         if (boolean) {
-    //           console.log('Service Worker unregistered successfully');
-    //         } else {
-    //           console.log('Service Worker unregistration failed');
-    //         }
-    //       });
-    //     }
-    //   })
-    //   .catch(error => {
-    //     console.error('Error getting Service Worker registrations:', error);
-    //   });
-  } else {
-    console.log('Service Workers are not supported in this browser');
-  }
-}
+import { modalClickMask } from './state';
+// import ScreenTips from './screen-tips';
 
 export default defineComponent({
   name: 'App',
   setup() {
-    const isIOSChrome = ref();
+    const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
+      onRegistered(r: any) {
+        console.log(r, 'registered');
+
+        // r &&
+        //   setInterval(() => {
+        //     r.update();
+        //   }, 30000);
+      },
+      onNeedRefresh() {
+        console.log('新版本可用！');
+      },
+      onOfflineReady() {
+        console.log('离线功能就绪。');
+      }
+    });
+
+    // const isIOSChrome = ref();
+    // const showModalMask = ref(false);
     const getThemeOverrides = computed(() => {
       const appTheme = setting.appTheme;
       const lightenStr = lighten(setting.appTheme, 6);
-
-      //   errorColor: string;
-      // errorColorHover: string;
-      // errorColorPressed: string;
-      // errorColorSuppl: string;
       return {
         common: {
           primaryColor: appTheme,
@@ -61,109 +50,103 @@ export default defineComponent({
       };
     });
     // const showModal = ref(false);
-    const showModalMsg = ref('');
-    // 判断浏览器
-    // 是否是360
-    const check360 = () => {
-      const result = false;
-      for (const key in navigator.plugins) {
-        // np-mswmp.dll只在360浏览器下存在
-        if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
-          return !result;
-        }
-      }
-      return result;
-    };
+    // const showModalMsg = ref('');
+    // // 判断浏览器
+    // // 是否是360
+    // const check360 = () => {
+    //   const result = false;
+    //   for (const key in navigator.plugins) {
+    //     // np-mswmp.dll只在360浏览器下存在
+    //     if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
+    //       return !result;
+    //     }
+    //   }
+    //   return result;
+    // };
     //
 
-    const isChrome = () => {
-      const isChromium = window.chrome,
-        winNav = window.navigator,
-        vendorName = winNav.vendor,
-        isOpera = winNav.userAgent.indexOf('OPR') > -1,
-        isIEedge = winNav.userAgent.indexOf('Edge') > -1,
-        isIOSChrome = winNav.userAgent.match('CriOS'),
-        // QQ
-        isQQBriwser =
-          winNav.userAgent.indexOf('QQBrowser') > -1 ||
-          winNav.userAgent.indexOf('QQ') > -1,
-        // 搜狗
-        isSouggou =
-          winNav.userAgent.indexOf('se 2.x') > -1 ||
-          winNav.userAgent.indexOf('MetaSr') > -1,
-        // 360
-        is360 = check360() && winNav.userAgent.indexOf('Safari') > -1,
-        // 遨游
-        isMaxthon = winNav.userAgent.indexOf('Maxthon') > -1,
-        // 是否为2345浏览器
-        is2345Explorer = winNav.userAgent.includes('2345Explorer'),
-        // 世界之窗
-        isTheWorld = winNav.userAgent.indexOf('TheWorld') > -1,
-        // 猎豹
-        isLiebao = winNav.userAgent.indexOf('LBBROWSER') > -1;
-      // console.log(isQQBriwser, isSouggou, is360, isMaxthon, is2345Explorer, isTheWorld, isLiebao)
-      if (isIOSChrome) {
-        return true;
-      } else if (
-        isChromium !== null &&
-        typeof isChromium !== 'undefined' &&
-        vendorName === 'Google Inc.' &&
-        isOpera === false &&
-        isIEedge === false &&
-        isQQBriwser === false &&
-        isSouggou === false &&
-        is360 === false &&
-        isMaxthon === false &&
-        is2345Explorer === false &&
-        isTheWorld === false &&
-        isLiebao === false
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    };
+    // const isChrome = () => {
+    //   const isChromium = (window as any).chrome,
+    //     winNav = window.navigator,
+    //     vendorName = winNav.vendor,
+    //     isOpera = winNav.userAgent.indexOf('OPR') > -1,
+    //     isIEedge = winNav.userAgent.indexOf('Edge') > -1,
+    //     isIOSChrome = winNav.userAgent.match('CriOS'),
+    //     // QQ
+    //     isQQBriwser =
+    //       winNav.userAgent.indexOf('QQBrowser') > -1 ||
+    //       winNav.userAgent.indexOf('QQ') > -1,
+    //     // 搜狗
+    //     isSouggou =
+    //       winNav.userAgent.indexOf('se 2.x') > -1 ||
+    //       winNav.userAgent.indexOf('MetaSr') > -1,
+    //     // 360
+    //     is360 = check360() && winNav.userAgent.indexOf('Safari') > -1,
+    //     // 遨游
+    //     isMaxthon = winNav.userAgent.indexOf('Maxthon') > -1,
+    //     // 是否为2345浏览器
+    //     is2345Explorer = winNav.userAgent.includes('2345Explorer'),
+    //     // 世界之窗
+    //     isTheWorld = winNav.userAgent.indexOf('TheWorld') > -1,
+    //     // 猎豹
+    //     isLiebao = winNav.userAgent.indexOf('LBBROWSER') > -1;
+    //   // console.log(isQQBriwser, isSouggou, is360, isMaxthon, is2345Explorer, isTheWorld, isLiebao)
+    //   if (isIOSChrome) {
+    //     return true;
+    //   } else if (
+    //     isChromium !== null &&
+    //     typeof isChromium !== 'undefined' &&
+    //     vendorName === 'Google Inc.' &&
+    //     isOpera === false &&
+    //     isIEedge === false &&
+    //     isQQBriwser === false &&
+    //     isSouggou === false &&
+    //     is360 === false &&
+    //     isMaxthon === false &&
+    //     is2345Explorer === false &&
+    //     isTheWorld === false &&
+    //     isLiebao === false
+    //   ) {
+    //     return true;
+    //   } else {
+    //     return false;
+    //   }
+    // };
 
-    // 获取谷歌版本
-    const getChromeVersion = () => {
-      const arr = navigator.userAgent.split(' ');
-      let chromeVersion = '' as any;
-      for (let i = 0; i < arr.length; i++) {
-        if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
-      }
-      if (chromeVersion) {
-        return Number(chromeVersion.split('/')[1].split('.')[0]);
-      } else {
-        return false;
-      }
-    };
+    // // 获取谷歌版本
+    // const getChromeVersion = () => {
+    //   const arr = navigator.userAgent.split(' ');
+    //   let chromeVersion = '' as any;
+    //   for (let i = 0; i < arr.length; i++) {
+    //     if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
+    //   }
+    //   if (chromeVersion) {
+    //     return Number(chromeVersion.split('/')[1].split('.')[0]);
+    //   } else {
+    //     return false;
+    //   }
+    // };
 
-    const isChromeFlag = isChrome();
-    // console.log('isChromeFlag', isChromeFlag);
-    if (isChromeFlag) {
-      const chromeVersion = getChromeVersion();
-      if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
-        showModalMsg.value =
-          '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
-        // showModal.value = true;
-      }
-      // if (chromeVersion) {
-      //   return Number(chromeVersion.split('/')[1].split('.')[0]);
-      // } else {
-      //   return false;
-      // }
-    } else {
-      showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
-      // showModal.value = true;
-      console.log('---');
-    }
-    const submitCallback = () => {
-      window.open('https://www.google.cn/intl/zh-CN/chrome/');
-    };
+    // const isChromeFlag = isChrome();
+    // // console.log('isChromeFlag', isChromeFlag);
+    // if (isChromeFlag) {
+    //   const chromeVersion = getChromeVersion();
+    //   if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
+    //     showModalMsg.value =
+    //       '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
+    //   }
+    // } else {
+    //   showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
+    //   // showModal.value = true;
+    //   console.log('---');
+    // }
+    // const submitCallback = () => {
+    //   window.open('https://www.google.cn/intl/zh-CN/chrome/');
+    // };
     const handleOpen = (e: MessageEvent) => {
       if (e.data?.api === 'onLogin') {
         const userStore = useUserStore();
-        const router = useRouter();
+        // const router = useRouter();
         const documentDom: any = document;
         documentDom.exitFullscreen
           ? documentDom.exitFullscreen()
@@ -177,8 +160,21 @@ export default defineComponent({
       }
     };
 
+    // const resize = () => {
+    //   const params = {
+    //     width: document.body.clientWidth,
+    //     height: document.body.clientHeight
+    //   };
+    //   if (params.height >= params.width) {
+    //     showModalMask.value = true;
+    //   } else {
+    //     showModalMask.value = false;
+    //   }
+    // };
+
     onMounted(() => {
       window.addEventListener('message', handleOpen);
+      // window.addEventListener('resize', resize);
 
       // 禁用右键菜单
       document.addEventListener('contextmenu', function (event) {
@@ -196,20 +192,6 @@ export default defineComponent({
         }
       });
 
-      // const intervalMS = 60 * 60 * 1000;
-
-      // console.log(useRegisterSW, '1');
-      const updateServiceWorker = useRegisterSW({
-        onRegistered(r: any) {
-          console.log(r, 'registered');
-
-          r &&
-            setInterval(() => {
-              // console.log('registered interval:', r);
-              r.update();
-            }, 30000);
-        }
-      });
       // console.log('app - onounted - test interval');
 
       // if ('serviceWorker' in navigator) {
@@ -227,11 +209,10 @@ export default defineComponent({
       // }
     });
     onUnmounted(() => {
+      // window.removeEventListener('resize', resize);
       window.removeEventListener('message', handleOpen);
     });
 
-    // 卸载 pwa
-    unregister();
     return () => (
       <>
         <NConfigProvider
@@ -246,6 +227,18 @@ export default defineComponent({
           </AppProvider>
         </NConfigProvider>
         {/* <NModal
+          maskClosable={modalClickMask}
+          v-model:show={showModalMask.value}>
+          <ScreenTips />
+        </NModal> */}
+
+        <span style={{ display: 'none' }}>
+          {needRefresh.value ? '新内容可用，点击刷新页面' : '没有新内容'}
+        </span>
+        <span style={{ display: 'none' }}>
+          {offlineReady.value ? '应用已离线可用' : '没有离线'}
+        </span>
+        {/* <NModal
           show={showModal.value}
           closeOnEsc={false}
           closable={false}

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}