优化

src/view/performance/QualityAssessment/Product.vue

@@ -103,7 +103,20 @@
         <!-- 原图区域 -->
         <div class="image-preview" style="flex: 1; min-width: 120px;">
           <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 14px; font-weight: bold; color: #303133;">上传商品白底图</h3>
-          <div v-if="editFormData.original_image_url" style="width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; background-color: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                   <el-button 
+            type="text" 
+            size="small"
+            @click="toggleProductExample"
+            style="padding: 0; font-size: 14px; font-weight: normal; color: #409eff;margin-left:330px"
+          >
+            <template #icon>
+              <el-icon :size="16">
+                <component :is="productExampleVisible ? 'ArrowDown' : 'ArrowRight'" />
+              </el-icon>
+            </template>
+            商品图例
+          </el-button>
+          <div v-if="editFormData.original_image_url" style="width:200px; height: 200px; display: flex; justify-content: center; align-items: center; background-color: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
             <el-image
               :src="formatImageUrl(editFormData.original_image_url)"
               :preview-src-list="[formatImageUrl(editFormData.original_image_url)]"
@@ -117,6 +130,23 @@
           </div>
         </div>
 
+        <!-- 按钮区域 -->
+        <div style="display: flex; align-items: center; gap: 20px; margin-left:480px">
+          <el-button 
+            type="text" 
+            size="small"
+            @click="toggleCaseExample"
+            style="padding: 0; font-size: 14px; font-weight: normal; color: #409eff;"
+          >
+            <template #icon>
+              <el-icon :size="16">
+                <component :is="caseExampleVisible ? 'ArrowDown' : 'ArrowRight'" />
+              </el-icon>
+            </template>
+            案例
+          </el-button>
+        </div>
+
         <!-- 新图区域 -->
         <div class="image-preview" style="flex: 1; min-width: 120px;">
           <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 14px; font-weight: bold; color: #303133;">生成效果图</h3>
@@ -144,6 +174,7 @@
             <el-icon :size="30"><Picture /></el-icon>
             <span style="margin-top: 5px; font-size: 10px;">暂无新图</span>
           </div>
+          
         </div>
         
       </div>
@@ -222,13 +253,476 @@
     </div>
     
     <!-- 中间：产品信息 -->
