返回组件左上角坐标点

.env

@@ -11,4 +11,4 @@ VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'
 VUE_APP_EepServer = '/EEPServer/SI'
 
 #version
-VUE_APP_VERSION = '2026.09.18'
+VUE_APP_VERSION = '2026.09.21'

src/components/CommonPreview.vue

@@ -2009,7 +2009,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
   .main-container {
     position: relative;
     flex: 1;
-    min-width: 1110px;
+    min-width: 1230px;
     padding: 15px 0;
     overflow: auto;
     background-color: #ececec;

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

@@ -1153,23 +1153,72 @@ export default {
       this.visible = true;
     },
     /**
-     * 根据x,y坐标获取组件id，x,y坐标相对于.courserware元素
-     * @param {number} x x坐标
-     * @param {number} y y坐标
-     * @return {string|null} 组件id，如果没有找到则返回null
+     * 根据相对 .courseware 元素左上角的坐标，获取命中的组件（.grid）元素
+     * @param {number} x 相对 .courseware 元素左上角的 x 坐标
+     * @param {number} y 相对 .courseware 元素左上角的 y 坐标
+     * @return {HTMLElement|null} 命中的 .grid 元素，如果没有找到则返回 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);
+    getGridElementByPoint(x, y) {
+      const coursewareRect = this.$el.getBoundingClientRect();
+      let el = document.elementFromPoint(coursewareRect.left + x, coursewareRect.top + y);
       // 向上查找，直到找到具有 data-id 属性和 grid 类的元素
       while (el && (!el.dataset.id || !el.classList.contains('grid'))) {
         el = el.parentElement;
       }
 
+      return el || null;
+    },
+    /**
+     * 根据相对 .courseware 元素左上角的坐标获取组件id
+     * @param {number} x 相对 .courseware 元素左上角的 x 坐标
+     * @param {number} y 相对 .courseware 元素左上角的 y 坐标
+     * @return {string|null} 组件id，如果没有找到则返回null
+     */
+    getElementFromPoint(x, y) {
+      const el = this.getGridElementByPoint(x, y);
       return el ? el.dataset.id : null;
     },
+    /**
+     * 获取组件相对于 .courseware 元素左上角的位置
+     * @param {string} componentId 组件id
+     * @return {object|null} 左上角 x, y 属性的对象，如果没有找到则返回 null
+     */
+    getComponentPosition(componentId) {
+      const courseware = this.$el;
+      if (!courseware) return null;
+
+      const component = courseware.querySelector(`.grid[data-id="${componentId}"]`);
+      if (!component) return null;
+
+      const rect = component.getBoundingClientRect();
+      const containerRect = courseware.getBoundingClientRect();
+
+      return {
+        x: rect.left - containerRect.left,
+        y: rect.top - containerRect.top,
+      };
+    },
+    /**
+     * 获取坐标点所在组件相对于 .courseware 元素左上角的位置
+     * @param {number} x 相对 .courseware 元素左上角的 x 坐标
+     * @param {number} y 相对 .courseware 元素左上角的 y 坐标
+     * @return {object|null} 组件左上角 x, y 属性的对象，如果没有找到组件则返回 null
+     */
+    getComponentPositionAtPoint(x, y) {
+      const courseware = this.$el;
+      if (!courseware) return null;
+
+      const el = this.getGridElementByPoint(x, y);
+      if (!el) return null;
+
+      const rect = el.getBoundingClientRect();
+      const containerRect = courseware.getBoundingClientRect();
+
+      return {
+        x: rect.left - containerRect.left,
+        y: rect.top - containerRect.top,
+      };
+    },
   },
 };
 </script>