feat: 埋点统计系统 — 数据库存储 + 管理后台查询

后端： - track_events 表存储埋点数据（事件类型、页面、数据、用户） - track 路由改为写入数据库 - logs 路由新增 /track/stats 和 /track/list 查询接口前端： - 新增埋点统计页面（今日事件、7天趋势、热门事件） - 支持按事件类型筛选 - 管理后台添加「埋点统计」入口
2026-06-08 15:19:12 +08:00
parent 162f2dc89c
commit a1e3106899
8 changed files with 652 additions and 8 deletions
--- a/client/src/api/logs.ts
+++ b/client/src/api/logs.ts
@@ -24,6 +24,24 @@ export interface LogStats {
  }>
 }

+/** 埋点统计 */
+export interface TrackStats {
+  today: Array<{ event: string; count: number }>
+  daily: Array<{ date: string; count: number }>
+  events: Array<{ event: string; count: number }>
+}
+
+/** 埋点事件 */
+export interface TrackEvent {
+  id: number
+  event: string
+  page: string
+  data: any
+  user_id: number | null
+  nickname: string | null
+  created_at: string
+}
+
 /** 获取日志文件列表 */
 export function getLogFiles(): Promise<LogFileInfo[]> {
  return request({ url: '/logs/files' })
@@ -44,3 +62,17 @@ export function queryLogs(params: {
 }): Promise<{ lines: string[]; total: number; page: number; pageSize: number }> {
  return request({ url: `/logs/${params.date}`, data: { ...params, date: undefined } })
 }
+
+/** 获取埋点统计 */
+export function getTrackStats(): Promise<TrackStats> {
+  return request({ url: '/logs/track/stats' })
+}
+
+/** 查询埋点事件 */
+export function queryTrackEvents(params?: {
+  event?: string
+  page?: number
+  pageSize?: number
+}): Promise<{ list: TrackEvent[]; total: number; page: number; pageSize: number }> {
+  return request({ url: '/logs/track/list', data: params })
+}
--- a/client/src/pages.json
+++ b/client/src/pages.json
@@ -139,6 +139,14 @@
        "navigationBarTitleText": "系统日志",
        "enablePullDownRefresh": true
      }
