feat(student): 添加学习分析功能组件及相关交互

- 在班级页面列表操作栏增加“学情分析”按钮,点击弹出学情分析对话框
- 新增StudyAnalysis组件,封装学习分析生成与展示逻辑
- 学生详情页替换原有学习分析区域,统一使用StudyAnalysis组件
- 移除学生页原有学习分析相关状态管理和接口调用,简化代码
- 通过定时器模拟加载进度条,提升生成学习分析时的用户体验
This commit is contained in:
lbw
2026-01-04 10:17:59 +08:00
parent e468be74b7
commit 1184ea7895
3 changed files with 95 additions and 66 deletions

View File

@@ -49,26 +49,7 @@
<div class="text-md font-semibold mb-3">词汇掌握热力图</div>
<WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-3">
<div class="text-md font-semibold">学习分析</div>
<el-button type="primary" size="small" :loading="analyzeLoading" @click="fetchStudyAnalyze">
生成学习分析
</el-button>
</div>
<template v-if="analyzeLoading">
<div class="space-y-2">
<el-progress :percentage="analyzeProgress" :stroke-width="10" />
<div class="text-sm text-gray-500 dark:text-gray-400">正在生成学习分析请稍候</div>
</div>
</template>
<template v-else-if="analysisHtml">
<div class="leading-7 text-gray-700 dark:text-gray-200" v-html="analysisHtml"></div>
</template>
<template v-else>
<el-empty description="点击右上按钮生成学习分析" />
</template>
</div>
<StudyAnalysis :student-id="route.params.id" />
</div>
</el-main>
@@ -80,31 +61,19 @@
import Header from '@/layouts/components/Header.vue'
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getStudentDetail, getStudentStudyAnalyze } from '@/api/student'
import { getStudentDetail } from '@/api/student'
import { getStudentExamHistory } from '@/api/exam'
import { getWordStudentDetail } from '@/api/words'
import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
import PlanHistoryChart from '@/layouts/components/student/PlanHistoryChart.vue'
import WordMasteryHeatmap from '@/layouts/components/student/WordMasteryHeatmap.vue'
import MarkdownIt from 'markdown-it'
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
const loading = ref(false)
const detail = ref(null)
const route = useRoute()
const history = ref([])
const analyzeLoading = ref(false)
const analyzeProgress = ref(0)
let analyzeTimer = null
const analysisText = ref('')
const wordStat = ref(null)
const md = new MarkdownIt({
html: false,
linkify: true,
breaks: true
})
const analysisHtml = computed(() => {
return analysisText.value ? md.render(analysisText.value) : ''
})
async function fetchDetail() {
const id = route.params.id
@@ -129,37 +98,6 @@ async function fetchExamHistory() {
}) : []
}
async function fetchStudyAnalyze() {
const id = route.params.id
if (!id) return
analyzeLoading.value = true
analyzeProgress.value = 0
if (analyzeTimer) {
clearInterval(analyzeTimer)
analyzeTimer = null
}
analyzeTimer = setInterval(() => {
const inc = Math.floor(Math.random() * 8) + 3
const next = analyzeProgress.value + inc
analyzeProgress.value = next >= 90 ? 90 : next
}, 300)
try {
const res = await getStudentStudyAnalyze({
studentId: Number(id)
})
const d = res.data
const raw = typeof d?.data === 'string' ? d.data : ''
analysisText.value = raw.replace(/\\n/g, '\n')
} finally {
analyzeProgress.value = 100
if (analyzeTimer) {
clearInterval(analyzeTimer)
analyzeTimer = null
}
analyzeLoading.value = false
}
}
async function fetchWordStat() {
const id = route.params.id
if (!id) return