diff --git a/client/src/pages/admin/logs.vue b/client/src/pages/admin/logs.vue index 0037be7..4901d8a 100644 --- a/client/src/pages/admin/logs.vue +++ b/client/src/pages/admin/logs.vue @@ -69,7 +69,12 @@ 警告 信息 - + + + + 搜索 + + @@ -382,6 +387,40 @@ function goBack() { margin-bottom: $space-md; } +.search-wrap { + flex: 1; + display: flex; + gap: $space-xs; +} + +.search-input { + flex: 1; + height: 64rpx; + padding: 0 $space-md; + background: $surface; + border-radius: $radius-lg; + border: 2rpx solid $border; + font-size: $font-md; +} + +.search-btn { + height: 64rpx; + padding: 0 $space-md; + background: $primary; + border-radius: $radius-lg; + display: flex; + align-items: center; + justify-content: center; + + &:active { opacity: 0.8; } +} + +.search-btn-text { + font-size: $font-md; + color: $surface; + font-weight: 500; +} + .filter-tabs { display: flex; gap: $space-xs; @@ -403,16 +442,6 @@ function goBack() { } } -.search-input { - flex: 1; - height: 64rpx; - padding: 0 $space-md; - background: $surface; - border-radius: $radius-lg; - border: 2rpx solid $border; - font-size: $font-md; -} - .log-list { height: calc(100vh - 700rpx); background: $surface; diff --git a/client/src/pages/admin/track.vue b/client/src/pages/admin/track.vue index 2b0a6d8..b76eeca 100644 --- a/client/src/pages/admin/track.vue +++ b/client/src/pages/admin/track.vue @@ -19,7 +19,9 @@ - {{ item.event }} + + {{ getEventName(item.event) }} + {{ item.count }} @@ -44,7 +46,9 @@ 热门事件(7天) - {{ item.event }} + + {{ getEventName(item.event) }} + @@ -66,6 +70,20 @@ 启动 + + + + + {{ filterDate || '选择日期' }} + + + + + + 搜索 + + + @@ -107,6 +125,8 @@ import type { TrackStats, TrackEvent } from '@/api/logs' const stats = ref(null) const filterEvent = ref('') +const filterDate = ref('') +const filterKeyword = ref('') const eventList = ref([]) const loading = ref(false) const page = ref(1) @@ -170,6 +190,11 @@ function filterByEvent(event: string) { filterEvent.value = event } +function onDateChange(e: any) { + filterDate.value = e.detail.value + loadEvents() +} + 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) @@ -188,6 +213,18 @@ function getEventClass(event: string): string { return 'page' } +/** 获取事件类型中文名称 */ +function getEventName(event: string): string { + const nameMap: Record = { + page_view: '页面访问', + action: '用户操作', + error: '错误', + api_error: 'API错误', + app_launch: '应用启动' + } + return nameMap[event] || event +} + /** 格式化日期(处理 MySQL DATE 类型的 ISO 格式) */ function formatDate(dateStr: string): string { if (!dateStr) return '' @@ -299,12 +336,23 @@ function goBack() { &:active { opacity: 0.7; } } -.event-name { - width: 160rpx; - font-size: $font-md; - color: $text; - font-weight: 500; +.event-tag { + padding: 2rpx 12rpx; + border-radius: $radius-xs; flex-shrink: 0; + + &.page { background: #E3F2FD; } + &.action { background: #E8F5E9; } + &.error { background: #FFEBEE; } +} + +.event-tag-text { + font-size: $font-sm; + font-weight: 500; + + .page & { color: #1976D2; } + .action & { color: #388E3C; } + .error & { color: #D32F2F; } } .event-bar { @@ -375,6 +423,64 @@ function goBack() { margin-bottom: $space-md; } +.filter-row { + display: flex; + gap: $space-sm; + margin-bottom: $space-md; +} + +.date-picker { + display: flex; + align-items: center; + gap: $space-xs; + padding: $space-xs $space-md; + height: 64rpx; + background: $surface; + border-radius: $radius-lg; + border: 2rpx solid $border; + flex-shrink: 0; +} + +.date-text { + font-size: $font-sm; + color: $text; + white-space: nowrap; +} + +.search-wrap { + flex: 1; + display: flex; + gap: $space-xs; +} + +.search-input { + flex: 1; + height: 64rpx; + padding: 0 $space-md; + background: $surface; + border-radius: $radius-lg; + border: 2rpx solid $border; + font-size: $font-md; +} + +.search-btn { + height: 64rpx; + padding: 0 $space-md; + background: $primary; + border-radius: $radius-lg; + display: flex; + align-items: center; + justify-content: center; + + &:active { opacity: 0.8; } +} + +.search-btn-text { + font-size: $font-sm; + color: $surface; + font-weight: 500; +} + .section-title { font-size: $font-lg; font-weight: 600;