根据x,y坐标获取元素id

Co-authored-by: Copilot <copilot@github.com>

src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -445,16 +445,7 @@ import { getArticleData, roleDefaultColorList } from '@/views/book/courseware/da
 import { fileUpload, TextToAudioFile } from '@/api/app';
 import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 import { getRandomNumber } from '@/utils';
-import {
-  segSentences,
-  BatchSegContent,
-  getWordTime,
-  prepareTranscribe,
-  fileToBase64Text,
-  getWordTimes,
-} from '@/api/article';
-const Base64 = require('js-base64').Base64;
-import cnchar from 'cnchar';
+import { BatchSegContent, getWordTime, prepareTranscribe, fileToBase64Text, getWordTimes } from '@/api/article';
 
 export default {
   name: 'DialogueArticlePage',
@@ -511,7 +502,6 @@ export default {
         ['n', 'ń', 'ň', 'ǹ', 'n'],
         ['m̄', 'ḿ', 'm', 'm̀', 'm'],
       ],
-      toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
       pinyinList: [], // 拼音校正列表
     };
   },
@@ -1034,9 +1024,8 @@ export default {
                   chsBg: '#988ed6',
                   enBg: '#fff',
                 },
-                paraIndex: index,
                 sentences: sentenceList,
-                segList: segList,
+                segList,
                 seg_words: [],
                 wordsList,
                 timeList: [],
@@ -1456,7 +1445,7 @@ export default {
         for (let i = 0; i < valArr.length; i++) {
           let item = valItem[i];
           if (reg.test(item)) {
-            let numIndex = numList.length == 0 ? 0 : numList[numList.length - 1].index;
+            let numIndex = numList.length === 0 ? 0 : numList[numList.length - 1].index;
             let con = valItem.substring(numIndex, i);
             con = con.replace(/\d/g, '');
             let obj = {
@@ -1471,7 +1460,7 @@ export default {
       } else {
         numList = [];
       }
-      if (numList.length == 0) {
+      if (numList.length === 0) {
         this.resArr.push([{ con: valItem }]);
       } else {
         this.resArr.push(numList);

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -1,8 +1,8 @@
 <template>
   <div
+    id="selectable-area-preview"
     ref="courserware"
     class="courserware"
-    id="selectable-area-preview"
     :style="computedCourserwareStyle()"
     @mouseup="handleTextSelection"
     @mousedown="startSelection"
@@ -31,7 +31,7 @@
                 ref="preview"
                 :content="computedColContent(grid.id)"
                 :background="computedColBackground(grid.id)"
-                :class="[grid.id, { active: curSelectId === grid.id }]"
+                :class="['grid', grid.id, { active: curSelectId === grid.id }]"
                 :data-id="grid.id"
                 :style="{
                   gridArea: grid.grid_area,
@@ -160,6 +160,7 @@
 import { previewComponentList } from '@/views/book/courseware/data/bookType';
 import { getToken, getConfig } from '@/utils/auth';
 import _ from 'lodash';
+const Base64 = require('js-base64').Base64;
 
 export default {
   name: 'CoursewarePreview',
@@ -1119,10 +1120,10 @@ export default {
     },
     // 下载文件
     downLoad(file) {
-      let userInfor = getToken();
+      let userInfo = getToken();
       let AccessToken = '';
-      if (userInfor) {
-        AccessToken = userInfor.access_token;
+      if (userInfo) {
+        AccessToken = userInfo.access_token;
       }
       let FileID = file.file_id;
       let data = {
@@ -1136,6 +1137,24 @@ export default {
       this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(file.file_url)}`;
       this.visible = true;
     },
+    /**
+     * 根据x,y坐标获取组件id，x,y坐标相对于.courserware元素
+     * @param {number} x x坐标
+     * @param {number} y y坐标
+     * @return {string|null} 组件id，如果没有找到则返回null
+     */
+    getElementFromPoint(x, y) {
+      const courserwareRect = this.$el.getBoundingClientRect();
+      const absoluteX = courserwareRect.left + x;
+      const absoluteY = courserwareRect.top + y;
+      let el = document.elementFromPoint(absoluteX, absoluteY);
+      // 向上查找，直到找到具有 data-id 属性和 grid 类的元素
+      while (el && !el.dataset.id && !el.classList.contains('grid')) {
+        el = el.parentElement;
+      }
+
+      return el ? el.dataset.id : null;
+    },
   },
 };
 </script>