zydx-plus 1.32.310 → 1.32.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.310",
+  "version": "1.32.312",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -40,7 +40,6 @@
     "@tiptap/extension-link": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3",
-    "fabric": "^5.3.0",
     "js-export-word": "^1.0.5",
     "js-audio-recorder": "^1.0.7"
   },

package/src/components/biz_header/src/button_name.js

@@ -647,6 +647,7 @@ let buttonNames = {
                             lowLevel: {
                                 default: "setTask",
                                 setTask: '布置任务',
+                                discuss: '师生交流',
                                 // groupStudy: '小组学习',
                                 // duplicate: '违纪查重',
                                 teacherReview: '教师评价',
@@ -1926,8 +1927,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '试题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '试题',
+                                default: "viewResource",
                                 createResource: '创建资源',
                                 viewResource: '查看资源',
                                 batchDelResource: '批量删除',
@@ -1952,8 +1952,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '试题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '试题'
+                                default: "viewResource",
                                 createResource: '创建资源',
                                 viewResource: '查看资源',
                                 batchDelResource: '批量删除',
@@ -1979,8 +1978,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '主题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '主题'
+                                default: "viewResource",
                                 createResource: '创建主题',
                                 viewResource: '主题列表',
                                 selectResource: '查找资源',
@@ -2020,8 +2018,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '问题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '问题'
+                                default: "viewResource",
                                 createResource: '创建提问',
                                 viewResource: '提问列表',
                                 selectResource: '查找资源',
@@ -2047,8 +2044,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '提问'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '提问'
+                                default: "viewResource",
                                 createResource: '创建提问',
                                 viewResource: '提问列表',
                                 selectResource: '查找资源',
@@ -2088,8 +2084,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '题目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '题目'
+                                default: "viewResource",
                                 createResource: '创建题目',
                                 viewResource: '题目列表',
                                 selectResource: '查找资源',
@@ -2115,8 +2110,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '题目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '题目'
+                                default: "viewResource",
                                 createResource: '创建题目',
                                 viewResource: '题目列表',
                                 selectResource: '查找资源',
@@ -2142,8 +2136,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '主题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '主题'
+                                default: "viewResource",
                                 createResource: '创建主题',
                                 viewResource: '主题列表',
                                 selectResource: '查找资源',
@@ -2168,8 +2161,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '试题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '试题'
+                                default: "viewResource",
                                 createResource: '创建资源',
                                 viewResource: '查看资源',
                                 batchDelResource: '批量删除',
@@ -2195,8 +2187,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '题目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '题目'
+                                default: "viewResource",
                                 createResource: '创建题目',
                                 viewResource: '题目列表',
                                 selectResource: '查找资源',
@@ -2222,8 +2213,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '任务'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '任务'
+                                default: "viewResource",
                                 createResource: '创建任务',
                                 viewResource: '任务列表',
                                 selectResource: '查找任务',
@@ -2263,8 +2253,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '题目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '题目'
+                                default: "viewResource",
                                 createResource: '创建题目',
                                 viewResource: '题目列表',
                                 selectResource: '查找题目',
@@ -2290,8 +2279,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '报告'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '报告'
+                                default: "viewResource",
                                 createResource: '创建题目',
                                 viewResource: '题目列表',
                                 selectResource: '查找题目',
@@ -2347,8 +2335,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '项目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '项目'
+                                default: "viewResource",
                                 createResource: '创建项目',
                                 viewResource: '项目列表',
                                 selectResource: '查找项目',
@@ -2375,8 +2362,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '项目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '项目'
+                                default: "viewResource",
                                 createResource: '创建项目',
                                 viewResource: '项目列表',
                                 selectResource: '查找项目',
@@ -2403,8 +2389,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '项目'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '项目'
+                                default: "viewResource",
                                 createResource: '创建项目',
                                 viewResource: '项目列表',
                                 selectResource: '查找项目',
@@ -2431,8 +2416,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '主题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '项目'
+                                default: "viewResource",
                                 createResource: '创建主题',
                                 viewResource: '主题列表',
                                 selectResource: '查找主题',
@@ -2457,8 +2441,7 @@ let buttonNames = {
                                 allClass: this.getPrefix(item) + '试题'
                             },
                             lowLevel: {
-                                default: "singletonClass",
-                                // singletonClass: this.getCurrentPrefix(item) + '试题'
+                                default: "viewResource",
                                 createResource: '创建资源',
                                 viewResource: '查看资源',
                                 batchDelResource: '批量删除',
@@ -2500,8 +2483,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '图谱'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '图谱',
+                                default: "viewResource",
                                 createResource: '创建图谱',
                                 viewResource: '图谱列表',
                                 selectResource: '查找资源',
@@ -2519,9 +2501,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '图谱'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '图谱',
-                                // createResource: '创建图谱',
+                                default: "viewResource",
                                 viewResource: '图谱列表',
                                 selectResource: '查找资源',
                             }
@@ -2543,8 +2523,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '课件'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '课件',
+                                default: "viewResource",
                                 importResource: '导入课件',
                                 viewResource: '课件列表',
                                 selectResource: '查找资源',
@@ -2562,9 +2541,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '课件'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '课件',
-                                // importResource: '导入课件',
+                                default: "viewResource",
                                 viewResource: '课件列表',
                                 selectResource: '查找资源',
                             }
@@ -2586,8 +2563,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '视频'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '视频',
+                                default: "viewResource",
                                 importResource: '导入视频',
                                 viewResource: '视频列表',
                                 selectResource: '查找资源',
@@ -2605,9 +2581,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '视频'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '视频',
-                                // importResource: '导入视频',
+                                default: "viewResource",
                                 viewResource: '视频列表',
                                 selectResource: '查找资源',
                             }
