瀏覽代碼

refactor(frontend): 优化摄影详情页加载进度条速度

- 调整进度条加载速度,使其更加平滑
- 新增中间阶段,减慢接近完成时的加载速度
- 通过分段控制进度值增加幅度,提升用户体验
panqiuyao 6 月之前
父節點
當前提交
8a22a111b5
共有 1 個文件被更改,包括 9 次插入2 次删除
  1. 9 2
      frontend/src/views/Photography/detail.vue

+ 9 - 2
frontend/src/views/Photography/detail.vue

@@ -468,8 +468,15 @@ const openLoadingDialog = (timer: number) => {
   // 根据传入的秒数计算每次增加的进度值
   const step = 100 / timer
   INTERVAL.value = setInterval(() => {
-    if (progress.value < 100) {
-      progress.value = Math.min(Math.round(progress.value + step),100)
+
+    if (progress.value < 80) {
+      progress.value = Math.min(progress.value + step, 100);
+    } else if (progress.value < 90) {
+      progress.value = Math.min(progress.value + step / 10, 100);
+    } else if (progress.value < 95) {
+      progress.value = Math.min(progress.value + step / 50, 100); // 新增中间阶段
+    } else {
+      progress.value = Math.min(progress.value + step / 100, 100);
     }
   }, 1000)
 }