refactor: 优化仪表板辅助设计

frontend/src/components/canvas/components/Editor/Grid.vue

@@ -9,12 +9,12 @@
           stroke-width="1"
         />
       </pattern>
-      <pattern id="grid" :width="matrixStyle.width" :height="matrixStyle.height" patternUnits="userSpaceOnUse">
-        <rect :width="matrixStyle.width" :height="matrixStyle.height" fill="url(#smallGrid)" />
+      <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
+        <rect :width="gridW" :height="gridH" fill="url(#smallGrid)" />
         <path
           :d="pathD"
           fill="none"
-          stroke="rgba(64,158,255,0.8)"
+          stroke="rgba(64,158,255,0.6)"
           stroke-width="1"
         />
       </pattern>
@@ -25,6 +25,8 @@
 
 <script>
 
+import { mapState } from 'vuex'
+
 export default {
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -40,17 +42,30 @@ export default {
 
   computed: {
     pathD: function() {
-      return 'M ' + this.matrixStyle.width + ' 0 L 0 0 0 ' + this.matrixStyle.height
+      return 'M ' + this.gridW + ' 0 L 0 0 0 ' + this.gridH
     },
     smallGridPathD: function() {
       return 'M ' + this.smallGridW + ' 0 L 0 0 0 ' + this.smallGridH
     },
+    gridW: function() {
+      return this.matrixStyle.width * 2 * this.matrixBase
+    },
+    gridH: function() {
+      return this.matrixStyle.height * 2 * this.matrixBase
+    },
     smallGridW: function() {
-      return this.matrixStyle.width / 3
+      return this.matrixStyle.width
     },
     smallGridH: function() {
-      return this.matrixStyle.height / 3
-    }
+      return this.matrixStyle.height
+    },
+    matrixBase: function() {
+      // return this.canvasStyleData.aidedDesign ? this.canvasStyleData.aidedDesign.matrixBase : 1
+      return this.canvasStyleData.aidedDesign.matrixBase
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
   }
 }
 </script>

frontend/src/components/canvas/components/Editor/index.vue

@@ -866,14 +866,8 @@ export default {
       }
     },
     matrixCount: {
-      required: false,
-      type: Object,
-      default: () => {
-        return {
-          x: 36,
-          y: 18
-        }
-      }
+      required: true,
+      type: Object
     },
     scrollTop: {
       type: Number,
@@ -1017,13 +1011,11 @@ export default {
     }
   },
   watch: {
-    matrixCount: {
+    'canvasStyleData.aidedDesign.matrixBase': {
       handler(newVal, oldVal) {
-        if (newVal && oldVal) {
-          this.changeComponentSizePoint(newVal.x / oldVal.x)
-        }
-        this.changeScale()
-      }
+        this.changeComponentSizePoint(newVal / oldVal)
+      },
+      deep: true
     },
     customStyle: {
       handler(newVal) {
@@ -1065,10 +1057,7 @@ export default {
   },
 
   mounted() {
-    setTimeout(() => {
-      this.changeScale()
-      this.editShow = true
-    }, 500)
+    this.canvasInit()
     // 获取编辑器元素
     this.$store.commit('getEditor')
     const _this = this
@@ -1089,6 +1078,13 @@ export default {
   created() {
   },
   methods: {
+    canvasInit() {
+      this.editShow = false
+      setTimeout(() => {
+        this.changeScale()
+        this.editShow = true
+      }, 500)
+    },
     backgroundSetClose() {
       this.boardSetVisible = false
     },
@@ -1255,6 +1251,7 @@ export default {
           item.sizex = item.sizex * pointScale
           item.sizey = item.sizey * pointScale
         })
+        this.changeScale()
       }
     },
 

frontend/src/components/canvas/utils/utils.js

@@ -95,7 +95,6 @@ export function panelInit(componentData, componentStyle) {
       item.hyperlinks = (item.hyperlinks || HYPERLINKS)
     }
     item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
-    componentData[index] = item
   })
   // style初始化
   componentStyle.refreshTime = (componentStyle.refreshTime || 5)

frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue

@@ -15,7 +15,7 @@
               <el-radio-group v-model="aidedDesign.matrixBase" size="mini">
                 <el-radio-button :label="1">普通</el-radio-button>
                 <el-radio-button :label="2">适中</el-radio-button>
-                <el-radio-button :label="3">密集</el-radio-button>
+                <el-radio-button :label="4">密集</el-radio-button>
               </el-radio-group>
             </el-form-item>
           </el-form>

frontend/vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
   },
   configureWebpack: {
     name: name,
-    devtool: 'cheap-module-source-map',
+    devtool: 'source-map',
     resolve: {
       alias: {
         '@': resolve('src')