feat(marketingEdit): 添加模板示例图片展示和预览功能

- 在货号模式选择后添加示例图片展示区域，显示单货号多角度和多货号同角度的模板效果
- 实现图片预览功能，支持点击查看大图弹窗
- 添加前后对比图片展示，帮助用户理解不同模式的效果差异
- 优化样式布局，确保示例图片与表单对齐显示
- 增加预览弹窗组件，提供良好的图片查看体验

frontend/src/views/components/marketingEdit/index.vue

@@ -64,6 +64,8 @@ export default {
 
       fcanvas: null,
       fcanvasId: '',
+        previewDialogVisible: false,
+        previewImageUrl: '',
       scale: 1,
       sceneTplImg:"",//生成的时候记录下来，用户重做
 
@@ -633,6 +635,11 @@ export default {
       }
       this.data.splice(snapshotIndex, 1, updated)
     },
+    // 打开大图预览（由模板 header 调用）
+    openPreview(url) {
+      this.previewImageUrl = url
+      this.previewDialogVisible = true
+    },
     handleMoveCanvas(idx, direction){
       const offset = direction === 'up' ? -1 : 1
       const targetIdx = idx + offset
@@ -993,6 +1000,68 @@ export default {
   border-bottom: 1px solid #f0f0f0;
 }
 
+.goods-mode-samples {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+  padding-left: 100px; /* 与表单 label 宽度对齐 */
+}
+.goods-mode-samples .sample-row {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end; /* 靠右对齐图片 */
+}
+.goods-mode-samples .sample-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end; /* 让图片和 label 的右对齐 */
+  width: 140px;
+}
+.goods-mode-samples .sample-item img,
+.goods-mode-samples .sample-item .el-image__inner {
+  width: 140px;
+  height: 90px;
+  object-fit: contain;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  background: #fff;
+}
+.goods-mode-samples .sample-label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #666;
+  text-align: right; /* 右对齐标签文本 */
+}
+
+.goods-mode-samples .sample-actions {
+  align-self: flex-end;
+  margin-bottom: 6px;
+}
+
+.goods-mode-samples .sample-row {
+  display: flex;
+  gap: 12px;
+}
+.goods-mode-samples .sample-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 140px;
+}
+.goods-mode-samples .sample-item img {
+  width: 140px;
+  height: 90px;
+  object-fit: contain;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  background: #fff;
+}
+.goods-mode-samples .sample-label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #666;
+}
+
 .fixed-width-tip {
   line-height: 32px;
   color: #666;

frontend/src/views/components/marketingEdit/tpl/header.js

@@ -117,7 +117,64 @@ export  default function tpl(){
                       <div v-else-if="canvasForm.multi_goods_mode === 'multiple'">画布中含有多个货号，画布中包含多个货号同一角度的图片</div>
                     </div>
                   </el-form-item>
+                  
+                  <!-- 示例图片展示 -->
+                  <div class="goods-mode-samples" v-if="canvasForm.multi_goods_mode === 'single' || canvasForm.multi_goods_mode === 'multiple'">
+                    <div v-if="canvasForm.multi_goods_mode === 'single'" class="sample-row">
+                      <div class="sample-item">
+                        <div class="sample-label">单货号多角度-模板效果</div>
+                        <el-image
+                          src="/images/tpl-demo.jpg"
+                          fit="contain"
+                          style="width:140px; height:90px;"
+                          :preview-src-list="['/images/tpl-demo.jpg','/images/tpl-demo-created.jpg']"
+                        />
+                        <div class="sample-actions">
+                          <el-button type="text" size="small" @click.stop="openPreview('/images/tpl-demo.jpg')">查看大图</el-button>
+                        </div>
+                      </div>
+                      <div class="sample-item">
+                        <div class="sample-label">单货号多角度-生成图效果</div>
+                        <el-image
+                          src="/images/tpl-demo-created.jpg"
+                          fit="contain"
+                          style="width:140px; height:90px;"
+                          :preview-src-list="['/images/tpl-demo.jpg','/images/tpl-demo-created.jpg']"
+                        />
+                        <div class="sample-actions">
+                          <el-button type="text" size="small" @click.stop="openPreview('/images/tpl-demo-created.jpg')">查看大图</el-button>
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="canvasForm.multi_goods_mode === 'multiple'" class="sample-row">
+                      <div class="sample-item">
+                        <div class="sample-label">多货号同角度-模板效果</div>
+                        <el-image
+                          src="/images/tpl-demo1.jpg"
+                          fit="contain"
+                          style="width:140px; height:90px;"
+                          :preview-src-list="['/images/tpl-demo1.jpg','/images/tpl-demo1-created.jpg']"
+                        />
+                        <div class="sample-actions">
+                          <el-button type="text" size="small" @click.stop="openPreview('/images/tpl-demo1.jpg')">查看大图</el-button>
+                        </div>
+                      </div>
+                      <div class="sample-item">
+                        <div class="sample-label">多货号同角度-生成图效果</div>
+                        <el-image
+                          src="/images/tpl-demo1-created.jpg"
+                          fit="contain"
+                          style="width:140px; height:90px;"
+                          :preview-src-list="['/images/tpl-demo1.jpg','/images/tpl-demo1-created.jpg']"
+                        />
+                        <div class="sample-actions">
+                          <el-button type="text" size="small" @click.stop="openPreview('/images/tpl-demo1-created.jpg')">查看大图</el-button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                   <el-form-item
+                    class="mar-top-10"
                     v-if="canvasForm.multi_goods_mode === 'single' || canvasForm.multi_goods_mode === 'multiple'"
                     label="最多货号数量"
                   >
@@ -157,6 +214,11 @@ export  default function tpl(){
               </div>
             </el-dialog>
             
+            <!-- 预览大图弹窗 -->
+            <el-dialog v-model="previewDialogVisible" width="70%" append-to-body>
+              <img :src="previewImageUrl" style="width: 100%;" alt="预览" />
+            </el-dialog>
+            
             
 
       </div>