-    <div class="middle-column" style="width: 430px; border-left: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; padding: 0 20px;">
+    <div class="middle-column" style="width: 430px; border-left: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; padding: 0 20px; position: relative;">
+      <!-- 商品图例覆盖层 -->
+      <div v-if="productExampleVisible" style="position: absolute; top: 0; left: 0; width: 600px; height: 100%; background: #ffffff; border-radius: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; box-shadow: 4px 0 20px rgba(0,0,0,0.15); border-right: 1px solid #e4e7ed;">
+        <div style="width: 95%; height: 100%; overflow-y: auto;">
+          <div style="padding: 20px;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e4e7ed;">
+              <h3 style="margin: 0; font-size: 16px; font-weight: bold; color: #303133;">商品图例</h3>
+              <el-button type="text" size="small" @click="toggleProductExample">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+            
+            <p style="margin: 0 0 20px 0; color: #606266; line-height: 1.5; font-size: 14px;">
+              建议上传商品单一、完整清晰、占据画面中心的白底图，否则可能会影响商品识别效果和生成的背景图质量。
+            </p>
+            
+            <!-- 商品图例对比 -->
+            <div style="margin-bottom: 20px;">
+              <div style="display: flex; gap: 15px;">
+                <!-- 正确示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #67c23a; margin-right: 8px;"><SuccessFilled /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商品单一</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="`/src/assets/ai案例图/001.png`"
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+                
+                <!-- 错误示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #f56c6c; margin-right: 8px;"><Close /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">画面包含多件商品</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="`/src/assets/ai案例图/002.png`"
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div style="margin-bottom: 20px;">
+              <div style="display: flex; gap: 15px;">
+                <!-- 正确示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #67c23a; margin-right: 8px;"><SuccessFilled /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">画面完整清晰</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="`/src/assets/ai案例图/003.png`"
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+                
+                <!-- 错误示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #f56c6c; margin-right: 8px;"><Close /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商品残缺/遮挡</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="`/src/assets/ai案例图/004.png`"
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div style="margin-bottom: 20px;">
+              <div style="display: flex; gap: 15px;">
+                <!-- 正确示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #67c23a; margin-right: 8px;"><SuccessFilled /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商品占据画面中心</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                    :src="`/src/assets/ai案例图/005.jpg`" 
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+                
+                <!-- 错误示例 -->
+                <div style="flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                    <el-icon :size="14" style="color: #f56c6c; margin-right: 8px;"><Close /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商铺主题不突出</span>
+                  </div>
+                  <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="`/src/assets/ai案例图/006.jpg`"
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 案例覆盖层 -->
+      <div v-if="caseExampleVisible" style="position: absolute; top: 0; left: 0; width: 600px; height: 100%; background: #ffffff; border-radius: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; box-shadow: 4px 0 20px rgba(0,0,0,0.15); border-right: 1px solid #e4e7ed;">
+        <div style="width: 95%; height: 100%; overflow-y: auto;">
+          <div style="padding: 20px;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e4e7ed;">
+              <h3 style="margin: 0; font-size: 16px; font-weight: bold; color: #303133;">合成商品图例</h3>
+              <el-button type="text" size="small" @click="toggleCaseExample">
+                <el-icon><Close /></el-icon>
+              </el-button>
+            </div>
+            
+            <div style="display: flex; margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid #e4e7ed;">
+              <div style="flex: 1; font-weight: 600; color: #303133; font-size: 14px; text-align: center;">原图</div>
+              <div style="width: 40px;"></div>
+              <div style="flex: 1; font-weight: 500; color: #606266; font-size: 14px; text-align: center;">标准模式</div>
+              <div style="width: 40px;"></div>
+              <div style="flex: 1; font-weight: 500; color: #606266; font-size: 14px; text-align: center;">专业模式</div>
+            </div>
+            
+            <!-- 案例图片网格 -->
+            <div style="display: flex; flex-direction: column; gap: 15px;">
+              <!-- 案例1 -->
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/007.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                  :src="`/src/assets/ai案例图/008.png`" 
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/009.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+              
+              <!-- 案例2 -->
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                  :src="`/src/assets/ai案例图/010.jpg`" 
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/011.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                  :src="`/src/assets/ai案例图/012.png`" 
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+              
+              <!-- 案例3 -->
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                  :src="`/src/assets/ai案例图/013.jpg`" 
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/014.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/015.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+              
+              <!-- 案例4 -->
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/016.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/017.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <div style="width: 40px; display: flex; justify-content: center;">
+                  <el-icon style="color: #409eff;"><ArrowRight /></el-icon>
+                </div>
+                <div style="flex: 1; height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                  <el-image
+                    :src="`/src/assets/ai案例图/018.png`"
+                    style="width: 100%; height: 100%;"
+                    fit="contain"
+                  >
+                    <template #error>
+                      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                        <span>图片占位</span>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
       <div style="height: 100%; display: flex; flex-direction: column;">
         <!-- 上：留出的空白区域 -->
         <div style="height: 90px; background-image: url('/src/assets/top-bg.png'); background-size: cover; background-position: center; border-top-left-radius: 8px; border-top-right-radius: 8px;"></div>
         <!-- 上中：图片显示区域 -->
         <div style="display: flex; flex-direction: column; align-items: center;">
