优化

src/api/mes/job.js

@@ -1372,3 +1372,11 @@ export const getMerchantId = (params) => {
 }
 
 
+//查询获取任务数据
+export const GetImageStatus = (params) => {
+  return service({
+    url: '/mes_server/work_order/GetImageStatus',
+    method: 'get',
+    params
+  })
+}

src/view/performance/QualityAssessment/Product.vue

@@ -16,7 +16,7 @@
         <!-- 左侧树形结构 -->
         <template v-if="userStore.userInfo.nickName === '超级管理员'">
         <layout-sider :resize-directions="['right']" :width="290" style="margin-right: 10px">
-          <div class="JKWTree-tree" style="height: 200px;width:100vh">
+          <div class="JKWTree-tree" style="height: 200px;">
             <h3>商户名称</h3>
             <el-tree :data="treeData" class="treecolor"   @node-click="handleNodeClick"></el-tree>
           </div>
@@ -95,19 +95,27 @@
     </layout>
 
 <el-dialog  v-model="editDialogVisible"  title=""  fullscreen :modal="true" :show-close="false" @close="handleDialogClose">
-  <div class="image-edit-container" style="display: flex; height: 94vh; overflow: hidden;">
+  <!-- 关闭按钮 -->
+  <div style="position: absolute; top: 10px; right: 20px; z-index: 1000;">
+    <el-button type="danger" size="large" @click="editDialogVisible = false">
+      <el-icon><Close /></el-icon>关闭
+    </el-button>
+  </div>
+  <div class="image-edit-container" style="display: flex; height: 94vh; overflow: hidden; padding-top: 20px;">
     <!-- 左侧：原图新图 + 输入框 -->
-    <div class="left-column" style="flex: 1; display: flex; flex-direction: column; gap: 15px; padding: 15px; overflow-y: hidden;">
+    <div class="left-column" style="flex: 0.7; display: flex; flex-direction: column; gap: 15px; padding: 15px; overflow-y: hidden;">
+      <!-- 标题 -->
+      <div style="font-size: 18px; font-weight: bold; color: white; margin-bottom: 10px; background-color: #404040; padding: 10px; border-radius: 4px; text-align: center;">②出图</div>
         <!-- 图片对比区域 -->
       <div class="image-comparison-section" style="display: flex; gap: 20px;">
         <!-- 原图区域 -->
-        <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 class="image-preview" style="flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center;">
+          <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 14px; font-weight: bold; color: #303133; align-self: flex-start;">上传商品白底图</h3>
                    <el-button 
             type="text" 
             size="small"
             @click="toggleProductExample"
-            style="padding: 0; font-size: 14px; font-weight: normal; color: #409eff;margin-left:330px"
+            style="padding: 0; font-size: 14px; font-weight: normal; color: #409eff; align-self: flex-end; margin-bottom: 10px;margin-right: 110px;"
           >
             <template #icon>
               <el-icon :size="16">
@@ -147,51 +155,28 @@
           </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>
-          <div v-if="newImages.length > 0" style="display: flex; gap: 8px; flex-wrap: wrap;">
-            <div v-for="(image, index) in newImages" :key="index" style="flex: 0 0 100px; height: 100px;">
-              <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f9f9f9; border-radius: 4px; overflow: hidden; border: 1px solid #e4e7ed;">
-                <el-image
-                  :src="formatImageUrl(image.url)"
-                  style="width: 100%; height: 100%; cursor: pointer;"
-                  fit="contain"
-                  @click="updateProductImage(image.url)"
-                />
-              </div>
-            </div>
-          </div>
-          <div v-else-if="editFormData.new_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.new_image_url)"
-              style="width: 100%; height: 100%; cursor: pointer;"
-              fit="contain"
-              @click="updateProductImage(editFormData.new_image_url)"
-            />
-          </div>
-          <div v-else class="image-placeholder" style="width: 200px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f9f9f9; border-radius: 4px; border: 1px solid #e4e7ed;">
-            <el-icon :size="30"><Picture /></el-icon>
-            <span style="margin-top: 5px; font-size: 10px;">暂无新图</span>
-          </div>
-          
-        </div>
         
       </div>
           
     <!-- 输入框区域 -->
