zydx-plus 1.36.641 → 1.36.643

package/src/components/flip/src/flip.vue

@@ -1,41 +1,53 @@
+/**
+ * flip 组件 - PDF翻书/阅读器组件
+ * 基于 PDF.js 实现 PDF 文档的在线预览，支持单页/双页模式、画笔批注、
+ * 文字标注、链接添加、拓展阅读等功能。提供 Canvas 绘制能力，支持
+ * 画笔、矩形、圆形、直线、箭头、文字等批注工具。
+ */
 <template>
+  <!-- 文档视图主容器 -->
   <div class="docView" @click="extendRightDel" @mouseleave="mouseUpTest" @mouseup="mouseUpTest">
+    <!-- 全屏/视图切换工具栏（单/双页切换） -->
     <div class="full-screen" v-if="false">
       <div class="full-screen-img" @click.stop="fullScreen">
-        <!--        <div class="full-screen-title" style="" v-if="showText">全屏查看</div>-->
         <img @mouseover="showText=true" @mouseout="showText=false" src="../img/full-screen.png" alt="" title="全屏查看">
       </div>
+      <!-- 双页视图下的切换按钮 -->
       <div class="full-screen-img" v-if="doublePage" @click.stop="changeView">
-        <!--        <div class="full-screen-title" style="" v-if="showMultiText">多页查看</div>-->
         <img @mouseover="showMultiText=true" @mouseout="showMultiText=false" src="../img/multi-page.png" alt="" title="多页查看">
       </div>
+      <!-- 单页视图下的切换按钮 -->
       <div class="full-screen-img" v-else @click.stop="changeView">
-        <!--        <div class="full-screen-title" style="" v-if="showSingleText">单页查看</div>-->
         <img @mouseover="showSingleText=true" @mouseout="showSingleText=false" src="../img/single-page.png" alt="" title="单页查看">
       </div>
+      <!-- 笔迹工具按钮 -->
       <div class="full-screen-img" v-if="!doublePage&&isShowPen" @click.stop="showPen">
-        <!--        <div class="full-screen-title" style="" v-if="showSingleText">单页查看</div>-->
-        <!--        <div class="full-screen-title" style="" v-if="showSingleText">单页查看</div>-->
         <i class="iconfont zydx-huabi1" title="笔迹"/>
       </div>
     </div>
+
+    <!-- PDF 画布区域 -->
     <div>
       <div class="book" ref="book" @click.right="rightMenu($event)">
         <div class="pages">
+          <!-- 双页模式渲染 -->
           <div class="wrap-box" ref="wrap-box" v-show="doublePage">
             <div class="wrap wrap-block" :ref="`wrap-${item.id}`" v-for="(item,index) in pageInfoArr" :key="index">
               <div class="wrap-can" v-show="!loading" ref="wrapCanBox">
+                <!-- 右键菜单：添加链接 -->
                 <div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
                   <div class="extend-right-cont" @click.stop="extendRight(null)">
-                    <!-- <img src="../img/qubiezhen.svg" alt=""> -->
                     <p>添加链接</p>
                   </div>
                 </div>
+                <!-- 文本层：显示 PDF 提取的文字内容 -->
                 <div class="textLayer" ref="textLayer">
                   <span :dir="item2.dir" :style="styleText(item2,item.styles, item.id)" v-for="(item2) in item.items">{{ item2.str }}</span>
                 </div>
+                <!-- 批注层：显示链接和拓展阅读标注 -->
                 <div class="annotationLayer" ref="annotationLayer">
                   <template v-for="(item,index) in annotations">
+                    <!-- 拓展阅读类型标注 -->
                     <div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
                       <div class="magnifier-head">
                         <div class="magnifier-title">拓展阅读</div>
@@ -49,14 +61,18 @@
                         <div class="magnifier-list-item" @click="annotationTap(item2)" v-for="(item2,index2) in item.list">{{ index2+1 }}.{{ item2?.title }}</div>
                       </div>
                     </div>
+                    <!-- 普通链接类型标注 -->
                     <section v-else tabindex="1000" @click="annotationTap(item,item.id)" :style="styleAnnotation(item)">
                       <a :href="item.url" target="_blank"></a>
                     </section>
                   </template>
                 </div>
+                <!-- 批注绘制画布（上层，可交互） -->
                 <canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
                         @mousemove.stop="mouseMove" :id="item.id"></canvas>
+                <!-- PDF 渲染画布（底层） -->
                 <canvas :id="`${item.id}2`"></canvas>
+                <!-- 文字批注输入框/拖拽框 -->
                 <div
                     v-show="state === 'text'&&textY2>0&&textX2>0"
                     class="text-frame"
@@ -75,19 +91,24 @@
               </div>
             </div>
           </div>
+
+          <!-- 单页模式渲染 -->
           <div class="wrap" ref="wrap" v-show="!doublePage">
             <div class="wrap-can" v-show="!loading" ref="wrapCan">
+              <!-- 右键菜单：添加链接 -->
               <div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
                 <div class="extend-right-cont" @click.stop="extendRight(null)">
-                  <!-- <img src="../img/qubiezhen.svg" alt=""> -->
                   <p>添加链接</p>
                 </div>
               </div>
+              <!-- 文本层 -->
               <div class="textLayer" ref="textLayer">
                 <span :dir="item.dir" :style="styleText(item,styles)" v-for="(item,index) in items">{{ item.str }}</span>
               </div>
+              <!-- 批注层 -->
               <div class="annotationLayer" ref="annotationLayer">
                 <template v-for="(item,index) in annotations">
+                  <!-- 拓展阅读类型标注（单页模式，带弹出列表） -->
                   <div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
                     <img @click.stop="magnifierTap($event,item)" src="../img/dingwei.png" alt="" />
                     <div class="magnifier-list" v-if="item.show" :style="item.style">
@@ -104,14 +125,18 @@
                       </div>
                     </div>
                   </div>
+                  <!-- 普通链接标注 -->
                   <section v-else tabindex="1000" @click="annotationTap(item)" :style="styleAnnotation(item)">
                     <a :href="item.url" target="_blank"></a>
                   </section>
                 </template>
               </div>
+              <!-- 批注绘制画布 -->
               <canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
                       @mousemove.stop="mouseMove" :id="`${id}`"></canvas>
+              <!-- PDF 内容画布 -->
               <canvas :id="`${id}2`"></canvas>
+              <!-- 文字批注输入框 -->
               <div
                   v-show="state === 'text'&&textY2>0&&textX2>0"
                   class="text-frame"
@@ -129,20 +154,25 @@
               </div>
             </div>
           </div>
+
+          <!-- 左侧翻页按钮（上一页） -->
           <div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}" v-if="!loading&&!doublePage"
                @click.stop="flipRight(pageIndex-=1,false)">
             <img v-if="pageIndex !== 1"
-                 src="data:image/png;base64,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"
+                 src="data:image/png;base64,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"
                  alt=""/>
           </div>
+          <!-- 右侧翻页按钮（下一页） -->
           <div class="page-but-right" :style="{cursor: pageIndex === pdfPages?'default':'pointer'}" v-if="!loading&&!doublePage"
                @click.stop="flipLeft(pageIndex+=1,false)">
             <img v-if="pageIndex !== pdfPages"
