修改

src/views/content-information/content-instrument/detail.module.less

@@ -435,6 +435,10 @@
     user-select: text;
     position: relative;
 
+    &::selection {
+      background-color: #dfdfdf;
+    }
+
     &>img {
       width: 100%;
     }

src/views/content-information/useSpeak.ts

@@ -156,39 +156,39 @@ export const useSpeak = () => {
         const showDomRect = showDom.getBoundingClientRect();
 
         // 判断 上边超出边界
-        if (y - parentRect?.top > showDomRect.height + fHeight / 2) {
-          showDom.style.top =
-            (
-              y -
-              parentRect?.top -
-              (showDomRect.height + fHeight / 2) +
-              musicContent?.scrollTop
-            ).toFixed(2) + 'px';
-        } else {
-          console.log(
-            false,
-            parentRect?.bottom -
-            bottom +
+        // if (y - parentRect?.top > showDomRect.height + fHeight / 2) {
+        //   showDom.style.top =
+        //     (
+        //       y -
+        //       parentRect?.top -
+        //       (showDomRect.height + fHeight / 2) +
+        //       musicContent?.scrollTop
+        //     ).toFixed(2) + 'px';
+        // } else {
+        // console.log(
+        //   false,
+        //   parentRect?.bottom -
+        //   bottom +
+        //   (showDomRect.height + fHeight / 2) +
+        //   musicContent?.scrollTop
+        // );
+        showDom.style.top =
+          (
+            y -
+            parentRect?.top +
             (showDomRect.height + fHeight / 2) +
             musicContent?.scrollTop
-          );
-          showDom.style.top =
-            (
-              y -
-              parentRect?.top +
-              (showDomRect.height + fHeight / 2) +
-              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
-        });
+          ).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';
@@ -323,8 +323,8 @@ export const useSpeak = () => {
           }
         }
 
-        const replaceText = ['长笛', '作曲', '曲目', '琴曲'];
-        const afterReplaceText = ['尝笛', '作取', '取目', '琴取'];
+        const replaceText = ['长笛', '曲'];
+        const afterReplaceText = ['尝笛', '取'];
 
         if (sentence) {
           replaceText.forEach((item: string, index: number) => {
@@ -336,12 +336,12 @@ export const useSpeak = () => {
         }
 
         console.log(sentence, currentSentenceIndex, end, '---------');
-        const utterance = new SpeechSynthesisUtterance();
+        const utterance = new SpeechSynthesisUtterance(sentence);
         utterance.lang = 'zh-CN';
         utterance.volume = 1;
         utterance.rate = 0.8; // 语速 0.1到10
         utterance.pitch = 1.5; // 范围从0（最小）到2（最大）
-        utterance.text = sentence;
+        // utterance.text = sentence;
 
         if (utterance) {
           utterance.onstart = null;
@@ -418,10 +418,12 @@ export const useSpeak = () => {
 
   onMounted(async () => {
     document.addEventListener('mouseup', getSelectText);
+    document.addEventListener('touchend', getSelectText);
   });
 
   onUnmounted(() => {
     document.removeEventListener('mouseup', getSelectText);
+    document.addEventListener('touchend', getSelectText);
     onCloseSpeak();
   });