功能(任务与复习): 增加材料地址与复习总览表格

src/components/Review.vue

@@ -1,11 +1,61 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
+import request from "@/utils/request";
 
+interface ReviewTask {
+  taskNum: string;
+  taskName: string;
+  reportCount: number | string;
+  fragmentCount: number | string;
+  effectiveTime: number | string;
+}
+
+const loading = ref(false);
+const tasks = ref<ReviewTask[]>([]);
+
+const loadTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((item: any) => ({
+      taskNum: item.taskNum,
+      taskName: item.taskName,
+      reportCount: item.reportCount ?? "-",
+      fragmentCount: item.fragmentCount ?? "-",
+      effectiveTime: item.effectiveTime ?? "-",
+    }));
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadTasks();
+});
 </script>
 
 <template>
-复习页面
+  <el-card>
+    <template #header>
+      <div class="header">
+        <span>复习任务总览</span>
+        <el-button type="primary" plain @click="loadTasks">刷新</el-button>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="tasks" stripe>
+      <el-table-column prop="taskName" label="任务名" min-width="180" />
+      <el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="140" />
+      <el-table-column prop="reportCount" label="学习报告数" min-width="120" />
+      <el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
+    </el-table>
+  </el-card>
 </template>
 
 <style scoped>
-
-</style>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>