style: 复习总览统一样式并补全字段名

src/components/Review.vue

@@ -84,56 +84,24 @@ onMounted(() => {
       </article>
     </div>
 
-    <article class="surface-card table-card">
-      <el-table v-loading="loading" :data="tasks" stripe @row-click="openTaskReview">
-        <el-table-column prop="taskName" label="任务名" min-width="180" />
-        <el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="150">
-          <template #default="{ row }">
-            {{ formatEffectiveTime(row.effectiveTime) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="reportCount" label="学习报告数" min-width="120" />
-        <el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
-        <el-table-column label="操作" width="200">
-          <template #default="{ row }">
-            <el-button
-              text
-              type="success"
-              size="small"
-              :loading="openingTaskNum === row.taskNum"
-              @click.stop="openTaskReview(row)"
-            >
-              查看记录
-            </el-button>
-            <el-button
-              text
-              type="success"
-              size="small"
-              @click.stop="router.push(`/review/recall/${row.taskNum}`)"
-            >
-              回忆复习
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </article>
-
-    <div v-if="tasks.length > 0" v-loading="loading" class="mobile-task-list">
+    <div v-if="tasks.length > 0" v-loading="loading" class="task-list">
       <article
         v-for="row in tasks"
         :key="row.taskNum"
-        class="surface-card mobile-task-card"
+        class="surface-card task-card"
         @click="openTaskReview(row)"
       >
-        <div class="mobile-task-head">
+        <div class="task-head">
           <strong>{{ row.taskName }}</strong>
-          <span class="mobile-task-time">{{ formatEffectiveTime(row.effectiveTime) }}</span>
         </div>
-        <div class="mobile-task-stats">
-          <span>报告 {{ row.reportCount || 0 }}</span>
-          <span>残片 {{ row.fragmentCount || 0 }}</span>
+        <div class="task-meta">
+          <span>累计有效学习时长：{{ formatEffectiveTime(row.effectiveTime) }}</span>
         </div>
-        <div class="mobile-task-actions">
+        <div class="task-stats">
+          <span>学习报告数量：{{ row.reportCount || 0 }}</span>
+          <span>学习残片数量：{{ row.fragmentCount || 0 }}</span>
+        </div>
+        <div class="task-actions">
           <el-button
             text
             type="success"
@@ -154,11 +122,7 @@ onMounted(() => {
         </div>
       </article>
     </div>
-    <el-empty
-      v-if="!loading && tasks.length === 0"
-      class="mobile-empty"
-      description="暂无复习任务"
-    />
+    <el-empty v-if="!loading && tasks.length === 0" description="暂无复习任务" />
   </section>
 </template>
 
@@ -197,20 +161,13 @@ onMounted(() => {
   color: var(--green-900);
 }
 
-.table-card {
-  padding: 10px;
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.table-card :deep(.el-table__row) {
-  cursor: pointer;
-}
-
-.mobile-task-list,
-.mobile-empty {
-  display: none;
-}
-
-.mobile-task-card {
+.task-card {
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
@@ -218,34 +175,23 @@ onMounted(() => {
   cursor: pointer;
 }
 
-.mobile-task-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.mobile-task-head strong {
-  min-width: 0;
+.task-head strong {
+  display: block;
   color: var(--green-900);
   font-size: 15px;
   overflow-wrap: anywhere;
 }
 
-.mobile-task-time {
-  flex-shrink: 0;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.mobile-task-stats {
+.task-meta,
+.task-stats {
   display: flex;
-  gap: 14px;
+  flex-wrap: wrap;
+  gap: 8px 14px;
   color: var(--text-secondary);
   font-size: 13px;
 }
 
-.mobile-task-actions {
+.task-actions {
   display: flex;
   gap: 4px;
 }
@@ -254,19 +200,5 @@ onMounted(() => {
   .summary-grid {
     grid-template-columns: 1fr;
   }
-
-  .table-card {
-    display: none;
-  }
-
-  .mobile-task-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .mobile-empty {
-    display: block;
-  }
 }
 </style>