支持画布背景预览

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

@@ -15,18 +15,90 @@ interface Props {
   scale?: number;
 }
 const props = defineProps<Props>();
-const canvasStyle = computed(() => ({
-  width: '100%',
-  height: '100%',
-  background: typeof props.bg === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(props.bg) ? props.bg : '#fff',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  fontSize: '20px',
-  color: '#aaa',
-  borderRadius: '12px',
-  boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
-}));
+const canvasStyle = computed(() => {
+  // console.log('props.bg', props.bg);
+  let bgValue = props.bg;
+  let imgUrl: string | undefined;
+
+  // 尝试解析 bg 为数组并取 url
+  if (typeof bgValue === 'string' && bgValue.trim().startsWith('[')) {
+    try {
+      const arr = JSON.parse(bgValue);
+      if (Array.isArray(arr) && arr.length > 0 && arr[0].url) {
+        imgUrl = arr[0].url;
+      }
+    } catch (e) {
+      // 解析失败，忽略
+    }
+  }
+
+  const isHex = typeof bgValue === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(bgValue);
+  const isImg = typeof bgValue === 'string' && /^https?:\/\/.+\.(png|jpe?g|webp|gif|bmp|svg)(\?.*)?$/i.test(bgValue);
+
+  if (isHex) {
+    // console.log('Is Hex BG');
+    return {
+      width: '100%',
+      height: '100%',
+      background: props.bg,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '20px',
+      color: '#aaa',
+      borderRadius: '12px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+    };
+  } else if (isImg) {
+    // console.log('Is Img BG');
+    return {
+      width: '100%',
+      height: '100%',
+      backgroundImage: `url(${bgValue})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '20px',
+      color: '#aaa',
+      borderRadius: '12px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+    };
+  } else if (imgUrl) {
+    // console.log('Is Img BG (from array)');
+    return {
+      width: '100%',
+      height: '100%',
+      backgroundImage: `url(${imgUrl})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '20px',
+      color: '#aaa',
+      borderRadius: '12px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+    };
+  } else {
+    // console.log('Is Default BG');
+    return {
+      width: '100%',
+      height: '100%',
+      background: '#fff',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '20px',
+      color: '#aaa',
+      borderRadius: '12px',
+      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');

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

@@ -101,9 +101,9 @@
             <el-option label="1024x768" value="1024x768" />
           </el-select>
         </el-form-item>
-        <el-form-item label="图片地址" prop="imgUrl">
+        <!-- <el-form-item label="图片地址" prop="imgUrl">
           <el-input v-model="form.imgUrl" placeholder="请输入图片地址（可选）" />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
       <template #footer>
         <div class="dialog-footer">