feat(exam): 添加学生考试历史结果查看功能

- 新增接口获取指定学生的历史考试结果列表
- 数据库层新增根据学生ID查询历史考试记录的查询方法
- 服务层新增获取学生历史考试结果列表的实现
- 前端api新增调用学生考试历史接口的方法
- 学生详情页增加考试历史记录图表展示板块
- 新增考试历史折线图组件，展示正确词数和错误词数的时间变化
- 使用echarts实现折线图并支持点击显示详情
- 更新项目依赖，新增echarts库用于图表展示

enlish-vue/src/api/exam.js

@@ -55,6 +55,12 @@ export function generateExamWords(data) {
     });
 }
 
+export function getStudentExamHistory(studentId) {
+    return axios.post('/exam/words/student/history', {
+        studentId: studentId
+    })
+}
+
 const resolveBlob = (res, fileName) => {
     // 创建 Blob 对象，可以指定 type，也可以让浏览器自动推断
     const blob = new Blob([res], { type: 'application/octet-stream' });

enlish-vue/src/layouts/components/student/ExamHistoryChart.vue

@@ -0,0 +1,155 @@
+<template>
+    <div style="width: 100%; height: 260px;">
+        <div ref="elRef" style="width: 100%; height: 100%;"></div>
+    </div>
+    <ExamWordsDetailCard v-model="detailVisible" :id="detailId" />
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted, onUnmounted, watch } from 'vue'
+import ExamWordsDetailCard from '@/layouts/components/ExamWordsDetailCard.vue'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const elRef = ref(null)
+let chart = null
+let echartsLib = null
+const detailVisible = ref(false)
+const detailId = ref(null)
+
+function sortData(arr) {
+    return Array.isArray(arr)
+        ? arr.slice().sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
+        : []
+}
+
+function toSource(arr) {
+    return sortData(arr).map(it => ({
+        startDate: it.startDate,
+        correctWordCount: Number(it.correctWordCount) || 0,
+        wrongWordCount: Number(it.wrongWordCount) || 0,
+        examWordsId: it.examWordsId ?? null,
+        id: it.id ?? null
+    }))
+}
+
+function buildOption(source) {
+    return {
+        dataset: [
+            {
+                id: 'dataset_history',
+                source: source
+            }
+        ],
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            top: 8
+        },
+        xAxis: {
+            type: 'category',
+            nameLocation: 'middle'
+        },
+        yAxis: {
+            name: 'Word Count',
+            min: 0
+        },
+        series: [
+            {
+                type: 'line',
+                datasetId: 'dataset_history',
+                showSymbol: false,
+                name: '正确词数',
+                encode: {
+                    x: 'startDate',
+                    y: 'correctWordCount',
+                    itemName: 'startDate',
+                    tooltip: ['correctWordCount']
+                }
+            },
+            {
+                type: 'line',
+                datasetId: 'dataset_history',
+                showSymbol: false,
+                name: '错误词数',
+                encode: {
+                    x: 'startDate',
+                    y: 'wrongWordCount',
+                    itemName: 'startDate',
+                    tooltip: ['wrongWordCount']
+                }
+            }
+        ]
+    }
+}
+
+function resize() {
+    if (chart) chart.resize()
+}
+
+async function ensureEcharts() {
+    try {
+        const mod = await import('echarts')
+        echartsLib = mod
+    } catch (e) {
+        if (window.echarts) {
+            echartsLib = window.echarts
+        } else {
+            await new Promise(resolve => {
+                const s = document.createElement('script')
+                s.src = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'
+                s.onload = resolve
+                document.head.appendChild(s)
+            })
+            echartsLib = window.echarts
+        }
+    }
+}
+
+async function render() {
+    if (!elRef.value) return
+    await ensureEcharts()
+    if (!echartsLib) return
+    if (!chart) {
+        chart = echartsLib.init(elRef.value)
+        chart.on('click', handlePointClick)
+        window.addEventListener('resize', resize)
+    }
+    const source = toSource(props.data)
+    const option = buildOption(source)
+    chart.setOption(option)
+}
+
+function handlePointClick(params) {
+    const row = params?.data
+    console.log(row)
+    const id = row?.id ?? null
+    if (id !== null && id !== undefined) {
+        detailId.value = id
+        detailVisible.value = true
+    }
+}
+
+onMounted(() => {
+    render()
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', resize)
+    if (chart) {
+        chart.off('click', handlePointClick)
+        chart.dispose()
+        chart = null
+    }
+})
+
+watch(() => props.data, () => {
+    render()
+}, { deep: true })
+</script>

enlish-vue/src/pages/student.vue

@@ -6,19 +6,27 @@
             </el-header>
 
             <el-main class="p-4">
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="loading">
-                    <div class="text-lg font-semibold mb-4">学生详情</div>
-                    <template v-if="detail">
-                        <el-descriptions :column="1" border>
-                            <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
-                            <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
-                            <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
-                            <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
-                        </el-descriptions>
-                    </template>
-                    <template v-else>
-                        <el-empty description="暂无数据" />
-                    </template>
+                <div class="grid grid-cols-1 lg:grid-cols-1 gap-6"
+                    v-loading="loading">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-lg font-semibold mb-4">学生详情</div>
+                        <template v-if="detail">
+                            <el-descriptions :column="1" border>
+                                <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
+                                <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
+                                <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
+                                <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
+                            </el-descriptions>
+                        </template>
+                        <template v-else>
+                            <el-empty description="请从班级页跳转" />
+                        </template>
+                    </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                        <div class="text-md font-semibold mb-3">学生考试记录</div>
+                        <ExamHistoryChart :data="history" />
+                    </div>
                 </div>
             </el-main>
 
@@ -31,10 +39,13 @@ import Header from '@/layouts/components/Header.vue'
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { getStudentDetail } from '@/api/student'
+import { getStudentExamHistory } from '@/api/exam'
+import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
 
 const loading = ref(false)
 const detail = ref(null)
 const route = useRoute()
+const history = ref([])
 
 async function fetchDetail() {
     const id = route.params.id
@@ -49,7 +60,18 @@ async function fetchDetail() {
     }
 }
 
+async function fetchExamHistory() {
+    const id = route.params.id
+    if (!id) return
+    const res = await getStudentExamHistory(id)
+    const d = res.data
+    history.value = Array.isArray(d?.data) ? d.data.slice().sort((a, b) => {
+        return new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+    }) : []
+}
+
 onMounted(() => {
     fetchDetail()
+    fetchExamHistory()
 })
 </script>