-          <div style="width: 430px; height: 290px; display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 4px;">
+          <!-- 商品图例面板（已移至覆盖层） -->
+          <div v-if="false" style="width: 430px; height: 450px; background: #ffffff; border-radius: 4px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border: 1px solid #e4e7ed; z-index: 100; position: relative;">
+            <div style="padding: 16px;">
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+                <h3 style="margin: 0; font-size: 16px; font-weight: bold; color: #303133;">商品图例</h3>
+                <el-button type="text" size="small" @click="toggleProductExample">
+                  <el-icon><Close /></el-icon>
+                </el-button>
+              </div>
+              
+              <p style="margin: 0 0 16px 0; color: #606266; line-height: 1.5; font-size: 14px;">
+                建议上传商品单一、完整清晰、占据画面中心的白底图，否则可能会影响商品识别效果和生成的背景图质量。
+              </p>
+              
+              <!-- 商品单一 -->
+              <div style="margin-bottom: 16px;">
+                <div style="font-weight: 600; color: #303133; margin-bottom: 8px; font-size: 14px;">商品单一</div>
+                <div style="background: white; padding: 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 8px; border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                    <el-icon :size="14" style="color: #67c23a; margin-right: 6px;"><SuccessFilled /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商品完整清晰</span>
+                  </div>
+                  <div style="height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="''" 
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+                
+                <div style="background: white; padding: 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                    <el-icon :size="14" style="color: #67c23a; margin-right: 6px;"><SuccessFilled /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">商品占据画面中心</span>
+                  </div>
+                  <div style="height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="''" 
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 画面包含多件商品 -->
+              <div style="margin-bottom: 16px;">
+                <div style="font-weight: 600; color: #303133; margin-bottom: 8px; font-size: 14px;">画面包含多件商品</div>
+                <div style="background: white; padding: 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e4e7ed;">
+                  <div style="display: flex; align-items: center; margin-bottom: 8px;">
+                    <el-icon :size="14" style="color: #f56c6c; margin-right: 6px;"><Close /></el-icon>
+                    <span style="font-weight: 500; color: #303133; font-size: 13px;">不推荐</span>
+                  </div>
+                  <div style="height: 80px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
+                    <el-image
+                      :src="''" 
+                      style="width: 100%; height: 100%;"
+                      fit="contain"
+                    >
+                      <template #error>
+                        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399; font-size: 12px;">
+                          <span>图片占位</span>
+                        </div>
+                      </template>
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 产品图片显示（默认） -->
+          <div v-else style="width: 430px; height: 290px; display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 4px;">
             <el-image
               v-if="editFormData.new_image_url && showProductImage"
               :src="formatImageUrl(editFormData.new_image_url)"
@@ -364,6 +858,112 @@
         </div>
       </div>
     </div>