-    <div class="edit-section" style="border: 1px solid #e4e7ed; border-radius: 4px; display: flex; flex-direction: column;">
+    <div class="edit-section" style="border: 1px solid #e4e7ed; border-radius: 4px; display: flex; flex-direction: column; position: relative;">
         <el-form :model="editFormData" label-width="80px" style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
             <el-input
               type="textarea"
               v-model="editFormData.chinese_description"
-              :rows="12"
+              :rows="14"
               placeholder="点击右侧模板图片可自动填充描述内容"
               show-word-limit
               maxlength="500"
               style="width: 100%; resize: none;"
+              :disabled="loadingStatus"
             />
         </el-form>
+        <!-- 加载遮罩 -->
+        <div v-if="loadingStatus" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; border-radius: 4px; z-index: 10;">
+            <el-icon style="font-size: 24px; color: #409eff;"><Loading /></el-icon>
+            <span style="margin-left: 10px; color: #409eff;">正在生成中...</span>
+        </div>
         
         <!-- 按钮放在表单下方 -->
         <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e4e7ed;">
@@ -203,11 +188,11 @@
                 {{ ratio }}
               </el-radio>
             </div>
-            <div style="display: flex; align-items: center; gap: 5px;">
+            <!-- <div style="display: flex; align-items: center; gap: 5px;">
               <el-radio v-model="selectedSize" label="custom" @change="handleSizeChange" border style="border-radius: 2px;">
                 自由尺寸
               </el-radio>
-            </div>
+            </div> -->
           </div>
           
           <!-- 自由尺寸的像素输入 -->
@@ -241,21 +226,91 @@
         <!-- 操作按钮 -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <!-- <el-button size="medium" @click="clearInput">清空</el-button> -->
-          <el-button size="medium" type="success" @click="optimizeContent">
-            扩写提示词 <span style="margin-left: 8px;">⚡ 25 <span style="font-size: 12px;"></span></span>
+          <el-button size="medium" type="success" @click="optimizeContent" :loading="loadingStatus || pollStatus === 'optimizing'">
+            {{ loadingStatus || pollStatus === 'optimizing' ? '正在生成中' : '扩写提示词' }} <span style="margin-left: 8px;">⚡ 25 <span style="font-size: 12px;"></span></span>
             </el-button>
-          <el-button size="medium" type="primary" @click="generateImage">
-            立即生成 <span style="margin-left: 8px;">⚡ 150 <span style="font-size: 12px;"></span></span>
+          <el-button size="medium" type="primary" @click="generateImage" :loading="loadingStatus || pollStatus === 'polling'">
+            {{ loadingStatus || pollStatus === 'polling' ? '正在生成中' : '立即生成' }} <span style="margin-left: 8px;">⚡ 150 <span style="font-size: 12px;"></span></span>
           </el-button>
         </div>
       </div>
     </div>
     </div>
     
