refactor(web): restructure Vue3 app layout

memora-web/src/views/Statistics.vue

@@ -0,0 +1,38 @@
+<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>
+import { onMounted, ref } from 'vue'
+import { getStatistics } from '../services/api'
+
+const stats = ref({})
+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>