+    
+    <!-- 商品图例右侧面板 (已移至中间列) -->
+    <div v-if="false" class="product-example-panel" style="width: 420px; border-left: 1px solid #e4e7ed; padding: 20px; background: #ffffff; overflow-y: auto; box-shadow: -2px 0 10px rgba(0,0,0,0.05);">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <h3 style="margin: 0; font-size: 16px; font-weight: bold; color: #303133;">商品图例</h3>
+        <el-button type="text" size="small" @click="toggleProductExample">
+          <el-icon><Close /></el-icon>
+        </el-button>
+      </div>
+      
+      <p style="margin: 0 0 15px 0; color: #606266; line-height: 1.5;">
+        建议上传商品单一、完整清晰、占据画面中心的白底图，否则可能会影响商品识别效果和生成的背景图质量。
+      </p>
+      
+      <!-- 商品单一 -->
+      <div style="margin-bottom: 20px;">
+        <div style="font-weight: 600; color: #303133; margin-bottom: 10px;">商品单一</div>
+        <div style="background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 10px;">
+          <div style="display: flex; align-items: center; margin-bottom: 8px;">
+            <el-icon :size="16" style="color: #67c23a; margin-right: 8px;"><SuccessFilled /></el-icon>
+            <span style="font-weight: 500; color: #303133;">商品完整清晰</span>
+          </div>
+          <div style="height: 180px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden;">
+            <el-image
+              :src="'@/assets/ai案例图/001.png'" 
+              style="width: 100%; height: 100%;"
+              fit="contain"
+            >
+              <template #error>
+                <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399;">
+                  <span>图片占位</span>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+        
+        <div style="background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+          <div style="display: flex; align-items: center; margin-bottom: 8px;">
+            <el-icon :size="16" style="color: #67c23a; margin-right: 8px;"><SuccessFilled /></el-icon>
+            <span style="font-weight: 500; color: #303133;">商品占据画面中心</span>
+          </div>
+          <div style="height: 180px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden;">
+            <el-image
+              :src="'@/assets/ai案例图/002.png'" 
+              style="width: 100%; height: 100%;"
+              fit="contain"
+            >
+              <template #error>
+                <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399;">
+                  <span>图片占位</span>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 画面包含多件商品 -->
+      <div style="margin-bottom: 20px;">
+        <div style="font-weight: 600; color: #303133; margin-bottom: 10px;">画面包含多件商品</div>
+        <div style="background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+          <div style="display: flex; align-items: center; margin-bottom: 8px;">
+            <el-icon :size="16" style="color: #f56c6c; margin-right: 8px;"><Close /></el-icon>
+            <span style="font-weight: 500; color: #303133;">不推荐</span>
+          </div>
+          <div style="height: 180px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden;">
+            <el-image
+              :src="'@/assets/ai案例图/003.png'" 
+              style="width: 100%; height: 100%;"
+              fit="contain"
+            >
+              <template #error>
+                <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399;">
+                  <span>图片占位</span>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 商品残缺/遮挡 -->
+      <div style="margin-bottom: 20px;">
+        <div style="font-weight: 600; color: #303133; margin-bottom: 10px;">商品残缺/遮挡</div>
+        <div style="background: white; padding: 15px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
+          <div style="display: flex; align-items: center; margin-bottom: 8px;">
+            <el-icon :size="16" style="color: #e6a23c; margin-right: 8px;"><WarningFilled /></el-icon>
+            <span style="font-weight: 500; color: #303133;">商品主体不突出</span>
+          </div>
+          <div style="height: 180px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden;">
+            <el-image
+              :src="'@/assets/ai案例图/004.png'" 
+              style="width: 100%; height: 100%;"
+              fit="contain"
+            >
+              <template #error>
+                <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #909399;">
+                  <span>图片占位</span>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </el-dialog>
 
@@ -484,8 +1084,37 @@ import { ElMessage, ElLoading} from 'element-plus'
 import { getTable, imageToText, Template_ids,txttoimg_moxing,GetHttpUrl,txttoimg_update, getSide,merchantGetab,productList,productDetail,
   product_template,GetTxtToTxt,GetProductFind,productAdd,getMerchantId } from '@/api/mes/job'
 import { useUserStore } from '@/pinia/modules/user'
-import { ArrowDown, ZoomIn, Camera } from '@element-plus/icons-vue'
+import {  ZoomIn, Camera,SuccessFilled, WarningFilled, More, ArrowRight, ArrowDown } from '@element-plus/icons-vue'
 import { Layout, LayoutHeader, LayoutSider, LayoutContent } from '@arco-design/web-vue'
+
+
+
+// 商品图例显示状态
+const productExampleVisible = ref(false)
+const caseExampleVisible = ref(false)
+
+// 切换商品图例显示
+const toggleProductExample = () => {
+  productExampleVisible.value = !productExampleVisible.value
+  if (productExampleVisible.value) {
+    caseExampleVisible.value = false
+  }
+}
+
+// 切换案例显示
+const toggleCaseExample = () => {
+  caseExampleVisible.value = !caseExampleVisible.value
+  if (caseExampleVisible.value) {
+    productExampleVisible.value = false
+  }
+}
+
+
+
+
+
+
+
 const props = defineProps({
   editFormData: {
     type: Object,
@@ -791,9 +1420,10 @@ const fetchTemplates = async () => {
       }))
       
       // 默认选中第一个模板
-      if (templateList.value.length > 0) {
-        selectTemplate(templateList.value[0])
-      }
+      // if (templateList.value.length > 0) {
+      //   selectTemplate(templateList.value[0])
+      // }
+      updateProductImage(newImages.value[0].url)
     }
   } catch (error) {
     console.error('获取模板失败:', error)