1

1

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

@@ -0,0 +1,213 @@
+import { NButton } from 'naive-ui';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+
+export default defineComponent({
+  name: 'coai-guide',
+  emits: ['close'],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: '',
+          eleRect: {} as DOMRect,
+          img: getImage('coai-1.png'),
+          handStyle: {
+            top: '0.91rem'
+          },
+          imgStyle: {
+            top: '1.5rem'
+          },
+          btnsStyle: {
+            top: '4.5rem',
+            left: '1rem'
+          }
+        },
+        {
+          ele: '',
+          img: getImage('coai-2.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '0.15rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: '-4rem'
+          },
+          btnsStyle: {
+            top: '-1.3rem',
+            left: '1.3rem'
+          }
+        },
+        {
+          ele: '',
+          img: getImage('coai-3.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '0.17rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: '-4rem'
+          },
+          btnsStyle: {
+            top: '-1.3rem',
+            left: '1.3rem'
+          }
+        },
+        {
+          ele: '',
+          img: getImage('coai-4.png'),
+          handStyle: {
+            top: '-1.39rem',
+            left: '1.4rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: '-4rem',
+            left: '-3.2rem'
+          },
+          btnsStyle: {
+            top: '-0.85rem',
+            left: '-3rem',
+            'justify-content': 'center',
+            padding: 0
+          }
+        }
+      ],
+      step: 0
+    });
+    const tipShow = ref(false);
+    const guideInfo = localStorage.getItem('teacher-guideInfo');
+    if (guideInfo && JSON.parse(guideInfo).coaiGuide) {
+      tipShow.value = false;
+    } else {
+      tipShow.value = true;
+    }
+    const getStepELe = () => {
+      console.log(`coai-${data.step}`);
+      const ele: HTMLElement = document.getElementById(`coai-${data.step}`)!;
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+        data.box = {
+          left: eleRect.x + 'px',
+          top: eleRect.y + 'px',
+          width: eleRect.width + 'px',
+          height: eleRect.height + 'px'
+        };
+      }
+    };
+    onMounted(() => {
+      getStepELe();
+    });
+
+    const handleNext = () => {
+      if (data.step >= 3) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = () => {
+      let guideInfo =
+        JSON.parse(localStorage.getItem('teacher-guideInfo')) || null;
+      if (!guideInfo) {
+        guideInfo = { homeGuide: true };
+      } else {
+        guideInfo.homeGuide = true;
+      }
+      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={{
+                      display: index === data.step ? '' : 'none',
+                      left: `${item.eleRect?.left}px`,
+                      top: `${item.eleRect?.top}px`
+                    }}>
+                    <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 ? (
+                        <>
+                          <NButton
+                            class={styles.btn}
+                            round
+                            color="transparent"
+                            style={{ 'border-color': '#fff' }}
+                            type="primary"
+                            onClick={() => {
+                              data.step = 0;
+                              getStepELe();
+                            }}>
+                            再看一遍
+                          </NButton>
+                          <NButton
+                            class={[styles.btn, styles.endBtn]}
+                            round
+                            type="primary"
+                            onClick={() => endGuide()}>
+                            完成
+                          </NButton>
+                        </>
+                      ) : (
+                        <NButton
+                          class={styles.btn}
+                          round
+                          type="primary"
+                          onClick={() => handleNext()}>
+                          下一步 ({data.step + 1}/{data.steps.length})
+                        </NButton>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+});

src/custom-plugins/guide-page/images/index.ts

@@ -0,0 +1,9 @@
+const modules = import.meta.glob('../images/**', {
+  import: 'default',
+  eager: true
+});
+export const getImage = (name: string): string => {
+  // console.log("🚀 ~ modules", modules[`./${name}`])
+  const src: any = modules[`./${name}`] || '';
+  return src;
+};

src/custom-plugins/guide-page/index.module.less

@@ -0,0 +1,124 @@
+.guidePopup {
+  z-index: 5000 !important;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transform: none;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  margin: 0;
+  overflow: hidden;
+}
+
+.tipsContainer {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.backBtn {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 0 14px;
+  border-radius: 17px;
+  border: 1px solid #ffffff;
+  color: #fff;
+  text-align: center;
+  z-index: 2001;
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.backBtn.right {
+  width: 60px;
+  line-height: 24px;
+  padding: 0 14px;
+  right: 14px;
+  top: 21px;
+  left: auto;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.box {
+  position: fixed;
+  box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
+  transition: all 0.25s;
+  transform: scale(1.2);
+  border-radius: 8px;
+  z-index: 100;
+}
+
+.item {
+  position: absolute;
+  width: 200px;
+  z-index: 10;
+
+  .img {
+    position: absolute;
+    width: 100%;
+  }
+
+  .iconHead {
+    position: absolute;
+    left: 45px;
+    width: 18px;
+    height: 52px;
+
+    &.head2 {
+      left: 0.2rem;
+      top: 0.9rem;
+    }
+  }
+
+  .btns {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    padding: 0 12px;
+
+    .btn {
+      width: 73px;
+      height: 23px;
+      line-height: 13px;
+      font-size: 9px;
+      padding: 0;
+    }
+
+    .endBtn {
+      margin-left: 5px;
+    }
+  }
+}
+
+@keyframes myscale {
+  0% {
+    transform: scale(0.9);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.9);
+  }
+}
+
+:global {
+  .n-modal-mask-guide {
+    z-index: 2000;
+  }
+}

src/views/data-module/index.tsx

@@ -91,7 +91,7 @@ export default defineComponent({
                 </>
               )
             }}>
-            <NTabPane name="training " tab="训练统计">
+            <NTabPane name="training" tab="训练统计">
               <TrainData ref={TrainDataRef} timer={timer.value}></TrainData>
             </NTabPane>
             <NTabPane name="practice" tab="练习数据">

src/views/home/index.tsx

@@ -45,9 +45,8 @@ import TeachGroup from './modals/teachGroup';
 import { classGroupList, courseSchedulePage } from './api';
 import TheEmpty from '/src/components/TheEmpty';
 import { setTabsCaches } from '/src/hooks/use-async';
-
+import HomeGuide from '/src/custom-plugins/guide-page/home-guide';
 export const formatDateToDay = () => {
-  //
   const hours = dayjs().hour();
   if (hours < 12) {
     return '早上好！'; //如果小时数小于12则输出“早上好！”
@@ -325,6 +324,7 @@ export default defineComponent({
 
     return () => (
       <div class={styles.homeWrap}>
+
         <div class={styles.homeInfoLeft}>
           <div class={styles.homeBanner}>
             <div class={styles.welcomeInfo}>
@@ -344,7 +344,7 @@ export default defineComponent({
                 </NButton>
               </div>
             </div>
-
+            <div class={styles.centerInfo}>11111</div>
             <div class={styles.applyInfo}>
               {userStore.getUserInfo.gender === 1 ? (
                 <img src={teacherMan} class={styles.teacherMan} />
@@ -638,6 +638,8 @@ export default defineComponent({
             onClose={() => (forms.useStatus = false)}
           />
         </NModal>
+
+        <HomeGuide></HomeGuide>
       </div>
     );
   }