添加批量上传和引导，白板/批注

src/components/layout/index.module.less

@@ -375,16 +375,25 @@
 
 .booxToolWrap {
   // width: 286px;
-  height: 95px;
+  // height: 95px;
   background: #ffffff;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 10px 8px;
+  flex-direction: column;
+  // flex-direction: row;
+  // align-items: center;
+  padding: 16px 20px;
   justify-content: space-between;
 
+  &>div {
+    display: flex;
+
+    &:last-child {
+      margin-top: 16px;
+    }
+  }
+
   .booxToolItem {
     margin: 0 12px;
     display: flex;
@@ -475,4 +484,4 @@
     }
   }
 
-}
+}

src/components/layout/index.tsx

@@ -17,6 +17,9 @@ import toolbox from './images/toolbox.png';
 import setTimeIcon from './images/setTimeIcon.png';
 import beatIcon from './images/beatIcon.png';
 import toneIcon from './images/toneIcon.png';
+import iconWhiteBorad from './images/icon-whiteborad.png';
+import iconPen from './images/icon-pen.png';
+import iconNote from './images/icon-note.png';
 import beatImage from './images/beatImage.png';
 import toneImage from './images/toneImage.png';
 import setTimeImage from './images/setTimeImage.png';
@@ -25,12 +28,14 @@ import TimerMeter from '../timerMeter';
 import { useRoute, useRouter } from 'vue-router';
 import { vaildUrl } from '/src/utils/urlUtils';
 import ChioseModal from '/src/views/home/modals/chioseModal';
-import { px2vw, px2vwH } from '@/utils/index';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
 import PlaceholderTone from './modals/placeholderTone';
 import { state } from '/src/state';
 import PreviewWindow from '/src/views/preview-window';
 import { fscreen } from '@/utils/index';
 import AttendClass from '/src/views/prepare-lessons/model/attend-class';
+import Pen from '/src/views/attend-class/component/tools/pen';
+import study from '/src/views/home/components/study';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -435,7 +440,15 @@ export default defineComponent({
 
       // actionEnd(target, 'right');
     };
-    const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
+    const startShowModal = (
+      val:
+        | 'setTimeIcon'
+        | 'beatIcon'
+        | 'toneIcon'
+        | 'iconWhiteBorad'
+        | 'iconPen'
+        | 'iconNote'
+    ) => {
       if (val == 'setTimeIcon') {
         showModalTime.value = true;
       }
@@ -445,6 +458,29 @@ export default defineComponent({
       if (val == 'toneIcon') {
         showModalTone.value = true;
       }
+      if (val == 'iconNote') {
+        if (NPopoverRef.value) {
+          NPopoverRef.value.setShow(false);
+        }
+        console.log(route.name, 'guideInfo');
+        eventGlobal.emit('teacher-guideInfo', route.name);
+      }
+      if (val == 'iconWhiteBorad') {
+        studyData.whiteboardShow = true;
+        studyData.type = 'whiteboard';
+        studyData.homeStatus = false;
+        if (NPopoverRef.value) {
+          NPopoverRef.value.setShow(false);
+        }
+      }
+      if (val == 'iconPen') {
+        studyData.penShow = true;
+        studyData.type = 'pen';
+        studyData.homeStatus = false;
+        if (NPopoverRef.value) {
+          NPopoverRef.value.setShow(false);
+        }
+      }
     };
     // const moveTargetBoundary = (target: any, type: any) => {
     //   console.log('moveTargetBoundary', target, type);
@@ -515,6 +551,14 @@ export default defineComponent({
       wrapInfo.subHeight = RectInfo.height;
       target.style.transition = '.3s .3s';
     };
+
+    /** 教学数据 */
+    const studyData = reactive({
+      homeStatus: true, // 是否显示首页
+      type: '',
+      penShow: false,
+      whiteboardShow: false
+    });
     return () => (
       <div class={[styles.wrap, 'wrap']}>
         <div>
@@ -559,15 +603,13 @@ export default defineComponent({
           placement={directionType.value as 'left' | 'right'}
           v-slots={{
             trigger: () => (
-              // 首页不显示工具箱
+              // 首页不显示工具箱 ['/', '/home'].includes(route.path) ||
               <img
                 // src={isDragIng.value ? dragingBoxIcon : toolbox}
                 src={toolbox}
                 id="moveNPopover"
                 style={{
-                  display: ['/', '/home'].includes(route.path)
-                    ? 'none'
-                    : 'block'
+                  display: !studyData.homeStatus ? 'none' : 'block'
                 }}
                 class={[
                   styles.toolboxImg,
@@ -579,41 +621,30 @@ export default defineComponent({
             )
           }}>
           <div class={styles.booxToolWrap}>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('beatIcon')}>
-              <img src={beatIcon} alt="" />
-              节拍器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('toneIcon')}>
-              <img src={toneIcon} alt="" />
-              调音器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => startShowModal('setTimeIcon')}>
-              <img src={setTimeIcon} alt="" />
-              计时器
-            </div>
-            <div
-              class={styles.booxToolItem}
-              onClick={() => {
-                showClass.value = true;
-              }}
-              style={{
-                display: [
-                  '/',
-                  '/home',
-                  '/classList',
-                  '/prepare-lessons'
-                ].includes(route.path)
-                  ? 'none'
-                  : 'block'
-              }}>
-              <img
-                src={toolStartClass}
+            <div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('beatIcon')}>
+                <img src={beatIcon} alt="" />
+                节拍器
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('toneIcon')}>
+                <img src={toneIcon} alt="" />
+                调音器
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('setTimeIcon')}>
+                <img src={setTimeIcon} alt="" />
+                计时器
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => {
+                  showClass.value = true;
+                }}
                 style={{
                   display: [
                     '/',
@@ -623,15 +654,71 @@ export default defineComponent({
                   ].includes(route.path)
                     ? 'none'
                     : 'block'
-                }}
-                class={[styles.toolClassImg]}
-                alt=""
-              />
-              开始上课
+                }}>
+                <img
+                  src={toolStartClass}
+                  style={{
+                    display: [
+                      '/',
+                      '/home',
+                      '/classList',
+                      '/prepare-lessons'
+                    ].includes(route.path)
+                      ? 'none'
+                      : 'block'
+                  }}
+                  class={[styles.toolClassImg]}
+                  alt=""
+                />
+                开始上课
+              </div>
+            </div>
+            <div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('iconNote')}>
+                <img src={iconNote} alt="" />
+                帮助指引
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('iconWhiteBorad')}>
+                <img src={iconWhiteBorad} alt="" />
+                批注
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('iconPen')}>
+                <img src={iconPen} alt="" />
+                白板
+              </div>
             </div>
           </div>
         </NPopover>
 
+        {/* 批注 */}
+        {studyData.penShow && (
+          <Pen
+            show={studyData.type === 'pen'}
+            type={studyData.type as any}
+            close={() => {
+              studyData.type = 'init';
+              studyData.homeStatus = true;
+            }}
+          />
+        )}
+
+        {studyData.whiteboardShow && (
+          <Pen
+            show={studyData.type === 'whiteboard'}
+            type={studyData.type as any}
+            close={() => {
+              studyData.type = 'init';
+              studyData.homeStatus = true;
+            }}
+          />
+        )}
+
         <NModal
           class={['modalTitle background']}
           title={'节拍器'}

src/custom-plugins/guide-page/api.ts

@@ -18,3 +18,13 @@ export const getGuidance = (params: any) => {
     params
   });
 };
