Merge branch 'iteration-20240808-music-score' into jenkins

dev-dist/sw.js

@@ -193,7 +193,7 @@ define(['./workbox-bb0550c6'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.oe0btcmloh8"
+    "revision": "0.jfthsevatb8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

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

@@ -1,30 +1,42 @@
-import request from '@/utils/request';
-
-/**
- * 设置引导页
- */
-export const setGuidance = (params: any) => {
-  return request.post('/edu-app/functionGuidance/save', {
-    data: params
-  });
-};
-
-/**
- * 获取引导页
- */
-export const getGuidance = (params: any) => {
-  return request.get('/edu-app/functionGuidance/queryTagDetail', {
-    data: params,
-    params
-  });
-};
-
-/**
- * 删除引导页
- */
-export const deleteFunctionGuidance = (params: any) => {
-  return request.post('/edu-app/teacher/deleteFunctionGuidance', {
-    data: params,
-    params
-  });
-};
+import request from '@/utils/request';
+
+/**
+ * 设置引导页
+ */
+export const setGuidance = (params: any) => {
+  return request.post('/edu-app/functionGuidance/save', {
+    data: params
+  });
+};
+
+/**
+ * 设置本地缓存引导页
+ * @param params
+ * @returns
+ */
+export const setLocalGuidance = (params: {
+  guideTag: string;
+  guideValue: string;
+}) => {
+  localStorage.setItem(params.guideTag, params.guideValue);
+};
+
+/**
+ * 获取引导页
+ */
+export const getGuidance = (params: any) => {
+  return request.get('/edu-app/functionGuidance/queryTagDetail', {
+    data: params,
+    params
+  });
+};
+
+/**
+ * 删除引导页
+ */
+export const deleteFunctionGuidance = (params: any) => {
+  return request.post('/edu-app/teacher/deleteFunctionGuidance', {
+    data: params,
+    params
+  });
+};

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

@@ -1,338 +1,344 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  toRef,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { useRoute } from 'vue-router';
-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: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('attent1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            width: px2vw(647),
-            height: px2vw(223),
-            left: px2vw(-647),
-            top: px2vw(-150)
-          },
-          btnsStyle: {
-            bottom: px2vw(180),
-            left: px2vw(-490)
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'left'
-        },
-        {
-          ele: '',
-          img: getImage('attent2.png'),
-          imgStyle: {
-            left: px2vw(-290),
-            top: px2vw(20),
-            width: px2vw(477),
-            height: px2vw(277)
-          },
-          btnsStyle: {
-            bottom: px2vw(70),
-            left: px2vw(-135)
-          },
-          boxStyle: {
-            borderRadius: '50%'
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'bottom'
-        },
-        {
-          ele: '',
-          img: getImage('attent3.png'),
-          imgStyle: {
-            left: px2vw(-290),
-            top: px2vw(20),
-            width: px2vw(382),
-            height: px2vw(277)
-          },
-          btnsStyle: {
-            bottom: px2vw(70),
-            left: px2vw(-135)
-          },
-          boxStyle: {
-            borderRadius: '50%'
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'bottom'
-        },
-        {
-          ele: '',
-          img:
-            type.value == 'preview' || route.query.type == 'preview'
-              ? getImage('attent5.png')
-              : getImage('attent4.png'),
-          imgStyle: {
-            top: '100%',
-            left: px2vw(-2),
-            width: px2vw(515),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-20)
-          },
-          boxStyle: {
-            borderRadius: '50px'
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.attentGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-
-    getAllGuidance();
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`attent-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo-attend-class', onResetGuide);
-    });
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      if (!guideInfo.value) {
-        guideInfo.value = { attentGuide: true };
-      } else {
-        guideInfo.value.attentGuide = true;
-      }
-      // 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);
-      }
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                        : item.type == 'left'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${
-                              parseFloat(data.box?.height) / 2 -
-                              parseFloat(item.imgStyle?.height) / 20 +
-                              14
-                            }px`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  toRef,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { useRoute } from 'vue-router';
+import { setLocalGuidance } 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: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('attent1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            width: px2vw(647),
+            height: px2vw(223),
+            left: px2vw(-647),
+            top: px2vw(-150)
+          },
+          btnsStyle: {
+            bottom: px2vw(180),
+            left: px2vw(-490)
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'left'
+        },
+        {
+          ele: '',
+          img: getImage('attent2.png'),
+          imgStyle: {
+            left: px2vw(-290),
+            top: px2vw(20),
+            width: px2vw(477),
+            height: px2vw(277)
+          },
+          btnsStyle: {
+            bottom: px2vw(70),
+            left: px2vw(-135)
+          },
+          boxStyle: {
+            borderRadius: '50%'
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'bottom'
+        },
+        {
+          ele: '',
+          img: getImage('attent3.png'),
+          imgStyle: {
+            left: px2vw(-290),
+            top: px2vw(20),
+            width: px2vw(382),
+            height: px2vw(277)
+          },
+          btnsStyle: {
+            bottom: px2vw(70),
+            left: px2vw(-135)
+          },
+          boxStyle: {
+            borderRadius: '50%'
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'bottom'
+        },
+        {
+          ele: '',
+          img:
+            type.value == 'preview' || route.query.type == 'preview'
+              ? getImage('attent5.png')
+              : getImage('attent4.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-2),
+            width: px2vw(515),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-20)
+          },
+          boxStyle: {
+            borderRadius: '50px'
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.attentGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+
+    getAllGuidance();
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`attent-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'attend-class') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { attentGuide: false };
+        } else {
+          guideInfo.value.attentGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo-attend-class', onResetGuide);
+    });
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      if (!guideInfo.value) {
+        guideInfo.value = { attentGuide: true };
+      } else {
+        guideInfo.value.attentGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                        : item.type == 'left'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${
+                              parseFloat(data.box?.height) / 2 -
+                              parseFloat(item.imgStyle?.height) / 20 +
+                              14
+                            }px`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,291 +1,297 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'coai-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('class1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-294),
-            width: px2vw(648),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-130)
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('class2.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-276),
-            width: px2vw(515),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-110)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('class3.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            width: px2vw(437),
-            height: px2vw(227),
-            left: px2vw(-276)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-113)
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.classGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).classGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`class-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`,data.box);
-      } else {
-        handleNext();
-      }
-    };
-
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'coai-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('class1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-294),
+            width: px2vw(648),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-130)
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('class2.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-276),
+            width: px2vw(515),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-110)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('class3.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            width: px2vw(437),
+            height: px2vw(227),
+            left: px2vw(-276)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-113)
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.classGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).classGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`class-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`,data.box);
+      } else {
+        handleNext();
+      }
+    };
+
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'classList') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      if (!guideInfo.value) {
+        guideInfo.value = { classGuide: true };
+      } else {
+        guideInfo.value.classGuide = true;
+      }
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,300 +1,306 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { 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'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('data1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-100),
-            width: px2vw(472),
-            height: px2vw(256)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-110)
-          },
-          boxStyle: {
-            borderRadius: '25px'
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          }
-        },
-        {
-          ele: '',
-          img: getImage('data2.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-100),
-            width: px2vw(509),
-            height: px2vw(230)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-110)
-          },
-          boxStyle: {
-            borderRadius: '25px'
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          }
-        },
-        {
-          ele: '',
-          img: getImage('data3.png'),
-          imgStyle: {
-            top: '100%',
-            left: px2vw(-105),
-            width: px2vw(438),
-            height: px2vw(230)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-115)
-          },
-
-          boxStyle: {
-            borderRadius: '25px'
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.dataGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).dataGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`data-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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);
-      eventGlobal.on('teacher-guideInfo', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { dataGuide: true };
-      } else {
-        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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { getGuidance, setGuidance, setLocalGuidance } 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'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('data1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-100),
+            width: px2vw(472),
+            height: px2vw(256)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-110)
+          },
+          boxStyle: {
+            borderRadius: '25px'
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          }
+        },
+        {
+          ele: '',
+          img: getImage('data2.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-100),
+            width: px2vw(509),
+            height: px2vw(230)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-110)
+          },
+          boxStyle: {
+            borderRadius: '25px'
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          }
+        },
+        {
+          ele: '',
+          img: getImage('data3.png'),
+          imgStyle: {
+            top: '100%',
+            left: px2vw(-105),
+            width: px2vw(438),
+            height: px2vw(230)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-115)
+          },
+
+          boxStyle: {
+            borderRadius: '25px'
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.dataGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).dataGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`data-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'data-module') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { dataGuide: false };
+        } else {
+          guideInfo.value.dataGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { dataGuide: true };
+      } else {
+        guideInfo.value.dataGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -11,7 +11,7 @@ import {
 import styles from './index.module.less';
 import { getImage } from './images';
 import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
@@ -186,9 +186,15 @@ export default defineComponent({
     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;
+        // const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        // if (res.data) {
+        //   guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        // } else {
+        //   guideInfo.value = {};
+        // }
+        const res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
           guideInfo.value = {};
         }
@@ -239,7 +245,7 @@ export default defineComponent({
           guideInfo.value.homeGuide = false;
         }
         try {
-          await setGuidance({
+          setLocalGuidance({
             guideTag: 'teacher-guideInfo',
             guideValue: JSON.stringify(guideInfo.value)
           });
@@ -285,7 +291,7 @@ export default defineComponent({
         guideInfo.value.homeGuide = true;
       }
       try {
-        const res = await setGuidance({
+        setLocalGuidance({
           guideTag: 'teacher-guideInfo',
           guideValue: JSON.stringify(guideInfo.value)
         });

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

@@ -11,7 +11,7 @@ import {
 import styles from './index.module.less';
 import { getImage } from './images';
 import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
 export default defineComponent({
   name: 'lessons-guide',
   emits: ['close'],
@@ -58,9 +58,15 @@ export default defineComponent({
     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;
+        // const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        // if (res.data) {
+        //   guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        // } else {
+        //   guideInfo.value = {};
+        // }
+        const res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
           guideInfo.value = {};
         }
@@ -111,7 +117,7 @@ export default defineComponent({
           guideInfo.value.lessonsGuide = false;
         }
         try {
-          await setGuidance({
+          setLocalGuidance({
             guideTag: 'teacher-guideInfo',
             guideValue: JSON.stringify(guideInfo.value)
           });
@@ -160,7 +166,7 @@ export default defineComponent({
         guideInfo.value.lessonsGuide = true;
       }
       try {
-        const res = await setGuidance({
+        setLocalGuidance({
           guideTag: 'teacher-guideInfo',
           guideValue: JSON.stringify(guideInfo.value)
         });

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

@@ -1,284 +1,290 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'lessons-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          img: getImage('lessons2.png'),
-          imgStyle: {
-            left: px2vw(-647),
-            width: px2vw(647),
-            height: px2vw(223)
-          },
-          btnsStyle: {
-            bottom: '30px',
-            left: px2vw(-488)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'left'
-        },
-        {
-          ele: '',
-          img: getImage('lessons3.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-471),
-            width: px2vw(471),
-            height: px2vw(223)
-          },
-          btnsStyle: {
-            bottom: px2vw(20),
-            left: px2vw(-310)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          type: 'left'
-        }
-      ],
-      step: 0
-    });
-    const tipShow = ref(false);
-    const guideInfo = ref({} as any);
-    const getAllGuidance = async () => {
-      try {
-        const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
-        if (res.data) {
-          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
-        } else {
-          guideInfo.value = {};
-        }
-        if (guideInfo.value && guideInfo.value.lessonsGuideIn) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).lessonsGuideIn) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(
-        `lessonsIn-${data.step}`
-      )!;
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== 'prepare-lessons') return;
-        if (!guideInfo.value) {
-          guideInfo.value = { lessonsGuideIn: false };
-        } else {
-          guideInfo.value.lessonsGuideIn = false;
-        }
-        try {
-          await setGuidance({
-            guideTag: 'teacher-guideInfo',
-            guideValue: JSON.stringify(guideInfo.value)
-          });
-        } catch (e) {
-          console.log(e);
-        }
-        data.step = 0;
-        getStepELe();
-        tipShow.value = true;
-      } catch {
-        //
-      }
-    };
-    onMounted(() => {
-      setTimeout(() => {
-        getStepELe();
-      }, 500);
-      window.addEventListener('resize', resetSize);
-      eventGlobal.on('teacher-guideInfo', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { lessonsGuideIn: true };
-      } else {
-        guideInfo.value.lessonsGuideIn = true;
-      }
-      try {
-        const res = await setGuidance({
-          guideTag: 'teacher-guideInfo',
-          guideValue: JSON.stringify(guideInfo.value)
-        });
-      } catch (e) {
-        console.log(e);
-      }
-      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box }}
-                id={`modeType-${data.step}`}>
-                {data.steps.map((item: any, index) => (
-                  <div
-                    onClick={(e: Event) => e.stopPropagation()}
-                    class={styles.item}
-                    style={
-                      item.type == 'bottom'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `-${item.imgStyle?.height}`
-                          }
-                        : item.type == 'left'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-
-                            top: `${
-                              parseFloat(data.box?.height) / 2 -
-                              (parseFloat(item.imgStyle?.height) * 1920) /
-                                100 /
-                                2 -
-                              14
-                            }px`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'lessons-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          img: getImage('lessons2.png'),
+          imgStyle: {
+            left: px2vw(-647),
+            width: px2vw(647),
+            height: px2vw(223)
+          },
+          btnsStyle: {
+            bottom: '30px',
+            left: px2vw(-488)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'left'
+        },
+        {
+          ele: '',
+          img: getImage('lessons3.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-471),
+            width: px2vw(471),
+            height: px2vw(223)
+          },
+          btnsStyle: {
+            bottom: px2vw(20),
+            left: px2vw(-310)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          type: 'left'
+        }
+      ],
+      step: 0
+    });
+    const tipShow = ref(false);
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        // const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        // if (res.data) {
+        //   guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        // } else {
+        //   guideInfo.value = {};
+        // }
+        const res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.lessonsGuideIn) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).lessonsGuideIn) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(
+        `lessonsIn-${data.step}`
+      )!;
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'prepare-lessons') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { lessonsGuideIn: false };
+        } else {
+          guideInfo.value.lessonsGuideIn = false;
+        }
+        try {
+          setLocalGuidance({
+            guideTag: 'teacher-guideInfo',
+            guideValue: JSON.stringify(guideInfo.value)
+          });
+        } catch (e) {
+          console.log(e);
+        }
+        data.step = 0;
+        getStepELe();
+        tipShow.value = true;
+      } catch {
+        //
+      }
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        getStepELe();
+      }, 500);
+      window.addEventListener('resize', resetSize);
+      eventGlobal.on('teacher-guideInfo', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo')|| '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { lessonsGuideIn: true };
+      } else {
+        guideInfo.value.lessonsGuideIn = true;
+      }
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : item.type == 'left'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+
+                            top: `${
+                              parseFloat(data.box?.height) / 2 -
+                              (parseFloat(item.imgStyle?.height) * 1920) /
+                                100 /
+                                2 -
+                              14
+                            }px`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -11,7 +11,7 @@ import {
 import styles from './index.module.less';
 import { getImage } from './images';
 import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
 export default defineComponent({
   name: 'music-guide',
   emits: ['close'],
@@ -106,9 +106,15 @@ export default defineComponent({
     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;
+        // const res = await getGuidance({ guideTag: 'teacher-guideInfo' });
+        // if (res.data) {
+        //   guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        // } else {
+        //   guideInfo.value = {};
+        // }
+        const res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
         } else {
           guideInfo.value = {};
         }
@@ -163,7 +169,7 @@ export default defineComponent({
           guideInfo.value.musicGuide = false;
         }
         try {
-          await setGuidance({
+          setLocalGuidance({
             guideTag: 'teacher-guideInfo',
             guideValue: JSON.stringify(guideInfo.value)
           });
@@ -210,7 +216,7 @@ export default defineComponent({
       }
       // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
       try {
-        const res = await setGuidance({
+        setLocalGuidance({
           guideTag: 'teacher-guideInfo',
           guideValue: JSON.stringify(guideInfo.value)
         });

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

@@ -1,252 +1,258 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw } 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'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          img: getImage('myColloge1.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(630),
-            width: px2vw(458),
-            height: px2vw(291)
-          },
-          btnsStyle: {
-            bottom: px2vw(96),
-            left: px2vw(790)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.myColloge) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).myColloge) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      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;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        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);
-      eventGlobal.on('natural-resources-guide', (name: string) =>
-        onResetGuide(name)
-      );
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('natural-resources-guide', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { myColloge: true };
-      } else {
-        guideInfo.value.myColloge = true;
-      }
-      try {
-        const res = await setGuidance({
-          guideTag: 'teacher-guideInfo',
-          guideValue: JSON.stringify(guideInfo.value)
-        });
-      } catch (e) {
-        console.log(e);
-      }
-      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box }}
-                id={`modeType-${data.step}`}>
-                {data.steps.map((item: any, index) => (
-                  <div
-                    onClick={(e: Event) => e.stopPropagation()}
-                    class={styles.item}
-                    style={
-                      item.type == 'bottom'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `-${item.imgStyle?.height}`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          {/* <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div> */}
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'myColloge-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          img: getImage('myColloge1.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(630),
+            width: px2vw(458),
+            height: px2vw(291)
+          },
+          btnsStyle: {
+            bottom: px2vw(96),
+            left: px2vw(790)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.myColloge) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).myColloge) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      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;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        console.log(name);
+        if (name !== 'myCollect') return;
+        console.log(name, 'name');
+        if (!guideInfo.value) {
+          guideInfo.value = { myColloge: false };
+        } else {
+          guideInfo.value.myColloge = false;
+        }
+        try {
+          setLocalGuidance({
+            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('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { myColloge: true };
+      } else {
+        guideInfo.value.myColloge = true;
+      }
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          {/* <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div> */}
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,258 +1,264 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw } 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'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('myResourecs1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-240),
-            width: px2vw(556),
-            height: px2vw(257)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-80)
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          },
-          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 = {};
-        }
-        console.log(guideInfo.value, 'guideInfo.value');
-        if (guideInfo.value && guideInfo.value.myResourcesGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).myResourcesGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(
-        `myResources-${data.step}`
-      )!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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);
-      eventGlobal.on('natural-resources-guide', (name: string) =>
-        onResetGuide(name)
-      );
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('natural-resources-guide', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { myResourcesGuide: true };
-      } else {
-        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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          {/* <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div> */}
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'myResources-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('myResourecs1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-240),
+            width: px2vw(556),
+            height: px2vw(257)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-80)
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          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);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).myResourcesGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(
+        `myResources-${data.step}`
+      )!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'myResources') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { classGuide: false };
+        } else {
+          guideInfo.value.classGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { myResourcesGuide: true };
+      } else {
+        guideInfo.value.myResourcesGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          {/* <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div> */}
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,291 +1,297 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw } 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'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('shareResources1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-263),
-            width: px2vw(553),
-            height: px2vw(229)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-102)
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          },
-          boxStyle: {
-            borderRadius: '30px'
-          }
-        },
-        {
-          ele: '',
-          img: getImage('shareResources2.png'),
-          imgStyle: {
-            left: px2vw(99),
-            width: px2vw(618),
-            height: px2vw(273)
-          },
-          btnsStyle: {
-            bottom: px2vw(88),
-            left: px2vw(240)
-          },
-
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          },
-          boxStyle: {
-            borderRadius: '15px'
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.shareResourcesGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).shareResourcesGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(
-        `shareResources-${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;
-
-        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'
-          };
-          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'
-          };
-        }
-        // 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);
-      eventGlobal.on('natural-resources-guide', (name: string) =>
-        onResetGuide(name)
-      );
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('natural-resources-guide', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo')||'{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { shareResourcesGuide: true };
-      } else {
-        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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'shareResources-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('shareResources1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-263),
+            width: px2vw(553),
+            height: px2vw(229)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-102)
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          },
+          boxStyle: {
+            borderRadius: '30px'
+          }
+        },
+        {
+          ele: '',
+          img: getImage('shareResources2.png'),
+          imgStyle: {
+            left: px2vw(99),
+            width: px2vw(618),
+            height: px2vw(273)
+          },
+          btnsStyle: {
+            bottom: px2vw(88),
+            left: px2vw(240)
+          },
+
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          },
+          boxStyle: {
+            borderRadius: '15px'
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.shareResourcesGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).shareResourcesGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(
+        `shareResources-${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;
+
+        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'
+          };
+          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'
+          };
+        }
+        // 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 {
+          setLocalGuidance({
+            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('natural-resources-guide', (name: string) =>
+        onResetGuide(name)
+      );
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('natural-resources-guide', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo')||'{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { shareResourcesGuide: true };
+      } else {
+        guideInfo.value.shareResourcesGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,270 +1,276 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'coai-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-                 left: '-80px',
-            width:  '518px',
-            height:  '256px'
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('student1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-64),
-            width: px2vw(518),
-            height: px2vw(256)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-74)
-          },
-          eleRectPadding: {
-            left: 7,
-            top: 7,
-            width: 14,
-            height: 14
-          }
-        },
-        {
-          ele: '',
-          img: getImage('student2.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-261),
-            width: px2vw(515),
-            height: px2vw(227)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-120)
-          },
-
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.studentGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).studentGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`student-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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);
-      eventGlobal.on('teacher-guideInfo', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-    const handleNext = () => {
-      if (data.step >= 2) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { studentGuide: true };
-      } else {
-        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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box }}
-                id={`modeType-${data.step}`}>
-                {data.steps.map((item: any, index) => (
-                  <div
-                    onClick={(e: Event) => e.stopPropagation()}
-                    class={styles.item}
-                    style={
-                      item.type == 'bottom'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `-${item.imgStyle?.height}`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div class={[styles.btn]} onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          {/* <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div> */}
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'coai-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+                 left: '-80px',
+            width:  '518px',
+            height:  '256px'
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('student1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-64),
+            width: px2vw(518),
+            height: px2vw(256)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-74)
+          },
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
+          }
+        },
+        {
+          ele: '',
+          img: getImage('student2.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-261),
+            width: px2vw(515),
+            height: px2vw(227)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-120)
+          },
+
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.studentGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).studentGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`student-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'studentList') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { studentGuide: false };
+        } else {
+          guideInfo.value.studentGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+    const handleNext = () => {
+      if (data.step >= 2) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { studentGuide: true };
+      } else {
+        guideInfo.value.studentGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div class={[styles.btn]} onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          {/* <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div> */}
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,276 +1,282 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'teacher-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('teacher1.png'),
-          handStyle: {
-            top: '0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-75),
-            width: px2vw(472),
-            height: px2vw(230)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-84)
-          },
-          boxStyle: {
-            borderRadius: '25px'
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          }
-        },
-        {
-          ele: '',
-          img: getImage('teacher2.png'),
-          imgStyle: {
-            top: px2vw(-4),
-            left: px2vw(-142),
-            width: px2vw(559),
-            height: px2vw(230)
-          },
-          btnsStyle: {
-            bottom: px2vw(30),
-            left: px2vw(-154)
-          },
-          boxStyle: {
-            borderRadius: '25px'
-          },
-          eleRectPadding: {
-            left: 14,
-            top: 14,
-            width: 28,
-            height: 28
-          }
-        }
-      ],
-      step: 0
-    });
-    const tipShow = ref(false);
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).teacherGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.teacherGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`teacher-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== 'base-setting') return;
-        if (!guideInfo.value) {
-          guideInfo.value = { teacherGuide: false };
-        } else {
-          guideInfo.value.teacherGuide = 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', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { teacherGuide: true };
-      } else {
-        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);
-      }
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box, ...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}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div>
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'teacher-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('teacher1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-75),
+            width: px2vw(472),
+            height: px2vw(230)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-84)
+          },
+          boxStyle: {
+            borderRadius: '25px'
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          }
+        },
+        {
+          ele: '',
+          img: getImage('teacher2.png'),
+          imgStyle: {
+            top: px2vw(-4),
+            left: px2vw(-142),
+            width: px2vw(559),
+            height: px2vw(230)
+          },
+          btnsStyle: {
+            bottom: px2vw(30),
+            left: px2vw(-154)
+          },
+          boxStyle: {
+            borderRadius: '25px'
+          },
+          eleRectPadding: {
+            left: 14,
+            top: 14,
+            width: 28,
+            height: 28
+          }
+        }
+      ],
+      step: 0
+    });
+    const tipShow = ref(false);
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).teacherGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.teacherGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`teacher-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'base-setting') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { teacherGuide: false };
+        } else {
+          guideInfo.value.teacherGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { teacherGuide: true };
+      } else {
+        guideInfo.value.teacherGuide = true;
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box, ...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}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div>
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

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

