修改

src/views/attend-class/index.tsx

@@ -599,7 +599,6 @@ export default defineComponent({
           );
         }
 
-        console.log(activeItem.iframeRef, 'activeItem.iframeRef');
         if (
           activeItem.type === 'INSTRUMENT' ||
           activeItem.type === 'MUSICIAN' ||

src/views/content-information/useSpeak.ts

@@ -181,7 +181,7 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
         const musicContent: any = document.querySelector(_musicContent);
         const parentRect: any = musicContent?.getBoundingClientRect();
         const showDom: any = document.getElementById(_selectionCouser);
-        const showDomRect = showDom.getBoundingClientRect();
+        const showDomRect = showDom?.getBoundingClientRect();
 
         // 判断 上边超出边界
         // if (y - parentRect?.top > showDomRect.height + fHeight / 2) {
@@ -311,11 +311,11 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
         sentence.classList.toggle('highlight', i === index);
       });
       // 滚动到高亮的部分
-      // const highlightText = textContainer?.querySelector('.highlight');
-      // highlightText?.scrollIntoView({
-      //   behavior: 'smooth',
-      //   block: 'center'
-      // });
+      const highlightText = textContainer?.querySelector('.highlight');
+      highlightText?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      });
     };
 
     // 开始播放
@@ -356,8 +356,8 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
           }
         }
 
