Merge branch 'video-tcplayer' into 0831online

src/components/layout/imGroup.tsx

@@ -17,7 +17,9 @@ export default defineComponent({
       : /online.lexiaoya.cn/.test(location.href)
       ? 'https://kt.colexiu.com'
       : location.origin;
-    const src = `${origin}/classroom-im/?userID=${userStore.getUserInfo.imUserId}&Authorization=${userStore.getToken}`;
+    const src = `${origin}/classroom-im/?userID=${
+      userStore.getUserInfo.imUserId
+    }&Authorization=${userStore.getToken}&t=${+new Date()}`;
 
     return () => (
       <div class={styles.imGroupContainer}>

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('iconPen')}>
+                <img src={iconWhiteBorad} alt="" />
+                批注
+              </div>
+              <div
+                class={styles.booxToolItem}
+                onClick={() => startShowModal('iconWhiteBorad')}>
+                <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

@@ -6,18 +6,26 @@ import {
   onUnmounted,
   reactive,
   ref,
+  toRef,
   watch
 } 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',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
   emits: ['close'],
   setup(props, { emit }) {
     const route = useRoute();
+    const type = toRef(props.type);
     console.log(route.query);
     const data = reactive({
       box: {
@@ -107,7 +115,7 @@ export default defineComponent({
         {
           ele: '',
           img:
-            route.query.type == 'preview'
+            type.value == 'preview' || route.query.type == 'preview'
               ? getImage('attent5.png')
               : getImage('attent4.png'),
           imgStyle: {
@@ -134,28 +142,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 +184,35 @@ 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-attend-class', (name: string) =>
+        onResetGuide(name)
+      );
     });
     const resetSize = () => {
       getStepELe();
@@ -187,6 +220,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo-attend-class', onResetGuide);
     });
     const handleNext = () => {
       if (data.step >= 4) {
@@ -197,8 +231,7 @@ export default defineComponent({
       getStepELe();
     };
 
-    const endGuide = async() => {
-
+    const endGuide = async () => {
       if (!guideInfo.value) {
         guideInfo.value = { attentGuide: true };
       } else {
@@ -206,10 +239,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,36 @@ export default defineComponent({
         handleNext();
       }
     };
+
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'classList') 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);
+
+      eventGlobal.on('teacher-guideInfo', (name: string) => onResetGuide(name));
     });
     const resetSize = () => {
       getStepELe();
@@ -155,6 +181,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
     });
 
     const handleNext = () => {
@@ -166,17 +193,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 = { studentGuide: false };
+        } else {
+          guideInfo.value.studentGuide = 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/component/tools/pen.module.less

@@ -4,7 +4,7 @@
   right: 0;
   bottom: 0;
   top: 0;
-  z-index: 11;
+  z-index: 501;
 }
 
 .open {

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,12 @@ export default defineComponent({
       if (val == 'toneIcon') {
         showModalTone.value = true;
       }
+      if (val == 'iconNote2') {
+        if (NPopoverRef.value) {
+          NPopoverRef.value.setShow(false);
+        }
+        eventGlobal.emit('teacher-guideInfo-attend-class', 'attend-class');
+      }
     };
 
     // 是否允许上一页
@@ -1711,7 +1720,7 @@ export default defineComponent({
             <p>倒</p>
           </div>
         </NModal> */}
-        {showGuide.value ? <Attentguide></Attentguide> : null}
+        {showGuide.value ? <Attentguide type={data.type}></Attentguide> : null}
 
         <NPopover
           raw
@@ -1760,6 +1769,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/home/index.module.less

@@ -202,7 +202,7 @@
   background: url('./images/tool_bg.png') no-repeat left bottom #fff;
   background-size: 86px 66px;
   border-radius: 16px;
-  padding: 21px 32px 21px 54px;
+  padding: 22px 29px 34px 54px;
 
   .toolTips {
     width: 370px;
@@ -245,28 +245,29 @@
     align-items: center;
 
     img {
-      width: 159px;
-      height: 134px;
-      margin: 5px 13px 10px;
+      width: 190px;
+      height: 190px;
+      // margin: 5px 13px 10px;
     }
 
     .toolItem {
-      width: 185px;
-      background: #EBF5FF;
+      width: 190px;
+      // background: #EBF5FF;
       border-radius: 16px;
-      margin-right: 36px;
+      margin-right: 30px;
       text-align: center;
+      line-height: 0;
 
       &:last-child {
         margin-right: 0;
       }
 
-      .toolMemo {
-        font-size: 16px;
-        color: #4A8FE0;
-        line-height: 22px;
-        text-align: center;
-      }
+      // .toolMemo {
+      //   font-size: 16px;
+      //   color: #4A8FE0;
+      //   line-height: 22px;
+      //   text-align: center;
+      // }
 
       .btn1,
       .btn2,
@@ -282,7 +283,7 @@
         --n-font-size: 18px !important;
         font-weight: 600 !important;
         color: #fff;
-        margin: 16px 0 20px;
+        margin: 8px 0 0;
       }
 
 
@@ -302,28 +303,28 @@
       }
     }
 
-    .item1 {
-      background: url('./images/t1_bg.png')no-repeat right bottom #EBF5FF;
-      background-size: 28px;
-    }
+    // .item1 {
+    //   background: url('./images/t1_bg.png')no-repeat right bottom #EBF5FF;
+    //   background-size: 28px;
+    // }
 
-    .item2 {
-      background: url('./images/t2_bg.png')no-repeat right bottom #FFF1EF;
-      background-size: 28px;
+    // .item2 {
+    //   background: url('./images/t2_bg.png')no-repeat right bottom #FFF1EF;
+    //   background-size: 28px;
 
-      .toolMemo {
-        color: #F86C58;
-      }
-    }
+    //   .toolMemo {
+    //     color: #F86C58;
+    //   }
+    // }
 
-    .item3 {
-      background: url('./images/t3_bg.png')no-repeat right bottom #FFF7E2;
-      background-size: 28px;
+    // .item3 {
+    //   background: url('./images/t3_bg.png')no-repeat right bottom #FFF7E2;
+    //   background-size: 28px;
 
-      .toolMemo {
-        color: #F28D1E;
-      }
-    }
+    //   .toolMemo {
+    //     color: #F28D1E;
+    //   }
+    // }
   }
 }
 
@@ -841,4 +842,4 @@
 
 .showUpdatePassword {
   width: 514px;
-}
+}

src/views/home/index.tsx

@@ -328,32 +328,38 @@ export default defineComponent({
             </div>
             <img src={iconTo} class={styles.iconTo} />
             <div class={styles.toolFunction} id="home-3">
-              <div
-                class={[styles.toolItem, styles.item1]}
-                onClick={() => {
-                  showModalBeat.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item1]}>
                 <img src={t1} />
-                <p class={styles.toolMemo}>提升效率，练习好节奏</p>
-                <NButton class={styles.btn1}>节拍器</NButton>
+                {/* <p class={styles.toolMemo}>提升效率，练习好节奏</p> */}
+                <NButton
+                  class={styles.btn1}
+                  onClick={() => {
+                    showModalBeat.value = true;
+                  }}>
+                  节拍器
+                </NButton>
               </div>
-              <div
-                class={[styles.toolItem, styles.item2]}
-                onClick={() => {
-                  showModalTone.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item2]}>
                 <img src={t2} />
-                <p class={styles.toolMemo}>精准调音，一劳永逸</p>
-                <NButton class={styles.btn2}>调音器</NButton>
+                {/* <p class={styles.toolMemo}>精准调音，一劳永逸</p> */}
+                <NButton
+                  class={styles.btn2}
+                  onClick={() => {
+                    showModalTone.value = true;
+                  }}>
+                  调音器
+                </NButton>
               </div>
-              <div
-                class={[styles.toolItem, styles.item3]}
-                onClick={() => {
-                  showModalTime.value = true;
-                }}>
+              <div class={[styles.toolItem, styles.item3]}>
                 <img src={t3} />
-                <p class={styles.toolMemo}>创造时间，集中注意力</p>
-                <NButton class={styles.btn3}>计时器</NButton>
+                {/* <p class={styles.toolMemo}>创造时间，集中注意力</p> */}
+                <NButton
+                  class={styles.btn3}
+                  onClick={() => {
+                    showModalTime.value = true;
+                  }}>
+                  计时器
+                </NButton>
               </div>
             </div>
           </div>

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

@@ -81,7 +81,7 @@ export default defineComponent({
         });
         item.isCollect = !item.isCollect;
 
-        onSearch(state.searchGroup);
+        // onSearch(state.searchGroup);
       } catch {
         //
       }

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

@@ -19,11 +19,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() {
@@ -46,6 +47,7 @@ export default defineComponent({
       },
       tableList: [] as any,
       uploadStatus: false,
+      saveStatus: false,
       show: false,
       item: {} as any,
       editStatus: false, // 是否编辑
@@ -154,7 +156,8 @@ export default defineComponent({
           onSearch={(item: any) => onSearch(item)}
           onUpload={() => {
             state.editList = [];
-            state.uploadStatus = true;
+            // state.uploadStatus = true;
+            state.saveStatus = true;
           }}
           onUpdate={() => {
             // 修改
@@ -280,11 +283,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,
+                  title: item.name || '',
+                  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,358 @@
+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
+        : file.type.includes('video')
+        ? NaturalTypeEnum.VIDEO
+        : 'other';
+
+      console.log(type, 'type');
+      if (type === 'other') {
+        message.error(`文件格式不支持`);
+        return false;
+      }
+      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}${Date.now() + file.id + 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,
+        name: options.file.name
+          ? options.file.name.slice(0, options.file.name.lastIndexOf('.'))
+          : ''
+      });
+
+      options.file.url = url;
+      visiable.value = false;
+      btnLoading.value = false;
+    };
+    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) => {
+      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 || fileListRef.value.length <= 0;
+    });
+
+    const onSubmit = async () => {
+      const list: any = [];
+      fileListRef.value.forEach((file: any) => {
+        const item = uploadList.value.find(
+          (child: any) => child.id === file.id
+        );
+        if (item) {
+          list.push(item);
+        }
+      });
+      emit('confrim', list);
+    };
+
+    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格式文件，单次最多支持
+                <br />
+                上传10个文件
+              </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,
@@ -264,7 +265,7 @@ export default defineComponent({
                 </div>
               ))}
 
-              {!isUpdate.value && (
+              {/* {!isUpdate.value && (
                 <div class={styles.formItem}>
                   <UploadFile
                     v-model:fileList={uploadForms.uploadUrl}
@@ -272,13 +273,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,
@@ -287,10 +291,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}>
@@ -331,7 +348,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/components/share-resources/search-group-resources.tsx

@@ -112,7 +112,7 @@ export default defineComponent({
             ))}
           </NSpace>
 
-          <NButton
+          {/* <NButton
             type="primary"
             class={styles.addTrain}
             focusable={false}
@@ -120,7 +120,7 @@ export default defineComponent({
             onClick={() => emit('add')}>
             <img src={iconAdd} />
             添加自定义教材
-          </NButton>
+          </NButton> */}
         </div>
         <NForm labelAlign="left" labelPlacement="left">
           {forms.type === 'MUSIC' && (

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/notation/index.tsx

@@ -15,6 +15,9 @@ export default defineComponent({
     const Authorization = userStore.getToken || '';
     const iframeRef = ref();
     console.log(Authorization);
+    const notationOpenCreate = sessionStorage.getItem('notation-open-create');
+    const openCreateUrl = notationOpenCreate == '1' ? '&addShow=1' : '';
+    sessionStorage.removeItem('notation-open-create');
     const data = reactive({
       src: `${
         /(192|localhost)/.test(location.origin)
@@ -22,7 +25,7 @@ export default defineComponent({
             'https://test.lexiaoya.cn'
           : // 'http://localhost:3050'
             location.origin
-      }/notation/#/create?Authorization=${Authorization}`
+      }/notation/#/create?Authorization=${Authorization}${openCreateUrl}`
       //   src: `http://localhost:3050/#/create?Authorization=${Authorization}`
     });
     const fscreen = () => {

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

@@ -285,6 +285,41 @@
   }
 }
 
+.addMusicItem {
+  position: relative;
+  box-sizing: border-box;
+  width: 300px;
+  height: 220px;
+  border-radius: 14px;
+  background: #F9FAFD;
+  display: inline-flex;
+  transition: all .3s ease-in-out;
+  border: 2px solid rgba(209, 216, 235, 1) !important;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .addMusicName {
+    padding-top: 16px;
+    font-size: 16px;
+    color: #131415;
+  }
+
+  // 鼠标经过时样式
+  &:hover {
+    transform: scale(1.01);
+    transition: all .3s ease-in-out;
+    border: 2px solid rgba(0, 122, 254, 1) !important;
+  }
+}
+
 
 .subjectSyncModal {
   width: 920px;

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

@@ -23,6 +23,7 @@ import {
 } from '../../../api';
 import Draggable from 'vuedraggable';
 import iconDelete from '../../../images/icon-delete.png';
+import iconAddMusic from '../../../images/icon-add-music.png';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import deepClone from '/src/helpers/deep-clone';
 import CardPreview from '/src/components/card-preview';
@@ -40,10 +41,20 @@ export default defineComponent({
     const router = useRouter();
     const dialog = useDialog();
     const message = useMessage();
+
+    const localStorageSubjectId = localStorage.getItem(
+      'prepareLessonSubjectId'
+    );
+
     const forms = reactive({
       className: route.query.name as any,
       classGroupId: route.query.classGroupId,
-      subjectId: route.query.subjectId ? Number(route.query.subjectId) : null,
+      // 选取参数带的，后取缓存
+      subjectId: route.query.subjectId
+        ? Number(route.query.subjectId)
+        : localStorageSubjectId
+        ? Number(localStorageSubjectId)
+        : null,
       coursewareList: [] as any,
       loadingStatus: false,
       showAttendClass: false,
@@ -281,20 +292,31 @@ export default defineComponent({
 
       // 并且没有声部时才会更新
       if (subjectList.length > 0) {
+        // 并且声部在列表中
+        const localStorageSubjectId = localStorage.getItem(
+          'prepareLessonSubjectId'
+        );
+        const subjectId =
+          forms.subjectId || localStorageSubjectId
+            ? Number(localStorageSubjectId)
+            : null;
         // 判断浏览器上面是否有
         const index = subjectList.findIndex(
-          (subject: any) => subject.id == forms.subjectId
+          (subject: any) => subject.id == subjectId
         );
 
-        // 并且声部在列表中
-        if (forms.subjectId && index >= 0) {
-          prepareStore.setSubjectId(forms.subjectId);
+        if (subjectId && index >= 0) {
+          prepareStore.setSubjectId(subjectId);
         } else {
           // 判断是否有缓存
           prepareStore.setSubjectId(subjectList[0].id);
         }
 
-        // console.log(prepareStore.getSubjectId, 'getSubjectId');
+        // 保存
+        localStorage.setItem(
+          'prepareLessonSubjectId',
+          prepareStore.getSubjectId as any
+        );
       }
     };
 
@@ -367,6 +389,8 @@ export default defineComponent({
                   value={prepareStore.getSubjectId}
                   onUpdate:value={(val: any) => {
                     prepareStore.setSubjectId(val);
+                    // 保存
+                    localStorage.setItem('prepareLessonSubjectId', val);
                     getList();
                   }}
                 />
@@ -432,10 +456,10 @@ export default defineComponent({
           <NSpin show={forms.loadingStatus}>
             <div
               class={[
-                styles.listSection,
-                !forms.loadingStatus && forms.coursewareList.length <= 0
-                  ? styles.emptySection
-                  : ''
+                styles.listSection
+                // !forms.loadingStatus && forms.coursewareList.length <= 0
+                //   ? styles.emptySection
+                //   : ''
               ]}>
               {forms.coursewareList.length > 0 && (
                 <>
@@ -497,13 +521,43 @@ export default defineComponent({
                           }}
                         />
                       ))}
+                      <div
+                        class={[
+                          styles.itemContent,
+                          styles.addMusicItem,
+                          'handle'
+                        ]}
+                        onClick={() => {
+                          // 直接跳转到制谱页面 (临时存储数据)
+                          sessionStorage.setItem('notation-open-create', '1');
+                          router.push('/notation');
+                        }}>
+                        <img src={iconAddMusic} />
+
+                        <p class={styles.addMusicName}>开始制谱</p>
+                      </div>
                     </div>
                   )}
                 </>
               )}
 
-              {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
+              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
                 <TheEmpty description="暂无课件" />
+              )} */}
+              {forms.coursewareList.length <= 0 && (
+                <div class={styles.list}>
+                  <div
+                    class={[styles.itemContent, styles.addMusicItem, 'handle']}
+                    onClick={() => {
+                      // 直接跳转到制谱页面 (临时存储数据)
+                      sessionStorage.setItem('notation-open-create', '1');
+                      router.push('/notation');
+                    }}>
+                    <img src={iconAddMusic} />
+
+                    <p class={styles.addMusicName}>开始制谱</p>
+                  </div>
+                </div>
               )}
             </div>
           </NSpin>
@@ -710,8 +764,6 @@ export default defineComponent({
                   forms.removeVisiable1 = false;
                   forms.isEdit = true;
                   // prepareStore.setCoursewareList([]);
-
-                  console.log(prepareStore.getCoursewareList, 'getCourseware1');
                 }}>
                 确定
               </NButton>

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,7 +17,8 @@ export default defineComponent({
           paneClass={styles.paneTitle}
           justifyContent="center"
           paneWrapperClass={styles.paneWrapperContainer}
-          onUpdate: value={(val: string) => {
+          value={prepareStore.getTabType}
+          onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
           }}>
           <NTabPane name="courseware" tab="课件" displayDirective="show">

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

@@ -121,9 +121,9 @@ export default defineComponent({
           }
         });
         forms.trainList = tempCourse || [];
-        setTimeout(()=>{
+        setTimeout(() => {
           showGuide.value = true;
-        },500)
+        }, 500);
       } catch {
         //
       }
@@ -217,8 +217,6 @@ export default defineComponent({
       // checkSubjectIds();
 
       await getList();
-
-
     });
     return () => (
       <div class={styles.coursewareModal}>
@@ -276,6 +274,7 @@ export default defineComponent({
                   value={prepareStore.getSubjectId}
                   onUpdate:value={(val: any) => {
                     prepareStore.setSubjectId(val);
+                    localStorage.setItem('prepareLessonSubjectId', val);
                   }}
                 />
               </div>

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

@@ -3,7 +3,7 @@ import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
 import styles from './index.module.less';
 import CardType from '/src/components/card-type';
-import { materialQueryPage } from '/src/views/natural-resources/api';
+import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { useDebounceFn, useThrottleFn } from '@vueuse/core';
@@ -194,6 +194,20 @@ export default defineComponent({
       // });
     };
 
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
     onMounted(() => {
       getList();
     });
@@ -241,13 +255,14 @@ export default defineComponent({
                     <CardType
                       isShowAdd
                       item={item}
-                      isShowCollect={false}
+                      isShowCollect={true}
                       disabledMouseHover={false}
                       onClick={() => {
                         if (item.type === 'IMG') return;
                         state.show = true;
                         state.item = item;
                       }}
+                      onCollect={(item: any) => onCollect(item)}
                       isShowAddDisabled={!prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                     />

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

@@ -90,19 +90,22 @@ export default defineComponent({
                   <NTabPane
                     name="myResources"
                     tab="我的资源"
-                    displayDirective="show:lazy">
+                    // displayDirective="show:lazy"
+                  >
                     <ResourceItem type="myResources" />
                   </NTabPane>
                   <NTabPane
                     name="shareResources"
                     tab="共享资源"
-                    displayDirective="show:lazy">
+                    // displayDirective="show:lazy"
+                  >
                     <ResourceItem type="shareResources" />
                   </NTabPane>
                   <NTabPane
                     name="myCollect"
                     tab="我的收藏"
-                    displayDirective="show:lazy">
+                    // displayDirective="show:lazy"
+                  >
                     <ResourceItem type="myCollect" />
                   </NTabPane>
                 </>

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,

src/views/prepare-lessons/model/select-resources/index.tsx

@@ -51,19 +51,22 @@ export default defineComponent({
           <NTabPane
             name="myResources"
             tab="我的资源"
-            displayDirective="show:lazy">
+            // displayDirective="show:lazy"
+          >
             <SelectItem type="myResources" />
           </NTabPane>
           <NTabPane
             name="shareResources"
             tab="共享资源"
-            displayDirective="show:lazy">
+            // displayDirective="show:lazy"
+          >
             <SelectItem type="shareResources" />
           </NTabPane>
           <NTabPane
             name="myCollect"
             tab="我的收藏"
-            displayDirective="show:lazy">
+            // displayDirective="show:lazy"
+          >
             <SelectItem type="myCollect" />
           </NTabPane>
         </NTabs>

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -10,7 +10,7 @@ import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
 import styles from './index.module.less';
 import CardType from '/src/components/card-type';
-import { materialQueryPage } from '/src/views/natural-resources/api';
+import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
 import TheEmpty from '/src/components/TheEmpty';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { saveCourseware } from '../../../api';
@@ -185,6 +185,20 @@ export default defineComponent({
       }
     );
 
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
     onMounted(() => {
       getList();
 
@@ -246,10 +260,11 @@ export default defineComponent({
                     <CardType
                       isShowAdd
                       item={item}
-                      isShowCollect={false}
+                      isShowCollect={true}
                       isShowAddDisabled={!prepareStore.getIsEditResource}
                       onAdd={(item: any) => onAdd(item)}
                       disabledMouseHover={false}
+                      onCollect={(item: any) => onCollect(item)}
                       onClick={() => {
                         if (item.type === 'IMG') return;
                         state.show = true;

src/views/prepare-lessons/model/the-create/index.module.less

@@ -0,0 +1,177 @@
+:global{
+    .n-modal-mask{
+        background-color: transparent;
+    }
+}
+.setbox {
+    position: relative;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    background: #fff;
+    overflow: hidden;
+}
+
+.head {
+    position: relative;
+    line-height: 53px;
+    height: 53px;
+    text-align: center;
+    background: #F5F6FA;
+    color: #131415;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    flex-shrink: 0;
+
+    .close {
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+    }
+}
+
+.content {
+    flex: 1;
+    padding: 30px;
+    overflow: hidden;
+}
+
+.lineTitle {
+    height: 21px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 21px;
+    margin-bottom: 10px;
+}
+
+.item {
+    position: relative;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: #777;
+    cursor: pointer;
+
+    .itemImg {
+        width: 100px;
+        height: 100px;
+        border: 2px solid #fff;
+        border-radius: 18px;
+        overflow: hidden;
+        margin-bottom: 7px;
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
+
+    &.itemActive {
+        font-weight: 600;
+        color: var(--primary-color);
+
+        .itemImg {
+            border-color: var(--primary-color);
+        }
+        .itemIcon{
+            display: block;
+        }
+    }
+    .itemIcon{
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        display: none;
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.beatItem {
+    position: relative;
+    width: 195px;
+    height: 110px;
+    background: #F5F5F7;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+
+    .beatIcon {
+        width: 80%;
+        height: 60%;
+        cursor: pointer;
+
+        :global {
+            .svg-icon {
+                width: 100% !important;
+                height: 100% !important;
+            }
+        }
+    }
+
+    :global {
+        .n-input-number {
+            width: 80%;
+        }
+        .n-input{
+            border-radius: 6px !important;
+        }
+    }
+
+    .speedIcon {
+        font-size: 30px;
+    }
+}
+
+.btnItem {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+
+    .btnItemIcon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 60px;
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .btnItemName {
+        font-size: 12px;
+    }
+    &.active{
+        background-color: #BADCFE;
+    }
+}
+
+.btns {
+    text-align: center;
+    padding: 15px 0;
+
+    :global {
+        .n-button {
+            width: 117px;
+            height: 35px;
+            padding: 0;
+            text-align: center;
+            font-size: 14px;
+            margin: 0 15px;
+        }
+    }
+}

src/views/prepare-lessons/model/the-create/index.tsx

@@ -0,0 +1,297 @@
+import {
+	NButton,
+	NCard,
+	NCheckbox,
+	NGi,
+	NGrid,
+	NIcon,
+	NInputNumber,
+	NLayout,
+	NLayoutContent,
+	NLayoutSider,
+	NModal,
+	NPopover,
+	NRadio,
+	NRadioGroup,
+	NScrollbar,
+	NSpace,
+	NTabPane,
+	NTable,
+	NTabs,
+	useMessage,
+} from "naive-ui";
+import { defineComponent, onMounted, reactive, watch } from "vue";
+import { CheckmarkCircle, Close } from "@vicons/ionicons5";
+import styles from "./index.module.less";
+import { getImage } from "/src/pc/home/images";
+import { ABC_DATA } from "/src/pc/home/runtime";
+import TheIcon from "/src/components/The-icon";
+import TheSpeed from "/src/pc/home/component/the-speed";
+import { api_musicSheetCreationSave, api_subjectList } from "/src/pc/api";
+import { initMusic } from "/src/pc/home";
+import { encodeUrl } from "/src/utils";
+const instruments = [
+	{
+		label: "竖笛",
+		key: "recorder",
+		id: 4,
+		icon: getImage("icon_27_0.png"),
+		range: {
+			min: 48,
+			max: 74,
+		},
+	},
+	{
+		label: "排箫",
+		key: "pan_flute",
+		id: 1,
+		icon: getImage("icon_27_1.png"),
+		range: {
+			min: 43,
+			max: 77,
+		},
+	},
+	{
+		label: "口风琴",
+		key: "piccolo",
+		id: 5,
+		icon: getImage("icon_27_2.png"),
+		range: {
+			min: 41,
+			max: 72,
+		},
+	},
+	{
+		label: "陶笛",
+		key: "blown_bottle",
+		id: 2,
+		icon: getImage("icon_27_3.png"),
+		range: {
+			min: 45,
+			max: 65,
+		},
+	},
+	{
+		label: "葫芦丝",
+		key: "clarinet",
+		id: 3,
+		icon: getImage("icon_27_4.png"),
+		range: {
+			min: 40,
+			max: 57,
+		},
+	},
+];
+export const notationInstruments = instruments;
+export default defineComponent({
+	name: "TheCreate",
+	props: {
+		show: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ["update:show", "create"],
+	setup(props, { emit }) {
+		const message = useMessage();
+
+		const formsOptions = reactive({
+			loading: false,
+		});
+		const froms = reactive({
+			key: ABC_DATA.key[0],
+			meter: ABC_DATA.meter[0],
+			speed: 80,
+			measure: 30,
+			subjectCode: "recorder",
+		});
+
+		const handleCreate = async () => {
+			if (!froms.speed) {
+				message.warning("请输入开始速度");
+				return;
+			}
+			if (!froms.measure) {
+				message.warning("请输入小节数量");
+				return;
+			}
+			formsOptions.loading = true;
+			handleOpenNotaion({
+				meter: froms.meter.value,
+				speed: `Q:1/4=${froms.speed}`,
+				key: froms.key.value,
+				subjectCode: froms.subjectCode,
+				measure: froms.measure,
+			});
+			emit("create");
+			formsOptions.loading = false;
+		};
+
+		const handleOpenNotaion = (data: any) => {
+			const url = `${location.origin}/notation/#/?v=1.0.3&config=${encodeUrl(data)}`;
+			window.parent.postMessage(
+				{
+					api: "notation_open",
+					url: url,
+				},
+				"*"
+			);
+			// window.open(url, "_blank");
+		};
+
+		return () => (
+			<NModal
+				transformOrigin="center"
+				autoFocus={false}
+				show={props.show}
+				onUpdate:show={(val) => emit("update:show", val)}
+			>
+				<div class={styles.setbox}>
+					<div class={styles.head}>
+						<div>新建乐谱</div>
+						<NButton
+							class={styles.close}
+							quaternary
+							circle
+							size="small"
+							onClick={() => emit("update:show", false)}
+						>
+							<NIcon component={Close} size={18} />
+						</NButton>
+					</div>
+					<div class={styles.content}>
+						<div class={styles.lineTitle}>声部</div>
+						<NSpace size={32} style={{ paddingBottom: "45px" }}>
+							{instruments.map((item) => (
+								<div
+									class={[styles.item, froms.subjectCode === item.key && styles.itemActive]}
+									onClick={() => {
+										froms.subjectCode = item.key;
+									}}
+								>
+									<div class={styles.itemImg}>
+										<img class={styles.icon} src={item.icon} />
+									</div>
+									<div>{item.label}</div>
+									<img class={styles.itemIcon} src={getImage("icon_check.png")} />
+								</div>
+							))}
+						</NSpace>
+						<NSpace style={{ paddingBottom: "45px" }}>
+							<NPopover to="body" trigger="click">
+								{{
+									trigger: () => (
+										<div>
+											<div class={styles.lineTitle}>调号</div>
+											<div class={styles.beatItem}>
+												<div class={[styles.beatIcon]}>
+													<TheIcon iconClassName={froms.key.icon} />
+												</div>
+												<div>{froms.key.name}</div>
+											</div>
+										</div>
+									),
+									default: () => (
+										<NGrid cols={5} xGap={20} yGap={8}>
+											{ABC_DATA.key.map((item) => (
+												<NGi>
+													<div
+														class={[styles.btnItem, froms.key.value === item.value && styles.active]}
+														onClick={() => (froms.key = item)}
+													>
+														<div class={[styles.btnItemIcon]}>
+															<TheIcon iconClassName={item.icon} />
+														</div>
+														<div class={styles.btnItemName}>{item.name}</div>
+													</div>
+												</NGi>
+											))}
+										</NGrid>
+									),
+								}}
+							</NPopover>
+
+							<NPopover to="body" trigger="click">
+								{{
+									trigger: () => (
+										<div>
+											<div class={styles.lineTitle}>拍号</div>
+											<div class={styles.beatItem}>
+												<div class={[styles.beatIcon]}>
+													<TheIcon iconClassName={froms.meter.icon} />
+												</div>
+												<div>{froms.meter.name}</div>
+											</div>
+										</div>
+									),
+									default: () => (
+										<NGrid cols={5} xGap={50} yGap={20}>
+											{ABC_DATA.meter.map((item) => (
+												<NGi>
+													<div
+														class={[styles.btnItem, froms.meter.value === item.value && styles.active]}
+														onClick={() => (froms.meter = item)}
+													>
+														<div class={[styles.btnItemIcon]}>
+															<TheIcon iconClassName={item.icon} />
+														</div>
+														<div class={styles.btnItemName}>{item.name}</div>
+													</div>
+												</NGi>
+											))}
+										</NGrid>
+									),
+								}}
+							</NPopover>
+							<div>
+								<div class={styles.lineTitle}>速度</div>
+								<div class={styles.beatItem}>
+									<NInputNumber
+										size="large"
+										v-model:value={froms.speed}
+										placeholder="开始速度"
+										showButton={false}
+										min={50}
+									>
+										{{
+											prefix: () => (
+												<div class={styles.speedIcon}>
+													<TheIcon iconClassName="icon-a-sudu-4fenyinfu" size={["2em", "1em"]} />
+												</div>
+											),
+										}}
+									</NInputNumber>
+								</div>
+							</div>
+							<div>
+								<div class={styles.lineTitle}>小节</div>
+								<div class={styles.beatItem}>
+									<NInputNumber
+										placeholder="小节数量"
+										size="large"
+										v-model:value={froms.measure}
+										min={4}
+									></NInputNumber>
+								</div>
+							</div>
+						</NSpace>
+
+						<div class={styles.btns}>
+							<NButton round onClick={() => emit("update:show", false)}>
+								取消
+							</NButton>
+							<NButton
+								loading={formsOptions.loading}
+								round
+								type="primary"
+								onClick={() => handleCreate()}
+							>
+								确定
+							</NButton>
+						</div>
+					</div>
+				</div>
+			</NModal>
+		);
+	},
+});

src/views/xiaoku-ai/index.tsx

@@ -12,10 +12,13 @@ export default defineComponent({
   setup() {
     const catchStore = useCatchStore();
     const router = useRouter();
+
+    const xiaokuAiSearch = localStorage.getItem('xiaoku-ai-search');
+    const xiaokuAi = xiaokuAiSearch ? JSON.parse(xiaokuAiSearch) : {};
     const forms = reactive({
-      musicTagIds: [] as any[],
+      musicTagIds: xiaokuAi.musicTagIds ? xiaokuAi.musicTagIds : ([] as any[]),
       enable: true,
-      subjectId: null,
+      subjectId: xiaokuAi.subjectId || null,
       keyword: '',
       page: 1,
       rows: 9999
@@ -23,7 +26,7 @@ export default defineComponent({
     const data = reactive({
       tags: [] as any[],
       tagChildren: [] as any[],
-      tagActiveId: '',
+      tagActiveId: xiaokuAi.tagActiveId || '',
       tagActive: {} as any,
       list: [] as any,
       loading: false
@@ -31,11 +34,21 @@ export default defineComponent({
     const getTags = async () => {
       const res = await api_musicTagTree();
       if (Array.isArray(res?.data) && res.data.length) {
-        data.tags = res.data;
-        data.tagActiveId = res.data[0].id;
-        const list: any[] = [];
-        renderTag(res.data[0].children, list);
-        data.tagChildren = list;
+        data.tags = res.data || [];
+        const index = data.tags.findIndex(
+          (item: any) => item.id == data.tagActiveId
+        );
+        if (index > -1) {
+          data.tagActiveId = res.data[index].id;
+          const list: any[] = [];
+          renderTag(res.data[index].children, list);
+          data.tagChildren = list;
+        } else {
+          data.tagActiveId = res.data[0].id;
+          const list: any[] = [];
+          renderTag(res.data[0].children, list);
+          data.tagChildren = list;
+        }
       }
     };
 
@@ -85,6 +98,15 @@ export default defineComponent({
         await getList();
         // 获取教材分类列表
         await catchStore.getSubjects();
+
+        localStorage.setItem(
+          'xiaoku-ai-search',
+          JSON.stringify({
+            tagActiveId: data.tagActiveId,
+            subjectId: forms.subjectId,
+            musicTagIds: forms.musicTagIds
+          })
+        );
       } catch {
         //
       }
@@ -95,6 +117,16 @@ export default defineComponent({
     const changeTag = (item: any, index: number) => {
       data.tagActiveId = item.id;
       forms.musicTagIds = [];
+
+      localStorage.setItem(
+        'xiaoku-ai-search',
+        JSON.stringify({
+          tagActiveId: item.id,
+          subjectId: forms.subjectId,
+          musicTagIds: forms.musicTagIds
+        })
+      );
+
       const list: any[] = [];
       renderTag(data.tags[index].children, list);
       data.tagChildren = list;
@@ -122,6 +154,15 @@ export default defineComponent({
         forms.musicTagIds.push(activeItem.id);
         data.tagChildren[columnIndex].activeIndex = index;
       }
+
+      localStorage.setItem(
+        'xiaoku-ai-search',
+        JSON.stringify({
+          tagActiveId: data.tagActiveId,
+          subjectId: forms.subjectId,
+          musicTagIds: forms.musicTagIds
+        })
+      );
       getList();
     };
     return () => (
@@ -196,6 +237,15 @@ export default defineComponent({
                         }
                         onClick={() => {
                           forms.subjectId = item.id;
+
+                          localStorage.setItem(
+                            'xiaoku-ai-search',
+                            JSON.stringify({
+                              tagActiveId: data.tagActiveId,
+                              subjectId: item.id,
+                              musicTagIds: forms.musicTagIds
+                            })
+                          );
                           getList();
                         }}>
                         {item.name}