46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="h">
|
|
<div class="title">统计</div>
|
|
<el-button @click="refresh">刷新</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-row :gutter="12">
|
|
<el-col :span="6"><el-statistic title="总单词" :value="stats.total_words ?? 0" /></el-col>
|
|
<el-col :span="6"><el-statistic title="已掌握" :value="stats.mastered_words ?? 0" /></el-col>
|
|
<el-col :span="6"><el-statistic title="待复习" :value="stats.need_review ?? 0" /></el-col>
|
|
<el-col :span="6"><el-statistic title="今日复习" :value="stats.today_reviewed ?? 0" /></el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { getStatistics } from '../services/api'
|
|
|
|
import type { Stats } from '../services/api'
|
|
|
|
const stats = ref<Stats>({
|
|
total_words: 0,
|
|
mastered_words: 0,
|
|
need_review: 0,
|
|
today_reviewed: 0
|
|
})
|
|
async function refresh() {
|
|
const res = await getStatistics()
|
|
stats.value = res.data ?? res
|
|
}
|
|
|
|
onMounted(() => refresh().catch(console.error))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrap{padding:24px;}
|
|
.h{display:flex; align-items:center; justify-content:space-between;}
|
|
.title{font-size:22px; font-weight:700;}
|
|
</style>
|