zydx-plus 1.33.354 → 1.33.356

package/package.json

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

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="drag-pop" :class="{trans: transAll}" :style="position" :id="id" @click.stop="dragTap">
-    <div class="drag-head" :style="{'background-color':titleColor}">
+  <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @click.stop="dragTap">
+    <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}">
            <span @mousedown.stop="mousedown"
                  @mousemove.stop="mousemove"
                  @mouseup.stop="mouseup"
@@ -14,16 +14,18 @@
         <i v-if="closeShow" @click.stop="close"></i>
       </div>
     </div>
-    <div :class="{'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}"
+    <div :class="{'drag-cont2': fixedStart,'drag-cont': dragStatus || dragTextShow,'drag-conts': !dragStatus || !dragTextShow}"
          @mousemove.stop="footMove" @mouseleave.stop="footMove">
       <div class="drag-cont-slot">
         <slot name="content"></slot>
       </div>
-      <i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
-      <i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
-      <i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+      <div v-show="!fixedStart">
+        <i class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
+        <i class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
+        <i class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+      </div>
     </div>
-    <div class="down-text" v-if="dragStatus&&dragTextShow">
+    <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart">
       <div class="down-text-cont">
         <slot name="down"></slot>
 <!--        <img-->
@@ -52,7 +54,9 @@ export default {
       state: false,//是否显示
       clientWidth: 0,
       clientHeight: 0,
-      transAll: false
+      transAll: false,
+      fixedStart: false,
+      initWidth: 1280
     }
   },
   props: {
@@ -64,6 +68,18 @@ export default {
       type: Number,
       default: 400
     },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
     titleColor: {
       type: String,
       default: 'rgba(19, 191, 108, 1)'
@@ -114,17 +130,25 @@ export default {
   },
   watch: {
     width: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.footRightOffset = val
       },
       immediate: true
     },
     height: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
         this.footDownOffset = val
       },
       immediate: true
     },
