feat: 埋点统计系统 — 数据库存储 + 管理后台查询
后端： - track_events 表存储埋点数据（事件类型、页面、数据、用户） - track 路由改为写入数据库 - logs 路由新增 /track/stats 和 /track/list 查询接口 前端： - 新增埋点统计页面（今日事件、7天趋势、热门事件） - 支持按事件类型筛选 - 管理后台添加「埋点统计」入口
This commit is contained in:
@@ -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 })
|
||||
}
|
||||
|
||||
@@ -139,6 +139,14 @@
|
||||
"navigationBarTitleText": "系统日志",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/track",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "埋点统计",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -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>
|
||||
|
||||
486
client/src/pages/admin/track.vue
Normal file
486
client/src/pages/admin/track.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user