diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx index 412e119..39128d4 100644 --- a/app/(app)/dashboard/page.tsx +++ b/app/(app)/dashboard/page.tsx @@ -17,16 +17,26 @@ interface Event { event_type: string; visitor_id: string; created_at: string; + event_time?: string; referrer?: string; browser?: string; os?: string; device_type?: string; country?: string; city?: string; + event_attributes?: string; + link_attributes?: string; + user_attributes?: string; + link_label?: string; + link_original_url?: string; + team_name?: string; + project_name?: string; + link_id?: string; + link_slug?: string; } // 格式化日期函数 -const formatDate = (dateString: string) => { +const formatDate = (dateString: string | undefined) => { if (!dateString) return ''; try { return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss'); @@ -35,6 +45,53 @@ const formatDate = (dateString: string) => { } }; +// 解析JSON字符串 +const parseJsonSafely = (jsonString: string) => { + if (!jsonString) return null; + try { + return JSON.parse(jsonString); + } catch { + return null; + } +}; + +// 获取用户可读名称 +const getUserDisplayName = (user: Record | null) => { + if (!user) return '-'; + if (typeof user.full_name === 'string') return user.full_name; + if (typeof user.name === 'string') return user.name; + if (typeof user.email === 'string') return user.email; + return '-'; +}; + +// 提取链接和事件的重要信息 +const extractEventInfo = (event: Event) => { + // 解析事件属性 + const eventAttrs = parseJsonSafely(event.event_attributes || '{}'); + + // 解析链接属性 + const linkAttrs = parseJsonSafely(event.link_attributes || '{}'); + + // 解析用户属性 + const userAttrs = parseJsonSafely(event.user_attributes || '{}'); + + return { + eventTime: event.created_at || event.event_time, + linkName: event.link_label || linkAttrs?.name || eventAttrs?.link_name || event.link_slug || '-', + originalUrl: event.link_original_url || eventAttrs?.origin_url || '-', + eventType: event.event_type || '-', + visitorId: event.visitor_id?.substring(0, 8) || '-', + referrer: eventAttrs?.referrer || '-', + location: event.country ? (event.city ? `${event.city}, ${event.country}` : event.country) : '-', + device: event.device_type || '-', + browser: event.browser || '-', + os: event.os || '-', + userInfo: getUserDisplayName(userAttrs), + teamName: event.team_name || '-', + projectName: event.project_name || '-' + }; +}; + export default function DashboardPage() { // 默认日期范围为最近7天 const today = new Date(); @@ -255,59 +312,80 @@ export default function DashboardPage() { Time - URL ID + Link Name - URL + Original URL Event Type - Visitor ID + User - Referrer + Team/Project - Location + Device Info - {events.map((event, index) => ( - - - {formatDate(event.created_at)} - - - {event.url_id} - - - - {event.url} - - - - - {event.event_type} - - - - {event.visitor_id.substring(0, 8)}... - - - {event.referrer || '-'} - - - {event.country && event.city ? `${event.city}, ${event.country}` : (event.country || '-')} - - - ))} + {events.map((event, index) => { + const info = extractEventInfo(event); + return ( + + + {formatDate(info.eventTime)} + + + {info.linkName} +
+ ID: {event.link_id?.substring(0, 8) || '-'} +
+ + + + {info.originalUrl} + + + + + {info.eventType} + + + +
{info.userInfo}
+
{info.visitorId}...
+ + +
{info.teamName}
+
{info.projectName}
+ + +
+ + Device: + {info.device} + + + Browser: + {info.browser} + + + OS: + {info.os} + +
+ + + ); + })}