classroom-instruments/src/views/prepare-lessons/index.tsx

import { defineComponent, onMounted, ref, onUnmounted, reactive } from 'vue';
import styles from './index.module.less';
import DirectoryList from './components/directory-main';
import LessonMain from './components/lesson-main';
import ResourceMain from './components/resource-main';
import { useResizeObserver } from '@vueuse/core';
import { onBeforeRouteLeave } from 'vue-router';
import { usePrepareStore } from '/src/store/modules/prepareLessons';
// import LessonsGuideIn from '@/custom-plugins/guide-page/lessons-guideIn';
import { eventGlobal } from '/src/utils';
export default defineComponent({
  name: 'prepare-lessons',
  setup() {
    const state = reactive({
      sidebarShow: false
    });
    const prepareStore = usePrepareStore();
    const resourceMainRef = ref();
    // console.log(prepareStore, 'prepareStore');
    const directroyRef = ref();

    const onSlideChange = (val: boolean) => {
      console.log(val, 'val');
      state.sidebarShow = val;
      resourceMainRef.value?.resetTabPosition();
    };

    onMounted(() => {
      // 作业预设事件
      eventGlobal.on('teacher-slideshow', onSlideChange);

      // // 课件编辑事件
      // eventGlobal.on('courseware-slideshow', onSlideChange);
    });
    onUnmounted(() => {
      eventGlobal.off('teacher-slideshow', onSlideChange);
    });
    onMounted(() => {
      useResizeObserver(
        document.querySelector('#lessons-height') as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          document.documentElement.style.setProperty(
            '--window-page-lesson-height',
            height + 'px'
          );
        }
      );
    });

    // 当前页面离开时
    onBeforeRouteLeave(() => {
      // 离开时恢复默认
      prepareStore.setTabType('courseware');
      prepareStore.setSelectMusicStatus(false);
      prepareStore.setSelectResourceStatus(false);
      prepareStore.setIsAddResource(false);
      prepareStore.setIsAddTrain(false);
      prepareStore.setIsEditResource(false);
      prepareStore.setIsEditTrain(false);
      // sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
    });
    onUnmounted(() => {
      prepareStore.setSubjectId('');
    });
    return () => (
      <div
        class={[
          styles.prepareLessons,
          state.sidebarShow ? styles.showSideBar : styles.hideSideBar
        ]}
        id="lessons-height">
        {/* 左侧目录 */}
        <div class={styles.directoryMain} ref={directroyRef.value}>
          <DirectoryList sidebarShow={state.sidebarShow} />
        </div>
        {/* 中间排课 */}
        <div class={styles.lessonMain}>
          <LessonMain />
        </div>
        {/* 资源 */}
        <div class={[styles.resourceMain]}>
          {state.sidebarShow && <ResourceMain ref={resourceMainRef} />}
        </div>
        {/* {state.sidebarShow && <LessonsGuideIn></LessonsGuideIn>} */}
      </div>
    );
  }
});