feat: add stat service

frontend_nuxt/pages/about/stats.vue

@@ -1,7 +1,30 @@
 <template>
   <div class="site-stats-page">
     <ClientOnly>
-      <VChart v-if="option" :option="option" :autoresize="true" style="height: 400px" />
+      <VChart
+        v-if="dauOption"
+        :option="dauOption"
+        :autoresize="true"
+        style="height: 400px; margin-bottom: 30px"
+      />
+      <VChart
+        v-if="newUserOption"
+        :option="newUserOption"
+        :autoresize="true"
+        style="height: 400px; margin-bottom: 30px"
+      />
+      <VChart
+        v-if="postOption"
+        :option="postOption"
+        :autoresize="true"
+        style="height: 400px; margin-bottom: 30px"
+      />
+      <VChart
+        v-if="commentOption"
+        :option="commentOption"
+        :autoresize="true"
+        style="height: 400px"
+      />
     </ClientOnly>
   </div>
 </template>
@@ -23,20 +46,28 @@ import { getToken } from '../utils/auth'
 
 use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
 
-const option = ref(null)
+const dauOption = ref(null)
+const newUserOption = ref(null)
+const postOption = ref(null)
+const commentOption = ref(null)
 
 async function loadData() {
   const token = getToken()
-  const res = await fetch(`${API_BASE_URL}/api/stats/dau-range?days=30`, {
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  if (res.ok) {
-    const data = await res.json()
+  const headers = { Authorization: `Bearer ${token}` }
+
+  const [dauRes, newUserRes, postRes, commentRes] = await Promise.all([
+    fetch(`${API_BASE_URL}/api/stats/dau-range?days=30`, { headers }),
+    fetch(`${API_BASE_URL}/api/stats/new-users-range?days=30`, { headers }),
+    fetch(`${API_BASE_URL}/api/stats/posts-range?days=30`, { headers }),
+    fetch(`${API_BASE_URL}/api/stats/comments-range?days=30`, { headers }),
+  ])
+
+  function toOption(title, data) {
     data.sort((a, b) => new Date(a.date) - new Date(b.date))
     const dates = data.map((d) => d.date)
     const values = data.map((d) => d.value)
-    option.value = {
-      title: { text: '站点 DAU' },
+    return {
+      title: { text: title },
       tooltip: { trigger: 'axis' },
       xAxis: { type: 'category', data: dates },
       yAxis: { type: 'value' },
@@ -44,6 +75,23 @@ async function loadData() {
       series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }],
     }
   }
+
+  if (dauRes.ok) {
+    const data = await dauRes.json()
+    dauOption.value = toOption('站点 DAU', data)
+  }
+  if (newUserRes.ok) {
+    const data = await newUserRes.json()
+    newUserOption.value = toOption('每日新增用户', data)
+  }
+  if (postRes.ok) {
+    const data = await postRes.json()
+    postOption.value = toOption('每日发帖量', data)
+  }
+  if (commentRes.ok) {
+    const data = await commentRes.json()
+    commentOption.value = toOption('每日回贴量', data)
+  }
 }
 
 onMounted(loadData)