修复引导页bug

src/components/timerMeter/TimerMeter.vue

@@ -150,7 +150,7 @@
 <script setup lang="ts">
 import { ref, watch, onUnmounted, onMounted } from 'vue';
 import { NInputNumber } from 'naive-ui';
-import soundWav from './timer.wav';
+import soundWav from './timer.mp3';
 import Dragbom from '@/hooks/useDrag/dragbom';
 
 const soundVIdeo = new Audio(soundWav);

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

@@ -210,9 +210,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo-attend-class', (name: string) =>
-        onResetGuide(name)
-      );
+      eventGlobal.on('teacher-guideInfo-attend-class', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -173,7 +173,7 @@ export default defineComponent({
       getStepELe();
       window.addEventListener('resize', resetSize);
 
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -179,7 +179,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -254,7 +254,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -125,9 +125,12 @@ export default defineComponent({
       }
     };
     onMounted(() => {
-      getStepELe();
+      // 等所有Mounte之后再加上 防止获取不到id
+      setTimeout(() => {
+        getStepELe();
+      }, 0);
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -151,7 +151,7 @@ export default defineComponent({
         getStepELe();
       }, 500);
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -180,7 +180,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -152,7 +152,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -155,7 +155,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -127,7 +127,7 @@ export default defineComponent({
     onMounted(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
     });
     const resetSize = () => {
       getStepELe();

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

@@ -14,6 +14,7 @@ import { useRoute } from 'vue-router';
 import { eventGlobal } from '/src/utils';
 import TheNoticeBar from '/src/components/TheNoticeBar';
 import { getSubjectList2 } from '/src/api/user';
+import LessonsGuide from '@/custom-plugins/guide-page/lessons-guide';
 
 export default defineComponent({
   name: 'directory-main',
@@ -214,208 +215,211 @@ export default defineComponent({
       });
     });
     return () => (
-      <div class={styles.directoryList}>
-        {forms.showSelectBookStatus &&
-          (prepareStore.getBaseCourseware.id ? (
-            <div id="lessons-0" class={styles['select-directory-info']}>
-              <div
-                class={styles.itemImg}
-                onClick={() => (forms.coursewareStatus = true)}>
-                <NImage
-                  objectFit="cover"
-                  src={prepareStore.getBaseCourseware.coverImg}
-                  lazy
-                  previewDisabled={true}
-                  onLoad={e => {
-                    (e.target as any).dataset.loaded = 'true';
-                  }}
-                />
-              </div>
-              <div class={styles.itemContent}>
-                <h2>
-                  <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
-                </h2>
-                <div class={styles.subjects}>
-                  <TheNoticeBar
-                    text={formatInstrumentNames.value}
-                    time={formatInstrumentNames.value.length > 15 ? 10 : 5}
-                  />
-                </div>
+      <>
+        <div class={styles.directoryList}>
+          {forms.showSelectBookStatus &&
+            (prepareStore.getBaseCourseware.id ? (
+              <div id="lessons-0" class={styles['select-directory-info']}>
                 <div
-                  class={styles.changeDir}
+                  class={styles.itemImg}
                   onClick={() => (forms.coursewareStatus = true)}>
+                  <NImage
+                    objectFit="cover"
+                    src={prepareStore.getBaseCourseware.coverImg}
+                    lazy
+                    previewDisabled={true}
+                    onLoad={e => {
+                      (e.target as any).dataset.loaded = 'true';
+                    }}
+                  />
+                </div>
+                <div class={styles.itemContent}>
+                  <h2>
+                    <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
+                  </h2>
+                  <div class={styles.subjects}>
+                    <TheNoticeBar
+                      text={formatInstrumentNames.value}
+                      time={formatInstrumentNames.value.length > 15 ? 10 : 5}
+                    />
+                  </div>
+                  <div
+                    class={styles.changeDir}
+                    onClick={() => (forms.coursewareStatus = true)}>
+                    <svg
+                      width="11px"
+                      height="10px"
+                      viewBox="0 0 11 10"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <title>切片</title>
+                      <g
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd">
+                        <g
+                          transform="translate(-279.000000, -210.000000)"
+                          fill="#0378EC"
+                          fill-rule="nonzero">
+                          <g transform="translate(132.000000, 96.000000)">
+                            <g transform="translate(32.000000, 24.000000)">
+                              <g transform="translate(103.000000, 10.000000)">
+                                <g transform="translate(0.000000, 71.000000)">
+                                  <g transform="translate(12.000000, 9.000000)">
+                                    <path d="M10.4116565,3.89985699 C10.6551462,3.89985699 10.8747497,3.75140792 10.9680437,3.52360884 C11.0613377,3.29606287 11.0096883,3.03384082 10.8376072,2.85944797 L8.08018279,0.0692888872 C7.98888976,-0.0230962957 7.8410701,-0.0230962957 7.74977708,0.0692888872 L7.22840639,0.59689687 C7.13711336,0.689282053 7.13711336,0.838996672 7.22840639,0.931255299 L8.95772133,2.68113191 L0.230858792,2.68113191 C0.103423738,2.68113191 0,2.78566638 0,2.91475252 L0,3.66636293 C0,3.79532253 0.10329868,3.89998355 0.230858792,3.89998355 L10.4116565,3.89998355 L10.4116565,3.89985699 Z M10.877501,6.10001645 L0.699579677,6.10001645 C0.456089932,6.10001645 0.236486444,6.24846552 0.143192479,6.4762646 C0.0498985147,6.70381057 0.101547854,6.96603263 0.273628948,7.14042548 L3.03105338,9.93071111 C3.12234641,10.0230963 3.27016607,10.0230963 3.36145909,9.93071111 L3.88282978,9.40310313 C3.97412281,9.31071795 3.97412281,9.16100333 3.88282978,9.0687447 L2.15351484,7.31874154 L10.877501,7.31874154 C11.0065618,7.31874154 11.1111111,7.21281496 11.1111111,7.08233671 L11.1111111,6.33654783 C11.1111111,6.20594302 11.0065618,6.10001645 10.877501,6.10001645 Z"></path>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </svg>
+                    <span>切换教材</span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div
+                id="lessons-0"
+                class={styles['select-directory']}
+                onClick={() => (forms.coursewareStatus = true)}>
+                <span
+                  class={['cr-ellipsis']}
+                  title={prepareStore.getBaseCourseware.name}>
+                  {prepareStore.getBaseCourseware.name || '请选择教材'}
+                </span>
+                <NIcon class={styles.iconArrow}>
                   <svg
                     width="11px"
-                    height="10px"
-                    viewBox="0 0 11 10"
+                    height="15px"
+                    viewBox="0 0 11 15"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg">
-                    <title>切片</title>
                     <g
                       stroke="none"
                       stroke-width="1"
                       fill="none"
-                      fill-rule="evenodd">
+                      fill-rule="evenodd"
+                      opacity="0.699999988">
                       <g
-                        transform="translate(-279.000000, -210.000000)"
-                        fill="#0378EC"
-                        fill-rule="nonzero">
-                        <g transform="translate(132.000000, 96.000000)">
-                          <g transform="translate(32.000000, 24.000000)">
-                            <g transform="translate(103.000000, 10.000000)">
-                              <g transform="translate(0.000000, 71.000000)">
-                                <g transform="translate(12.000000, 9.000000)">
-                                  <path d="M10.4116565,3.89985699 C10.6551462,3.89985699 10.8747497,3.75140792 10.9680437,3.52360884 C11.0613377,3.29606287 11.0096883,3.03384082 10.8376072,2.85944797 L8.08018279,0.0692888872 C7.98888976,-0.0230962957 7.8410701,-0.0230962957 7.74977708,0.0692888872 L7.22840639,0.59689687 C7.13711336,0.689282053 7.13711336,0.838996672 7.22840639,0.931255299 L8.95772133,2.68113191 L0.230858792,2.68113191 C0.103423738,2.68113191 0,2.78566638 0,2.91475252 L0,3.66636293 C0,3.79532253 0.10329868,3.89998355 0.230858792,3.89998355 L10.4116565,3.89998355 L10.4116565,3.89985699 Z M10.877501,6.10001645 L0.699579677,6.10001645 C0.456089932,6.10001645 0.236486444,6.24846552 0.143192479,6.4762646 C0.0498985147,6.70381057 0.101547854,6.96603263 0.273628948,7.14042548 L3.03105338,9.93071111 C3.12234641,10.0230963 3.27016607,10.0230963 3.36145909,9.93071111 L3.88282978,9.40310313 C3.97412281,9.31071795 3.97412281,9.16100333 3.88282978,9.0687447 L2.15351484,7.31874154 L10.877501,7.31874154 C11.0065618,7.31874154 11.1111111,7.21281496 11.1111111,7.08233671 L11.1111111,6.33654783 C11.1111111,6.20594302 11.0065618,6.10001645 10.877501,6.10001645 Z"></path>
-                                </g>
-                              </g>
-                            </g>
-                          </g>
+                        transform="translate(-445.000000, -137.000000)"
+                        fill="#131415">
+                        <g transform="translate(152.000000, 120.000000)">
+                          <path
+                            d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
+                            id="三角形"
+                            transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
                         </g>
                       </g>
                     </g>
                   </svg>
-                  <span>切换教材</span>
-                </div>
+                </NIcon>
               </div>
-            </div>
-          ) : (
-            <div
-              id="lessons-0"
-              class={styles['select-directory']}
-              onClick={() => (forms.coursewareStatus = true)}>
-              <span
-                class={['cr-ellipsis']}
-                title={prepareStore.getBaseCourseware.name}>
-                {prepareStore.getBaseCourseware.name || '请选择教材'}
-              </span>
-              <NIcon class={styles.iconArrow}>
-                <svg
-                  width="11px"
-                  height="15px"
-                  viewBox="0 0 11 15"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <g
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
-                    opacity="0.699999988">
-                    <g
-                      transform="translate(-445.000000, -137.000000)"
-                      fill="#131415">
-                      <g transform="translate(152.000000, 120.000000)">
-                        <path
-                          d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
-                          id="三角形"
-                          transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
-                      </g>
-                    </g>
-                  </g>
-                </svg>
-              </NIcon>
-            </div>
-          ))}
+            ))}
 
-        <NScrollbar class={styles.scrollBar}>
-          <NSpin show={show.value}>
-            <div
-              class={[
-                styles.listSection,
-                !show.value && prepareStore.getTreeList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {prepareStore.getTreeList.map((item: any, index: number) => (
-                <div class={styles.treeParent} key={'parent' + index}>
-                  <div
-                    class={[styles.treeItem, styles.parentItem]}
-                    onClick={() => {
-                      prepareStore.getTreeList.forEach((child: any) => {
-                        if (item.id !== child.id) {
-                          child.selected = false;
-                        }
-                      });
-                      item.selected = item.selected ? false : true;
-                    }}>
-                    {item.knowledgeList && item.knowledgeList.length > 0 && (
-                      <span
-                        class={[
-                          styles.arrow,
-                          item.selected ? styles.arrowSelect : ''
-                        ]}></span>
-                    )}
-                    <p
-                      class={[
-                        styles.title,
-                        item.selected ? styles.titleSelect : ''
-                      ]}>
-                      <span
+          <NScrollbar class={styles.scrollBar}>
+            <NSpin show={show.value}>
+              <div
+                class={[
+                  styles.listSection,
+                  !show.value && prepareStore.getTreeList.length <= 0
+                    ? styles.emptySection
+                    : ''
+                ]}>
+                {prepareStore.getTreeList.map((item: any, index: number) => (
+                  <div class={styles.treeParent} key={'parent' + index}>
+                    <div
+                      class={[styles.treeItem, styles.parentItem]}
+                      onClick={() => {
+                        prepareStore.getTreeList.forEach((child: any) => {
+                          if (item.id !== child.id) {
+                            child.selected = false;
+                          }
+                        });
+                        item.selected = item.selected ? false : true;
+                      }}>
+                      {item.knowledgeList && item.knowledgeList.length > 0 && (
+                        <span
+                          class={[
+                            styles.arrow,
+                            item.selected ? styles.arrowSelect : ''
+                          ]}></span>
+                      )}
+                      <p
                         class={[
-                          styles.dir,
-                          item.selected ? styles.dirSelect : ''
-                        ]}></span>
-                      {item.name}
-                    </p>
-                  </div>
+                          styles.title,
+                          item.selected ? styles.titleSelect : ''
+                        ]}>
+                        <span
+                          class={[
+                            styles.dir,
+                            item.selected ? styles.dirSelect : ''
+                          ]}></span>
+                        {item.name}
+                      </p>
+                    </div>
 
-                  {item.selected &&
-                    item.knowledgeList &&
-                    item.knowledgeList.map((child: any, j: number) => (
-                      <div
-                        key={'child' + j}
-                        class={[
-                          styles.treeItem,
-                          styles.childItem,
-                          styles.animation,
-                          prepareStore.getSelectKey === child.id
-                            ? styles.childSelect
-                            : ''
-                        ]}
-                        onClick={() => {
-                          if (prepareStore.getIsEditResource) {
-                            eventGlobal.emit('pageBeforeLeave', () =>
-                              clickDetail(child)
-                            );
-                          } else {
-                            clickDetail(child);
-                          }
-                        }}>
-                        <span class={styles.childArrow}></span>
-                        <p class={styles.title}>{child.name}</p>
-                      </div>
-                    ))}
-                </div>
-              ))}
-            </div>
-            {!show.value && prepareStore.getTreeList.length <= 0 && (
-              <TheEmpty />
-            )}
-          </NSpin>
-        </NScrollbar>
+                    {item.selected &&
+                      item.knowledgeList &&
+                      item.knowledgeList.map((child: any, j: number) => (
+                        <div
+                          key={'child' + j}
+                          class={[
+                            styles.treeItem,
+                            styles.childItem,
+                            styles.animation,
+                            prepareStore.getSelectKey === child.id
+                              ? styles.childSelect
+                              : ''
+                          ]}
+                          onClick={() => {
+                            if (prepareStore.getIsEditResource) {
+                              eventGlobal.emit('pageBeforeLeave', () =>
+                                clickDetail(child)
+                              );
+                            } else {
+                              clickDetail(child);
+                            }
+                          }}>
+                          <span class={styles.childArrow}></span>
+                          <p class={styles.title}>{child.name}</p>
+                        </div>
+                      ))}
+                  </div>
+                ))}
+              </div>
+              {!show.value && prepareStore.getTreeList.length <= 0 && (
+                <TheEmpty />
+              )}
+            </NSpin>
+          </NScrollbar>
 
-        {/* 选择教材 */}
-        <NModal
-          v-model:show={forms.coursewareStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.coursewareModal]}
-          title={'切换教材'}
-          blockScroll={false}>
-          <SelectLessonware
-            onClose={() => (forms.coursewareStatus = false)}
-            onConfirm={(item: any) => {
-              if (prepareStore.getIsEditResource) {
-                eventGlobal.emit('pageBeforeLeave', () =>
-                  changeCourseware(item)
-                );
-              } else {
-                changeCourseware(item);
-              }
-            }}
-          />
-        </NModal>
-      </div>
+          {/* 选择教材 */}
+          <NModal
+            v-model:show={forms.coursewareStatus}
+            preset="card"
+            showIcon={false}
+            class={['modalTitle background', styles.coursewareModal]}
+            title={'切换教材'}
+            blockScroll={false}>
+            <SelectLessonware
+              onClose={() => (forms.coursewareStatus = false)}
+              onConfirm={(item: any) => {
+                if (prepareStore.getIsEditResource) {
+                  eventGlobal.emit('pageBeforeLeave', () =>
+                    changeCourseware(item)
+                  );
+                } else {
+                  changeCourseware(item);
+                }
+              }}
+            />
+          </NModal>
+        </div>
+        {forms.showSelectBookStatus && <LessonsGuide></LessonsGuide>}
+      </>
     );
   }
 });

src/views/prepare-lessons/index.tsx

@@ -14,7 +14,6 @@ import { useResizeObserver } from '@vueuse/core';
 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';
@@ -27,11 +26,6 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const resourceMainRef = ref();
     // console.log(prepareStore, 'prepareStore');
-    const { treeList, coursewareList } = storeToRefs(prepareStore);
-    const showGuide = computed(() => {
-      return treeList.value.length > 0 && isEndMounted.value;
-    });
-    const isEndMounted = ref(false);
     const directroyRef = ref();
 
     const onSlideChange = (val: boolean) => {
@@ -62,9 +56,6 @@ export default defineComponent({
           );
         }
       );
-      setTimeout(() => {
-        isEndMounted.value = true;
-      }, 300);
     });
 
     // 当前页面离开时
@@ -101,7 +92,6 @@ export default defineComponent({
         <div class={[styles.resourceMain]}>
           {state.sidebarShow && <ResourceMain ref={resourceMainRef} />}
         </div>
-        {showGuide.value && !state.sidebarShow && <LessonsGuide></LessonsGuide>}
         {state.sidebarShow && <LessonsGuideIn></LessonsGuideIn>}
       </div>
     );