feat(photography): 添加上脚图和场景图生成进度展示- 新增上脚图和场景图生成进度的处理函数

- 实现消息列表自动滚动到底部的功能
- 优化错误提示，增加对话框弹出后再显示错误信息
- 在组件卸载时移除所有事件监听器

frontend/src/views/Photography/detail.vue

@@ -294,7 +294,7 @@
             {{ showMessageHistory ? '收起' : '查看详情' }}
           </el-button>
         </div>
-        <div class="message-list" v-if="showMessageHistory">
+        <div class="message-list" v-if="showMessageHistory" ref="messageListRef">
           <div v-for="(msg, index) in progressMessages" :key="index" class="message-item flex left">
             <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
             <div class="message-content mar-left-10">
@@ -341,7 +341,7 @@ import { clickLog, setLogInfo } from '@/utils/log'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import headerBar from '@/components/header-bar/index.vue'
-import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Select, EditPen } from '@element-plus/icons-vue'
 import upload from '@/components/upload'
 import client from "@/stores/modules/client";
@@ -392,6 +392,17 @@ const progressMessages = ref<Array<{
   timestamp: number
 }>>([])
 const showMessageHistory = ref(true)
+const messageListRef = ref<HTMLElement | null>(null)
+
+// 新消息时自动滚动到底部
+const scrollMessageListToBottom = () => {
+  nextTick(() => {
+    const el = messageListRef.value
+    if (el) {
+      el.scrollTop = el.scrollHeight
+    }
+  })
+}
 
 let templates = ref([])
 let goods_art_nos = ref([])
@@ -439,6 +450,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
   clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
   clearInterval(INTERVAL.value);
 })
@@ -554,6 +567,7 @@ const handleProgressMessage = (data: any) => {
     progressMessages.value.push(messageData)
     // 更新当前显示的消息
     message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
+    scrollMessageListToBottom()
   }
 }
 
@@ -573,6 +587,43 @@ const handleSegmentProgressMessage = (data: any) => {
     progressMessages.value.push(messageData)
     // 更新当前显示的消息
     message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
+    scrollMessageListToBottom()
+  }
+}
+
+// 处理上脚图进度
+const handleUpperFooterProgressMessage = (data: any) => {
+  console.log("upper_footer_progress", data);
+  if (data.code === 0 && data.msg_type === 'upper_footer_progress') {
+    const messageData = {
+      goods_no: '',
+      temp_name: '',
+      status: data.data?.status || '',
+      goods_art_nos: data.data?.goods_art_nos || [],
+      msg: data.msg,
+      timestamp: Date.now()
+    }
+    progressMessages.value.push(messageData)
+    message.value = `货号${(data.data?.goods_art_nos || []).join(', ')}：${data.msg}`
+    scrollMessageListToBottom()
+  }
+}
+
+// 处理场景图进度
+const handleSceneProgressMessage = (data: any) => {
+  console.log("scene_progress", data);
+  if (data.code === 0 && data.msg_type === 'scene_progress') {
+    const messageData = {
+      goods_no: '',
+      temp_name: '',
+      status: data.data?.status || '',
+      goods_art_nos: data.data?.goods_art_nos || [],
+      msg: data.msg,
+      timestamp: Date.now()
+    }
+    progressMessages.value.push(messageData)
+    message.value = `货号${(data.data?.goods_art_nos || []).join(', ')}：${data.msg}`
+    scrollMessageListToBottom()
   }
 }
 
@@ -597,12 +648,18 @@ const generate = async function () {
 
   // 必填验证
   if (form.services.includes('is_upper_footer') && !selectedModels.value) {
-    ElMessage.error('请选择模特')
+    openModelDialog();
+    setTimeout(()=>{
+      ElMessage.error('请选择模特')
+    },200)
     return
   }
 
   if (form.services.includes('is_product_scene') && !scenePrompt.value) {
-    ElMessage.error('请设置场景提示词')
+    openScenePromptDialog();
+    setTimeout(()=>{
+      ElMessage.error('请设置场景提示词')
+    },200)
     return
   }
 
@@ -672,6 +729,16 @@ const generate = async function () {
   clientStore.ipc.on(icpList.socket.message + '_segment_progress', (event, data) => {
     handleSegmentProgressMessage(data)
   });
+  // 监听上脚图进度消息
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
+  clientStore.ipc.on(icpList.socket.message + '_upper_footer_progress', (event, data) => {
+    handleUpperFooterProgressMessage(data)
+  });
+  // 监听场景图进度消息
+  clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
+  clientStore.ipc.on(icpList.socket.message + '_scene_progress', (event, data) => {
+    handleSceneProgressMessage(data)
+  });
   clientStore.ipc.on(icpList.generate.generatePhotoDetail, (event, result) => {
     if(result.code !== 0 ){
      if(result.msg){
@@ -689,6 +756,8 @@ const generate = async function () {
       clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
       clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
       clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
+      clientStore.ipc.removeAllListeners(icpList.socket.message + '_upper_footer_progress');
+      clientStore.ipc.removeAllListeners(icpList.socket.message + '_scene_progress');
     }, 500)
     clearInterval(INTERVAL.value)
     if (result.code === 0) {