Compare commits
2 Commits
860c599b7c
...
a1e3106899
| Author | SHA1 | Date | |
|---|---|---|---|
| a1e3106899 | |||
| 162f2dc89c |
@@ -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[]> {
|
export function getLogFiles(): Promise<LogFileInfo[]> {
|
||||||
return request({ url: '/logs/files' })
|
return request({ url: '/logs/files' })
|
||||||
@@ -44,3 +62,17 @@ export function queryLogs(params: {
|
|||||||
}): Promise<{ lines: string[]; total: number; page: number; pageSize: number }> {
|
}): Promise<{ lines: string[]; total: number; page: number; pageSize: number }> {
|
||||||
return request({ url: `/logs/${params.date}`, data: { ...params, date: undefined } })
|
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": "系统日志",
|
"navigationBarTitleText": "系统日志",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/admin/track",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "埋点统计",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -87,6 +87,11 @@
|
|||||||
<text class="entry-text">系统日志</text>
|
<text class="entry-text">系统日志</text>
|
||||||
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
|
<Icon name="chevronRight" :size="24" color="#BFB3B3" />
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -153,6 +158,7 @@ function goNotificationManage() { uni.navigateTo({ url: '/pages/admin/notificati
|
|||||||
function goFeedbackManage() { uni.navigateTo({ url: '/pages/admin/feedback' }) }
|
function goFeedbackManage() { uni.navigateTo({ url: '/pages/admin/feedback' }) }
|
||||||
function goConfig() { uni.navigateTo({ url: '/pages/admin/config' }) }
|
function goConfig() { uni.navigateTo({ url: '/pages/admin/config' }) }
|
||||||
function goLogs() { uni.navigateTo({ url: '/pages/admin/logs' }) }
|
function goLogs() { uni.navigateTo({ url: '/pages/admin/logs' }) }
|
||||||
|
function goTrack() { uni.navigateTo({ url: '/pages/admin/track' }) }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -109,6 +109,7 @@ const logLines = ref<string[]>([])
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const page = ref(1)
|
const page = ref(1)
|
||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
|
const showDatePicker = ref(false)
|
||||||
|
|
||||||
const noMore = computed(() => logLines.value.length >= total.value && total.value > 0)
|
const noMore = computed(() => logLines.value.length >= total.value && total.value > 0)
|
||||||
|
|
||||||
@@ -173,6 +174,7 @@ function loadMore() {
|
|||||||
|
|
||||||
function selectDate(date: string) {
|
function selectDate(date: string) {
|
||||||
selectedDate.value = date
|
selectedDate.value = date
|
||||||
|
page.value = 1
|
||||||
loadLogs()
|
loadLogs()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,7 +191,10 @@ function getLineClass(line: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 筛选条件变化时重新加载
|
// 筛选条件变化时重新加载
|
||||||
watch([filterLevel], () => loadLogs())
|
watch([filterLevel, selectedDate], () => {
|
||||||
|
page.value = 1
|
||||||
|
loadLogs()
|
||||||
|
})
|
||||||
|
|
||||||
function goBack() {
|
function goBack() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
|
|||||||
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>
|
||||||
@@ -224,6 +224,25 @@ async function runMigrations(conn: mysql.Connection) {
|
|||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
|
) 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() {
|
export async function initDatabase() {
|
||||||
|
|||||||
@@ -137,3 +137,15 @@ CREATE TABLE IF NOT EXISTS sys_config (
|
|||||||
config_value TEXT NOT NULL COMMENT '配置值',
|
config_value TEXT NOT NULL COMMENT '配置值',
|
||||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
) 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;
|
||||||
|
|||||||
@@ -23,9 +23,11 @@ function formatTime(date: Date): string {
|
|||||||
function writeLog(level: string, message: string, meta?: Record<string, any>) {
|
function writeLog(level: string, message: string, meta?: Record<string, any>) {
|
||||||
const dateStr = getDateStr()
|
const dateStr = getDateStr()
|
||||||
const logFile = path.join(LOG_DIR, `${dateStr}.log`)
|
const logFile = path.join(LOG_DIR, `${dateStr}.log`)
|
||||||
const time = formatTime(new Date())
|
const now = new Date()
|
||||||
|
const time = formatTime(now)
|
||||||
|
const timestamp = now.toISOString() // 记录 UTC 时间戳,前端可按用户时区显示
|
||||||
const metaStr = meta ? ` ${JSON.stringify(meta)}` : ''
|
const metaStr = meta ? ` ${JSON.stringify(meta)}` : ''
|
||||||
const line = `[${time}] ${level} ${message}${metaStr}\n`
|
const line = `[${time}] [${timestamp}] ${level} ${message}${metaStr}\n`
|
||||||
|
|
||||||
fs.appendFile(logFile, line, (err) => {
|
fs.appendFile(logFile, line, (err) => {
|
||||||
if (err) console.error('[Logger] Write error:', err)
|
if (err) console.error('[Logger] Write error:', err)
|
||||||
@@ -37,13 +39,12 @@ export function requestLogger(req: Request, res: Response, next: NextFunction) {
|
|||||||
const startTime = Date.now()
|
const startTime = Date.now()
|
||||||
const { method, url, ip } = req
|
const { method, url, ip } = req
|
||||||
|
|
||||||
// 提取用户 ID(如果有 auth 中间件设置)
|
// 响应结束时记录日志(此时 authMiddleware 已执行,userId 可用)
|
||||||
const userId = (req as any).userId
|
|
||||||
|
|
||||||
// 响应结束时记录日志
|
|
||||||
res.on('finish', () => {
|
res.on('finish', () => {
|
||||||
const duration = Date.now() - startTime
|
const duration = Date.now() - startTime
|
||||||
const { statusCode } = res
|
const { statusCode } = res
|
||||||
|
// 延迟获取 userId,确保 authMiddleware 已执行
|
||||||
|
const userId = (req as any).userId
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
method,
|
method,
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express'
|
||||||
import fs from 'fs'
|
import fs from 'fs'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
|
import pool from '../db/connection'
|
||||||
import { requireAdmin } from '../middleware/requireAdmin'
|
import { requireAdmin } from '../middleware/requireAdmin'
|
||||||
|
|
||||||
const router = Router()
|
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
|
export default router
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
import { Router } from 'express'
|
import { Router } from 'express'
|
||||||
import { logInfo } from '../middleware/logger'
|
import pool from '../db/connection'
|
||||||
|
|
||||||
const router = Router()
|
const router = Router()
|
||||||
|
|
||||||
/** 接收前端埋点数据 */
|
/** 接收前端埋点数据 */
|
||||||
router.post('/', (req, res) => {
|
router.post('/', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const { events } = req.body
|
const { events } = req.body
|
||||||
|
const userId = (req as any).userId || null
|
||||||
|
|
||||||
if (!Array.isArray(events)) {
|
if (!Array.isArray(events)) {
|
||||||
return res.status(400).json({ code: 40001, message: '无效的埋点数据' })
|
return res.status(400).json({ code: 40001, message: '无效的埋点数据' })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 记录埋点事件
|
// 批量插入埋点事件
|
||||||
for (const event of events) {
|
for (const event of events) {
|
||||||
logInfo(`[Track] ${event.event}`, {
|
await pool.execute(
|
||||||
page: event.page,
|
'INSERT INTO track_events (event, page, data, user_id) VALUES (?, ?, ?, ?)',
|
||||||
data: event.data,
|
[event.event, event.page || '', JSON.stringify(event.data || {}), userId]
|
||||||
userId: (req as any).userId || null
|
)
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
res.json({ code: 0 })
|
res.json({ code: 0 })
|
||||||
|
|||||||
Reference in New Issue
Block a user