-                 src="data:image/png;base64,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"
+                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAACB9JREFUeF7tms1xW0kMBh8zUSgOxT5IxSzWTkM8rDOxExO5JRdVprQiOYMBMMCgfbQHP68/dOkg7zb+QAACVwnsYAMBCFwngCBcBwRuEEAQzgMCCMINQEBGgJ8gMm5UFSGAIEWC5jNlBBBExo2qIgQQpEjQfKaMAILIuFFVhACCFAmaz5QRQBAZN6qKEECQIkHzmTICCCLjRlURAghSJGg+U0YAQWTcqCpCAEGKBM1nygggiIwbVUUIIEiRoPlMGQEEueC23+8fXl5e/t3tdr+fn59/yJBStRIBBDmneSHHl/NffUeSlU5d9i0Ism3bJ3K80UQS2V0tU1VekBtyIMkyZy7/kNKCNMiBJPLbWqKyrCAdciDJEqcu+4iSggjkQBLZfaWvKifIgBxIkv7c+z+glCAKciBJ/42lrigjiKIcSJL65PuWLyGIgRxI0ndnaV8vL4ihHEiS9uzbF19ekMfHx6+73e6fbdse2rF0v+Q37t3IchQsL8hrDE9PT6+CfEWSHEcZacsSgiBJpJPLtUsZQZAk12FG2baUIEgS5ezy7FFOECTJc5wRNi0pCJJEOL0cO5QVBElyHOjsLUsLgiSzzy/+/PKCIEn8I525IYKc6fPLxJlnGHc2glxkgyRxD3XWZgjygTySzDrFmHMR5JNckCTmsc7YCkGuUEeSGecYbyaC3MgESeIdrPdGCHKHOJJ4n2SseQjSkAeSNEBa9AmCNAaLJI2gFnuGIB2BIkkHrEWeIkhnkEjSCSz5cwQRBIgkAmhJSxBEGBySCMElK0OQgcCQZABeklIEGQwKSQYBBi9HEIWAkEQBYtAWCKIUDJIogQzWBkEUA0ESRZhBWiGIchBIogx0cjsEMQgASQygTmqJIEbgkcQIrHNbBDEEjiSGcJ1aI4gxaCQxBmzcHkGMAb+2RxIHyEYjEMQI7Me2SOIEWnkMgigDvdUOSRxhK41CECWQrW2QpJVUjHcIMiEHJJkAXTgSQYTgRsuQZJSgTz2C+HD+dAqSTITfOBpBGkFZPUMSK7I6fRFEh+NQFyQZwmdajCCmeNubI0k7K8+XCOJJ+84sJAkUxnkVBAmWCZLECgRBYuXxZxskiRMKgsTJ4t0mSBIjGASJkQO/JwmaA4IEDeZtLX6SzA0IIebyb5qOJE2YTB4hiAlW/aZIos+0pSOCtFAK8gZJ/INAEH/mQxORZAhfdzGCdCObX4AkfhkgiB9r1UlIoorzajME8eFsMgVJTLC+a4og9oxNJyCJKd4NQWz5unRHEjvMCGLH1rUzktjgRhAbrlO6Iok+dgTRZzq1I5Lo4kcQXZ4huiGJXgwIoscyVCck0YkDQXQ4huyCJOOxIMg4w9AdkGQsHgQZ45eiGknkMSGInF2qSiSRxYUgMm4pq5CkPzYE6WeWugJJ+uJDkD5e6V/v9/svx+Pxl+WHnE6nb4fD4aflDK/eCOJFOsAc5OgPAUH6maWsQA5ZbAgi45aqCjnkcSGInF2KSuQYiwlBxviFrkaO8XgQZJxhyA7IoRMLguhwDNUFOfTiQBA9liE6IYduDAiiy3NqN+TQx48g+kyndEQOG+wIYsPVtSty2OFGEDu2Lp2RwxYzgtjyNW2PHKZ4/zRHEHvGJhOQwwTr/5oiiA9n1SnIoYrzZjME8WOtMgk5VDA2N0GQZlTzHyKHfwYI4s9cNBE5RNiGixBkGKF9A+SwZ3xtAoLMY980GTmaMJk9QhAztOONkWOc4WgHBBklaFSPHEZgO9siSCcwj+fI4UG5bQaCtHFye4UcbqibBiFIEyafR8jhw7lnCoL00DJ8ixyGcAdaI8gAPK1S5NAiqd8HQfSZdnVEji5c7o8RxB3534HIMRF+42gEaQSl/Qw5tIna9EMQG643uyLHBOjCogBETY0k4gTNNyCIOWL9AcinzzTKTgSZCH3FSIRcEf2cmRNkjt/SXUFbWr6d4Qhyyl9OcHMcChXQpDCQEGNGk6i1kAK54lUBBkMBklmABrdiyBGAW/SHCmboFNAICBJM6FKJ4KkUHgAMYgUJA1CSTxBkAQqAWEOAUHMESsPQEIb0FWAIF2Y+rgEyBQ9LNIwXQQJHP4UKpIkMBjQHEGCnUc3caqCJB0mk+0RZBJg4fYgF4IIoZYqRpBCYYFEGGiB5QApEKTIg1IRkiQRLMFDEA0mZNRoF6RwXBJRGi9FEJkoNKjWKwtkCgZQIEh0AQuILO/zC7JA5siKIALAE6pIgmQAaxg4RRI5hBgzMlKXAEHikVJk0RqSCNDFXYogcQnJZR0vCLIBJ3ZCCwRJowUV0SYFyUCXMsHAKg2KQDKNEiQICwIEQcIqLEuSjBLGk0UQHYSTCUKSFJKO4AghSAJDKYpa2R9IgiiECIIUEbRojBJIUqYkygJE2QqQciLWJIEidIp1jPstQgSP0MnAQeEdMUdEwX9kkgSEG4ciCFc/HEIIgBtw8mgJkAXNA+iQyXxANkKXzWAB0ySVQsqCEgqSsHC4X4FCCAXEsBlCAAAk2gSwUAvcTiC4g0EeBIh6B2r5A4Mp8MAiKABMLrXJ5gOQ6AMiIZTJLhApkQBkEk2FIjwQ5IKAYBX0mAojk1SMxATIqZkAoSKqFhYCESYCBMIjkMxIzIAgTVHi1i8wCqjSpQgIiBbLSh0GklmOEL3AFEER0QmPQk3WwAAAAASUVORK5CYII="
                  alt=""/>
           </div>
         </div>
       </div>
+
+      <!-- 底部翻页按钮（上一页/下一页） -->
       <div class="but-wrap" v-if="butShow && !doublePage">
         <button class="but-brown" :disabled="pageIndex === 1" :class="{'but-act': pageIndex === 1}"
                 @click.stop="flipRight(pageIndex-=1,false)">上一页
@@ -152,6 +182,8 @@
         </button>
       </div>
     </div>
+
+    <!-- 加载动画遮罩层 -->
     <div v-if="loading" class="loading-back">
       <div class="loading-cont">
         <div class="loadings">Loading</div>
@@ -161,6 +193,7 @@
 </template>
 
 <script>
+// ==================== 依赖导入 ====================
 import Mess from '../../tipBox/index'
 import {debounce} from '../../utils'
 import * as PdfJs from 'pdfjs-dist'
@@ -168,154 +201,177 @@ import "pdfjs-dist/build/pdf.worker.mjs";
 import Range from "../../tagging/src/range";
 
 import img from '../img/huabi.png'