+    },
+    {
+      "path": "pages/admin/track",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "埋点统计",
+        "enablePullDownRefresh": true
+      }
    }
  ],
  "globalStyle": {
--- a/client/src/pages/admin/index.vue
+++ b/client/src/pages/admin/index.vue
@@ -87,6 +87,11 @@
          <text class="entry-text">系统日志</text>
          <Icon name="chevronRight" :size="24" color="#BFB3B3" />
        </view>
+        <view class="entry-item" @tap="goTrack">
+          <Icon name="edit" :size="32" color="#FF8C69" />
+          <text class="entry-text">埋点统计</text>
+          <Icon name="chevronRight" :size="24" color="#BFB3B3" />
+        </view>
      </view>
    </view>
  </view>
@@ -153,6 +158,7 @@ function goNotificationManage() { uni.navigateTo({ url: '/pages/admin/notificati
 function goFeedbackManage() { uni.navigateTo({ url: '/pages/admin/feedback' }) }
 function goConfig() { uni.navigateTo({ url: '/pages/admin/config' }) }
 function goLogs() { uni.navigateTo({ url: '/pages/admin/logs' }) }
+function goTrack() { uni.navigateTo({ url: '/pages/admin/track' }) }
 </script>

 <style lang="scss" scoped>
--- a/client/src/pages/admin/track.vue
+++ b/client/src/pages/admin/track.vue
@@ -0,0 +1,486 @@
+<template>
+  <view class="page">
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <view class="nav-bar">
+        <view class="nav-back" @tap="goBack">
+          <Icon name="arrowLeft" :size="40" color="#2D1B1B" />
+        </view>
+        <text class="nav-title">埋点统计</text>
+        <view class="nav-placeholder"></view>
+      </view>
+    </view>
+
+    <!-- 今日事件分布 -->
+    <view class="stats-card" v-if="stats">
+      <text class="card-title">今日事件</text>
+      <view v-if="stats.today.length === 0" class="empty-hint">
+        <text class="empty-text">暂无数据</text>
+      </view>
+      <view v-else class="event-list">
+        <view v-for="item in stats.today" :key="item.event" class="event-item">
+          <text class="event-name">{{ item.event }}</text>
+          <text class="event-count">{{ item.count }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 最近7天趋势 -->
+    <view class="stats-card" v-if="stats && stats.daily.length > 0">
+      <text class="card-title">最近7天</text>
+      <view class="daily-list">
+        <view v-for="day in stats.daily" :key="day.date" class="daily-item">
+          <text class="daily-date">{{ day.date.slice(5) }}</text>
+          <view class="daily-bar">
+            <view class="bar-fill" :style="{ width: getBarWidth(day.count) + '%' }"></view>
+          </view>
+          <text class="daily-count">{{ day.count }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 热门事件 -->
+    <view class="stats-card" v-if="stats && stats.events.length > 0">
+      <text class="card-title">热门事件（7天）</text>
+      <view class="event-list">
+        <view v-for="item in stats.events" :key="item.event" class="event-item" @tap="filterByEvent(item.event)">
+          <text class="event-name">{{ item.event }}</text>
+          <view class="event-bar">
+            <view class="bar-fill" :style="{ width: getEventBarWidth(item.count) + '%' }"></view>
+          </view>
+          <text class="event-count">{{ item.count }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 事件列表 -->
+    <view class="query-section">
+      <view class="query-header">
+        <text class="section-title">事件记录</text>
+        <view class="filter-tabs">
+          <view class="filter-tab" :class="{ active: !filterEvent }" @tap="filterEvent = ''">全部</view>
+          <view class="filter-tab" :class="{ active: filterEvent === 'page_view' }" @tap="filterEvent = 'page_view'">页面</view>
+          <view class="filter-tab" :class="{ active: filterEvent === 'action' }" @tap="filterEvent = 'action'">操作</view>
+          <view class="filter-tab" :class="{ active: filterEvent === 'error' }" @tap="filterEvent = 'error'">错误</view>
+          <view class="filter-tab" :class="{ active: filterEvent === 'api_error' }" @tap="filterEvent = 'api_error'">API错误</view>
+        </view>
+      </view>
+
+      <scroll-view class="event-record-list" scroll-y @scrolltolower="loadMore">
+        <view v-for="item in eventList" :key="item.id" class="record-item">
+          <view class="record-header">
+            <view class="record-event" :class="getEventClass(item.event)">
+              <text class="record-event-text">{{ item.event }}</text>
+            </view>
+            <text class="record-time">{{ formatTime(item.created_at) }}</text>
+          </view>
+          <text class="record-page" v-if="item.page">{{ item.page }}</text>
+          <text class="record-user" v-if="item.nickname">{{ item.nickname }}</text>
+          <text class="record-data" v-if="item.data && Object.keys(item.data).length > 0">{{ JSON.stringify(item.data) }}</text>
+        </view>
+
+        <view v-if="loading" class="loading-box">
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <view v-if="!loading && eventList.length === 0" class="empty-box">
+          <text class="empty-text">暂无记录</text>
+        </view>
+
+        <view v-if="noMore && eventList.length > 0" class="no-more">
+          <text class="no-more-text">共 {{ total }} 条</text>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
+import { waitForReady } from '@/utils/app-ready'
+import { statusBarHeight } from '@/utils/system'
+import { getTrackStats, queryTrackEvents } from '@/api/logs'
+import Icon from '@/components/Icon/Icon.vue'
+import type { TrackStats, TrackEvent } from '@/api/logs'
+
+const stats = ref<TrackStats | null>(null)
+const filterEvent = ref('')
+const eventList = ref<TrackEvent[]>([])
+const loading = ref(false)
+const page = ref(1)
+const total = ref(0)
+
+const noMore = computed(() => eventList.value.length >= total.value && total.value > 0)
+
+onMounted(async () => {
+  await waitForReady()
+  await Promise.all([loadStats(), loadEvents()])
+})
+
+onShow(() => {
+  loadStats()
+})
+
+onPullDownRefresh(async () => {
+  await Promise.all([loadStats(), loadEvents()])
+  uni.stopPullDownRefresh()
+})
+
+async function loadStats() {
+  try {
+    stats.value = await getTrackStats()
+  } catch {}
+}
+
+async function loadEvents(append = false) {
+  if (loading.value) return
+  if (!append) {
+    page.value = 1
+    eventList.value = []
+  }
+  loading.value = true
+  try {
+    const data = await queryTrackEvents({
+      event: filterEvent.value || undefined,
+      page: page.value,
+      pageSize: 50
+    })
+    if (append) {
+      eventList.value = [...eventList.value, ...data.list]
+    } else {
+      eventList.value = data.list
+    }
+    total.value = data.total
+  } catch {
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+function loadMore() {
+  if (noMore.value || loading.value) return
+  page.value++
+  loadEvents(true)
+}
+
+function filterByEvent(event: string) {
+  filterEvent.value = event
+}
+
+function getBarWidth(count: number): number {
+  if (!stats.value || stats.value.daily.length === 0) return 0
+  const max = Math.max(...stats.value.daily.map(d => d.count), 1)
+  return (count / max) * 100
+}
+
+function getEventBarWidth(count: number): number {
+  if (!stats.value || stats.value.events.length === 0) return 0
+  const max = Math.max(...stats.value.events.map(e => e.count), 1)
+  return (count / max) * 100
+}
+
+function getEventClass(event: string): string {
+  if (event === 'error' || event === 'api_error') return 'error'
+  if (event === 'action') return 'action'
+  return 'page'
+}
+
+function formatTime(dateStr: string): string {
+  const d = new Date(dateStr)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return '刚刚'
+  if (minutes < 60) return `${minutes}分钟前`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}小时前`
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+
+// 筛选条件变化时重新加载
+watch(filterEvent, () => {
+  page.value = 1
+  loadEvents()
+})
+
+function goBack() {
+  uni.navigateBack()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
+.page {
+  min-height: 100vh;
+  background: $bg;
+}
+
+.header-fixed {
+  @include sticky-header;
+}
+
+.status-bar { @include status-bar; }
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  padding: $space-sm $space-xl $space-md;
+}
+
+.nav-back { @include nav-back; }
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: $font-2xl;
+  font-weight: 600;
+  color: $text;
+}
+
+.nav-placeholder { width: 88rpx; }
+
+.stats-card {
+  margin: $space-md $space-xl;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  padding: $space-lg;
+}
+
+.card-title {
+  font-size: $font-lg;
+  font-weight: 600;
+  color: $text;
+  display: block;
+  margin-bottom: $space-md;
+}
+
+.empty-hint {
+  padding: $space-lg 0;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: $font-md;
+  color: $text-muted;
+}
+
+.event-list {
+  display: flex;
+  flex-direction: column;
+  gap: $space-sm;
+}
+
+.event-item {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  padding: $space-xs 0;
+
+  &:active { opacity: 0.7; }
+}
+
+.event-name {
+  width: 160rpx;
+  font-size: $font-md;
+  color: $text;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.event-bar {
+  flex: 1;
+  height: 16rpx;
+  background: $border;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, $primary, #FFB89A);
+  border-radius: 8rpx;
+}
+
+.event-count {
+  width: 80rpx;
+  text-align: right;
+  font-family: 'Fredoka', sans-serif;
+  font-size: $font-md;
+  color: $text;
+}
+
+.daily-list {
+  display: flex;
+  flex-direction: column;
+  gap: $space-sm;
+}
+
+.daily-item {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  padding: $space-xs 0;
+}
+
+.daily-date {
+  width: 80rpx;
+  font-size: $font-md;
+  color: $text-sec;
+}
+
+.daily-bar {
+  flex: 1;
+  height: 16rpx;
+  background: $border;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.daily-count {
+  width: 80rpx;
+  text-align: right;
+  font-family: 'Fredoka', sans-serif;
+  font-size: $font-md;
+  color: $text;
+}
+
+.query-section {
+  margin: $space-md $space-xl;
+}
+
+.query-header {
+  display: flex;
+  flex-direction: column;
+  gap: $space-sm;
+  margin-bottom: $space-md;
+}
+
+.section-title {
+  font-size: $font-lg;
+  font-weight: 600;
+  color: $text;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: $space-xs;
+  flex-wrap: wrap;
+}
+
+.filter-tab {
+  padding: $space-xs $space-md;
+  border-radius: $radius-lg;
+  font-size: $font-md;
+  color: $text-sec;
+  background: $surface-warm;
+
+  &.active {
+    background: $primary;
+    color: $surface;
+    font-weight: 500;
+  }
+}
+
+.event-record-list {
+  height: calc(100vh - 800rpx);
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  padding: $space-sm;
+}
+
+.record-item {
+  padding: $space-md;
+  border-bottom: 1rpx solid $border;
+
+  &:last-child { border-bottom: none; }
+}
+
+.record-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $space-xs;
+}
+
+.record-event {
+  padding: 2rpx 12rpx;
+  border-radius: $radius-xs;
+
+  &.page { background: #E3F2FD; }
+  &.action { background: #E8F5E9; }
+  &.error { background: #FFEBEE; }
+}
+
+.record-event-text {
+  font-size: $font-xs;
+  font-weight: 500;
+
+  .page & { color: #1976D2; }
+  .action & { color: #388E3C; }
+  .error & { color: #D32F2F; }
+}
+
+.record-time {
+  font-size: $font-xs;
+  color: $text-muted;
+}
+
+.record-page {
+  font-size: $font-sm;
+  color: $text-sec;
+  display: block;
+  margin-bottom: $space-xs;
+}
+
+.record-user {
+  font-size: $font-sm;
+  color: $primary;
+  display: block;
+  margin-bottom: $space-xs;
+}
+
+.record-data {
+  font-size: $font-xs;
+  color: $text-muted;
+  font-family: 'Courier New', monospace;
+  word-break: break-all;
+  display: block;
+  padding: $space-xs;
+  background: $bg;
+  border-radius: $radius-sm;
+}
+
+.loading-box, .empty-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $space-xl 0;
+}
+
+.loading-text {
+  font-size: $font-md;
+  color: $text-muted;
+}
+
+.no-more {
+  text-align: center;
+  padding: $space-md 0;
+}
+
+.no-more-text {
+  font-size: $font-sm;
+  color: $text-muted;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar-fill { transition: none; }
+}
+</style>
--- a/server/src/db/init.ts
+++ b/server/src/db/init.ts
@@ -224,6 +224,25 @@ async function runMigrations(conn: mysql.Connection) {
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    `)
  }
+
+  // 埋点事件表
+  const hasTrackEvents = await tableExists(conn, 'track_events')
+  if (!hasTrackEvents) {
+    console.log('[DB] Migrating: creating track_events table')
+    await conn.query(`
+      CREATE TABLE IF NOT EXISTS track_events (
+        id BIGINT AUTO_INCREMENT PRIMARY KEY,
+        event VARCHAR(50) NOT NULL COMMENT '事件类型',
+        page VARCHAR(100) DEFAULT '' COMMENT '页面路径',
+        data JSON DEFAULT NULL COMMENT '事件数据',
+        user_id INT DEFAULT NULL COMMENT '用户ID',
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        INDEX idx_event (event),
+        INDEX idx_created (created_at),
+        INDEX idx_user (user_id)
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
+    `)
+  }
 }

 export async function initDatabase() {
--- a/server/src/db/schema.sql
+++ b/server/src/db/schema.sql
@@ -137,3 +137,15 @@ CREATE TABLE IF NOT EXISTS sys_config (
  config_value TEXT NOT NULL COMMENT '配置值',
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE IF NOT EXISTS track_events (
+  id BIGINT AUTO_INCREMENT PRIMARY KEY,
+  event VARCHAR(50) NOT NULL COMMENT '事件类型',
+  page VARCHAR(100) DEFAULT '' COMMENT '页面路径',
+  data JSON DEFAULT NULL COMMENT '事件数据',
+  user_id INT DEFAULT NULL COMMENT '用户ID',
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  INDEX idx_event (event),
+  INDEX idx_created (created_at),
+  INDEX idx_user (user_id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--- a/server/src/routes/logs.ts
+++ b/server/src/routes/logs.ts
@@ -1,6 +1,7 @@
 import { Router } from 'express'
 import fs from 'fs'
 import path from 'path'
+import pool from '../db/connection'
 import { requireAdmin } from '../middleware/requireAdmin'

 const router = Router()
@@ -143,4 +144,84 @@ router.get('/:date', requireAdmin, (req, res) => {
  }
 })

+/** 获取埋点统计 */
+router.get('/track/stats', requireAdmin, async (_req, res) => {
+  try {
+    // 今日统计
+    const [todayRows] = await pool.execute(
+      `SELECT event, COUNT(*) as count FROM track_events
+       WHERE DATE(created_at) = CURDATE()
+       GROUP BY event ORDER BY count DESC`
+    )
+
+    // 最近7天每日统计
+    const [dailyRows] = await pool.execute(
+      `SELECT DATE(created_at) as date, COUNT(*) as count FROM track_events
+       WHERE created_at >= DATE_SUB(CURDATE(), INTERVAL 7 DAY)
+       GROUP BY DATE(created_at) ORDER BY date DESC`
+    )
+
+    // 最近7天事件分布
+    const [eventRows] = await pool.execute(
+      `SELECT event, COUNT(*) as count FROM track_events
+       WHERE created_at >= DATE_SUB(CURDATE(), INTERVAL 7 DAY)
+       GROUP BY event ORDER BY count DESC LIMIT 10`
+    )
+
+    res.json({
+      code: 0,
+      data: {
+        today: todayRows,
+        daily: dailyRows,
+        events: eventRows
+      }
+    })
+  } catch (err) {
+    console.error('[Track] Stats error:', err)
+    res.status(500).json({ code: 50000, message: '获取埋点统计失败' })
+  }
+})
+
+/** 查询埋点事件 */
+router.get('/track/list', requireAdmin, async (req, res) => {
+  try {
+    const { event, page = '1', pageSize = '50' } = req.query
+    const pNum = Math.max(1, parseInt(page as string) || 1)
+    const pSize = Math.min(200, Math.max(1, parseInt(pageSize as string) || 50))
+    const offset = (pNum - 1) * pSize
+
+    let where = '1=1'
+    const params: any[] = []
+
+    if (event && typeof event === 'string') {
+      where += ' AND t.event = ?'
+      params.push(event)
+    }
+
+    const [countResult] = await pool.execute(
+      `SELECT COUNT(*) as total FROM track_events t WHERE ${where}`,
+      params
+    )
+    const total = (countResult as any[])[0].total
+
+    const [rows] = await pool.execute(
+      `SELECT t.*, u.nickname
+       FROM track_events t
+       LEFT JOIN users u ON t.user_id = u.id
+       WHERE ${where}
+       ORDER BY t.created_at DESC
+       LIMIT ? OFFSET ?`,
+      [...params, pSize, offset]
+    )
+
+    res.json({
+      code: 0,
+      data: { list: rows, total, page: pNum, pageSize: pSize }
+    })
+  } catch (err) {
+    console.error('[Track] List error:', err)
+    res.status(500).json({ code: 50000, message: '查询埋点失败' })
+  }
+})
+
 export default router
--- a/server/src/routes/track.ts
+++ b/server/src/routes/track.ts
@@ -1,24 +1,24 @@
 import { Router } from 'express'
-import { logInfo } from '../middleware/logger'
+import pool from '../db/connection'

 const router = Router()

 /** 接收前端埋点数据 */
-router.post('/', (req, res) => {
+router.post('/', async (req, res) => {
  try {
    const { events } = req.body
+    const userId = (req as any).userId || null

    if (!Array.isArray(events)) {
      return res.status(400).json({ code: 40001, message: '无效的埋点数据' })
    }

-    // 记录埋点事件
+    // 批量插入埋点事件
    for (const event of events) {
-      logInfo(`[Track] ${event.event}`, {
-        page: event.page,
-        data: event.data,
-        userId: (req as any).userId || null
-      })
+      await pool.execute(
+        'INSERT INTO track_events (event, page, data, user_id) VALUES (?, ?, ?, ?)',
+        [event.event, event.page || '', JSON.stringify(event.data || {}), userId]
+      )
    }

    res.json({ code: 0 })