Merge branch 'iteration-20240801' into jenkins

src/styles/index.less

@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+/* 移除默认的 focus-visible 样式 */
+:focus-visible {
+  outline: none;
+}
 
 #app {
   -webkit-font-smoothing: antialiased;

src/views/content-information/useSpeak.ts

@@ -8,8 +8,8 @@ import { onMounted, onUnmounted, reactive, toRefs } from 'vue';
 export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
   const _musicContent = musicContent ? '#' + musicContent : '#musicContent';
   const _selectionCouser = selectionCouser
-    ? selectionCouser
-    : 'selectionCouser';
+    ? '#' + selectionCouser
+    : '#selectionCouser';
   const state = reactive({
     showDom: false,
     synth: null as any,
@@ -85,7 +85,8 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
       return 'up';
     }
   };
-  const getSelectText = () => {
+  const getSelectText = (event: any) => {
+    event.preventDefault(); // 阻止默认行为
     const selection: any = window.getSelection();
     const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 
@@ -160,6 +161,7 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
     } else {
       state.showDom = false;
     }
+
     // 判断选中的类型
     setTimeout(() => {
       if (selection.type !== 'Range') {
@@ -173,6 +175,7 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
       const rects = range.getClientRects();
 
       if (rects.length > 0) {
+        console.log(rects, 'rects');
         const firstRect = rects[rects.length - 1];
         const x = firstRect.right;
         const y = firstRect.top;
@@ -180,44 +183,52 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
         const fHeight = firstRect.height;
         const musicContent: any = document.querySelector(_musicContent);
         const parentRect: any = musicContent?.getBoundingClientRect();
-        const showDom: any = document.getElementById(_selectionCouser);
+        const showDom: any = document.querySelector(_selectionCouser);
         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 {
-        showDom.style.top =
-          (
-            y -
-            parentRect?.top +
-            (showDomRect.height + fHeight / 2) +
-            musicContent?.scrollTop
-          ).toFixed(2) + 'px';
-        // }
-
-        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 = (parentRect?.right - x - 6).toFixed(2) + 'px';
-          showDom.style.left = 'auto';
+        if (showDom) {
+          // 判断 上边超出边界
+          // if (y - parentRect?.top > showDomRect.height + fHeight / 2) {
+          //   showDom.style.top =
+          //     (
+          //       y -
+          //       parentRect?.top -
+          //       (showDomRect.height + fHeight / 2) +
+          //       musicContent?.scrollTop
+          //     ).toFixed(2) + 'px';
+          // } else {
+          showDom.style.top =
+            (
+              y -
+              parentRect?.top +
+              (showDomRect.height + fHeight / 2) +
+              musicContent?.scrollTop
+            ).toFixed(2) + 'px';
+          // }
+
+          // console.log({
+
+          //   PWidth: parentRect?.width,
+          //   PLeft: parentRect?.left,
+          //   PRight: parentRect?.right,
+          //   x,
+          //   diff: parentRect?.right - x
+          // });
+          // console.log(
+          //   y -
+          //   parentRect?.top +
+          //   (showDomRect.height + fHeight / 2) +
+          //   musicContent?.scrollTop,
+          //   parentRect?.right - x - 6
+          // );
+
+          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 = (parentRect?.right - x - 6).toFixed(2) + 'px';
+            showDom.style.left = 'auto';
+          }
         }
 
         // if (parentRect?.width - (x - parentRect?.left) > showDomRect.width) {
@@ -482,13 +493,17 @@ export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
 
   const onDestory = () => {
     document.removeEventListener('mouseup', getSelectText);
-    document.addEventListener('touchend', getSelectText);
+    document.removeEventListener('touchend', getSelectText);
+    document.removeEventListener('touchmove', getSelectText);
     onCloseSpeak();
   };
 
   onMounted(async () => {
     document.addEventListener('mouseup', getSelectText);
     document.addEventListener('touchend', getSelectText);
+    document.addEventListener('touchmove', () => {
+      console.log(11111);
+    });
   });
 
   onUnmounted(() => {

src/views/prepare-lessons/model/source-knowledge/index.module.less

@@ -270,6 +270,12 @@
     user-select: text;
     position: relative;
 
+    &:focus-visible {
+      border: none !important;
+      outline: none !important;
+      ;
+    }
+
     :global {
       .highlight {
         color: #0378EC;