+// 缓存已加载的 PDF 文档对象
 let pdfs = {};
 
 export default {
   name: "zydx-flip",
+
+  // ==================== 组件状态数据 ====================
   data() {
     return {
-      mouseImg:img,
-      pdfPages: 0,
-      imgArr: '',
+      mouseImg:img, // 画笔光标图标
+      pdfPages: 0, // PDF 总页数
+      imgArr: '', // 当前页 Canvas Base64 数据
       hei: 0,
-      pageIndex: this.page,
+      pageIndex: this.page, // 当前页码（从 props.page 初始化）
       show: false,
       load: 0,
       loadWidth: 0,
       pages: false,
       pagesData: [],
       opacity: 1,
-      id: null,
-      loading: false,
-      canvasStyle: {},
+      id: null, // Canvas 元素唯一标识
+      loading: false, // 加载状态
+      canvasStyle: {}, // Canvas 容器样式配置
       oneShow: false,
-      flipRights: false,
-      flipLefts: false,
-      oneIndex: 'right',
-      scales: 1.35,
-      timer: null,
+      flipRights: false, // 右翻动画状态
+      flipLefts: false, // 左翻动画状态
+      oneIndex: 'right', // 翻页方向（left/right）
+      scales: 1.35, // PDF 缩放比例
+      timer: null, // 防抖定时器
       resultImg: '',
-      startX: 0,
-      startY: 0,
-      isDrawing: false,
-      sratio: 2,
-      ctx: null,
-      lineWidth: 2,
-      points: [],
+      startX: 0, // 画笔起始 X 坐标
+      startY: 0, // 画笔起始 Y 坐标
+      isDrawing: false, // 是否正在绘制
+      sratio: 2, // Canvas 清晰度系数（retina 屏适配）
+      ctx: null, // 批注画布 2D 上下文
+      lineWidth: 2, // 画笔线宽
+      points: [], // 所有批注数据
       setShow: false,
       flipToolShow2: false,
       flipToolShow: false,
-      color: '#000',
+      color: '#000', // 画笔/文字颜色
       text: '',
-      state: null,
-      fontSize: 14,
-      textX: 0,
-      textY: 0,
-      textX2: 0,
-      textY2: 0,
-      textStart: false,
-      contenteditable: false,
-      linkId: null,
-      pointsSelect: [],
-      checkDrawing: false, // 是否在画板以外画笔
-      checkX: 0,
-      checkY: 0,
-      textWidth: 0,
-      textHeight: 0,
-      textDownX: 0,
-      textDownY: 0,
-      textMoveStart: false,
+      state: null, // 当前工具状态: null/mouse | brush | rectangle | circular | straight | arrow | text | del
+      fontSize: 14, // 文字字号
+      textX: 0, // 文字起始 X 坐标
+      textY: 0, // 文字起始 Y 坐标
+      textX2: 0, // 文字当前 X 坐标
+      textY2: 0, // 文字当前 Y 坐标
+      textStart: false, // 是否开始输入文字
+      contenteditable: false, // 文字框是否可编辑
+      linkId: null, // 当前绘制图形的链接 ID
+      pointsSelect: [], // 当前选中的图形数据
+      checkDrawing: false, // 是否在画板以外开始交互
+      checkX: 0, // 选中操作的起始 X
+      checkY: 0, // 选中操作的起始 Y
+      textWidth: 0, // 文字框最小宽度
+      textHeight: 0, // 文字框最小高度
+      textDownX: 0, // 文字框拖拽起始 X
+      textDownY: 0, // 文字框拖拽起始 Y
+      textMoveStart: false, // 是否开始拖拽文字框
       chartIndexID: null, // 当前点击的图形索引
-      signStart: false,
-      doublePage:false,
-      doubleImgArr: [],
-      pageInfoArr:[],
+      signStart: false, // 是否开始标记模式
+      doublePage:false, // 是否为双页视图
+      doubleImgArr: [], // 双页模式下各页的 Canvas Base64 数据
+      pageInfoArr:[], // 双页模式下各页的配置信息
       showText:false,
       showMultiText:false,
       showSingleText:false,
-      boxWidth:'',
-      resizeObserver: null,
+      boxWidth:'', // 容器宽度
+      resizeObserver: null, // 容器尺寸变化监听器
       totalPages: 0,
-      items: [],
-      styles: {},
-      viewport: null,
-      doc: null,
-      viewWidth: 0,
-      viewHeight: 0,
-      annotations: [],
-      annotationsInit: [],
+      items: [], // PDF 文本内容数组
+      styles: {}, // PDF 文本样式映射
+      viewport: null, // PDF 视口对象
+      doc: null, // PDF 页面对象
+      viewWidth: 0, // 视口宽度
+      viewHeight: 0, // 视口高度
+      annotations: [], // 标注数据（合并外部传入和PDF内置标注）
+      annotationsInit: [], // PDF 自带标注原始数据
       extendStyle: {
         left: '0px',
         top: '0px'
-      },
-      rightMenuShow: false,
-      annData: {}
+      }, // 右键菜单定位样式
+      rightMenuShow: false, // 是否显示右键菜单
+      annData: {} // 预存的标注数据
     }
   },
+
+  // ==================== Props 属性定义 ====================
   props: {
+    // 是否禁用右键菜单
     isDisableRightClick: {
       type: Boolean,
       default: false
     },
+    // PDF 文件 URL 地址
     source: {
       type: String,
       default: ''
     },
+    // 是否为单页模式（已废弃，建议使用 isDoublePage）
     singlePage: {
       type: Boolean,
       default: false
     },
+    // 是否显示底部翻页按钮
     butShow: {
       type: Boolean,
       default: false
     },
+    // 初始页码
     page: {
       type: Number,
       default: 1
     },
+    // PDF 缩放比例
     scale: {
       type: Number,
       default: 1.35
     },
+    // 外部容器尺寸样式（用于自适应缩放计算）
     scaleStyle: {
       type: Object,
       default: () => {
       }
     },
+    // 外部传入的已有批注数据
     pointsData: {
       type: Array,
       default: () => []
     },
+    // 阅读笔模式
     readingPen: {
       type: Boolean,
       default: false
     },
+    // 是否为双页模式
     isDoublePage: {
       type: Boolean,
       default: false
     },
+    // 是否显示画笔工具
     isShowPen:{
       type: Boolean,
       default: true
     },
+    // 是否允许鼠标点击穿透（批注层穿透）
     isPointer: {
       type: Boolean,
       default: true
     },
+    // 外部传入的标注数据
     annotationsData: {
       type: Array,
       default: () => []
     },
+    // 是否允许右键交互
     rightClick: {
       type: Boolean,
       default: true
     },
+    // 是否为只读模式（禁止添加标注）
     readOnly: {
       type: Boolean,
       default: true
     }
   },