+
+/**
+ * 删除引导页
+ */
+export const deleteFunctionGuidance = (params: any) => {
+  return request.post('/edu-app/teacher/deleteFunctionGuidance', {
+    data: params,
+    params
+  });
+};

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

@@ -10,9 +10,9 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import { px2vw, px2vwH } from '@/utils/index';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
 import { useRoute } from 'vue-router';
-import {getGuidance,setGuidance} from './api'
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'attent-guide',
   emits: ['close'],
@@ -134,28 +134,27 @@ export default defineComponent({
       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 = {}
+    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.attentGuide) {
+        if (guideInfo.value && guideInfo.value.attentGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
 
-    }
-
-    getAllGuidance()
+    getAllGuidance();
     const getStepELe = () => {
       const ele: HTMLElement = document.getElementById(`attent-${data.step}`)!;
 
@@ -177,9 +176,33 @@ export default defineComponent({
         handleNext();
       }
     };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'attend-class') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { attentGuide: false };
+        } else {
+          guideInfo.value.attentGuide = 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(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
     const resetSize = () => {
       getStepELe();
@@ -187,6 +210,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
     });
     const handleNext = () => {
       if (data.step >= 4) {
@@ -197,8 +221,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
-
+    const endGuide = async () => {
       if (!guideInfo.value) {
         guideInfo.value = { attentGuide: true };
       } else {
@@ -206,10 +229,13 @@ export default defineComponent({
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
       tipShow.value = false;
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       //  localStorage.setItem('endC')
     };

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

@@ -10,8 +10,8 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import { px2vw, px2vwH } from '@/utils/index';
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
@@ -97,27 +97,26 @@ export default defineComponent({
     });
     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 = {}
+    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.classGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).classGuide) {
     //   tipShow.value = false;
@@ -145,9 +144,37 @@ export default defineComponent({
         handleNext();
       }
     };
+
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'classList') return;
+        console.log(name, 'name');
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = 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(() => {
       getStepELe();
       window.addEventListener('resize', resetSize);
+
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
     const resetSize = () => {
       getStepELe();
@@ -155,6 +182,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
     });
 
     const handleNext = () => {
@@ -166,17 +194,19 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
-
+    const endGuide = async () => {
       if (!guideInfo.value) {
         guideInfo.value = { classGuide: true };
       } else {
         guideInfo.value.classGuide = true;
       }
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {getGuidance,setGuidance} from './api'
-import {px2vw,px2vwH} from '@/utils/index'
+import { getGuidance, setGuidance } from './api';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
 export default defineComponent({
   name: 'data-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -36,22 +36,22 @@ export default defineComponent({
           },
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-100),
-            width:  px2vw(472),
+            left: px2vw(-100),
+            width: px2vw(472),
             height: px2vw(256)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-110),
+            bottom: px2vw(30),
+            left: px2vw(-110)
           },
-          boxStyle:{
-            borderRadius:'25px'
+          boxStyle: {
+            borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           }
         },
         {
@@ -59,76 +59,73 @@ export default defineComponent({
           img: getImage('data2.png'),
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-100),
+            left: px2vw(-100),
             width: px2vw(509),
             height: px2vw(230)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-110),
+            bottom: px2vw(30),
+            left: px2vw(-110)
           },
-          boxStyle:{
-            borderRadius:'25px'
+          boxStyle: {
+            borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           }
-
         },
         {
           ele: '',
           img: getImage('data3.png'),
           imgStyle: {
             top: '100%',
-            left:  px2vw(-105),
+            left: px2vw(-105),
             width: px2vw(438),
-            height:px2vw(230)
+            height: px2vw(230)
           },
           btnsStyle: {
             bottom: px2vw(30),
-            left: px2vw(-115),
+            left: px2vw(-115)
           },
 
-          boxStyle:{
-            borderRadius:'25px'
+          boxStyle: {
+            borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           }
-
-        },
+        }
       ],
       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 = {}
+    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.dataGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).dataGuide) {
     //   tipShow.value = false;
@@ -136,7 +133,6 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`data-${data.step}`)!;
 
       if (ele) {
@@ -145,29 +141,54 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'data-module') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { dataGuide: false };
+        } else {
+          guideInfo.value.dataGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -178,7 +199,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
       if (!guideInfo.value) {
@@ -187,10 +208,13 @@ export default defineComponent({
         guideInfo.value.dataGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -212,25 +236,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step]?.boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -244,7 +268,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -257,7 +281,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -35,27 +35,27 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top:  px2vw(-150),
+            top: px2vw(-150),
             left: px2vw(563),
-            width:  px2vw(734),
-            height:  px2vw(295)
+            width: px2vw(734),
+            height: px2vw(295)
           },
           btnsStyle: {
-            bottom:px2vw(188),
-            left:  px2vw(805),
+            bottom: px2vw(188),
+            left: px2vw(805)
           },
-          boxStyle:{
-            border:'none',
-            width:'0px',
-            height:'0px',
+          boxStyle: {
+            border: 'none',
+            width: '0px',
+            height: '0px',
             backgroundColor: 'transparent'
             // visibility: 'hidden'
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
         },
         // {
@@ -92,22 +92,22 @@ export default defineComponent({
           },
           imgStyle: {
             top: px2vw(-4),
-            width:  px2vw(454),
-            height:  px2vw(227),
-            left:px2vw(282)
+            width: px2vw(454),
+            height: px2vw(227),
+            left: px2vw(282)
           },
           btnsStyle: {
             bottom: '30px',
-            left:px2vw(445)
+            left: px2vw(445)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '20px'
           },
-          eleRectPadding:{
-            left:44,
-            top:44,
-            width:88,
-            height:88
+          eleRectPadding: {
+            left: 44,
+            top: 44,
+            width: 88,
+            height: 88
           }
         },
         {
@@ -120,23 +120,21 @@ export default defineComponent({
           },
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-310),
-            width:  px2vw(477),
-            height:  px2vw(227),
+            left: px2vw(-310),
+            width: px2vw(477),
+            height: px2vw(227)
           },
           btnsStyle: {
             bottom: '30px',
-            left:px2vw(-147)
-          },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+            left: px2vw(-147)
           },
-          boxStyle:{
-
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
+          boxStyle: {}
         },
         {
           ele: '',
@@ -148,86 +146,107 @@ export default defineComponent({
           },
           imgStyle: {
             top: '0',
-            width:  px2vw(600),
-            height:  px2vw(290),
+            width: px2vw(600),
+            height: px2vw(290),
             left: px2vw(18)
           },
           btnsStyle: {
-            bottom:  px2vw(95),
+            bottom: px2vw(95),
             left: px2vw(185),
             'justify-content': 'center',
             padding: 0
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
-          },
-          type:'bottom',
-          boxStyle:{
-
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
+          type: 'bottom',
+          boxStyle: {}
         }
       ],
       step: 0
     });
     const tipShow = ref(false);
     // const res =  setGuidance({guideTag:'teacher-guideInfo',guideValue:'{}'})
-    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 = {}
+    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.homeGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`home-${data.step}`)!;
-      console.log(`coai-${data.step}`,data.steps[data.step].eleRectPadding);
+      console.log(`coai-${data.step}`, data.steps[data.step].eleRectPadding);
       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
+        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'
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
         };
-      }else{
-        handleNext()
+      } else {
+        handleNext();
+      }
+    };
+
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'Home') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { homeGuide: false };
+        } else {
+          guideInfo.value.homeGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 3) {
@@ -236,7 +255,7 @@ export default defineComponent({
       }
       data.step = data.step + 1;
       getStepELe();
-    }
+    };
 
     const endGuide = async () => {
       // let guideInfo =
@@ -246,10 +265,13 @@ export default defineComponent({
       } else {
         guideInfo.value.homeGuide = true;
       }
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      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;
@@ -272,25 +294,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -304,7 +326,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -317,7 +339,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+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',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -35,137 +35,131 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top:px2vw(-4),
+            top: px2vw(-4),
             left: px2vw(-50),
-            width:  px2vw(420),
-            height:  px2vw(228)
+            width: px2vw(420),
+            height: px2vw(228)
           },
           btnsStyle: {
-            bottom:px2vw(35),
-            left:  px2vw(111),
+            bottom: px2vw(35),
+            left: px2vw(111)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
         },
         {
           ele: '',
           img: getImage('lessons2.png'),
           imgStyle: {
-
-            left:px2vw(-647),
-            width:px2vw(647),
-            height:px2vw(223)
+            left: px2vw(-647),
+            width: px2vw(647),
+            height: px2vw(223)
           },
           btnsStyle: {
             bottom: '30px',
-            left: px2vw(-488),
+            left: px2vw(-488)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
-          type:'left'
-
+          type: 'left'
         },
         {
           ele: '',
           img: getImage('lessons3.png'),
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-471),
+            left: px2vw(-471),
             width: px2vw(471),
-            height:px2vw(223)
+            height: px2vw(223)
           },
           btnsStyle: {
             bottom: px2vw(20),
-            left: px2vw(-310),
+            left: px2vw(-310)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
-          type:'left'
-
+          type: 'left'
         },
         {
           ele: '',
           img: getImage('lessons4.png'),
           imgStyle: {
             top: px2vw(-355),
-            left:  px2vw(-185),
-            width:  px2vw(515),
+            left: px2vw(-185),
+            width: px2vw(515),
             height: px2vw(302)
           },
           btnsStyle: {
-            top:px2vw(-205),
-            left: px2vw(-22),
+            top: px2vw(-205),
+            left: px2vw(-22)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-
         },
         {
           ele: '',
           img: getImage('lessons5.png'),
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-290),
+            left: px2vw(-290),
             width: px2vw(648),
-            height:px2vw(228)
+            height: px2vw(228)
           },
           btnsStyle: {
             bottom: px2vw(30),
-            left: px2vw(-127),
+            left: px2vw(-127)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-
-        },
+        }
       ],
       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 = {}
