feat(photography):优化进度条展示与处理完成逻辑

- 在进度步骤数据中新增 goods_art_no 字段以支持货号显示
- 调整进度条 UI 布局，从横向改为纵向排列
- 修改步骤状态展示方式，增加当前处理款号信息
- 处理完成时自动打开输出目录- 隐藏部分冗余信息展示以优化界面显示效果
- 调整加载弹窗宽度与内边距提升视觉体验
- 更新步骤图标样式与连接线布局使界面更清晰- 移除背景图片并调整弹窗圆角增强现代感

frontend/src/views/Photography/components/LoadingDialog.vue

@@ -4,12 +4,12 @@
     :show-close="!requesting"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    width="1000px"
+    width="650px"
     custom-class="loading-dialog-EL"
     align-center
     append-to-body
   >
-    <div class="loading-content mar-top-10">
+    <div class="loading-content">
       <!-- 新的步骤进度条 -->
       <ProgressSteps
         v-if="useNewProgress && progressSteps.length > 0"
@@ -28,7 +28,7 @@
         <span class="progress-text">{{ progress.toFixed(2) }}%</span>
       </div>
 
-      <div class="message">{{ message }}</div>
+      <div class="message" style="display: none">{{ message }}</div>
       <!-- 错误信息插槽 -->
       <slot name="errList"></slot>
       <!-- 进度消息插槽 -->
