Преглед на файлове

refactor(Photography): 优化作品生成进度展示效果

-调整进度条上升速度,增加中间阶段的缓慢上升效果- 保留 loading 对话框直到作品生成完成或失败
-优化进度文本显示,保留两位小数
- 注释掉生成失败时关闭 loading 对话框的代码
panqiuyao преди 5 месеца
родител
ревизия
a2b0bc4065
променени са 2 файла, в които са добавени 16 реда и са изтрити 12 реда
  1. 6 6
      frontend/src/views/Photography/components/LoadingDialog.vue
  2. 10 6
      frontend/src/views/Photography/detail.vue

+ 6 - 6
frontend/src/views/Photography/components/LoadingDialog.vue

@@ -12,14 +12,14 @@
     <div class="loading-content mar-top-10">
       <div class="progress-container">
         <div class="progress-bar">
-          <div 
+          <div
             class="progress-inner"
             :style="{ width: `${progress}%` }"
           ></div>
         </div>
-        <span class="progress-text">{{ progress }}%</span>
+        <span class="progress-text">{{ progress.toFixed(2) }}%</span>
       </div>
-      
+
       <div class="message">{{ message }}</div>
       <!-- 错误信息插槽 -->
       <slot name="errList"></slot>
@@ -30,7 +30,7 @@
         class="action-button   button--primary1  mar-top-20"
         @click="handleButtonClick"
       >
-        {{ buttonText }} 
+        {{ buttonText }}
       </el-button>
     </div>
   </el-dialog>
@@ -100,7 +100,7 @@ const handleButtonClick = () => {
     display: none;
     padding: 0;
   }
-  
+
   :deep(.el-dialog__body) {
     padding:0;
   }
@@ -151,4 +151,4 @@ const handleButtonClick = () => {
 .action-button {
   padding: 10px  20px;
 }
-</style> 
+</style>

+ 10 - 6
frontend/src/views/Photography/detail.vue

@@ -419,7 +419,7 @@ const generate = async function () {
     }
     //生成失败 (接口请求失败)
     function handleFail(errorMsg: string) {
-      loadingDialogVisible.value = false
+     // loadingDialogVisible.value = false
       disabledButton.value = false
       if (errorMsg) {
         ElMessage.error(errorMsg)
@@ -469,14 +469,18 @@ const openLoadingDialog = (timer: number) => {
   const step = 100 / timer
   INTERVAL.value = setInterval(() => {
 
-    if (progress.value < 80) {
-      progress.value = Math.min(progress.value + step, 100);
+    if (progress.value < 50) {
+      progress.value = Math.min(progress.value + step, 100)
+    } else if (progress.value < 70) {
+      progress.value = Math.min(progress.value + step / 2, 100)
+    } if (progress.value < 85) {
+      progress.value = Math.min(progress.value + step / 5, 100)
     } else if (progress.value < 90) {
-      progress.value = Math.min(progress.value + step / 10, 100);
+      progress.value = Math.min(progress.value + step / 10, 100)
     } else if (progress.value < 95) {
-      progress.value = Math.min(progress.value + step / 50, 100); // 新增中间阶段
+      progress.value = Math.min(progress.value + step / 50, 100)// 新增中间阶段
     } else {
-      progress.value = Math.min(progress.value + step / 100, 100);
+      progress.value = Math.min(progress.value + step / 100, 100)
     }
   }, 1000)
 }