前端优化 - 优化 Markdown 展示 + 优化等待进度条效果

liyupi · liyupi · commit cdcf17a46d9a · 2025-09-10T22:14:31.000+08:00
diff --git a/coder-test-frontend/package.json b/coder-test-frontend/package.json
@@ -8,12 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.5",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.4",
-    "@element-plus/icons-vue": "^2.3.1",
-    "pinia": "^2.1.7"
+    "markdown-it": "^14.1.0",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
diff --git a/coder-test-frontend/src/views/Challenge.vue b/coder-test-frontend/src/views/Challenge.vue
@@ -29,6 +29,15 @@
                 :style="{ left: loadingPosition.x + 'px', top: loadingPosition.y + 'px' }"
               />
               <div class="loading-text">&#27491;&#22312;&#29983;&#25104;&#20851;&#21345;&#20013;...</div>
+              <div class="progress-container">
+                <el-progress 
+                  :percentage="generateProgress" 
+                  :stroke-width="6"
+                  :show-text="false"
+                  color="#DAA520"
+                />
+                <div class="progress-text">{{ generateProgress }}%</div>
+              </div>
             </div>
           </div>
         </el-card>
@@ -135,6 +144,15 @@
                   :style="{ left: submitLoadingPosition.x + 'px', top: submitLoadingPosition.y + 'px' }"
                 />
                 <div class="loading-text">&#27491;&#22312;&#25552;&#20132;&#31572;&#26696;...</div>
+                <div class="progress-container">
+                  <el-progress 
+                    :percentage="submitProgress" 
+                    :stroke-width="6"
+                    :show-text="false"
+                    color="#DAA520"
+                  />
+                  <div class="progress-text">{{ submitProgress }}%</div>
+                </div>
               </div>
             </div>
           </div>
@@ -170,17 +188,25 @@ const currentLevel = ref(null)
 const selectedOptions = ref([])
 const draggedOption = ref(null)
 
+// &#36827;&#24230;&#26465;&#30456;&#20851;
+const generateProgress = ref(0)
+const submitProgress = ref(0)
+let generateProgressInterval = null
+let submitProgressInterval = null
+
 // &#21152;&#36733;&#22270;&#26631;&#38543;&#26426;&#31227;&#21160;&#30456;&#20851;
 const loadingPosition = ref({ x: 0, y: 0 })
 const submitLoadingPosition = ref({ x: 0, y: 0 })
 let loadingInterval = null
 let submitLoadingInterval = null
 
 // &#38543;&#26426;&#31227;&#21160;&#20989;&#25968;
