引导

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/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/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

@@ -626,7 +626,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 () => {

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}

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>
     );
   }