修改样式

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

@@ -179,6 +179,7 @@ export default function useDrag(
     if (dragShow.value) {
       // 初始化pos值
       window.addEventListener('resize', refreshPos);
+      window.addEventListener('fullscreenchange', onFullscreenchange);
       console.log('first - show', boxClass);
       nextTick(() => {
         const layoutTopHeight =
@@ -234,6 +235,7 @@ export default function useDrag(
       });
     } else {
       window.removeEventListener('resize', refreshPos);
+      window.removeEventListener('fullscreenchange', onFullscreenchange);
     }
   });
 
@@ -364,13 +366,36 @@ export default function useDrag(
     });
   }
 
+  let isResizeBlocked = false; // 标志是否阻止 resize 事件
+  /** 全屏 */
+  function isFullscreen() {
+    return document.fullscreenElement || // 支持标准
+      (document as any).mozFullScreenElement || // Firefox
+      (document as any).webkitFullscreenElement // Chrome, Safari
+      ? true
+      : false;
+  }
+  function onFullscreenchange() {
+    if (isFullscreen()) {
+      isResizeBlocked = true;
+    } else {
+      setTimeout(() => {
+        isResizeBlocked = false;
+      }, 100);
+    }
+  }
   function refreshPos() {
+    // 全屏切换的时候不做重置
+    if (isResizeBlocked) return;
+
+    windowInfo.currentType = 'SMALL';
+    windowInfo.windowType = 'SMALL';
     baseSize.winMinWidth = initSize?.minWidth || 800;
     baseSize.minWidth = initSize?.minWidth || 400;
     baseSize.minHeight = initSize?.minHeight || 340;
     baseSize.defaultWidth = initSize?.width || 400;
     baseSize.defaultHeight = initSize?.height || 640;
-
+    isResizeBlocked = false;
     dragShow.value = false;
   }
 
