fix: 调整page控件，修复网格展示

src/renderer/src/lvgl-widgets/page/Page.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="relative box-border overflow-hidden" :style="styleMap?.mainStyle">
+  <div
+    class="w-full h-full absolute left-0 top-0 box-border overflow-hidden pointer-events-none"
+    :style="styleMap?.mainStyle"
+  >
+    <!-- 网格背景 -->
+    <div class="canvas-grid" v-show="pageState?.showBgGrid"></div>
     <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
 import ImageBg from '../ImageBg.vue'
 import { useWidgetStyle } from '../hooks/useWidgetStyle'
 
@@ -16,9 +22,38 @@ const props = defineProps<{
   part?: string
 }>()
 
+const pageState = inject<any>('state')
+
 const styleMap = useWidgetStyle({
   widget: 'page',
   props
 })
 </script>
-<
+<style scoped lang="less">
+.canvas-grid {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 20px 20px;
+  background-position: 0 0;
+  background-image:
+    linear-gradient(to right, #c5c3c3 1px, transparent 1px),
+    linear-gradient(to bottom, #c5c3c3 1px, transparent 1px);
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 100px 100px;
+    background-position: 0 0;
+    background-image:
+      linear-gradient(to right, #8d8b8b 2px, transparent 1px),
+      linear-gradient(to bottom, #8d8b8b 2px, transparent 1px);
+  }
+}
+</style>

src/renderer/src/views/designer/workspace/stage/DesignerCanvas.vue

@@ -12,11 +12,10 @@
         class="absolute"
         :style="{
           ...getStyles.canvasStyle,
+          outline: 'none',
           background: 'transparent'
         }"
       >
-        <!-- 网格背景 -->
-        <div class="canvas-grid" v-show="state.showBgGrid"></div>
         <!-- 内容节点 -->
         <Nodes
           :schema="page!"
@@ -107,9 +106,9 @@ const getStyles = computed(() => {
   const endX = tipLeft + width * scale
   const endY = startY + height * scale
 
-  const offset = props.page?.id === projectStore.activePageId ? 2 : 0
+  const offset = 0
   const clipPath = `rect(${startY + offset}px ${endX + offset}px ${endY + offset}px ${tipLeft + offset}px)`
-  const border = props.page?.id === projectStore.activePageId ? '2px solid #1890ff' : ''
+  const outline = props.page?.id === projectStore.activePageId ? '2px solid #1890ff' : ''
 
   return {
     // 舞台样式
@@ -125,7 +124,7 @@ const getStyles = computed(() => {
       transform: `scale(${scale})`,
       left: `${canvasLeft}px`,
       top: `${canvasTop}px`,
-      border
+      outline
     },
     // 提示样式
     tipStyle: {
@@ -155,8 +154,8 @@ useScroll(stageWrapperRef, {
 const initScale = async () => {
   if (!clientWidth.value || !clientHeight.value) return
   // 4为滚动条宽度 40为左右上下间隔20px
-  const windowWidth = clientWidth.value - 4 - 40
-  const windowHeight = clientHeight.value - 4 - 40
+  const windowWidth = clientWidth.value - 40
+  const windowHeight = clientHeight.value - 40
   const { width = 1280, height = 720 } = props.state
   let scale
   let maxScale
@@ -239,30 +238,4 @@ onMounted(() => {
     -5px 5px,
     5px 0px;
 }
-.canvas-grid {
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-size: 20px 20px;
-  background-position: 0 0;
-  background-image:
-    linear-gradient(to right, #c5c3c3 1px, transparent 1px),
-    linear-gradient(to bottom, #c5c3c3 1px, transparent 1px);
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-size: 100px 100px;
-    background-position: 0 0;
-    background-image:
-      linear-gradient(to right, #8d8b8b 2px, transparent 1px),
-      linear-gradient(to bottom, #8d8b8b 2px, transparent 1px);
-  }
-}
 </style>