362 lines
13 KiB
TypeScript
362 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { format } from 'date-fns';
|
|
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
|
import { Event, EventType } from '@/lib/types';
|
|
|
|
export default function EventsPage() {
|
|
const [dateRange, setDateRange] = useState({
|
|
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // 7天前
|
|
to: new Date() // 今天
|
|
});
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [events, setEvents] = useState<Event[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [totalEvents, setTotalEvents] = useState(0);
|
|
const [tags, setTags] = useState<string[]>([]);
|
|
|
|
// 过滤条件状态
|
|
const [filters, setFilters] = useState({
|
|
eventType: '',
|
|
linkId: '',
|
|
linkSlug: '',
|
|
userId: '',
|
|
teamId: '',
|
|
projectId: '',
|
|
tags: [] as string[],
|
|
searchSlug: '',
|
|
sortBy: 'event_time',
|
|
sortOrder: 'desc' as 'asc' | 'desc'
|
|
});
|
|
|
|
// 加载标签列表
|
|
const fetchTags = async () => {
|
|
try {
|
|
const response = await fetch('/api/events/tags');
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
// 处理嵌套的 data 结构
|
|
const tagsData = data.data.data || [];
|
|
setTags(tagsData.map((tag: { tag_name: string }) => tag.tag_name));
|
|
console.log('Fetched tags:', tagsData); // 添加日志，方便调试
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching tags:', err);
|
|
}
|
|
};
|
|
|
|
// 获取事件列表
|
|
const fetchEvents = async (pageNum: number) => {
|
|
try {
|
|
const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
|
const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
|
|
|
const params = new URLSearchParams({
|
|
page: pageNum.toString(),
|
|
pageSize: '20'
|
|
});
|
|
|
|
// 添加时间范围参数（如果有）
|
|
if (startTime) params.append('startTime', startTime);
|
|
if (endTime) params.append('endTime', endTime);
|
|
|
|
// 添加其他过滤参数
|
|
if (filters.eventType) params.append('eventType', filters.eventType);
|
|
if (filters.linkId) params.append('linkId', filters.linkId);
|
|
if (filters.linkSlug) params.append('linkSlug', filters.linkSlug);
|
|
if (filters.userId) params.append('userId', filters.userId);
|
|
if (filters.teamId) params.append('teamId', filters.teamId);
|
|
if (filters.projectId) params.append('projectId', filters.projectId);
|
|
if (filters.tags.length > 0) params.append('tags', filters.tags.join(','));
|
|
if (filters.searchSlug) params.append('searchSlug', filters.searchSlug);
|
|
if (filters.sortBy) params.append('sortBy', filters.sortBy);
|
|
if (filters.sortOrder) params.append('sortOrder', filters.sortOrder);
|
|
|
|
const response = await fetch(`/api/events?${params.toString()}`);
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to fetch events');
|
|
}
|
|
|
|
if (pageNum === 1) {
|
|
setEvents(data.data || []);
|
|
} else {
|
|
setEvents(prev => [...prev, ...(data.data || [])]);
|
|
}
|
|
|
|
setTotalEvents(data.meta?.total || 0);
|
|
setHasMore(data.data && data.data.length === 20);
|
|
} catch (err) {
|
|
console.error("Error fetching events:", err);
|
|
setError(err instanceof Error ? err.message : 'An error occurred while fetching events');
|
|
setEvents([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 初始化加载
|
|
useEffect(() => {
|
|
fetchTags();
|
|
}, []);
|
|
|
|
// 当过滤条件改变时重新加载数据
|
|
useEffect(() => {
|
|
setPage(1);
|
|
setEvents([]);
|
|
setLoading(true);
|
|
fetchEvents(1);
|
|
}, [dateRange, filters]);
|
|
|
|
// 加载更多数据
|
|
const loadMore = () => {
|
|
if (!loading && hasMore) {
|
|
const nextPage = page + 1;
|
|
setPage(nextPage);
|
|
fetchEvents(nextPage);
|
|
}
|
|
};
|
|
|
|
// 重置过滤条件
|
|
const resetFilters = () => {
|
|
setFilters({
|
|
eventType: '',
|
|
linkId: '',
|
|
linkSlug: '',
|
|
userId: '',
|
|
teamId: '',
|
|
projectId: '',
|
|
tags: [],
|
|
searchSlug: '',
|
|
sortBy: 'event_time',
|
|
sortOrder: 'desc'
|
|
});
|
|
};
|
|
|
|
// 格式化日期
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString();
|
|
};
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-red-500">{error}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
{/* 过滤器部分 */}
|
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
|
<h2 className="text-xl font-semibold mb-4">过滤器</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div>
|
|
<DateRangePicker
|
|
value={dateRange}
|
|
onChange={setDateRange}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<select
|
|
value={filters.eventType}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, eventType: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="">所有事件类型</option>
|
|
{Object.values(EventType).map(type => (
|
|
<option key={type} value={type}>{type}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="链接 ID"
|
|
value={filters.linkId}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, linkId: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="链接短码"
|
|
value={filters.linkSlug}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, linkSlug: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="用户 ID"
|
|
value={filters.userId}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, userId: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="团队 ID"
|
|
value={filters.teamId}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, teamId: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="项目 ID"
|
|
value={filters.projectId}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, projectId: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
placeholder="搜索短码"
|
|
value={filters.searchSlug}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, searchSlug: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<select
|
|
value={filters.tags.length > 0 ? filters.tags[0] : ''}
|
|
onChange={(e) => {
|
|
const selectedTag = e.target.value;
|
|
setFilters(prev => ({
|
|
...prev,
|
|
tags: selectedTag ? [selectedTag] : []
|
|
}));
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="">所有标签</option>
|
|
{tags.map(tag => (
|
|
<option key={tag} value={tag}>{tag}</option>
|
|
))}
|
|
</select>
|
|
{/* 说明: 标签过滤会返回包含所选标签的事件，使用 JSONHas 函数查询 link_tags 字段 */}
|
|
</div>
|
|
<div>
|
|
<select
|
|
value={filters.sortBy}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, sortBy: e.target.value }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="event_time">事件时间</option>
|
|
<option value="event_type">事件类型</option>
|
|
<option value="link_slug">链接短码</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<select
|
|
value={filters.sortOrder}
|
|
onChange={(e) => setFilters(prev => ({ ...prev, sortOrder: e.target.value as 'asc' | 'desc' }))}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="desc">降序</option>
|
|
<option value="asc">升序</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
onClick={resetFilters}
|
|
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
>
|
|
重置过滤器
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 事件列表 */}
|
|
<div className="bg-white rounded-lg shadow">
|
|
<div className="p-4 border-b">
|
|
<h2 className="text-xl font-semibold">事件列表 ({totalEvents})</h2>
|
|
</div>
|
|
|
|
<div className="divide-y">
|
|
{events.map((event) => (
|
|
<div key={event.event_id} className="p-4">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<span className="font-medium">{event.event_type}</span>
|
|
<span className="text-gray-500 ml-2">{formatDate(event.event_time)}</span>
|
|
</div>
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
|
{event.device_type}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-2 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-sm text-gray-600">链接: {event.link_slug}</p>
|
|
<p className="text-sm text-gray-600">用户: {event.user_name || event.user_id}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">IP: {event.ip_address}</p>
|
|
<p className="text-sm text-gray-600">位置: {event.country} {event.city}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{event.link_tags && (
|
|
<div className="mt-2 flex gap-2">
|
|
{(typeof event.link_tags === 'string' ?
|
|
(() => {
|
|
try {
|
|
return JSON.parse(event.link_tags);
|
|
} catch (e) {
|
|
console.error('Error parsing link_tags:', e);
|
|
return [];
|
|
}
|
|
})() :
|
|
event.link_tags
|
|
).map((tag: string) => (
|
|
<span
|
|
key={tag}
|
|
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{hasMore && (
|
|
<div className="p-4 text-center">
|
|
<button
|
|
onClick={loadMore}
|
|
disabled={loading}
|
|
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
|
>
|
|
{loading ? '加载中...' : '加载更多'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && events.length === 0 && (
|
|
<div className="p-8 text-center text-gray-500">
|
|
没有找到符合条件的事件
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|