feat(前端): 添加删除操作加载状态提示

web/src/views/TokenDetailView.vue

@@ -18,13 +18,16 @@ const deleteSpecifyDedupVisible = ref(false)
 const inputSpecifyDedup = ref('')
 const deleteSpecifyRawVisible = ref(false)
 const inputSpecifyRaw = ref('')
+const isLoading = ref(false)
 
 const fetchInfo = async () => {
   if (!value.value) return
   loading.value = true
   try {
     const res = await axios.get('/api/token/info', {
-      params: {token: value.value}
+      params: {
+        token: value.value
+      }
     })
     if (res.status === 200) {
       result.value = res.data.result
@@ -58,10 +61,13 @@ const deleteDedup = () => {
     type: 'warning',
   }).then(async () => {
     await axios.delete('/api/token/info', {
-      params: {token: value.value, dedup_bf: "all"}
+      params: {
+        token: value.value,
+        dedup_bf: "all"
+      }
     })
     ElMessage({message: '删除成功', type: 'success'})
-    fetchInfo()
+    await fetchInfo()
   }).catch(() => {
   })
 }
@@ -73,42 +79,69 @@ const deleteRedis = () => {
     type: 'warning',
   }).then(async () => {
     await axios.delete('/api/token/info', {
-      params: {token: value.value, cache_list: "all"}
+      params: {
+        token: value.value,
+        cache_list: "all"
+      }
     })
     ElMessage({message: '删除成功', type: 'success'})
-    fetchInfo()
+    await fetchInfo()
   }).catch(() => {
   })
 }
 
 const deleteSpecifyDedup = async () => {
+  isLoading.value = true
+
   await axios.delete('/api/token/info', {
-    params: {token: value.value, dedup_bf: inputSpecifyDedup.value}
+    params: {
+      token: value.value,
+      dedup_bf: inputSpecifyDedup.value
+    }
   })
+
+  isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})
   deleteSpecifyDedupVisible.value = false
   inputSpecifyDedup.value = ''
-  fetchInfo()
+
+  await fetchInfo()
 }
 
 const deleteSpecifyRaw = async () => {
+  isLoading.value = true
+
   await axios.delete('/api/token/info', {
-    params: {token: value.value, cache_list: inputSpecifyRaw.value}
+    params: {
+      token: value.value,
+      cache_list: inputSpecifyRaw.value
+    }
   })
+
+  isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})
   deleteSpecifyRawVisible.value = false
   inputSpecifyRaw.value = ''
-  fetchInfo()
+
+  await fetchInfo()
 }
 
 const deleteSpecifyData = async () => {
+  isLoading.value = true
+
   await axios.delete('/api/token/info', {
-    params: {token: value.value, both_number: inputSpecifyData.value}
+    params: {
+      token: value.value,
+      both_number: inputSpecifyData.value
+    }
   })
+
+  isLoading.value = false
   ElMessage({message: '删除成功', type: 'success'})
   deleteSpecifyDataVisible.value = false
   inputSpecifyData.value = ''
-  fetchInfo()
+
+  await fetchInfo()
 }
 
 let timer: number
@@ -288,9 +321,10 @@ const statCards = [
       <!-- 删除确认对话框 -->
       <el-dialog v-model="deleteSpecifyDedupVisible" title="删除指定数量去重参考值" width="400">
         <el-input v-model="inputSpecifyDedup" placeholder="请输入删除数量" type="number"/>
+
         <template #footer>
           <el-button @click="deleteSpecifyDedupVisible = false">取消</el-button>
-          <el-button type="primary" @click="deleteSpecifyDedup">确定</el-button>
+          <el-button type="primary" @click="deleteSpecifyDedup" @loading="isLoading">确定</el-button>
         </template>
       </el-dialog>
 
@@ -298,7 +332,7 @@ const statCards = [
         <el-input v-model="inputSpecifyRaw" placeholder="请输入删除数量" type="number"/>
         <template #footer>
           <el-button @click="deleteSpecifyRawVisible = false">取消</el-button>
-          <el-button type="primary" @click="deleteSpecifyRaw">确定</el-button>
+          <el-button type="primary" @click="deleteSpecifyRaw" @loading="isLoading">确定</el-button>
         </template>
       </el-dialog>
 
@@ -306,7 +340,7 @@ const statCards = [
         <el-input v-model="inputSpecifyData" placeholder="请输入删除数量" type="number"/>
         <template #footer>
           <el-button @click="deleteSpecifyDataVisible = false">取消</el-button>
-          <el-button type="primary" @click="deleteSpecifyData">确定</el-button>
+          <el-button type="primary" @click="deleteSpecifyData" @loading="isLoading">确定</el-button>
         </template>
       </el-dialog>
     </div>