From e09e352f4620a1866a943381916ddea41c6d977c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 23 Jul 2021 13:45:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=B6=E5=8F=AF=E4=BB=A5=E5=BB=B6=E8=BF=9F?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E7=BB=84=E4=BB=B6=E9=95=9C=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/RectangleAttr.vue       |  11 +-
 .../src/components/canvas/store/snapshot.js   |   3 +-
 frontend/src/store/index.js                   |   1 +
 frontend/src/views/Tinymce/FilterTextAttr.vue |  14 +-
 frontend/src/views/Tinymce/RectangleAttr.vue  | 184 ------------------
 frontend/src/views/Tinymce/TextAttr.vue       |  15 +-
 frontend/src/views/panel/edit/index.vue       |  24 ++-
 7 files changed, 51 insertions(+), 201 deletions(-)
 delete mode 100644 frontend/src/views/Tinymce/RectangleAttr.vue

diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue
index 060bdd7085..d7d15b6952 100644
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ b/frontend/src/components/canvas/components/RectangleAttr.vue
@@ -3,7 +3,7 @@
     <div style="position: relative;">
       <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
         <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini">
+          <el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
             <el-option
               v-for="item in lineStyle"
               :key="item.value"
@@ -21,7 +21,7 @@
 
       <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
         <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
+          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
             <el-option
               v-for="item in lineFont"
               :key="item.value"
@@ -38,7 +38,7 @@
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
 
@@ -48,7 +48,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
     </div>
@@ -158,6 +158,9 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      this.$store.state.styleChangeTimes++
     }
   }
 }
diff --git a/frontend/src/components/canvas/store/snapshot.js b/frontend/src/components/canvas/store/snapshot.js
index ba061b0045..4fb86cf075 100644
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/frontend/src/components/canvas/store/snapshot.js
@@ -7,7 +7,8 @@ export default {
     snapshotStyleData: [], // 样式改变也记录快照
     snapshotIndex: -1, // 快照索引
     changeTimes: -1, // 修改次数
-    lastSaveSnapshotIndex: 0 // 最后保存是snapshotIndex的索引
+    lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
+    styleChangeTimes: 0 // 组件样式修改次数
   },
   mutations: {
     undo(state) {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 214a689e4b..37f0ba8fe9 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -72,6 +72,7 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index
     },
diff --git a/frontend/src/views/Tinymce/FilterTextAttr.vue b/frontend/src/views/Tinymce/FilterTextAttr.vue
index fa0fcdb5ef..2b007edd48 100644
--- a/frontend/src/views/Tinymce/FilterTextAttr.vue
+++ b/frontend/src/views/Tinymce/FilterTextAttr.vue
@@ -7,7 +7,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
+        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange"/>
       </div>
 
       <el-tooltip :content="$t('panel.fontWeight')">
@@ -15,7 +15,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
+        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange"/>
       </div>
 
       <el-tooltip :content="$t('panel.letterSpacing')">
@@ -23,7 +23,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
+        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange"/>
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -32,7 +32,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
 
@@ -42,7 +42,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
         </div>
       </div>
     </div>
@@ -136,6 +136,10 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      debugger
+      this.$store.state.styleChangeTimes++
     }
   }
 }
diff --git a/frontend/src/views/Tinymce/RectangleAttr.vue b/frontend/src/views/Tinymce/RectangleAttr.vue
deleted file mode 100644
index 060bdd7085..0000000000
--- a/frontend/src/views/Tinymce/RectangleAttr.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-  <el-card class="el-card-main" :style="mainStyle">
-    <div style="position: relative;">
-      <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
-        <el-tooltip content="边框风格">
-          <el-select v-model="styleInfo.borderStyle" size="mini">
-            <el-option
-              v-for="item in lineStyle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-              <span style="float: left;">
-                <i :class="item.icon" />
-              </span>
-              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
-            </el-option>
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="边框宽度">
-          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
-            <el-option
-              v-for="item in lineFont"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="边框颜色">
-            <i class="iconfont icon-huabi" @click="goBoardColor" />
-          </el-tooltip>
-          <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      lineStyle: [{
-        icon: 'iconfont icon-solid_line',
-        value: 'solid',
-        label: '实线'
-      }, {
-        icon: 'iconfont icon-xuxian',
-        value: 'dashed',
-        label: '虚线'
-      }, {
-        icon: 'iconfont icon-dianxian',
-        value: 'dotted',
-        label: '点线'
-      }],
-      lineFont: [{
-        value: '0',
-        label: '0'
-      }, {
-        value: '1',
-        label: '1'
-      }, {
-        value: '2',
-        label: '2'
-      }, {
-        value: '3',
-        label: '3'
-      }, {
-        value: '4',
-        label: '4'
-      }, {
-        value: '5',
-        label: '5'
-      }]
-    }
-  },
-  computed: {
-
-    boardDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.borderColor
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  methods: {
-    goBoardColor() {
-      this.$refs.boardColorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      if (this.canvasStyleData.selfAdaption) {
-        return (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        return x + 60
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 210px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-</style>
diff --git a/frontend/src/views/Tinymce/TextAttr.vue b/frontend/src/views/Tinymce/TextAttr.vue
index 02dbbc2c7e..1630a4989e 100644
--- a/frontend/src/views/Tinymce/TextAttr.vue
+++ b/frontend/src/views/Tinymce/TextAttr.vue
@@ -2,7 +2,7 @@
   <el-card class="el-card-main" :style="mainStyle">
     <div style="position: relative;">
       <div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-radio-group v-model="styleInfo.textAlign" size="mini">
+        <el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
           <el-radio-button
             v-for="item in textAlignOptions"
             :key="item.label"
@@ -22,7 +22,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
+        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange" />
       </div>
 
       <el-tooltip :content="$t('panel.fontWeight')">
@@ -30,7 +30,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
+        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
       </div>
 
       <el-tooltip :content="$t('panel.letterSpacing')">
@@ -38,7 +38,7 @@
       </el-tooltip>
 
       <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
+        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
       </div>
 
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
@@ -47,7 +47,7 @@
             <i class="icon iconfont icon-zimua" @click="goColor" />
           </el-tooltip>
           <div :style="letterDivColor" />
-          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
 
@@ -57,7 +57,7 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
     </div>
@@ -151,6 +151,9 @@ export default {
       } else {
         return y
       }
+    },
+    styleChange() {
+      this.$store.state.styleChangeTimes++
     }
   }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 91335813bc..92de4066d4 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -274,7 +274,8 @@ export default {
       currentDropElement: null,
       adviceGroupId: null,
       scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      timeMachine: null
     }
   },
 
@@ -305,6 +306,12 @@ export default {
     },
     panelInfo(newVal, oldVal) {
       this.init(newVal.id)
+    },
+    '$store.state.styleChangeTimes'() {
+      if (this.$store.state.styleChangeTimes > 0) {
+        this.destroyTimeMachine()
+        this.recordStyleChange(this.$store.state.styleChangeTimes)
+      }
     }
   },
   created() {
@@ -674,6 +681,21 @@ export default {
       debugger
       this.scrollLeft = event.target.scrollLeft
       this.scrollTop = event.target.scrollTop
+    },
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+
+    // 如果内部样式有变化 1秒钟后保存一个镜像
+    recordStyleChange(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.$store.state.styleChangeTimes) {
+          this.$store.commit('recordSnapshot')
+          this.$store.state.styleChangeTimes = 0
+        }
+        this.destroyTimeMachine()
+      }, 1000)
     }
   }
 }