-const getRandomPosition = (containerWidth = 300, containerHeight = 80, iconSize = 40) => {
+const getRandomPosition = (containerWidth = 300, containerHeight = 180, iconSize = 40) => {
+  // &#38480;&#21046;&#22270;&#26631;&#22312;&#23481;&#22120;&#19978;&#21322;&#37096;&#20998;&#27963;&#21160;&#65292;&#36991;&#20813;&#19982;&#25991;&#26696;&#21644;&#36827;&#24230;&#26465;&#37325;&#21472;
+  const maxY = Math.min(containerHeight - 120, 35) // &#20445;&#30041;&#24213;&#37096;&#32473;&#25991;&#26696;&#21644;&#36827;&#24230;&#26465;
   return {
-    x: Math.random() * (containerWidth - iconSize),
-    y: Math.random() * (containerHeight - iconSize)
+    x: Math.random() * (containerWidth - iconSize - 10) + 5, // &#24038;&#21491;&#30041;5px&#36793;&#36317;
+    y: Math.random() * maxY + 5 // &#19978;&#26041;&#30041;5px&#36793;&#36317;
   }
 }
 
@@ -192,8 +218,8 @@ const startRandomMovement = (positionRef, intervalRef) => {
   
   // &#26681;&#25454;&#23631;&#24149;&#22823;&#23567;&#35843;&#25972;&#23481;&#22120;&#23610;&#23544;
   const isMobile = window.innerWidth <= 768
-  const containerWidth = isMobile ? 210 : 260
-  const containerHeight = isMobile ? 30 : 40
+  const containerWidth = isMobile ? 250 : 300
+  const containerHeight = isMobile ? 160 : 180
   const iconSize = isMobile ? 35 : 40
   
   // &#21021;&#22987;&#20301;&#32622;
@@ -212,6 +238,41 @@ const stopRandomMovement = (intervalRef) => {
   }
 }
 
+// &#36827;&#24230;&#26465;&#27169;&#25311;&#36923;&#36753;
+const simulateProgress = (progressRef, type = 'generate') => {
+  progressRef.value = 0
+  let currentProgress = 0
+  
+  return setInterval(() => {
+    if (currentProgress < 30) {
+      // &#21069;30%&#65306;&#24555;&#36895;&#22686;&#38271;&#65288;&#27169;&#25311;&#21021;&#22987;&#21270;&#65289;
+      currentProgress += Math.random() * 8 + 3
+    } else if (currentProgress < 60) {
+      // 30%-60%&#65306;&#20013;&#31561;&#36895;&#24230;&#65288;&#27169;&#25311;&#22788;&#29702;&#20013;&#65289;
+      currentProgress += Math.random() * 4 + 2
+    } else if (currentProgress < 85) {
+      // 60%-85%&#65306;&#36739;&#24930;&#36895;&#24230;&#65288;&#27169;&#25311;&#28145;&#24230;&#22788;&#29702;&#65289;
+      currentProgress += Math.random() * 2 + 1
+    } else if (currentProgress < 99) {
+      // 85%-99%&#65306;&#24456;&#24930;&#36895;&#24230;&#65288;&#27169;&#25311;&#26368;&#32456;&#22788;&#29702;&#65289;
+      currentProgress += Math.random() * 0.5 + 0.2
+    }
+    
+    // &#30830;&#20445;&#19981;&#36229;&#36807;99%&#65292;&#26368;&#21518;1%&#30001;&#23454;&#38469;&#23436;&#25104;&#26102;&#35774;&#32622;
+    progressRef.value = Math.min(Math.floor(currentProgress), 99)
+  }, type === 'generate' ? 300 : 200) // &#29983;&#25104;&#20851;&#21345;&#31245;&#24930;&#65292;&#25552;&#20132;&#31572;&#26696;&#31245;&#24555;
+}
+
+const stopProgress = (intervalRef) => {
+  if (intervalRef) {
+    clearInterval(intervalRef)
+  }
+}
+
+const completeProgress = (progressRef) => {
+  progressRef.value = 100
+}
+
 // &#35745;&#31639;&#21487;&#29992;&#36873;&#39033;&#65288;&#25490;&#38500;&#24050;&#36873;&#25321;&#30340;&#65289;
 const availableOptions = computed(() => {
   if (!currentLevel.value?.options) return []
@@ -259,16 +320,34 @@ const generateLevel = async () => {
   console.log('&#20351;&#29992;&#30340;&#34218;&#36164;:', userSalary)
 
   generating.value = true
+  // &#21551;&#21160;&#36827;&#24230;&#26465;&#27169;&#25311;
+  generateProgressInterval = simulateProgress(generateProgress, 'generate')
+  
   try {
     const levelData = await generateLevelAPI({ salary: userSalary })
     currentLevel.value = levelData
     selectedOptions.value = []
-    ElMessage.success('&#20851;&#21345;&#29983;&#25104;&#25104;&#21151;&#65281;')
+    
+    // &#23436;&#25104;&#36827;&#24230;&#26465;
+    completeProgress(generateProgress)
+    
+    // &#30701;&#26242;&#24310;&#36831;&#21518;&#26174;&#31034;&#25104;&#21151;&#28040;&#24687;&#65292;&#35753;&#29992;&#25143;&#30475;&#21040;100%
+    setTimeout(() => {
+      ElMessage.success('&#20851;&#21345;&#29983;&#25104;&#25104;&#21151;&#65281;')
+    }, 200)
   } catch (error) {
     console.error('&#29983;&#25104;&#20851;&#21345;&#22833;&#36133;:', error)
     ElMessage.error('&#29983;&#25104;&#20851;&#21345;&#22833;&#36133;&#65292;&#35831;&#37325;&#35797;')
   } finally {
-    generating.value = false
+    // &#28165;&#29702;&#36827;&#24230;&#26465;&#23450;&#26102;&#22120;
+    stopProgress(generateProgressInterval)
+    generateProgressInterval = null
+    
+    // &#24310;&#36831;&#37325;&#32622;&#29366;&#24577;&#65292;&#35753;&#29992;&#25143;&#30475;&#21040;&#23436;&#25104;&#25928;&#26524;
+    setTimeout(() => {
+      generating.value = false
+      generateProgress.value = 0
+    }, 500)
   }
 }
 
@@ -336,6 +415,9 @@ const submitAnswer = async () => {
   }
 
   submitting.value = true
+  // &#21551;&#21160;&#36827;&#24230;&#26465;&#27169;&#25311;
+  submitProgressInterval = simulateProgress(submitProgress, 'submit')
+  
   try {
     const submitData = {
       levelId: currentLevel.value.id,
@@ -351,15 +433,28 @@ const submitAnswer = async () => {
       userStore.updateUserSalary(newSalary)
     }
     
-    // &#36339;&#36716;&#21040;&#32467;&#26524;&#39029;&#38754;
-    console.log('&#20934;&#22791;&#36339;&#36716;&#21040;&#32467;&#26524;&#39029;&#38754;:', `/result/${result.id}`)
-    router.push(`/result/${result.id}`)
+    // &#23436;&#25104;&#36827;&#24230;&#26465;
+    completeProgress(submitProgress)
+    
+    // &#30701;&#26242;&#24310;&#36831;&#21518;&#36339;&#36716;&#65292;&#35753;&#29992;&#25143;&#30475;&#21040;100%
+    setTimeout(() => {
+      console.log('&#20934;&#22791;&#36339;&#36716;&#21040;&#32467;&#26524;&#39029;&#38754;:', `/result/${result.id}`)
+      router.push(`/result/${result.id}`)
+    }, 300)
     
   } catch (error) {
     console.error('&#25552;&#20132;&#31572;&#26696;&#22833;&#36133;:', error)
     ElMessage.error('&#25552;&#20132;&#31572;&#26696;&#22833;&#36133;&#65292;&#35831;&#37325;&#35797;')
-  } finally {
-    submitting.value = false
+    
+    // &#28165;&#29702;&#36827;&#24230;&#26465;&#23450;&#26102;&#22120;
+    stopProgress(submitProgressInterval)
+    submitProgressInterval = null
+    
+    // &#37325;&#32622;&#29366;&#24577;
+    setTimeout(() => {
+      submitting.value = false
+      submitProgress.value = 0
+    }, 300)
   }
 }
 
@@ -376,6 +471,11 @@ watch(generating, (newVal) => {
   } else {
     stopRandomMovement(loadingInterval)
     loadingInterval = null
+    // &#30830;&#20445;&#36827;&#24230;&#26465;&#23450;&#26102;&#22120;&#20063;&#34987;&#28165;&#29702;
+    if (generateProgressInterval) {
+      stopProgress(generateProgressInterval)
+      generateProgressInterval = null
+    }
   }
 })
 
@@ -386,6 +486,11 @@ watch(submitting, (newVal) => {
   } else {
     stopRandomMovement(submitLoadingInterval)
     submitLoadingInterval = null
+    // &#30830;&#20445;&#36827;&#24230;&#26465;&#23450;&#26102;&#22120;&#20063;&#34987;&#28165;&#29702;
+    if (submitProgressInterval) {
+      stopProgress(submitProgressInterval)
+      submitProgressInterval = null
+    }
   }
 })
 
@@ -397,9 +502,11 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  // &#32452;&#20214;&#38144;&#27585;&#26102;&#28165;&#29702;&#23450;&#26102;&#22120;
+  // &#32452;&#20214;&#38144;&#27585;&#26102;&#28165;&#29702;&#25152;&#26377;&#23450;&#26102;&#22120;
   stopRandomMovement(loadingInterval)
   stopRandomMovement(submitLoadingInterval)
+  stopProgress(generateProgressInterval)
+  stopProgress(submitProgressInterval)
 })
 </script>
 
