优化样式

public/version.json

@@ -1 +1 @@
-{"version":1722495639752}
+{"version":1723799082701}

src/components/TheSearch/index.module.less

@@ -1,62 +1,62 @@
-.TheSearch {
-  border-radius: 20px !important;
-
-  &.noBorder {
-    --n-border: none !important;
-  }
-
-
-  :global {
-    .n-input-wrapper {
-      padding-left: 12px;
-      padding-right: 4px;
-      height: 42px !important;
-    }
-
-    .n-button {
-      height: 34px;
-      font-size: max(16px, 13Px);
-      font-weight: 500;
-      width: auto;
-      opacity: 0.7;
-    }
-
-    .n-input__placeholder {
-      font-size: max(15px, 13Px);
-    }
-  }
-
-  .active {
-    display: none;
-  }
-
-  .active,
-  .default {
-    width: max(16px, 14Px);
-    height: max(16px, 14Px);
-  }
-
-  &:global(.n-input--focus) {
-    .active {
-      display: block;
-    }
-
-    .default {
-      display: none;
-    }
-
-    :global {
-      .n-button {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:hover {
-    :global {
-      .n-button {
-        opacity: 1;
-      }
-    }
-  }
-}
+.TheSearch {
+  border-radius: 20px !important;
+
+  &.noBorder {
+    --n-border: none !important;
+  }
+
+
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+      height: 42px !important;
+    }
+
+    .n-button {
+      height: 34px;
+      font-size: max(16px, 13Px) !important;
+      font-weight: 500;
+      width: auto;
+      opacity: 0.7;
+    }
+
+    .n-input__placeholder {
+      font-size: max(15px, 13Px);
+    }
+  }
+
+  .active {
+    display: none;
+  }
+
+  .active,
+  .default {
+    width: max(16px, 14Px);
+    height: max(16px, 14Px);
+  }
+
+  &:global(.n-input--focus) {
+    .active {
+      display: block;
+    }
+
+    .default {
+      display: none;
+    }
+
+    :global {
+      .n-button {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:hover {
+    :global {
+      .n-button {
+        opacity: 1;
+      }
+    }
+  }
+}

src/components/card-preview/song-modal/index.module.less

@@ -44,8 +44,10 @@
   left: 0;
   right: 0;
   width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(26px);
+  // background: rgba(0, 0, 0, 0.6);
+  // backdrop-filter: blur(26px);
+  background: url('../../../common/images/bg.png') no-repeat;
+  background-size: 100% 100%;
   height: 80px;
   padding: 0 24px 0 24px !important;
   transition: all 0.3s;
@@ -186,4 +188,4 @@
   margin-bottom: -80px;
   // transform: translateY(100%);
   transition: all .3s;
-}
+}

src/components/card-preview/video-modal/index.module.less

@@ -46,8 +46,10 @@
     left: 0;
     right: 0;
     width: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(26px);
+    // background: rgba(0, 0, 0, 0.6);
+    background: url('../../../common/images/bg.png') no-repeat;
+    background-size: 100% 100%;
+    // backdrop-filter: blur(26px);
     height: 80px;
     padding: 0 26px 0 26px !important;
     transition: all 0.3s;
@@ -411,4 +413,4 @@
 //       }
 //     }
 //   }
-// }
+// }

src/components/card-preview/video-modal/index.tsx

@@ -222,7 +222,8 @@ export default defineComponent({
     onMounted(() => {
       videoItem.value = TCPlayer(videoID, {
         appID: '',
-        controls: false
+        controls: false,
+        autoPlay: true
       }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       __init();
       window.addEventListener('fullscreenchange', onFullScreenChange);

src/components/layout/index.module.less

@@ -41,7 +41,7 @@
   }
 
   .sliderList {
-    margin-top: 10px;
+    // margin-top: 10px;
     max-height: calc(100vh - 92px);
     --n-scrollbar-width: 0 !important;
 
@@ -67,6 +67,10 @@
   border-radius: 20px;
   cursor: pointer;
 
+  &:first-child {
+    margin-top: 18px;
+  }
+
   .radiusIcon {
     img {
       width: 26px;
@@ -613,4 +617,4 @@
 
 .popBox {
   z-index: 9999;
-}
+}

src/views/attend-class/component/audio-pay.tsx

@@ -442,6 +442,9 @@ export default defineComponent({
               audioForms.paused = true;
               emit('ended');
             }}
+            onPlay={() => {
+              audioForms.paused = audio.value?.paused;
+            }}
             onTimeupdate={() => {
               audioForms.currentTime = timeFormat(
                 Math.round(audio.value?.currentTime || 0)

src/views/attend-class/index.tsx

@@ -365,18 +365,6 @@ export default defineComponent({
       //   console.log('Event:', event.type, event);
       // }
 
-      // document.addEventListener('keydown', handleEvent);
-      // document.addEventListener('keyup', handleEvent);
-      // document.addEventListener('keypress', handleEvent);
-      // document.addEventListener('pointerdown', handleEvent);
-      // document.addEventListener('pointerup', handleEvent);
-      // document.addEventListener('pointermove', handleEvent);
-      // document.addEventListener('mousedown', handleEvent);
-      // document.addEventListener('mouseup', handleEvent);
-      // document.addEventListener('mousemove', handleEvent);
-      // document.addEventListener('focus', handleEvent, true);
-      // document.addEventListener('blur', handleEvent, true);
-
       if (data.classId) {
         const res = await api_cousseScheduleDetail(data.classId);
         data.courseId = res.data.useChapterLessonCoursewareId;
@@ -428,21 +416,44 @@ export default defineComponent({
           setModalOpen();
           handlePreAndNext('down');
         } else if (e.code === 'Space') {
-          // const activeItem = data.itemList[popupData.activeIndex];
+          console.log('Space clicked');
+
+          const activeItem = data.itemList[popupData.activeIndex];
           // console.log(activeItem, activeItem.videoEle);
-          // // 暂停视频和曲谱的播放
-          // if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          //   activeItem.videoEle?.play();
-          // }
-          // if (activeItem.type === 'SONG' && activeItem.audioEle) {
-          //   activeItem.audioEle?.play();
-          // }
-          // if (activeItem.type === 'MUSIC') {
+          // 暂停视频和曲谱的播放
+          if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
+            activeItem.videoEle?.play();
+          }
+          if (activeItem.type === 'SONG' && activeItem.audioEle) {
+            activeItem.audioEle?.play();
+          }
+          if (activeItem.type === 'MUSIC') {
+            activeItem.iframeRef?.contentWindow?.postMessage(
+              { api: 'setPlayState' },
+              '*'
+            );
+          }
+          // if (activeItem.type === 'LISTEN') {
           //   activeItem.iframeRef?.contentWindow?.postMessage(
           //     { api: 'setPlayState' },
           //     '*'
           //   );
           // }
+          if (activeItem.type === 'RHYTHM') {
+            activeItem.iframeRef?.contentWindow?.postMessage(
+              { api: 'setPlayState', data: true },
+              '*'
+            );
+          }
+
+          if (activeItem.type === 'PPT') {
+            console.log(activeItem.iframeRef, 'activeItem.iframeRef;');
+            activeItem.iframeRef?.focus();
+
+            // 将焦点传递给 iframe 内部内容
+            const iframeWindow = activeItem.iframeRef?.contentWindow;
+            iframeWindow.postMessage({ type: 'focus' }, '*');
+          }
         }
       });
     });
@@ -1823,6 +1834,12 @@ export default defineComponent({
                           src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                             m.content
                           )}`}
+                          onLoad={(e: any) => {
+                            nextTick(() => {
+                              console.log(e, 'ppt', e.target);
+                              m.iframeRef = e.target;
+                            });
+                          }}
                           width="100%"
                           height="100%"
                           frameborder="1"></iframe>

src/views/attend-class/model/train-type/index.module.less

@@ -229,8 +229,8 @@
     top: 8px;
     right: 10px;
     z-index: 98;
-    opacity: 0;
-    visibility: hidden;
+    // opacity: 0;
+    // visibility: hidden;
     transition: all .2s ease;
     width: 27px;
     height: 27px;
@@ -425,4 +425,4 @@
 .reportModel {
   width: 1200px;
   overflow: hidden;
-}
+}

src/views/home/index.tsx

@@ -100,10 +100,20 @@ export default defineComponent({
             <div class={styles.homeUserInfo}>
               <i class={styles.homeTag}></i>
               <div class={styles.homeUsers}>
-                <NImage
-                  src={userStore.getUserInfo?.avatar || defultHeade}
-                  class={styles.userImg}
-                />
+                <div
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    router.push({
+                      path: '/setting',
+                      query: { activeTab: 'person' }
+                    });
+                  }}>
+                  <NImage
+                    src={userStore.getUserInfo?.avatar || defultHeade}
+                    class={styles.userImg}
+                    previewDisabled
+                  />
+                </div>
                 <p class={styles.userName}>
                   Hi，{userStore.getUserInfo?.nickname} {formatDateToDay()}～
                 </p>

src/views/home/modals/class-modal/index.module.less

@@ -1,203 +1,209 @@
-.rightTeachingWrap {
-  overflow: hidden;
-  flex: 1;
-  background-color: #fff;
-  padding: 10px 0 30px;
-  border-radius: 20px;
-
-  .rightTeachingWrapTitle {
-    display: flex;
-    flex-direction: row;
-    // align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
-
-    .lookMore {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      min-width: 114px;
-      border-radius: 8px;
-      border: 1px solid #DEDEDE;
-      font-size: 15px;
-      color: #131415;
-      padding: 7px 12px;
-
-      svg {
-        margin-left: 8px;
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .classSearchList {
-      display: flex;
-      gap: 12px;
-
-      :global {
-        .n-base-selection {
-          --n-height: 35px !important;
-          --n-font-size: 12Px !important;
-          --n-border: 1px solid #DEDEDE !important;
-          --n-border-radius: 8px !important;
-          max-width: 150px;
-        }
-      }
-    }
-  }
-}
-
-:global {
-  .n-base-select-menu .n-base-select-option.n-base-select-option--show-checkmark {
-    padding-right: var(--n-option-padding);
-  }
-
-  .n-empty {
-    --n-font-size: max(16px, 12Px) !important;
-  }
-}
-
-.teachListWrap {
-  position: relative;
-
-
-}
-
-.teachListWrapWall {
-  position: absolute;
-  bottom: 0;
-  height: 159px;
-  width: 100%;
-  background: linear-gradient(180deg,
-      rgba(255, 255, 255, 0) 0%,
-      #ffffff 100%);
-  border-radius: 0px 0px 20px 20px;
-
-  span {
-    position: absolute;
-    bottom: 17px;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    color: #1677FF;
-    font-size: max(16px, 13Px);
-    cursor: pointer;
-
-    &::after {
-      content: ' ';
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      background: url('../../images/blueArrow.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-}
-
-.teachGroup {
-  margin-top: 12px;
-
-  .teachGroupTitle {
-    position: relative;
-    left: -10px;
-    font-size: 14Px;
-    font-weight: 400;
-    color: #aaaaaa;
-    width: 60px;
-    text-align: center;
-    margin-bottom: 12px;
-  }
-
-  .teachGroupList {
-    padding-bottom: 12px;
-    margin-left: 20px;
-    border-left: 1px solid #d1e8ff;
-    min-height: 92px;
-    position: relative;
-
-    .teachGroupListDot {
-      width: 15px;
-      height: 15px;
-      background: #198cfe;
-      border: 4px solid #d1e8ff;
-      border-radius: 50%;
-      top: 28px;
-      left: -8px;
-      position: absolute;
-    }
-  }
-
-  .teachGroupItemWrap {
-    margin-left: 28px;
-    background: #f7f9ff;
-    border-radius: 12px;
-    display: flex;
-    flex-direction: row;
-    align-items: top;
-
-    &:nth-last-of-type(1) {
-      margin-bottom: 0;
-    }
-
-    margin-bottom: 12px;
-    padding: 10px;
-
-    .teachGroupItemLeft {
-      margin-right: 12px;
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      overflow: hidden;
-      border: 2px solid #198cfe;
-
-      .teachGroupItemHeader {
-        border: 2px solid #fff;
-        border-radius: 50%;
-        overflow: hidden;
-
-        img {
-          width: 44px;
-          height: 44px;
-        }
-      }
-    }
-
-    .teachGroupItemRight {
-      flex: 1;
-
-      .teachGroupItemName {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 16px;
-        margin-top: 2px;
-        font-weight: 600;
-        color: #131415;
-
-        span {
-          font-size: 13px;
-          font-weight: 400;
-          color: #1677ff;
-          line-height: 18px;
-        }
-      }
-
-      .teachGroupItemInfo {
-        font-size: 13px;
-        line-height: 26px;
-        color: rgba(0, 0, 0, 0.5);
-      }
-
-      .subjectName {
-        font-size: 14px;
-        font-weight: 400;
-        color: #FFFFFF;
-        background: #198CFE;
-        border-radius: 5px;
-        padding: 1px 8px;
-        margin-right: 4px;
-      }
-    }
-  }
-}
+.rightTeachingWrap {
+  overflow: hidden;
+  flex: 1;
+  background-color: #fff;
+  padding: 10px 0 20px;
+  border-radius: 20px;
+
+  .rightTeachingWrapTitle {
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+
+    .lookMore {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      min-width: 114px;
+      border-radius: 8px;
+      border: 1px solid #DEDEDE;
+      font-size: 15px;
+      color: #131415;
+      padding: 7px 12px;
+
+      svg {
+        margin-left: 8px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .classSearchList {
+      display: flex;
+      gap: 12px;
+
+      :global {
+        .n-base-selection {
+          --n-height: 35px !important;
+          --n-font-size: 12Px !important;
+          --n-border: 1px solid #DEDEDE !important;
+          --n-border-radius: 8px !important;
+          max-width: 150px;
+        }
+      }
+    }
+  }
+
+  .emptySection {
+    min-height: 40vh;
+    display: flex;
+    align-items: center;
+  }
+}
+
+:global {
+  .n-base-select-menu .n-base-select-option.n-base-select-option--show-checkmark {
+    padding-right: var(--n-option-padding);
+  }
+
+  .n-empty {
+    --n-font-size: max(16px, 12Px) !important;
+  }
+}
+
+.teachListWrap {
+  position: relative;
+
+
+}
+
+.teachListWrapWall {
+  position: absolute;
+  bottom: 0;
+  height: 159px;
+  width: 100%;
+  background: linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 100%);
+  border-radius: 0px 0px 20px 20px;
+
+  span {
+    position: absolute;
+    bottom: 17px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #1677FF;
+    font-size: max(16px, 13Px);
+    cursor: pointer;
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: url('../../images/blueArrow.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
+.teachGroup {
+  margin-top: 12px;
+
+  .teachGroupTitle {
+    position: relative;
+    left: -10px;
+    font-size: 14Px;
+    font-weight: 400;
+    color: #aaaaaa;
+    width: 60px;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+
+  .teachGroupList {
+    padding-bottom: 12px;
+    margin-left: 20px;
+    border-left: 1px solid #d1e8ff;
+    min-height: 92px;
+    position: relative;
+
+    .teachGroupListDot {
+      width: 15px;
+      height: 15px;
+      background: #198cfe;
+      border: 4px solid #d1e8ff;
+      border-radius: 50%;
+      top: 28px;
+      left: -8px;
+      position: absolute;
+    }
+  }
+
+  .teachGroupItemWrap {
+    margin-left: 28px;
+    background: #f7f9ff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: top;
+
+    &:nth-last-of-type(1) {
+      margin-bottom: 0;
+    }
+
+    margin-bottom: 12px;
+    padding: 10px;
+
+    .teachGroupItemLeft {
+      margin-right: 12px;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      overflow: hidden;
+      border: 2px solid #198cfe;
+
+      .teachGroupItemHeader {
+        border: 2px solid #fff;
+        border-radius: 50%;
+        overflow: hidden;
+
+        img {
+          width: 44px;
+          height: 44px;
+        }
+      }
+    }
+
+    .teachGroupItemRight {
+      flex: 1;
+
+      .teachGroupItemName {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 16px;
+        margin-top: 2px;
+        font-weight: 600;
+        color: #131415;
+
+        span {
+          font-size: 13px;
+          font-weight: 400;
+          color: #1677ff;
+          line-height: 18px;
+        }
+      }
+
+      .teachGroupItemInfo {
+        font-size: 13px;
+        line-height: 26px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+
+      .subjectName {
+        font-size: 14px;
+        font-weight: 400;
+        color: #FFFFFF;
+        background: #198CFE;
+        border-radius: 5px;
+        padding: 1px 8px;
+        margin-right: 4px;
+      }
+    }
+  }
+}

src/views/home/modals/class-modal/index.tsx

@@ -1,342 +1,346 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { useUserStore } from '/src/store/modules/users';
-import { useRouter } from 'vue-router';
-import { NSelect, NSpin } from 'naive-ui';
-import {
-  classGroupList,
-  courseSchedulePage,
-  getGradeLevelList,
-  getGradeYearList
-} from '../../api';
-import dayjs from 'dayjs';
-import TeachGroup from '../teachGroup';
-import TheEmpty from '/src/components/TheEmpty';
-import { gradeToCN } from '/src/utils/contants';
-
-export default defineComponent({
-  name: 'class-modal',
-  emits: ['confirm'],
-  setup(props, { emit }) {
-    const router = useRouter();
-    const userStore = useUserStore();
-    const forms = reactive({
-      showAttendClass: false,
-      // useStatus: false,
-      studentList: [] as any,
-      bookVersionId: null,
-      classGroupId: null,
-      category: null,
-      subjectId: null,
-      musicTagList: [] as any,
-      loading: false,
-      list: [] as any,
-      unit: null,
-      unitList: [],
-      subjectList: [] as any,
-      gradeList: [] as any,
-      classLoading: false,
-      total: 0, // 上课数量
-      // 上次上课的数据
-      lastClassSelect: {
-        currentClass: null,
-        name: '',
-        upgradeFlag: false, // 是否为历史班
-        gradeYear: null as any,
-        gradeLevel: null as any
-      },
-      classSelect: {
-        currentGradeNum: null,
-        currentClass: null,
-        name: '',
-        upgradeFlag: false, // 是否为历史班
-        gradeLevel: null as any,
-        gradeYear: null
-      } as any,
-      popSelectOptions: [] as any,
-      popSelectYearList: [] as any,
-      popSelectLevelList: [] as any,
-      showGuide: false,
-      showPreview: false,
-      itemPreview: {} as any,
-      homeLeftHeight: 'auto'
-    });
-    const teachList = ref({} as any);
-
-    // 获取年级班级
-    const getClassList = async () => {
-      try {
-        const { data } = await classGroupList({
-          gradeLevel: forms.classSelect.gradeLevel,
-          gradeYear: forms.classSelect.gradeYear
-        });
-        const cList = data || [];
-        const gradeList: any = [];
-        const popSelectOptions: any = [];
-        // getLastClassRecode()
-        cList.forEach((item: any, index: number) => {
-          // 判断是否已经有班级了
-          if (index === 0) {
-            if (forms.lastClassSelect.currentClass) {
-              forms.classSelect.currentClass =
-                forms.lastClassSelect.currentClass;
-              forms.classSelect.name = forms.lastClassSelect.name;
-              forms.classSelect.upgradeFlag = forms.lastClassSelect.upgradeFlag;
-            } else {
-              const temp = item.classGroupList[0];
-              forms.classSelect.currentGradeNum = item.currentGradeNum;
-              forms.classSelect.currentClass = temp.id;
-              forms.classSelect.name = temp.name;
-            }
-          }
-
-          const classList: any = [];
-          item.classGroupList.forEach((i: any) => {
-            classList.push({
-              label: i.currentClass + '班',
-              value: i.id,
-              lastStudy: i.lastStudy
-            });
-
-            popSelectOptions.push({
-              label: i.name,
-              value: i.id,
-              currentGradeNum: item.currentGradeNum,
-              lastStudy: i.lastStudy
-            });
-          });
-
-          gradeList.push({
-            label: gradeToCN[item.currentGradeNum],
-            value: item.currentGradeNum,
-            childrens: classList
-          });
-        });
-        forms.popSelectOptions = popSelectOptions;
-        forms.gradeList = gradeList;
-      } catch {
-        //
-      }
-    };
-    const getLastClassRecode = async () => {
-      const { data } = await courseSchedulePage({
-        page: 1,
-        rows: 1,
-        teacherId: userStore.getUserInfo.id
-      });
-      if (data.rows.length > 0 && data.rows[0]) {
-        const tempRow = data.rows[0];
-        // forms.lastClassSelect.currentClass = tempRow.classGroupId;
-        // forms.lastClassSelect.name = tempRow.classGroupName;
-        forms.lastClassSelect = {
-          currentClass: tempRow.classGroupId,
-          name: tempRow.classGroupName,
-          upgradeFlag: tempRow.upgradeFlag,
-          gradeYear: tempRow.gradeYear + '',
-          gradeLevel: tempRow.gradeLevel + ''
-        };
-      }
-    };
-
-    // 获取学年
-    const getYearList = async () => {
-      try {
-        const { data } = await getGradeYearList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '学年';
-        });
-        forms.popSelectYearList = temp || [];
-        if (temp.length > 0) {
-          if (forms.lastClassSelect.gradeYear) {
-            forms.classSelect.gradeYear = forms.lastClassSelect.gradeYear;
-          } else {
-            forms.classSelect.gradeYear = temp[0].id;
-          }
-        }
-      } catch (e: any) {
-        //
-      }
-    };
-    // 获取学级
-    const getLevelList = async () => {
-      try {
-        const { data } = await getGradeLevelList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '级';
-        });
-        temp.unshift({
-          id: '',
-          name: '全部学级'
-        });
-        forms.popSelectLevelList = temp || [];
-        if (temp.length > 0) {
-          if (forms.lastClassSelect.gradeLevel) {
-            forms.classSelect.gradeLevel =
-              forms.lastClassSelect.gradeLevel + '';
-          } else {
-            forms.classSelect.gradeLevel = temp[0].id;
-          }
-        }
-      } catch {
-        //
-      }
-    };
-
-    const getCourseSchedulePage = async () => {
-      forms.classLoading = true;
-      try {
-        const { data } = await courseSchedulePage({
-          classGroupId: forms.classSelect.currentClass,
-          gradeLevel: forms.classSelect.gradeLevel,
-          gradeYear: forms.classSelect.gradeYear,
-          page: 1,
-          rows: 4,
-          teacherId: userStore.getUserInfo.id
-        });
-
-        const result = data.rows || [];
-        forms.total = data.total || 0;
-        const dateTime: any = {};
-        result.forEach((item: any) => {
-          const tempTime = dayjs(item.classDate).format('MM-DD');
-          if (!dateTime[tempTime]) {
-            dateTime[tempTime] = [];
-          }
-
-          const lessonCourseware = item.lessonCoursewareJson
-            ? JSON.parse(item.lessonCoursewareJson)
-            : {};
-          dateTime[tempTime].push({
-            classGroup: forms.classSelect.name,
-            teacherName: item.teacherName,
-            conent:
-              lessonCourseware.lessonCoursewareName +
-              ' | ' +
-              lessonCourseware.lessonCoursewareDetailName +
-              ' | ' +
-              lessonCourseware.lessonCoursewareKnowledgeDetailName +
-              ' | ' +
-              (lessonCourseware.useChapterLessonCoursewareName || ''),
-            image: item.teacherAvatar,
-            subjectName: item.instrumentName
-          });
-        });
-
-        teachList.value = dateTime;
-      } catch (e: any) {
-        //
-        console.log(e);
-      }
-
-      forms.classLoading = false;
-    };
-
-    onMounted(async () => {
-      forms.classLoading = true;
-      await getLastClassRecode();
-
-      await getYearList();
-      await getLevelList();
-      await getClassList();
-      // await catchStore.getSubjects();
-
-      await getCourseSchedulePage();
-      forms.classLoading = false;
-    });
-    return () => (
-      <div>
-        <div class={styles.rightTeachingWrap}>
-          <div class={styles.rightTeachingWrapTitle}>
-            <div class={styles.classSearchList}>
-              <NSelect
-                v-model:value={forms.classSelect.gradeYear}
-                class={styles.lookMoreSearch}
-                placeholder="全部学年"
-                options={forms.popSelectYearList}
-                labelField="name"
-                valueField="id"
-                onUpdate:value={async (val: any) => {
-                  forms.classSelect.gradeYear = val;
-                  forms.lastClassSelect.currentClass = null;
-                  forms.classSelect.currentClass = null;
-                  await getClassList();
-                  await getCourseSchedulePage();
-                }}></NSelect>
-              <NSelect
-                v-model:value={forms.classSelect.gradeLevel}
-                class={styles.lookMoreSearch}
-                placeholder="全部学级"
-                options={forms.popSelectLevelList}
-                labelField="name"
-                valueField="id"
-                onUpdate:value={async (val: any) => {
-                  forms.classSelect.gradeLevel = val;
-                  forms.lastClassSelect.currentClass = null;
-                  forms.classSelect.currentClass = null;
-                  await getClassList();
-                  await getCourseSchedulePage();
-                }}></NSelect>
-              <NSelect
-                v-model:value={forms.classSelect.currentClass}
-                class={styles.lookMoreSearch}
-                placeholder="选择班级"
-                options={forms.popSelectOptions}
-                onUpdate:value={(val: any) => {
-                  forms.popSelectOptions.forEach((item: any) => {
-                    if (item.value === val) {
-                      forms.classSelect.currentGradeNum = item.currentGradeNum;
-                      forms.classSelect.currentClass = item.value;
-                      forms.classSelect.name = item.label;
-                      forms.classSelect.upgradeFlag = item.upgradeFlag;
-                      getCourseSchedulePage();
-                    }
-                  });
-                }}></NSelect>
-            </div>
-          </div>
-          <NSpin show={forms.classLoading} style={{ minHeight: '40vh' }}>
-            {Object.keys(teachList.value).length > 0 && (
-              <div class={styles.teachListWrap}>
-                {Object.keys(teachList.value).map(key => (
-                  <TeachGroup
-                    list={teachList.value[key]}
-                    keys={key}></TeachGroup>
-                ))}
-              </div>
-            )}
-
-            {Object.keys(teachList.value).length <= 0 &&
-              !forms.classLoading && <TheEmpty />}
-          </NSpin>
-
-          {forms.total > 4 && (
-            <div class={styles.teachListWrapWall}>
-              <span
-                onClick={() => {
-                  // setTabsCaches('attendclass', 'tabName', {
-                  //   path: '/classDetail'
-                  // });
-                  emit('confirm');
-                  sessionStorage.setItem('classDetailTabs', 'attendclass');
-                  router.push({
-                    path: '/classDetail',
-                    query: {
-                      name: forms.classSelect.name,
-                      id: forms.classSelect.currentClass,
-                      gradeYear: forms.classSelect.gradeYear,
-                      upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0, // 是否为历史班
-                      v: +new Date()
-                    }
-                  });
-                }}>
-                查看全部
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { useUserStore } from '/src/store/modules/users';
+import { useRouter } from 'vue-router';
+import { NSelect, NSpin } from 'naive-ui';
+import {
+  classGroupList,
+  courseSchedulePage,
+  getGradeLevelList,
+  getGradeYearList
+} from '../../api';
+import dayjs from 'dayjs';
+import TeachGroup from '../teachGroup';
+import TheEmpty from '/src/components/TheEmpty';
+import { gradeToCN } from '/src/utils/contants';
+
+export default defineComponent({
+  name: 'class-modal',
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const forms = reactive({
+      showAttendClass: false,
+      // useStatus: false,
+      studentList: [] as any,
+      bookVersionId: null,
+      classGroupId: null,
+      category: null,
+      subjectId: null,
+      musicTagList: [] as any,
+      loading: false,
+      list: [] as any,
+      unit: null,
+      unitList: [],
+      subjectList: [] as any,
+      gradeList: [] as any,
+      classLoading: false,
+      total: 0, // 上课数量
+      // 上次上课的数据
+      lastClassSelect: {
+        currentClass: null,
+        name: '',
+        upgradeFlag: false, // 是否为历史班
+        gradeYear: null as any,
+        gradeLevel: null as any
+      },
+      classSelect: {
+        currentGradeNum: null,
+        currentClass: null,
+        name: '',
+        upgradeFlag: false, // 是否为历史班
+        gradeLevel: null as any,
+        gradeYear: null
+      } as any,
+      popSelectOptions: [] as any,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any,
+      showGuide: false,
+      showPreview: false,
+      itemPreview: {} as any,
+      homeLeftHeight: 'auto'
+    });
+    const teachList = ref({} as any);
+
+    // 获取年级班级
+    const getClassList = async () => {
+      try {
+        const { data } = await classGroupList({
+          gradeLevel: forms.classSelect.gradeLevel,
+          gradeYear: forms.classSelect.gradeYear
+        });
+        const cList = data || [];
+        const gradeList: any = [];
+        const popSelectOptions: any = [];
+        // getLastClassRecode()
+        cList.forEach((item: any, index: number) => {
+          // 判断是否已经有班级了
+          if (index === 0) {
+            if (forms.lastClassSelect.currentClass) {
+              forms.classSelect.currentClass =
+                forms.lastClassSelect.currentClass;
+              forms.classSelect.name = forms.lastClassSelect.name;
+              forms.classSelect.upgradeFlag = forms.lastClassSelect.upgradeFlag;
+            } else {
+              const temp = item.classGroupList[0];
+              forms.classSelect.currentGradeNum = item.currentGradeNum;
+              forms.classSelect.currentClass = temp.id;
+              forms.classSelect.name = temp.name;
+            }
+          }
+
+          const classList: any = [];
+          item.classGroupList.forEach((i: any) => {
+            classList.push({
+              label: i.currentClass + '班',
+              value: i.id,
+              lastStudy: i.lastStudy
+            });
+
+            popSelectOptions.push({
+              label: i.name,
+              value: i.id,
+              currentGradeNum: item.currentGradeNum,
+              lastStudy: i.lastStudy
+            });
+          });
+
+          gradeList.push({
+            label: gradeToCN[item.currentGradeNum],
+            value: item.currentGradeNum,
+            childrens: classList
+          });
+        });
+        forms.popSelectOptions = popSelectOptions;
+        forms.gradeList = gradeList;
+      } catch {
+        //
+      }
+    };
+    const getLastClassRecode = async () => {
+      const { data } = await courseSchedulePage({
+        page: 1,
+        rows: 1,
+        teacherId: userStore.getUserInfo.id
+      });
+      if (data.rows.length > 0 && data.rows[0]) {
+        const tempRow = data.rows[0];
+        // forms.lastClassSelect.currentClass = tempRow.classGroupId;
+        // forms.lastClassSelect.name = tempRow.classGroupName;
+        forms.lastClassSelect = {
+          currentClass: tempRow.classGroupId,
+          name: tempRow.classGroupName,
+          upgradeFlag: tempRow.upgradeFlag,
+          gradeYear: tempRow.gradeYear + '',
+          gradeLevel: tempRow.gradeLevel + ''
+        };
+      }
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        forms.popSelectYearList = temp || [];
+        if (temp.length > 0) {
+          if (forms.lastClassSelect.gradeYear) {
+            forms.classSelect.gradeYear = forms.lastClassSelect.gradeYear;
+          } else {
+            forms.classSelect.gradeYear = temp[0].id;
+          }
+        }
+      } catch (e: any) {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        forms.popSelectLevelList = temp || [];
+        if (temp.length > 0) {
+          if (forms.lastClassSelect.gradeLevel) {
+            forms.classSelect.gradeLevel =
+              forms.lastClassSelect.gradeLevel + '';
+          } else {
+            forms.classSelect.gradeLevel = temp[0].id;
+          }
+        }
+      } catch {
+        //
+      }
+    };
+
+    const getCourseSchedulePage = async () => {
+      forms.classLoading = true;
+      try {
+        const { data } = await courseSchedulePage({
+          classGroupId: forms.classSelect.currentClass,
+          gradeLevel: forms.classSelect.gradeLevel,
+          gradeYear: forms.classSelect.gradeYear,
+          page: 1,
+          rows: 4,
+          teacherId: userStore.getUserInfo.id
+        });
+
+        const result = data.rows || [];
+        forms.total = data.total || 0;
+        const dateTime: any = {};
+        result.forEach((item: any) => {
+          const tempTime = dayjs(item.classDate).format('MM-DD');
+          if (!dateTime[tempTime]) {
+            dateTime[tempTime] = [];
+          }
+
+          const lessonCourseware = item.lessonCoursewareJson
+            ? JSON.parse(item.lessonCoursewareJson)
+            : {};
+          dateTime[tempTime].push({
+            classGroup: forms.classSelect.name,
+            teacherName: item.teacherName,
+            conent:
+              lessonCourseware.lessonCoursewareName +
+              ' | ' +
+              lessonCourseware.lessonCoursewareDetailName +
+              ' | ' +
+              lessonCourseware.lessonCoursewareKnowledgeDetailName +
+              ' | ' +
+              (lessonCourseware.useChapterLessonCoursewareName || ''),
+            image: item.teacherAvatar,
+            subjectName: item.instrumentName
+          });
+        });
+
+        teachList.value = dateTime;
+      } catch (e: any) {
+        //
+        console.log(e);
+      }
+
+      forms.classLoading = false;
+    };
+
+    onMounted(async () => {
+      forms.classLoading = true;
+      await getLastClassRecode();
+
+      await getYearList();
+      await getLevelList();
+      await getClassList();
+      // await catchStore.getSubjects();
+
+      await getCourseSchedulePage();
+      forms.classLoading = false;
+    });
+    return () => (
+      <div>
+        <div class={styles.rightTeachingWrap}>
+          <div class={styles.rightTeachingWrapTitle}>
+            <div class={styles.classSearchList}>
+              <NSelect
+                v-model:value={forms.classSelect.gradeYear}
+                class={styles.lookMoreSearch}
+                placeholder="全部学年"
+                options={forms.popSelectYearList}
+                labelField="name"
+                valueField="id"
+                onUpdate:value={async (val: any) => {
+                  forms.classSelect.gradeYear = val;
+                  forms.lastClassSelect.currentClass = null;
+                  forms.classSelect.currentClass = null;
+                  await getClassList();
+                  await getCourseSchedulePage();
+                }}></NSelect>
+              <NSelect
+                v-model:value={forms.classSelect.gradeLevel}
+                class={styles.lookMoreSearch}
+                placeholder="全部学级"
+                options={forms.popSelectLevelList}
+                labelField="name"
+                valueField="id"
+                onUpdate:value={async (val: any) => {
+                  forms.classSelect.gradeLevel = val;
+                  forms.lastClassSelect.currentClass = null;
+                  forms.classSelect.currentClass = null;
+                  await getClassList();
+                  await getCourseSchedulePage();
+                }}></NSelect>
+              <NSelect
+                v-model:value={forms.classSelect.currentClass}
+                class={styles.lookMoreSearch}
+                placeholder="选择班级"
+                options={forms.popSelectOptions}
+                onUpdate:value={(val: any) => {
+                  forms.popSelectOptions.forEach((item: any) => {
+                    if (item.value === val) {
+                      forms.classSelect.currentGradeNum = item.currentGradeNum;
+                      forms.classSelect.currentClass = item.value;
+                      forms.classSelect.name = item.label;
+                      forms.classSelect.upgradeFlag = item.upgradeFlag;
+                      getCourseSchedulePage();
+                    }
+                  });
+                }}></NSelect>
+            </div>
+          </div>
+          <NSpin show={forms.classLoading} style={{ minHeight: '40vh' }}>
+            {Object.keys(teachList.value).length > 0 && (
+              <div class={styles.teachListWrap}>
+                {Object.keys(teachList.value).map(key => (
+                  <TeachGroup
+                    list={teachList.value[key]}
+                    keys={key}></TeachGroup>
+                ))}
+              </div>
+            )}
+
+            {Object.keys(teachList.value).length <= 0 &&
+              !forms.classLoading && (
+                <div class={styles.emptySection}>
+                  <TheEmpty />
+                </div>
+              )}
+          </NSpin>
+
+          {forms.total > 4 && (
+            <div class={styles.teachListWrapWall}>
+              <span
+                onClick={() => {
+                  // setTabsCaches('attendclass', 'tabName', {
+                  //   path: '/classDetail'
+                  // });
+                  emit('confirm');
+                  sessionStorage.setItem('classDetailTabs', 'attendclass');
+                  router.push({
+                    path: '/classDetail',
+                    query: {
+                      name: forms.classSelect.name,
+                      id: forms.classSelect.currentClass,
+                      gradeYear: forms.classSelect.gradeYear,
+                      upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0, // 是否为历史班
+                      v: +new Date()
+                    }
+                  });
+                }}>
+                查看全部
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+});

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

@@ -249,10 +249,7 @@ export default defineComponent({
                     <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
                   </h2>
                   <div class={styles.subjects}>
-                    <TheNoticeBar
-                      text={formatInstrumentNames.value}
-                      time={formatInstrumentNames.value.length > 15 ? 10 : 5}
-                    />
+                    <TheNoticeBar text={formatInstrumentNames.value} />
                   </div>
                   <div
                     class={styles.changeDir}

src/views/prepare-lessons/components/directory-main/select-lessonware/index.module.less

@@ -200,7 +200,7 @@
 
   .itemName {
     margin-top: 16px;
-    font-size: 16px;
+    font-size: max(16px, 13Px);
     font-weight: 600;
     color: #131415;
     text-align: center;
@@ -245,4 +245,4 @@
       }
     }
   }
-}
+}

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

@@ -40,7 +40,7 @@ export default defineComponent({
       default: 'relateResources'
     }
   },
-  setup(props) {
+  setup(props, { expose }) {
     const prepareStore = usePrepareStore();
     const message = useMessage();
     const dialog = useDialog();
@@ -204,6 +204,15 @@ export default defineComponent({
     onUnmounted(() => {
       eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
+
+    const getParams = () => {
+      return state.searchGroup;
+    };
+
+    expose({
+      getParams
+    });
+
     return () => (
       <div>
         <ResourceSearchGroup

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

@@ -45,8 +45,14 @@ export default defineComponent({
       selectMusicStatus: false,
       selectResourceStatus: false,
       editStatus: false,
-      editItem: {} as any
+      editItem: {} as any,
+      searchGroup: {} as any
     });
+    const relateResourcesRef = ref();
+    const shareResourcesRef = ref();
+    const myResourcesRef = ref();
+    const myCollectRef = ref();
+
     const tabRef = ref();
     const workRef = ref();
 
@@ -156,6 +162,17 @@ export default defineComponent({
                 <div
                   class={styles.iconScreen}
                   onClick={() => {
+                    let searchGroup: any = {};
+                    if (forms.tabType === 'relateResources') {
+                      searchGroup = relateResourcesRef.value?.getParams();
+                    } else if (forms.tabType === 'shareResources') {
+                      searchGroup = shareResourcesRef.value?.getParams();
+                    } else if (forms.tabType === 'myResources') {
+                      searchGroup = myResourcesRef.value?.getParams();
+                    } else if (forms.tabType === 'myCollect') {
+                      searchGroup = myCollectRef.value?.getParams();
+                    }
+                    forms.searchGroup = searchGroup;
                     forms.selectResourceStatus = true;
                     prepareStore.setSelectResourceStatus(true);
                   }}>
@@ -171,21 +188,27 @@ export default defineComponent({
               default: () => (
                 <>
                   <NTabPane name="relateResources" tab="相关资源">
-                    <ResourceItem type="relateResources" />
+                    <ResourceItem
+                      type="relateResources"
+                      ref={relateResourcesRef}
+                    />
                   </NTabPane>
                   <NTabPane
                     name="shareResources"
                     tab="共享资源"
                     // displayDirective="show:lazy"
                   >
-                    <ResourceItem type="shareResources" />
+                    <ResourceItem
+                      type="shareResources"
+                      ref={shareResourcesRef}
+                    />
                   </NTabPane>
                   <NTabPane
                     name="myResources"
                     tab="我的资源"
                     // displayDirective="show:lazy"
                   >
-                    <ResourceItem type="myResources" />
+                    <ResourceItem type="myResources" ref={myResourcesRef} />
                   </NTabPane>
 
                   <NTabPane
@@ -193,7 +216,7 @@ export default defineComponent({
                     tab="我的收藏"
                     // displayDirective="show:lazy"
                   >
-                    <ResourceItem type="myCollect" />
+                    <ResourceItem type="myCollect" ref={myCollectRef} />
                   </NTabPane>
                 </>
               )
@@ -265,7 +288,10 @@ export default defineComponent({
           class={['modalTitle', styles.selectMusicModal]}
           preset="card"
           title={'选择资源'}>
-          <SelectResources type={forms.tabType} />
+          <SelectResources
+            type={forms.tabType}
+            searchGroup={forms.searchGroup}
+          />
         </NModal>
 
         <NModal

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

@@ -12,6 +12,10 @@ export default defineComponent({
       type: String,
       default: 'myResources'
     },
+    searchGroup: {
+      type: Object,
+      default: () => ({})
+    },
     /** 从哪里使用 */
     from: {
       type: String,
@@ -57,22 +61,37 @@ export default defineComponent({
           }}>
           {props.from !== 'class' && (
             <NTabPane name="relateResources" tab={'相关资源'}>
-              <SelectItem type="relateResources" />
+              <SelectItem
+                type="relateResources"
+                searchGroup={props.searchGroup}
+              />
             </NTabPane>
           )}
           <NTabPane
             name="shareResources"
             tab={props.from === 'class' ? '共享曲目' : '共享资源'}>
-            <SelectItem type="shareResources" from={props.from} />
+            <SelectItem
+              type="shareResources"
+              from={props.from}
+              searchGroup={props.searchGroup}
+            />
           </NTabPane>
           <NTabPane
             name="myResources"
             tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
-            <SelectItem type="myResources" from={props.from} />
+            <SelectItem
+              type="myResources"
+              from={props.from}
+              searchGroup={props.searchGroup}
+            />
           </NTabPane>
 
           <NTabPane name="myCollect" tab="我的收藏">
-            <SelectItem type="myCollect" from={props.from} />
+            <SelectItem
+              type="myCollect"
+              from={props.from}
+              searchGroup={props.searchGroup}
+            />
           </NTabPane>
         </NTabs>
       </div>

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

@@ -40,6 +40,10 @@ export default defineComponent({
       >,
       default: 'shareResources'
     },
+    searchGroup: {
+      type: Object,
+      default: () => ({})
+    },
     /** 从哪里使用 */
     from: {
       type: String,

src/views/prepare-lessons/model/source-rhythm/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
       userStore.getToken
     }&platform=modal`;
     if (/(localhost|192)/.test(location.host)) {
-      src = `http://192.168.3.220:9002/#/tempo-practice?v=${Date.now()}&Authorization=${
+      src = `http://localhost:9002/#/tempo-practice?v=${Date.now()}&Authorization=${
         userStore.getToken
       }&platform=modal`;
     }

src/views/setting/components/personInfo.tsx

@@ -99,22 +99,22 @@ export default defineComponent({
               src={teacherForm.avatar || defultHeade}></NImage>
             <div
               // style={{ display: data.disabled ? 'none' : '' }}
-              class={[
-                styles.defultHeade,
-                styles.changeHead,
-                data.disabled ? styles.disalbedNone : styles.hoverNone
-              ]}>
+              class={[styles.defultHeade, styles.changeHead, styles.hoverNone]}>
               修改头像
               {data.uploadShow && (
                 <UploadFile
                   class={[styles.uploadFile]}
                   cropper
-                  onUpdate:fileList={val => {
+                  onUpdate:fileList={async val => {
                     teacherForm.avatar = val;
                     data.uploadShow = false;
                     setTimeout(() => {
                       data.uploadShow = true;
                     }, 100);
+
+                    await api_teacherUpdate(teacherForm);
+                    console.log(teacherForm);
+                    userStore.getInfo();
                   }}
                 />
               )}

src/views/setting/components/schoolInfo/index.module.less

@@ -150,21 +150,21 @@
 }
 
 .addTeacher {
-  padding: 0;
-  border-radius: 16px;
-  overflow: hidden;
-  min-width: 456px;
+  // padding: 0;
+  // border-radius: 16px;
+  // overflow: hidden;
+  width: 556px;
 
   :global {
-    .n-dialog__close {
-      transform: translate(0, 3px);
-    }
+    // .n-dialog__close {
+    //   transform: translate(0, 3px);
+    // }
 
-    .n-dialog__title {
-      min-height: 70px;
-      justify-content: center;
-      background: #F5F6FA;
-    }
+    // .n-dialog__title {
+    //   min-height: 70px;
+    //   justify-content: center;
+    //   background: #F5F6FA;
+    // }
 
     .n-form {
       padding: 20px 0;
@@ -231,7 +231,7 @@
 
       .n-alert-body .n-alert-body__content {
         color: #EA4132;
-        font-size: 14px;
+        font-size: calc(14px, 12Px);
       }
 
     }
@@ -488,4 +488,4 @@
       cursor: pointer;
     }
   }
-}
+}

src/views/setting/components/schoolInfo/index.tsx

@@ -442,12 +442,13 @@ export default defineComponent({
           columns={columns()}
           data={data.dataList}></NDataTable>
 
+        {/* class={styles.addTeacher} */}
         <NModal
           maskClosable={modalClickMask}
-          class={styles.addTeacher}
+          class={['modalTitle background', styles.addTeacher]}
           v-model:show={data.modal}
           title="添加老师"
-          preset="dialog"
+          preset="card"
           showIcon={false}>
           <AddTeacher
             areaList={formOptions.areaList}

src/views/xiaoku-ai/index.module.less

@@ -49,6 +49,15 @@
     padding: 12px 0;
 
     :global {
+      .n-form-item-label {
+        height: 37px;
+        min-height: 37px;
+      }
+
+      .n-form-item-feedback-wrapper {
+        min-height: 0;
+      }
+
       .n-button {
         min-width: 102px;
         height: 37px;
@@ -247,4 +256,4 @@
       margin-top: 0;
     }
   }
-}
+}

src/views/xiaoku-ai/index.tsx

@@ -1,7 +1,15 @@
 import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue';
 import styles from './index.module.less';
 import TheSearch from '@/components/TheSearch';
-import { NButton, NImage, NPopselect, NSpace, NSpin } from 'naive-ui';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace,
+  NSpin
+} from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
 import TheEmpty from '/src/components/TheEmpty';
@@ -75,12 +83,10 @@ const ChildNodeSearch = defineComponent({
       <>
         {activeRow.value?.id && (
           <>
-            <div class={styles.tags}>
+            <NFormItem
+              label={activeRow.value.columnName + '：'}
+              class={styles.tags}>
               <NSpace size={[12, 8]}>
-                <span class={styles.firstButton}>
-                  {activeRow.value.columnName}
-                </span>
-
                 {activeRow.value?.children.map((subject: any) => {
                   return (
                     <>
@@ -129,7 +135,7 @@ const ChildNodeSearch = defineComponent({
                   );
                 })}
               </NSpace>
-            </div>
+            </NFormItem>
 
             <ChildNodeSearch
               activeRow={selectItem.value}
@@ -401,160 +407,134 @@ export default defineComponent({
       <div class={styles.container}>
         <div class={styles.tools}>
           <div class={styles.tagWrap}>
-            <div class={styles.tags}>
-              <NSpace size={[12, 8]}>
-                <span class={styles.firstButton}>
-                  {data.tags?.[0]?.columnName}
-                </span>
-
-                {data.tags.map((item: any) => {
-                  return (
-                    <>
-                      <NButton
-                        round
-                        secondary={data.tagActiveId === item.id ? false : true}
-                        type={
-                          data.tagActiveId === item.id ? 'primary' : 'default'
-                        }
-                        onClick={() => changeTag(item)}>
-                        {item.name}
-                      </NButton>
-                    </>
+            <NForm labelAlign="left" labelPlacement="left">
+              <NFormItem
+                label={data.tags?.[0]?.columnName || '' + '：'}
+                class={styles.tags}>
+                <NSpace size={[12, 8]}>
+                  {data.tags.map((item: any) => {
+                    return (
+                      <>
+                        <NButton
+                          round
+                          secondary={
+                            data.tagActiveId === item.id ? false : true
+                          }
+                          type={
+                            data.tagActiveId === item.id ? 'primary' : 'default'
+                          }
+                          onClick={() => changeTag(item)}>
+                          {item.name}
+                        </NButton>
+                      </>
+                    );
+                  })}
+                </NSpace>
+              </NFormItem>
+              <ChildNodeSearch
+                activeRow={data.selectParents}
+                loading={data.loading}
+                onSelectChildTag={(val: any) => {
+                  data.childSelectId = val;
+                  localStorage.setItem(
+                    'xiaoku-ai-search',
+                    JSON.stringify({
+                      tagActiveId: data.tagActiveId,
+                      instrumentId: forms.instrumentId,
+                      childSelectId: data.childSelectId,
+                      musicTagIds: forms.musicTagIds
+                    })
                   );
-                })}
-              </NSpace>
-            </div>
+                  getList();
+                }}
+              />
+              <NFormItem label="乐器：" class={styles.tags}>
+                <NSpace size={[12, 8]}>
+                  {/* <span class={styles.firstButton}>乐器</span> */}
 
-            <ChildNodeSearch
-              activeRow={data.selectParents}
-              loading={data.loading}
-              onSelectChildTag={(val: any) => {
-                data.childSelectId = val;
-                localStorage.setItem(
-                  'xiaoku-ai-search',
-                  JSON.stringify({
-                    tagActiveId: data.tagActiveId,
-                    instrumentId: forms.instrumentId,
-                    childSelectId: data.childSelectId,
-                    musicTagIds: forms.musicTagIds
-                  })
-                );
-                getList();
-              }}
-            />
-            <div class={styles.tags}>
-              <NSpace size={[12, 8]}>
-                <span class={styles.firstButton}>乐器</span>
-
-                {catchStore.getSubjectInstruments.map((item: any) =>
-                  item.instruments && item.instruments.length > 1 ? (
-                    <NPopselect
-                      options={item.instruments}
-                      trigger="hover"
-                      v-model:value={data.tagIndex}
-                      scrollable
-                      onUpdate:value={() => {
-                        forms.instrumentId = data.tagIndex;
-                        localStorage.setItem(
-                          'xiaoku-ai-search',
-                          JSON.stringify({
-                            tagActiveId: data.tagActiveId,
-                            instrumentId: data.tagIndex,
-                            musicTagIds: forms.musicTagIds
-                          })
-                        );
-                        getList();
-                      }}
-                      key={item.value}
-                      class={[styles.popSelect1]}>
+                  {catchStore.getSubjectInstruments.map((item: any) =>
+                    item.instruments && item.instruments.length > 1 ? (
+                      <NPopselect
+                        options={item.instruments}
+                        trigger="hover"
+                        v-model:value={data.tagIndex}
+                        scrollable
+                        onUpdate:value={() => {
+                          forms.instrumentId = data.tagIndex;
+                          localStorage.setItem(
+                            'xiaoku-ai-search',
+                            JSON.stringify({
+                              tagActiveId: data.tagActiveId,
+                              instrumentId: data.tagIndex,
+                              musicTagIds: forms.musicTagIds
+                            })
+                          );
+                          getList();
+                        }}
+                        key={item.value}
+                        class={[styles.popSelect1]}>
+                        <NButton
+                          round
+                          textColor={
+                            selectChildObj(item.instruments).selected
+                              ? '#fff'
+                              : '#000'
+                          }
+                          color={
+                            selectChildObj(item.instruments).selected
+                              ? '#198CFE'
+                              : 'rgba(46, 51, 56, .05)'
+                          }
+                          type={
+                            selectChildObj(item.instruments).selected
+                              ? 'primary'
+                              : 'default'
+                          }
+                          class={[
+                            styles.textBtn,
+                            selectChildObj(item.instruments).selected &&
+                              styles.textBtnActive
+                          ]}>
+                          {selectChildObj(item.instruments).name || item.name}
+                          <i class={styles.iconArrow}></i>
+                        </NButton>
+                      </NPopselect>
+                    ) : (
                       <NButton
                         round
                         textColor={
-                          selectChildObj(item.instruments).selected
-                            ? '#fff'
-                            : '#000'
+                          data.tagIndex === (item.value || 0) ? '#fff' : '#000'
                         }
                         color={
-                          selectChildObj(item.instruments).selected
+                          data.tagIndex === (item.value || 0)
                             ? '#198CFE'
                             : 'rgba(46, 51, 56, .05)'
                         }
                         type={
-                          selectChildObj(item.instruments).selected
+                          data.tagIndex === (item.value || 0)
                             ? 'primary'
                             : 'default'
                         }
-                        class={[
-                          styles.textBtn,
-                          selectChildObj(item.instruments).selected &&
-                            styles.textBtnActive
-                        ]}>
-                        {selectChildObj(item.instruments).name || item.name}
-                        <i class={styles.iconArrow}></i>
+                        onClick={() => {
+                          data.tagIndex = item.value || 0;
+                          forms.instrumentId = item.value;
+                          localStorage.setItem(
+                            'xiaoku-ai-search',
+                            JSON.stringify({
+                              tagActiveId: data.tagActiveId,
+                              instrumentId: item.value,
+                              musicTagIds: forms.musicTagIds
+                            })
+                          );
+                          getList();
+                        }}>
+                        {item.name}
                       </NButton>
-                    </NPopselect>
-                  ) : (
-                    <NButton
-                      round
-                      textColor={
-                        data.tagIndex === (item.value || 0) ? '#fff' : '#000'
-                      }
-                      color={
-                        data.tagIndex === (item.value || 0)
-                          ? '#198CFE'
-                          : 'rgba(46, 51, 56, .05)'
-                      }
-                      type={
-                        data.tagIndex === (item.value || 0)
-                          ? 'primary'
-                          : 'default'
-                      }
-                      onClick={() => {
-                        data.tagIndex = item.value || 0;
-                        forms.instrumentId = item.value;
-                        localStorage.setItem(
-                          'xiaoku-ai-search',
-                          JSON.stringify({
-                            tagActiveId: data.tagActiveId,
-                            instrumentId: item.value,
-                            musicTagIds: forms.musicTagIds
-                          })
-                        );
-                        getList();
-                      }}>
-                      {item.name}
-                    </NButton>
-                  )
-                )}
-                {/* // {
-                //   return (
-                //     <>
-                //       <NButton
-                //         round
-                //         secondary={item.id === forms.instrumentId ? false : true}
-                //         type={
-                //           item.id === forms.instrumentId ? 'primary' : 'default'
-                //         }
-                //         onClick={() => {
-                //           forms.instrumentId = item.id;
-
-                //           localStorage.setItem(
-                //             'xiaoku-ai-search',
-                //             JSON.stringify({
-                //               tagActiveId: data.tagActiveId,
-                //               instrumentId: item.id,
-                //               musicTagIds: forms.musicTagIds
-                //             })
-                //           );
-                //           getList();
-                //         }}>
-                //         {item.name}
-                //       </NButton>
-                //     </>
-                //   );
-                // })} */}
-              </NSpace>
-            </div>
+                    )
+                  )}
+                </NSpace>
+              </NFormItem>
+            </NForm>
           </div>
           <TheSearch
             round

vite.config.ts

@@ -24,7 +24,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://dev.kt.colexiu.com/';
-const proxyUrl = 'https://dev.kt.colexiu.com';
+const proxyUrl = 'https://test.kt.colexiu.com';
 // const proxyUrl = 'http://192.168.3.14:7989';
 const now = new Date().getTime();
 export default defineConfig(() => {