优化登录与任务管理相关页面交互

src/components/TaskForm.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from 'vue';
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import request from "@/utils/request";
-import {ElMessage} from "element-plus";
-import {useRoute, useRouter} from "vue-router";
+import { ElMessage } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
 
 const router = useRouter();
+const route = useRoute();
 
-const route = useRoute()
 const taskId = route.params.taskId ? Number(route.params.taskId) : null;
-const buttonName = route.meta.buttonText;
+const buttonName = route.meta.buttonText as string;
 
-
-const taskName = ref('');
-const taskDescription = ref('');
-const materialURL = ref('');
+const taskName = ref("");
+const taskDescription = ref("");
+const materialURL = ref("");
 const priority = ref({
   urgency: 0,
   importance: 0,
@@ -23,33 +22,34 @@ const priority = ref({
 });
 
 const priorityOptions = [0, 1, 2, 3, 4, 5];
+const pageTitle = computed(() => (route.name === "update-task" ? "更新学习任务" : "创建学习任务"));
+const pageSubtitle = computed(() =>
+  route.name === "update-task"
+    ? "修改任务信息后保存，后续学习会话将使用最新内容"
+    : "填写任务基本信息与优先级维度，帮助系统更好排序"
+);
 
 const createTask = () => {
-  console.log('创建任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  request.post("/tasks", {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    materialURL: materialURL.value,
-    ...priority.value
-  }).then(result => {
-    if (result.code == 200) {
-      ElMessage.success("创建任务成功，任务id：" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务创建失败，错误原因：" + result.message)
-    }
-  })
+  request
+    .post("/tasks", {
+      taskName: taskName.value,
+      taskDescription: taskDescription.value,
+      materialURL: materialURL.value,
+      ...priority.value,
+    })
+    .then((result) => {
+      if (result.code === 200) {
+        ElMessage.success("创建任务成功");
+        router.back();
+      } else {
+        ElMessage.error("任务创建失败：" + result.message);
+      }
+    });
 };
 
 const loadTask = () => {
-  console.info("开始加载任务信息")
   if (taskId !== null) {
-    request.get(`/tasks/${taskId}`, {}).then(result => {
+    request.get(`/tasks/${taskId}`, {}).then((result) => {
       if (result.code === 200) {
         const data = result.data;
         taskName.value = data.taskName;
@@ -70,46 +70,41 @@ const loadTask = () => {
 };
 
 const updateTask = () => {
-  console.log('更新任务', {
-    taskName: taskName.value,
-    taskDescription: taskDescription.value,
-    priority: priority.value,
-  });
-
-  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("更新任务成功" + result.message)
-      router.back()
-    } else {
-      ElMessage.error("任务更新失败，错误原因：" + result.message)
-    }
-  })
+  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.back();
+      } else {
+        ElMessage.error("任务更新失败：" + result.message);
+      }
+    });
 };
 
 const cancelTask = () => {
-  ElMessage.success("已取消创建")
-  router.back()
+  ElMessage.info("已取消操作");
+  router.back();
 };
 
-
 const submitTask = () => {
   switch (route.name) {
-    case 'add-task':
+    case "add-task":
       createTask();
       break;
-    case 'update-task':
+    case "update-task":
       updateTask();
       break;
     default:
-      ElMessage.error('未知操作类型');
+      ElMessage.error("未知操作类型");
   }
-}
+};
 
 const screenWidth = ref(window.innerWidth);
 
@@ -117,123 +112,134 @@ const updateWidth = () => {
   screenWidth.value = window.innerWidth;
 };
 
-
 onMounted(() => {
-  window.addEventListener('resize', updateWidth)
-  if (route.meta.action === 'update' && taskId !== null) {
+  window.addEventListener("resize", updateWidth);
+  if (route.meta.action === "update" && taskId !== null) {
     loadTask();
   }
 });
-onUnmounted(() => window.removeEventListener('resize', updateWidth));
 
-const columnSpan = computed(() => {
-  return screenWidth.value <= 768 ? 20 : 8;
-});
+onUnmounted(() => window.removeEventListener("resize", updateWidth));
+
+const isMobile = computed(() => screenWidth.value <= 900);
 </script>
 
 <template>
-  <el-form label-width="100px">
-    <el-form-item label="任务名:">
-      <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
-    </el-form-item>
+  <section class="task-form-page">
+    <header class="surface-card form-header">
+      <h1 class="page-title">{{ pageTitle }}</h1>
+      <p class="page-subtitle">{{ pageSubtitle }}</p>
+    </header>
 
-    <el-form-item label="任务描述:">
-      <el-input
-          v-model="taskDescription"
-          type="textarea"
-          placeholder="请输入任务描述"
-          rows="6"
-      ></el-input>
-    </el-form-item>
+    <el-form label-position="top" class="surface-card form-shell">
+      <div class="group">
+        <h3>基础信息</h3>
+        <el-form-item label="任务名称">
+          <el-input v-model="taskName" placeholder="例如：Vue3 组件通信实践" />
+        </el-form-item>
+        <el-form-item label="任务描述">
+          <el-input v-model="taskDescription" type="textarea" :rows="5" placeholder="请输入任务描述" />
+        </el-form-item>
+        <el-form-item label="学习材料地址">
+          <el-input v-model="materialURL" placeholder="例如：https://..." />
+        </el-form-item>
+      </div>
 
-    <el-form-item label="材料地址:">
-      <el-input v-model="materialURL" placeholder="请输入学习材料URL"></el-input>
-    </el-form-item>
-
-    <el-form-item label="优先级:">
-      <el-row :gutter="10">
-        <el-col :span="columnSpan">
+      <div class="group">
+        <h3>优先级维度</h3>
+        <div class="priority-grid" :class="{ mobile: isMobile }">
           <el-form-item label="急迫性">
             <el-select v-model="priority.urgency">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="重要性">
             <el-select v-model="priority.importance">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'i' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="内容难度">
             <el-select v-model="priority.contentDifficulty">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'d' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="未来价值">
             <el-select v-model="priority.futureValue">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'f' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
 
-        <el-col :span="columnSpan">
           <el-form-item label="主观优先级">
             <el-select v-model="priority.subjectivePriority">
-              <el-option
-                  v-for="item in priorityOptions"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-              ></el-option>
+              <el-option v-for="item in priorityOptions" :key="'s' + item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form-item>
+        </div>
+      </div>
 
-    <el-form-item>
-      <el-button type="primary" @click="submitTask">{{ buttonName }}</el-button>
-      <el-button @click="cancelTask">取消</el-button>
-    </el-form-item>
-  </el-form>
+      <div class="action-row">
+        <el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
+        <el-button size="large" @click="cancelTask">取消</el-button>
+      </div>
+    </el-form>
+  </section>
 </template>
 
 <style scoped>
-.el-form-item {
-  margin-bottom: 15px;
+.task-form-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-header {
+  padding: 20px 22px;
+}
+
+.form-shell {
+  padding: 22px;
+}
+
+.group + .group {
+  margin-top: 12px;
+}
+
+.group h3 {
+  margin: 0 0 12px;
+  color: var(--green-900);
+}
+
+.priority-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 14px;
+}
+
+.priority-grid.mobile {
+  grid-template-columns: 1fr;
+}
+
+.action-row {
+  margin-top: 8px;
+  display: flex;
+  gap: 10px;
 }
 
 @media (max-width: 768px) {
-  .el-col {
-    width: 100% !important;
+  .form-shell {
+    padding: 16px;
+  }
+
+  .action-row {
+    flex-direction: column;
+  }
+
+  .action-row .el-button {
+    width: 100%;
+    margin: 0;
   }
 }
 </style>