更新

src/components/card-preview/index.module.less

@@ -18,10 +18,12 @@
     }
   }
 }
-.dragbom{
-  position: absolute;
-  left: 0;
-  bottom: 0;
+:global{
+  .cardPreviewBoxClass_drag .bom_drag{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
 }
 .maxCard {
   width: 1200px;

src/components/card-preview/index.tsx

@@ -188,7 +188,7 @@ export default defineComponent({
             'MUSIC_WIKI',
             'LISTEN'
           ].includes(item.value.type) && <TheEmpty />}
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </>
     );

src/components/layout/layoutTop.tsx

@@ -235,6 +235,7 @@ export default defineComponent({
                       styles.optons,
                       !helpNoteStatus.value && styles.booxToolDisabled
                     ]}
+                    id="home-1"
                     onClick={() => {
                       if (!helpNoteStatus.value) return;
                       // 默认滚动到页面顶部，在显示指引
@@ -294,7 +295,7 @@ export default defineComponent({
             <NTooltip showArrow={false}>
               {{
                 trigger: () => (
-                  <div class={styles.optons} onClick={showOption}>
+                  <div class={styles.optons} onClick={showOption} id="home-2">
                     <NBadge dot={suggestionStatus.value} color={'#FF1036'}>
                       <NImage src={opinionIcon} previewDisabled></NImage>
                     </NBadge>
@@ -316,7 +317,7 @@ export default defineComponent({
                         styles.messageBadge,
                         noReadCount.value > 0 ? '' : styles.messageBadgeNo
                       ]}
-                      {...{ id: 'home-2' }}
+                      {...{ id: 'home-3' }}
                       color={'#FF1036'}>
                       <NImage
                         class={[

src/custom-plugins/guide-page/home-guide.tsx

@@ -35,135 +35,146 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top: px2vw(-150),
-            left: px2vw(563),
+            top: px2vw(-400 / 2),
+            left: px2vw(-734 / 2),
             width: px2vw(734),
             height: px2vw(295)
           },
           btnsStyle: {
-            bottom: px2vw(188),
-            left: px2vw(805)
+            bottom: px2vw(240),
+            left: px2vw(-128)
           },
           boxStyle: {
             border: 'none',
-            width: '0px',
-            height: '0px',
-            backgroundColor: 'transparent'
+            width: 0,
+            height: 0,
+            backgroundColor: 'transparent',
+            position: 'fixed',
+            top: `50%`,
+            left: '50%'
             // visibility: 'hidden'
           },
           eleRectPadding: {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home2.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-290),
+            width: px2vw(401),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-130)
+          },
+          boxStyle: {},
+          eleRectPadding: {
             left: 7,
             top: 7,
             width: 14,
             height: 14
           }
         },
-        // {
-        //   ele: '',
-        //   img: getImage('home2.png'),
-        //   imgStyle: {
-        //     top: '100%',
-        //     left:  px2vw(-250),
-        //     width: px2vw(401),
-        //     height: px2vw(227)
-        //   },
-        //   btnsStyle: {
-        //     bottom: '30px',
-        //     left: px2vw(-90),
-        //   },
-        //   boxStyle:{
-        //     borderRadius:'25px'
-        //   },
-        //   eleRectPadding:{
-        //     left:7,
-        //     top:7,
-        //     width:14,
-        //     height:14
-        //   }
-
-        // },
         {
           ele: '',
-          img: getImage('home3.png'),
-          handStyle: {
-            top: '-1.39rem',
-            left: '0.17rem',
-            transform: 'rotate(180deg)'
-          },
+          img: getImage('home6.png'),
           imgStyle: {
-            top: px2vw(-4),
-            width: px2vw(454),
-            height: px2vw(227),
-            left: px2vw(282)
+            top: '100%',
+            left: px2vw(-310),
+            width: px2vw(477),
+            height: px2vw(227)
           },
           btnsStyle: {
             bottom: '30px',
-            left: px2vw(445)
-          },
-          boxStyle: {
-            borderRadius: '20px'
+            left: px2vw(-150)
           },
+          boxStyle: {},
           eleRectPadding: {
-            left: 44,
-            top: 44,
-            width: 88,
-            height: 88
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
         },
         {
           ele: '',
           img: getImage('home4.png'),
-          handStyle: {
-            top: '-1.39rem',
-            left: '1.4rem',
-            transform: 'rotate(180deg)'
-          },
           imgStyle: {
-            top: px2vw(-4),
+            top: '100%',
             left: px2vw(-310),
             width: px2vw(477),
             height: px2vw(227)
           },
           btnsStyle: {
             bottom: '30px',
-            left: px2vw(-147)
+            left: px2vw(-150)
           },
+          boxStyle: {},
           eleRectPadding: {
             left: 7,
             top: 7,
             width: 14,
             height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('home3.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '0.17rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            width: px2vw(454),
+            height: px2vw(227),
+            left: px2vw(-150)
           },
-          boxStyle: {}
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(8)
+          },
+          boxStyle: {},
+          eleRectPadding: {
+            left: 7,
+            top: 9,
+            width: 14,
+            height: 14
+          }
         },
         {
           ele: '',
           img: getImage('home5.png'),
           handStyle: {
             top: '-1.39rem',
-            left: '1.4rem',
+            left: '0.17rem',
             transform: 'rotate(180deg)'
           },
           imgStyle: {
-            top: '0',
-            width: px2vw(600),
-            height: px2vw(290),
-            left: px2vw(18)
+            top: px2vw(-194),
+            width: px2vw(621),
+            height: px2vw(223),
+            left: px2vw(-624)
           },
           btnsStyle: {
-            bottom: px2vw(95),
-            left: px2vw(185),
-            'justify-content': 'center',
-            padding: 0
+            top: px2vw(-42),
+            left: px2vw(-460)
           },
+          boxStyle: {},
           eleRectPadding: {
             left: 7,
             top: 7,
             width: 14,
             height: 14
-          },
-          type: 'bottom',
-          boxStyle: {}
+          }
         }
       ],
       step: 0
@@ -192,7 +203,11 @@ export default defineComponent({
     };
     getAllGuidance();
     const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`home-${data.step}`)!;
+      const ele: HTMLElement = document.getElementById(
+        data.step === data.steps.length - 1
+          ? 'moveNPopover'
+          : `home-${data.step}`
+      )!;
       // console.log(`coai-${data.step}`, data.steps[data.step].eleRectPadding);
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
@@ -249,7 +264,7 @@ export default defineComponent({
     });
 
     const handleNext = () => {
-      if (data.step >= 3) {
+      if (data.step >= data.steps.length - 1) {
         endGuide();
         return;
       }
@@ -342,7 +357,9 @@ export default defineComponent({
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
+                          {data.step !== 0
+                            ? `下一步 ${data.step}/${data.steps.length - 1}`
+                            : '开始体验'}
                         </div>
                       )}
                     </div>

src/custom-plugins/guide-page/lessons-guide.tsx

@@ -50,91 +50,6 @@ export default defineComponent({
             width: 14,
             height: 14
           }
-        },
-        {
-          ele: '',
-          img: getImage('lessons2.png'),
-          imgStyle: {
-            left: px2vw(-647),
-            width: px2vw(647),
-            height: px2vw(223)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(-488)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'left'
-        },
-        {
-          ele: '',
-          img: getImage('lessons3.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-471),
-            width: px2vw(471),
-            height: px2vw(223)
-          },
-          btnsStyle: {
-            bottom: px2vw(20),
-            left: px2vw(-310)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'left'
-        },
-        {
-          ele: '',
-          img: getImage('lessons4.png'),
-          imgStyle: {
-            top: px2vw(-355),
-            left: px2vw(-185),
-            width: px2vw(515),
-            height: px2vw(302)
-          },
-          btnsStyle: {
-            top: px2vw(-205),
-            left: px2vw(-22)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('lessons5.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-290),
-            width: px2vw(648),
-            height: px2vw(228)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-127)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
         }
       ],
       step: 0
@@ -168,7 +83,6 @@ export default defineComponent({
     // }
     const getStepELe = () => {
       const ele: HTMLElement = document.getElementById(`lessons-${data.step}`)!;
-
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
 
@@ -189,7 +103,7 @@ export default defineComponent({
     };
     const onResetGuide = async (name: string) => {
       try {
-        if (name !== 'courseware') return;
+        if (name !== 'prepare-lessons') return;
         if (!guideInfo.value) {
           guideInfo.value = { lessonsGuide: false };
         } else {
@@ -213,9 +127,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('prepare-lessons-guide', (name: string) =>
-        onResetGuide(name)
-      );
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
     const resetSize = () => {
       getStepELe();
@@ -223,7 +135,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
-      eventGlobal.off('prepare-lessons-guide', onResetGuide);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
     });
 
     const handleNext = () => {
@@ -316,19 +228,17 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
+                          <div class={[styles.btn]} onClick={() => endGuide()}>
                             完成
                           </div>
-                          <div
+                          {/* <div
                             class={styles.nextBtn}
                             onClick={() => {
                               data.step = 0;
                               getStepELe();
                             }}>
                             再看一遍
-                          </div>
+                          </div> */}
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

src/custom-plugins/guide-page/lessons-guideIn.tsx

@@ -0,0 +1,284 @@
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
+export default defineComponent({
+  name: 'lessons-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          img: getImage('lessons2.png'),
+          imgStyle: {
+            left: px2vw(-647),
+            width: px2vw(647),
+            height: px2vw(223)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-488)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'left'
+        },
+        {
+          ele: '',
+          img: getImage('lessons3.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-471),
+            width: px2vw(471),
+            height: px2vw(223)
+          },
+          btnsStyle: {
+            bottom: px2vw(20),
+            left: px2vw(-310)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'left'
+        }
+      ],
+      step: 0
+    });
+    const tipShow = ref(false);
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        if (res.data) {
+          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.lessonsGuideIn) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).lessonsGuideIn) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(
+        `lessonsIn-${data.step}`
+      )!;
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'prepare-lessons') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { lessonsGuideIn: false };
+        } else {
+          guideInfo.value.lessonsGuideIn = false;
+        }
+        try {
+          await setGuidance({
+            guideTag: 'teacher-guideInfo',
+            guideValue: JSON.stringify(guideInfo.value)
+          });
+        } catch (e) {
+          console.log(e);
+        }
+        data.step = 0;
+        getStepELe();
+        tipShow.value = true;
+      } catch {
+        //
+      }
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        getStepELe();
+      }, 500);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { lessonsGuideIn: true };
+      } else {
+        guideInfo.value.lessonsGuideIn = true;
+      }
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : item.type == 'left'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+
+                            top: `${
+                              parseFloat(data.box?.height) / 2 -
+                              (parseFloat(item.imgStyle?.height) * 1920) /
+                                100 /
+                                2 -
+                              14
+                            }px`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

src/custom-plugins/guide-page/music-guide.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
           },
           btnsStyle: {
             bottom: px2vw(40),
-            left: px2vw(159)
+            left: px2vw(-10)
           },
           eleRectPadding: {
             left: 7,

src/custom-plugins/guide-page/student-guide.tsx

@@ -240,19 +240,17 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
+                          <div class={[styles.btn]} onClick={() => endGuide()}>
                             完成
                           </div>
-                          <div
+                          {/* <div
                             class={styles.nextBtn}
                             onClick={() => {
                               data.step = 0;
                               getStepELe();
                             }}>
                             再看一遍
-                          </div>
+                          </div> */}
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

src/custom-plugins/guide-page/train-guide.tsx

@@ -127,9 +127,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('prepare-lessons-guide', (name: string) =>
-        onResetGuide(name)
-      );
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
     const resetSize = () => {
       getStepELe();
@@ -137,7 +135,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
-      eventGlobal.off('prepare-lessons-guide', onResetGuide);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
     });
 
     const handleNext = () => {

src/hooks/useDrag/dragbom.jsx

@@ -1,14 +1,52 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive, onMounted, ref } from 'vue';
 import styles from './index.module.less';
+import { setGuidanceShow, guidanceShow } from './useDragGuidance';
 // 底部拖动区域
 export default defineComponent({
   name: 'dragBom',
   setup() {
+    const data = reactive({
+      guidePos: 'bottom'
+    });
+    const guidanceShowDela = ref(false);
+    const initGuidePos = () => {
+      const pageHeight =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      const guideHeight =
+        document.querySelector('.bom_guide')?.getBoundingClientRect().height ||
+        0;
+      const dragTop =
+        document.querySelector('.bom_drag')?.getBoundingClientRect()?.top || 0;
+      data.guidePos = pageHeight - dragTop < guideHeight ? 'top' : 'bottom';
+    };
+    onMounted(() => {
+      if (guidanceShow.value) {
+        const _itme = setTimeout(() => {
+          clearTimeout(_itme);
+          initGuidePos();
+          guidanceShowDela.value = true;
+        }, 300);
+      }
+    });
     return () => (
-      <div class={[styles.dragBom, 'bom_drag']}>
-        <div class={styles.box}></div>
-        <div class={styles.box}></div>
-      </div>
+      <>
+        <div class={[styles.dragBom, 'bom_drag']}>
+          <div class={styles.box}></div>
+          <div class={styles.box}></div>
+        </div>
+        {guidanceShow.value && (
+          <div
+            class={[
+              styles.guide,
+              data.guidePos === 'top' && styles.guideTop,
+              !guidanceShowDela.value && styles.hideGuide,
+              'bom_guide'
+            ]}>
+            <div class={styles.guideBg}></div>
+            <div class={styles.guideDone} onClick={setGuidanceShow}></div>
+          </div>
+        )}
+      </>
     );
   }
 });

src/hooks/useDrag/index.module.less

@@ -16,3 +16,49 @@
     }
   }
 }
+.guide {
+  position: absolute;
+  left: 0;
+  top: calc(100% - 10px);
+  &::before {
+    content: '';
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3000;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  &.hideGuide {
+    visibility: hidden;
+  }
+  .guideBg {
+    position: relative;
+    z-index: 3001;
+    width: 500px;
+    height: 256px;
+    background: url('./img//modalDragBg.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .guideDone {
+    position: absolute;
+    z-index: 3001;
+    left: 34.6%;
+    top: 72.2%;
+    width: 124px;
+    height: 49px;
+    background: url('./img/modalDragDone.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+  &.guideTop {
+    top: initial;
+    bottom: 2px;
+    .guideBg {
+      background: url('./img/modalDragBg2.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}

src/hooks/useDrag/useDragGuidance.ts

@@ -0,0 +1,37 @@
+import { getGuidance, setGuidance } from '@/custom-plugins/guide-page/api';
+import { ref } from 'vue';
+
+// 引导页
+export const guidanceShow = ref(false);
+let guideInfoData: Record<string, any> = {};
+export async function getGuidanceShow() {
+  try {
+    const res = await getGuidance({ guideTag: 'guideInfo' });
+    if (res.code === 200) {
+      if (res.data) {
+        const guideInfo = JSON.parse(res.data?.guideValue) || null;
+        if (guideInfo) {
+          guideInfoData = guideInfo;
+          guidanceShow.value = !guideInfo.teacherDrag;
+        }
+      } else {
+        guidanceShow.value = true;
+      }
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+export function setGuidanceShow() {
+  try {
+    setGuidance({
+      guideTag: 'guideInfo',
+      guideValue: JSON.stringify(
+        Object.assign(guideInfoData, { teacherDrag: true })
+      )
+    });
+    guidanceShow.value = false;
+  } catch (e) {
+    console.log(e);
+  }
+}

src/views/attend-class/index.module.less

@@ -526,11 +526,6 @@
     }
   }
 }
-.dragbom{
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 .removeVisiable {
   width: 432px;
   position: relative;
@@ -771,8 +766,23 @@
 
 .workVisiable {
   width: 1200px;
+  :global {
+    .bom_drag{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+:global{
+  .metronomeConBoxClass_drag,.timerMeterConBoxClass_drag{
+    .bom_drag{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
 }
-
 .workContainer {
   display: flex;
   align-items: center;

src/views/attend-class/index.tsx

@@ -95,6 +95,7 @@ import { useResizeObserver } from '@vueuse/core';
 import { storage } from '/src/utils/storage';
 import { ACCESS_TOKEN_ADMIN } from '/src/store/mutation-types';
 import useDrag from '@/hooks/useDrag';
+import { getGuidanceShow } from '@/hooks/useDrag/useDragGuidance';
 import Dragbom from '@/hooks/useDrag/dragbom';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
@@ -311,12 +312,12 @@ export default defineComponent({
       }
       //
       if (ev.data?.api === 'documentBodyKeyup') {
-        if (ev.data?.code === 'ArrowLeft') {
+        if (ev.data?.code === 'ArrowUp') {
           setModalOpen();
           handlePreAndNext('up');
         }
 
-        if (ev.data?.code === 'ArrowRight') {
+        if (ev.data?.code === 'ArrowDown') {
           setModalOpen();
           handlePreAndNext('down');
         }
@@ -1451,6 +1452,8 @@ export default defineComponent({
     };
 
     /* 弹窗加拖动 */
+    // 引导页
+    getGuidanceShow();
     // 选择课件弹窗
     const selCourBoxClass = 'selCourBoxClass_drag';
     const selCourDragData = useDrag(
@@ -2158,7 +2161,7 @@ export default defineComponent({
               </NButton>
             </NSpace>
           </div>
-          <Dragbom class={styles.dragbom}></Dragbom>
+          <Dragbom></Dragbom>
         </NModal>
 
         {/* 训练设置 */}
@@ -2223,7 +2226,7 @@ export default defineComponent({
               <ResourceMain from={'class'} cardType="homerowk-record" />
             </div>
           </div>
-          <Dragbom class={styles.dragbom}></Dragbom>
+          <Dragbom></Dragbom>
         </NModal>
 
         <NModal
@@ -2246,7 +2249,7 @@ export default defineComponent({
                 iframeDislableKeyboard(val.target);
               }}
               height={'650px'}></iframe>
-            <Dragbom class={styles.dragbom}></Dragbom>
+            <Dragbom></Dragbom>
           </div>
         </NModal>
 
@@ -2273,7 +2276,7 @@ export default defineComponent({
           }}>
           <div>
             <TimerMeter></TimerMeter>
-            <Dragbom class={styles.dragbom}></Dragbom>
+            <Dragbom></Dragbom>
           </div>
         </NModal>
 

src/views/home/index.tsx

@@ -37,6 +37,7 @@ import PreviewWindow from '../preview-window';
 import { state } from '/src/state';
 import SubjectModal from './modals/subject-modal';
 import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
+import HomeGuide from '/src/custom-plugins/guide-page/home-guide';
 // import { state } from '/src/state';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
@@ -92,6 +93,7 @@ export default defineComponent({
     });
     return () => (
       <div class={styles.homeWrap}>
+        <div id="home-0"></div>
         <div class={styles.homeSection}>
           <div class={styles.homeLeft}>
             <i class={styles.homeWindow}></i>
@@ -120,6 +122,7 @@ export default defineComponent({
                     });
                   }}></div>
                 <div
+                  id="home-4"
                   class={styles.btnClass}
                   onClick={() => {
                     forms.showAttendClass = true;
@@ -210,7 +213,7 @@ export default defineComponent({
           </div>
         </div>
 
-        {/* {forms.showGuide ? <HomeGuide></HomeGuide> : null} */}
+        {forms.showGuide ? <HomeGuide></HomeGuide> : null}
 
         <NModal class={['background']} v-model:show={showModalTone.value}>
           <div>

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -665,7 +665,7 @@ export default defineComponent({
         ref={coursewareListRef}>
         <NScrollbar
           class={[styles.listContainer, 'listContainerWrap']}
-          {...{ id: 'lessons-2' }}>
+          {...{ id: 'lessonsIn-1' }}>
           <NSpin show={forms.loadingStatus}>
             <div class={[styles.listSection, 'listSectionWrap']}>
               {forms.coursewareList.map((item: any, index: number) => (

src/views/prepare-lessons/components/lesson-main/courseware/index.tsx

@@ -536,7 +536,7 @@ export default defineComponent({
             styles.listContainer,
             forms.drag ? styles.listContainerDrag : ''
           ]}
-          {...{ id: 'lessons-2' }}>
+          {...{ id: 'lessonsIn-1' }}>
           <NSpin show={forms.loadingStatus}>
             <div
               class={[
@@ -714,7 +714,6 @@ export default defineComponent({
                 预览课件
               </NButton>
               <NButton
-                {...{ id: 'lessons-3' }}
                 type="error"
                 class={styles.btnClassStart}
                 onClick={async () => {
@@ -957,3 +956,4 @@ export default defineComponent({
     );
   }
 });
+

src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -1,4 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  toRef
+} from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -22,6 +29,9 @@ import AssignStudent from './assign-student';
 import { state } from '/src/state';
 import { nextTick } from 'process';
 import { api_getCurrentGradeYear } from '/src/views/studentList/api';
+import useDrag from '@/hooks/useDrag';
+import Dragbom from '@/hooks/useDrag/dragbom';
+import { useUserStore } from '@/store/modules/users';
 
 export default defineComponent({
   name: 'assign-homework',
@@ -51,6 +61,11 @@ export default defineComponent({
     homeworkType: {
       type: String as PropType<'CLASSWORK' | 'HOMEWORK'>,
       default: 'CLASSWORK'
+    },
+    from: {
+      // 来自哪里
+      type: String,
+      default: ''
     }
   },
   emits: ['close', 'confirm'],
@@ -194,6 +209,22 @@ export default defineComponent({
       await getCurrentGradeYear();
       await getClassGroupList();
     });
+    // 选择学生
+    let assignHomeworkStuBoxDragData: any;
+    let assignHomeworkStuBoxClass: string;
+    if (props.from === 'class') {
+      const users = useUserStore();
+      assignHomeworkStuBoxClass = 'assignHomeworkStuBoxClass_drag';
+      assignHomeworkStuBoxDragData = useDrag(
+        [
+          `${assignHomeworkStuBoxClass}>.n-card-header`,
+          `${assignHomeworkStuBoxClass} .bom_drag`
+        ],
+        assignHomeworkStuBoxClass,
+        toRef(forms, 'workVisiable'),
+        users.info.id
+      );
+    }
     return () => (
       <div class={styles.assignHomeworkContainer}>
         <NForm
@@ -376,11 +407,20 @@ export default defineComponent({
 
         <NModal
           v-model:show={forms.workVisiable}
+          style={
+            props.from === 'class'
+              ? {
+                  width: '640px',
+                  ...assignHomeworkStuBoxDragData.styleDrag.value
+                }
+              : {
+                  width: '640px'
+                }
+          }
           preset="card"
           showIcon={false}
-          class={['modalTitle background']}
+          class={['modalTitle background', assignHomeworkStuBoxClass]}
           title={'选择学生'}
-          style={{ width: '640px' }}
           blockScroll={false}>
           <AssignStudent
             classGroupId={props.classGroupId}
@@ -394,6 +434,7 @@ export default defineComponent({
               forms.workVisiable = false;
             }}
           />
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </div>
     );

src/views/prepare-lessons/components/lesson-main/train/assign-student/index.tsx

@@ -211,7 +211,7 @@ export default defineComponent({
       });
     });
     return () => (
-      <div class={styles.assignStudent}>
+      <div class={[styles.assignStudent, 'assignStudent']}>
         <div class={styles.studentListGroup}>
           <div class={styles.searchSection}>
             <div class={styles.searchSpace}>

src/views/prepare-lessons/components/lesson-main/train/index.module.less

@@ -57,10 +57,21 @@
     }
   }
 }
-.dragbom{
-  position: absolute;
-  bottom: 0;
-  left: 0;
+:global{
+  .assignHomeworkStuBoxClass_drag{
+    .assignStudent{
+      >div{
+        padding-bottom: 10px;
+      }
+    }
+  }
+  .assignHomeworkStuBoxClass_drag,.workSetingBoxClass_drag,.workClearBoxClass_drag,.workSaveBoxClass_drag,.workArrangeImmediatelyBoxClass_drag{
+    .bom_drag{
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
 }
 .tipsContainer {
   display: flex;

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -562,7 +562,7 @@ export default defineComponent({
               prepareStore.setTrainList(forms.trainList);
             }}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
 
         {/* 添加自定义教材 */}
@@ -583,6 +583,7 @@ export default defineComponent({
           title={'布置作业'}
           blockScroll={false}>
           <AssignHomework
+            from={props.from}
             classGroupId={props.classGroupId}
             courseScheduleId={props.courseScheduleId}
             chapterLessonCoursewareId={props.lessonPreTraining.chapterId}
@@ -601,7 +602,7 @@ export default defineComponent({
               }
             }}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
 
         {/* {showGuide.value ? <Trainguide></Trainguide> : null} */}
@@ -639,7 +640,7 @@ export default defineComponent({
               </NButton>
             </NSpace>
           </div>
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
 
         <NModal
@@ -657,7 +658,7 @@ export default defineComponent({
             onClose={() => (forms.preSaveVisiable = false)}
             onConfirm={() => onPreSave()}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </div>
     );

src/views/prepare-lessons/components/resource-main/components/select-music/index.module.less

@@ -39,8 +39,11 @@
 .trainEditModal {
   width: 494px;
 }
-.dragbom{
-  position: absolute;
-  bottom: 0;
-  left: 0;
+
+:global{
+  .workSetingBoxClass_drag .bom_drag{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
 }

src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -318,7 +318,9 @@ export default defineComponent({
 
         <NModal
           v-model:show={state.editStatus}
-          style={workSetingBoxDragData?.styleDrag?.value}
+          style={
+            props.from === 'class' ? workSetingBoxDragData.styleDrag.value : {}
+          }
           class={[
             'modalTitle background',
             styles.trainEditModal,
@@ -349,9 +351,10 @@ export default defineComponent({
               eventGlobal.emit('onTrainAddItem', train);
             }}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </div>
     );
   }
 });
+

src/views/prepare-lessons/components/resource-main/index.module.less

@@ -78,10 +78,14 @@
   }
 
 }
-.dragbom{
-  position: absolute;
-  bottom: 0;
-  left: 0;
+:global{
+  .workSetingBoxClass_drag,.selectResourceStatusAddBoxClass_drag{
+    .bom_drag{
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
 }
 .selectMusicModal {
   position: relative;

src/views/prepare-lessons/components/resource-main/index.tsx

@@ -135,6 +135,7 @@ export default defineComponent({
         {prepareStore.getTabType === 'courseware' &&
         !['homerowk-record', 'prepare'].includes(props.cardType) ? (
           <NTabs
+            id="lessonsIn-0"
             ref={tabRef}
             animated
             class={styles.homerowkTabs}
@@ -283,7 +284,7 @@ export default defineComponent({
             from={props.from}
             onAdd={(item: any) => onAdd(item)}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
         <NModal
           style={
@@ -314,7 +315,7 @@ export default defineComponent({
               eventGlobal.emit('onTrainAddItem', train);
             }}
           />
-          {props.from === 'class' && <Dragbom class={styles.dragbom}></Dragbom>}
+          {props.from === 'class' && <Dragbom></Dragbom>}
         </NModal>
       </div>
     );

src/views/prepare-lessons/index.tsx

@@ -15,6 +15,7 @@ import { onBeforeRouteLeave } from 'vue-router';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { storeToRefs } from 'pinia';
 import LessonsGuide from '@/custom-plugins/guide-page/lessons-guide';
+import LessonsGuideIn from '@/custom-plugins/guide-page/lessons-guideIn';
 import { eventGlobal } from '/src/utils';
 import { setGuidance } from '/src/custom-plugins/guide-page/api';
 export default defineComponent({
@@ -28,29 +29,10 @@ export default defineComponent({
     // console.log(prepareStore, 'prepareStore');
     const { treeList, coursewareList } = storeToRefs(prepareStore);
     const showGuide = computed(() => {
-      return (
-        treeList.value.length > 0 &&
-        coursewareList.value.length > 0 &&
-        isEndMounted.value
-      );
+      return treeList.value.length > 0 && isEndMounted.value;
     });
     const isEndMounted = ref(false);
     const directroyRef = ref();
-    const onUpdate = async (name: string) => {
-      if (name === 'prepare-lessons') {
-        if (prepareStore.getTabType === 'courseware') {
-          try {
-            await setGuidance({
-              guideTag: 'teacher-guideInfo',
-              guideValue: JSON.stringify({ lessonsGuide: false })
-            });
-          } catch (e) {
-            console.log(e);
-          }
-        }
-        eventGlobal.emit('prepare-lessons-guide', prepareStore.getTabType);
-      }
-    };
 
     const onSlideChange = (val: boolean) => {
       console.log(val, 'val');
@@ -59,11 +41,6 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      // 指引事件
-      eventGlobal.on('teacher-guideInfo', async (name: string) =>
-        onUpdate(name)
-      );
-
       // 作业预设事件
       eventGlobal.on('teacher-slideshow', onSlideChange);
 
@@ -71,7 +48,6 @@ export default defineComponent({
       // eventGlobal.on('courseware-slideshow', onSlideChange);
     });
     onUnmounted(() => {
-      eventGlobal.off('teacher-guideInfo', onUpdate);
       eventGlobal.off('teacher-slideshow', onSlideChange);
     });
     onMounted(() => {
@@ -122,10 +98,11 @@ export default defineComponent({
           <LessonMain />
         </div>
         {/* 资源 */}
-        <div class={[styles.resourceMain]} id="lessons-1">
+        <div class={[styles.resourceMain]}>
           {state.sidebarShow && <ResourceMain ref={resourceMainRef} />}
         </div>
-        {showGuide.value ? <LessonsGuide></LessonsGuide> : null}
+        {showGuide.value && !state.sidebarShow && <LessonsGuide></LessonsGuide>}
+        {state.sidebarShow && <LessonsGuideIn></LessonsGuideIn>}
       </div>
     );
   }