zydx-plus 1.32.258 → 1.32.260

package/package.json

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

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

@@ -7,6 +7,9 @@
           <button v-if="item.key === 'but'" class="buts" @click="item.onClick(item,info)"
                   :style="{color: (item.active)? '#00ff00' :'#000'}">{{ item.title }}
           </button>
+          <button v-if="item.key === 'speech'" class="buts" @mousedown.stop="speechDown" @click="item.onClick(item)"
+                  :style="{color: (item.active)? '#00ff00' :'#000'}">{{ voiceStatus ? '关闭语音' : '语音输入' }}
+          </button>
           <label v-else-if="item.key === 'upImg' || item.key === 'uploadAtt'">
             <input type="file" @change="upload($event,item.key)"
                    :accept="(item.key === 'upImg')?'image/*':'.docx,.pptx,.pdf,.xlsx,.mp3,.mp4'" style="display: none;">
@@ -14,23 +17,21 @@
           </label>
           <button v-else class="buts" @click="toolTap(item.key)">{{ item.title }}</button>
         </div>
-        <div class="voice">
-          <button class="buts" @click="voice" :style="{color: (voiceStatus)? '#00ff00' :'#000'}">
-            {{ voiceStatus ? '关闭语音' : '语音输入' }}
-          </button>
-        </div>
       </div>
     </div>
     <div class="ed-cont" :style="heightStyleCont">
-      <div :style="{'border': (borderShow)? '1px solid #ccc': '0'}" v-if="editorShow">
+      <div  :style="{'border': (borderShow)? '1px solid #ccc': '0'}" v-if="editorShow">
         <editor-content @paste.native.capture.prevent="preventPaste" ref="editorRef" class="editor" :editor="editor"
                         :style="heightStyleCont"/>
       </div>
-      <div v-if="voiceStatus" class="speak">
+      <div v-if="voiceStatus" class="speak"
+           @mousedown.stop="mousedown"
+           @mouseup.stop="mouseup"
+           :style="{transform: `translate(${x}px, ${y}px)`}">
         <div class="speak-cont">
           <svg t="1698630789078" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4553" width="15" height="15"><path d="M533.84533333 930.88426667c-13.65333333 0-24.576-10.92266667-24.576-24.576v-122.33386667c0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576v122.33386667c-0.54613333 13.65333333-11.4688 24.576-24.576 24.576zM533.84533333 686.21653333c-101.03466667 0-183.5008-82.46613333-183.5008-183.5008V258.048c0-101.03466667 82.46613333-183.5008 183.5008-183.5008s183.5008 82.46613333 183.5008 183.5008v244.66773333c0 101.03466667-82.46613333 183.5008-183.5008 183.5008z m0-563.06346666c-74.27413333 0-134.89493333 60.6208-134.89493333 134.89493333v244.66773333c0 74.27413333 60.6208 134.89493333 134.89493333 134.89493334s134.89493333-60.6208 134.89493334-134.89493334V258.048c-0.54613333-74.27413333-60.6208-134.89493333-134.89493334-134.89493333z" fill="#fff" p-id="4554"></path><path d="M533.84533333 808.5504c-168.7552 0-305.83466667-137.07946667-305.83466666-305.83466667 0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576c0 141.99466667 115.23413333 257.2288 257.2288 257.2288S790.528 644.7104 790.528 502.71573333c0-13.65333333 10.92266667-24.576 24.576-24.576s24.576 10.92266667 24.576 24.576c0 168.7552-137.07946667 305.83466667-305.83466667 305.83466667zM729.36106667 955.46026667H337.78346667c-13.65333333 0-24.576-10.92266667-24.576-24.576s10.92266667-24.576 24.576-24.576h391.5776c13.65333333 0 24.576 10.92266667 24.576 24.576s-10.92266667 24.576-24.576 24.576z" fill="#FFF" p-id="4555"></path></svg>
           <svgs :vol="vol"></svgs>
-          <span>{{ error? '开启语音失败' : '正在说话...' }}</span>
+          <span>{{ error? '连接中...' : '正在说话...' }}</span>
           <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>
@@ -128,7 +129,14 @@ export default {
       vol: 0,
       appData: {},
       error: false,
-      time: {}
+      time: {},
+      toolbars: [],
+      left: 0,
+      top: 0,
+      isMove: false,
+      x: 0,
+      y: 0,
+      speech: {}
     }
   },
   beforeUnmount() {
@@ -136,6 +144,7 @@ export default {
     this.recorder?.destroy()
     this.ws?.send(JSON.stringify({"type":"CANCEL"}))
     this.ws?.close()
+    this.ws = null
   },
   props: {
     data: {
@@ -245,6 +254,22 @@ export default {
         })
       },
       deep: true
+    },
+    toolbar: {
+      handler: function (e, oldVal) {
+        e.map(x => {
+          if (x.key === 'speech') {
+            this.voiceStatus = x.active
+            if(this.voiceStatus) {
+              this.voice()
+            }else {
+              this.close()
+            }
+          }
+          return x
+        })
+      },
+      deep: true
     }
   },
   mounted() {
@@ -297,7 +322,6 @@ export default {
         }
       }
     })