-        const replaceText = ['长笛', '曲', '打击乐'];
-        const afterReplaceText = ['尝笛', '取', '打击月'];
+        const replaceText = ['长笛', '打击乐', '乐曲', '曲'];
+        const afterReplaceText = ['尝笛', '打击月', '月取', '取'];
 
         if (sentence) {
           replaceText.forEach((item: string, index: number) => {

src/views/prepare-lessons/model/source-knowledge/detail.tsx

@@ -58,7 +58,9 @@ export default defineComponent({
       fontSize: 18,
       tableList: [] as any,
       selectKey: null,
-      details: {} as any
+      details: {} as any,
+      domString: '',
+      display: 'block'
     });
 
     const getDetail = async () => {
@@ -68,19 +70,15 @@ export default defineComponent({
           id: props.id
         });
 
-        content.value = false;
         state.details = data;
-        nextTick(() => {
+        content.value = false;
+        nextTick(async () => {
           // 使用 DOMParser 解析 HTML 字符串
+          // 获取 HTML 字符串
+          // const htmlString = tempDiv.innerHTML;
+          // console.log(htmlString);
           const parser = new DOMParser();
-          const doc = parser.parseFromString(data.desc, 'text/html');
-
-          const hasChilds = document.querySelectorAll('.only-child-select');
-          if (hasChilds.length > 0) {
-            hasChilds.forEach(child => {
-              child.remove();
-            });
-          }
+          const doc = parser.parseFromString(state.details.desc, 'text/html');
 
           const childNodes = doc.body.childNodes;
           childNodes?.forEach((node: any) => {
@@ -88,9 +86,16 @@ export default defineComponent({
           });
 
           // 提取并分割 HTML 文档中的内容
-          document
-            .querySelector('#' + speakMusicContent)
-            ?.appendChild(speak.processNode(doc.body));
+
+          console.log(
+            speakMusicContent,
+            document.querySelector('#' + speakMusicContent),
+            processNode(doc.body)
+          );
+          // state.details.desc = '';
+          // state.display = 'none';
+          const node: any = speak.processNode(doc.body);
+          document.querySelector('#' + speakMusicContent)?.appendChild(node);
         });
       } catch {
         //

src/views/xiaoku-music/component/play-item/index.module.less

@@ -1,173 +1,174 @@
-.container {
-  position: fixed;
-  left: 100px;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  height: 108px;
-  padding: 0 60px;
-  background-color: #fff;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-  transition: all .3s;
-
-  &.previewcontainer {
-    left: 0;
-    padding-right: 380px;
-  }
-
-  &.containerModal {
-    position: absolute;
-    left: 0;
-
-  }
-}
-
-.hidden {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .img {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    margin-right: 12px;
-    background-color: #000;
-    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
-    padding: 7px;
-    overflow: hidden;
-    flex-shrink: 0;
-
-    :global {
-      .n-image {
-        border-radius: 50%;
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    img {
-      transition: opacity .3s;
-      opacity: 0;
-      animation: rotateImg 6s linear infinite;
-    }
-
-    &.imgRotate {
-      img {
-        animation-play-state: paused;
-      }
-    }
-
-    img[data-loaded="true"] {
-      opacity: 1;
-    }
-  }
-
-  .svgcontainer {
-    position: fixed;
-    z-index: -1000;
-    pointer-events: none;
-  }
-
-  .progress {
-    position: absolute;
-    left: 4px;
-    top: 4px;
-    width: 56px;
-    pointer-events: none;
-    transform: rotate(180deg);
-
-    :global {
-      .n-progress-graph .n-progress-graph-circle .n-progress-graph-circle-fill {
-        stroke: url(#GradientProgress);
-      }
-    }
-  }
-
-  .title {
-    margin-right: 15px;
-    width: 200px;
-
-    .titleName {
-      font-size: max(16px, 13Px);
-      font-weight: 600;
-      color: #131415;
-      line-height: 28px;
-      white-space: nowrap;
-    }
-
-    .titleDes {
-      font-size: max(14px, 12Px);
-      font-weight: 400;
-      color: #777777;
-      line-height: 20px;
-      white-space: nowrap;
-    }
-  }
-}
-
-@keyframes rotateImg {
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.playBtns {
-  margin-left: 140px;
-  display: flex;
-  align-items: center;
-
-  :global {
-    .n-button {
-      width: 40px;
-      height: 40px;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .playBtn {
-    width: 50px;
-    height: 50px;
-    margin: 0 48px;
-    background: linear-gradient(to right bottom, #44CAFE, #007AFE);
-
-    img {
-      display: block;
-      // width: 18px;
-      height: 20px;
-    }
-  }
-}
-
-.timeWrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  margin-left: 88px;
-
-  .timeProgress {
-    margin-right: 24px;
-    border-radius: 6px;
-    --n-rail-height: 8px !important;
-  }
-
-  .time {
-    width: 90px;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
+.container {
+  position: fixed;
+  left: 100px;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 108px;
+  padding: 0 60px;
+  background-color: #fff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: all .3s;
+
+  &.previewcontainer {
+    left: 0;
+    padding-right: 380px;
+  }
+
+  &.containerModal {
+    position: absolute;
+    left: 0;
+
+  }
+}
+
+.hidden {
+  transform: translateY(100%);
+  opacity: 0;
+  display: none;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .img {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    margin-right: 12px;
+    background-color: #000;
+    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+    padding: 7px;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    :global {
+      .n-image {
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    img {
+      transition: opacity .3s;
+      opacity: 0;
+      animation: rotateImg 6s linear infinite;
+    }
+
+    &.imgRotate {
+      img {
+        animation-play-state: paused;
+      }
+    }
+
+    img[data-loaded="true"] {
+      opacity: 1;
+    }
+  }
+
+  .svgcontainer {
+    position: fixed;
+    z-index: -1000;
+    pointer-events: none;
+  }
+
+  .progress {
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 56px;
+    pointer-events: none;
+    transform: rotate(180deg);
+
+    :global {
+      .n-progress-graph .n-progress-graph-circle .n-progress-graph-circle-fill {
+        stroke: url(#GradientProgress);
+      }
+    }
+  }
+
+  .title {
+    margin-right: 15px;
+    width: 200px;
+
+    .titleName {
+      font-size: max(16px, 13Px);
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+      white-space: nowrap;
+    }
+
+    .titleDes {
+      font-size: max(14px, 12Px);
+      font-weight: 400;
+      color: #777777;
+      line-height: 20px;
+      white-space: nowrap;
+    }
+  }
+}
+
+@keyframes rotateImg {
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.playBtns {
+  margin-left: 140px;
+  display: flex;
+  align-items: center;
+
+  :global {
+    .n-button {
+      width: 40px;
+      height: 40px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .playBtn {
+    width: 50px;
+    height: 50px;
+    margin: 0 48px;
+    background: linear-gradient(to right bottom, #44CAFE, #007AFE);
+
+    img {
+      display: block;
+      // width: 18px;
+      height: 20px;
+    }
+  }
+}
+
+.timeWrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-left: 88px;
+
+  .timeProgress {
+    margin-right: 24px;
+    border-radius: 6px;
+    --n-rail-height: 8px !important;
+  }
+
+  .time {
+    width: 90px;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
 }