+    fixed: {
+      handler: function (val) {
+        this.fixedStart = val
+        this.init()
+      },
+      immediate: true,
+      deep: true
+    }
   },
   mounted() {
     this.id = Math.random().toString(36).substr(2);
@@ -143,6 +167,21 @@ export default {
     popArr = (pop === null)? [] : JSON.parse(pop)
     popArr.push(this.id)
     sessionStorage.setItem('pop', JSON.stringify(popArr))
+    // 监听滚动
+    window.onscroll = () => {
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      if(this.fixedStart) {
+         this.y = this.top - scrollTop
+      }
+    }
+    // 监听窗口变化
+    window.addEventListener('resize', () => {
+      const wid = document.getElementById('app').offsetWidth
+      if(this.fixedStart) {
+        if(wid <= this.initWidth) return
+        this.x = this.left + (wid-this.initWidth)/2
+      }
+    });
   },
   computed: {
     position() {
@@ -174,10 +213,16 @@ export default {
       this.$emit('dragStatus')
     },
     init() {
-      this.clientWidth = document.documentElement.clientWidth;
-      this.clientHeight = document.documentElement.clientHeight;
-      this.x = this.clientWidth / 2 - this.footRightOffset / 2;
-      this.y = this.clientHeight / 2 - this.footDownOffset / 2;
+      if(this.fixedStart) {
+        const wid = document.getElementById('app').offsetWidth
+        this.x = this.left + (wid-this.initWidth)/2
+        this.y = this.top - document.documentElement.scrollTop
+      }else {
+        this.clientWidth = document.documentElement.clientWidth;
+        this.clientHeight = document.documentElement.clientHeight;
+        this.x = this.clientWidth / 2 - this.footRightOffset / 2;
+        this.y = this.clientHeight / 2 - this.footDownOffset / 2;
+      }
     },
     getWH(v) {
       this.transAll = true
@@ -414,13 +459,15 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  box-shadow: 0 0 3px 2px #ccc;
   background-color: #fff;
   border-radius: 3px;
   z-index: 9999;
   animation: linkDown .3s linear forwards;
   opacity: 0;
 }
+.drag-pop-shadow{
+  box-shadow: 0 0 3px 2px #ccc;
+}
 .trans{
   transition: all .3s;
 }
@@ -444,4 +491,8 @@ export default {
   height: calc(100% - 30px);
   position: relative;
 }
+.drag-cont2{
+  height: 100% !important;
+  position: relative;
+}
 </style>

package/src/components/editor/src/butJson.js

@@ -40,7 +40,7 @@ export function butJson(editor, data) {
                     name: '文章题目',
                     key: 'subjectMenu',
                     menuKeys: [],
-                    html: `<p data-signId="subject" style="text-align: center;padding-bottom: 30px;"><span style="color: rgb(0, 0, 0);font-size: 24px;font-family: SimHei;font-weight: 700;">${menusData(data, 'subjectMenu').text}</span></p>`
+                    html: `<p data-signId="subject" style="text-align: center;padding-bottom: 10px;"><span style="color: rgb(0, 0, 0);font-size: 24px;font-family: SimHei;font-weight: 700;">${menusData(data, 'subjectMenu').text}</span></p>`
                 }, {
                     name: '作&nbsp;&nbsp;&nbsp;者',
                     key: 'authorMenu',
@@ -57,17 +57,17 @@ export function butJson(editor, data) {
                     name: '摘&nbsp;&nbsp;&nbsp;要',
                     key: 'abstractMenu',
                     menuKeys: [],
-                    html: `<p class="abstract" data-signId="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">摘要:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: KaiTi"> 摘要内容...</span></p>`
+                    html: `<p class="abstract" data-signId="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">摘要:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: FangSong"> 摘要内容...</span></p>`
                 }, {
                     name: '关键词',
                     key: 'keywordMenu',
                     menuKeys: [],
-                    html: `<p class="keyword" data-signId="keyword"><span contenteditable="false" style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">关键词:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: KaiTi"> 关键词内容...</span></p>`
+                    html: `<p class="keyword" data-signId="keyword"><span contenteditable="false" style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;font-family: SimSun;">关键词:</span> <span style="color: rgb(0, 0, 0);font-size: 12px;font-family: FangSong"> 关键词内容...</span></p>`
                 }, {
                     name: '标&nbsp;&nbsp;&nbsp;题',
                     key: 'paragraphTitle',
                     menuKeys: [],
-                    html: `<p data-signId="title" class="indent"><span style="color: rgb(0, 0, 0);font-size: 16px;font-weight: 700;">标题名称</span></p>`
+                    html: `<p data-signId="title" class="indent"><span style="color: rgb(0, 0, 0);font-size: 22px;font-weight: 700;">标题名称</span></p>`
                 }, {
                     name: '正&nbsp;&nbsp;&nbsp;文',
                     key: 'paragraphBody',
@@ -108,17 +108,8 @@ export function butJson(editor, data) {
             name: '段落设置',
             key: 'paragraph',
             menuKeys: [
-                // {name: '缩  进', key: 'indent'},
-                // {name: '行间距', key: 'LineSpace',
-                /*childMenuKeys: [
-                    {name: '1倍', key: '1'},
-                    {name: '1.25倍', key: '1.25'},
-                    {name: '1.5倍', key: '1.5'},
-                    {name: '2倍', key: '2'},
-                    {name: '2.5倍', key: '2.5'},
-                    {name: '3倍', key: '3'}
-                ]*/
-                // },
+                {name: '缩进设置', key: 'Retraction'},
+                {name: '间距设置', key: 'LineSpace'}
             ],
         },
         alignmentMode: {
@@ -220,7 +211,7 @@ export function butJson(editor, data) {
             name: '上传附件',
             key: 'group-upload',
             menuKeys: [],
-            html: `<p contenteditable="false" data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
+            html: `<p data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
         },
         'group-image': {
             name: '插入图片',
@@ -312,7 +303,7 @@ export function butJson(editor, data) {
                     name: '上传附件',
                     key: 'group-upload',
                     childMenuKeys: [],
-                    html: `<p contenteditable="false" data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
+                    html: `<p data-signId="enclosure"><span style="font-weight: 700;font-size: 16px;">附件列表：</span></p>`
                 },
             ],
         }

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

@@ -17,7 +17,8 @@
           <ul v-for="(item2,index2) in item.menuKeys" style="position: relative">
             <li v-if="uploadTypeArr.indexOf(item2.key)  !== -1">
               <label>
-                <input :accept="acceptType[item2.key]" style="display: none;" type="file" @change="upload($event,item2.key)">
+                <input :accept="acceptType[item2.key]" style="display: none;" type="file"
+                       @change="upload($event,item2.key)">
                 <span v-html="item2.name"></span>
               </label>
             </li>
@@ -30,7 +31,8 @@
               <li v-for="(childItem,childIndex) in item2.childMenuKeys" @click="butTap(item,item2,childItem)">
                 <!--                childItem.key === 'uploadImage'-->
                 <label v-if=" uploadTypeArr.indexOf(childItem.key)  !== -1 ">
-                  <input :accept="acceptType[childItem.key]" style="display: none;" type="file" @change="upload($event,childItem.key)">
+                  <input :accept="acceptType[childItem.key]" style="display: none;" type="file"
+                         @change="upload($event,childItem.key)">
                   <span v-html="item2.name"></span>
                 </label>
                 <span v-else v-html="childItem.name"></span>
@@ -107,12 +109,14 @@
       </div>
     </div>
 
-    <div v-if="page&&readOnly" :style="{width: (wit + 20) + 'px'}" class="read-only">
+    <div v-if="page&&readOnly" class="read-only">
+<!--      :style="{width: (wit + 20) + 'px'}"-->
       <div v-if="signMenuShow" class="editing-header">
         <img :src="menusData('signMenu')?.ico" alt=""/>
         <span>{{ menusData('signMenu')?.text }}</span>
       </div>
-      <div v-for="(item,index) in htmlArr" :key="index" :style="{height: wit * 1.6 + 'px',width: wit + 'px'}"
+<!--      ,width: wit + 'px'-->
+      <div v-for="(item,index) in htmlArr" :key="index" :style="{height: wit * 1.6 + 'px'}"
            class="read-only-page" @click="menusTap">
         <div class="read-only-p" v-html="item"></div>
         <div class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
@@ -169,40 +173,47 @@
       </div>
     </div>
     <!--    段落设置-->
-    <zydx-drag-popup v-if="showDragPopup" :dragStatus="false" :enlargeShow="false" :minimize="false"
-                     :minimizeCir="false" height="450" @close="closeDragPopup">
+    <zydx-drag-popup
+        v-if="showRetractionPopup" :dragStatus="false" :enlargeShow="false" :minimize="false"
+        :minimizeCir="false" height="290" @close="closeDragPopup">
       <template #content>
         <div class="p-popup">
-          <div class="p-popup-title">段落设置</div>
+          <div class="p-popup-title">缩进设置</div>
           <div class="p-popup-retraction">
-            <h3>缩进：</h3>
-            <div>
-              <div class="p-popup-setting">
-                <div class="name">左侧缩进</div>
-                ：<input v-model="paragraph.left" type="number"/>
-                <p>px</p></div>
-              <div class="p-popup-setting">
-                <div class="name">右侧缩进</div>
-                ：<input v-model="paragraph.right" type="number"/>
-                <p>px</p></div>
-            </div>
+            <div class="p-popup-setting">
+              <div class="name">左侧缩进</div>
+              ：<input v-model="paragraph.left" type="number" min="0" @input="checkNum"/>
+              <p>px</p></div>
+            <div class="p-popup-setting">
+              <div class="name">右侧缩进</div>
+              ：<input v-model="paragraph.right" type="number" min="0" @input="checkNum"/>
+              <p>px</p></div>
+          </div>
+          <div class="tip-btnBox">
+            <div @click="paragraphSetting" v-html="`确定`"></div>
+            <div @click="closeDragPopup" v-html="`关闭`"></div>
           </div>
+        </div>
+      </template>
+    </zydx-drag-popup>
+    <zydx-drag-popup
+        v-if="showSpacingPopup" :dragStatus="false" :enlargeShow="false" :minimize="false"
+        :minimizeCir="false" height="320" @close="closeDragPopup">
+      <template #content>
+        <div class="p-popup">
+          <div class="p-popup-title">间距设置</div>
           <div class="p-popup-spacing">
-            <h3>间距：</h3>
-            <div>
-              <div class="p-popup-setting">
-                <div class="name">段前间距</div>
-                ：<input v-model="paragraph.top" type="number"/>
-                <p>px</p></div>
-              <div class="p-popup-setting">
-                <div class="name">段后间距</div>
-                ：<input v-model="paragraph.bottom" type="number"/>
-                <p>px</p></div>
-              <div class="p-popup-setting">
-                <div class="name">行距</div>
-                ：
-                <zydx-select v-model:value="paragraph.distance" :options="options" style="width: 300px"></zydx-select>
-              </div>
+            <div class="p-popup-setting">
+              <div class="name">段前间距</div>：
+              <input v-model="paragraph.top" type="number" min="0" @input="checkNum"/>
+              <p>px</p></div>
+            <div class="p-popup-setting">
+              <div class="name">段后间距</div>：
+              <input v-model="paragraph.bottom" type="number" min="0" @input="checkNum"/>
+              <p>px</p></div>
+            <div class="p-popup-setting">
+              <div class="name">行距</div>：
+              <zydx-select v-model:value="paragraph.distance" :options="options" style="width: 300px"></zydx-select>
             </div>
           </div>
           <div class="tip-btnBox">
@@ -301,8 +312,8 @@
 
     <!--  展示弹窗  -->
     <div v-for="(item,index) in interpositionData" :key="index">
-      <zydx-drag-popup v-if="item.isShow" :minWidth="640" :minHeight="183"
-                       :enlargeShow="false" :minimize="false" :minimizeCir="false"
+      <zydx-drag-popup v-if="item.isShow" :enlargeShow="false" :minHeight="183"
+                       :minWidth="640" :minimize="false" :minimizeCir="false"
                        :title="titleDragPopup[item.type]?titleDragPopup[item.type]:'参考文献'" height="auto"
                        width="auto" @close="closeDataShowPopup(item)">
         <template #content>
@@ -367,7 +378,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div style="min-width:600px;width: 600px" class="tip-box">
+            <div class="tip-box" style="min-width:600px;width: 600px">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -386,7 +397,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div style="min-width:600px;width: 600px" class="tip-box">
+            <div class="tip-box" style="min-width:600px;width: 600px">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -405,7 +416,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div style="min-width:600px;width: 600px" class="tip-box">
+            <div class="tip-box" style="min-width:600px;width: 600px">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <zydx-read :url="item.url" style="height: 100%"></zydx-read>
@@ -424,7 +435,7 @@
                      v-html="'删除'"></div>
               </div>
             </div>
-            <div style="min-width:600px;width: 600px" class="tip-box">
+            <div class="tip-box" style="min-width:600px;width: 600px">
               <div class="tip-title" v-html="`${item.exegesis}`"></div>
               <div class="tip-boxContent">
                 <iframe v-if="item.type === 'linkCourseware'" :src="item.url" frameborder="no" height="590"
@@ -461,26 +472,26 @@
 
 
     <!--    链接注释-->
-    <zydx-drag-popup v-if="isShowUpload" :dragStatus="false" :width="400"
-                     :enlargeShow="false" :minimize="false" :height="200"
-                     :minimizeCir="false" :title="'上传附件'" @close="isShowUpload=false">
-      <template #content>
-        <div class="upload-box">
-          <div class="check-upload">
-            <label>
-              <input type="checkbox" v-model="checkboxObj.value" :checked="checkboxObj.checked" @change="checkboxTao(checkboxObj)"/>
-              <span>{{ checkboxObj.label }}</span>
-            </label>
-          </div>
-          <div >
-            <label  style="border:1px solid #000;border-radius: 3px;padding:2px 5px;">
-              <input :accept="acceptType['group-upload']" style="display: none;" type="file" @change="upload($event,'group-upload')">
-              <span v-html="'上传附件'"></span>
-            </label>
-          </div>
-        </div>
-      </template>
-    </zydx-drag-popup>
+    <!--    <zydx-drag-popup v-if="isShowUpload" :dragStatus="false" :width="400"
+                         :enlargeShow="false" :minimize="false" :height="200"
+                         :minimizeCir="false" :title="'上传附件'" @close="isShowUpload=false">
+          <template #content>
+            <div class="upload-box">
+              <div class="check-upload">
+                <label>
+                  <input type="checkbox" v-model="checkboxObj.value" :checked="checkboxObj.checked" @change="checkboxTao(checkboxObj)"/>
+                  <span>{{ checkboxObj.label }}</span>
+                </label>
+              </div>
+              <div >
+                <label  style="border:1px solid #000;border-radius: 3px;padding:2px 5px;">
+                  <input :accept="acceptType['group-upload']" style="display: none;" type="file" @change="upload($event,'group-upload')">
+                  <span v-html="'上传附件'"></span>
+                </label>
+              </div>
+            </div>
+          </template>
+        </zydx-drag-popup>-->
 
   </div>
 </template>
@@ -488,7 +499,6 @@
 <script>
 import exportWord from 'js-export-word'
 import mammoth from './mammoth.browser.min'
-import {html2json, json2html} from '../../utils/html2json.js'
 import {butJson} from './butJson'
 import {Editor, EditorContent} from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -520,12 +530,13 @@ import viewSvg from "./view-svg.vue";
 import Recorder from 'js-audio-recorder'
 import zydxColoring from '../../coloring'
 import Message from '../../../components/tipBox/index';
-import Upload from '../../../components/upload' //上传文件
 import zydxTextarea from '../../textarea'
 import zydxRead from '../../read'
 import zydxDragPopup from '../../dragPopup'
 import zydxSelect from '../../select'
 import {exegesisId} from "./extend/exegesis-id";
+import {html2json, json2html} from '../../utils/html2json.js'
+import Upload from '../../../components/upload' //上传文件
 
 const img = require('./image/annotation.png')
 export default {
@@ -549,8 +560,8 @@ export default {
   },
   data() {
     return {
-      checkboxObj:{value: '1', label: '是否开启缩进', checked: false},
-      checkbox:false,
+      checkboxObj: {value: '1', label: '是否开启缩进', checked: false},
+      checkbox: false,
       titleDragPopup: {
         nounExplain: '链接名词',
         taggingMenu: '注释',
@@ -586,7 +597,7 @@ export default {
         uploadImage: 'image/*',
       },
       uploadTypeArr: [
-        // 'group-upload',
+        'group-upload',
         'importArticles',
         'importWorks',
         'videoLink',
@@ -637,7 +648,8 @@ export default {
         'textMenu', 'color', 'interposition'],
       bubbleData: {},
       htmlJson: [],
-      showDragPopup: false,
+      showRetractionPopup: false,
+      showSpacingPopup: false,
       showTaggingMenu: false,
       titlePopup: '',
       options: [
@@ -918,7 +930,7 @@ export default {
             _this.encIndex = state.selection.$from.parent.attrs
             if (_this.encIndex && _this.encIndex.titleId) {
               let titleIdArr = state.selection.$from.parent.attrs.titleId.split(' ')
-              return state.selection.$from.parent.attrs.titleId === 'mu' || titleIdArr.indexOf('mu')!==-1
+              return state.selection.$from.parent.attrs.titleId === 'mu' || titleIdArr.indexOf('mu') !== -1
             } else {
               return false
             }
@@ -1107,7 +1119,7 @@ export default {
   },
   emits: ['confirm', 'enclosure', 'enlDownload', 'enlSee'],
   methods: {
-    checkboxTao(checkboxObj){
+    checkboxTao(checkboxObj) {
       this.checkbox = checkboxObj.value
     },
     closeDataShowPopup(item) {
@@ -2021,18 +2033,19 @@ export default {
               // const b = await this.signIdData('paragraph')
               const t = await this.signIdData('enclosure')
               const r = await this.signIdData('reference')
+              console.log('menusText', this.menusText)
               const html = butJson(this.editor, this.menusText)[v].html
-              if(r===-1){
+              if (r === -1) {
                 const last = this.editor.state.selection.$anchor.path[0].content.size
                 if (t === -1) this.editor.chain().focus().insertContentAt(last, html).run()
                 const num = this.upSort(this.editor, 'enclosure')
                 const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="indent mu"><span>${num.num}. ${name}</span></p>`
                 this.editor.chain().focus().insertContentAt(num.len, html2).run()
-                const json =  this.editor.getJSON()
+                const json = this.editor.getJSON()
                 for (let i = 0; i < json.content.length; i++) {
                   const item = json.content[i]
-                  if( item.attrs.signId === 'enclosure'&&item.content[0].text==='附件列表：'){
-                    item.attrs.titleId = this.checkbox? 'indent' : null
+                  if (item.attrs.signId === 'enclosure' && item.content[0].text === '附件列表：') {
+                    item.attrs.titleId = this.checkbox ? 'indent' : null
                   }
                 }
                 this.editor.chain().setContent(<p></p>).run()
@@ -2041,15 +2054,15 @@ export default {
                 return
               }
               const num1 = this.upSort(this.editor, 'reference')
-              if (t === -1) this.editor.chain().focus().insertContentAt(num1.len-7, html).run()
+              if (t === -1) this.editor.chain().focus().insertContentAt(num1.len - 7, html).run()
               const num = this.upSort(this.editor, 'enclosure')
               const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}" class="indent mu"><span>${num.num}. ${name}</span></p>`
               this.editor.chain().focus().insertContentAt(num.len, html2).run()
-              const json =  this.editor.getJSON()
+              const json = this.editor.getJSON()
               for (let i = 0; i < json.content.length; i++) {
                 const item = json.content[i]
-                if( item.attrs.signId === 'enclosure'&&item.content[0].text==='附件列表：'){
-                  item.attrs.titleId = this.checkbox? 'indent' : null
+                if (item.attrs.signId === 'enclosure' && item.content[0].text === '附件列表：') {
+                  item.attrs.titleId = this.checkbox ? 'indent' : null
                 }
               }
               this.editor.chain().setContent(<p></p>).run()
@@ -2428,8 +2441,8 @@ export default {
           const n = await this.signIdData('enclosure')//附件
           const a = await this.signIdData('reference')//参考文献
           if (b === -1) {
-            if(n===-1){
-              if(a===-1){
+            if (n === -1) {
+              if (a === -1) {
                 if (r === -1) this.editor.chain().focus().insertContentAt(last, html).run()
                 return
               }
@@ -2451,8 +2464,8 @@ export default {
           const r = await this.signIdData('ack')
           const b = await this.signIdData('enclosure')//附件
           const a = await this.signIdData('reference')//参考文献
-          if(b===-1){
-            if(a===-1){
+          if (b === -1) {
+            if (a === -1) {
               if (r === -1) {
                 this.editor.chain().focus().insertContentAt(last, html[0]).run()
                 this.editor.chain().focus().insertContentAt(last + 3, html[1]).run()
@@ -2462,13 +2475,13 @@ export default {
             const num = this.upSort(this.editor, 'reference')
             if (r === -1) {
               this.editor.chain().focus().insertContentAt(num.len - 7, html[0]).run()
-              this.editor.chain().focus().insertContentAt(num.len-3, html[1]).run()
+              this.editor.chain().focus().insertContentAt(num.len - 3, html[1]).run()
             }
             return
           }
           const num = this.selectionPath('enclosure')
           if (r === -1) {
-            this.editor.chain().focus().insertContentAt(num-7, html[0]).run()
+            this.editor.chain().focus().insertContentAt(num - 7, html[0]).run()
             const ackNum = this.selectionPath('ack')
             this.editor.chain().focus().insertContentAt(ackNum, html[1]).run()
           }
@@ -2509,33 +2522,29 @@ export default {
       // 段落
       if (data.key === 'paragraph') {
         this.menuStast = 'paragraph'
-        // if (key.key === 'indent') {
-        //   let titleId = this.editor.getAttributes('paragraph').titleId
-        //   if (titleId === 'indent') {
-        //     this.editor.commands.unsetTitleId()
-        //     return
-        //   }
-        //   this.editor.commands.setTitleId('indent')
-        // }
-        // if (key.key === 'LineSpace') {
-        // }
-        this.showDragPopup = true
         const index = this.editor.state.selection.$anchor.path[1]
         const json = this.editor.getJSON()
         const margin = json.content[index].attrs.margin
-        console.log('attrs',json.content[index].attrs)
+        console.log('attrs', json.content[index].attrs)
         const lineHeight = json.content[index].attrs.lineHeightId
-        if (!margin === false) {
-          const marginArr = margin.split(' ').map(item => item.replace('px', ''))
-          this.paragraph.top = marginArr[0]
-          this.paragraph.right = marginArr[1]
-          this.paragraph.bottom = marginArr[2]
-          this.paragraph.left = marginArr[3]
+        if (key.key === 'Retraction') {
+          this.showRetractionPopup = true
+          if (!margin === false) {
+            let marginArr = margin.split(' ').map(item => item.replace('px', ''))
+            this.paragraph.right = marginArr[1]
+            this.paragraph.left = marginArr[3]
+          }
         }
-        if (!lineHeight === false) {
-          let child = ['1', '1.25', '1.5', '2', '2.5', '3']
-          const index = lineHeight.split('-')[1]
-          this.paragraph.distance = child[index - 1]
+        if (key.key === 'LineSpace') {
+          this.showSpacingPopup = true
+          if (!lineHeight === false) {
+            let marginArr = margin.split(' ').map(item => item.replace('px', ''))
+            this.paragraph.top = marginArr[0]
+            this.paragraph.bottom = marginArr[2]
+            let child = ['1', '1.25', '1.5', '2', '2.5', '3']
+            const index = lineHeight.split('-')[1]
+            this.paragraph.distance = child[index - 1]
+          }
         }
       }
       // 字体
@@ -2606,7 +2615,7 @@ export default {
       }
       // 插入
       if (data.key === 'interposition') {
-        if(key.key === 'group-upload'){
+        if (key.key === 'group-upload') {
           this.isShowUpload = true
         }
         // 添加图片
@@ -2983,16 +2992,31 @@ export default {
     paragraphSetting() {
       const selectionIndex = this.editor.state.selection.$anchor.path[1]
       const json = this.editor.getJSON()
+      const textAlign = json.content[selectionIndex].attrs.textAlign
+      const lineHeightId = json.content[selectionIndex].attrs.lineHeightId
+      const signId = json.content[selectionIndex].attrs.signId
       const titleId = json.content[selectionIndex].attrs.titleId
       this.editor.commands.setMargin(`${this.paragraph.top}px ${this.paragraph.right}px ${this.paragraph.bottom}px ${this.paragraph.left}px`)
       let child = ['1', '1.25', '1.5', '2', '2.5', '3']
       let index = this.paragraph?.distance ? child.indexOf(this.paragraph?.distance) + 1 : 2
       this.editor.commands.setLineHeightId(`ling-${index}`)
-      if(!titleId===false){
+      if (!textAlign === false) {
+        this.editor.commands.unsetTextAlign()
+        this.editor.commands.setTextAlign(textAlign)
+      }
+      if(!lineHeightId === false){
+        this.editor.commands.unsetLineHeightId()
+        this.editor.commands.setLineHeightId(lineHeightId)
+      }
+      if(!signId === false){
+        this.editor.commands.unsetSignId()
+        this.editor.commands.setSignId(signId)
+      }
+      if(!titleId === false){
         this.editor.commands.unsetTitleId()
         this.editor.commands.setTitleId(titleId)
       }
-      this.showDragPopup = false
+      this.closeDragPopup()
     },
     taggingMenuSubmit() {
       this.taggingText = this.$refs.textarea.getContent()
@@ -3000,7 +3024,7 @@ export default {
         Message({type: 'text', promptContent: '注释描述不能为空'})
         return
       }
-      const {from, to} = this.editor.state.selection
+      const {to} = this.editor.state.selection
       let dataInfo = {
         id: `${new Date().getTime()}`,
         type: 'taggingMenu',
@@ -3075,7 +3099,8 @@ export default {
     },
 
     closeDragPopup() {
-      this.showDragPopup = false
+      this.showSpacingPopup = false
+      this.showRetractionPopup = false
     },
 
     close() {
@@ -3303,6 +3328,26 @@ export default {
         this.editor?.commands.setContent(json)
       }
     },
+    checkNum(element) {
+      var val= element.target.value;
+      //匹配非数字
+      var reg = new RegExp("([^0-9]*)","g");
+      var ma = val.match(reg);
+      //如果有非数字，替换成""
+      if(ma.length>0){
+        for(var k in ma){
+          if(ma[k]!==""){
+            val = val.replace(ma[k],"");
+          }
+        }
+      }
+      //可以为0，但不能以0开头
+      if(val.startsWith("0")&&val.length>1){
+        val = val.substring(1,val.length);
+      }
+      //赋值，这样实现的效果就是用户按下非数字不会有任何反应
+      element.target.value = val;
+    }
   }
 }
 </script>
@@ -3370,7 +3415,7 @@ export default {
 }
 
 :deep(p[data-signid="subject"]) {
-  padding-bottom: 15px;
+//padding-bottom: 15px;
 }
 
 :deep(.author) {
@@ -4016,18 +4061,18 @@ li {
   justify-content: flex-end;
 }
 
-.check-upload label{
+.check-upload label {
   display: flex;
   flex-direction: row;
   align-items: center;
   line-height: 1;
 }
 
-.check-upload span{
+.check-upload span {
   padding-left: 10px;
 }
 
-.upload-box{
+.upload-box {
   padding: 50px 40px;
   height: 100%;
   display: flex;

package/src/components/sketchpad/src/sketchpad.vue

@@ -3,66 +3,66 @@
 </template>
 
 <script>
-import { createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-import { Tldraw } from 'tldraw'
+import {createElement} from 'react'
+import {createRoot} from 'react-dom/client'
+import {Tldraw} from 'tldraw'
 import 'tldraw/tldraw.css'
 
 const clearJson = {
-  store:{
-    "document:document":{
-      gridSize:10,
-      name:"",
-      meta:{},
-      id:"document:document",
-      typeName:"document"
-    },
-    "page:page":{
-      meta:{},
-      id:"page:page",
-      name:"Page 1",
-      index:"a1",
-      typeName:"page"
+  store: {
+    "document:document": {
+      gridSize: 10,
+      name: "",
+      meta: {},
+      id: "document:document",
+      typeName: "document"
+    },
+    "page:page": {
+      meta: {},
+      id: "page:page",
+      name: "Page 1",
+      index: "a1",
+      typeName: "page"
     }
   },
-  schema:{
-    schemaVersion:1,
-    storeVersion:4,
-    recordVersions:{
-      asset:{
-        version:1,
-        subTypeKey:"type",
-        subTypeVersions:{
-          image:3,
-          video:3,
-          bookmark:1
+  schema: {
+    schemaVersion: 1,
+    storeVersion: 4,
+    recordVersions: {
+      asset: {
+        version: 1,
+        subTypeKey: "type",
+        subTypeVersions: {
+          image: 3,
+          video: 3,
+          bookmark: 1
         }
       },
-      camera:{version:1},
-      document:{version:2},
-      instance:{version:24},
-      instance_page_state:{version:5},
-      page:{"version":1},
-      shape:{
-        version:3,
-        subTypeKey:"type",
-        subTypeVersions:{
-          group:0,
-          text:1,
-          bookmark:2,
-          draw:1,
-          geo:8,
-          note:5,
-          line:4,
-          frame:0,
-          arrow:3,
-          highlight:0,
-          embed:4,
-          image:3,
-          video:2
+      camera: {version: 1},
+      document: {version: 2},
+      instance: {version: 24},
+      instance_page_state: {version: 5},
+      page: {"version": 1},
+      shape: {
+        version: 3,
+        subTypeKey: "type",
+        subTypeVersions: {
+          group: 0,
+          text: 1,
+          bookmark: 2,
+          draw: 1,
+          geo: 8,
+          note: 5,
+          line: 4,
+          frame: 0,
+          arrow: 3,
+          highlight: 0,
+          embed: 4,
+          image: 3,
+          video: 2
         }
       },
-      instance_presence:{version:5},pointer:{version:1}
+      instance_presence: {version: 5}, pointer: {version: 1}
     }
   }
 }
@@ -71,113 +71,262 @@ export default {
   name: "zydx-sketchpad",
   data() {
     return {
-      editor:null
+      editor: null
     }
   },
   mounted() {
+    // 鼠标移入
+    this.$refs.reactRef.addEventListener('mouseover', () => {
+      document.body.style.overflow = 'hidden'
+    });
+    // 鼠标移出
+    this.$refs.reactRef.addEventListener('mouseleave', () => {
+      document.body.style.overflow = 'visible'
+    });
+
     const root = createRoot(this.$refs.reactRef)
     root.render(createElement(Tldraw, {
       onMount: this.handleMountedEditor,
-      hideUi: true
+      hideUi: true, // 隐藏UI
+      // persistenceKey: "example111" // 持久化名字
+      autoFocus: false  // 聚焦
     }, null))
   },
   methods: {
     handleMountedEditor(editor) {
+      console.log('editor', editor)
       this.editor = editor
-      // editor.store.listen((entry) => {
-      //   const up = entry.changes.updated
-      // })
+      setTimeout(() => {
+        document.documentElement.scrollTop = 0
+      }, 0)
+    },
+    setOpacityForNextShapes(opacity){
+      this.editor.setOpacityForNextShapes(opacity)
     },
     // 清空
     clear() {
       this.editor.store.loadSnapshot(clearJson)
+      this.isFocused()
     },
     // 添加快照
     setSnapshot(v) {
       this.editor.store.loadSnapshot(v)
+      this.isFocused()
     },
     // 获取快照
     getSnapshot() {
       return this.editor.store.getSnapshot()
     },
     draw(v) {
-      this.styleProps('draw','color').defaultValue = v?.color?? 'black'
-      this.styleProps('draw','size').defaultValue = v?.size?? 'm'
+      this.styleProps('draw', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('draw', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('draw', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('draw', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('draw')
     },
     select() {
       this.editor.setCurrentTool('select')
     },
     hand() {
-       this.editor.setCurrentTool('hand')
+      this.editor.setCurrentTool('hand')
     },
     eraser() {
       this.editor.setCurrentTool('eraser')
     },
     arrow(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      // 'none', 'semi', 'solid', 'pattern'
+      this.styleProps('arrow', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('arrow', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('arrow', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('arrow', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('arrow')
     },
     text(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      this.styleProps('text', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('text', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('text', 'font').defaultValue = v?.font ?? 'draw' //['draw', 'sans', 'serif', 'mono']
+      this.styleProps('text', 'align').defaultValue = v?.align ?? 'start'
       this.editor.setCurrentTool('text')
     },
+    note(v) {
+      this.styleProps('note', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('note', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('note', 'font').defaultValue = v?.font ?? 'draw' //['draw', 'sans', 'serif', 'mono']
+      this.styleProps('note', 'align').defaultValue = v?.align ?? 'start'
+      this.editor.setCurrentTool('note')
+    },
     line(v) {
-      this.styleProps('arrow','color').defaultValue = v?.color?? 'black'
-      this.styleProps('arrow','size').defaultValue = v?.size?? 'm'
+      this.styleProps('arrow', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('arrow', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('arrow', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('arrow', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('line')
     },
     rectangle(v) {
-      this.styleProps('geo','geo').defaultValue = 'rectangle'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'rectangle'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     ellipse(v) {
-      this.styleProps('geo','geo').defaultValue = 'ellipse'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'ellipse'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     triangle(v) {
-      this.styleProps('geo','geo').defaultValue = 'triangle'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'triangle'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+
+    rhombus(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'rhombus'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    cloud(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'cloud'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    trapezoid(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'trapezoid'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    diamond(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'diamond'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     star(v) {
-      this.styleProps('geo','geo').defaultValue = 'star'
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'geo').defaultValue = 'star'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+
+    xBox(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'x-box'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    checkBox(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'check-box'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    oval(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'oval'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowLeft(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-left'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowRight(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-right'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowUp(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-up'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    arrowDown(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'arrow-down'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
+      this.editor.setCurrentTool('geo')
+    },
+    hexagon(v) {
+      this.styleProps('geo', 'geo').defaultValue = 'hexagon'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('geo')
     },
     highlight(v) {
-      this.styleProps('geo','color').defaultValue = v?.color?? 'black'
-      this.styleProps('geo','size').defaultValue = v?.size?? 'm'
+      this.styleProps('geo', 'color').defaultValue = v?.color ?? 'black'
+      this.styleProps('geo', 'size').defaultValue = v?.size ?? 'm'
+      this.styleProps('geo', 'dash').defaultValue = v?.dash ?? 'draw'
+      this.styleProps('geo', 'fill').defaultValue = v?.fill ?? 'none'
       this.editor.setCurrentTool('highlight')
     },
     laser() {
       this.editor.setCurrentTool('laser')
     },
-    undo(){
+    undo() {
       this.editor.undo()
     },
-    redo(){
+    redo() {
       this.editor.redo()
     },
-    styleProps(t,e) {
+    styleProps(t, e) {
       const style = [...this.editor.styleProps[t]]
       const index = style.findIndex(item => item[1] === e)
       return style[index][0]
+    },
+    // 重新获取焦点
+    isFocused() {
+      const top = document.documentElement.scrollTop
+      setTimeout(() => {
+        this.editor.updateInstanceState({isFocused: true})
+        document.documentElement.scrollTop = top
+      }, 10)
     }
   }
 }
 </script>
 
 <style scoped>
-.react{
+.react {
   width: 100%;
   height: 100%;
 }

package/src/index.js

@@ -83,7 +83,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.33.354',
+    version: '1.33.356',
     install,
     Calendar,
     Message,