feat 学习任务选择页面-页面绘制与部分数据展示

src/App.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/Welcome.vue'
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
 </script>
@@ -38,15 +36,8 @@ import MyFooter from "@/components/MyFooter.vue";
   background-size: cover;
 }
 
-template {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-}
-
 .common-layout {
-  min-width: 100vw; /* 设置最大宽度 */
+  min-width: 100vw;
   min-height: 100vh;
 }
 

src/components/Study.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import request from "@/utils/request";
+import { ref, reactive, onMounted } from 'vue';
+import request from '@/utils/request';
 
-const tasks = reactive([
-  { title: 'Axure学习', description: '视频链接：https://www.bilibili.com/video/BV1YX4117d67?p=5&vd_source=24feb80ad83d8f763cb11b36af13bbe6', progress: '10%', priority: 2 },
-  { title: 'Linux基础相关', description: '任务列出，任务需要按照流程和优先级排序', progress: '进行中', priority: 3 },
-  { title: 'Git使用技巧', description: '暂无描述', progress: '未开始', priority: 1 },
-]);
+const tasks = reactive([] as any[]);
 
-/*const tasks = request.get("/tasks", {'pageSize':10,"pageNum":1}).then((res) => {
-  return res.data;
-});*/
+const selectedTask = ref<any>(null);
 
-const selectedTask = ref(tasks[0]);
+const fetchTasks = () => {
+  request.get('/tasks', { pageSize: 100, pageNum: 1 })
+      .then((res) => {
+        /* 此处暂时不开发分页模式，数据量应该不会很大，但仍然保留了分页形式的接口 */
+        tasks.splice(0, tasks.length, ...res.data.records.map((record: any) => ({
+          title: record.taskName,
+          description: record.taskDescription || '',
+          progress: record.lastLearningStatus || '未开始',
+          priority: Math.round(record.taskPriority),
+        })));
+        selectedTask.value = tasks[0] || null;
+      });
+};
 
 const startTask = () => {
   console.log('任务已开始：', selectedTask.value);
@@ -33,6 +39,10 @@ const removeTask = () => {
 const selectTask = (task: any) => {
   selectedTask.value = task;
 };
+
+onMounted(() => {
+  fetchTasks();
+});
 </script>
 
 <template>
@@ -41,7 +51,7 @@ const selectTask = (task: any) => {
       <el-card class="task-card" :body-style="{ padding: '0' }">
         <div class="task-header">任务列表</div>
         <el-scrollbar height="300px">
-          <el-menu class="task-menu" @select="(key)  => selectTask(tasks[key])">
+          <el-menu class="task-menu" @select="(key) => selectTask(tasks[key])">
             <el-menu-item
                 v-for="(task, index) in tasks"
                 :key="index"
@@ -55,51 +65,51 @@ const selectTask = (task: any) => {
       </el-card>
     </el-col>
 
-    <el-col :span="18">
+    <el-col :span="13">
       <el-card class="task-card">
-        <h3>任务描述</h3>
-        <el-input type="textarea" v-model="selectedTask.description" rows="4" />
+        <div v-if="selectedTask">
+          <h3>任务描述</h3>
+          <el-input type="textarea" v-model="selectedTask.description" rows="4" />
 
-        <h3 class="section-title">任务优先级</h3>
-        <el-radio-group v-model="selectedTask.priority">
-          <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
-        </el-radio-group>
+          <h3 class="section-title">任务优先级</h3>
+          <el-radio-group v-model="selectedTask.priority">
+            <el-radio-button v-for="i in 6" :label="i - 1" :key="i">{{ i - 1 }}</el-radio-button>
+          </el-radio-group>
 
-        <h3 class="section-title">上次该任务学习情况</h3>
-        <el-descriptions border column="1">
-          <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
-          <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
-          <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
-          <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
-        </el-descriptions>
+          <h3 class="section-title">上次该任务学习情况</h3>
+          <el-descriptions border column="1">
+            <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
+            <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
+            <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
+            <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
+          </el-descriptions>
 
-        <el-space class="action-buttons">
-          <el-button type="primary" @click="startTask">开始任务</el-button>
-          <el-button @click="addTask">添加任务</el-button>
-          <el-button type="danger" @click="removeTask">删除任务</el-button>
-        </el-space>
+
+        </div>
+        <div v-else>
+          <p>请选择任务或等待任务加载完成。</p>
+        </div>
       </el-card>
     </el-col>
+    <el-col :span="5">
+      <el-space class="action-buttons">
+        <el-button type="primary" @click="startTask">开始任务</el-button>
+        <el-button @click="addTask">添加任务</el-button>
+        <el-button type="danger" @click="removeTask">删除任务</el-button>
+        <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
+      </el-space>
+    </el-col>
   </el-row>
 </template>
 
 <style scoped>
-
-html, body {
-  overflow-x: hidden;
-}
-
 .task-layout {
   width: 100%;
-  max-width: 100vw;
   overflow-x: hidden;
-  box-sizing: border-box;
 }
-
 .task-card {
   padding: 0;
 }
-
 .task-header {
   padding: 10px;
   font-size: 16px;
@@ -107,23 +117,25 @@ html, body {
   background-color: #f5f7fa;
   border-bottom: 1px solid #ebeef5;
 }
-
 .task-menu {
   width: 100%;
   padding: 0;
 }
-
 .task-item {
   padding: 10px 12px;
   white-space: normal;
   word-break: break-word;
 }
-
 .section-title {
   margin-top: 20px;
 }
-
 .action-buttons {
+  flex-direction: column;
   margin-top: 20px;
 }
+.action-buttons .el-button {
+  width: 8vw;
+  min-width: 70px;
+  margin-top: 5px;
+}
 </style>