-    <!-- 中间：产品信息 -->
-    <div class="middle-column" style="width: 430px; border-left: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; padding: 0 20px; position: relative;">
+   <!-- 中间：产品信息和历史记录 -->
+<div class="middle-column" style="width: 430px; border-left: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; padding: 15px 20px; position: relative;">
+  <!-- 历史记录覆盖层 -->
+  <div v-if="showHistoryPanel" style="position: absolute; top: 0; left: 0; right: 0; 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="toggleHistoryPanel">
+            <el-icon><Close /></el-icon>
+          </el-button>
+        </div>
+        
+        <!-- 模板分类树 -->
+        <el-tree
+          :data="templateTreeData"
+          node-key="id"
+          default-expand-all
+          @node-click="handleTemplateTreeClick"
+          style="margin-bottom: 20px;"
+        >
+          <template #default="{ node, data }">
+            <span>{{ data.label }}</span>
+            <span style="margin-left: 10px; font-size: 12px; color: #909399;">({{ data.count }}张)</span>
+          </template>
+        </el-tree>
+        
+        <!-- 选中模板的历史图片 -->
+        <div>
+          <h5 style="margin: 0 0 10px 0; font-size: 13px; font-weight: bold;">
+            {{ currentTemplateName || '历史图片' }}
+          </h5>
+          <div class="history-images-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">
+            <div v-for="(image, index) in filteredImages" :key="index" class="history-image-item" style="border: 1px solid #e4e7ed; border-radius: 4px; overflow: hidden; padding: 10px;">
+              <div style="height: 120px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; border-radius: 4px; overflow: hidden;">
+                <el-image
+                  :src="formatImageUrl(image.url)"
+                  :preview-src-list="[formatImageUrl(image.url)]"
+                  style="width: 100%; height: 100%;"
+                  fit="contain"
+                  preview-teleported
+                />
+              </div>
+              <div style="margin-top: 10px; font-size: 12px; color: #606266; line-height: 1.4; height: 50px; overflow: hidden;">
+                {{ image.product_content || '无描述' }}
+              </div>
+              <div style="margin-top: 5px; font-size: 11px; color: #909399; text-align: right;">
+                {{ image.createTime || '' }}
+              </div>
+            </div>
+            <div v-if="filteredImages.length === 0" style="text-align: center; padding: 40px; color: #909399; font-size: 14px; grid-column: 1 / -1;">
+              暂无历史图片
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+ <!-- 标题 -->
+ <div style="font-size: 18px; font-weight: bold; color: white; margin-bottom: 15px; background-color: #404040; padding: 10px; border-radius: 4px; text-align: center; display: flex; justify-content: space-between; align-items: center;">
+    <span>③效果图</span>
+    <el-button type="primary" size="small" @click="toggleHistoryPanel">
+      {{ showHistoryPanel ? '隐藏历史记录' : '显示历史记录' }}
+    </el-button>
+  </div>
+  
+  <!-- 主内容区域 -->
+  <div style="display: flex; height: calc(100% - 90px);">
+    <!-- 左侧：历史记录面板 (已移至覆盖层) -->
+    
+    <!-- 右侧：原始内容 -->
+    <div class="original-content" style="flex: 1; overflow-y: auto;">
       <!-- 商品图例覆盖层 -->
