修复视频

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

@@ -3,7 +3,8 @@ import {
   onMounted,
   onUnmounted,
   reactive,
-  toRefs
+  toRefs,
+  watch
 } from 'vue';
 import { ref } from 'vue';
 import TCPlayer from 'tcplayer.js';
@@ -73,6 +74,14 @@ 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) {
@@ -228,10 +237,10 @@ export default defineComponent({
     });
     onUnmounted(() => {
       window.removeEventListener('fullscreenchange', onFullScreenChange);
-      if(videoItem.value) {
-        videoItem.value.pause()
-        videoItem.value.dispose()
-        videoItem.value = null
+      if (videoItem.value) {
+        videoItem.value.pause();
+        videoItem.value.dispose();
+        videoItem.value = null;
       }
     });
 
@@ -241,7 +250,7 @@ export default defineComponent({
     });
     return () => (
       <div
-        class={[styles.videoWrap]}
+        class={[styles.videoWrap, 'videoWrapModal']}
         id={videoId}
         onClick={() => setModelOpen(!videoFroms.showBar)}>
         <div class={[styles.videoContent]}>

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

@@ -27,6 +27,7 @@ type baseSizeType = {
   // 窗口模式的尺寸
   winWidth: number;
   winHeight: number;
+  winMinWidth: number;
   minWidth: number;
   minHeight: number;
   maxHeight: number;
@@ -52,14 +53,15 @@ const getSizeToUnit = (num: number, unit = 'px') => {
 
 /**
  * @params classList  可拖动地方的class值，也为唯一值
- * @params boxClass  容器class值必须为唯一值，这个class和useid拼接 作为缓存主键
+ * @params boxClass  容器class值必须为唯一值
  * @params dragShow  弹窗是否显示
- * @params userId    当前用户id
+ * @params initSize 默认尺寸
  */
 export default function useDrag(
   classList: string[],
   boxClass: string,
-  dragShow: Ref<boolean>
+  dragShow: Ref<boolean>,
+  initSize?: any
 ) {
   const windowInfo = reactive({
     // 小窗口 侧边大窗口
@@ -130,6 +132,7 @@ export default function useDrag(
     // 窗口模式的尺寸
     winWidth: 1010,
     winHeight: 650,
+    winMinWidth: 800,
     minWidth: 400,
     minHeight: 640,
     maxHeight: window.innerHeight,
@@ -137,8 +140,8 @@ export default function useDrag(
     borderRadius: 12,
     transformX: window.innerWidth - 400 - initPos.right,
     transformY: (window.innerHeight - 640) / 2,
-    height: 640,
-    width: 400
+    height: initSize?.height || 640,
+    width: initSize?.width || 400
   });
   const dragStyles = reactive({
     maxHeight: getSizeToUnit(baseSize.maxHeight),
@@ -158,6 +161,16 @@ export default function useDrag(
       baseSize.windowWidth - baseSize.minWidth - 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 });
+      baseSize.transformX = transformX;
+      baseSize.transformY = transformY;
+    }
   });
   // watch(dragShow, () => {
   //   if (dragShow.value) {
@@ -446,7 +459,9 @@ function drag(
       clientHeight - parentElementRect.height - baseSize.layoutTopHeight;
 
     const maxResizeLeft =
-      clientWidth - baseSize.minWidth - (clientWidth - parentElementRect.right);
+      clientWidth -
+      baseSize.winMinWidth -
+      (clientWidth - parentElementRect.right);
     const maxResizeTop =
       clientHeight - baseSize.minHeight - baseSize.layoutTopHeight;
     const minLeft = 0;
@@ -477,7 +492,7 @@ function drag(
       const suffix = Math.ceil(
         baseWidth + moveX - (baseSize.width + baseSize.transformX)
       );
-      if (suffix > 0 || baseSize.width > baseSize.minWidth) {
+      if (suffix > 0 || baseSize.width > baseSize.winMinWidth) {
         baseSize.width =
           baseSize.width + suffix >= baseSize.maxWidth
             ? baseSize.maxWidth
@@ -500,7 +515,7 @@ function drag(
           ? maxResizeLeft
           : moveX;
       const suffix = baseSize.transformX - moveX;
-      if (suffix > 0 || baseSize.width > baseSize.minWidth) {
+      if (suffix > 0 || baseSize.width > baseSize.winMinWidth) {
         if (baseSize.width + suffix <= baseSize.maxWidth) {
           baseSize.transformX = moveX;
           baseSize.width = baseSize.width + suffix;

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

@@ -1,8 +1,8 @@
 .drag-wrapper-draggable {
-  transform: translate(0Px, 0Px);
+  transform: translate(0px, 0px);
   position: fixed;
-  right: 0Px;
-  top: var(--layoutTopHeight, 64Px);
+  right: 0px;
+  top: var(--layoutTopHeight, 64px);
   width: 100%;
   z-index: 99;
 
@@ -19,8 +19,8 @@
   // width: 400Px;
   // height: 621Px;
   display: inline-block;
-  top: 0Px;
-  left: 0Px;
+  top: 0px;
+  left: 0px;
   cursor: auto;
   pointer-events: all;
   z-index: 101;
@@ -28,8 +28,8 @@
   // max-width: 1024Px;
   box-sizing: border-box;
   background: #ffffff;
-  box-shadow: -2Px 5Px 12Px 0Px rgba(0, 0, 0, 0.12);
-  border: 1Px solid #e8e8e8;
+  box-shadow: -2px 5px 12px 0px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e8e8e8;
   // border-radius: 16Px;
   overflow: hidden;
 }
@@ -44,27 +44,27 @@
   // border-radius: 16Px 16Px 0 0;
   cursor: move;
   background: #f7f8fa;
-  padding: 16Px 24Px;
+  padding: 16px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   pointer-events: auto;
   .name {
     font-weight: 600;
-    font-size: 16Px;
+    font-size: 16px;
     color: #131415;
-    line-height: 22Px;
+    line-height: 22px;
     cursor: pointer;
     display: flex;
     align-items: center;
 
     .back {
       display: inline-block;
-      width: 14Px;
-      height: 14Px;
+      width: 14px;
+      height: 14px;
       background: url('./images/arrow-line-left.png') no-repeat center;
       background-size: contain;
-      margin-right: 8Px;
+      margin-right: 8px;
     }
   }
 
@@ -73,9 +73,9 @@
     align-items: center;
 
     i {
-      width: 22Px;
-      height: 22Px;
-      margin-left: 12Px;
+      width: 22px;
+      height: 22px;
+      margin-left: 12px;
       cursor: pointer;
     }
     .screen {
@@ -100,12 +100,12 @@
 .container {
   display: flex;
   box-sizing: border-box;
-  height: calc(100% - 54Px);
+  height: calc(100% - 54px);
 
   &.windowContainer {
     .leftGuide {
-      width: 300Px;
-      padding-right: 16Px;
+      width: 300px;
+      padding-right: 16px;
       position: sticky !important;
       top: 0;
       position: relative;
@@ -122,21 +122,21 @@
           bottom: 0;
           content: ' ';
           display: inline-block;
-          border-left: 1Px solid #e8e8e8;
+          border-left: 1px solid #e8e8e8;
         }
       }
     }
     .rightGuide {
       width: auto;
       flex: 1;
-      padding-left: 16Px;
+      padding-left: 16px;
     }
   }
 
   .leftGuide,
   .rightGuide {
-    padding-left: 24Px;
-    padding-right: 24Px;
+    padding-left: 24px;
+    padding-right: 24px;
     height: 100%;
     overflow-y: auto;
   }
@@ -146,7 +146,7 @@
   position: sticky;
   top: 0;
   left: 0;
-  padding: 16Px 0;
+  padding: 16px 0;
   z-index: 1;
   // :global {
   //   .TheSearch {
@@ -160,34 +160,34 @@
   :global {
     .n-collapse {
       --n-title-font-weight: 600 !important;
-      --n-title-font-size: 16Px !important;
+      --n-title-font-size: 16px !important;
       --n-title-text-color: #131415 !important;
     }
     .n-collapse-item {
       border-top: none !important;
       margin-top: 0;
       .n-collapse-item__header {
-        padding: 9Px 0;
+        padding: 9px 0;
       }
     }
     // .n-collapse .n-collapse-item:not(:first-child)
     .n-collapse-item__header-main {
-      line-height: 22Px;
+      line-height: 22px;
     }
     .n-collapse-item__content-inner {
       padding-top: 0 !important;
     }
   }
   .arrow {
-    width: 16Px;
-    height: 16Px;
+    width: 16px;
+    height: 16px;
   }
 
   .childItem {
-    padding: 10Px 20Px 10Px 40Px;
-    font-size: 14Px;
+    padding: 10px 20px 10px 40px;
+    font-size: 14px;
     color: #333333;
-    line-height: 20Px;
+    line-height: 20px;
     // margin-top: 8Px;
     cursor: pointer;
     overflow: hidden;
@@ -196,7 +196,7 @@
     &:hover {
       color: #097bec;
       background: #e8f4ff;
-      border-radius: 6Px;
+      border-radius: 6px;
     }
   }
 
@@ -208,7 +208,7 @@
 .rightGuide {
   word-break: break-all;
   width: 100%;
-  padding: 12Px 0;
+  padding: 12px 0;
   :global {
     .n-spin-container {
       height: 100%;
@@ -231,8 +231,8 @@
       &::before {
         content: '';
         display: inline-block;
-        width: 50Px;
-        height: 50Px;
+        width: 50px;
+        height: 50px;
         background: url('./images/video-center.png') no-repeat center;
         background-size: contain;
         position: absolute;
@@ -244,3 +244,32 @@
     }
   }
 }
+
+.videoModal {
+  position: absolute;
+  user-select: auto;
+  touch-action: none;
+  // width: 400Px;
+  // height: 621Px;
+  display: inline-block;
+  top: 0px;
+  left: 0px;
+  cursor: auto;
+  pointer-events: all;
+  z-index: 101;
+  // transform: translate(354Px, 132Px);
+  // max-width: 1024Px;
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: -2px 5px 12px 0px rgba(0, 0, 0, 0.12);
+  // border: 1px solid #e8e8e8;
+  border-radius: 12Px !important;
+  overflow: hidden !important;
+  display: flex;
+  flex-direction: column;
+  :global {
+    .videoWrapModal {
+      height: 100% !important;
+    }
+  }
+}

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

@@ -54,11 +54,17 @@ export default defineComponent({
       toRef(opInfo, 'showGuide')
     );
 
-    // useDrag(
-    //   [`${guideBoxClass} .guideTitle`],
-    //   guideBoxClass,
-    //   toRef(opInfo, 'showGuide')
-    // );
+    const videoBoxClass = 'videoBoxClass_drag';
+    const videoBoxData = useDrag(
+      [`${videoBoxClass} .guideTitleVideo`],
+      videoBoxClass,
+      previewShow,
+      {
+        defaultPosition: 'center',
+        width: 1000,
+        height: 640
+      }
+    );
 
     const titleName = computed(() => {
       let name = '操作手册';
@@ -74,6 +80,15 @@ export default defineComponent({
     /** 操作窗口状态 */
     const onToggle = () => {
       opInfo.showGuide = !opInfo.showGuide;
+
+      if (!opInfo.showGuide) {
+        previewShow.value = false;
+      }
+    };
+
+    /** 操作视频窗口状态 */
+    const onToggleVideo = () => {
+      previewShow.value = !previewShow.value;
     };
 
     const onClickItem = async (item: any) => {
@@ -184,6 +199,9 @@ export default defineComponent({
       const videoSrc = sourceElement ? sourceElement.src : null;
       previewUrl.value = videoSrc;
       previewShow.value = true;
+      // nextTick(() => {
+
+      // });
     };
 
     return () => (
@@ -322,7 +340,7 @@ export default defineComponent({
             </div>
           </div>
 
-          <NModal
+          {/* <NModal
             maskClosable={modalClickMask}
             v-model:show={previewShow.value}
             preset="card"
@@ -336,7 +354,31 @@ export default defineComponent({
               isDownload
               fullscreen
             />
-          </NModal>
+          </NModal> */}
+
+          <div
+            class={[styles.videoModal, videoBoxClass]}
+            style={{
+              ...videoBoxData.styleDrag.value,
+              display: previewShow.value ? 'block' : 'none'
+            }}>
+            <div class={[styles.guideTitle, 'guideTitleVideo']}>
+              <div class={styles.name}>预览</div>
+              <div class={styles.operation}>
+                <i class={styles.close} onClick={onToggleVideo}></i>
+              </div>
+            </div>
+            {previewShow.value ? (
+              <VideoModal
+                title="预览"
+                src={previewUrl.value}
+                isDownload={false}
+                fullscreen
+              />
+            ) : (
+              ''
+            )}
+          </div>
         </div>
       </Teleport>
     );

src/components/layout/layoutTop.tsx

@@ -246,7 +246,7 @@ export default defineComponent({
                   <NImage src={gnydIcon} previewDisabled></NImage>
                 </div>
               ),
-              default: '功能引导'
+              default: '操作手册'
             }}
           </NTooltip>
           {/* <NTooltip showArrow={false}>

src/router/routes/index.ts

@@ -200,6 +200,15 @@ export const constantRoutes: RouteRecordRaw[] = [
         }
       },
       {
+        path: '/content-musician-detail',
+        name: 'content-musician-detail',
+        component: () =>
+          import('@/views/content-information/content-instrument/detail'),
+        meta: {
+          title: '音乐家详情'
+        }
+      },
+      {
         path: '/content-music',
         name: 'content-music',
         component: () => import('@/views/content-information/content-music'),

src/views/content-information/content-musician/components/list/index.tsx

@@ -115,7 +115,7 @@ export default defineComponent({
                 class={styles.itemWrap}
                 onClick={() => {
                   router.push({
-                    path: '/content-instruments-detail',
+                    path: '/content-musician-detail',
                     query: {
                       type: 'MUSICIAN',
                       id: item.id,