修复画布有时缩放不正确的bug

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="edit-program-layout">
-    <!-- 左侧组件栏及返回按钮 -->
     <!-- 左侧组件栏及返回按钮 -->
     <div class="sidebar">
       <el-button class="back-btn" type="default" @click="goBack" circle>
@@ -273,7 +272,6 @@ const program = ref<any>({});
 
 // 假设 json_str 为后端获取或 props 传入的 JSON 字符串
 let json_str = '';
-// TODO: 替换为实际获取方式
 // json_str = props.jsonStr || '';
 
 function ensureCanvasAndDepth(elements, resolutionRatio?: string) {
@@ -284,13 +282,13 @@ function ensureCanvasAndDepth(elements, resolutionRatio?: string) {
     if (w && h) {
       width = w;
       height = h;
-      console.log('#136: ', width, height);
+      // console.log('#136: ', width, height);
     }
   }
   // 检查是否有 type: 'canvas' 的组件
   let idx = elements.findIndex((el) => el.type === 'canvas');
   if (idx === -1) {
-    console.log('#141: ', width, height);
+    // console.log('#141: ', width, height);
     elements.unshift({ type: 'canvas', width, height, bg: '#fff', depth: 0 });
   } else {
     let canvas = elements[idx];
@@ -305,9 +303,9 @@ function ensureCanvasAndDepth(elements, resolutionRatio?: string) {
     }
     if (changed) {
       elements[idx] = canvas; // 替换整个对象，确保响应式
-      console.log('#145: ', width, height, '响应式canvas:', canvas);
+      // console.log('#145: ', width, height, '响应式canvas:', canvas);
     } else {
-      console.log('#145: ', width, height);
+      // console.log('#145: ', width, height);
     }
   }
   // 按 depth 排序，如果没有 depth 则补齐
@@ -460,7 +458,9 @@ const canvasScale = computed(() => {
   const cH = Number(canvas.value.height) || 400;
   const boxW = containerSize.value.width;
   const boxH = containerSize.value.height;
+  // console.log('[EditProgram] canvasScale computed:', cW, cH, boxW, boxH);
   if (!boxW || !boxH) return 1;
+  // console.log('[EditProgram] canvasScale computed:', Math.min(boxW / cW, boxH / cH, 1));
   return Math.min(boxW / cW, boxH / cH, 1);
 });
 

smsb-plus-ui/src/views/smsb/itemProgram/component/CanvasBoard.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="canvas-board-wrapper">
-    <div class="canvas-board" :style="canvasStyle" style="pointer-events: none;">
+  <div class="canvas-board-wrapper" :style="wrapperStyle">
+    <div class="canvas-board" :style="canvasStyle" style="pointer-events: none">
       <slot />
     </div>
   </div>
@@ -16,8 +16,8 @@ interface Props {
 }
 const props = defineProps<Props>();
 const canvasStyle = computed(() => ({
-  width: typeof props.width === 'number' ? props.width + 'px' : props.width || '600px',
-  height: typeof props.height === 'number' ? props.height + 'px' : props.height || '400px',
+  width: '100%',
+  height: '100%',
   background: props.bg || '#fff',
   display: 'flex',
   alignItems: 'center',
@@ -25,10 +25,23 @@ const canvasStyle = computed(() => ({
   fontSize: '20px',
   color: '#aaa',
   borderRadius: '12px',
-  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
-  transform: props.scale && props.scale !== 1 ? `scale(${props.scale})` : undefined,
-  transformOrigin: 'center center'
+  boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
 }));
+
+const wrapperStyle = computed(() => {
+  const width = typeof props.width === 'number' ? props.width : parseFloat(props.width || '600');
+  const height = typeof props.height === 'number' ? props.height : parseFloat(props.height || '400');
+  const scale = props.scale && props.scale !== 1 ? props.scale : 1;
+  return {
+    width: width * scale + 'px',
+    height: height * scale + 'px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden'
+  };
+});
 </script>
 
 <style scoped>