From af15a41186025f451577eccebef6a17d6cb91430 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Mon, 8 Jun 2026 16:12:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=97=A5=E5=BF=97=E5=92=8C=E5=9F=8B?=
=?UTF-8?q?=E7=82=B9=E9=A1=B5=E9=9D=A2=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
日志页：
- 关键词搜索添加搜索按钮
- 修复搜索样式重复问题
埋点页：
- 事件类型显示中文名称（页面访问、用户操作等）
- 今日事件和热门事件使用标签样式
- 添加日期筛选和关键词搜索
- 事件类型筛选可横向滚动
---
client/src/pages/admin/logs.vue | 51 ++++++++++---
client/src/pages/admin/track.vue | 120 +++++++++++++++++++++++++++++--
2 files changed, 153 insertions(+), 18 deletions(-)
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;