标引实时记录

src/view/case/photos/canvas-photo-editor.js

@@ -56,6 +56,12 @@ export class CanvasPhotoEditor {
     this.isPageDragging = false
     this.dragPageStartY = 0
     this.dragPageMoved = false
+    // 动态标引状态
+    this.tempArrow = {
+      start: null,    // { x, y }
+      end: null,      // { x, y }
+      drawing: false  // 是否正在绘制
+    };
     //标引状态
     this.indexing = false//是否开启
     this.indexingNum = 0 //0 未点击  1 已生成开始点位 2 结束点位已生成
@@ -87,7 +93,8 @@ export class CanvasPhotoEditor {
   // --- 数据 getter/setter ---
   get pages() { return this._pages }
   set pages(newPages) {
-    console.log('isArrayEqual1', this._pages, newPages)
+    console.log('isArrayEqual1', this.indexingLineList, newPages)
+
     // const isSave = this._pages.length !== newPages.length?true:!this._pages.some((ele, index) => this.isArrayEqual(ele.list, newPages[index].list))
     this._pages = newPages
     this.resizeCanvas()
@@ -147,7 +154,6 @@ export class CanvasPhotoEditor {
   }
 
   bindScrollWrapper(wrapper) {
-    console.log('bindScrollWrapper', wrapper, wrapper?.clientWidth)
     this.scrollWrapper = wrapper
     // this.drawDragPreview() // 仅初始化时重绘一次
     this.resizeCanvas()//更换画布和页面大小
@@ -169,7 +175,6 @@ export class CanvasPhotoEditor {
 
   // --- 调整画布尺寸 ---
   resizeCanvas() {
-    console.log('resizeCanvas', this.canvas, !this.canvas || !this.scrollWrapper)
     if (!this.canvas || !this.scrollWrapper) return
 
     // Canvas铺满容器
@@ -199,14 +204,22 @@ export class CanvasPhotoEditor {
       if (this.indexingNum == 1) return this.endIindexing(e)
       return
     }
+    const pageIndex = this.getPageIndexByClick(e)
+    const oldPageIndex = this.selectedPageIndex; // 保存旧选中页
+    // if(pageIndex == this.selectedPageIndex && pageIndex != -1){
+    //   const rect = this.canvas.getBoundingClientRect()
+    //   const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
+    //   const mouseY = (e.clientY - rect.top - this.drawOffsetY) / this.scale
+    //   this.tempArrow.start = { x: mouseX, y: mouseY }
+    //   this.tempArrow.drawing = true;
+    //   return
+    // }
     this.isDragging = true
     this.dragStartX = e.clientX
     this.dragStartY = e.clientY
     this.lastDrawOffsetX = this.drawOffsetX
     this.lastDrawOffsetY = this.drawOffsetY
     this.canvas.style.cursor = 'grabbing'
-    const pageIndex = this.getPageIndexByClick(e)
-    const oldPageIndex = this.selectedPageIndex; // 保存旧选中页
     if (!this.show && pageIndex != undefined && pageIndex != -1 && (pageIndex !== this.selectedPageIndex || this._selectedPageItem.pageIndex != -1)) {
       // 1. 清除旧页面的边框
       // this.clearOldBorder(oldPageIndex);
@@ -224,9 +237,16 @@ export class CanvasPhotoEditor {
   }
 
   handleMouseMove(e) {
-    // if (this.indexing) {
-    //   return
-    // }
+    const drawing = this.tempArrow?.drawing
+    if (this.indexing && drawing) {
+      const { x, y, } = this.tempArrow?.start
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
+      const mouseY = (e.clientY - rect.top - this.drawOffsetY) / this.scale
+      this.tempArrow.end = {x: mouseX, y: mouseY }
+      this.drawAllPages()
+      return
+    }
     
     if (!this.isDragging) return
     // 仅更新坐标偏移，不触发重绘（核心优化）
@@ -237,37 +257,37 @@ export class CanvasPhotoEditor {
     // const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
     // const mouseY = (e.clientY - rect.top - this.drawOffsetY) / this.scale
     // ==========================================
-// 🔥 页面拖拽排序：移动时交换顺序
-// ==========================================
-if (this.isPageDragging && this.selectedPageIndex !== -1) {
-  const deltaY = e.clientY - this.dragPageStartY
-
-  // 向下拖 → 向后交换
-  if (deltaY > 80 && this.selectedPageIndex < this.pages.length - 1) {
-    const newPages = [...this.pages]
-    const temp = newPages[this.selectedPageIndex]
-    newPages[this.selectedPageIndex] = newPages[this.selectedPageIndex + 1]
-    newPages[this.selectedPageIndex + 1] = temp
-    this.pages = newPages
-    this.selectedPageIndex += 1
-    this.dragPageStartY = e.clientY
-    this.dragPageMoved = true
-    return
-  }
-
-  // 向上拖 → 向前交换
-  if (deltaY < -80 && this.selectedPageIndex > 0) {
-    const newPages = [...this.pages]
-    const temp = newPages[this.selectedPageIndex]
-    newPages[this.selectedPageIndex] = newPages[this.selectedPageIndex - 1]
-    newPages[this.selectedPageIndex - 1] = temp
-    this.pages = newPages
-    this.selectedPageIndex -= 1
-    this.dragPageStartY = e.clientY
-    this.dragPageMoved = true
-    return
-  }
-}
+    // // 🔥 页面拖拽排序：移动时交换顺序
+    // // ==========================================
+    // if (this.isPageDragging && this.selectedPageIndex !== -1) {
+    //   const deltaY = e.clientY - this.dragPageStartY
+
+    //   // 向下拖 → 向后交换
+    //   if (deltaY > 80 && this.selectedPageIndex < this.pages.length - 1) {
+    //     const newPages = [...this.pages]
+    //     const temp = newPages[this.selectedPageIndex]
+    //     newPages[this.selectedPageIndex] = newPages[this.selectedPageIndex + 1]
+    //     newPages[this.selectedPageIndex + 1] = temp
+    //     this.pages = newPages
+    //     this.selectedPageIndex += 1
+    //     this.dragPageStartY = e.clientY
+    //     this.dragPageMoved = true
+    //     return
+    //   }
+
+    //   // 向上拖 → 向前交换
+    //   if (deltaY < -80 && this.selectedPageIndex > 0) {
+    //     const newPages = [...this.pages]
+    //     const temp = newPages[this.selectedPageIndex]
+    //     newPages[this.selectedPageIndex] = newPages[this.selectedPageIndex - 1]
+    //     newPages[this.selectedPageIndex - 1] = temp
+    //     this.pages = newPages
+    //     this.selectedPageIndex -= 1
+    //     this.dragPageStartY = e.clientY
+    //     this.dragPageMoved = true
+    //     return
+    //   }
+    // }
     if(this.indexing && this.indexingNum == 1){
       // 绘制中途轨迹
     }
@@ -352,17 +372,20 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     }
     console.log('indexing', this.indexing, PhotoIndex, isLine)
     if (PhotoIndex.itemIndex == -1) {
-      ElMessage.error("请选中对应的图片再进行索引操作！");
+      ElMessage.error("请选中对应的图片再进行标引操作！");
       return
     }
+
     this.indexingNum = 1
     this.indexingList.push(PhotoIndex)
     this.indexingStartX = mouseX
     this.indexingStartY = mouseY
+    this.tempArrow.start = { x: mouseX, y: mouseY }
+    this.tempArrow.drawing = true;
     console.log('indexing', this.indexing, PhotoIndex, mouseX, mouseY)
   }
   /**
-   * 结束索引操作，计算鼠标在画布上的相对坐标并保存起始位置
+   * 结束标引操作，计算鼠标在画布上的相对坐标并保存起始位置
    * @param {MouseEvent} e - 鼠标事件对象
    */
   endIindexing(e) {
@@ -372,6 +395,7 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       return
     }
     const oldPhotoIndex = this.indexingList[0]
+    console.log('oldPhotoIndex', oldPhotoIndex, this.indexingList)
     if (oldPhotoIndex.pageIndex == PhotoIndex.pageIndex && oldPhotoIndex.itemIndex == PhotoIndex.itemIndex) {
       ElMessage.error("标引开始和结束图片不能相同！");
       return
@@ -386,23 +410,35 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
     const mouseY = (e.clientY - rect.top - this.drawOffsetY) / this.scale
     let coordinate = this.pages[PhotoIndex.pageIndex].coordinate[PhotoIndex.itemIndex]
-    console.log('coordinate', coordinate)
+    console.log('coordinate', PhotoIndex, oldPhotoIndex)
     this.indexingEndX = mouseX
     this.indexingEndY = mouseY
     let startInfo = this.indexingList[0]
     this.indexingList.push(PhotoIndex)
-    let endIindexing = {//默认同页面
+    let endIindexing1 = {//默认同页面
       x: this.indexingEndX,
       y: startInfo.itemIndex > PhotoIndex.itemIndex ? (coordinate.y + coordinate.height) : coordinate.y,
     }
     if (startInfo.pageIndex != PhotoIndex.pageIndex) {
-      endIindexing = {//默认同页面
+      endIindexing1 = {//默认同页面
         x: startInfo.pageIndex > PhotoIndex.pageIndex ? (coordinate.x + coordinate.width) : coordinate.x,
         y: this.indexingEndY,
       }
     }
-    this.drawGuideLine([{ x: this.indexingStartX, y: this.indexingStartY }, endIindexing], coordinate, this.indexingList)
-    console.log('indexing', this.indexing, PhotoIndex, mouseX, mouseY, coordinate)
+    let points = [{
+      x: this.indexingStartX,
+      y: this.indexingStartY,
+    }, endIindexing1]
+    if(Math.abs(this.indexingStartY - endIindexing1.y)>this.rqHeight){//需要折现换行
+      let newX = PhotoIndex.pageIndex*(this.pageWidth + this.pageMargin)
+      points.splice(1, 0, { x: newX, y: this.indexingStartY }, { x: newX, y: endIindexing1.y })
+    }
+    this.tempArrow.start = null
+    this.tempArrow.end = null
+    this.tempArrow.drawing = false;
+    this.drawGuideLine(points, coordinate, this.indexingList)
+    this.drawAllPages()
+    console.log('tempArrow', this.indexing, this.tempArrow)
   }
   // --- 拖拽预览：轻量级绘制，仅更新偏移（替代全量重绘）---
   drawDragPreview() {
@@ -416,15 +452,43 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
    * 遍历标引线列表，逐条绘制每条标引线到画布上
    */
   drawGuideLineAll(val) {
-    console.log('drawGuideLineAll', this.indexingLineList.length)
     if (this.indexingLineList.length) {
       for (let i = 0; i < this.indexingLineList.length; i++) {
         const { points, coordinate, indexingList } = this.indexingLineList[i]
-        console.log('drawGuideLineAll', i)
         this.drawGuideLine(points, coordinate, indexingList, val)
       }
     }
   }
+  
+  // 绘制临时标引
+  drawInterimLine(points) {//val 不是重绘才保存历史记录，否则是重绘就不保存了
+    const ctx = this.ctx;
+    let color = '#ff0000';
+    let lineWidth = 2;
+    // 1. 保存当前上下文状态（避免污染）
+    ctx.save();
+
+    // 2. 应用和全量绘制一致的偏移/缩放（保证坐标对齐）
+    ctx.translate(this.drawOffsetX, this.drawOffsetY);
+    ctx.scale(this.scale, this.scale);
+
+    if (points.length < 2) return;
+
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    // 绘制折线
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i].x, points[i].y);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
   // 绘制标引
   drawGuideLine(points, coordinate, indexingList, val = false) {//val 不是重绘才保存历史记录，否则是重绘就不保存了
     const ctx = this.ctx;
@@ -452,7 +516,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       ctx.lineTo(points[i].x, points[i].y);
     }
     ctx.stroke();
-    console.log('indexing1', points, coordinate, indexingList)
 
     // 绘制起点圆点
     const first = points[0];
@@ -476,19 +539,19 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     ctx.restore();
     if (this.indexing && !val) {
       this.indexingLineList.push({ points, coordinate, indexingList })
+      this.indexingNum = 0
+      this.indexingList = []
       // this.saveHistory()
     }
-    this.indexingList = []
     // drawArrow(ctx, last2.x, last2.y, last.x, last.y, color);
-    this.indexingNum = 0
+    // this.indexingNum = 0
   }
 
-  // --- 计算点击的页面索引 ---
+  // --- 计算点击的页面标引 ---
   getPageIndexByClick(e) {
     const rect = this.canvas.getBoundingClientRect()
     const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
     const mouseY = (e.clientY - rect.top - this.drawOffsetY) / this.scale
-    console.log('selectedPageItem1', this._selectedPageItem, this.pages)
     for (let i = 0; i < this.pages.length; i++) {
       const pageStartX = i * (this.pageWidth + this.pageMargin)
       const pageEndX = pageStartX + this.pageWidth
@@ -528,13 +591,12 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
     const layout = this.getItemSize(layoutMode)
     let itemIndex = -1
-    console.log('selectedPageItem2', layoutMode, selectPage, mouseX, mouseY)
     if (layoutMode === 'double') {
       itemIndex = this.isPointInRect(mouseX, mouseY, selectPage.coordinate[0]) ? 0 : this.isPointInRect(mouseX, mouseY, selectPage.coordinate[1]) ? 1 : -1
     } else {
       itemIndex = this.isPointInRect(mouseX, mouseY, selectPage.coordinate[0]) ? 0 : -1
     }
-    return { pageIndex, itemIndex, layoutMode }
+    return { pageIndex, itemIndex, layoutMode, count: layout.count }
   }
   /**
    * 判断点是否在线段上
@@ -731,7 +793,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       // 页面背景
       ctx.fillStyle = this.pageBgColor
       ctx.fillRect(pageX, 0, this.pageWidth, this.pageHeight)
-      console.log('drawDragPreview', pageX, 0, this._selectedPageItem, this.pageHeight, '_selectedPageItem', this._selectedPageItem)
 
       // 页面边框
       if (this._selectedPageItem.index == -1) {
@@ -756,9 +817,7 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       const layoutModePages = pagePhotos.layoutMode || this.layoutMode
       const layout = this.getItemSize(layoutModePages)
       pagePhotos.coordinate = this.getCoordinate(pageX, layout)
-      console.log('drawDragPreview1', pagePhotos, this.pages, layout, pageX)
       let newList = this.padArrayLength(pagePhotos.list, layout.count)
-      console.log('drawDragPreview', pagePhotos, this.pages, 'newList', newList)
       newList.forEach((photoId, itemIndex) => {
         let itemY = layoutModePages === 'single' || layoutModePages === 'landscape'
           ? layout.y
@@ -771,7 +830,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
         ctx.strokeStyle = '#e5e7eb'
         ctx.lineWidth = 1 / this.scale
         ctx.strokeRect(pageX + layout.x, itemY, layout.width, layout.height)
-        console.log('drawAllPagesBorder1', pageX + layout.x, itemY, layout.width, layout.height)
         // 设置填充颜色
         ctx.fillStyle = '#D9D9D9'; // 黄色
         // 绘制填充矩形
@@ -789,6 +847,10 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       })
     })
     ctx.restore()
+    console.log('this.tempArrow', this.tempArrow)
+    if(this.tempArrow.drawing && this.indexing){//绘制实时鼠标标引
+        this.drawInterimLine([this.tempArrow.start,this.tempArrow.end])
+    }
     this.drawGuideLineAll(true)//绘制标引
   }
 
@@ -803,7 +865,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
    * @param {string} photoId - 图片ID
    */
   renderSinglePhoto(ctx, pageX, itemY, layout, photoId) {
-    console.log('renderSinglePhoto', pageX, itemY, layout)
     const photo = this.photos.find(p => p.id === photoId)
     // if (!photo) return
 
@@ -875,11 +936,9 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     // 绘制文字（最后绘制文字，避免被背景覆盖）
     ctx.fillStyle = '#8C8C8C';
     let textX = layout.width //textWidth > (this.rqWidth / 2) ? drawX : drawX + (textWidth / 2)
-    console.log('fillText', textWidth, pageX, this.rqWidth * this.scale, textX, pageX + (this.rqWidth * this.scale - textX) / 2);
     // ctx.fillText(text, jxx + textWidth + (layout.width / 2), itemY + layout.height + 30, layout.width);
     this.drawCenteredTextWithEllipsis(ctx, text, jxx + (layout.width / 2), itemY + layout.height + 40, layout.width - 20, 24, 2, '16px Microsoft Yahei')
     ctx.fillStyle = 'rgba(0, 0, 0, 1)'; // 半透明黑色背景
-    console.log('drawX', layout.width, layout.width - textWidth, 'fontSize', fontSize);
     ctx.setLineDash([1, 1]);
     ctx.strokeRect(
       jxx,
@@ -904,7 +963,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       layoutMode: this.layoutMode, //页码布局类型
       coordinate: this.getCoordinate(pageX, layout), //坐标信息
     }
-    console.log('autoLayout', selectedPhotos, layout, newPages, this.pages)
     selectedPhotos.forEach((photoId, photoIndex) => {
       currentPage.list.push(photoId)
       let newlengt = currentPage.list.length
@@ -912,7 +970,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
         let oldSubArr = subArr.list.filter(i => i) || []
         return oldSubArr.length < layout.count
       });
-      console.log('firstNonEmptyIndex', firstNonEmptyIndex, currentPage.list, newPages)
       if (firstNonEmptyIndex == -1) {//不存在新增页码
         if (currentPage.list.length == layout.count || (photoIndex + 1) == selectedPhotos.length) {
           newPages.push(currentPage)
@@ -942,7 +999,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     })
     // if (currentPage.list.length > 0) newPages.push(currentPage)
     this.pages = newPages.length > 0 ? newPages : [{ list: [], }]
-    console.log('autoLayout1', layout, newPages, this.pages)
     // this.selectedPageIndex = 0
     this.resetPosition()
     return this.pages
@@ -950,12 +1006,10 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
 
   insertBlankPage(direction) {
     //direction true 右边 false 左边
-    console.log('insertBlankPage', direction)
     const layout = this.getItemSize()
     // if (this.selectedPageIndex === -1) return this.pages
     const newPages = [...this.pages]
     const PageIndex = direction ? this.selectedPageIndex + 1 : this.selectedPageIndex;
-    console.log('insertBlankPage', direction, PageIndex)
     newPages.splice(PageIndex, 0, {
       list: [],
       layoutMode: this.layoutMode, //页码布局类型
@@ -973,7 +1027,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     let newPages = [...this.pages]
     let newPageItem = {}
     const PageIndex = this.selectedPageIndex;
-    console.log('insertBlankPage', newPages, this.layoutMode, PageIndex, direction)
     let list = newPages[PageIndex] && newPages[PageIndex].list?.filter(i => i) || []
     newPages[PageIndex].layoutMode = direction
     if (list.length == 2) {
@@ -985,7 +1038,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
       newPages[PageIndex].list.length = 1
       newPages.splice(PageIndex, 0, newPageItem)
     }
-    console.log('insertBlankPage', list, newPages[this.selectedPageIndex])
     if (!direction) this.selectedPageIndex++
     this.pages = newPages
     // this.resetPosition()
@@ -1013,7 +1065,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     // 计算居中坐标偏移
     this.drawOffsetX = (wrapperWidth - totalWidth) / 2
     this.drawOffsetY = (wrapperHeight - totalHeight) / 2
-    console.log('resetPosition', this.scrollWrapper, this.wrapperWidth, this.wrapperHeight, this.drawOffsetX, this.drawOffsetY)
 
     this.drawAllPages() // 重置位置时重绘一次
   }
@@ -1024,7 +1075,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     this.resetPosition()
   }
   isActiveImg() {
-    console.log('this._selectedPageItem', this._selectedPageItem)
     return this._selectedPageItem.index !== -1 || false
   }
   /**
@@ -1036,7 +1086,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
  */
   padArrayLength(arr = [], targetLength, fillValue = null) {
     // 若原数组长度≥目标长度，直接返回原数组的拷贝（避免修改原数组）
-    console.log('padArrayLength', arr, targetLength, fillValue)
     if (arr.length >= targetLength) {
       return [...arr];
     }
@@ -1108,7 +1157,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     // 3. 处理省略号（仅当截断时）
     if (isTruncated) {
       // 从最后一行末尾删除字符，直到能放下省略号
-      console.log('截断：', lines);
       let lastLine = lines[maxLines - 1];
       while (ctx.measureText(lastLine + '...').width > maxWidth && lastLine.length > 0) {
         lastLine = lastLine.slice(0, -1);
@@ -1123,7 +1171,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     const startY = y - totalTextHeight / 2;
     // 每行的起始X = 中心X - maxWidth/2（水平居中，基于文本块宽度）
     const startX = x - maxWidth / 2;
-    console.log('x', x, 'startY:', startY, 'startX:', startX, lines);
     // 5. 逐行绘制文字（最终居中效果）
     ctx.textAlign = 'center'; // 保持left，基于startX绘制
     for (let i = 0; i < lines.length; i++) {
@@ -1139,7 +1186,7 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     this.history.push({
       imageData: imageData,
       pages: [...this.pages], // 保存当前页码信息，以便恢复时使用
-      indexingLineList: [...this.indexingLineList], // 保存索引线信息，以便恢复时使用
+      indexingLineList: [...this.indexingLineList], // 保存标引线信息，以便恢复时使用
     });
     this.currentIndex++;
     if (this.history.length > 5) {
@@ -1160,7 +1207,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     this.isHistory = false //回退不保存
     this.pages = pages
     this.currentIndex = newCurrentIndex
-    console.log('currentIndex', type, currentIndex, this.indexingLineList.length, this.history)
     this.updata({
       selectedPageItem: this._selectedPageItem,
       selectedPageIndex: this.selectedPageIndex,
@@ -1170,7 +1216,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
     this.isHistory = true
   }
   isArrayEqual(arr1, arr2) {
-    console.log('isArrayEqual', arr1, arr2)
     if (arr1.length !== arr2.length) return false;
     for (let i = 0; i < arr1.length; i++) {
       if (arr1[i] !== arr2[i]) return false;
@@ -1212,7 +1257,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
         groups.push(this.pages.slice(i, i + perSheet));
       }
 
-      console.log("groups", groups);
       groups.forEach((group, sheetIndex) => {
         if (sheetIndex > 0) pdf.addPage();
 
@@ -1246,7 +1290,6 @@ if (this.isPageDragging && this.selectedPageIndex !== -1) {
 
             if (photo) {
               const img = this.imgCache.get(photo.id);
-              console.log("img", img, img && img.complete);
               if (img && img.complete) {
                 // 图片裁切（不超出相框）
                 ctx.save();
@@ -1586,4 +1629,17 @@ exportToPDF(paperType, name, fileType = 'pdf'){
     this.exportPagesAsImages(paperType, name);
   }
 }
+async checkIndexing(){
+  let length = this.indexingLineList.length;
+  // try {
+    if ( length && await ElMessageBox.confirm('此操作将会清除所有标引是否继续？', '提示') ) {
+      this.saveHistory();
+      this.indexingLineList = [];
+      return true;
+    } 
+  // } catch (error) {
+  //   return false
+  // }
+  return false
+}
 }

src/view/case/photos/index.vue

@@ -117,7 +117,7 @@
       <!-- 左侧：照片列表与排版设置 -->
       <div class="left-panel">
         <div class="left-panel-top">
-          <div class="left-panel-title">现场照片列表</div>
+          <div class="left-panel-title">现场照片</div>
           <div class="photo-list">
             <!-- :class="{ selected: selectedPhotos.includes(photo.id) }" -->
             <div
@@ -366,13 +366,13 @@ const fullScreenChange = () => {
   editor.value.bindScrollWrapper(oldCanvas);
 };
 // 切换排版模式
-const handleLayoutChange = (value) => {
+const handleLayoutChange = async (value) => {
   layoutMode.value = value;
   if (editor.value) {
     let isActiveItem = editor.value.isActiveImg();
     // selectedPageIndex.value = editor.value.selectedPageIndex
-    console.log("isActiveItem", isActiveItem, selectedPageIndex.value);
-
+    const check = await editor.value.checkIndexing();
+    console.log("isActiveItem", check, isActiveItem, selectedPageIndex.value);
     if (selectedPageIndex.value == -1 || isActiveItem) {
       //未选中页面
       editor.value.layoutMode = layoutMode.value;
@@ -383,7 +383,8 @@ const handleLayoutChange = (value) => {
     }
   }
 };
-const autoLayouts = () => {
+const autoLayouts = async () => {
+  const check = await editor.value.checkIndexing();
   selectedPhotosbf.value = selectedPhotos.value;
   autoLayout();
 };
@@ -398,8 +399,9 @@ const autoLayout = () => {
   }
   // editor.value.drawAllPages()
 };
-const handleAddType = (type) => {
-  console.log("handleAddType", type);
+const handleAddType = async (type) => {
+  const check = await editor.value.checkIndexing();
+  console.log("handleAddType", type, check);
   insertBlankPage(type);
 };
 // 插入空白页
@@ -426,8 +428,9 @@ const changeIndexing = async () => {
   }
 };
 // 删除选中页
-const deleteSelectedPage = () => {
+const deleteSelectedPage = async () => {
   if (editor.value) {
+    const check = await editor.value.checkIndexing();
     pages.value = editor.value.deleteSelectedPage();
     // selectedPageIndex.value = editor.value.selectedPageIndex;
   }
@@ -450,8 +453,8 @@ const handleCanvasClick = (e) => {
 
 // 拖拽照片开始
 const handleDragStart = (e, photo) => {
-  draggedPhoto.value = photo;
-  e.dataTransfer.effectAllowed = "copy";
+  draggedPhoto.value = photo; // 记录当前拖拽的照片
+  e.dataTransfer.effectAllowed = "copy"; // 设置拖拽效果为复制
 };
 
 // 拖拽悬浮
@@ -461,9 +464,10 @@ const handleDragOver = (e) => {
 };
 
 // 拖拽放下
-const handleDrop = (e) => {
+const handleDrop = async (e) => {
   e.preventDefault();
   if (!draggedPhoto.value || !editor.value) return;
+  const check = await editor.value.checkIndexing();
 
   // 获取拖拽到的页面和位置
   const position = editor.value.getPhotoPositionInPage(e);

src/view/material/sceneImg.vue

@@ -208,7 +208,7 @@
                   class="newbut"
                   :icon="Edit"
                   @click="handledrawCasePhotos([])"
-                  >填写</el-button
+                  >制卷</el-button
                       
                 >
                 <el-button class="newbut" @click="exportToPDF(true)" :icon="Download">下载</el-button>