Merge pull request #313 from dataease/fix_panel_edit_attr-auto-save

feat:组件样式修改时可以延迟保存组件镜像
2021-07-23 14:02:44 +08:00 · 2021-07-23 14:02:44 +08:00 · 3895fec15d
commit 3895fec15d
parent e74463a462 35c9802381
7 changed files with 53 additions and 233 deletions
--- 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"
@ -32,29 +32,13 @@
        </el-tooltip>
      </div>

-      <el-tooltip :content="$t('panel.borderRadius')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" />
-      </div>
-
-      <el-tooltip :content="$t('panel.opacity')">
-        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" />
-      </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" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
        </div>
      </div>

@ -64,10 +48,9 @@
            <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>
  </el-card>
 </template>
@ -118,20 +101,7 @@ export default {
      }, {
        value: '5',
        label: '5'
-      }],
-      innerOpacity: 0
-    }
-  },
-  watch: {
-    innerOpacity: {
-      handler(oldVal, newVal) {
-        this.styleInfo['opacity'] = this.innerOpacity / 100
-      }
-    }
-  },
-  mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
+      }]
    }
  },
  computed: {
@ -188,6 +158,9 @@ export default {
      } else {
        return y
      }
+    },
+    styleChange() {
+      this.$store.state.styleChangeTimes++
    }
  }
 }
@ -203,7 +176,7 @@ export default {
  .el-card-main {
    height: 34px;
    z-index: 10;
-    width: 400px;
+    width: 210px;
    position: absolute;

  }
--- 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) {
--- 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
    },
--- 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++
    }
  }
 }
--- a/frontend/src/views/Tinymce/RectangleAttr.vue
+++ b/frontend/src/views/Tinymce/RectangleAttr.vue
@ -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>
--- 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++
    }
  }
 }
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -275,7 +275,8 @@ export default {
      currentDropElement: null,
      adviceGroupId: null,
      scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      timeMachine: null
    }
  },

@ -306,6 +307,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() {
@ -675,6 +682,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)
    }
  }
 }