编辑区域结构调整

src/components/Contextmenu/ContextmenuContent.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { PropType, defineComponent } from 'vue'
 import { ContextmenuItem } from './types'
 
-export default {
+export default defineComponent({
   name: 'contextmenu-content',
   props: {
     menus: {
@@ -47,7 +47,7 @@ export default {
       required: true,
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -59,8 +59,8 @@ $subMenuWidth: 120px;
   width: $menuWidth;
   padding: 5px 0;
   background: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid #eee;
-  box-shadow: 3px 3px 3px rgba(#000, 0.3);
+  box-shadow: 3px 3px 3px rgba(#000, 0.15);
   border-radius: 2px;
   list-style: none;
   margin: 0;
@@ -69,7 +69,7 @@ $subMenuWidth: 120px;
   padding: 0 20px;
   color: #555;
   font-size: 12px;
-  transition: all 0.2s;
+  transition: all .1s;
   white-space: nowrap;
   height: $menuHeight;
   line-height: $menuHeight;

src/views/Editor/Canvas/GridLines.vue

@@ -17,7 +17,7 @@ export default defineComponent({
     },
     gridColor: {
       type: String,
-      default: 'rgba(100, 100, 100, 0.2)',
+      default: 'rgba(100, 100, 100, 0.1)',
     },
   },
   setup(props) {

src/views/Editor/Canvas/SlideBackground.vue

@@ -5,7 +5,7 @@
   >
     <template v-if="showGridLines">
       <GridLines />
-      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.3)" />
+      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.35)" />
     </template>
   </div>
 </template>

src/views/Editor/Canvas/index.vue

@@ -8,12 +8,15 @@
     v-click-outside="removeEditorAreaFocus"
   >
     <div 
-      class="operates"
+      class="viewport-wrapper"
       :style="{
+        width: viewportStyles.width + 'px',
+        height: viewportStyles.height + 'px',
         left: viewportStyles.left + 'px',
         top: viewportStyles.top + 'px',
       }"
     >
+      <div class="operates">
         <AlignmentLine 
           v-for="(line, index) in alignmentLines" 
           :key="index" 
@@ -37,18 +40,18 @@
           :rotateElement="rotateElement"
           :scaleElement="scaleElement"
         />
+        <SlideBackground
+          :style="{
+            width: viewportStyles.width * canvasScale + 'px',
+            height: viewportStyles.height * canvasScale + 'px',
+          }"
+        />
       </div>
 
       <div 
         class="viewport" 
         ref="viewportRef"
-      :style="{
+        :style="{ transform: `scale(${canvasScale})` }"
-        width: viewportStyles.width + 'px',
-        height: viewportStyles.height + 'px',
-        left: viewportStyles.left + 'px',
-        top: viewportStyles.top + 'px',
-        transform: `scale(${canvasScale})`,
-      }"
       >
         <MouseSelection 
           v-if="mouseSelectionState.isShow"
@@ -58,9 +61,6 @@
           :height="mouseSelectionState.height" 
           :quadrant="mouseSelectionState.quadrant"
         />      
-
-      <SlideBackground />
-      
         <EditableElement 
           v-for="(element, index) in elementList" 
           :key="element.id"
@@ -71,6 +71,7 @@
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -173,6 +174,11 @@ export default defineComponent({
       else if(e.deltaY < 0) throttleScaleCanvas('+')
     }
 
+    const showGridLines = computed(() => store.state.showGridLines)
+    const toggleGridLines = () => {
+      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
+    }
+
     const contextmenus = (): ContextmenuItem[] => {
       return [
         {
@@ -185,6 +191,13 @@ export default defineComponent({
           subText: 'Ctrl + V',
           handler: pasteElement,
         },
+        {
+          text: '网格参考线',
+          children: [
+            { text: '网格线', handler: toggleGridLines },
+            { text: '参考线' },
+          ],
+        },
         {
           text: '清空本页',
           handler: deleteAllElements,
@@ -226,13 +239,14 @@ export default defineComponent({
   background-color: #f9f9f9;
   position: relative;
 }
-.viewport {
+.viewport-wrapper {
   position: absolute;
-  transform-origin: 0 0;
-  background-color: #fff;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
 }
-.operates {
+.viewport {
   position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
 }
 </style>

src/views/Editor/CanvasTool/index.vue

@@ -18,7 +18,6 @@
       <IconFont class="handler-item viewport-size" type="icon-minus" @click="scaleCanvas('-')" />
       <span class="text">{{canvasScalePercentage}}</span>
       <IconFont class="handler-item viewport-size" type="icon-plus" @click="scaleCanvas('+')" />
-      <IconFont class="handler-item viewport-size" type="icon-number" @click="toggleGridLines()" />
     </div>
   </div>
 </template>
@@ -26,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { State } from '@/store'
 import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -35,7 +34,6 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const canvasScale = computed(() => store.state.canvasScale)
-    const showGridLines = computed(() => store.state.showGridLines)
     const canUndo = computed(() => store.getters.canUndo)
     const canRedo = computed(() => store.getters.canRedo)
 
@@ -44,14 +42,9 @@ export default defineComponent({
     const { scaleCanvas } = useScaleCanvas()
     const { redo, undo } = useHistorySnapshot()
 
-    const toggleGridLines = () => {
-      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
-    }
-
     return {
       scaleCanvas,
       canvasScalePercentage,
-      toggleGridLines,
       canUndo,
       canRedo,
       redo,