组件审核定位

src/components/AuditRemark.vue

@@ -135,8 +135,7 @@ export default {
     display: flex;
     gap: 8px;
     align-items: center;
-
-    // width: 55px;
+    width: 55px;
     padding: 0 10px;
     border-left: 1px solid #e5e5e5;
   }

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

@@ -7,8 +7,8 @@
     @mouseup="handleTextSelection"
     @mousedown="startSelection"
     @mousemove="updateSelection"
-    @mouseleave="endSelection"
   >
+    <!-- @mouseleave="endSelection" -->
     <template v-for="(row, i) in data.row_list">
       <div v-show="computedRowVisibility(row.row_id)" :key="i" class="row" :style="getMultipleColStyle(i)">
         <el-checkbox
@@ -63,14 +63,28 @@
                   popper-class="menu-remark-info"
                 >
                   <div v-html="items.content"></div>
+                  <template v-if="items.file_list.length > 0">
+                    <div v-for="(item, index) in items.file_list" :key="indexs + '-' + index" class="remark-file-item">
+                      <SvgIcon :icon-class="item.icon_type" />
+                      <span class="file-item-name">{{ item.file_name }}</span>
+                      <SvgIcon icon-class="uploadPreview" @click="viewDialog(item)" />
+                      <SvgIcon icon-class="download" @click="downLoad(item)" />
+                    </div>
+                  </template>
                   <template #reference>
-                    <SvgIcon
+                    <div
+                      v-if="items.position_br_x - items.position_x > 3 && items.position_br_y - items.position_y > 3"
                       slot="reference"
-                      icon-class="icon-info"
-                      size="24"
-                      class="remark-info"
-                      :style="{ left: items.position_x - 12 + 'px', top: items.position_y - 12 + 'px' }"
-                    />
+                      :style="{
+                        position: 'absolute',
+                        top: `${items.position_y}px`,
+                        left: `${items.position_x}px`,
+                        width: `${items.position_br_x - items.position_x}px`,
+                        height: `${items.position_br_y - items.position_y}px`,
+                        border: '2px solid #165DFF',
+                        zIndex: 10,
+                      }"
+                    ></div>
                   </template>
                 </el-popover>
               </div>
@@ -135,6 +149,7 @@
               width: `${items.position_br_x - items.position_x}px`,
               height: `${items.position_br_y - items.position_y}px`,
               border: '2px solid #165DFF',
+              zIndex: 10,
             }"
           ></div>
         </template>
@@ -703,6 +718,11 @@ export default {
         text = info.text;
 
         this.showMenu = false;
+      } else {
+        this.componentId = this.getElementFromPoint(
+          (this.menuPosition.startX + this.menuPosition.endX) / 2,
+          (this.menuPosition.startY + this.menuPosition.endY) / 2,
+        );
       }
       this.$emit('computeScroll');
       setTimeout(() => {
@@ -792,7 +812,7 @@ export default {
         if (!selectHandleInfo || !selectHandleInfo.text) return;
         this.selectHandleInfo = selectHandleInfo;
 
-        this.showToolbar = true;
+        if (!this.canRemark) this.showToolbar = true;
         const container = document.querySelector('.courserware');
         const boxRect = container.getBoundingClientRect();
         const selectRect = range.getBoundingClientRect();