@@ -477,8 +502,8 @@ function drag(
       clientWidth -
       baseSize.winMinWidth -
       (clientWidth - parentElementRect.right);
-    const maxResizeTop =
-      clientHeight - baseSize.minHeight - baseSize.layoutTopHeight;
+    // const maxResizeTop =
+    //   clientHeight - baseSize.minHeight - baseSize.layoutTopHeight;
     const minLeft = 0;
     const minTop = 0;
     const baseHeight = JSON.parse(JSON.stringify(baseSize.height));
@@ -508,11 +533,13 @@ function drag(
       }
     }
     function onBottom(moveY: number) {
-      if (baseSize.maxHeight > baseSize.height) {
-        const suffix = Math.ceil(
-          baseHeight + moveY - (baseSize.height + baseSize.transformY)
-        );
-        baseSize.height = baseSize.height + suffix;
+      const suffix = Math.ceil(
+        baseHeight + moveY - (baseSize.height + baseSize.transformY)
+      );
+      if (suffix > 0 || baseSize.height >= baseSize.minHeight) {
+        if (baseSize.height + suffix <= baseSize.maxHeight) {
+          baseSize.height = baseSize.height + suffix;
+        }
       }
     }
     function onLeft(moveX: number) {
@@ -544,13 +571,10 @@ function drag(
         baseSize.transformY = moveY;
         baseSize.transformX = moveX;
       } else if (type === 'RESIZE') {
-        let moveY =
+        const moveY =
           parentElementRect.top -
           baseSize.layoutTopHeight +
           (event.clientY - downY);
-        moveY =
-          moveY < minTop ? minTop : moveY > maxResizeTop ? maxResizeTop : moveY;
-
         const moveX = parentElementRect.left + (event.clientX - downX);
 
         // 拖动

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

@@ -1,291 +1,295 @@
-.drag-wrapper-draggable {
-  transform: translate(0px, 0px);
-  position: fixed;
-  right: 0px;
-  top: var(--layoutTopHeight, 64px);
-  width: 100%;
-  z-index: 99;
-
-  &.draggleClose {
-    display: none;
-    opacity: 0;
-  }
-}
-
-.guideSection {
-  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: 16Px;
-  overflow: hidden;
-}
-
-.guideCenter {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.guideTitle {
-  // border-radius: 16Px 16Px 0 0;
-  cursor: move;
-  background: #f7f8fa;
-  padding: 16px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  pointer-events: auto;
-  .name {
-    font-weight: 600;
-    font-size: 16px;
-    color: #131415;
-    line-height: 22px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    .back {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      background: url('./images/arrow-line-left.png') no-repeat center;
-      background-size: contain;
-      margin-right: 8px;
-    }
-  }
-
-  .operation {
-    display: flex;
-    align-items: center;
-
-    i {
-      width: 22px;
-      height: 22px;
-      margin-left: 12px;
-      cursor: pointer;
-      transition: .2s ease;
-
-      &:hover {
-        background-color: rgba(34, 71, 133, 0.08);
-        border-radius: 4px;
-        transition: .2s ease;
-      }
-    }
-    .screen {
-      background: url('./images/screen.png') no-repeat center;
-      background-size: contain;
-    }
-    .screenSmall {
-      background: url('./images/screen-small.png') no-repeat center;
-      background-size: contain;
-    }
-    .resize {
-      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;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  box-sizing: border-box;
-  height: calc(100% - 54px);
-
-  &.windowContainer {
-    .leftGuide {
-      width: 300px;
-      padding-right: 16px;
-      position: sticky !important;
-      top: 0;
-      position: relative;
-      > div {
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        height: 100%;
-        &::before {
-          position: absolute;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          content: ' ';
-          display: inline-block;
-          border-left: 1px solid #e8e8e8;
-        }
-      }
-    }
-    .rightGuide {
-      width: auto;
-      flex: 1;
-      padding-left: 16px;
-    }
-  }
-
-  .leftGuide,
-  .rightGuide {
-    padding-left: 24px;
-    padding-right: 24px;
-    height: 100%;
-    overflow-y: auto;
-  }
-}
-.searchContainer {
-  background-color: #fff;
-  position: sticky;
-  top: 0;
-  left: 0;
-  padding: 16px 0;
-  z-index: 1;
-  // :global {
-  //   .TheSearch {
-  //     border-radius: 6Px !important;
-  //   }
-  // }
-}
-
-.leftGuide {
-  width: 100%;
-  :global {
-    .n-collapse {
-      --n-title-font-weight: 600 !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: 12px 0;
-      }
-    }
-    // .n-collapse .n-collapse-item:not(:first-child)
-    .n-collapse-item__header-main {
-      line-height: 22px;
-    }
-    .n-collapse-item__content-inner {
-      padding-top: 0 !important;
-    }
-  }
-  .arrow {
-    width: 16px;
-    height: 16px;
-  }
-
-  .childItem {
-    padding: 10px 20px 10px 40px;
-    font-size: 14px;
-    color: #333333;
-    line-height: 20px;
-    // margin-top: 8Px;
-    margin-bottom: 6px;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    &:hover,
-    &.active {
-      color: #097bec;
-      background: #e8f4ff;
-      border-radius: 6px;
-    }
-  }
-
-  .emptyDiv {
-    height: 80%;
-  }
-}
-
-.rightGuide {
-  word-break: break-all;
-  width: 100%;
-  padding: 12px 0;
-  :global {
-    .n-spin-container {
-      height: 100%;
-    }
-
-    .n-space {
-      font-size: 0;
-    }
-
-    video,
-    img {
-      max-width: 100%;
-      cursor: pointer;
-    }
-
-    .videoSection {
-      position: relative;
-      display: inline-block;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 50px;
-        height: 50px;
-        background: url('./images/video-center.png') no-repeat center;
-        background-size: contain;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        // transform: translate(-50%);
-        margin-left: -25px;
-        margin-top: -25px;
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-.videoModal {
-  position: absolute;
-  user-select: auto;
-  touch-action: none;
-  // width: 400Px;
-  // height: 621Px;
-  // display: flex;
-  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;
-    }
-  }
-}
-
+.drag-wrapper-draggable {
+  transform: translate(0px, 0px);
+  position: fixed;
+  right: 0px;
+  top: var(--layoutTopHeight, 64px);
+  width: 100%;
+  z-index: 99;
+
+  &.draggleClose {
+    display: none;
+    opacity: 0;
+  }
+}
+
+.guideSection {
+  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: 16Px;
+  overflow: hidden;
+}
+
+.guideCenter {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.guideTitle {
+  // border-radius: 16Px 16Px 0 0;
+  cursor: move;
+  background: #f7f8fa;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: auto;
+  .name {
+    font-weight: 600;
+    font-size: 16px;
+    color: #131415;
+    line-height: 22px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    .back {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: url('./images/arrow-line-left.png') no-repeat center;
+      background-size: contain;
+      margin-right: 8px;
+    }
+  }
+
+  .operation {
+    display: flex;
+    align-items: center;
+
+    i {
+      width: 22px;
+      height: 22px;
+      margin-left: 12px;
+      cursor: pointer;
+      transition: .2s ease;
+
+      &:hover {
+        background-color: rgba(34, 71, 133, 0.08);
+        border-radius: 4px;
+        transition: .2s ease;
+      }
+    }
+    .screen {
+      background: url('./images/screen.png') no-repeat center;
+      background-size: contain;
+    }
+    .screenSmall {
+      background: url('./images/screen-small.png') no-repeat center;
+      background-size: contain;
+    }
+    .resize {
+      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;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  box-sizing: border-box;
+  height: calc(100% - 54px);
+
+  &.windowContainer {
+    .leftGuide {
+      width: 300px;
+      padding-right: 16px;
+      position: sticky !important;
+      top: 0;
+      position: relative;
+      > div {
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        height: 100%;
+        &::before {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          content: ' ';
+          display: inline-block;
+          border-left: 1px solid #e8e8e8;
+        }
+      }
+    }
+    .rightGuide {
+      width: auto;
+      flex: 1;
+      padding-left: 16px;
+    }
+  }
+
+  .leftGuide,
+  .rightGuide {
+    padding-left: 24px;
+    padding-right: 24px;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+.searchContainer {
+  background-color: #fff;
+  position: sticky;
+  top: 0;
+  left: 0;
+  padding: 16px 0;
+  z-index: 1;
+  // :global {
+  //   .TheSearch {
+  //     border-radius: 6Px !important;
+  //   }
+  // }
+}
+
+.leftGuide {
+  width: 100%;
+  :global {
+    .n-collapse {
+      --n-title-font-weight: 600 !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: 12px 0;
+        &:hover .n-collapse-item__header-main {
+          color: #097bec !important;
+        }
+      }
+    }
+    // .n-collapse .n-collapse-item:not(:first-child)
+    .n-collapse-item__header-main {
+      line-height: 22px;
+
+    }
+    .n-collapse-item__content-inner {
+      padding-top: 0 !important;
+    }
+  }
+  .arrow {
+    width: 16px;
+    height: 16px;
+  }
+
+  .childItem {
+    padding: 10px 20px 10px 40px;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    // margin-top: 8Px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &:hover,
+    &.active {
+      color: #097bec;
+      background: #e8f4ff;
+      border-radius: 6px;
+    }
+  }
+
+  .emptyDiv {
+    height: 80%;
+  }
+}
+
+.rightGuide {
+  word-break: break-all;
+  width: 100%;
+  padding: 12px 0;
+  :global {
+    .n-spin-container {
+      height: 100%;
+    }
+
+    .n-space {
+      font-size: 0;
+    }
+
+    video,
+    img {
+      max-width: 100%;
+      cursor: pointer;
+    }
+
+    .videoSection {
+      position: relative;
+      display: inline-block;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background: url('./images/video-center.png') no-repeat center;
+        background-size: contain;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        // transform: translate(-50%);
+        margin-left: -25px;
+        margin-top: -25px;
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.videoModal {
+  position: absolute;
+  user-select: auto;
+  touch-action: none;
+  // width: 400Px;
+  // height: 621Px;
+  // display: flex;
+  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

@@ -62,7 +62,7 @@ export default defineComponent({
       {
         resizeDirection: [true, true, true, true, true, true, true, true],
         minHeight: 400,
-        minWidth: 616.5,
+        minWidth: 400,
         defaultPosition: 'center',
         width: 1000,
         height: 640

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/item.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
 
           <div class={styles.updateTime}>更新于 {props.item.updateTime}</div>
           <div class={styles.other}>
-            <span>作者 {props.item.authorName}</span>
+            <span>作者: {props.item.authorName}</span>
             <div class={styles.addCourseBtn} onClick={() => emit('add')}>
               添加
             </div>

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/resource-search-group/index.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
           />
           <NInput
             type="text"
-            placeholder="请输入课件标题/作者名称"
+            placeholder="请输入课件/作者名称"
             clearable={false}
             v-model:value={forms.keyword}
             class={styles.inputSearch}

src/views/prepare-lessons/model/related-class/index.tsx

@@ -153,6 +153,7 @@ export default defineComponent({
             valueField="id"
             clearable
             v-model:value={forms.searchGroup.chapterLessonCoursewareTagId}
+            style={{ width: '200px' }}
             onUpdate:value={() => {
               throttleFn();
             }}
@@ -176,7 +177,7 @@ export default defineComponent({
             style={{ width: '200px' }}
           />
           <NInput
-            placeholder="请输入课件标题/作者名称"
+            placeholder="请输入课件/作者名称"
             clearable
             v-model:value={forms.searchGroup.keyword}
             onKeyup={(e: KeyboardEvent) => {