+    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.lessonsGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).lessonsGuide) {
     //   tipShow.value = false;
@@ -173,7 +167,6 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`lessons-${data.step}`)!;
 
       if (ele) {
@@ -182,29 +175,56 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'courseware') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { lessonsGuide: false };
+        } else {
+          guideInfo.value.lessonsGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('prepare-lessons-guide', (name: string) =>
+        onResetGuide(name)
+      );
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('prepare-lessons-guide', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -215,7 +235,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
       if (!guideInfo.value) {
@@ -223,10 +243,13 @@ export default defineComponent({
       } else {
         guideInfo.value.lessonsGuide = true;
       }
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      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;
@@ -249,29 +272,37 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.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}`,
-
-                    }}>
+                    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}
@@ -285,7 +316,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -298,7 +329,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'music-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -35,98 +35,94 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top:px2vw(-4),
+            top: px2vw(-4),
             left: px2vw(0),
-            width:  px2vw(533),
-            height:  px2vw(271)
+            width: px2vw(533),
+            height: px2vw(271)
           },
           btnsStyle: {
-            bottom:px2vw(40),
-            left: px2vw(159),
+            bottom: px2vw(40),
+            left: px2vw(159)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
-          },
-          boxStyle:{
-
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
+          boxStyle: {}
         },
         {
           ele: '',
           img: getImage('music2.png'),
           imgStyle: {
-            top:px2vw(-4),
-            left:  px2vw(-205),
-            width:px2vw(420),
-            height:px2vw(228)
+            top: px2vw(-4),
+            left: px2vw(-205),
+            width: px2vw(420),
+            height: px2vw(228)
           },
           btnsStyle: {
             bottom: px2vw(35),
-            left: px2vw(-48),
+            left: px2vw(-48)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-
         },
         {
           ele: '',
           img: getImage('music3.png'),
           imgStyle: {
             top: '100%',
-            left:   px2vw(-130),
+            left: px2vw(-130),
             width: px2vw(401),
             height: px2vw(304)
           },
           btnsStyle: {
             bottom: px2vw(100),
-            left:px2vw(30),
+            left: px2vw(30)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '40px'
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
-          type:'bottom'
-        },
+          type: 'bottom'
+        }
       ],
       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 = {}
+    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.musicGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).musicGuide) {
     //   tipShow.value = false;
@@ -134,42 +130,66 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`music-${data.step}`)!;
 
-      if (ele ) {
+      if (ele) {
         const eleRect = ele.getBoundingClientRect();
-        console.log(ele.style.display,'ele')
-        if(ele.style.display == 'none'){
-          handleNext()
-          return
+        console.log(ele.style.display, 'ele');
+        if (ele.style.display == 'none') {
+          handleNext();
+          return;
         }
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'xiaoku-music') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { musicGuide: false };
+        } else {
+          guideInfo.value.musicGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 3) {
@@ -180,7 +200,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
       if (!guideInfo.value) {
@@ -189,10 +209,13 @@ export default defineComponent({
         guideInfo.value.musicGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -214,25 +237,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -246,7 +269,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -259,7 +282,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'myColloge-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -31,50 +31,48 @@ export default defineComponent({
           ele: '',
           img: getImage('myColloge1.png'),
           imgStyle: {
-            top:  px2vw(-4),
-            left:   px2vw(630),
-            width:  px2vw(458),
+            top: px2vw(-4),
+            left: px2vw(630),
+            width: px2vw(458),
             height: px2vw(291)
           },
           btnsStyle: {
             bottom: px2vw(96),
-            left:px2vw(790),
+            left: px2vw(790)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
-          type:'bottom'
-
-        },
-
+          type: 'bottom'
+        }
       ],
       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 = {}
+    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.myColloge) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).myColloge) {
     //   tipShow.value = false;
@@ -82,37 +80,67 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
-      const ele: HTMLElement = document.getElementById(`myColloge-${data.step}`)!;
+      const ele: HTMLElement = document.getElementById(
+        `myColloge-${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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        console.log(name);
+        if (name !== 'myCollect') return;
+        console.log(name, 'name');
+        if (!guideInfo.value) {
+          guideInfo.value = { myColloge: false };
+        } else {
+          guideInfo.value.myColloge = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -123,7 +151,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo.value) {
@@ -131,10 +159,13 @@ export default defineComponent({
       } else {
         guideInfo.value.myColloge = true;
       }
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      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;
@@ -157,25 +188,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -189,7 +220,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -202,7 +233,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div> */}
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>
@@ -216,7 +246,6 @@ export default defineComponent({
             </div>
           </div>
         ) : null}
-
       </>
     );
   }

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'myResources-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -38,50 +38,48 @@ export default defineComponent({
             top: px2vw(-4),
             left: px2vw(-240),
             width: px2vw(556),
-            height:  px2vw(257),
+            height: px2vw(257)
           },
           btnsStyle: {
             bottom: px2vw(30),
-            left:  px2vw(-80),
+            left: px2vw(-80)
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '30px'
-          },
-        },
-
+          }
+        }
       ],
       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 = {}