-      <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 v-if="productExampleVisible" style="position: absolute; top: 0; left: 0; right: 0; 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;">
@@ -485,7 +540,7 @@
               <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`" 
+                  :src="`/src/assets/ai案例图/010.jpg`"
                     style="width: 100%; height: 100%;"
                     fit="contain"
                   >
@@ -637,94 +692,21 @@
         <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 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;">
+          <div style="width: 430px; height: 290px; display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 4px;">
+            <el-carousel v-if="newImages.length > 0" indicator-position="outside" style="width: 100%; height: 100%;">
+              <el-carousel-item v-for="(image, index) in newImages" :key="index">
+                <el-image
+                  :src="formatImageUrl(image.url)"
+                  :preview-src-list="[formatImageUrl(image.url)]"
+                  style="width: 100%; height: 100%; object-fit: fill;"
+                  fit="fill"
+                  preview-teleported
+                />
+              </el-carousel-item>
+            </el-carousel>
             <el-image
-              v-if="editFormData.new_image_url && showProductImage"
+              v-else-if="editFormData.new_image_url && showProductImage"
               :src="formatImageUrl(editFormData.new_image_url)"
               :preview-src-list="[formatImageUrl(editFormData.new_image_url)]"
               style="width: 100%; height: 100%; object-fit: fill;"
@@ -738,7 +720,7 @@
           </div>
         </div>
         <!-- 中：商品信息表单 -->
-        <div class="product-info-container" style="height: 320px;border: 12px solid #f6E0dd; border-radius: 4px; padding: 15px;">
+        <div class="product-info-container" style="width: 430px; height: 320px;border: 12px solid #f6E0dd; border-radius: 4px; padding: 15px;">
           <div class="product-info-item">
             <span class="product-info-label">商品条码：</span>
             <span class="product-info-value">{{ editFormData.barcode || '-' }}</span>
@@ -765,19 +747,18 @@
           </div>
         </div>
         <!-- 下：空出来的部分 -->
-        <div style="width: 430px; height: 61px;">
-        </div>
+        <div style="width: 430px; height: 61px;"></div>
       </div>
     </div>
+  </div>
+</div>
     
     <!-- 右侧：模板列表 -->
     <div class="right-column" style="flex: 1;">
       <div class="right-template" style="height: 100%; display: flex; flex-direction: column;">
-        <div style="margin-bottom: 10px;margin: 0px 0px 20px 0px;padding: 0px;display: flex;justify-content: flex-end;">
-          <el-button type="danger" size="large" @click="editDialogVisible = false">
-            <el-icon><Close /></el-icon>关闭
-          </el-button>
-        </div>
+        <!-- 标题 -->
+        <div style="font-size: 18px; font-weight: bold; color: white; margin-bottom: 15px; background-color: #404040; padding: 10px; border-radius: 4px; text-align: center;margin-top:15px">①模版</div>
+        
         <!-- 搜索框 -->
         <div class="template-search" style="margin-bottom: 15px;">
           <el-input v-model="searchKeyword" placeholder="请描述你想搜索的模版关键字..." clearable @input="handleSearch" @clear="handleClearSearch">
@@ -1082,9 +1063,9 @@
 import { ref, reactive, toRaw, onMounted ,watch } from 'vue'
 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'
+  product_template,GetTxtToTxt,GetProductFind,productAdd,getMerchantId,GetImageStatus } from '@/api/mes/job'
 import { useUserStore } from '@/pinia/modules/user'
-import {  ZoomIn, Camera,SuccessFilled, WarningFilled, More, ArrowRight, ArrowDown } from '@element-plus/icons-vue'
+import {  ZoomIn, Camera,SuccessFilled, WarningFilled, More, ArrowRight, ArrowDown, Loading } from '@element-plus/icons-vue'
 import { Layout, LayoutHeader, LayoutSider, LayoutContent } from '@arco-design/web-vue'
 
 
@@ -1093,6 +1074,18 @@ import { Layout, LayoutHeader, LayoutSider, LayoutContent } from '@arco-design/w
 const productExampleVisible = ref(false)
 const caseExampleVisible = ref(false)
 
+// 图片历史记录相关状态
+const templateTreeData = ref([])
+const currentTemplateId = ref(null)
+const currentTemplateName = ref('')
+const filteredImages = ref([])
+const showHistoryPanel = ref(false)
+
+// 切换历史记录面板显示
+const toggleHistoryPanel = () => {
+  showHistoryPanel.value = !showHistoryPanel.value
+}
+
 // 切换商品图例显示
 const toggleProductExample = () => {
   productExampleVisible.value = !productExampleVisible.value
@@ -1220,6 +1213,9 @@ const showProductImage = ref(false)
 // 存储生成的多个新图
 const newImages = ref([])
 
+// 加载状态控制
+const loadingStatus = ref(false)
+
 const formatImageUrl = (path) => {
   if (!path) return ''
   // 检查path是否已经是完整的URL
@@ -1352,8 +1348,52 @@ const setActive = async (type) => {
 }
 
 
+// 处理模板分类树数据
+const processTemplateTreeData = (images) => {
+  // 按template_id分组
+  const templateMap = {}
+  images.forEach(item => {
+    if (item.template_id) {
+      if (!templateMap[item.template_id]) {
+        templateMap[item.template_id] = []
+      }
+      templateMap[item.template_id].push(item)
+    }
+  })
+  
+  // 构建树结构数据
+  const treeData = []
+  Object.keys(templateMap).forEach(templateId => {
+    treeData.push({
+      id: templateId,
+      label: `模板 ${templateId}`,
+      count: templateMap[templateId].length
+    })
+  })
+  
+  templateTreeData.value = treeData
+  
+  // 默认选中第一个模板
+  if (treeData.length > 0) {
+    currentTemplateId.value = treeData[0].id
+    currentTemplateName.value = treeData[0].label
+    filterImagesByTemplate(treeData[0].id)
+  }
+}
+
+// 根据模板ID过滤图片
+const filterImagesByTemplate = (templateId) => {
+  filteredImages.value = newImages.value.filter(image => image.template_id == templateId)
+}
+
+// 处理模板树点击事件
+const handleTemplateTreeClick = (data) => {
+  currentTemplateId.value = data.id
+  currentTemplateName.value = data.label
+  filterImagesByTemplate(data.id)
+}
+
 const onRowDblClick = async (row) => {
-  try {
     // 设置编辑表单ID
     editFormData.id = row.id
     editDialogVisible.value = true
@@ -1382,7 +1422,9 @@ const onRowDblClick = async (row) => {
           if (item.product_new_img) {
             newImages.value.push({
               url: item.product_new_img,
-              product_content: item.product_content || ''
+              product_content: item.product_content || '',
+              template_id: item.template_id,
+              createTime: item.createTime
             })
           }
         })
@@ -1391,25 +1433,22 @@ const onRowDblClick = async (row) => {
         if (newImages.value.length > 0 && newImages.value[0].product_content) {
           editFormData.chinese_description = newImages.value[0].product_content
         }
+        
+        // 处理模板分类树数据
+        processTemplateTreeData(detailResponse.image)
       }
     }
     
     // 2. 获取所有模板数据
     await fetchTemplates()
     
-  } catch (error) {
-    console.error('打开编辑弹窗失败:', error)
-    ElMessage.error('获取数据失败')
-  }
 }
 
 // 存储所有模板数据
 const templateList = ref([])
-const currentTemplateId = ref(null) // 当前选中的模板ID
 
 // 获取所有模板
 const fetchTemplates = async () => {
-  try {
     const response = await product_template()
     if (response.code === 0 && response.data) {
       templateList.value = response.data.map(item => ({
@@ -1425,10 +1464,6 @@ const fetchTemplates = async () => {
       // }
       updateProductImage(newImages.value[0].url)
     }
-  } catch (error) {
-    console.error('获取模板失败:', error)
-    templateList.value = []
-  }
 }
 
 // 选择模板
@@ -1509,13 +1544,16 @@ const optimizeContent = async () => {
       return
     }
     
+    // 设置加载状态
+    loadingStatus.value = true
+    
     // 重置状态
     pollStatus.value = 'optimizing'
     pollCount.value = 0
     
     // 第一步：调用生成接口触发生成任务
     const generateResponse = await GetTxtToTxt({ 
-      status_val: '图生文',
+      status_val: '文生文',
       prompt: editFormData.chinese_description,
       model: 'gemini-3-pro-preview',
       id: editFormData.id,
@@ -1545,6 +1583,7 @@ const optimizeContent = async () => {
               clearInterval(pollInterval.value)
               pollInterval.value = null
               pollStatus.value = 'success'
+              loadingStatus.value = false
               
               // 更新内容到输入框
               editFormData.chinese_description = checkResponse.data.content
@@ -1558,6 +1597,7 @@ const optimizeContent = async () => {
             clearInterval(pollInterval.value)
             pollInterval.value = null
             pollStatus.value = 'error'
+            loadingStatus.value = false
             ElMessage.warning('优化超时，请稍后手动检查结果')
           }
           
@@ -1569,11 +1609,13 @@ const optimizeContent = async () => {
       
     } else {
       pollStatus.value = 'error'
+      loadingStatus.value = false
       ElMessage.error('优化任务启动失败: ' + (generateResponse.msg || '未知错误'))
     }
     
   } catch (generateError) {
     pollStatus.value = 'error'
+    loadingStatus.value = false
     console.error('内容优化失败:', generateError)
     ElMessage.error('内容优化失败: ' + (generateError.message || '未知错误'))
   }
@@ -1583,19 +1625,27 @@ const optimizeContent = async () => {
 const pollStatus = ref(null) // 轮询状态：'polling', 'success', 'error'
 const pollCount = ref(0) // 轮询次数
 const pollInterval = ref(null) // 轮询定时器
-
+const task_id = ref('')
 // 生成图片（简化版，只做轮询）
 const generateImage = async () => {
   try {
+    if (!editFormData.template_id) {
+      ElMessage.warning('请先选择模版')
+      return
+    }
+
     if (!editFormData.chinese_description) {
       ElMessage.warning('请输入描述内容')
       return
     }
+
+    // 设置加载状态
+    loadingStatus.value = true
     
     // 重置状态
     pollStatus.value = 'polling'
     pollCount.value = 0
-    
+    console.log(editFormData.template_id)
     // 第一步：调用生成接口触发生成任务
     const generateResponse = await GetTxtToTxt({ 
       status_val: '文生图',
@@ -1603,10 +1653,15 @@ const generateImage = async () => {
       model: 'gemini-3-pro-image-preview',
       id: editFormData.id,
       size: selectedSize.value,
+      template_id:editFormData.template_id,
     })
     
     if (generateResponse.code === 0) {
       ElMessage.success('图片生成任务已开始，请稍候...')
+      task_id.value = generateResponse.data.task_id
+    
+
+      // 稍后在轮询中使用GetImageStatus接口
       
       // 清除之前的定时器
       if (pollInterval.value) {
@@ -1618,35 +1673,61 @@ const generateImage = async () => {
         pollCount.value++
         
         try {
-          // 调用查询接口
-          const checkResponse = await GetProductFind({ id: editFormData.id })
+          // 调用GetImageStatus接口查询生成状态
+          const statusResponse = await GetImageStatus({ task_id: task_id.value })
           
-          if (checkResponse.code === 0 && checkResponse.data) {
-            // 如果获取到数据且有product_new_img字段
-            if (checkResponse.data.product_new_img) {
+          if (statusResponse.code === 0 && statusResponse.data) {
+            // 如果获取到数据且有图片URL
+            if (statusResponse.data.image_url) {
               // 停止轮询
               clearInterval(pollInterval.value)
+              pollInterval.value = null
               pollStatus.value = 'success'
+              loadingStatus.value = false
               
               // 更新新图URL
-              editFormData.new_image_url = checkResponse.data.product_new_img
+              const imageUrl = statusResponse.data.image_url
+              editFormData.new_image_url = imageUrl
               editFormData.img_name = `生成图片_${new Date().getTime()}.jpg`
-              editFormData.product_name = checkResponse.data.product_name
-              editFormData.product_code = checkResponse.data.product_code
               
-              // 如果有原图字段，也更新一下
-              if (checkResponse.data.product_img) {
-                editFormData.original_image_url = checkResponse.data.product_img
+              // 更新历史记录
+              const newImageItem = {
+                url: imageUrl,
+                product_content: editFormData.chinese_description || '',
+                template_id: editFormData.template_id,
+                createTime: statusResponse.data.completed_at || new Date().toISOString()
               }
               
-              ElMessage.success(`图片生成成功！耗时约${pollCount.value * 10}秒`)
+              // 添加到newImages数组（走马灯轮播）
+              newImages.value.unshift(newImageItem)
+              
+              // 处理模板分类树数据
+              processTemplateTreeData([newImageItem])
+              
+              ElMessage.success(`图片生成成功！耗时约${pollCount.value * 5}秒`)
+            } else if (statusResponse.data.error) {
+              // 如果返回错误
+              clearInterval(pollInterval.value)
+              pollInterval.value = null
+              pollStatus.value = 'error'
+              loadingStatus.value = false
+              ElMessage.error('图片生成失败: ' + statusResponse.data.error)
             }
+          } else {
+            // 如果接口返回错误
+            clearInterval(pollInterval.value)
+            pollInterval.value = null
+            pollStatus.value = 'error'
+            loadingStatus.value = false
+            ElMessage.error('查询生成状态失败: ' + (statusResponse.msg || '未知错误'))
           }
           
-          // 如果轮询超过30次（5分钟），停止轮询
+          // 如果轮询超过30次（2.5分钟），停止轮询
           if (pollCount.value >= 30) {
             clearInterval(pollInterval.value)
+            pollInterval.value = null
             pollStatus.value = 'error'
+            loadingStatus.value = false
             ElMessage.warning('生成超时，请稍后手动检查结果')
           }
           
@@ -1654,15 +1735,17 @@ const generateImage = async () => {
           console.error('轮询查询失败:', pollError)
           // 轮询失败继续尝试
         }
-      }, 5000) // 每10秒轮询一次
+      }, 5000) // 每5秒轮询一次
       
     } else {
       pollStatus.value = 'error'
+      loadingStatus.value = false
       ElMessage.error('生成任务启动失败: ' + (generateResponse.msg || '未知错误'))
     }
     
   } catch (generateError) {
     pollStatus.value = 'error'
+    loadingStatus.value = false
     console.error('生成图片失败:', generateError)
     ElMessage.error('生成图片失败: ' + (generateError.message || '未知错误'))
   }
@@ -2181,7 +2264,7 @@ defineExpose({
   
   .image-comparison-section {
     flex: none; /* 改为不伸缩 */
-    height: 400px; /* 固定高度，和原来一样 */
+    height: 300px; /* 固定高度，和原来一样 */
     display: flex;
     flex-direction: column;
     gap: 15px;