zydx-plus 1.35.595 → 1.35.597

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.595",
+  "version": "1.35.597",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/buttonGroup/src/buttonGroup.vue

@@ -24,6 +24,10 @@ export default defineComponent({
       type: String,
       default: '#00ff00'
     },
+    isHide: {// 按钮能否收起 true能 false 否
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -38,10 +42,18 @@ export default defineComponent({
     trackClick(idx) {
       if (this.accordian) {
         this.active_state = this.active_state.map((_, i) => {
-          if (i === idx) {
-            return this.active_state[i] = !this.active_state[i]
+          if (this.isHide) {
+            if (i === idx) {
+              return this.active_state[i] = !this.active_state[i]
+            } else {
+              return false
+            }
           } else {
-            return false
+            if (i === idx) {
+              return this.active_state[i] = true
+            } else {
+              return false
+            }
           }
         })
       } else {

package/src/components/data_table/src/table_head.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   methods: {
     sticky: function ({ level, column, row, idx }) {
       const left = row.slice(0, idx).reduce((acc, cur) => (cur.column.width + acc), 0)
-      return `  background: white;
+      return `  background: transparent;
   position: sticky;
   z-index: 5;
   min-width: ${column.width}px;
@@ -82,7 +82,7 @@ export default defineComponent({
 .table_head {
   position: relative;
   z-index: 5;
-  background: white
+  background: transparent;
 }
 
 th,
@@ -105,7 +105,7 @@ td {
 }
 
 th {
-  background: white;
+  background: transparent;
   position: sticky;
   z-index: 5;
   top: 0;

package/src/components/dragPopup/src/dragPopup.vue

@@ -319,6 +319,7 @@ export default {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
           enabled: true,
+          touch: true,
           listeners: {
             start (event) {
               that.draggableMove = true
@@ -606,7 +607,7 @@ export default {
 .drag-head {
   height: 30px;
   line-height: 30px;
-  padding: 0 10px;
+  padding: 0 5px;
   color: #fff;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

package/src/components/dragPopup2/src/dragPopup.vue

@@ -328,6 +328,7 @@ export default {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
           enabled: true,
+          touch: true,
           listeners: {
             start (event) {
               that.draggableMove = true
@@ -612,7 +613,7 @@ export default {
 .drag-head {
   height: 30px;
   line-height: 30px;
-  padding: 0 10px;
+  padding: 0 5px;
   color: #fff;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

package/src/components/editor/src/editor.vue

@@ -4415,7 +4415,9 @@ export default {
   margin-bottom: 10px;
   /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
 }
-
+.read-only-page :deep(img) {
+  padding: 3px;
+}
 .read-only-page:last-child {
   margin-bottom: 0;
 }

package/src/components/editor2/src/editor.vue

@@ -86,9 +86,9 @@
           <svg style="cursor: pointer" @click="close" t="1698630749910" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4415" width="20" height="20"><path d="M726.976 274.432a16 16 0 0 0-22.656 0L512 466.752l-192.32-192.32a16 16 0 0 0-22.624 0l-22.656 22.624a16 16 0 0 0 0 22.624l192.32 192.32-192.32 192.32a16 16 0 0 0 0 22.656l22.656 22.624a16 16 0 0 0 22.624 0l192.32-192.32 192.32 192.32a16 16 0 0 0 22.656 0l22.624-22.624a16 16 0 0 0 0-22.624L557.28 512l192.32-192.352a16 16 0 0 0 0-22.624l-22.624-22.624z" fill="#fff" p-id="4416"></path></svg>
         </div>
       </div>
-<!--      <div class="editor-but" v-if="butText !== '' && readOnly">-->
-<!--        <button class="buts" @click="complete">{{ butText }}</button>-->
-<!--      </div>-->
+      <!--      <div class="editor-but" v-if="butText !== '' && readOnly">-->
+      <!--        <button class="buts" @click="complete">{{ butText }}</button>-->
+      <!--      </div>-->
       <div class="enclosure" v-if="uploadAttData.length > 0 && enclosureShow">
         <p :style="enclosureStyle">{{ enclosureText }}</p>
         <div class="enclosure-list" v-for="(item,index) in uploadAttData">
@@ -366,8 +366,8 @@ export default {
       handler: function (e, oldVal) {
         if(this.updateInit) return
         if(this.updateStatus) this.updateInit = true
-        this.editor?.commands.setContent(json2html({node: "root", child: (e.html === undefined || e.html === null || e.html === 'null') ? [] : e.html}))
-        this.uploadAttData = (e.enclosure === undefined || e.enclosure === null || e.html === 'null') ? [] : this.enclosureAction(e.enclosure)
+        this.editor?.commands.setContent(json2html({node: "root", child: this.dataChange(e).html}))
+        this.uploadAttData = this.dataChange(e).enclosure
       },
       deep: true
     },
@@ -382,17 +382,21 @@ export default {
     toolbar: {
       handler: function (e, oldVal) {
         let status = null
+        let upload = null
         this.toolbars = []
         e.forEach(x => {
           if(x.key === 'but') {
             status = x
+          } if (x.key === 'uploadAtt') {
+            upload = x
           }else {
             this.toolbars.push(x)
           }
         })
         if(this.isShowWhiteboarde) this.toolbars.push({key: 'paint', title: '插入手写'})
+        if(upload) this.toolbars.push(upload) // 上传附件
         if(this.voiceShow) this.toolbars.push({key: 'voice', title: '语音输入'})
-        if(status) this.toolbars.push(status)
+        if(status) this.toolbars.push(status) // 之定义按钮
         if(this.isShowAiTool) this.toolbars.push({key: 'ai', title: 'AI助手'})
       },
       immediate: true
@@ -400,12 +404,12 @@ export default {
   },
   mounted() {
     let _this = this
-    this.uploadAttData = (this.data.enclosure === undefined || this.data.enclosure === null || this.data.enclosure === 'null') ? [] : this.enclosureAction(this.data.enclosure)
+    this.uploadAttData = this.dataChange(this.data).enclosure
     this.heightStyle = (this.height === '100%') ? {height: '100%'} : {'min-height': this.height}
     const height = this.height.split('px')[0] - 44
     this.heightStyleCont = (this.height === '100%') ? {height: 'calc(100% - 44px)'} : {'min-height': `${height}px`}
     this.editor = new Editor({
-      content: json2html({node: "root", child: (this.data.html === undefined || this.data.html === null || this.data.html.html === 'null') ? [] : this.data.html}),
+      content: json2html({node: "root", child: this.dataChange(this.data).html }),
       editable: this.readOnly,
       enablePasteRules: true,
       extensions: [
@@ -451,7 +455,7 @@ export default {
       },
       // 获取焦点
       onFocus: (e) => {
-          this.limits = true
+        this.limits = true
       },
     })
     document.addEventListener('keydown', function (e) {
@@ -486,6 +490,12 @@ export default {
     })
   },
   methods: {
+    dataChange(e) {
+      if(!e) return {html: [], enclosure: []}
+      const html = e.html === undefined || e.html === null || e.html === 'null' ? [] : e.html
+      const enclosure = (e.enclosure === undefined || e.enclosure === null || e.enclosure === 'null') ? [] : this.enclosureAction(e.enclosure)
+      return {html: html, enclosure: enclosure}
+    },
     getSelectedText(e) {
       const selection = window.getSelection();
       const selectedText = selection.toString()
@@ -514,36 +524,36 @@ export default {
       this.paintShow = false
     },
     changeAlign(tag) {
-        // 图片对齐方式
-        this.editor.chain().setTextAlign(tag).run()
+      // 图片对齐方式
+      this.editor.chain().setTextAlign(tag).run()
     },
     changePercent(e) {
-        // 改变图片百分比
-        if(parseInt(e.target.value) > 100) {
-            this.imgSizeVal = 100
-            this.editor.chain().setImageWidth('100%').focus().run()
-        } else if(parseInt(e.target.value) < 10) {
-        } else {
-            if(this.lock) {
-                this.lock = false
-                setTimeout(() => {
-                    this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
-                    this.lock = true
-                }, 500)
-            }
+      // 改变图片百分比
+      if(parseInt(e.target.value) > 100) {
+        this.imgSizeVal = 100
+        this.editor.chain().setImageWidth('100%').focus().run()
+      } else if(parseInt(e.target.value) < 10) {
+      } else {
+        if(this.lock) {
+          this.lock = false
+          setTimeout(() => {
+            this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
+            this.lock = true
+          }, 500)
         }
+      }
     },
     shouldShowFn({ editor, view, state, oldState, from, to }) {
-        // BubbleMenu是否显示
-        this.$nextTick(() => {
-            this.showBubble =  editor.isActive('image')
-            if(editor.isActive('image')) {
-                this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
-            } else {
-                this.imgSizeVal = ''
-            }
-        })
-        return editor.isActive('image')
+      // BubbleMenu是否显示
+      this.$nextTick(() => {
+        this.showBubble =  editor.isActive('image')
+        if(editor.isActive('image')) {
+          this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
+        } else {
+          this.imgSizeVal = ''
+        }
+      })
+      return editor.isActive('image')
     },
     speechDown(e) {
       this.speech = {
@@ -750,11 +760,11 @@ export default {
     },
     del(index) {
       let that = this
-      // that.data.html = html2json(that.editor.getHTML()).child
-      if (this.uploadAttData[index].name === undefined) {
+      that.data.html = html2json(that.editor.getHTML()).child
+      if (!this.uploadAttData[index].name) {
         that.uploadAttData[index].active = false
         that.$emit('del', that.uploadAttData[index], (e) => {
-          if (e === undefined) {
+          if (!e) {
             that.uploadAttData.splice(index, 1)
           } else {
             if (e) {
@@ -806,7 +816,7 @@ export default {
       })
     },
     upload(e, v) { // 上传文件
-        const file = e.target.files[0]
+      const file = e.target.files[0]
       if (this.uploadType) {
         if (v === 'uploadAtt') {
           file.active = true
@@ -858,7 +868,7 @@ export default {
         this.editor.chain().focus().insertContentAt(this.selection(), html).run()
         if (this.selection() <= 6 && this.selection() > 2) this.selectionClass2(cla)
         if (this.selectionClass(cla)) {
-            this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
+          this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
         }
       }, 100)
     },
@@ -1008,18 +1018,18 @@ export default {
 
 <style scoped>
 
-  :deep(.w_100) {
-    width: 100% !important;
-  }
-  :deep(.w_75 ){
-    width: 75% !important;
-  }
-  :deep(.w_50 ){
-    width: 50% !important;
-  }
-  :deep(.w_25 ){
-    width: 25% !important;
-  }
+:deep(.w_100) {
+  width: 100% !important;
+}
+:deep(.w_75 ){
+  width: 75% !important;
+}
+:deep(.w_50 ){
+  width: 50% !important;
+}
+:deep(.w_25 ){
+  width: 25% !important;
+}
 :deep(p[data-sid="prohibit"]) {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1235,11 +1245,10 @@ export default {
   padding: 2px 5px;
   cursor: pointer;
   min-width: 60px;
-  height: 20px;
+  height: 21px;
   display: inline-block;
   line-height: 16px;
   box-sizing: border-box;
-  font-family: Arial;
   -moz-text-align-last: justify;
   text-align-last: justify;
   word-break: break-all;
@@ -1272,68 +1281,68 @@ export default {
     line-height: 14px !important;
   }
 }
-  .bubbleMenu {
-    position: relative;
-    padding: 15px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 1px 6px #d2d2d2;
-  }
-  .line {
-    display: flex;
-    align-items: center;
-    padding-bottom: 10px;
-  }
-  .line:last-child {
-    padding-bottom: 0
-  }
-  .percent {
-    position: relative;
-  }
-  .percent input{
-    border-radius: 4px;
-    width: 68px;
-  }
-  .percent input::-webkit-outer-spin-button,
-  .percent input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  .percent input[type='number']{
-    -moz-appearance: textfield;
-    box-shadow: none;
-    border: 1px solid #8c939d;
-    padding: 5px 15px 5px 5px;
-  }
-  .symbol {
-    position: absolute;
-    right: 5px;
-    top: 5px
-  }
+.bubbleMenu {
+  position: relative;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 1px 6px #d2d2d2;
+}
+.line {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.line:last-child {
+  padding-bottom: 0
+}
+.percent {
+  position: relative;
+}
+.percent input{
+  border-radius: 4px;
+  width: 68px;
+}
+.percent input::-webkit-outer-spin-button,
+.percent input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+.percent input[type='number']{
+  -moz-appearance: textfield;
+  box-shadow: none;
+  border: 1px solid #8c939d;
+  padding: 5px 15px 5px 5px;
+}
+.symbol {
+  position: absolute;
+  right: 5px;
+  top: 5px
+}
 
-  .alignmentMode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .segmentation {
-    height: 13px;
-    width: 1px;
-    margin: 0 5px;
-    background-color: #565656;
-  }
-  .imgBgc {
-    border-radius: 3px;
-    width: 20px;
-    height: 20px;
-    background-color: #CCCCCC;
-  }
-  .imgBgcAction {
-    background-color: #2A82E4;
-  }
-  .imgBgc > img {
-    padding: 1px;
-    width: 100%;
-    height: 100%;
-  }
+.alignmentMode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.segmentation {
+  height: 13px;
+  width: 1px;
+  margin: 0 5px;
+  background-color: #565656;
+}
+.imgBgc {
+  border-radius: 3px;
+  width: 20px;
+  height: 20px;
+  background-color: #CCCCCC;
+}
+.imgBgcAction {
+  background-color: #2A82E4;
+}
+.imgBgc > img {
+  padding: 1px;
+  width: 100%;
+  height: 100%;
+}
 
 </style>

package/src/components/flip/src/annotationLayer.css

@@ -0,0 +1 @@
+[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}.annotationLayer{--annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:black;--link-outline:none}@media screen and (forced-colors:active){.annotationLayer{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight;--link-outline:1.5px solid LinkText}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation :is(input,textarea):required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation{outline:var(--link-outline)}:is(.annotationLayer .linkAnnotation):hover{-webkit-backdrop-filter:var(--hcm-highlight-filter);backdrop-filter:var(--hcm-highlight-filter)}:is(.annotationLayer .linkAnnotation)>a:hover{opacity:0!important;background:0 0!important;box-shadow:none}.annotationLayer .popupAnnotation .popup{outline:calc(1.5px * var(--scale-factor)) solid CanvasText!important;background-color:ButtonFace!important;color:ButtonText!important}.annotationLayer .highlightArea:hover::after{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:var(--hcm-highlight-filter);backdrop-filter:var(--hcm-highlight-filter);content:"";pointer-events:none}.annotationLayer .popupAnnotation.focused .popup{outline:calc(3px * var(--scale-factor)) solid Highlight!important}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translateX(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer.disabled .popup,.annotationLayer.disabled section{pointer-events:none}.annotationLayer .annotationContent{position:absolute;width:100%;height:100%;pointer-events:none}.freetext:is(.annotationLayer .annotationContent){background:0 0;border:none;inset:0;overflow:visible;white-space:nowrap;font:10px sans-serif;line-height:1.35;-webkit-user-select:none;-moz-user-select:none;user-select:none}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;transform-origin:0 0}:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{display:none}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder)>a:hover{opacity:.2;background-color:rgb(255 255 0);box-shadow:0 2px 10px rgb(255 255 0)}.annotationLayer .linkAnnotation.hasBorder:hover{background-color:rgb(255 255 0 / .2)}.annotationLayer .hasBorder{background-size:100% 100%}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input,.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .textWidgetAnnotation :is(input,textarea){background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation :is(input,textarea):required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea){background:0 0;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation :is(input,textarea):hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation :is(input,textarea):hover{border-radius:2px}.annotationLayer .choiceWidgetAnnotation select:focus,.annotationLayer .textWidgetAnnotation :is(input,textarea):focus{background:0 0;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{border-radius:50%;height:50%;left:25%;top:25%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{height:100%;width:100%}.annotationLayer .popupAnnotation{position:absolute;font-size:calc(9px * var(--scale-factor));pointer-events:none;width:-moz-max-content;width:max-content;max-width:45%;height:auto}.annotationLayer .popup{background-color:rgb(255 255 153);box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);border-radius:calc(2px * var(--scale-factor));outline:1.5px solid rgb(255 255 74);padding:calc(6px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popupAnnotation.focused .popup{outline-width:3px}.annotationLayer .popup *{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup>.header{display:inline-block}.annotationLayer .popup>.header h1{display:inline}.annotationLayer .popup>.header .popupDate{display:inline-block;margin-left:calc(5px * var(--scale-factor));width:-moz-fit-content;width:fit-content}.annotationLayer .popupContent{border-top:1px solid rgb(51 51 51);margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .popupTriggerArea{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}:is(.annotationLayer .annotationTextContent) span{width:100%;display:inline-block}.annotationLayer svg.quadrilateralsContainer{contain:strict;width:0;height:0;position:absolute;top:0;left:0;z-index:-1}

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

@@ -27,8 +27,8 @@
               <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>
+                    <!-- <img src="../img/qubiezhen.svg" alt=""> -->
+                    <p>添加链接</p>
                   </div>
                 </div>
                 <div class="textLayer" ref="textLayer">
@@ -79,8 +79,8 @@
             <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>
+                  <!-- <img src="../img/qubiezhen.svg" alt=""> -->
+                  <p>添加链接</p>
                 </div>
               </div>
               <div class="textLayer" ref="textLayer">
@@ -253,6 +253,10 @@ export default {
     }
   },
   props: {
+    isDisableRightClick: {
+      type: Boolean,
+      default: false
+    },
     source: {
       type: String,
       default: ''
@@ -494,6 +498,9 @@ export default {
     },
     // 右键菜单
     rightMenu(e) {
+      if (this.isDisableRightClick) {
+        return
+      }
       e.preventDefault()
       if(this.readOnly) return;
       if(!this.rightClick) return;
@@ -512,7 +519,8 @@ export default {
         this.rightMenuShow = true
         this.extendStyle = {
           left: left + 'px',
-          top: `calc(${Number(topMatch) + '%'} - 50px)`
+          // 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],
@@ -1701,9 +1709,9 @@ export default {
 
 <style scoped>
 
-@import '../icon.css';
-@import '../annotationLayer.css';
-@import '../textLayer.css';
+@import './icon.css';
+@import './annotationLayer.css';
+@import './textLayer.css';
 .magnifier{
   position: absolute;
   text-align: initial;
@@ -1777,18 +1785,20 @@ export default {
 .extend-right{
   position: absolute;
   z-index: 5;
-  border-radius: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-  padding: 10px;
+  /* border-radius: 20px; */
+  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
+  /* padding: 10px; */
   background-color: #DEDCDC;
   cursor: pointer;
   transform: scaleX(-1);
+  padding: 2px 6px;
+  border-radius: 3px;
 }
 .extend-right-cont{
   display: flex;
   transform: scaleX(-1);
 }
-.extend-right:after {
+/* .extend-right:after {
   content: '';
   position: absolute;
   top: 54%;
@@ -1798,7 +1808,7 @@ export default {
   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;
@@ -1806,9 +1816,10 @@ export default {
   top: 2px;
 }
 .extend-right-cont>p{
+  line-height: 20px;
   font-size: 12px;
   color: #fff;
-  padding-left: 5px;
+  /* padding-left: 5px; */
 }
 .isPointer{
   pointer-events: none;