perf(views): 优化“上传文件”步骤逻辑与 UI

src/views/setup-protocol/WaitingRecognition.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { message } from 'ant-design-vue';
 
 import { reUploadUserProtocol, uploadUserProtocol } from '@/api';
@@ -11,11 +11,16 @@ const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();
 
 const remainingSeconds = ref(90);
 const currentPercent = ref(0);
+let timer: number | undefined;
 
 onMounted(async () => {
-  await waitTime(2000);
-  remainingSeconds.value = 0;
-  currentPercent.value = 100;
+  await new Promise<void>((resolve) => {
+    timer = setInterval(() => {
+      updateProgress(resolve);
+    }, 500);
+  });
+
+  let uploadErr: Error | undefined;
 
   try {
     const { protocolType, protocolFile, protocolInfo } = props.form;
@@ -30,32 +35,72 @@ onMounted(async () => {
     }
 
     Object.assign(protocolInfo, data);
-    props.goToStep(props.stepIndex + 1);
   } catch (err) {
+    uploadErr = err as Error;
+  }
+
+  remainingSeconds.value = 0;
+  currentPercent.value = 100;
+  await waitTime(1000);
+
+  if (uploadErr) {
     props.goToStep(props.stepIndex - 1);
-    message.error((err as Error).message);
-    console.error(err);
+    message.error(uploadErr.message);
+    console.error(uploadErr);
+  } else {
+    props.goToStep(props.stepIndex + 1);
   }
 });
+
+const STOP_SECONDS = 3; // 更新剩余时间时的停止秒数
+const STOP_PERCENT = 95; // 更新当前进度时的停止百分比
+
+const updateProgress = (resolve: () => void) => {
+  const decrementSeconds = Math.floor(remainingSeconds.value / 2);
+  const incrementPercent = Math.floor((100 - currentPercent.value) / 2);
+  remainingSeconds.value = Math.max(remainingSeconds.value - decrementSeconds, STOP_SECONDS);
+  currentPercent.value = Math.min(currentPercent.value + incrementPercent, STOP_PERCENT);
+
+  if (remainingSeconds.value === STOP_SECONDS && currentPercent.value === STOP_PERCENT) {
+    clearInterval(timer);
+    resolve();
+  }
+};
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
 </script>
 
 <template>
   <div>
     <div class="recognize-tip">{{ $t('setupProtocol.recognizeTip', { time: remainingSeconds }) }}</div>
-    <AProgress class="recognize-progress" :percent="currentPercent" />
+    <AProgress
+      class="recognize-progress"
+      :percent="currentPercent"
+      :format="() => $t('setupProtocol.recognizeProgress')"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .recognize-tip {
-  margin-top: 51px;
-  margin-bottom: 19px;
+  margin-bottom: 16px;
   font-size: 14px;
   line-height: 22px;
-  color: var(--antd-color-text-secondary);
+  color: #333;
 }
 
-.recognize-progress {
-  max-width: 755px;
+:deep(.recognize-progress) {
+  max-width: 616px;
+
+  .ant-progress-bg {
+    background-color: var(--antd-color-primary);
+  }
+
+  .ant-progress-text {
+    font-size: 14px;
+    color: var(--antd-color-text-tertiary);
+  }
 }
 </style>