@@ -2629,8 +2603,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '视频'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '视频',
+                                default: "viewResource",
                                 importResource: '导入视频',
                                 viewResource: '视频列表',
                                 selectResource: '查找资源',
@@ -2648,9 +2621,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '视频'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '视频',
-                                // importResource: '导入视频',
+                                default: "viewResource",
                                 viewResource: '视频列表',
                                 selectResource: '查找资源',
                             }
@@ -2672,8 +2643,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '数据'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '数据',
+                                default: "viewResource",
                                 importResource: '导入数据',
                                 viewResource: '数据列表',
                                 selectResource: '查找资源',
@@ -2691,9 +2661,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '数据'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '数据',
-                                // importResource: '导入数据',
+                                default: "viewResource",
                                 viewResource: '数据列表',
                                 selectResource: '查找资源',
                             }
@@ -2715,8 +2683,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '歌诀'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '歌诀',
+                                default: "viewResource",
                                 createResource: '创建歌诀',
                                 viewResource: '歌诀列表',
                                 selectResource: '查找资源',
@@ -2734,9 +2701,7 @@ let buttonNames = {
                                 btnIndex2: this.getPrefix(item) + '歌诀'
                             },
                             lowLevel: {
-                                default: "",
-                                // btnIndex1: this.getCurrentPrefix(item) + '歌诀',
-                                // createResource: '创建歌诀',
+                                default: "viewResource",
                                 viewResource: '歌诀列表',
                                 selectResource: '查找资源',
                             }

package/src/components/tab/src/tab.vue

@@ -1,131 +1,136 @@
 <template>
-    <div class="tabs cl" ref="tabs" :style="{'text-align': heiStart? 'left': 'center'}">
-        <div class="tabs-li" :class="{'tab-active': actives === index}" @click="listTap(index)"
-             v-for="(item,index) in list" :key="index">{{ item[column[0]] }}
-        </div>
-        <div v-if="addShow" @click="addTap" class="tabs-li tab-add">+</div>
+  <div class="tabs cl" :ref="`tabs${id}`" :style="{'text-align': heiStart? 'left': 'center'}">
+    <div class="tabs-li" :class="{'tab-active': actives === index}" @click="listTap(index)"
+         v-for="(item,index) in list" :key="index">{{ item[column[0]] }}
     </div>