@@ -605,7 +712,7 @@ onUnmounted(() => {
 .custom-loading-area {
   position: relative;
   width: 300px;
-  height: 80px;
+  height: 180px;
   margin: 20px auto;
   border: 2px dashed var(--border-medium);
   border-radius: 12px;
@@ -619,17 +726,46 @@ onUnmounted(() => {
   height: 40px;
   transition: all 0.3s ease-in-out;
   z-index: 2;
+  /* &#38480;&#21046;&#22270;&#26631;&#27963;&#21160;&#33539;&#22260;&#65292;&#36991;&#20813;&#19982;&#25991;&#26696;&#21644;&#36827;&#24230;&#26465;&#37325;&#21472; */
+  top: 5px;
 }
 
 .loading-text {
   position: absolute;
-  bottom: 5px;
+  bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 500;
+  z-index: 3;
+  background: var(--bg-secondary);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* &#36827;&#24230;&#26465;&#23481;&#22120; */
+.progress-container {
+  position: absolute;
+  bottom: 8px;
+  left: 20px;
+  right: 20px;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.progress-container .el-progress {
+  flex: 1;
+}
+
+.progress-text {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 30px;
+  text-align: right;
 }
 
 .submit-loading {
@@ -656,12 +792,23 @@ onUnmounted(() => {
   
   .custom-loading-area {
     width: 250px;
-    height: 70px;
+    height: 80px;
   }
   
   .custom-loading-icon {
     width: 35px;
     height: 35px;
   }
+  
+  .progress-container {
+    left: 15px;
+    right: 15px;
+    gap: 8px;
+  }
+  
+  .progress-text {
+    font-size: 11px;
+    min-width: 28px;
+  }
 }
 </style>
diff --git a/coder-test-frontend/src/views/Result.vue b/coder-test-frontend/src/views/Result.vue