+    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 = {};
         }
-        console.log(guideInfo.value,'guideInfo.value')
+        console.log(guideInfo.value, 'guideInfo.value');
         if (guideInfo.value && guideInfo.value.myResourcesGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).myResourcesGuide) {
     //   tipShow.value = false;
@@ -89,8 +87,9 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
-      const ele: HTMLElement = document.getElementById(`myResources-${data.step}`)!;
+      const ele: HTMLElement = document.getElementById(
+        `myResources-${data.step}`
+      )!;
 
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
@@ -98,29 +97,56 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'myResources') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -131,7 +157,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo.value) {
@@ -140,10 +166,13 @@ export default defineComponent({
         guideInfo.value.myResourcesGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -165,25 +194,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -197,7 +226,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -210,7 +239,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div> */}
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'shareResources-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -37,74 +37,71 @@ export default defineComponent({
           imgStyle: {
             top: px2vw(-4),
             left: px2vw(-263),
-            width:  px2vw(553),
-            height:  px2vw(229)
+            width: px2vw(553),
+            height: px2vw(229)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-102),
+            bottom: px2vw(30),
+            left: px2vw(-102)
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
-          },
-          boxStyle:{
-            borderRadius: '30px',
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           },
+          boxStyle: {
+            borderRadius: '30px'
+          }
         },
         {
           ele: '',
           img: getImage('shareResources2.png'),
           imgStyle: {
-
-            left:  px2vw(99),
+            left: px2vw(99),
             width: px2vw(618),
-            height:px2vw(273)
+            height: px2vw(273)
           },
           btnsStyle: {
             bottom: px2vw(88),
-            left: px2vw(240),
+            left: px2vw(240)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '15px'
           },
-          type:'bottom'
-
-        },
+          type: 'bottom'
+        }
       ],
       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 = {}
+    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.shareResourcesGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).shareResourcesGuide) {
     //   tipShow.value = false;
@@ -112,8 +109,9 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
-      const ele: HTMLElement = document.getElementById(`shareResources-${data.step}`)!;
+      const ele: HTMLElement = document.getElementById(
+        `shareResources-${data.step}`
+      )!;
 
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
@@ -121,40 +119,67 @@ export default defineComponent({
         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
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
 
-        if(`shareResources-${data.step}`=='shareResources-1'){
+        if (`shareResources-${data.step}` == 'shareResources-1') {
           data.box = {
-            left: eleRect.x - left+ 'px',
-            top: eleRect.y - top +'px',
-            width: (eleRect.width + width)*2+width+'px',
-            height: eleRect.height +height+ 'px'
+            left: eleRect.x - left + 'px',
+            top: eleRect.y - top + 'px',
+            width: (eleRect.width + width) * 2 + width + 'px',
+            height: eleRect.height + height + 'px'
           };
-          console.log( data.box.width,'---',eleRect.width)
-        }else{
+          console.log(data.box.width, '---', eleRect.width);
+        } else {
           data.box = {
-            left: eleRect.x - left+ 'px',
-            top: eleRect.y - top +'px',
-            width: eleRect.width + width+'px',
-            height: eleRect.height +height+ 'px'
+            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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'shareResources') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -165,7 +190,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo')||'{}') || null;
       if (!guideInfo.value) {
@@ -174,10 +199,13 @@ export default defineComponent({
         guideInfo.value.shareResourcesGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -199,25 +227,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -231,7 +259,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -244,7 +272,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -38,20 +38,20 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top:px2vw(-4),
+            top: px2vw(-4),
             left: px2vw(-64),
-            width:  px2vw(518),
-            height:  px2vw(256)
+            width: px2vw(518),
+            height: px2vw(256)
           },
           btnsStyle: {
             bottom: px2vw(30),
-            left:  px2vw(-74),
+            left: px2vw(-74)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
         },
         {
@@ -59,48 +59,46 @@ export default defineComponent({
           img: getImage('student2.png'),
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-261),
-            width:  px2vw(515),
-            height:px2vw(227)
+            left: px2vw(-261),
+            width: px2vw(515),
+            height: px2vw(227)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-120),
+            bottom: px2vw(30),
+            left: px2vw(-120)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-
-        },
+        }
       ],
       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 = {}
+    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.studentGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).studentGuide) {
     //   tipShow.value = false;
@@ -108,7 +106,6 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`student-${data.step}`)!;
 
       if (ele) {
@@ -117,29 +114,54 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'studentList') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
     const handleNext = () => {
       if (data.step >= 2) {
         endGuide();
@@ -149,7 +171,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo.value) {
@@ -158,10 +180,13 @@ export default defineComponent({
         guideInfo.value.studentGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -183,25 +208,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -215,7 +240,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -228,7 +253,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'teacher-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -35,49 +35,48 @@ export default defineComponent({
             top: '0.91rem'
           },
           imgStyle: {
-            top:px2vw(-4),
+            top: px2vw(-4),
             left: px2vw(-75),
-            width:  px2vw(472),
-            height:  px2vw(230),
+            width: px2vw(472),
+            height: px2vw(230)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-84),
+            bottom: px2vw(30),
+            left: px2vw(-84)
           },
-          boxStyle:{
-            borderRadius:'25px'
+          boxStyle: {
+            borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           }
         },
         {
           ele: '',
           img: getImage('teacher2.png'),
           imgStyle: {
-            top:px2vw(-4),
-            left:  px2vw(-142),
+            top: px2vw(-4),
+            left: px2vw(-142),
             width: px2vw(559),
-            height:px2vw(230)
+            height: px2vw(230)
           },
           btnsStyle: {
             bottom: px2vw(30),
-            left: px2vw(-154),
+            left: px2vw(-154)
           },
-          boxStyle:{
-            borderRadius:'25px'
+          boxStyle: {
+            borderRadius: '25px'
           },
-          eleRectPadding:{
-            left:14,
-            top:14,
-            width:28,
-            height:28
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
           }
-
-        },
+        }
       ],
       step: 0
     });
@@ -89,29 +88,27 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
 
-    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 = {}
+    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.teacherGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`teacher-${data.step}`)!;
 
       if (ele) {
@@ -120,29 +117,54 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'base-setting') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -153,7 +175,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo.value) {
@@ -162,10 +184,13 @@ export default defineComponent({
         guideInfo.value.teacherGuide = true;
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
       tipShow.value = false;
       //  localStorage.setItem('endC')
@@ -187,25 +212,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -219,7 +244,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -232,7 +257,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

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

@@ -10,15 +10,15 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
-import {getGuidance,setGuidance} from './api'
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
   name: 'train-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -37,47 +37,44 @@ export default defineComponent({
           imgStyle: {
             top: px2vw(-4),
             left: px2vw(-250),
-            width:  px2vw(591),
-            height:  px2vw(227)
+            width: px2vw(591),
+            height: px2vw(227)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-90),
+            bottom: px2vw(30),
+            left: px2vw(-90)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
-          },
-
-        },
-
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        }
       ],
       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 = {}