@@ -52,6 +52,7 @@ import { ref, defineProps, defineEmits , watch } from 'vue'
 import ProgressSteps from './ProgressSteps.vue'
 
 interface StepData {
+  goods_art_no: string
   msg_type: string
   name: string
   status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
@@ -102,18 +103,19 @@ const handleButtonClick = () => {
   emit('button-click')
 }
 </script>
-<style>
+<style lang="scss">
 .loading-dialog-EL{
+  border-radius: 10px;
   .el-dialog__header {
     display: none;
     padding: 0;
   }
  .el-dialog__body {
-    background-image: url(@/assets/images/Photography/loading-bg.png);  /* 添加背景图片 */
+   // background-image: url(@/assets/images/Photography/loading-bg.png);  /* 添加背景图片 */
     background-size: cover;  /* 确保图片覆盖整个区域 */
     background-position: center;  /* 图片居中显示 */
     background-repeat: no-repeat;  /* 防止图片重复 */
-    padding: 40px 20px;  /* 添加内边距 */
+    padding: 20px 20px;  /* 添加内边距 */
   }
 
 }

frontend/src/views/Photography/components/ProgressSteps.vue

@@ -13,7 +13,7 @@
             <el-icon><Check /></el-icon>
           </div>
           <div v-else-if="step.status === '正在处理'" class="step-icon processing">
-            <div class="loading-spinner"></div>
+            {{ index + 1 }}
           </div>
           <div v-else-if="step.status === '处理失败'" class="step-icon failed">
             <el-icon><Close /></el-icon>
@@ -25,11 +25,16 @@
 
         <!-- 步骤内容 -->
         <div class="step-content">
-          <div class="step-title">{{ getStepTitle(step) }}</div>
-          <div class="step-description">{{ step.name }}</div>
-          <div v-if="step.status !== '等待处理'" class="step-progress">
-            <span class="progress-text">{{ step.current }}/{{ step.total }}</span>
+          <div class="step-title">{{ step.name }}</div>
+          <div class="step-status">
+            {{ getStepTitle(step) }}
+            <div v-if="step.status !== '等待处理'" class="step-details">
+              第{{ step.current }}/{{ step.total }}款 {{ getCurrentGoodsNo(step) }}
+            </div>
           </div>
+<!--          <div v-if="step.status === '处理完成'" class="step-actions">
+            <span class="view-results" @click="handleViewResults(step)">查看结果</span>
+          </div>-->
         </div>
 
         <!-- 连接线 -->
@@ -56,6 +61,7 @@ import { Check, Close } from '@element-plus/icons-vue'
 
 interface StepData {
   msg_type: string
+  goods_art_no: string
   name: string
   status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
   current: number
@@ -104,6 +110,21 @@ const allStepsCompleted = computed(() => {
   return props.steps.every(step => step.status === '处理完成')
 })
 
+// 获取当前货号（这里需要根据实际数据结构调整）
+const getCurrentGoodsNo = (step: StepData) => {
+  // 这里需要根据实际的数据结构来获取当前货号
+  console.log('step===================');
+  console.log(step);
+  // 暂时返回一个示例值
+  return step.goods_art_no
+}
+
+// 处理查看结果
+const handleViewResults = (step: StepData) => {
+  console.log('查看结果:', step)
+  // 这里可以添加查看结果的逻辑
+}
+
 // 处理完成按钮点击
 const handleComplete = () => {
   emit('complete')
@@ -120,36 +141,34 @@ watch(() => props.steps, (newSteps) => {
 .progress-steps {
   width: 100%;
   padding: 20px 0;
+  background: #fff;
 }
 
 .steps-container {
   display: flex;
-  flex-direction: row;
-  gap: 20px;
+  flex-direction: column;
+  gap: 0;
   position: relative;
-  align-items: flex-start;
-  justify-content: space-between;
   padding: 0 20px;
 }
 
 .step-item {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: flex-start;
   position: relative;
-  padding: 15px 10px;
-  flex: 1;
-  min-width: 0;
+  padding: 20px 0;
+  min-height: 60px;
 }
 
 .step-circle {
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 15px;
+  margin-right: 10px;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
@@ -164,96 +183,83 @@ watch(() => props.steps, (newSteps) => {
   justify-content: center;
   font-weight: bold;
   color: white;
-  font-size: 16px;
+  font-size: 14px;
+  background: #FFF;
+  border:1px solid #E5E5E5;
 }
 
 .step-icon.completed {
-  background: linear-gradient(135deg, #409EFF, #66B1FF);
+  border-color: #2957FF;
+  color: #2957FF;
 }
 
 .step-icon.processing {
-  background: linear-gradient(135deg, #409EFF, #66B1FF);
-  position: relative;
+  border-color: #2957FF;
+  color: #2957FF;
 }
 
 .step-icon.failed {
-  background: linear-gradient(135deg, #F56C6C, #F78989);
+  border-color: #F56C6C;
+  color: #F56C6C;
 }
 
 .step-icon.waiting {
-  background: linear-gradient(135deg, #DCDFE6, #DCDFE6);
-  color: #909399;
-}
-
-.loading-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top: 2px solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  border-color:#E5E5E5;
+  color: #E5E5E5;
 }
 
 .step-content {
   flex: 1;
-  min-width: 0;
-  text-align: center;
-  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  min-height: 32px;
+  line-height: 32px;
 }
 
 .step-title {
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   color: #303133;
-  margin-bottom: 5px;
+  margin-bottom: 4px;
+  min-width: 120px;
+  text-align: left;
 }
 
-.step-description {
+.step-status {
   font-size: 14px;
   color: #606266;
-  margin-bottom: 8px;
-}
-
-.step-progress {
+  margin-bottom: 4px;
+  flex: 1;
+  text-align: left;
+  margin-left: 20px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
 }
 
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: #E4E7ED;
-  border-radius: 3px;
-  overflow: hidden;
+.step-details {
+  margin-left: 10px;
 }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #2FB0FF, #B863FB);
-  border-radius: 3px;
-  transition: width 0.3s ease;
+.step-actions {
+  margin-top: 8px;
 }
 
-.progress-text {
-  font-size: 12px;
-  color: #909399;
-  min-width: 40px;
+.view-results {
+  color: #2957FF;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .step-connector {
   position: absolute;
-  top: 35px;
-  left: calc(100% - 20px);
-  width: 60px;
-  height: 2px;
+  top: 52px;
+  left: 15px;
+  width: 2px;
+  height: calc(100% - 32px);
   background: #E4E7ED;
   z-index: 1;
 }
@@ -265,6 +271,7 @@ watch(() => props.steps, (newSteps) => {
 .completion-section {
   margin-top: 30px;
   text-align: center;
+  padding: 0 20px;
 }
 
 .completion-button {
@@ -286,13 +293,22 @@ watch(() => props.steps, (newSteps) => {
 // 步骤状态样式
 .step-completed {
   .step-title {
-    color: #000;
+    color: rgba(0,0,0,1);
+    font-size: 16px;
+  }
+  .step-status {
+    color: rgba(0,0,0,0.85);
+    font-size: 14px;
   }
 }
 
 .step-processing {
   .step-title {
+    font-weight: bold;
+  }
+  .step-status {
     color: #000;
+    font-size: 16px;
   }
 }
 
@@ -304,7 +320,12 @@ watch(() => props.steps, (newSteps) => {
 
 .step-waiting {
   .step-title {
-    color: #909399;
+    color: rgba(0,0,0,0.45);
+    font-size: 16px;
+  }
+  .step-status {
+    color: rgba(0,0,0,0.45);
+    font-size: 14px;
   }
 }
 </style>

frontend/src/views/Photography/detail.vue

@@ -411,6 +411,7 @@ const disabledButton = ref(true)
 const useNewProgress = ref(false)
 const progressSteps = ref<Array<{
   msg_type: string
+  goods_art_no: string
   name: string
   status: '等待处理' | '正在处理' | '处理完成' | '处理失败'
   current: number
@@ -428,6 +429,7 @@ const updateProgressStep = (msgType: string, stepData: any) => {
     newSteps[stepIndex] = {
       ...newSteps[stepIndex],
       name: stepData.name, // 保持原有名称或使用新名称
+      goods_art_no: stepData.goods_art_no,
       status: stepData.status,
       current: stepData.current || 0,
       total: stepData.total || 0,
@@ -440,6 +442,7 @@ const updateProgressStep = (msgType: string, stepData: any) => {
     progressSteps.value = [...progressSteps.value, {
       msg_type: msgType,
       name: stepData.name,
+      goods_art_no: stepData.goods_art_no,
       status: stepData.status,
       current: stepData.current || 0,
       total: stepData.total || 0,
@@ -456,6 +459,7 @@ const initProgressSteps = (backendSteps?: any[]) => {
     // 使用后端返回的步骤数据
     progressSteps.value = backendSteps.map(step => ({
       msg_type: step.msg_type,
+      goods_art_no: step.goods_art_no,
       name: step.name,
       status: '等待处理',
       current: 0,
@@ -848,6 +852,9 @@ const handleSegmentProgressMessage = (data: any) => {
     // 更新新的进度条
     if (data.progress) {
       updateProgressStep('segment_progress', data.progress)
+      if(data.progress?.status === '处理完成'){
+        openOutputDir()
+      }
     }
   }
 }
@@ -1810,6 +1817,7 @@ const selectFolder = () => {
   border-top: 1px solid #e4e7ed;
   padding-top: 20px;
   width: 100%;
+  display: none;
 
   .message-header {
     display: flex;