lpt-fe/src/components/Review.vue

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  getReviewTaskStats,
  getTaskReview,
  type ReviewFeedItem,
  type ReviewTaskStats,
} from "@/api/review";

const router = useRouter();

const loading = ref(false);
const openingTaskNum = ref("");
const tasks = ref<ReviewTaskStats[]>([]);

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 formatEffectiveTime = (seconds: number | string): string => {
  const s = Number(seconds);
  if (!s || s <= 0) return "0分钟";
  const hours = Math.floor(s / 3600);
  const minutes = Math.floor((s % 3600) / 60);
  if (hours > 0) return `${hours}小时${minutes}分钟`;
  return `${minutes}分钟`;
};

const loadTasks = async () => {
  loading.value = true;
  try {
    const res = await getReviewTaskStats();
    tasks.value = res?.data || [];
  } finally {
    loading.value = false;
  }
};

const openTaskReview = async (row: ReviewTaskStats) => {
  if (!row.taskNum) return;
  openingTaskNum.value = row.taskNum;
  try {
    const res = await getTaskReview(row.taskNum);
    const items: ReviewFeedItem[] = res?.data || [];
    const first = items[0];
    if (!first) {
      ElMessage.info("该任务暂无可复习内容");
      return;
    }
    router.push(`/review/detail/${first.sourceType.toLowerCase()}/${first.id}`);
  } finally {
    openingTaskNum.value = "";
  }
};

onMounted(() => {
  loadTasks();
});
</script>

<template>
  <section class="review-page">
    <div class="table-toolbar">
      <span class="toolbar-placeholder"></span>
      <el-button type="success" plain size="small" :loading="loading" @click="loadTasks">刷新</el-button>
    </div>

    <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 @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"
              :loading="openingTaskNum === row.taskNum"
              @click.stop="openTaskReview(row)"
            >
              查看记录
            </el-button>
            <el-button
              text
              type="primary"
              @click.stop="router.push(`/review/recall/${row.taskNum}`)"
            >
              回忆复习
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </article>
  </section>
</template>

<style scoped>
.review-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.table-toolbar {
  display: flex;
  justify-content: flex-end;
}

.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;
}

.table-card :deep(.el-table__row) {
  cursor: pointer;
}

@media (max-width: 900px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>