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

src/components/Review.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import request from "@/utils/request";
 
 interface ReviewTask {
@@ -13,6 +13,12 @@ interface ReviewTask {
 const loading = ref(false);
 const tasks = ref<ReviewTask[]>([]);
 
+const summary = computed(() => ({
+  totalTasks: tasks.value.length,
+  totalReports: tasks.value.reduce((acc, item) => acc + Number(item.reportCount || 0), 0),
+  totalFragments: tasks.value.reduce((acc, item) => acc + Number(item.fragmentCount || 0), 0),
+}));
+
 const loadTasks = async () => {
   loading.value = true;
   try {
@@ -35,27 +41,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card>
-    <template #header>
-      <div class="header">
-        <span>复习任务总览</span>
-        <el-button type="primary" plain @click="loadTasks">刷新</el-button>
+  <section class="review-page">
+    <header class="surface-card review-head">
+      <div>
+        <h1 class="page-title">复习总览</h1>
+        <p class="page-subtitle">根据学习报告与残片数量，快速识别需要回顾的任务</p>
       </div>
-    </template>
+      <el-button type="success" plain :loading="loading" @click="loadTasks">刷新</el-button>
+    </header>
 
-    <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>
+    <div class="summary-grid">
+      <article class="surface-card metric-card">
+        <span>任务数</span>
+        <strong>{{ summary.totalTasks }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习报告总数</span>
+        <strong>{{ summary.totalReports }}</strong>
+      </article>
+      <article class="surface-card metric-card">
+        <span>学习残片总数</span>
+        <strong>{{ summary.totalFragments }}</strong>
+      </article>
+    </div>
+
+    <article class="surface-card table-card">
+      <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="150" />
+        <el-table-column prop="reportCount" label="学习报告数" min-width="120" />
+        <el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
+      </el-table>
+    </article>
+  </section>
 </template>
 
 <style scoped>
-.header {
+.review-page {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.review-head {
+  padding: 20px 22px;
+  display: flex;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 12px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  padding: 16px 18px;
+}
+
+.metric-card span {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.metric-card strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 30px;
+  line-height: 1;
+  color: var(--green-900);
+}
+
+.table-card {
+  padding: 10px;
+}
+
+@media (max-width: 900px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .review-head {
+    flex-direction: column;
+  }
 }
 </style>