Merge branch 'iteration-20240801' into jenkins

src/views/content-information/useSpeak.ts

@@ -173,8 +173,8 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
       const rects = range.getClientRects();
 
       if (rects.length > 0) {
-        const firstRect = rects[0];
-        const x = firstRect.left;
+        const firstRect = rects[rects.length - 1];
+        const x = firstRect.right;
         const y = firstRect.top;
         const bottom = firstRect.bottom;
         const fHeight = firstRect.height;
@@ -193,19 +193,6 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
         //       musicContent?.scrollTop
         //     ).toFixed(2) + 'px';
         // } else {
-        console.log({
-          parentRect,
-          showDomRect,
-          firstRect,
-          dom: document.querySelector(_musicContent)
-        });
-        console.log(
-          false,
-          parentRect?.bottom -
-          bottom +
-          (showDomRect.height + fHeight / 2) +
-          musicContent?.scrollTop
-        );
         showDom.style.top =
           (
             y -
@@ -214,23 +201,38 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
             musicContent?.scrollTop
           ).toFixed(2) + 'px';
         // }
-        // console.log({
-        //   parentRectWidth: parentRect?.width,
-        //   firstRectLeft: x,
-        //   parentRectLeft: parentRect?.left,
-        //   parentRectStatus:
-        //     parentRect?.width - (x - parentRect?.left) > showDomRect.width,
-        //   diff: parentRect?.width - (x - parentRect?.left),
-        //   showDomRect: showDomRect.width
-        // });
-        if (parentRect?.width - (x - parentRect?.left) > showDomRect.width) {
-          // 判断是否选择到最右边 超出边界
-          showDom.style.left = (x - parentRect?.left).toFixed(2) + 'px';
-          showDom.style.right = 'auto';
+
+        console.log({
+          aa: parentRect?.width - showDomRect.width,
+          PWidth: parentRect?.width,
+          PLeft: parentRect?.left,
+          PRight: parentRect?.right,
+          x,
+          diff: parentRect?.right - x
+        });
+
+        if (parentRect?.right - x >= parentRect?.width - showDomRect.width) {
+          showDom.style.right =
+            (parentRect?.width - showDomRect.width).toFixed(2) + 'px';
+          showDom.style.left = 'auto';
         } else {
-          showDom.style.right = '0px';
+          showDom.style.right = (parentRect?.right - x - 6).toFixed(2) + 'px';
           showDom.style.left = 'auto';
         }
+
+        // if (parentRect?.width - (x - parentRect?.left) > showDomRect.width) {
+        //   // 判断是否选择到最右边 超出边界
+        //   // showDom.style.left = (x - parentRect?.right).toFixed(2) + 'px';
+        //   // showDom.style.right = 'auto';
+        //   showDom.style.right = (parentRect?.right - x - 6).toFixed(2) + 'px';
+        //   showDom.style.left = 'auto';
+        // } else {
+        //   // showDom.style.right = '0px';
+        //   // showDom.style.left = 'auto';
+
+        //   showDom.style.right = 'auto';
+        //   showDom.style.left = '0';
+        // }
       }
     }
   };
@@ -312,11 +314,40 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
       });
       // 滚动到高亮的部分
       const highlightText = textContainer?.querySelector('.highlight');
-      highlightText?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      });
+      // highlightText?.scrollIntoView({
+      //   behavior: 'smooth',
+      //   block: 'center'
+      // });
+      scrollToElement(highlightText);
     };
+    function getOffsetTopRelativeToParent(element: any, parent: any) {
+      let offsetTop = 0;
+      while (element && element !== parent) {
+        offsetTop += element.offsetTop;
+        element = element.offsetParent;
+      }
+      return offsetTop;
+    }
+
+    function scrollToElement(element: any) {
+      const musicContent: any = document.querySelector(_musicContent);
+      const musicRect = musicContent.getBoundingClientRect();
+
+      const diffTop = getOffsetTopRelativeToParent(element, musicContent);
+      const musicHeight = musicRect.height / 2;
+      let height = 0;
+      console.log(getOffsetTopRelativeToParent(element, musicContent), '12121');
+      if (diffTop - musicHeight >= 0) {
+        height = diffTop - musicHeight;
+      } else {
+        height = 0;
+      }
+
+      document.querySelector(_musicContent)?.scrollTo({
+        top: height,
+        behavior: 'smooth'
+      });
+    }
 
     // 开始播放
     const speaker = () => {

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

@@ -56,7 +56,7 @@ export default defineComponent({
       'selectionCouser' +
       new Date().getTime() +
       Math.floor(Math.random() * 100);
-    const speak = useSpeak(speakMusicContent);
+    const speak = useSpeak(speakMusicContent, selectionCouser);
     const data = reactive({
       loading: false,
       finshed: false,