@@ -1,248 +1,254 @@
-import { NButton } from 'naive-ui';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import styles from './index.module.less';
-import { getImage } from './images';
-import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
-import { getGuidance, setGuidance } from './api';
-export default defineComponent({
-  name: 'train-guide',
-  emits: ['close'],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {
-        height: '0px'
-      } as any,
-      show: false,
-      /**
-       *
-            width:  px2vw(840),
-            height:  px2vw(295)
-       */
-      steps: [
-        {
-          ele: '',
-          eleRect: {} as DOMRect,
-          img: getImage('train3.png'),
-          handStyle: {
-            top: '-0.91rem'
-          },
-          imgStyle: {
-            top: px2vw(-360),
-            left: px2vw(-170),
-            width: px2vw(591),
-            height: px2vw(302)
-          },
-          btnsStyle: {
-            top: px2vw(-205),
-            left: px2vw(-10)
-          },
-          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 = {};
-        }
-        if (guideInfo.value && guideInfo.value.trainGuide) {
-          tipShow.value = false;
-        } else {
-          tipShow.value = true;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-      // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    };
-    getAllGuidance();
-    // const guideInfo = localStorage.getItem('teacher-guideInfo');
-    // if (guideInfo && JSON.parse(guideInfo).trainGuide) {
-    //   tipShow.value = false;
-    // } else {
-    //   tipShow.value = true;
-    // }
-    const getStepELe = () => {
-      const ele: HTMLElement = document.getElementById(`train-${data.step}`)!;
-
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-        const left = data.steps[data.step].eleRectPadding?.left || 0;
-        const top = data.steps[data.step].eleRectPadding?.top || 0;
-        const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0;
-        data.box = {
-          left: eleRect.x - left + 'px',
-          top: eleRect.y - top + 'px',
-          width: eleRect.width + width + 'px',
-          height: eleRect.height + height + 'px'
-        };
-        // console.log(`coai-${data.step}`, data.box);
-      } else {
-        handleNext();
-      }
-    };
-    const onResetGuide = async (name: string) => {
-      try {
-        if (name !== '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);
-      eventGlobal.on('teacher-guideInfo', onResetGuide);
-    });
-    const resetSize = () => {
-      getStepELe();
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', resetSize);
-      eventGlobal.off('teacher-guideInfo', onResetGuide);
-    });
-
-    const handleNext = () => {
-      if (data.step >= 4) {
-        endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = async () => {
-      // let guideInfo =
-      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
-      if (!guideInfo.value) {
-        guideInfo.value = { trainGuide: true };
-      } else {
-        guideInfo.value.trainGuide = true;
-      }
-      try {
-        const res = await setGuidance({
-          guideTag: 'teacher-guideInfo',
-          guideValue: JSON.stringify(guideInfo.value)
-        });
-      } catch (e) {
-        console.log(e);
-      }
-      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
-      tipShow.value = false;
-      //  localStorage.setItem('endC')
-    };
-    return () => (
-      <>
-        {tipShow.value ? (
-          <div
-            v-model:show={tipShow.value}
-            class={['n-modal-mask', 'n-modal-mask-guide']}>
-            <div class={styles.content} onClick={() => handleNext()}>
-              <div
-                class={styles.backBtn}
-                onClick={(e: Event) => {
-                  e.stopPropagation();
-                  endGuide();
-                }}>
-                跳过
-              </div>
-              <div
-                class={styles.box}
-                style={{ ...data.box }}
-                id={`modeType-${data.step}`}>
-                {data.steps.map((item: any, index) => (
-                  <div
-                    onClick={(e: Event) => e.stopPropagation()}
-                    class={styles.item}
-                    style={
-                      item.type == 'bottom'
-                        ? {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `-${item.imgStyle?.height}`
-                          }
-                        : {
-                            display: index === data.step ? '' : 'none',
-                            left: `${item.eleRect?.left}px`,
-                            top: `${data.box?.height}`
-                          }
-                    }>
-                    <img
-                      class={styles.img}
-                      style={item.imgStyle}
-                      src={item.img}
-                    />
-                    {/* <img
-                      class={styles.iconHead}
-                      style={item.handStyle}
-                      src={getImage('indexDot.png')}
-                    /> */}
-                    <div class={styles.btns} style={item.btnsStyle}>
-                      {data.step + 1 == data.steps.length ? (
-                        <>
-                          <div
-                            class={[styles.endBtn]}
-                            onClick={() => endGuide()}>
-                            完成
-                          </div>
-                          {/* <div
-                            class={styles.nextBtn}
-                            onClick={() => {
-                              data.step = 0;
-                              getStepELe();
-                            }}>
-                            再看一遍
-                          </div> */}
-                        </>
-                      ) : (
-                        <div class={styles.btn} onClick={() => handleNext()}>
-                          下一步 ({data.step + 1}/{data.steps.length})
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        ) : null}
-      </>
-    );
-  }
-});
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { eventGlobal, px2vw, px2vwH } from '@/utils/index';
+import { getGuidance, setGuidance, setLocalGuidance } from './api';
+export default defineComponent({
+  name: 'train-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {
+        height: '0px'
+      } as any,
+      show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('train3.png'),
+          handStyle: {
+            top: '-0.91rem'
+          },
+          imgStyle: {
+            top: px2vw(-360),
+            left: px2vw(-170),
+            width: px2vw(591),
+            height: px2vw(302)
+          },
+          btnsStyle: {
+            top: px2vw(-205),
+            left: px2vw(-10)
+          },
+          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 res = localStorage.getItem('teacher-guideInfo');
+        if (res) {
+          guideInfo.value = JSON.parse(res) || null;
+        } else {
+          guideInfo.value = {};
+        }
+        if (guideInfo.value && guideInfo.value.trainGuide) {
+          tipShow.value = false;
+        } else {
+          tipShow.value = true;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+      // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    };
+    getAllGuidance();
+    // const guideInfo = localStorage.getItem('teacher-guideInfo');
+    // if (guideInfo && JSON.parse(guideInfo).trainGuide) {
+    //   tipShow.value = false;
+    // } else {
+    //   tipShow.value = true;
+    // }
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(`train-${data.step}`)!;
+
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
+        data.box = {
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
+        };
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
+      }
+    };
+    const onResetGuide = async (name: string) => {
+      try {
+        if (name !== 'train') return;
+        if (!guideInfo.value) {
+          guideInfo.value = { trainGuide: false };
+        } else {
+          guideInfo.value.trainGuide = false;
+        }
+        try {
+          setLocalGuidance({
+            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', onResetGuide);
+    });
+    const resetSize = () => {
+      getStepELe();
+    };
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+      eventGlobal.off('teacher-guideInfo', onResetGuide);
+    });
+
+    const handleNext = () => {
+      if (data.step >= 4) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = async () => {
+      // let guideInfo =
+      //   JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
+      if (!guideInfo.value) {
+        guideInfo.value = { trainGuide: true };
+      } else {
+        guideInfo.value.trainGuide = true;
+      }
+      try {
+        setLocalGuidance({
+          guideTag: 'teacher-guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
+      }
+      // localStorage.setItem('teacher-guideInfo', JSON.stringify(guideInfo));
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
+    return () => (
+      <>
+        {tipShow.value ? (
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
+            <div class={styles.content} onClick={() => handleNext()}>
+              <div
+                class={styles.backBtn}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  endGuide();
+                }}>
+                跳过
+              </div>
+              <div
+                class={styles.box}
+                style={{ ...data.box }}
+                id={`modeType-${data.step}`}>
+                {data.steps.map((item: any, index) => (
+                  <div
+                    onClick={(e: Event) => e.stopPropagation()}
+                    class={styles.item}
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
+                    <img
+                      class={styles.img}
+                      style={item.imgStyle}
+                      src={item.img}
+                    />
+                    {/* <img
+                      class={styles.iconHead}
+                      style={item.handStyle}
+                      src={getImage('indexDot.png')}
+                    /> */}
+                    <div class={styles.btns} style={item.btnsStyle}>
+                      {data.step + 1 == data.steps.length ? (
+                        <>
+                          <div
+                            class={[styles.endBtn]}
+                            onClick={() => endGuide()}>
+                            完成
+                          </div>
+                          {/* <div
+                            class={styles.nextBtn}
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </div> */}
+                        </>
+                      ) : (
+                        <div class={styles.btn} onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

src/hooks/useDrag/useDragGuidance.ts

@@ -1,37 +1,47 @@
-import { getGuidance, setGuidance } from '@/custom-plugins/guide-page/api';
-import { ref } from 'vue';
-
-// 引导页
-export const guidanceShow = ref(false);
-let guideInfoData: Record<string, any> = {};
-export async function getGuidanceShow() {
-  try {
-    const res = await getGuidance({ guideTag: 'guideInfo' });
-    if (res.code === 200) {
-      if (res.data) {
-        const guideInfo = JSON.parse(res.data?.guideValue) || null;
-        if (guideInfo) {
-          guideInfoData = guideInfo;
-          guidanceShow.value = !guideInfo.teacherDrag;
-        }
-      } else {
-        guidanceShow.value = true;
-      }
-    }
-  } catch (e) {
-    console.log(e);
-  }
-}
-export function setGuidanceShow() {
-  try {
-    setGuidance({
-      guideTag: 'guideInfo',
-      guideValue: JSON.stringify(
-        Object.assign(guideInfoData, { teacherDrag: true })
-      )
-    });
-    guidanceShow.value = false;
-  } catch (e) {
-    console.log(e);
-  }
-}
+import { setLocalGuidance } from '@/custom-plugins/guide-page/api';
+import { ref } from 'vue';
+
+// 引导页
+export const guidanceShow = ref(false);
+let guideInfoData: Record<string, any> = {};
+export async function getGuidanceShow() {
+  try {
+    // const res = await getGuidance({ guideTag: 'guideInfo' });
+    // if (res.code === 200) {
+    //   if (res.data) {
+    //     const guideInfo = JSON.parse(res.data?.guideValue) || null;
+    //     if (guideInfo) {
+    //       guideInfoData = guideInfo;
+    //       guidanceShow.value = !guideInfo.teacherDrag;
+    //     }
+    //   } else {
+    //     guidanceShow.value = true;
+    //   }
+    // }
+    const res = localStorage.getItem('guideInfo');
+    if (res) {
+      const guideInfo = JSON.parse(res) || null;
+      if (guideInfo) {
+        guideInfoData = guideInfo;
+        guidanceShow.value = !guideInfo.teacherDrag;
+      }
+    } else {
+      guidanceShow.value = true;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+export function setGuidanceShow() {
+  try {
+    setLocalGuidance({
+      guideTag: 'guideInfo',
+      guideValue: JSON.stringify(
+        Object.assign(guideInfoData, { teacherDrag: true })
+      )
+    });
+    guidanceShow.value = false;
+  } catch (e) {
+    console.log(e);
+  }
+}