fix: 任务表单补页面加载与提交防抖

src/components/TaskForm.vue

@@ -40,7 +40,11 @@ const applicationLoading = ref(false);
 const appUrlTitles = ref<Record<number, string>>({});
 const applicationDialogVisible = ref(false);
 const applicationSaving = ref(false);
+const deletingApplicationId = ref<number | null>(null);
 const editingApplicationId = ref<number | null>(null);
+const pageLoading = ref(false);
+const submitting = ref(false);
+const previewLoading = ref(false);
 const applicationForm = ref<{
   title: string;
   description: string;
@@ -135,6 +139,9 @@ const editApplication = (item: TaskApplication) => {
 };
 
 const removeApplication = async (item: TaskApplication) => {
+  if (deletingApplicationId.value !== null) return;
+  deletingApplicationId.value = item.id;
+  try {
     await deleteTaskApplication(item.id);
     ElMessage.success("应用场景已删除");
     if (editingApplicationId.value === item.id) {
@@ -143,6 +150,9 @@ const removeApplication = async (item: TaskApplication) => {
     if (taskNum.value) {
       await loadApplications(taskNum.value);
     }
+  } finally {
+    deletingApplicationId.value = null;
+  }
 };
 
 const convertMaterialUrls = async () => {
@@ -168,29 +178,33 @@ const convertMaterialUrls = async () => {
   materialUrl.value = result;
 };
 
-const createTask = () => {
+const createTask = async () => {
-  convertMaterialUrls().then(() => {
+  if (submitting.value) return;
-    request
+  submitting.value = true;
-    .post("/tasks", {
+  try {
+    await convertMaterialUrls();
+    const result = await request.post("/tasks", {
       taskName: taskName.value,
       taskDescription: taskDescription.value,
       materialUrl: materialUrl.value,
       ...priority.value,
-    })
+    });
-    .then((result) => {
     if (result.code === 200) {
       ElMessage.success("创建任务成功");
-        router.push({ name: "study" });
+      await router.push({ name: "study" });
     } else {
       ElMessage.error("任务创建失败：" + result.message);
     }
-    });
+  } finally {
-  });
+    submitting.value = false;
+  }
 };
 
-const loadTask = () => {
+const loadTask = async () => {
-  if (taskId !== null) {
+  if (taskId === null) return;
-    request.get(`/tasks/${taskId}`, {}).then((result) => {
+  pageLoading.value = true;
+  try {
+    const result = await request.get(`/tasks/${taskId}`, {});
     if (result.code === 200) {
       const data = result.data;
       taskNum.value = data.taskNum || "";
@@ -210,29 +224,34 @@ const loadTask = () => {
     } else {
       ElMessage.error(`任务加载失败：${result.message}`);
     }
-    });
+  } catch (error: any) {
+    ElMessage.error(error?.message || "任务加载失败，请重试");
+  } finally {
+    pageLoading.value = false;
   }
 };
 
-const updateTask = () => {
+const updateTask = async () => {
-  convertMaterialUrls().then(() => {
+  if (submitting.value) return;
-    request
+  submitting.value = true;
-    .put("/tasks/" + taskId, {
+  try {
+    await convertMaterialUrls();
+    const result = await request.put("/tasks/" + taskId, {
       id: taskId,
       taskName: taskName.value,
       taskDescription: taskDescription.value,
       materialUrl: materialUrl.value,
       ...priority.value,
-    })
+    });
-    .then((result) => {
     if (result.code === 200) {
       ElMessage.success("更新任务成功");
-        router.push({ name: "study" });
+      await router.push({ name: "study" });
     } else {
       ElMessage.error("任务更新失败：" + result.message);
     }
-    });
+  } finally {
-  });
+    submitting.value = false;
+  }
 };
 
 const cancelTask = () => {
@@ -240,13 +259,14 @@ const cancelTask = () => {
   router.push({ name: "study" });
 };
 
-const submitTask = () => {
+const submitTask = async () => {
+  if (submitting.value) return;
   switch (route.name) {
     case "add-task":
-      createTask();
+      await createTask();
       break;
     case "update-task":
-      updateTask();
+      await updateTask();
       break;
     default:
       ElMessage.error("该功能暂不可用，请刷新后重试");
@@ -275,9 +295,15 @@ const showPreview = ref(false);
 const materialPreview = ref("");
 
 async function previewMaterial() {
-  showPreview.value = true;
+  if (previewLoading.value) return;
+  previewLoading.value = true;
+  try {
     const raw = materialUrl.value || "";
-  if (!raw.trim()) { materialPreview.value = ""; return; }
+    if (!raw.trim()) {
+      materialPreview.value = "";
+      showPreview.value = true;
+      return;
+    }
     const titles: Record<string, string> = {};
     const bareUrls = new Set<string>();
     raw.replace(/https?:\/\/[^\s)\u3001\uFF09\u300D\u300B<>]+/g, (url) => {
@@ -287,6 +313,10 @@ async function previewMaterial() {
     const results = await Promise.all([...bareUrls].map(async (u) => ({ u, t: await getUrlTitle(u) })));
     results.forEach(({ u, t }) => { titles[u] = t; });
     materialPreview.value = renderMarkdown(raw, titles);
+    showPreview.value = true;
+  } finally {
+    previewLoading.value = false;
+  }
 }
 
 defineExpose({
@@ -306,7 +336,7 @@ defineExpose({
 </script>
 
 <template>
-  <section class="task-form-page">
+  <section class="task-form-page" v-loading="pageLoading">
     <el-form label-position="top" class="surface-card form-shell">
       <div class="group">
         <h3>基础信息</h3>
@@ -325,6 +355,7 @@ defineExpose({
                 text
                 size="small"
                 type="primary"
+                :loading="previewLoading"
                 @click="previewMaterial()"
               >预览</el-button>
               <el-button
@@ -402,7 +433,14 @@ defineExpose({
             </el-link>
             <div class="application-actions">
               <el-button text type="primary" size="small" @click="editApplication(item)">编辑</el-button>
-              <el-button text type="danger" size="small" @click="removeApplication(item)">删除</el-button>
+              <el-button
+                text
+                type="danger"
+                size="small"
+                :loading="deletingApplicationId === item.id"
+                :disabled="deletingApplicationId !== null"
+                @click="removeApplication(item)"
+              >删除</el-button>
             </div>
           </div>
         </div>
@@ -435,7 +473,7 @@ defineExpose({
       </el-dialog>
 
       <div class="action-row">
-        <el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
+        <el-button type="success" size="large" :loading="submitting" @click="submitTask">{{ buttonName }}</el-button>
         <el-button size="large" @click="cancelTask">取消</el-button>
       </div>
     </el-form>