+
+  // ==================== 监听器 ====================
   watch: {
+    // 监听外部标注数据变化
     annotationsData: {
       handler: function (val) {
         if(typeof val === Object) {
@@ -340,27 +396,31 @@ export default {
       deep: true,
       immediate: true
     },
+    // 监听外部批注数据变化，重新渲染
     pointsData: {
       handler: function (val) {
         if (!val) return
         this.points = val
-        this.processing()
+        this.processing() // 重绘所有批注
       },
       deep:true,
       immediate: true
     },
+    // 监听双页模式切换
     isDoublePage: {
       handler: function (val) {
         this.doublePage = val
       },
       immediate: true
     },
+    // 监听页码外部变化
     page: {
       handler: function (val) {
         this.pageIndex = val
       },
       immediate: true
     },
+    // 监听 PDF 源文件变化，重新加载
     source: {
       handler: function (v) {
         this.sourceUrl()
@@ -368,6 +428,7 @@ export default {
       deep: true,
       immediate: true
     },
+    // 监听容器尺寸变化，重新计算缩放比例
     scaleStyle: {
       handler: function (val) {
         if (!val) return
@@ -375,18 +436,21 @@ export default {
           clearTimeout(this.timer)
         }
         this.timer = setTimeout(() => {
+          // 根据容器宽度动态计算缩放比
           this.scales = val.width / 550
           if (this.scales >= this.scale) {
-            this.scales = this.scale
+            this.scales = this.scale // 不超过最大缩放比
           }
         }, 200)
       },
       deep: true
     },
+    // 监听双页/单页切换，重新初始化页面信息
     doublePage:{
       handler: function (newVal,oldVal){
         if(oldVal !== undefined){
           if(newVal){
+            // 切换到双页模式
             this.pageInfoArr = []
             this.doubleImgArr = []
             this.pageIndex = this.page
@@ -398,6 +462,7 @@ export default {
             }
             this.sourceUrl()
           }else {
+            // 切换到单页模式
             this.id = 'canvas-wrap' + this.generateUniqueKey()
             this.sourceUrl()
           }
@@ -406,6 +471,7 @@ export default {
       deep: true,
       immediate: true
     },
+    // 监听缩放比例变化
     scale:{
       handler: function (val){
         this.scales = val
@@ -413,10 +479,12 @@ export default {
       deep: true,
       immediate: true
     },
+    // 监听工具状态变化，切换画笔光标样式
     state:{
       handler: function (val){
         this.$nextTick(()=>{
           if(val==='brush'){
+            // 画笔模式下使用自定义光标图标
             this.$refs.wrapCan.setAttribute('style',`cursor:url(${this.mouseImg}) 0 16, auto;`)
           }else {
           this.$refs.wrapCan.style.cursor = "auto"
@@ -427,31 +495,42 @@ export default {
       immediate: true
     }
   },
+
+  // ==================== 事件声明 ====================
   emits: ['flip','annotationTap', 'annotationsSend', 'empty'],
+
+  // ==================== 生命周期 ====================
   mounted() {
+    // 单页模式下生成 Canvas 唯一标识
     if (!this.doublePage) {
       this.id = 'canvas-wrap' + this.generateUniqueKey()
     }
+    // 监听键盘事件（用于删除批注）
     window.addEventListener('keydown', this.handleKeyEvent)
-    // 在画板以外松开鼠标后冻结画笔
-    // document.onmouseup = () => {
-    //   if (this.isDrawing || this.checkDrawing) this.mouseUp()
-    //   this.textMoveStart = false
-    // }
+    // 注册容器尺寸变化监听（响应式重新渲染）
     this.setResizeObserver()
   },
   beforeDestroy() {
+    // 清理键盘事件监听
     window.removeEventListener('keydown', this.handleKeyEvent)
+    // 取消尺寸变化监听
     this.cancelResizeObserver()
   },
+
+  // ==================== 方法定义 ====================
   methods: {
+    // ----- 标注相关方法 -----
+
+    // 清空拓展阅读列表
     annEmpty(v) {
       this.$emit('empty',v)
     },
+    // 点击拓展阅读图标，显示/隐藏弹出列表
     magnifierTap(e,v) {
-      if(!v.show) this.extendRightDel()
+      if(!v.show) this.extendRightDel() // 关闭其他弹出框
       v.show = !v.show
       setTimeout(() => {
+        // 计算弹出框位置：靠近右侧时向左弹出，靠近底部时向上弹出
         const x = (v.rect[0] * this.scales / this.viewport?.width) * 100
         const y = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
         if(x > 50) {
@@ -466,6 +545,7 @@ export default {
         }
       },20)
     },
+    // 关闭右键菜单
     extendRightDel() {
       this.rightMenuShow = false
       this.annotations.map(x => {
@@ -473,9 +553,11 @@ export default {
         return x
       })
     },
+    // 点击标注（链接跳转或添加标注）
     annotationTap(v, n ) {
-      if(v.url) return
+      if(v.url) return // 有链接的标注直接导航
       if(n === 'add') {
+        // 触发添加标注事件（带回标注参数让外部保存）
         this.$emit('annotationsSend', {
           id: v.id,
           page: v.page,
@@ -487,7 +569,7 @@ export default {
         this.$emit('annotationTap',v)
       }
     },
-    // 扩展点击
+    // 右键添加链接/标注
     extendRight(i) {
       this.extendRightDel()
       this.$emit('annotationsSend', {
@@ -496,7 +578,14 @@ export default {
         page: i? i + 1 : this.pageIndex,
       })
     },
-    // 右键菜单
+    // 查看点是否存在
+    doesThereExistAPoint(rect) {
+      const currenRect = JSON.stringify(rect)
+      return this.annotationsData.some(item => {
+        return JSON.stringify(item.rect) === currenRect
+      })
+    },
+    // 右键菜单处理：在文本上右键时弹出"添加链接"
     rightMenu(e) {
       if (this.isDisableRightClick) {
         return
@@ -506,6 +595,7 @@ export default {
       if(!this.rightClick) return;
       if(this.doublePage) return;
       if(e.target.nodeName === 'SPAN') {
+        // 计算文本位置以生成标注矩形区域
         const wid = this.$refs.wrap.offsetWidth - 10
         const endOffset = this.getRange().endOffset
         const style = e.target.attributes.style.value
@@ -516,30 +606,36 @@ export default {
         const x2 = x1 + 15
         const y2 = y1 + 15
         const left = e.target.offsetLeft + e.offsetX
-        this.rightMenuShow = true
+        // this.rightMenuShow = true
         this.extendStyle = {
           left: left + 'px',
-          // top: `calc(${Number(topMatch) + '%'} - 50px)`
           top: `calc(${Number(topMatch) + '%'} - 30px)`
         }
+        // 预存标注数据
         this.annData = {
           rect: [x1/this.scales,y1/this.scales,x2/this.scales,y2/this.scales],
           type: 'tag',
           borderStyle: {width: 0},
           borderColor: [0,0,0]
         }
+        // 判断当前坐标点是否存在，存在不显示右键菜单
+        if(this.annotationsData.length > 0) {
+          this.rightMenuShow = !this.doesThereExistAPoint(this.annData.rect)
+        } else {
+          this.rightMenuShow = true
+        }
       }
     },
-    // 添加标注
+    // 选中文本后添加标注（翻转文本标注）
     flipText(next) {
       let timestamp = 'flip' + Math.random().toString(36).substr(2)
-      this.replaceSelectedStrByEle(timestamp)
+      this.replaceSelectedStrByEle(timestamp) // 给选中文本添加标记类名
       const elements = document.querySelectorAll(`.${timestamp}`)[0];
       if(!elements) return next(false)
       const wid = this.$refs.wrap.offsetWidth - 10
       const hei = this.$refs.wrap.offsetHeight - 10
       const hei2 = elements.offsetHeight - 8
-      if(elements.offsetParent.nodeName === 'SPAN') { // 判断是否有上级标签
+      if(elements.offsetParent.nodeName === 'SPAN') { // 选中的文本有父级 span 标签
         const parent = elements.offsetParent
         const x1 = this.viewport.width * ((elements.offsetLeft + parent.offsetLeft + 3)/wid)
         const y1 = this.viewport.height * (1 - (parent.offsetTop + hei2)/hei)
@@ -555,7 +651,7 @@ export default {
           page: this.pageIndex,
           data: ann
         })
-      }else {
+      }else { // 直接选中的文本节点
         const style = elements.firstChild.attributes.style.value
         const leftMatch = style.match(/left:\s*([^;]+)/);
         const topMatch = style.match(/top:\s*([^;]+)/);
@@ -581,7 +677,7 @@ export default {
         })
       }
     },
-    // 选中文本添加样式
+    // 给选中文本包裹 inline 元素添加样式
     replaceSelectedStrByEle(className) {
       const range = this.getRange();
       range.applyInlineStyle('i', {
@@ -589,7 +685,7 @@ export default {
       });
       range.select();
     },
-    // 获取选中文本内容
+    // 获取当前选中的文本 Range 对象
     getRange() {
       const range = new Range(window.document);
       const sel = window.getSelection();
@@ -600,6 +696,7 @@ export default {
       }
       return range
     },
+    // 根据标注数据计算 CSS 定位样式（百分比定位）
     styleAnnotation(v) {
       if(!v) return {}
       const x1 = (v.rect[0] * this.scales / this.viewport?.width) * 100
@@ -614,6 +711,7 @@ export default {
         'border': `${v.borderStyle.width}px solid rgb(${v.borderColor[0]},${v.borderColor[1]},${v.borderColor[2]})`
       }
     },
+    // 根据文本位置计算 CSS 定位样式（用于 textLayer 渲染）
     styleText(v,n, id) {
       if(!v) return {}
       const textLayer = id? this.$refs[`wrap-${id}`][0] : this.$refs.textLayer;
@@ -630,16 +728,26 @@ export default {
         'top': `${top}%`,
       }
     },
+
+    // ----- 批注数据管理方法 -----
+
+    // 添加批注到 points 数组
     pointsAdd(v) {
       this.points.push(v)
     },
+    // 获取当前页码
     getPage() {
       return this.pageIndex
     },
+    // 在画板外松开鼠标时结束绘制（从父组件 mouseleave/mouseup 调用）
     mouseUpTest(){
       if (this.isDrawing || this.checkDrawing) this.mouseUp()
       this.textMoveStart = false
     },
+
+    // ----- ResizeObserver 容器尺寸监听 -----
+
+    // 初始化容器尺寸监听，尺寸变化时重新渲染 PDF
     setResizeObserver() {
       setTimeout(() => {
         const el = this.$refs.book;
@@ -652,19 +760,24 @@ export default {
             } else {
               this.readPdf()
             }
-          }, 150); // 根据需求调整延迟时间
+          }, 150);
         });
         this.resizeObserver.observe(el);
       }, 300)
     },
+    // 取消容器尺寸监听
     cancelResizeObserver() {
       const el = this.$refs.book;
       this.resizeObserver.unobserve(el);
     },
+
+    // ----- 视图控制方法 -----
+
+    // 显示画笔工具
     showPen() {
       this.$emit('showPen', true)
-      // this.isDraw = true
     },
+    // 切换单页/双页视图
     changeView() {
       this.$emit('changeViewDoublePage', !this.doublePage)
       setTimeout(() => {
@@ -674,9 +787,13 @@ export default {
         }
       }, 500)
     },
+    // 全屏查看（在新窗口打开 PDF）
     fullScreen() {
       window.open(this.source)
     },
+
+    // ----- 工具配置方法 -----
+
     colorTap(v) {
       this.color = v
     },
@@ -686,32 +803,42 @@ export default {
     lineWidthTap(v) {
       this.lineWidth = Number(v)
     },
+
+    // ----- 键盘事件处理 -----
+
     handleKeyEvent(e) {
       const {key} = e
+      // Backspace/Delete 删除最后一个批注
       if (key === 'Backspace' || key === 'Delete') {
         if (this.contenteditable) return
         this.backward()
       }
     },
-    // 删除
+
+    // ----- 工具状态切换方法 -----
+
+    // 删除模式
     delTap() {
       this.state = 'del'
     },
+    // 清空所有批注
     empty() {
       this.setShow = false
       this.points = []
       this.clearRect(true)
       this.$emit('drawEnd', this.points,'empty')
     },
+    // 持久化批注数据
     preserve() {
       this.setShow = false
       return this.points
     },
-    // 后退
+    // 撤销最后一个批注（后退）
     backward() {
       this.setShow = false
       if (this.points.length === 0) return
       if (this.points[this.points.length - 1].type === 'line') {
+        // 线条类型需删除同 ID 的所有点
         const id = this.points[this.points.length - 1].id
         for (let i = 0; i < this.points.length; i++) {
           if (this.points[i].id === id) {
@@ -725,41 +852,41 @@ export default {
       this.$emit('drawEnd', this.points,'backward')
       this.clearRect()
     },
-    // 鼠标
+    // 鼠标模式（选择/移动工具）
     mouse() {
       this.state = null
       this.setShow = false
     },
-    // 画笔
+    // 画笔模式
     brush() {
       this.state = 'brush'
       this.setShow = true
     },
-    // 文字字号
+    // 设置文字字号
     textSizeTap(v) {
       this.fontSize = Number(v)
     },
-    // 矩形
+    // 矩形工具
     rectangleTap() {
       this.state = 'rectangle'
       this.setShow = true
     },
-    // 圆形
+    // 圆形工具
     circularTap() {
       this.state = 'circular'
       this.setShow = true
     },
-    // 直线
+    // 直线工具
     straightTap() {
       this.state = 'straight'
       this.setShow = true
     },
-    // 箭头
+    // 箭头工具
     arrowTap() {
       this.state = 'arrow'
       this.setShow = true
     },
-    // 文字
+    // 文字工具
     textTap(v) {
       this.turnText()
       this.state = 'text'
@@ -771,15 +898,20 @@ export default {
       this.textWidth = 100
       this.textHeight = this.fontSize + 1
       this.$refs.textInput.innerText = ''
-      if (v === 'sign') this.signStart = true
+      if (v === 'sign') this.signStart = true // 签名标记模式
     },
+    // 设置画笔颜色
     strokeColTap(v) {
       this.color = v
     },
+    // 设置画笔线宽
     strokeTap(v) {
       this.lineWidth = Number(v)
     },
-    // 查询当前点击的图形
+
+    // ----- 鼠标交互：选择/移动/删除图形 -----
+
+    // 按下时检测点击位置对应的图形
     checkDown(e) {
       e = e || event
       e.preventDefault()
@@ -794,7 +926,7 @@ export default {
         if (this.points[i].index === this.pageIndex) {
           const x1 = this.points[i].x * this.scales / this.points[i].scale
           const y1 = this.points[i].y * this.scales / this.points[i].scale
-          // 判断点击的是否是圆
+          // 判断点击的是否是圆形
           if (this.points[i]?.type === 'circular') {
             const x2 = this.points[i].x * this.scales / this.points[i].scale + this.points[i].width * this.scales / this.points[i].scale
             const y2 = this.points[i].y * this.scales / this.points[i].scale + this.points[i].width * this.scales / this.points[i].scale
@@ -809,8 +941,8 @@ export default {
               this.points.splice(i, 1)
             }
           }
+          // 判断点击的是否是文字
           if (this.points[i]?.type === 'text') {
-            // 取最长的一行文字
             let len = 0
             this.points[i].text.forEach(item => {
               if (item.length > len) len = item.length
@@ -851,19 +983,17 @@ export default {
               this.points.splice(i, 1)
             }
           }
-          // 判断点击的是否是直线
+          // 判断点击的是否是直线/自由线条
           if (this.points[i]?.type === 'line') {
             const x2 = this.points[i + 1] ? this.points[i + 1].x * this.scales / this.points[i].scale : 0
             const y2 = this.points[i + 1] ? this.points[i + 1].y * this.scales / this.points[i].scale : 0
             const x3 = obj.x
             const y3 = obj.y
-            // const a = Math.abs((x1-x2)*(y1-y3)-(x1-x3)*(y1-y2))
-            // const b = Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))
             const c = Math.sqrt(Math.pow(x1 - x3, 2) + Math.pow(y1 - y3, 2))
             const d = Math.sqrt(Math.pow(x2 - x3, 2) + Math.pow(y2 - y3, 2))
             const scope = this.lineWidth / 2 + 15
-            // if(a/b <= 5 && c <= b && d <= b) {
             if (c < scope && d < scope && this.points[i].id === this.points[i + 1].id) {
+              // 删除同 ID 的所有线条段
               const id = this.points[i].id
               for (let j = 0; j < this.points.length; j++) {
                 if (this.points[j].id === id) {
@@ -876,7 +1006,7 @@ export default {
               return
             }
           }
-          // 判断点击的是否是箭头
+          // 判断点击的是否是箭头或直线（两段式）
           if (this.points[i]?.type === 'straight' || this.points[i]?.type === 'arrow') {
             const x2 = this.points[i].x2 * this.scales / this.points[i].scale
             const y2 = this.points[i].y2 * this.scales / this.points[i].scale
@@ -899,6 +1029,7 @@ export default {
         }
       }
     },
+    // 移动鼠标时平移选中的图形
     checkMove(e) {
       if (this.pointsSelect.length === 0) return
       let obj = {
@@ -924,11 +1055,13 @@ export default {
         }
       }
     },
+    // 松开鼠标时提交选中的图形的新位置
     checkUp(e) {
       let obj = {
         x: e.offsetX * this.sratio - this.checkX,
         y: e.offsetY * this.sratio - this.checkY
       }
+      // 将移动后的像素坐标转换回原始比例坐标
       for (let i = 0; i < this.pointsSelect.length; i++) {
         this.pointsSelect[i].x = this.pointsSelect[i].x * this.scales / this.pointsSelect[i].scale + obj.x
         this.pointsSelect[i].y = this.pointsSelect[i].y * this.scales / this.pointsSelect[i].scale + obj.y
@@ -947,6 +1080,10 @@ export default {
         this.points.push(this.pointsSelect[i])
       }
     },
+
+    // ----- 鼠标事件：绘制流程入口 -----
+
+    // 鼠标按下：开始绘制或开始选中操作
     mouseDown(e) {
       if (this.doublePage) {
         return;
@@ -955,11 +1092,13 @@ export default {
       e = e || event
       e.preventDefault()
       if (this.state === null || this.state === 'del') {
+        // 选择/删除模式 -> 进入选中交互
         this.$emit('mouseClick')
         this.checkDrawing = true
         this.checkDown(e)
         return
       }
+      // 绘制模式 -> 开始绘制
       this.isDrawing = true
       let obj = {
         x: e.offsetX * this.sratio,
@@ -968,16 +1107,22 @@ export default {
       this.drawStart(obj)
       if (this.signStart) this.sign()
     },
+
+    // ----- 文字框交互 -----
+
+    // 双击文字框进入编辑模式
     textDblclick() {
       if (!this.contenteditable) this.contenteditable = true
     },
+    // 文字框拖拽开始
     textMouseDown(e) {
       e = e || event
       this.textDownX = e.offsetX
       this.textDownY = e.offsetY
       this.textMoveStart = true
     },
-    // 鼠标移动
+
+    // 鼠标移动：绘制中/拖拽文字框/选中移动中
     mouseMove(e) {
       if (this.doublePage) {
         return;
@@ -985,6 +1130,7 @@ export default {
       e = e || event
       e.preventDefault()
       if (this.textMoveStart) {
+        // 拖拽文字框
         this.textX2 = e.offsetX * this.sratio - this.textDownX
         this.textY2 = e.offsetY * this.sratio - this.textDownY
         if (this.points[this.points.length - 1].type === 'sign') {
@@ -994,10 +1140,11 @@ export default {
         }
       }
       if (this.state === null) {
-        if (this.checkDrawing) this.checkMove(e)
+        if (this.checkDrawing) this.checkMove(e) // 选择模式平移
         return
       }
       if (this.isDrawing) {
+        // 绘制模式下更新绘制
         let obj = {
           x: e.offsetX * this.sratio,
           y: e.offsetY * this.sratio
@@ -1005,7 +1152,8 @@ export default {
         this.drawMove(obj)
       }
     },
-    // 鼠标松开
+
+    // 鼠标松开：结束绘制或提交选中操作
     mouseUp(e) {
       e = e || event
       e.preventDefault()
@@ -1013,7 +1161,7 @@ export default {
         this.checkDrawing = false
         this.checkUp(e)
         if (this.state === 'del') {
-          this.delChart()
+          this.delChart() // 删除选中的图形
         }
         return
       }
@@ -1026,9 +1174,12 @@ export default {
       this.signStart = false
       this.pointsSelect = []
     },
+
+    // 删除选中的图形
     delChart() {
       if (this.pointsSelect.length === 0) return
       const id = this.pointsSelect[0].id
+      // 删除同 ID 的所有图形数据
       for (let i = 0; i < this.points.length; i++) {
         if (this.points[i].id === id) {
           this.points.splice(i, 1)
@@ -1038,14 +1189,18 @@ export default {
       this.$emit('drawEnd', this.points,'del')
       this.clearRect()
     },
-    // 绘制
+
+    // ----- 绘制核心方法 -----
+
+    // 开始绘制（记录起始点，初始化图形参数）
     drawStart(obj) {
       obj.index = this.pageIndex
       obj.start = 'start'
-      this.linkId = Math.random().toString(36).substr(2)
+      this.linkId = Math.random().toString(36).substr(2) // 生成唯一 ID
       this.startX = obj.x
       this.startY = obj.y
       if (this.textStart) {
+        // 文字工具：定位文字框位置
         this.textX2 = obj.x
         this.textY2 = obj.y
         this.contenteditable = true
@@ -1062,6 +1217,7 @@ export default {
       if (this.state === 'straight') this.straight(obj)
       if (this.state === 'arrow') this.arrow(obj)
     },
+    // 结束绘制（保存最终图形数据）
     drawEnd(obj) {
       obj.index = this.pageIndex
       obj.start = 'end'
@@ -1071,6 +1227,7 @@ export default {
       if (this.state === 'straight') this.straight(obj, 'end')
       if (this.state === 'arrow') this.arrow(obj, 'end')
     },
+    // 绘制过程中更新图形（实时预览）
     drawMove(obj) {
       obj.index = this.pageIndex
       obj.start = 'move'
@@ -1082,6 +1239,8 @@ export default {
       this.startY = obj.y
       this.startX = obj.x
     },
+
+    // 点击 Canvas 空白处时提交文字
     turnText() {
       if (this.textStart) return
       if (this.state === 'text') {
@@ -1096,7 +1255,10 @@ export default {
         this.addText(text)
       }
     },
-    // 画标记
+
+    // ----- 各图形绘制方法 -----
+
+    // 绘制标记（带编号的红色标记）
     sign() {
       const x = this.textX2
       const y = this.textY2
@@ -1107,9 +1269,9 @@ export default {
       this.ctx.fill();
       this.ctx.closePath();
       this.ctx.beginPath();
-      this.ctx.moveTo(x - 50, y + 15); // 左上角
-      this.ctx.lineTo(x - 10, y + 15); // 右上角
-      this.ctx.lineTo(x - 30, y + 40);  // 下角
+      this.ctx.moveTo(x - 50, y + 15);
+      this.ctx.lineTo(x - 10, y + 15);
+      this.ctx.lineTo(x - 30, y + 40);
       this.ctx.fillStyle = 'red';
       this.ctx.fill();
       this.ctx.closePath()
@@ -1130,6 +1292,7 @@ export default {
         num: num
       })
     },
+    // 计算标记编号（自动递增）
     signNum() {
       let num = []
       this.points.forEach(item => {
@@ -1139,7 +1302,7 @@ export default {
       })
       return num.length === 0 ? 1 : Math.max(...num) + 1
     },
-    // 添加文字
+    // 添加文字到 Canvas 并保存数据
     addText(v) {
       let obj = {}
       obj.index = this.pageIndex
@@ -1148,8 +1311,7 @@ export default {
       obj.color = this.color
       obj.size = this.fontSize
       obj.id = this.linkId
-      // 解析换行
-      const arr = v.split('\n')
+      const arr = v.split('\n') // 按换行符分割
       for (let i = 0; i < arr.length; i++) {
         this.ctx.beginPath();
         this.ctx.font = `${this.fontSize * this.sratio}px 黑体`;
@@ -1159,7 +1321,7 @@ export default {
         this.ctx.closePath()
       }
       const poi = this.points[this.points.length - 1]
-      if (poi?.type === 'sign') poi.id = this.linkId
+      if (poi?.type === 'sign') poi.id = this.linkId // 标记与文字共享 ID
       this.points.push({
         x: this.textX2,
         y: this.textY2,
@@ -1173,7 +1335,7 @@ export default {
       })
       this.$emit('drawEnd', this.points)
     },
-    // 画箭头
+    // 绘制箭头（从起始点到鼠标位置，带箭头尖端）
     arrow(obj, type) {
       obj.index = this.pageIndex
       obj.type = 'arrow'
@@ -1181,6 +1343,7 @@ export default {
       obj.color = this.color
       obj.border = this.lineWidth
       obj.id = this.linkId
+      // 计算箭头角度
       const angle = Math.atan2(this.textY - obj.y, this.textX - obj.x) * 180 / Math.PI
       const angle1 = (angle + 20) * Math.PI / 180
       const angle2 = (angle - 20) * Math.PI / 180
@@ -1205,6 +1368,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
       if (type === 'end') {
+        // 绘制结束时保存数据
         this.points.push({
           x: this.textX,
           y: this.textY,
@@ -1220,7 +1384,7 @@ export default {
         this.$emit('drawEnd', this.points)
       }
     },
-    // 画直线
+    // 绘制直线
     straight(obj, type) {
       obj.index = this.pageIndex
       obj.type = 'straight'
@@ -1252,9 +1416,9 @@ export default {
         this.$emit('drawEnd', this.points)
       }
     },
-    // 画圆
+    // 绘制圆形（从起点到鼠标位置的距离为半径）
     circular(obj, type) {
-      if (obj.x - this.textX <= 0) return
+      if (obj.x - this.textX <= 0) return // 半径不能为负
       obj.index = this.pageIndex
       obj.type = 'circular'
       obj.scale = this.scales
@@ -1284,7 +1448,7 @@ export default {
         this.$emit('drawEnd', this.points)
       }
     },
-    // 画矩形
+    // 绘制矩形
     rectangle(obj, type) {
       obj.index = this.pageIndex
       obj.type = 'rectangle'
@@ -1315,7 +1479,7 @@ export default {
         this.$emit('drawEnd', this.points)
       }
     },
-    // 画线
+    // 绘制自由线条（画笔）
     line(obj) {
       obj.index = this.pageIndex
       obj.type = 'line'
@@ -1335,13 +1499,18 @@ export default {
       this.points.push(obj)
       this.$emit('drawEnd', obj,'line')
     },
+
+    // ----- Canvas 重绘相关方法 -----
+
+    // 清除 Canvas 并重绘所有批注
     clearRect(v) {
       const width = this.canvasStyle.widthCanvas
       const height = this.canvasStyle.heightCanvas
       this.ctx.clearRect(0, 0, width, height)
-      if (v) return
+      if (v) return // 仅清空不重绘
       this.processing()
     },
+    // 重绘线条
     lineProcessing(data, data2, v) {
       this.ctx.beginPath()
       this.ctx.moveTo(data.x * this.scales / data.scale + v.x, data.y * this.scales / data.scale + v.y)
@@ -1355,6 +1524,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
+    // 重绘矩形
     rectangleProcessing(data, v) {
       this.ctx.beginPath()
       this.ctx.lineWidth = data.border * this.sratio
@@ -1363,6 +1533,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
+    // 重绘圆形
     circularProcessing(data, v) {
       this.ctx.beginPath()
       this.ctx.lineWidth = data.border * this.sratio
@@ -1371,6 +1542,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
+    // 重绘直线
     straightProcessing(data, v) {
       this.ctx.beginPath()
       this.ctx.lineWidth = data.border * this.sratio
@@ -1380,6 +1552,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
+    // 重绘箭头
     arrowProcessing(data, v) {
       const angle = Math.atan2(data.y * this.scales / data.scale - data.y2 * this.scales / data.scale, data.x * this.scales / data.scale - data.x2 * this.scales / data.scale) * 180 / Math.PI
       const angle1 = (angle + 20) * Math.PI / 180
@@ -1404,6 +1577,7 @@ export default {
       this.ctx.stroke()
       this.ctx.closePath()
     },
+    // 重绘文字
     textProcessing(data, v) {
       const arr = data.text
       for (let i = 0; i < arr.length; i++) {
@@ -1415,6 +1589,7 @@ export default {
         this.ctx.closePath()
       }
     },
+    // 重绘标记
     signProcessing(data, v) {
       const x = data.x * this.scales / data.scale + v.x
       const y = data.y * this.scales / data.scale + v.y
@@ -1424,9 +1599,9 @@ export default {
       this.ctx.fill();
       this.ctx.closePath();
       this.ctx.beginPath();
-      this.ctx.moveTo(x - 50, y + 15); // 左上角
-      this.ctx.lineTo(x - 10, y + 15); // 右上角
-      this.ctx.lineTo(x - 30, y + 40);  // 下角
+      this.ctx.moveTo(x - 50, y + 15);
+      this.ctx.lineTo(x - 10, y + 15);
+      this.ctx.lineTo(x - 30, y + 40);
       this.ctx.fillStyle = 'red';
       this.ctx.fill();
       this.ctx.closePath()
@@ -1437,7 +1612,8 @@ export default {
       this.ctx.stroke();
       this.ctx.closePath()
     },
-    // 处理数据
+
+    // 处理所有批注数据并重绘到 Canvas
     processing() {
       for (let i = 0; i < this.points.length; i++) {
         if (this.points[i].index === this.pageIndex) {
@@ -1465,6 +1641,10 @@ export default {
         }
       }
     },
+
+    // ----- 翻页与PDF加载 -----
+
+    // 下一页（向左翻页）
     flipLeft(e, v) {
       this.extendRightDel()
       if (e > this.pdfPages) {
@@ -1486,6 +1666,7 @@ export default {
         })
       }
     },
+    // 上一页（向右翻页）
     flipRight(e, v) {
       this.extendRightDel()
       if (e < 1) {
@@ -1507,18 +1688,19 @@ export default {
         })
       }
     },
+    // 加载 PDF 源文件
     sourceUrl() {
       if (this.source === '' || this.source === undefined || this.source === null) return
       let that = this
       that.loading = true
       const loadingTask = PdfJs.getDocument({
         url: that.source,
-        cMapUrl: "/zydx/static/cmaps/",
+        cMapUrl: "/zydx/static/cmaps/", // 中文字符映射表路径
         cMapPacked: true
       })
       loadingTask.promise.then((pdf) => {
         pdfs[that.id] = pdf
-        that.pdfPages = pdf.numPages // 获取pdf文件的总页数
+        that.pdfPages = pdf.numPages
         that.$nextTick(() => {
           if (that.doublePage) {
             that.readDoublePdf(pdf)
@@ -1534,14 +1716,16 @@ export default {
         })
       })
     },
+    // 获取字体信息
     fontName(v,n) {
       return n[v]
     },
+    // 单页模式：渲染单页 PDF
     readPdf: debounce(function () {
       if(Object.keys(pdfs).length === 0) return
       setTimeout(() => {
         let that = this
-        that.mouse()
+        that.mouse() // 重置工具状态
         that.$nextTick(() => {
           pdfs[that.id]?.getPage(that.pageIndex).then(function (page) {
             that.doc = page
@@ -1551,6 +1735,7 @@ export default {
             let canvas2 = document.getElementById(`${that.id}2`)
             that.ctx = canvas?.getContext('2d');
             let ctx2 = canvas2?.getContext('2d');
+            // 计算合适的缩放比例
             let viewport1 = page.getViewport({scale: 1.5})
             const sc1 = (viewport1.width / viewport1.height).toFixed(2)
             that.boxWidth = that.$refs.wrap?.offsetWidth
@@ -1565,6 +1750,7 @@ export default {
             const sc = (viewport.width / viewport.height).toFixed(2)
             const wid = that.$refs.wrap?.offsetWidth - 10
             const hei = wid / sc
+            // 设置 Canvas 尺寸（sratio倍提高清晰度）
             canvas.width = wid * that.sratio
             canvas.height = hei * that.sratio
             canvas.style.width = wid + 'px'
@@ -1583,13 +1769,15 @@ export default {
             let renderContext = {
               canvasContext: ctx2,
               viewport: viewport,
-              transform: [1, 0, 0, 1, 0, 0] //这里会进行放大，解决模糊问题
+              transform: [1, 0, 0, 1, 0, 0] // 避免放大导致的模糊
             }
             page.render(renderContext)
+            // 获取文本内容用于 textLayer 渲染
             page.getTextContent().then((res) => {
               that.items = res.items
               that.styles = res.styles
             })
+            // 获取 PDF 内置的标注数据
             page.getAnnotations().then((res) => {
               that.annotationsInit = res
               const arr = that.annotationsData.map(x => {
@@ -1610,18 +1798,19 @@ export default {
               that.flipRights = false
               that.flipLefts = true
             }
-            // 获取canvas的base64数据
+            // 延迟生成 Canvas Base64 数据用于翻页过渡动画
             setTimeout(() => {
               that.flipRights = false
               that.flipLefts = false
               that.oneShow = false
               that.imgArr = canvas2.toDataURL('image/jpeg', 1)
-              that.processing()
+              that.processing() // 重绘批注
             }, 1000)
           })
         })
       }, 200)
     }, 200),
+    // 双页模式：渲染所有页的 PDF
     readDoublePdf: debounce(function () {
       setTimeout(() => {
         let that = this
@@ -1668,7 +1857,7 @@ export default {
               let renderContext = {
                 canvasContext: item.ctx2,
                 viewport: viewport,
-                transform: [1, 0, 0, 1, 0, 0] //这里会进行放大，解决模糊问题
+                transform: [1, 0, 0, 1, 0, 0]
               }
               page.render(renderContext)
               page.getTextContent().then((res) => {
@@ -1687,7 +1876,6 @@ export default {
                 that.flipRights = false
                 that.flipLefts = true
               }
-              // 获取canvas的base64数据
               setTimeout(() => {
                 that.flipRights = false
                 that.flipLefts = false
@@ -1700,8 +1888,8 @@ export default {
         })
       }, 200)
     }, 200),
+    // 生成唯一 Canvas ID（时间戳+随机字符串）
     generateUniqueKey() {
-      // Math.random().toString(36).substr(2)
       return `${new Date().getTime()}${Math.random().toString(36).substr(2)}`;
     }
   }
@@ -1713,6 +1901,7 @@ export default {
 @import './icon.css';
 @import './annotationLayer.css';
 @import './textLayer.css';
+/* 拓展阅读批注容器 */
 .magnifier{
   position: absolute;
   text-align: initial;
@@ -1727,6 +1916,7 @@ export default {
   display: block;
   margin: 0 auto;
 }
+/* 拓展阅读弹出列表 */
 .magnifier-list{
   position: absolute;
   width: 200px;
@@ -1739,6 +1929,7 @@ export default {
   opacity: 0;
   overflow: hidden;
 }
+/* 拓展阅读列表头部 */
 .magnifier-head{
   height: 20px;
   width: 100%;
@@ -1760,6 +1951,7 @@ export default {
   font-size: 12px;
   color: #fff;
 }
+/* 拓展阅读内容区 */
 .magnifier-cont{
   padding: 5px;
 }
@@ -1783,12 +1975,10 @@ export default {
     opacity: 1;
   }
 }
+/* 右键菜单-添加链接 */
 .extend-right{
   position: absolute;
   z-index: 5;
-  /* border-radius: 20px; */
-  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
-  /* padding: 10px; */
   background-color: #DEDCDC;
   cursor: pointer;
   transform: scaleX(-1);
@@ -1799,17 +1989,6 @@ export default {
   display: flex;
   transform: scaleX(-1);
 }
-/* .extend-right:after {
-  content: '';
-  position: absolute;
-  top: 54%;
-  right: 0;
-  width: 30px;
-  height: 30px;
-  background: url("../img/sanjiao.png") no-repeat 0 0;
-  background-size: 100% 100%;
-  transform: rotate(-85deg) scaleY(-1);
-} */
 .extend-right-cont>img{
   width: 14px !important;
   height: 14px !important;
@@ -1820,8 +1999,8 @@ export default {
   line-height: 20px;
   font-size: 12px;
   color: #fff;
-  /* padding-left: 5px; */
 }
+/* 鼠标穿透*/
 .isPointer{
   pointer-events: none;
 }
@@ -1829,6 +2008,7 @@ export default {
   width: 20px !important;
   font-size: 12px !important;
 }
+/* 标注层 */
 .annotationLayer{
   width: 100%;
   height: 100%;
@@ -1848,12 +2028,14 @@ export default {
   width: 100%;
   height: 100%;
 }
+/* 文本层 */
 .textLayer>:is(i){
   position: absolute;
 }
 .textLayer :is(span){
   color: transparent;
 }
+/* 批注绘制画布 */
 .wrap-can-one {
   position: absolute;
   top: 0;
@@ -1861,6 +2043,7 @@ export default {
   z-index: 10;
 }
 
+/* 文字批注拖拽框 */
 .text-frame {
   position: absolute;
   top: 0;
@@ -1883,6 +2066,7 @@ export default {
   height: 100%;
 }
 
+/* 页面容器 */
 .wrap {
   width: 100%;
   height: calc(100% - 20px);
@@ -1892,6 +2076,7 @@ export default {
   padding: 5px;
 }
 
+/* 双页模式奇数偶数页间距 */
 .wrap-block:nth-child(2n+1) {
   padding: 5px 5px 5px 10px;
 }
@@ -1900,6 +2085,7 @@ export default {
   padding: 5px 10px 5px 5px;
 }
 
+/* Canvas 容器 */
 .wrap-can {
   width: 100%;
   /*display: inline-block;*/
@@ -1918,11 +2104,13 @@ export default {
   height: 100%;
 }
 
+/* 底部翻页按钮 */
 .but-wrap {
   text-align: center;
   margin-top: 20px;
 }
 
+/* pages 区域 */
 .pages {
   width: 100%;
   height: 100%;
@@ -1930,6 +2118,7 @@ export default {
   overflow-y: auto;
 }
 
+/* 左侧翻页按钮区域 */
 .page-but-left {
   position: absolute;
   top: 0;
@@ -1947,6 +2136,7 @@ export default {
   left: 0;
 }
 
+/* 右侧翻页按钮区域 */
 .page-but-right {
   position: absolute;
   top: 0;
@@ -1972,11 +2162,13 @@ export default {
   font-size: 14px;
 }
 
+/* 文档视图主容器 */
 .docView {
   height: 100%;
   position: relative;
 }
 
+/* 翻页按钮样式 */
 .but-brown {
   background-color: #c64c10;
   padding: 0 20px;
@@ -1990,25 +2182,24 @@ export default {
   margin-left: 10px;
 }
 
+/* PDF 书本容器 */
 .book {
   width: 100%;
-  /*min-height: 600px;*/
-  /*max-height: 1200px;
-  overflow-y: auto;*/
 }
 
 .book::-webkit-scrollbar {
   display: none;
 }
 
+/* 按钮禁用态 */
 .but-act {
   background-color: #bbbbbb;
   color: #fff;
 }
 
+/* 加载动画遮罩 */
 .loading-back {
   min-height: 600px;
-  /*position: absolute;*/
   top: 0;
   left: 0;
   right: 0;
@@ -2023,6 +2214,7 @@ export default {
   margin: 0 auto;
 }
 
+/* 加载文字动画 */
 .loadings {
   display: inline-block;
   font-size: 28px;
@@ -2056,6 +2248,7 @@ export default {
   }
 }
 
+/* 双页模式容器 */
 .wrap-box {
   display: flex;
   flex-flow: row wrap;
@@ -2070,6 +2263,7 @@ div {
   box-sizing: border-box;
 }
 
+/* 全屏查看工具栏 */
 .full-screen {
   position: absolute;
   top: 20px;
@@ -2104,6 +2298,5 @@ div {
 .full-screen-img > img {
   width: 20px;
   height: 20px;
-  /*margin-left: 5px;*/
 }
 </style>