+    <div v-if="addShow" @click="addTap" class="tabs-li tab-add">+</div>
+  </div>
 </template>
 
 <script>
 
 export default {
-    name: "zydx-tab",
-    data() {
-        return {
-            actives: 0,
-          heiStart: false
-        }
+  name: "zydx-tab",
+  data() {
+    return {
+      actives: 0,
+      heiStart: false,
+      id: null
+    }
+  },
+  props: {
+    active: {
+      type: String,
+      default: ''
     },
-    props: {
-        active: {
-            type: String,
-            default: ''
-        },
-        activeId: {
-            type: String,
-            default: ''
-        },
-        addShow: {
-            type: Boolean,
-            default: false
-        },
-        list: { // 数据列表
-            type: Array,
-            default: () => []
-        },
-        column: { // 数据列表
-            type: Array,
-            default: () => ['name']
-        },
+    activeId: {
+      type: String,
+      default: ''
     },
-    watch: {
-        active: {
-            handler: function (val, oldVal) {
-                this.listActive(this.list, val)
-            },
-            deep: true
-        },
-        list: {
-            handler: function (val, oldVal) {
-                this.listActive(val, this.active)
-            },
-            deep: true
-        },
+    addShow: {
+      type: Boolean,
+      default: false
     },
-    mounted() {
-        if (this.list.length === 0) return
-        if (this.activeId) {
-            this.listActive(this.list, this.active)
-        } else {
-            this.actives = 0
-        }
+    list: { // 数据列表
+      type: Array,
+      default: () => []
     },
-    methods: {
-        listActive(data,act) {
-            data.forEach((item, index) => {
-                if (item[this.activeId] === act) {
-                    this.actives = index
-                }
-            })
-            this.heiStart = this.$refs.tabs.offsetHeight > 60
-
-        },
-        listTap(index) {
-            this.actives = index
-            this.$emit('confirm', {
-                data: this.list[index],
-                index: index
-            })
-        },
-        addTap() {
-            this.$emit('addTap')
+    column: { // 数据列表
+      type: Array,
+      default: () => ['name']
+    },
+  },
+  watch: {
+    active: {
+      handler: function (val, oldVal) {
+        this.listActive(this.list, val)
+      },
+      deep: true
+    },
+    list: {
+      handler: function (val, oldVal) {
+        this.listActive(val, this.active)
+      },
+      deep: true
+    },
+  },
+  mounted() {
+    if (this.list.length === 0) return
+    if (this.activeId) {
+      this.listActive(this.list, this.active)
+    } else {
+      this.actives = 0
+    }
+    this.id = this.randomId()
+  },
+  methods: {
+    randomId() { // 生成随机id
+      const id = Math.random().toString(36).substr(2)
+      return id.replace(/[0-9]/g, '')
+    },
+    listActive(data, act) {
+      data.forEach((item, index) => {
+        if (item[this.activeId] === act) {
+          this.actives = index
         }
+      })
+      this.heiStart = data.length > 13
+    },
+    listTap(index) {
+      this.actives = index
+      this.$emit('confirm', {
+        data: this.list[index],
+        index: index
+      })
+    },
+    addTap() {
+      this.$emit('addTap')
     }
+  }
 }
 </script>
 
 <style scoped>
 .tab-add {
-    font-size: 18px !important;
-    line-height: 24px !important;
+  font-size: 18px !important;
+  line-height: 24px !important;
 }
 
 .cl:after {
-    content: "";
-    clear: left;
-    display: block;
+  content: "";
+  clear: left;
+  display: block;
 }
 
 .tabs {
-    width: 100%;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAADGBAMAAAB/QzDKAAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjFGRkEwRjlEMzgxMUU5QUQ0OUNBNThBMDQyM0I3NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjFGRkExMDlEMzgxMUU5QUQ0OUNBNThBMDQyM0I3NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMUZGQTBEOUQzODExRTlBRDQ5Q0E1OEEwNDIzQjc2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMUZGQTBFOUQzODExRTlBRDQ5Q0E1OEEwNDIzQjc2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zkTyIwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAwUExURUdwTOK3l9mr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');
-    background-size: 100% 100%;
-    padding: 12px 20px;
-    box-sizing: border-box;
+  width: 100%;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAADGBAMAAAB/QzDKAAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRjFGRkEwRjlEMzgxMUU5QUQ0OUNBNThBMDQyM0I3NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRjFGRkExMDlEMzgxMUU5QUQ0OUNBNThBMDQyM0I3NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGMUZGQTBEOUQzODExRTlBRDQ5Q0E1OEEwNDIzQjc2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGMUZGQTBFOUQzODExRTlBRDQ5Q0E1OEEwNDIzQjc2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zkTyIwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAwUExURUdwTOK3l9mr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');
+  background-size: 100% 100%;
+  padding: 12px 20px;
+  box-sizing: border-box;
 }
 
 .tabs-li {
-    min-width: 83px;
-    height: 26px;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQ0NCN0EzMUFDMDAxMUU4ODIwN0NCOTdENjIxODU1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQ0NCN0EzMkFDMDAxMUU4ODIwN0NCOTdENjIxODU1RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQ0I3QTJGQUMwMDExRTg4MjA3Q0I5N0Q2MjE4NTVEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJDQ0I3QTMwQUMwMDExRTg4MjA3Q0I5N0Q2MjE4NTVEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bL/JSwAABHZJREFUaEPtmldLLEEQhWvXnHNOKIpixID4C3wUf6r44ItPIhhAMaCioqKYc85h736lPe5ddndGUZ/6wDjjTHX3zOna0zVV4wsEIWHY39+Xm5sbOT09lfj4eImLi5O3tzfx+Xy6eYXpmj2b3+/33B770DGjtTN9swGvY5j+gdsY0UB7xnt9fZWnpyflqbq6WgoLCz8sPuEQzY6BaDAzMyMnJyeSlJQkbW1tkpCQIC8vL55vxPT10bXu2bgpNvN/eH/G3tjwAIAHMP2ZdqHtsTPHxilAeP+AdvSPTagd50Bov27AFkd8fn6W+fl5bZeamiodHR2SmJio/XNOt6BxYGBgQA2Ki4ulsbFRtra25OzsTLKzs6WyslIJt4iOh4cH2dnZcSaupqZGFhcXVRGurq6kv79f/Hiq8Yjc3Fydofv7ezk/P5e1tTX1bovYmJ2dldXVVeULRYBDnBQ+AR6vHr20tKQ/g8PDQ8nLy9NZuL291QZIR0FBgTawiIyjoyNZWFhQvuARkuHw7u5OSkpKpLW19VOjwfLyss5KcnKyzkxRUZF0dnZ+XLWIhbm5OVWF3d1dVYj6+np12qysLF033leAIOAbcrmAB+fn56tOW3gDakCkVlZWphwiF/AJ+cAh+vr6WjY3N6W2tlaam5ulvb1dRZ4OLGLj+PhY+cNZkQk4JESenp52IiffxMRE4OLiQlJSUlQmMEBCiDTQ6b6+Pif0sYgMoo3BwUHJyMjQQKKhoUFlA/5WVlY0ovMNDQ0FIJjZQJMxPDg40L35GVi4A9lAKgjpysvL1XEB8js+Pi5+CE5LS3NiZQx4uyGetiR7R3p6uoZzdXV1DsmAYzhWTUBHTLBt8bMwb4dKNP9Yon8Hhle7yv0RHI+2+B1Yj/5jKNEmDWnx84BboETzQmJfSn4Hhlf9S5zHZvHzMLw60hHq0VxExC35X0Mkh4VXzvkmJycDl5eX+j7OqzhpPnIdlGJsrsMbcEqT6yARR66DDCjHVFp4O/R3d3drMRGix8bGJDMzU5P9lGMgmNqhRWyQ34Bs+Orq6lIOyU8HnVjTGD09Pe/SAbGk9pgBEiOlpaVSVVWlkYhZNS2ig8oKRKMCJObgkBIhBZSWlha1cTSBxBLFWXLSlLaYEarfpPssYiMnJ0f5A0gFHFI4QUL+C++YAbyZWaDWRZqUOhgZKQtvQCLw6O3tbeWQRB2p08fHR72uRI+MjMjU1JS6P+lRFe+g3lAJ39jYUEOL6IAjdJrcMwsiHEIwnyCMjo6qjRZnh4eHNR8NuegzhGNYUVGhwm4RG4RvFEpQBipUcIkqUN5inevt7X0nmkIirr63t6f1L0jmHF/coD8W7kAmIJvvYJARPjMARHQsiv99bmCAMaQjIeajGibiu/kQfiEM89UIhjZsbnE8/XNvX70/p3AabOc2RiSYZ2JtQ2ZxThZBHDQcEYmmEY3X19d1keQmvku0IYq2XvugjXl4jg2RkRDaPzCT6jYONmbi3caIBtOH2bMYNjU1ORHIJ0T+AbIL39z60gtQAAAAAElFTkSuQmCC') center center;
-    background-size: 100%;
-    cursor: pointer;
-    margin: 3px 6px;
-    text-align: center;
-    line-height: 26px;
-    color: #333;
-    font-size: 14px;
-    user-select: none;
+  min-width: 83px;
+  height: 26px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQ0NCN0EzMUFDMDAxMUU4ODIwN0NCOTdENjIxODU1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQ0NCN0EzMkFDMDAxMUU4ODIwN0NCOTdENjIxODU1RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQ0I3QTJGQUMwMDExRTg4MjA3Q0I5N0Q2MjE4NTVEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJDQ0I3QTMwQUMwMDExRTg4MjA3Q0I5N0Q2MjE4NTVEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bL/JSwAABHZJREFUaEPtmldLLEEQhWvXnHNOKIpixID4C3wUf6r44ItPIhhAMaCioqKYc85h736lPe5ddndGUZ/6wDjjTHX3zOna0zVV4wsEIWHY39+Xm5sbOT09lfj4eImLi5O3tzfx+Xy6eYXpmj2b3+/33B770DGjtTN9swGvY5j+gdsY0UB7xnt9fZWnpyflqbq6WgoLCz8sPuEQzY6BaDAzMyMnJyeSlJQkbW1tkpCQIC8vL55vxPT10bXu2bgpNvN/eH/G3tjwAIAHMP2ZdqHtsTPHxilAeP+AdvSPTagd50Bov27AFkd8fn6W+fl5bZeamiodHR2SmJio/XNOt6BxYGBgQA2Ki4ulsbFRtra25OzsTLKzs6WyslIJt4iOh4cH2dnZcSaupqZGFhcXVRGurq6kv79f/Hiq8Yjc3Fydofv7ezk/P5e1tTX1bovYmJ2dldXVVeULRYBDnBQ+AR6vHr20tKQ/g8PDQ8nLy9NZuL291QZIR0FBgTawiIyjoyNZWFhQvuARkuHw7u5OSkpKpLW19VOjwfLyss5KcnKyzkxRUZF0dnZ+XLWIhbm5OVWF3d1dVYj6+np12qysLF033leAIOAbcrmAB+fn56tOW3gDakCkVlZWphwiF/AJ+cAh+vr6WjY3N6W2tlaam5ulvb1dRZ4OLGLj+PhY+cNZkQk4JESenp52IiffxMRE4OLiQlJSUlQmMEBCiDTQ6b6+Pif0sYgMoo3BwUHJyMjQQKKhoUFlA/5WVlY0ovMNDQ0FIJjZQJMxPDg40L35GVi4A9lAKgjpysvL1XEB8js+Pi5+CE5LS3NiZQx4uyGetiR7R3p6uoZzdXV1DsmAYzhWTUBHTLBt8bMwb4dKNP9Yon8Hhle7yv0RHI+2+B1Yj/5jKNEmDWnx84BboETzQmJfSn4Hhlf9S5zHZvHzMLw60hHq0VxExC35X0Mkh4VXzvkmJycDl5eX+j7OqzhpPnIdlGJsrsMbcEqT6yARR66DDCjHVFp4O/R3d3drMRGix8bGJDMzU5P9lGMgmNqhRWyQ34Bs+Orq6lIOyU8HnVjTGD09Pe/SAbGk9pgBEiOlpaVSVVWlkYhZNS2ig8oKRKMCJObgkBIhBZSWlha1cTSBxBLFWXLSlLaYEarfpPssYiMnJ0f5A0gFHFI4QUL+C++YAbyZWaDWRZqUOhgZKQtvQCLw6O3tbeWQRB2p08fHR72uRI+MjMjU1JS6P+lRFe+g3lAJ39jYUEOL6IAjdJrcMwsiHEIwnyCMjo6qjRZnh4eHNR8NuegzhGNYUVGhwm4RG4RvFEpQBipUcIkqUN5inevt7X0nmkIirr63t6f1L0jmHF/coD8W7kAmIJvvYJARPjMARHQsiv99bmCAMaQjIeajGibiu/kQfiEM89UIhjZsbnE8/XNvX70/p3AabOc2RiSYZ2JtQ2ZxThZBHDQcEYmmEY3X19d1keQmvku0IYq2XvugjXl4jg2RkRDaPzCT6jYONmbi3caIBtOH2bMYNjU1ORHIJ0T+AbIL39z60gtQAAAAAElFTkSuQmCC') center center;
+  background-size: 100%;
+  cursor: pointer;
+  margin: 3px 6px;
+  text-align: center;
+  line-height: 26px;
+  color: #333;
+  font-size: 14px;
+  user-select: none;
   display: inline-block;
 }
 
 .tabs-li:hover {
-    color: #999;
+  color: #999;
 }
 
 .tab-active {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGQ0MwRjM3Q0FDMDAxMUU4OThCMjhFMkM4MzMyOEQ5MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGQ0MwRjM3REFDMDAxMUU4OThCMjhFMkM4MzMyOEQ5MyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQzBGMzdBQUMwMDExRTg5OEIyOEUyQzgzMzI4RDkzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZDQzBGMzdCQUMwMDExRTg5OEIyOEUyQzgzMzI4RDkzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwv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") !important;
-    color: #00ff00 !important;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADImlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGQ0MwRjM3Q0FDMDAxMUU4OThCMjhFMkM4MzMyOEQ5MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGQ0MwRjM3REFDMDAxMUU4OThCMjhFMkM4MzMyOEQ5MyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQzBGMzdBQUMwMDExRTg5OEIyOEUyQzgzMzI4RDkzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZDQzBGMzdCQUMwMDExRTg5OEIyOEUyQzgzMzI4RDkzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwv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") !important;
+  color: #00ff00 !important;
 }
 </style>

package/src/index.js

@@ -27,7 +27,6 @@ import time from './components/time/index';
 import preface from './components/preface/index';
 import choice from './components/choice/index';
 import word from './components/word/index';
-import sketchpad from './components/sketchpad/index';
 import pictureViewer from './components/pictureViewer/index';
 import lessonTemplate from './components/lesson_template/index';
 import paper from './components/word2/index';
@@ -63,7 +62,6 @@ const components = [
     preface,
     choice,
     word,
-    sketchpad,
     pictureViewer,
     lessonTemplate,
     paper,
@@ -81,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.309',
+    version: '1.32.312',
     install,
     Calendar,
     Message,
@@ -112,7 +110,6 @@ export default {
     preface,
     choice,
     word,
-    sketchpad,
     pictureViewer,
     lessonTemplate,
     paper,

package/src/components/sketchpad/index.js

@@ -1,6 +0,0 @@
-import main from './src/sketchpad';
-
-main.install = function(Vue) {
-    Vue.component(main.name, main);
-};
-export default main;

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

@@ -1,525 +0,0 @@
-<template>
-  <div class="sketchpad" ref="sketchpad">
-    <canvas :id="id"></canvas>
-    <div class="tool"
-         @mousedown.stop="mousedown"
-         :style="{transform: `translate(${x}px, ${y}px)`}">
-      <div class="tool-list" @click.stop="set">
-        <img class="img-1" 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="mouse()">
-        <img class="img-2" src="./img/shubiao.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="brush()">
-        <img class="img-3" src="./img/huabi.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="rectangle()">
-        <img class="img-4" src="./img/juxing.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="addTextBox()">
-        <img class="img-5" 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" @click.stop="textInputTap">
-            <span>内容</span>
-            <input ref="textInput" type="text" v-model="text"/>
-          </div>
-          <div class="set-list set-right">
-            <button class="but" @click="textBox">确认</button>
-          </div>
-        </div>
-      </div>
-      <div class="tool-list" @click.stop="rotundity()">
-        <img class="img-6" src="./img/yuan.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="addLine()">
-        <img class="img-7" src="./img/jian.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="arrow()">
-        <img class="img-8" src="./img/jiantou.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="save()">
-        <img class="img-9" src="./img/baocun.png" alt=""/>
-      </div>
-      <div class="tool-list" @click.stop="clear()">
-        <img class="img-10" src="./img/xiangpi.png" alt=""/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-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,
-      left: 0,
-      top: 0,
-      isMove: false,
-      x: 0,
-      y: 0,
-      offLeft: 0,
-      offTop: 0,
-      scrollTop: 0
-    }
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => {
-      }
-    },
-    width: {
-      type: Number,
-      default: 800
-    },
-    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)
-    document.addEventListener('mousemove', (event) => {
-      if (!this.isMove) return
-      const ids = this.$refs.sketchpad.getBoundingClientRect()
-      this.offLeft = ids.left
-      this.offTop = ids.top
-      this.x = event.clientX - this.left - this.offLeft
-      this.y = event.clientY - this.top - this.offTop
-    })
-    document.addEventListener('mouseup', (event) => {
-      this.isMove = false
-    })
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyEvent)
-  },
-  methods: {
-    mouse() {
-      this.state = null
-      this.canvas.isDrawingMode = false
-    },
-    textInputTap() {
-      this.$refs.textInput.focus()
-    },
-    mousedown(event) {
-      const e = event.target || event.srcElement
-      let x = 0, y = 0
-      if(e.nodeName === 'IMG') {
-        const rect = e.getBoundingClientRect()
-        const index = e.className.split(' ')[0].split('-')[1]
-        x = event.clientX - rect.left
-        y = event.clientY - rect.top + 30*index
-      }else {
-        x = event.offsetX
-        y = event.offsetY
-      }
-      console.log(x,y)
-      //鼠标按下事件
-      this.left = x
-      this.top = y
-      this.isMove = true
-    },
-    sizeTap(v) {
-      this.fontSize = Number(v)
-    },
-    addTextBox() {
-      this.state = 'text'
-      this.setShow = false
-      this.textShow = !this.textShow
-    },
-    strokeColTap(v) {
-      this.color = v
-      this.canvas.freeDrawingBrush.color = this.color
-    },
-    strokeTap(v) {
-      this.strokeWidth = Number(v)
-      this.canvas.freeDrawingBrush.width = this.strokeWidth
-    },
-    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)
-
-        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() {
-      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;
-}
-
-.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:last-child {
-  margin-bottom: 0;
-}
-
-.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-list {
-  padding: 5px 0;
-  font-size: 15px;
-}
-
-.set-list:after {
-  content: '';
-  display: block;
-  clear: both;
-}
-
-.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: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 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;
-}
-
-.set-right {
-  text-align: right;
-}
-</style>