+    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.trainGuide) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-    getAllGuidance()
+    };
+    getAllGuidance();
     // const guideInfo = localStorage.getItem('teacher-guideInfo');
     // if (guideInfo && JSON.parse(guideInfo).trainGuide) {
     //   tipShow.value = false;
@@ -85,7 +82,6 @@ export default defineComponent({
     //   tipShow.value = true;
     // }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`train-${data.step}`)!;
 
       if (ele) {
@@ -93,29 +89,56 @@ export default defineComponent({
         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
+        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'
+          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()
+        console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'train') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { trainGuide: false };
+        } else {
+          guideInfo.value.trainGuide = 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(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('prepare-lessons-guide', (name: string) =>
+        onResetGuide(name)
+      );
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('prepare-lessons-guide', onResetGuide);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -126,7 +149,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
+    const endGuide = async () => {
       // let guideInfo =
       //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo.value) {
@@ -134,10 +157,13 @@ export default defineComponent({
       } else {
         guideInfo.value.trainGuide = true;
       }
-      try{
-        const res = await setGuidance({guideTag:'teacher-guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      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;
@@ -160,25 +186,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.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}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -192,7 +218,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -205,7 +231,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div> */}
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

src/views/attend-class/index.tsx

@@ -52,9 +52,10 @@ import TimerMeter from '/src/components/timerMeter';
 import toneImage from '/src/components/layout/images/toneImage.png';
 import toolbox from '/src/components/layout/images/toolbox.png';
 import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
+import iconNote2 from '/src/components/layout/images/icon-note.png';
 import beatIcon from '/src/components/layout/images/beatIcon.png';
 import toneIcon from '/src/components/layout/images/toneIcon.png';
-import { px2vw } from '/src/utils';
+import { eventGlobal, px2vw } from '/src/utils';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
 import { state as globalState } from '/src/state';
 import Chapter from './model/chapter';
@@ -1093,7 +1094,9 @@ export default defineComponent({
       toggleModel();
     };
 
-    const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
+    const startShowModal = (
+      val: 'setTimeIcon' | 'beatIcon' | 'toneIcon' | 'iconNote2'
+    ) => {
       if (val == 'setTimeIcon') {
         showModalTime.value = true;
       }
@@ -1103,6 +1106,13 @@ export default defineComponent({
       if (val == 'toneIcon') {
         showModalTone.value = true;
       }
+      if (val == 'iconNote2') {
+        if (NPopoverRef.value) {
+          NPopoverRef.value.setShow(false);
+        }
+        console.log(route.name, 'guideInfo');
+        eventGlobal.emit('teacher-guideInfo', route.name);
+      }
     };
 
     // 是否允许上一页
@@ -1760,6 +1770,12 @@ export default defineComponent({
               <img src={setTimeIcon} alt="" />
               计时器
             </div>
+            <div
+              class={styles.booxToolItem}
+              onClick={() => startShowModal('iconNote2')}>
+              <img src={iconNote2} alt="" />
+              帮助指引
+            </div>
           </div>
         </NPopover>
 

src/views/natural-resources/components/my-resources/index.module.less

@@ -193,6 +193,16 @@
   }
 }
 
+.attendClassSaveModal {
+  width: 600px;
+
+  :global {
+    .n-select-menu {
+      --n-height: calc(var(--n-option-height) * 5.6) !important;
+    }
+  }
+}
+
 
 .removeVisiable {
   width: 432px;

src/views/natural-resources/components/my-resources/index.tsx

@@ -18,11 +18,12 @@ import {
   useMessage
 } from 'naive-ui';
 import TheEmpty from '/src/components/TheEmpty';
-import UploadModal from './upload-modal';
+import UploadModal, { formatUrlType } from './upload-modal';
 import CardPreview from '@/components/card-preview';
 import resourceDefault from '../../images/resource-default.png';
 import resourceChecked from '../../images/resource-checked.png';
 import MyResourcesGuide from '@/custom-plugins/guide-page/myResources-guide';
+import SaveModal from './save-modal';
 export default defineComponent({
   name: 'share-resources',
   setup() {
@@ -45,6 +46,7 @@ export default defineComponent({
       },
       tableList: [] as any,
       uploadStatus: false,
+      saveStatus: false,
       show: false,
       item: {} as any,
       editStatus: false, // 是否编辑
@@ -142,7 +144,8 @@ export default defineComponent({
           onSearch={(item: any) => onSearch(item)}
           onUpload={() => {
             state.editList = [];
-            state.uploadStatus = true;
+            // state.uploadStatus = true;
+            state.saveStatus = true;
           }}
           onUpdate={() => {
             // 修改
@@ -268,11 +271,43 @@ export default defineComponent({
             onConfirm={() => {
               state.editIds = [];
               state.editList = [];
+              state.saveStatus = false;
               onSearch(state.searchGroup);
             }}
             list={state.editList}
           />
         </NModal>
+
+        <NModal
+          v-model:show={state.saveStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassSaveModal]}
+          title={'上传资源'}
+          blockScroll={false}>
+          <SaveModal
+            onClose={() => (state.saveStatus = false)}
+            onConfrim={(val: any) => {
+              const list = val || [];
+              const temp: any = [];
+              list.forEach((item: any) => {
+                temp.push({
+                  subjectIds: null,
+                  openFlag: true,
+                  coverImg: item.coverImg,
+                  name: null,
+                  type: formatUrlType(item.content),
+                  enableFlag: 1,
+                  content: item.content,
+                  id: null
+                });
+              });
+              state.editList = temp;
+              state.uploadStatus = true;
+              state.editStatus = false;
+            }}
+          />
+        </NModal>
         {showGuide.value ? <MyResourcesGuide></MyResourcesGuide> : null}
 
         <NModal

src/views/natural-resources/components/my-resources/save-modal/index.module.less

@@ -0,0 +1,83 @@
+.saveModal {
+  // min-height: 50vh;
+  padding: 18px;
+
+
+
+  :global {
+    .n-upload {
+      --n-dragger-border: 1px solid #DCE2F1 !important;
+      --n-dragger-border-hover: 1px solid #198CFE !important;
+      --n-border-radius: 26px !important;
+    }
+
+    .n-upload-file-info__name a {
+      max-width: 90%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .n-upload-file-list {
+      overflow: auto;
+      max-height: 30vh;
+    }
+
+    .n-upload-dragger {
+      padding: 0;
+    }
+
+    .n-upload-file-list .n-upload-file {
+      border-radius: 8px;
+    }
+  }
+}
+
+.uploadBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 270px;
+  background: #F9FAFD;
+  border-radius: 26px;
+  font-size: 16px;
+  color: rgba(19, 20, 21, 0.5);
+
+  h3 {
+    padding-top: 32px;
+    font-size: 18px;
+    color: #131415;
+  }
+
+  p {
+    padding-top: 16px;
+  }
+
+  &:hover {
+    border-color: #198CFE;
+
+    .iconUploadAdd {
+      background: url('../../../images/icon-upload-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .iconUploadAdd {
+    width: 62px;
+    height: 62px;
+    background: url('../../../images/icon-upload-default.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+.btnGroup {
+  padding: 32px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}

src/views/natural-resources/components/my-resources/save-modal/index.tsx

@@ -0,0 +1,340 @@
+import { PropType, computed, defineComponent, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NSpace,
+  NUpload,
+  NUploadDragger,
+  UploadFileInfo,
+  useMessage
+} from 'naive-ui';
+import iconUploadAdd from '../../../images/icon-upload-add.png';
+import { NaturalTypeEnum, PageEnum } from '/src/enums/pageEnum';
+import { policy } from '/src/components/upload-file/api';
+import { formatUrlType } from '../upload-modal';
+import axios from 'axios';
+
+export default defineComponent({
+  name: 'save-modal',
+  props: {
+    fileList: {
+      type: String,
+      default: ''
+    },
+    imageList: {
+      type: Array,
+      default: () => []
+    },
+    accept: {
+      // 支持类型
+      type: String,
+      default: '.jpg,.png,.jpeg,.gif'
+    },
+    showType: {
+      type: String as PropType<'default' | 'custom'>,
+      default: 'default'
+    },
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    max: {
+      type: Number as PropType<number>,
+      default: 1
+    },
+    multiple: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    },
+    disabled: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    },
+    bucketName: {
+      type: String,
+      default: 'gyt'
+    },
+    directoryDnd: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    },
+    path: {
+      type: String,
+      default: ''
+    },
+    fileName: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close', 'confrim'],
+  setup(props, { emit }) {
+    const ossUploadUrl = `https://${props.bucketName}.ks3-cn-beijing.ksyuncs.com/`;
+    const message = useMessage();
+    const visiable = ref<boolean>(false);
+    const btnLoading = ref<boolean>(false);
+    const tempFiileBuffer = ref();
+    const uploadRef = ref();
+    const state = reactive([]) as any;
+
+    const fileListRef = ref<UploadFileInfo[]>([]);
+    const uploadList = ref([] as any);
+    const onBeforeUpload = async (options: any) => {
+      const file = options.file;
+      // 文件大小
+      let isLt2M = true;
+
+      const type = file.type.includes('image')
+        ? NaturalTypeEnum.IMG
+        : file.type.includes('audio')
+        ? NaturalTypeEnum.SONG
+        : NaturalTypeEnum.VIDEO;
+
+      const size = type === 'IMG' ? 2 : type === 'SONG' ? 20 : 500;
+      if (size) {
+        isLt2M = file.file.size / 1024 / 1024 < size;
+        if (!isLt2M) {
+          const typeStr =
+            type === 'IMG' ? '图片' : type === 'SONG' ? '音频' : '视频';
+          message.error(`${typeStr}大小不能超过${size}M`);
+          return false;
+        }
+      }
+
+      if (!isLt2M) {
+        return isLt2M;
+      }
+      // 是否裁切
+      // if (props.cropper && type === 'IMG') {
+      //   getBase64(file.file, (imageUrl: any) => {
+      //     const target = Object.assign({}, props.options, {
+      //       img: imageUrl,
+      //       name: file.file.name // 上传文件名
+      //     });
+      //     visiable.value = true;
+
+      //     setTimeout(() => {
+      //       CropperModal.value?.edit(target);
+      //     }, 100);
+      //   });
+      //   return false;
+      // }
+
+      try {
+        btnLoading.value = true;
+        const name = file.file.name;
+        const suffix = name.slice(name.lastIndexOf('.'));
+        const fileName = `${props.path}${
+          props.fileName || Date.now() + suffix
+        }`;
+        const obj = {
+          filename: fileName,
+          bucketName: props.bucketName,
+          postData: {
+            filename: fileName,
+            acl: 'public-read',
+            key: fileName,
+            unknowValueField: []
+          }
+        };
+        const { data } = await policy(obj);
+
+        state.push({
+          id: file.id,
+          tempFiileBuffer: file.file,
+          policy: data.policy,
+          signature: data.signature,
+          acl: 'public-read',
+          key: fileName,
+          KSSAccessKeyId: data.kssAccessKeyId,
+          name: fileName
+        });
+
+        // tempFiileBuffer.value = file.file;
+      } catch {
+        //
+        // message.error('上传失败')
+        btnLoading.value = false;
+        return false;
+      }
+      return true;
+    };
+    const getBase64 = async (img: any, callback: any) => {
+      const reader = new FileReader();
+      reader.addEventListener('load', () => callback(reader.result));
+      reader.readAsDataURL(img);
+    };
+
+    const onFinish = (options: any) => {
+      console.log(options, 'onFinish');
+      onFinishAfter(options);
+    };
+    const onFinishAfter = async (options: any) => {
+      const item = state.find((c: any) => c.id == options.file.id);
+      const url = ossUploadUrl + item.key;
+      const type = formatUrlType(url);
+      let coverImg = '';
+      if (type === 'IMG') {
+        coverImg = url;
+      } else if (type === 'SONG') {
+        coverImg = PageEnum.SONG_DEFAULT_COVER;
+      } else if (type === 'VIDEO') {
+        // 获取视频封面图
+        coverImg = await getVideoCoverImg(item.tempFiileBuffer);
+      }
+      // emit('update:fileList', url);
+      // emit('readFileInputEventAsArrayBuffer', item.tempFiileBuffer);
+      // console.log(url, 'url onFinishAfter');
+      // emit('finished', {
+      //   coverImg,
+      //   content: url
+      // });
+
+      uploadList.value.push({
+        coverImg,
+        content: url,
+        id: options.file.id
+      });
+
+      options.file.url = url;
+      visiable.value = false;
+      btnLoading.value = false;
+
+      console.log(fileListRef.value, 'fileListRef', uploadList.value);
+    };
+    const getVideoMsg = (file: any) => {
+      return new Promise(resolve => {
+        // let dataURL = '';
+        const videoElement = document.createElement('video');
+        videoElement.currentTime = 1;
+        videoElement.src = URL.createObjectURL(file);
+        videoElement.addEventListener('loadeddata', function () {
+          const canvas: any = document.createElement('canvas'),
+            width = videoElement.videoWidth, //canvas的尺寸和图片一样
+            height = videoElement.videoHeight;
+          canvas.width = width;
+          canvas.height = height;
+          canvas.getContext('2d').drawImage(videoElement, 0, 0, width, height); //绘制canvas
+          // dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
+          console.log(canvas);
+          canvas.toBlob((blob: any) => {
+            // console.log(blob);
+            resolve(blob);
+          });
+        });
+      });
+    };
+
+    const getVideoCoverImg = async (file: any) => {
+      try {
+        btnLoading.value = true;
+        const imgBlob: any = await getVideoMsg(file || tempFiileBuffer.value);
+        const fileName = `${props.path}${Date.now() + '.png'}`;
+        const obj = {
+          filename: fileName,
+          bucketName: props.bucketName,
+          postData: {
+            filename: fileName,
+            acl: 'public-read',
+            key: fileName,
+            unknowValueField: []
+          }
+        };
+        const { data } = await policy(obj);
+
+        const fileParams = {
+          policy: data.policy,
+          signature: data.signature,
+          key: fileName,
+          acl: 'public-read',
+          KSSAccessKeyId: data.kssAccessKeyId,
+          name: fileName
+        } as any;
+        const formData = new FormData();
+        for (const key in fileParams) {
+          formData.append(key, fileParams[key]);
+        }
+
+        formData.append('file', imgBlob);
+        await axios.post(ossUploadUrl, formData);
+
+        const url = ossUploadUrl + fileName;
+        return url;
+      } finally {
+        btnLoading.value = false;
+      }
+    };
+
+    const onRemove = async (file: any) => {
+      console.log(file, 'file');
+      const index = uploadList.value.findIndex(
+        (update: any) => update.id === file.file.id
+      );
+      uploadList.value.splice(index, 1);
+      btnLoading.value = false;
+      return true;
+    };
+
+    const uploadStatus = computed(() => {
+      let status = false;
+      fileListRef.value.forEach((file: any) => {
+        if (file.status !== 'finished') {
+          status = true;
+        }
+      });
+      return status;
+    });
+
+    const onSubmit = async () => {
+      emit('confrim', uploadList.value);
+    };
+
+    return () => (
+      <div class={styles.saveModal}>
+        <NUpload
+          ref={uploadRef}
+          action={ossUploadUrl}
+          data={(file: any) => {
+            const item = state.find((c: any) => {
+              return c.id == file.file.id;
+            });
+            const { id, tempFiileBuffer, ...more } = item;
+            return { ...more };
+          }}
+          v-model:fileList={fileListRef.value}
+          accept=".jpg,jpeg,.png,audio/mp3,video/mp4"
+          multiple={true}
+          max={10}
+          // disabled={props.disabled}
+          showFileList={true}
+          showPreviewButton
+          onBeforeUpload={(options: any) => onBeforeUpload(options)}
+          onFinish={(options: any) => {
+            onFinish(options);
+          }}
+          onRemove={(options: any) => onRemove(options)}>
+          <NUploadDragger>
+            <div class={styles.uploadBtn}>
+              <div class={styles.iconUploadAdd} />
+              <h3>点击或者拖动文件到该区域来上传</h3>
+              <p>仅支持JPG、PNG、MP3、MP4格式文件</p>
+            </div>
+          </NUploadDragger>
+        </NUpload>
+
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            round
+            type="primary"
+            disabled={uploadStatus.value}
+            onClick={onSubmit}>
+            确定
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/my-resources/upload-modal/index.module.less

@@ -129,6 +129,13 @@
 .uploadFile {
   margin-bottom: 12px;
 
+  :global {
+    .n-upload-dragger {
+      padding: 0;
+      border: none;
+    }
+  }
+
   .uploadBtn {
     display: flex;
     align-items: center;

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -56,6 +56,7 @@ export default defineComponent({
     const message = useMessage();
 
     const uploadRef = ref();
+    const uploadList = ref([] as any);
     const uploadForms = reactive({
       list: [] as any[],
       uploading: false,
@@ -255,7 +256,7 @@ export default defineComponent({
                 </div>
               ))}
 
-              {!isUpdate.value && (
+              {/* {!isUpdate.value && (
                 <div class={styles.formItem}>
                   <UploadFile
                     v-model:fileList={uploadForms.uploadUrl}
@@ -263,13 +264,16 @@ export default defineComponent({
                     showFileList={false}
                     ref={uploadRef}
                     // cropper
-                    options={{
-                      autoCropWidth: 320,
-                      autoCropHeight: 180,
-                      fixedBox: true
-                    }}
+                    multiple
+                    max={10}
+                    // options={{
+                    //   autoCropWidth: 320,
+                    //   autoCropHeight: 180,
+                    //   fixedBox: true
+                    // }}
                     onFinished={(val: any) => {
-                      uploadForms.list.push({
+                      console.log(val, 'val');
+                      uploadList.value.push({
                         subjectIds: uploadForms.subjectIds || [],
                         openFlag: true,
                         coverImg: val.coverImg,
@@ -278,10 +282,23 @@ export default defineComponent({
                         enableFlag: 1,
                         content: val.content
                       });
-                      uploadForms.uploadUrl = '';
-                      uploadForms.name = '';
-                      uploadForms.subjectIds = [];
-                      uploadRef.value.handleClearFile();
+                      // uploadForms.list.push({
+                      //   subjectIds: uploadForms.subjectIds || [],
+                      //   openFlag: true,
+                      //   coverImg: val.coverImg,
+                      //   name: uploadForms.name || '',
+                      //   type: formatUrlType(val.content),
+                      //   enableFlag: 1,
+                      //   content: val.content
+                      // });
+                      const timer = setTimeout(() => {
+                        uploadForms.list.push(...uploadList.value);
+                        uploadList.value = [];
+                        uploadForms.uploadUrl = '';
+                        uploadForms.name = '';
+                        uploadForms.subjectIds = [];
+                        uploadRef.value.handleClearFile();
+                      }, 1000);
                     }}
                   />
                   <NFormItem showFeedback={false}>
@@ -322,7 +339,7 @@ export default defineComponent({
                     />
                   </NFormItem>
                 </div>
-              )}
+              )} */}
             </NSpace>
           </NForm>
         </NScrollbar>

src/views/natural-resources/components/my-resources/upload-modal/upload-file.tsx

@@ -1,4 +1,11 @@
-import { NModal, NSpin, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
+import {
+  NModal,
+  NSpin,
+  NUpload,
+  NUploadDragger,
+  UploadFileInfo,
+  useMessage
+} from 'naive-ui';
 import { defineComponent, watch, PropType, reactive, ref } from 'vue';
 import { policy } from '@/components/upload-file/api';
 import Copper from '@/components/upload-file/copper';
@@ -54,6 +61,10 @@ export default defineComponent({
       type: String,
       default: 'gyt'
     },
+    directoryDnd: {
+      type: Boolean as PropType<boolean>,
+      default: false
+    },
     path: {
       type: String,
       default: ''
@@ -63,7 +74,7 @@ export default defineComponent({
       default: ''
     },
     cropper: {
-      // 是否裁切， 只有图片才支持
+      // 是否裁切， 只有图片才支持 - 失效（不支持）
       type: Boolean as PropType<boolean>,
       default: false
     },
@@ -97,14 +108,16 @@ export default defineComponent({
     const btnLoading = ref<boolean>(false);
     const tempFiileBuffer = ref();
     const uploadRef = ref();
-    const state = reactive({
-      policy: '',
-      signature: '',
-      key: '',
-      KSSAccessKeyId: '',
-      acl: 'public-read',
-      name: ''
-    }) as any;
+    const state = reactive([
+      // {
+      //   policy: '',
+      //   signature: '',
+      //   key: '',
+      //   KSSAccessKeyId: '',
+      //   acl: 'public-read',
+      //   name: ''
+      // }
+    ]) as any;
 
     const fileListRef = ref<UploadFileInfo[]>([]);
     const initFileList = () => {
@@ -167,20 +180,20 @@ export default defineComponent({
         return isLt2M;
       }
       // 是否裁切
-      if (props.cropper && type === 'IMG') {
-        getBase64(file.file, (imageUrl: any) => {
-          const target = Object.assign({}, props.options, {
-            img: imageUrl,
-            name: file.file.name // 上传文件名
-          });
-          visiable.value = true;
+      // if (props.cropper && type === 'IMG') {
+      //   getBase64(file.file, (imageUrl: any) => {
+      //     const target = Object.assign({}, props.options, {
+      //       img: imageUrl,
+      //       name: file.file.name // 上传文件名
+      //     });
+      //     visiable.value = true;
 
-          setTimeout(() => {
-            CropperModal.value?.edit(target);
-          }, 100);
-        });
-        return false;
-      }
+      //     setTimeout(() => {
+      //       CropperModal.value?.edit(target);
+      //     }, 100);
+      //   });
+      //   return false;
+      // }
 
       try {
         btnLoading.value = true;
@@ -201,13 +214,18 @@ export default defineComponent({
         };
         const { data } = await policy(obj);
 
-        state.policy = data.policy;
-        state.signature = data.signature;
-        state.key = fileName;
-        state.KSSAccessKeyId = data.kssAccessKeyId;
-        state.name = fileName;
+        state.push({
+          id: file.id,
+          tempFiileBuffer: file.file,
+          policy: data.policy,
+          signature: data.signature,
+          acl: 'public-read',
+          key: fileName,
+          KSSAccessKeyId: data.kssAccessKeyId,
+          name: fileName
+        });
 
-        tempFiileBuffer.value = file.file;
+        // tempFiileBuffer.value = file.file;
       } catch {
         //
         // message.error('上传失败')
@@ -223,10 +241,12 @@ export default defineComponent({
     };
 
     const onFinish = (options: any) => {
+      console.log(options, 'onFinish');
       onFinishAfter(options);
     };
     const onFinishAfter = async (options: any) => {
-      const url = ossUploadUrl + state.key;
+      const item = state.find((c: any) => c.id == options.file.id);
+      const url = ossUploadUrl + item.key;
       const type = formatUrlType(url);
       let coverImg = '';
       if (type === 'IMG') {
@@ -235,10 +255,11 @@ export default defineComponent({
         coverImg = PageEnum.SONG_DEFAULT_COVER;
       } else if (type === 'VIDEO') {
         // 获取视频封面图
-        coverImg = await getVideoCoverImg();
+        coverImg = await getVideoCoverImg(item.tempFiileBuffer);
       }
       emit('update:fileList', url);
-      emit('readFileInputEventAsArrayBuffer', tempFiileBuffer.value);
+      emit('readFileInputEventAsArrayBuffer', item.tempFiileBuffer);
+      console.log(url, 'url onFinishAfter');
       emit('finished', {
         coverImg,
         content: url
@@ -264,17 +285,17 @@ export default defineComponent({
           // dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
           console.log(canvas);
           canvas.toBlob((blob: any) => {
-            console.log(blob);
+            // console.log(blob);
             resolve(blob);
           });
         });
       });
     };
 
-    const getVideoCoverImg = async () => {
+    const getVideoCoverImg = async (file: any) => {
       try {
         btnLoading.value = true;
-        const imgBlob: any = await getVideoMsg(tempFiileBuffer.value);
+        const imgBlob: any = await getVideoMsg(file || tempFiileBuffer.value);
         const fileName = `${props.path}${Date.now() + '.png'}`;
         const obj = {
           filename: fileName,
@@ -378,24 +399,38 @@ export default defineComponent({
           <NUpload
             ref={uploadRef}
             action={ossUploadUrl}
-            data={state}
+            data={(file: any) => {
+              const item = state.find((c: any) => {
+                return c.id == file.file.id;
+              });
+              const { id, tempFiileBuffer, ...more } = item;
+              return { ...more };
+            }}
             v-model:fileList={fileListRef.value}
             accept={props.accept}
             multiple={props.multiple}
             max={props.max}
             disabled={props.disabled}
+            directoryDnd={props.directoryDnd}
             showFileList={props.showFileList}
             showPreviewButton
             onBeforeUpload={(options: any) => onBeforeUpload(options)}
-            onFinish={(options: any) => onFinish(options)}
+            onFinish={(options: any) => {
+              onFinish(options);
+            }}
+            onChange={(options: any) => {
+              // console.log(options, 'change');
+            }}
             onRemove={() => onRemove()}>
-            {props.showType === 'default' && (
-              <div class={styles.uploadBtn}>
-                <img src={iconUploadAdd} class={styles.iconUploadAdd} />
-                <p>上传</p>
-              </div>
-            )}
-            {props.showType === 'custom' && slots.custom && slots.custom()}
+            <NUploadDragger>
+              {props.showType === 'default' && (
+                <div class={styles.uploadBtn}>
+                  <img src={iconUploadAdd} class={styles.iconUploadAdd} />
+                  <p>上传</p>
+                </div>
+              )}
+              {props.showType === 'custom' && slots.custom && slots.custom()}
+            </NUploadDragger>
           </NUpload>
         </NSpin>
 

src/views/natural-resources/index.tsx

@@ -1,13 +1,22 @@
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
 import { NTabPane, NTabs } from 'naive-ui';
 import ShareResources from './components/share-resources';
 import MyResources from './components/my-resources';
 import MyCollect from './components/my-collect';
+import { eventGlobal } from '/src/utils';
 
 export default defineComponent({
   name: 'student-studentList',
   setup() {
+    const tab = ref('myResources');
+    onMounted(() => {
+      eventGlobal.on('teacher-guideInfo', (name: string) => {
+        if (name === 'natural-resources') {
+          eventGlobal.emit('natural-resources-guide', tab.value);
+        }
+      });
+    });
     return () => (
       <div class={styles.listWrap}>
         <NTabs
@@ -15,7 +24,11 @@ export default defineComponent({
           paneClass={styles.paneTitle}
           justifyContent="center"
           // animated
-          paneWrapperClass={styles.paneWrapperContainer}>
+          paneWrapperClass={styles.paneWrapperContainer}
+          onUpdate:value={(val: any) => {
+            tab.value = val;
+          }}
+          v-model:value={tab.value}>
           <NTabPane
             name="myResources"
             tab="我的资源"

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

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent } from 'vue';
 import styles from './index.module.less';
 import { NTabPane, NTabs } from 'naive-ui';
 import Courseware from './courseware';
@@ -9,6 +9,7 @@ export default defineComponent({
   name: 'lesson-main',
   setup() {
     const prepareStore = usePrepareStore();
+
     return () => (
       <div class={styles['lesson-main']}>
         <NTabs
@@ -16,6 +17,7 @@ export default defineComponent({
           paneClass={styles.paneTitle}
           justifyContent="center"
           paneWrapperClass={styles.paneWrapperContainer}
+          value={prepareStore.getTabType}
           onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
           }}>

src/views/prepare-lessons/index.tsx

@@ -8,6 +8,8 @@ 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 { eventGlobal } from '/src/utils';
+import { setGuidance } from '/src/custom-plugins/guide-page/api';
 export default defineComponent({
   name: 'prepare-lessons',
   setup() {
@@ -24,6 +26,30 @@ export default defineComponent({
     });
     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);
+      }
+    };
+
+    onMounted(() => {
+      eventGlobal.on('teacher-guideInfo', async (name: string) =>
+        onUpdate(name)
+      );
+    });
+    onUnmounted(() => {
+      eventGlobal.off('teacher-guideInfo', onUpdate);
+    });
     onMounted(() => {
       useResizeObserver(
         document.querySelector('#lessons-1') as HTMLElement,