-    _this.appID()
     // 初始化录音
     this.recorder = new Recorder({
       sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
@@ -307,8 +331,29 @@ export default {
     this.recorder.onprogress = function (params) {
       _this.vol = params.vol
     }
+    document.addEventListener('mousemove', (event) => {
+      if (!this.isMove) return
+      this.x = event.clientX - this.left;
+      this.y = event.clientY - this.top;
+    })
   },
   methods: {
+    speechDown(e) {
+      this.speech = {
+        x: e.clientX - e.offsetX,
+        y: e.clientY - e.offsetY,
+      }
+    },
+    mousedown(event) {
+      event.preventDefault()
+      //鼠标按下事件
+      this.left = event.offsetX;
+      this.top = event.offsetY;
+      this.isMove = true
+    },
+    mouseup() {
+      this.isMove = false
+    },
     // 粘贴文本处理
     preventPaste(event) {
       const text = event.clipboardData.getData('text/plain');
@@ -363,35 +408,40 @@ export default {
       scriptProcessor.connect(that.recorder.context.destination);
     },
     voice() {
-      let that = this
-      that.voiceStatus = !this.voiceStatus
-      if(that.voiceStatus) {
-        this.recorder.start().then(() => { // 开始录音
-          this.audioData  = []
-          this.webSocketInit()
-        }, (error) => {
-          this.$message({
-            type: 'text',
-            cancelShow: false,
-            promptContent: '录音失败，请检查麦克风是否可用'
-          })
-        });
-      }else {
-        that.close()
-      }
+      this.recorder.start().then(() => { // 开始录音
+        this.audioData  = []
+        this.x = this.speech.x - 85
+        const h = this.height.split('px')[0]
+        this.y = this.speech.y + ((this.height === '100%') ? 40 : Number(h) - 10)
+        this.appID()
+      }, (error) => {
+        this.$message({
+          type: 'text',
+          cancelShow: false,
+          promptContent: '录音失败，请检查麦克风是否可用'
+        })
+      });
     },
     close() {
+      if(this.ws === null) return
+      this.toolbar.map(x => {
+        if (x.key === 'speech') {
+          x.active = false
+        }
+        return x
+      })
       this.voiceStatus = false
-      this.ws.send(JSON.stringify({"type":"CANCEL"}))
-      this.ws.close()
+      this.ws?.send(JSON.stringify({"type":"CANCEL"}))
+      this.ws?.close()
+      this.ws = null
       this.recorder.stop() // 停止录音
       this.recorder.destroy()
     },
     webSocketInit() {
       const _this = this
-      _this.ws = new WebSocket(`wss://vop.baidu.com/realtime_asr?sn=${this.getRandomCode(15)}`)
-      _this.ws.binaryType = 'arraybuffer'
-      _this.ws.onopen = function () {
+      this.ws = new WebSocket(`wss://vop.baidu.com/realtime_asr?sn=${this.getRandomCode(15)}`)
+      this.ws.binaryType = 'arraybuffer'
+      this.ws.onopen = function () {
         _this.error = false
         const json = {
           type: 'START',
@@ -407,7 +457,7 @@ export default {
         _this.ws.send(JSON.stringify(json))
         _this.getAudioSuccess()
       }
-      _this.ws.onmessage = function (e) {
+      this.ws.onmessage = function (e) {
         const data = JSON.parse(e.data)
         if(data.err_no === 0){
           const json = _this.editor.getJSON()
@@ -422,10 +472,9 @@ export default {
           _this.time = data
         }
       }
-      _this.ws.onerror = function () {
+      this.ws.onerror = function () {
         // 连接失败重连
         setTimeout(() => {
-          _this.error = true
           _this.webSocketInit()
         }, 5000)
       }
@@ -439,14 +488,16 @@ export default {
         token = sessionStorage.getItem('sessionId')
       }
       const xhr = new XMLHttpRequest()
-      // xhr.open('GET', 'http://192.168.15.126:8888/zydx/voice/getDesKeyId')
-      // xhr.setRequestHeader('Authorization', 'e891f5a9-4cf0-4f9f-b969-c91d44e6648c')
-      xhr.open('GET', '/zydx/voice/getDesKeyId')
-      xhr.setRequestHeader('Authorization', token)
+      xhr.open('GET', 'http://192.168.15.124:8888/zydx/voice/getDesKeyId')
+      xhr.setRequestHeader('Authorization', 'dd9fabcd-ca68-4f1a-97f0-21a66628207d')
+      // xhr.open('GET', '/zydx/voice/getDesKeyId')
+      // xhr.setRequestHeader('Authorization', token)
+      this.error = true
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4) {
           if (xhr.status === 200) {
             this.appData = JSON.parse(xhr.responseText).data
+            this.webSocketInit()
           }
         }
       }
@@ -657,8 +708,11 @@ export default {
 
 <style scoped>
 .speak{
-  text-align: right;
-  padding: 5px 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  cursor: move;
 }
 .speak-cont{
   background: rgba(67, 207, 124, 1);
@@ -812,6 +866,7 @@ export default {
 .ed-cont {
   padding-top: 4px;
   margin-bottom: 14px;
+  position: relative;
 }
 
 .editor {

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

@@ -1,452 +1,510 @@
 <template>
-    <div class="sketchpad">
-        <canvas :id="id"></canvas>
-        <div class="tool">
-            <div class="tool-list" @click="set">
-                <img src="./img/shezi.png" alt="" />
-                <div v-if="setShow" class="set">
-                    <div class="set-list">
-                        <span>线条粗细</span>
-                        <em v-for="(item,index) in strokeData" @click="strokeTap(item)">{{ item }}</em>
-                    </div>
-                    <div class="set-list">
-                        <span>线条颜色</span>
-                        <i v-for="(item,index) in strokeColor" @click="strokeColTap(item)" :style="{'background-color': item}"></i>
-                    </div>
-                </div>
-            </div>
-            <div class="tool-list" @click="brush">
-                <img src="./img/huabi.png" alt="" />
-            </div>
-            <div class="tool-list" @click="rectangle">
-                <img src="./img/juxing.png" alt="" />
-            </div>
-            <div class="tool-list" @click="addTextBox">
-                <img src="./img/wenzi.png" alt="" />
-                <div v-if="textShow" class="set">
-                    <div class="set-list">
-                        <span>字号</span>
-                        <em style="font-size: 13px;" v-for="(item,index) in textData" @click.stop="sizeTap(item)">{{ item }}</em>
-                    </div>
-                    <div class="set-list">
-                        <span>内容</span>
-                        <input type="text" v-model="text" @click.stop="false" />
-                    </div>
-                    <div class="set-list set-right">
-                        <button class="but" @click="textBox">确认</button>
-                    </div>
-                </div>
-            </div>
-            <div class="tool-list" @click="rotundity">
-                <img src="./img/yuan.png" alt="" />
-            </div>
-            <div class="tool-list" @click="addLine">
-                <img src="./img/jian.png" alt="" />
-            </div>
-            <div class="tool-list" @click="arrow">
-                <img src="./img/jiantou.png" alt="" />
-            </div>
-            <div class="tool-list" @click="save">
-                <img src="./img/baocun.png" alt="" />
-            </div>
-            <div class="tool-list" @click="clear">
-                <img src="./img/xiangpi.png" alt="" />
-            </div>
+  <div class="sketchpad" ref="sketchpad">
+    <canvas :id="id"></canvas>
+    <div class="tool"
+         @mouseup.stop="mouseup"
+         @mousedown.stop="mousedown"
+         :style="{transform: `translate(${x}px, ${y}px)`}">
+      <div class="tool-list" @click.stop="set">
+        <img src="./img/shezi.png" alt=""/>
+        <div v-if="setShow" class="set">
+          <div class="set-list">
+            <span>线条粗细</span>
+            <em v-for="(item,index) in strokeData" @click="strokeTap(item)">{{ item }}</em>
+          </div>
+          <div class="set-list">
+            <span>线条颜色</span>
+            <i v-for="(item,index) in strokeColor" @click="strokeColTap(item)" :style="{'background-color': item}"></i>
+          </div>
         </div>
+      </div>
+      <div class="tool-list" @click.stop="brush">
+        <img src="./img/huabi.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="rectangle">
+        <img src="./img/juxing.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="addTextBox">
+        <img src="./img/wenzi.png" alt=""/>
+        <div v-if="textShow" class="set">
+          <div class="set-list">
+            <span>字号</span>
+            <em style="font-size: 13px;" v-for="(item,index) in textData" @click.stop="sizeTap(item)">{{ item }}</em>
+          </div>
+          <div class="set-list">
+            <span>内容</span>
+            <input type="text" v-model="text" @click.stop="false"/>
+          </div>
+          <div class="set-list set-right">
+            <button class="but" @click="textBox">确认</button>
+          </div>
+        </div>
+      </div>
+      <div class="tool-list" @click.stop="rotundity">
+        <img src="./img/yuan.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="addLine">
+        <img src="./img/jian.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="arrow">
+        <img src="./img/jiantou.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="save">
+        <img src="./img/baocun.png" alt=""/>
+      </div>
+      <div class="tool-list" @click.stop="clear">
+        <img src="./img/xiangpi.png" alt=""/>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { fabric } from 'fabric'
+import {fabric} from 'fabric'
+
 export default {
-    name: "zydx-sketchpad",
-    data() {
-        return {
-            canvas: null,
-            strokeWidth: 2, // 线条粗细
-            color: '#000', // 线条颜色
-            line: null, // 线条
-            isDown: false, // 是否按下
-            state: null, // 状态
-            rect: null, // 矩形
-            circle: null, // 圆形
-            fontSize: 14, // 字体大小
-            setShow: false, // 设置
-            strokeData: ['1','2','3','4','5','6','7'], // 画笔数据
-            strokeColor: ['#000','#f00','#0f0','#00f','#f0f','#ff0','#0ff'], // 画笔颜色
-            textShow: false, // 文本
-            textData: ['14','16','18','20','22','24','28','30'], // 文本数据
-            text: '',
-            id: null
-        }
+  name: "zydx-sketchpad",
+  data() {
+    return {
+      canvas: null,
+      strokeWidth: 2, // 线条粗细
+      color: '#000', // 线条颜色
+      line: null, // 线条
+      isDown: false, // 是否按下
+      state: null, // 状态
+      rect: null, // 矩形
+      circle: null, // 圆形
+      fontSize: 14, // 字体大小
+      setShow: false, // 设置
+      strokeData: ['1', '2', '3', '4', '5', '6', '7'], // 画笔数据
+      strokeColor: ['#000', '#f00', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'], // 画笔颜色
+      textShow: false, // 文本
+      textData: ['14', '16', '18', '20', '22', '24', '28', '30'], // 文本数据
+      text: '',
+      id: null,
+      left: 0,
+      top: 0,
+      isMove: false,
+      x: -50,
+      y: 0,
+      offLeft: 0,
+      offTop: 0,
+      scrollTop: 0
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+      }
     },
-    props: {
-        data: {
-            type: Object,
-            default: () => {}
-        },
-        width: {
-            type: Number,
-            default: 800
-        },
-        height: {
-            type: Number,
-            default: 800
-        }
+    width: {
+      type: Number,
+      default: 800
     },
-    emits: ['save'],
-    watch: {
-        data: {
-            handler(val) {
-                this.canvas.loadFromJSON(val)
-            },
-            deep: true
-        }
+    height: {
+      type: Number,
+      default: 800
+    }
+  },
+  emits: ['save'],
+  watch: {
+    data: {
+      handler(val) {
+        this.canvas.loadFromJSON(val)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 生成随机id
+    this.id = Math.random().toString(36).substr(2)
+    setTimeout(() => {
+      this.init()
+    }, 0)
+    window.addEventListener('keydown', this.handleKeyEvent)
+    this.offLeft = this.$refs.sketchpad.offsetLeft
+    this.offTop = this.$refs.sketchpad.offsetTop
+    // 监听滚动
+    this.throttleHandleScroll()
+    window.addEventListener('scroll', this.throttleHandleScroll);
+    document.addEventListener('mousemove', (event) => {
+      if (!this.isMove) return
+      this.x = event.clientX - this.left;
+      this.y = event.clientY - this.top;
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyEvent)
+  },
+  methods: {
+    throttleHandleScroll() {
+      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    },
+    mousedown(event) {
+      event.preventDefault()
+      //鼠标按下事件
+      this.left = event.offsetX + this.offLeft
+      this.top = event.offsetY + this.offTop - this.scrollTop
+      this.isMove = true
+    },
+    mouseup() {
+      //鼠标松开事件
+      this.isMove = false
     },
-    mounted() {
-        // 生成随机id
-        this.id = Math.random().toString(36).substr(2)
-        setTimeout(() => {
-            this.init()
-        },0)
-        window.addEventListener('keydown', this.handleKeyEvent)
+    sizeTap(v) {
+      this.fontSize = Number(v)
     },
-    beforeDestroy() {
-        window.removeEventListener('keydown', this.handleKeyEvent)
+    addTextBox() {
+      this.state = 'text'
+      this.setShow = false
+      this.textShow = !this.textShow
     },
-    methods: {
-        sizeTap(v) {
-            this.fontSize = Number(v)
-        },
-        addTextBox() {
-            this.state = 'text'
-            this.setShow = false
-            this.textShow = !this.textShow
-        },
-        strokeColTap(v) {
-            this.color = v
-        },
-        strokeTap(v) {
-            this.strokeWidth = Number(v)
-        },
-        set() {
-            this.textShow = false
-            this.setShow = !this.setShow
-        },
-        init() {
-            this.canvas = new fabric.Canvas(this.id, {
-                isDrawingMode: false,
-                width: this.width,
-                height: this.height,
-            });
-            this.canvas.selectionColor = "rgba(255,255,255,0)";
-            this.canvas.loadFromJSON(this.data)
-        },
-        // 画笔
-        brush() {
-            this.state = 'brush'
-            this.canvas.isDrawingMode = !this.canvas.isDrawingMode
-            this.canvas.freeDrawingBrush.width = this.strokeWidth
-            this.canvas.freeDrawingBrush.color = this.color
-        },
-        // 直线
-        addLine() {
-            this.canvas.isDrawingMode = false
-            this.state = 'line'
-            const id = Date.now()
-            this.canvas.on('mouse:down', (o) => {
-                if(o.target !== null) return
-                if(this.state !== 'line') return
-                this.isDown = true
-                const pointer = this.canvas.getPointer(o.e)
-                const points = [pointer.x, pointer.y, pointer.x, pointer.y]
-                this.line = new fabric.Line(points, {
-                    id: id,
-                    strokeWidth: this.strokeWidth,
-                    fill: this.color,
-                    stroke: this.color,
-                    originX: 'center',
-                    originY: 'center'
-                })
-                this.canvas.add(this.line)
-            })
-            this.canvas.on('mouse:move', (o) => {
-                if(this.state !== 'line') return
-                if (!this.isDown) return
-                const pointer = this.canvas.getPointer(o.e)
-                this.line.set({ x2: pointer.x, y2: pointer.y })
-                this.canvas.renderAll()
-            })
+    strokeColTap(v) {
+      this.color = v
+    },
+    strokeTap(v) {
+      this.strokeWidth = Number(v)
+    },
+    set() {
+      this.textShow = false
+      this.setShow = !this.setShow
+    },
+    init() {
+      this.canvas = new fabric.Canvas(this.id, {
+        isDrawingMode: false,
+        width: this.width,
+        height: this.height,
+      });
+      this.canvas.selectionColor = "rgba(255,255,255,0)";
+      this.canvas.loadFromJSON(this.data)
+      this.y = (this.height / 2) - 203
+    },
+    // 画笔
+    brush() {
+      this.state = 'brush'
+      this.canvas.isDrawingMode = !this.canvas.isDrawingMode
+      this.canvas.freeDrawingBrush.width = this.strokeWidth
+      this.canvas.freeDrawingBrush.color = this.color
+    },
+    // 直线
+    addLine() {
+      this.canvas.isDrawingMode = false
+      this.state = 'line'
+      const id = Date.now()
+      this.canvas.on('mouse:down', (o) => {
+        if (o.target !== null) return
+        if (this.state !== 'line') return
+        this.isDown = true
+        const pointer = this.canvas.getPointer(o.e)
+        const points = [pointer.x, pointer.y, pointer.x, pointer.y]
+        this.line = new fabric.Line(points, {
+          id: id,
+          strokeWidth: this.strokeWidth,
+          fill: this.color,
+          stroke: this.color,
+          originX: 'center',
+          originY: 'center'
+        })
+        this.canvas.add(this.line)
+      })
+      this.canvas.on('mouse:move', (o) => {
+        if (this.state !== 'line') return
+        if (!this.isDown) return
+        const pointer = this.canvas.getPointer(o.e)
+        this.line.set({x2: pointer.x, y2: pointer.y})
+        this.canvas.renderAll()
+      })
 
-            this.canvas.on('mouse:up', (o) => {
-                this.isDown = false
-                this.line.setCoords()
-            })
-        },
-        // 矩形
-        rectangle() {
-            this.canvas.isDrawingMode = false
-            this.state = 'rectangle'
-            const id = Date.now()
-            let origX, origY
-            this.canvas.on('mouse:down', (o) => {
-                if(o.target !== null) return
-                if(this.state !== 'rectangle') return
-                this.isDown = true
-                let pointer = this.canvas.getPointer(o.e)
-                origX = pointer.x
-                origY = pointer.y
-                this.rect = new fabric.Rect({
-                    id: id,
-                    left: origX,
-                    top: origY,
-                    originX: 'left',
-                    originY: 'top',
-                    width: pointer.x - origX,
-                    height: pointer.y - origY,
-                    angle: 0,
-                    fill: '',
-                    stroke: this.color,
-                    strokeWidth: this.strokeWidth
-                })
-                this.canvas.add(this.rect)
-            })
-            this.canvas.on('mouse:move', (o) => {
-                if(this.state !== 'rectangle') return
-                if (!this.isDown) return
-                let pointer = this.canvas.getPointer(o.e)
+      this.canvas.on('mouse:up', (o) => {
+        this.isDown = false
+        this.line.setCoords()
+      })
+    },
+    // 矩形
+    rectangle() {
+      this.canvas.isDrawingMode = false
+      this.state = 'rectangle'
+      const id = Date.now()
+      let origX, origY
+      this.canvas.on('mouse:down', (o) => {
+        if (o.target !== null) return
+        if (this.state !== 'rectangle') return
+        this.isDown = true
+        let pointer = this.canvas.getPointer(o.e)
+        origX = pointer.x
+        origY = pointer.y
+        this.rect = new fabric.Rect({
+          id: id,
+          left: origX,
+          top: origY,
+          originX: 'left',
+          originY: 'top',
+          width: pointer.x - origX,
+          height: pointer.y - origY,
+          angle: 0,
+          fill: '',
+          stroke: this.color,
+          strokeWidth: this.strokeWidth
+        })
+        this.canvas.add(this.rect)
+      })
+      this.canvas.on('mouse:move', (o) => {
+        if (this.state !== 'rectangle') return
+        if (!this.isDown) return
+        let pointer = this.canvas.getPointer(o.e)
 
-                if (origX > pointer.x) {
-                    this.rect.set({ left: Math.abs(pointer.x) })
-                }
-                if (origY > pointer.y) {
-                    this.rect.set({ top: Math.abs(pointer.y) })
-                }
-                this.rect.set({ width: Math.abs(origX - pointer.x) })
-                this.rect.set({ height: Math.abs(origY - pointer.y) })
-                this.canvas.renderAll()
-            })
-            this.canvas.on('mouse:up', (o) => {
-                this.isDown = false
-                this.rect.setCoords()
-            })
-        },
-        // 圆形
-        rotundity() {
-            this.canvas.isDrawingMode = false
-            this.state = 'rotundity'
-            let origX, origY
-            this.canvas.on('mouse:down', (o) => {
-                if(o.target !== null) return
-                if(this.state !== 'rotundity') return
-                this.isDown = true
-                let pointer = this.canvas.getPointer(o.e)
-                origX = pointer.x
-                origY = pointer.y
-                this.circle = new fabric.Circle({
-                    left: origX,
-                    top: origY,
-                    originX: 'left',
-                    originY: 'top',
-                    radius: pointer.x - origX,
-                    angle: 0,
-                    fill: '',
-                    stroke: this.color,
-                    strokeWidth: this.strokeWidth
-                })
-                this.canvas.add(this.circle)
-            })
-            this.canvas.on('mouse:move', (o) => {
-                if(this.state !== 'rotundity') return
-                if (!this.isDown) return
-                let pointer = this.canvas.getPointer(o.e)
-                let radius =
-                    Math.max(
-                        Math.abs(origY - pointer.y),
-                        Math.abs(origX - pointer.x)
-                    ) / 2
-                if (radius > this.circle.strokeWidth) {
-                    radius -= this.circle.strokeWidth / 2
-                }
-                this.circle.set({ radius: radius })
+        if (origX > pointer.x) {
+          this.rect.set({left: Math.abs(pointer.x)})
+        }
+        if (origY > pointer.y) {
+          this.rect.set({top: Math.abs(pointer.y)})
+        }
+        this.rect.set({width: Math.abs(origX - pointer.x)})
+        this.rect.set({height: Math.abs(origY - pointer.y)})
+        this.canvas.renderAll()
+      })
+      this.canvas.on('mouse:up', (o) => {
+        this.isDown = false
+        this.rect.setCoords()
+      })
+    },
+    // 圆形
+    rotundity() {
+      this.canvas.isDrawingMode = false
+      this.state = 'rotundity'
+      let origX, origY
+      this.canvas.on('mouse:down', (o) => {
+        if (o.target !== null) return
+        if (this.state !== 'rotundity') return
+        this.isDown = true
+        let pointer = this.canvas.getPointer(o.e)
+        origX = pointer.x
+        origY = pointer.y
+        this.circle = new fabric.Circle({
+          left: origX,
+          top: origY,
+          originX: 'left',
+          originY: 'top',
+          radius: pointer.x - origX,
+          angle: 0,
+          fill: '',
+          stroke: this.color,
+          strokeWidth: this.strokeWidth
+        })
+        this.canvas.add(this.circle)
+      })
+      this.canvas.on('mouse:move', (o) => {
+        if (this.state !== 'rotundity') return
+        if (!this.isDown) return
+        let pointer = this.canvas.getPointer(o.e)
+        let radius =
+            Math.max(
+                Math.abs(origY - pointer.y),
+                Math.abs(origX - pointer.x)
+            ) / 2
+        if (radius > this.circle.strokeWidth) {
+          radius -= this.circle.strokeWidth / 2
+        }
+        this.circle.set({radius: radius})
 
-                if (origX > pointer.x) {
-                    this.circle.set({ originX: 'right' })
-                } else {
-                    this.circle.set({ originX: 'left' })
-                }
-                if (origY > pointer.y) {
-                    this.circle.set({ originY: 'bottom' })
-                } else {
-                    this.circle.set({ originY: 'top' })
-                }
-                this.canvas.renderAll()
-            })
-            this.canvas.on('mouse:up', () => {
-                this.isDown = false
-                this.circle.setCoords()
-            })
-        },
-        // 箭头
-        arrow() {
-            const id = Date.now()
-            const triangle = new fabric.Triangle({
-                width: 9,
-                height: 15,
-                fill: 'black',
-                left: 150,
-                top: 137,
-                angle: 90
-            })
-            const line = new fabric.Rect({
-                left: 100,
-                top: 140,
-                width: 40,
-                height: 3,
-                fill: 'black',
-                originX: 'left',
-                originY: 'top',
-                centeredRotation: true
-            })
-            const arrow = new fabric.Group([line, triangle], {
-                id: id,
-                left: this.canvas.width / 2,
-                top: this.canvas.height / 2,
-                angle: 0
-            })
-            this.canvas.add(arrow)
-        },
-        // 文本框
-        textBox() {
-            const id = Date.now()
-            this.textbox = new fabric.Textbox(this.text, {
-                id: id,
-                top: 200,
-                left: 200,
-                width: 10,
-                fill: this.color,
-                fontSize: this.fontSize,
-                color: this.color,
-                fontWeight: 400,
-                lineHeight: 1.5,
-                fontFamily: '微软雅黑',
-                textDecoration: 'none',
-                textAlign: 'left'
-            })
-            this.canvas.add(this.textbox)
-        },
-        save() {
-            console.log(this.canvas.toJSON())
-            this.$emit('save', this.canvas.toJSON())
-        },
-        clear() {
-            this.canvas.clear()
-        },
-        handleKeyEvent (e) {
-            const { key } = e
-            if (key === 'Backspace' || key === 'Delete') {
-                const el = this.canvas.getActiveObject()
-                if(el) this.canvas.remove(el)
-            }
+        if (origX > pointer.x) {
+          this.circle.set({originX: 'right'})
+        } else {
+          this.circle.set({originX: 'left'})
         }
+        if (origY > pointer.y) {
+          this.circle.set({originY: 'bottom'})
+        } else {
+          this.circle.set({originY: 'top'})
+        }
+        this.canvas.renderAll()
+      })
+      this.canvas.on('mouse:up', () => {
+        this.isDown = false
+        this.circle.setCoords()
+      })
+    },
+    // 箭头
+    arrow() {
+      const id = Date.now()
+      const triangle = new fabric.Triangle({
+        width: 9,
+        height: 15,
+        fill: 'black',
+        left: 150,
+        top: 137,
+        angle: 90
+      })
+      const line = new fabric.Rect({
+        left: 100,
+        top: 140,
+        width: 40,
+        height: 3,
+        fill: 'black',
+        originX: 'left',
+        originY: 'top',
+        centeredRotation: true
+      })
+      const arrow = new fabric.Group([line, triangle], {
+        id: id,
+        left: this.canvas.width / 2,
+        top: this.canvas.height / 2,
+        angle: 0
+      })
+      this.canvas.add(arrow)
+    },
+    // 文本框
+    textBox() {
+      const id = Date.now()
+      this.textbox = new fabric.Textbox(this.text, {
+        id: id,
+        top: 200,
+        left: 200,
+        width: 10,
+        fill: this.color,
+        fontSize: this.fontSize,
+        color: this.color,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        fontFamily: '微软雅黑',
+        textDecoration: 'none',
+        textAlign: 'left'
+      })
+      this.canvas.add(this.textbox)
+    },
+    save() {
+      console.log(this.canvas.toJSON())
+      this.$emit('save', this.canvas.toJSON())
+    },
+    clear() {
+      this.canvas.clear()
+    },
+    handleKeyEvent(e) {
+      const {key} = e
+      if (key === 'Backspace' || key === 'Delete') {
+        const el = this.canvas.getActiveObject()
+        if (el) this.canvas.remove(el)
+      }
     }
+  }
 }
 </script>
 
 <style scoped>
-.sketchpad{
-    position: relative;
+.sketchpad {
+  position: relative;
 }
-.tool{
-    position: absolute;
-    top: 50%;
-    left: -55px;
-    z-index: 1;
-    width: 50px;
-    padding: 15px;
-    border-radius: 10px;
-    box-shadow: 0 0 5px 3px rgba(0,0,0,0.3);
-    box-sizing: border-box;
-    background: #fff;
-    margin-top: -200px;
+
+.tool {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 50px;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+  background: #fff;
+  transition-property: transform;
+  transition-duration: 0ms;
+  transition-timing-function: linear;
+  transition-delay: 0ms;
+  transform: translate(0px, 0px);
+  cursor: move;
+  user-select: none;
 }
-.tool-list{
-    width: 100%;
-    margin-bottom: 20px;
-    cursor: pointer;
-    position: relative;
+
+.tool-list {
+  width: 100%;
+  margin-bottom: 20px;
+  cursor: pointer;
+  position: relative;
 }
-.tool-list:last-child{
-    margin-bottom: 0;
+
+.tool-list:last-child {
+  margin-bottom: 0;
 }
-.tool-list img{
-    width: 100%;
+
+.tool-list img {
+  width: 100%;
 }
-.set{
-    position: absolute;
-    top: 0;
-    left: 40px;
-    width: 280px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 5px 3px rgba(0,0,0,0.3);
-    padding: 10px;
-    z-index: 1;
+
+.set {
+  position: absolute;
+  top: 0;
+  left: 40px;
+  width: 280px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
+  padding: 10px;
+  z-index: 1;
 }
-.set-list{
-    padding: 5px 0;
-    font-size: 15px;
+
+.set-list {
+  padding: 5px 0;
+  font-size: 15px;
 }
-.set-list:after{
-    content: '';
-    display: block;
-    clear: both;
+
+.set-list:after {
+  content: '';
+  display: block;
+  clear: both;
 }
-.set-list span{
-    margin-right: 10px;
-    float: left;
+
+.set-list span {
+  margin-right: 10px;
+  float: left;
 }
-.set-list em{
-    font-style: normal;
-    font-size: 15px;
-    width: 16px;
-    display: inline-block;
-    margin-right: 10px;
-    text-align: center;
+
+.set-list em {
+  font-style: normal;
+  font-size: 15px;
+  width: 16px;
+  display: inline-block;
+  margin-right: 10px;
+  text-align: center;
 }
-.set-list em:hover{
-    color: #5daf34;
+
+.set-list em:hover {
+  color: #5daf34;
 }
-.set-list i{
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    background-color: #000;
-    margin: 2px 10px 0 0;
-    float: left;
+
+.set-list i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #000;
+  margin: 2px 10px 0 0;
+  float: left;
 }
-.set-list input{
-    width: calc(100% - 60px);
-    height: 22px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 0 10px;
-    box-sizing: border-box;
-    float: left;
+
+.set-list input {
+  width: calc(100% - 60px);
+  height: 22px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  float: left;
 }
-.but{
-    margin-left: 5px;
-    font-size: 12px;
-    background-color: transparent;
-    border: 1px solid #000;
-    border-radius: 3px;
-    padding: 2px 5px;
-    cursor: pointer;
-    min-width: 60px;
-    height: 21px;
-    margin-right: 20px;
+
+.but {
+  margin-left: 5px;
+  font-size: 12px;
+  background-color: transparent;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 2px 5px;
+  cursor: pointer;
+  min-width: 60px;
+  height: 21px;
+  margin-right: 20px;
 }
-.set-right{
-    text-align: right;
+
+.set-right {
+  text-align: right;
 }
 </style>

package/src/components/word/src/word.vue

@@ -60,8 +60,10 @@
         </div>
         <div v-if="item.alist" class="subject-html" v-show="item.open">
           <div v-for="(it,ind) in item.alist">
-            <div class="subject-html-title">{{ titleText }}{{ ind + 1 }}</div>
-            <div class="subject-html-cont" v-html="it.annexContent"></div>
+            <div v-if="it.annexType === '0'">
+              <div class="subject-html-title">{{ titleText }}{{ ind + 1 }}</div>
+              <div class="subject-html-cont" v-html="it.annexContent"></div>
+            </div>
           </div>
         </div>
         <div class="choice" v-if="item.testKey" v-show="item.open">

package/src/index.js

@@ -79,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.258',
+    version: '1.32.260',
     install,
     Calendar,
     Message,