event search
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { addDays, format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
|
||||||
import { Event } from '@/app/api/types';
|
import { Event, EventType } from '@/lib/types';
|
||||||
|
|
||||||
export default function EventsPage() {
|
export default function EventsPage() {
|
||||||
const [dateRange, setDateRange] = useState({
|
const [dateRange, setDateRange] = useState({
|
||||||
@@ -16,36 +16,62 @@ export default function EventsPage() {
|
|||||||
const [events, setEvents] = useState<Event[]>([]);
|
const [events, setEvents] = useState<Event[]>([]);
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const [hasMore, setHasMore] = useState(true);
|
const [hasMore, setHasMore] = useState(true);
|
||||||
const [filter, setFilter] = useState({
|
const [totalEvents, setTotalEvents] = useState(0);
|
||||||
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
|
|
||||||
|
// 过滤条件状态
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
eventType: '',
|
eventType: '',
|
||||||
linkId: '',
|
linkId: '',
|
||||||
linkSlug: ''
|
linkSlug: '',
|
||||||
|
userId: '',
|
||||||
|
teamId: '',
|
||||||
|
projectId: '',
|
||||||
|
tags: [] as string[],
|
||||||
|
searchSlug: '',
|
||||||
|
sortBy: 'event_time',
|
||||||
|
sortOrder: 'desc' as 'asc' | 'desc'
|
||||||
});
|
});
|
||||||
|
|
||||||
const [filters, setFilters] = useState({
|
// 加载标签列表
|
||||||
startTime: format(new Date('2024-02-01'), "yyyy-MM-dd'T'HH:mm:ss'Z'"),
|
const fetchTags = async () => {
|
||||||
endTime: format(new Date('2025-03-05'), "yyyy-MM-dd'T'HH:mm:ss'Z'"),
|
try {
|
||||||
page: 1,
|
const response = await fetch('/api/events/tags');
|
||||||
pageSize: 20
|
const data = await response.json();
|
||||||
});
|
if (data.success && Array.isArray(data.data)) {
|
||||||
|
setTags(data.data.map((tag: { tag_name: string }) => tag.tag_name));
|
||||||
const [summary, setSummary] = useState<any>(null);
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching tags:', err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取事件列表
|
||||||
const fetchEvents = async (pageNum: number) => {
|
const fetchEvents = async (pageNum: number) => {
|
||||||
try {
|
try {
|
||||||
const startTime = format(dateRange.from, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
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 endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");
|
||||||
|
|
||||||
const params = new URLSearchParams({
|
const params = new URLSearchParams({
|
||||||
startTime,
|
|
||||||
endTime,
|
|
||||||
page: pageNum.toString(),
|
page: pageNum.toString(),
|
||||||
pageSize: '50'
|
pageSize: '20'
|
||||||
});
|
});
|
||||||
|
|
||||||
if (filter.eventType) params.append('eventType', filter.eventType);
|
// 添加时间范围参数（如果有）
|
||||||
if (filter.linkId) params.append('linkId', filter.linkId);
|
if (startTime) params.append('startTime', startTime);
|
||||||
if (filter.linkSlug) params.append('linkSlug', filter.linkSlug);
|
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 response = await fetch(`/api/events?${params.toString()}`);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
@@ -54,15 +80,14 @@ export default function EventsPage() {
|
|||||||
throw new Error(data.error || 'Failed to fetch events');
|
throw new Error(data.error || 'Failed to fetch events');
|
||||||
}
|
}
|
||||||
|
|
||||||
const eventsData = data.data || data.events || [];
|
|
||||||
|
|
||||||
if (pageNum === 1) {
|
if (pageNum === 1) {
|
||||||
setEvents(eventsData);
|
setEvents(data.data || []);
|
||||||
} else {
|
} else {
|
||||||
setEvents(prev => [...prev, ...eventsData]);
|
setEvents(prev => [...prev, ...(data.data || [])]);
|
||||||
}
|
}
|
||||||
|
|
||||||
setHasMore(Array.isArray(eventsData) && eventsData.length === 50);
|
setTotalEvents(data.meta?.total || 0);
|
||||||
|
setHasMore(data.data && data.data.length === 20);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error fetching events:", err);
|
console.error("Error fetching events:", err);
|
||||||
setError(err instanceof Error ? err.message : 'An error occurred while fetching events');
|
setError(err instanceof Error ? err.message : 'An error occurred while fetching events');
|
||||||
@@ -72,13 +97,20 @@ export default function EventsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 初始化加载
|
||||||
|
useEffect(() => {
|
||||||
|
fetchTags();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 当过滤条件改变时重新加载数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPage(1);
|
setPage(1);
|
||||||
setEvents([]);
|
setEvents([]);
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
fetchEvents(1);
|
fetchEvents(1);
|
||||||
}, [dateRange, filter]);
|
}, [dateRange, filters]);
|
||||||
|
|
||||||
|
// 加载更多数据
|
||||||
const loadMore = () => {
|
const loadMore = () => {
|
||||||
if (!loading && hasMore) {
|
if (!loading && hasMore) {
|
||||||
const nextPage = page + 1;
|
const nextPage = page + 1;
|
||||||
@@ -87,6 +119,23 @@ export default function EventsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 重置过滤条件
|
||||||
|
const resetFilters = () => {
|
||||||
|
setFilters({
|
||||||
|
eventType: '',
|
||||||
|
linkId: '',
|
||||||
|
linkSlug: '',
|
||||||
|
userId: '',
|
||||||
|
teamId: '',
|
||||||
|
projectId: '',
|
||||||
|
tags: [],
|
||||||
|
searchSlug: '',
|
||||||
|
sortBy: 'event_time',
|
||||||
|
sortOrder: 'desc'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
const formatDate = (dateString: string) => {
|
const formatDate = (dateString: string) => {
|
||||||
const date = new Date(dateString);
|
const date = new Date(dateString);
|
||||||
return date.toLocaleString();
|
return date.toLocaleString();
|
||||||
@@ -102,153 +151,213 @@ export default function EventsPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<div className="flex justify-between items-center mb-8">
|
{/* 过滤器部分 */}
|
||||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Events</h1>
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||||
<DateRangePicker
|
<h2 className="text-xl font-semibold mb-4">过滤器</h2>
|
||||||
value={dateRange}
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
onChange={setDateRange}
|
<div>
|
||||||
/>
|
<DateRangePicker
|
||||||
</div>
|
value={dateRange}
|
||||||
|
onChange={setDateRange}
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
|
/>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
||||||
Event Type
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
value={filter.eventType}
|
value={filters.eventType}
|
||||||
onChange={e => setFilter(prev => ({ ...prev, eventType: e.target.value }))}
|
onChange={(e) => setFilters(prev => ({ ...prev, eventType: e.target.value }))}
|
||||||
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
|
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="">All Types</option>
|
<option value="">所有事件类型</option>
|
||||||
<option value="click">Click</option>
|
{Object.values(EventType).map(type => (
|
||||||
<option value="conversion">Conversion</option>
|
<option key={type} value={type}>{type}</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
||||||
Link ID
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={filter.linkId}
|
placeholder="链接 ID"
|
||||||
onChange={e => setFilter(prev => ({ ...prev, linkId: e.target.value }))}
|
value={filters.linkId}
|
||||||
placeholder="Enter Link ID"
|
onChange={(e) => setFilters(prev => ({ ...prev, linkId: e.target.value }))}
|
||||||
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
|
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>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
||||||
Link Slug
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={filter.linkSlug}
|
placeholder="链接短码"
|
||||||
onChange={e => setFilter(prev => ({ ...prev, linkSlug: e.target.value }))}
|
value={filters.linkSlug}
|
||||||
placeholder="Enter Link Slug"
|
onChange={(e) => setFilters(prev => ({ ...prev, linkSlug: e.target.value }))}
|
||||||
className="block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-gray-100"
|
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>
|
||||||
|
<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.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">
|
||||||
|
<h3 className="text-sm font-medium mb-2">标签</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{tags.map(tag => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => {
|
||||||
|
setFilters(prev => ({
|
||||||
|
...prev,
|
||||||
|
tags: prev.tags.includes(tag)
|
||||||
|
? prev.tags.filter(t => t !== tag)
|
||||||
|
: [...prev.tags, tag]
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
className={`px-2 py-1 rounded-full text-sm font-medium ${
|
||||||
|
filters.tags.includes(tag)
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</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>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
|
{/* 事件列表 */}
|
||||||
<div className="overflow-x-auto">
|
<div className="bg-white rounded-lg shadow">
|
||||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
<div className="p-4 border-b">
|
||||||
<thead className="bg-gray-50 dark:bg-gray-900">
|
<h2 className="text-xl font-semibold">事件列表 ({totalEvents})</h2>
|
||||||
<tr>
|
</div>
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
||||||
Time
|
<div className="divide-y">
|
||||||
</th>
|
{events.map((event) => (
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div key={event.event_id} className="p-4">
|
||||||
Type
|
<div className="flex justify-between items-start">
|
||||||
</th>
|
<div>
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<span className="font-medium">{event.event_type}</span>
|
||||||
Link
|
<span className="text-gray-500 ml-2">{formatDate(event.event_time)}</span>
|
||||||
</th>
|
</div>
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||||
Visitor
|
{event.device_type}
|
||||||
</th>
|
</span>
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
</div>
|
||||||
Location
|
|
||||||
</th>
|
<div className="mt-2 grid grid-cols-2 gap-4">
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
<div>
|
||||||
Referrer
|
<p className="text-sm text-gray-600">链接: {event.link_slug}</p>
|
||||||
</th>
|
<p className="text-sm text-gray-600">用户: {event.user_name || event.user_id}</p>
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
</div>
|
||||||
Conversion
|
<div>
|
||||||
</th>
|
<p className="text-sm text-gray-600">IP: {event.ip_address}</p>
|
||||||
</tr>
|
<p className="text-sm text-gray-600">位置: {event.country} {event.city}</p>
|
||||||
</thead>
|
</div>
|
||||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
</div>
|
||||||
{Array.isArray(events) && events.map((event, index) => (
|
|
||||||
<tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900'}>
|
{event.link_tags && (
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
<div className="mt-2 flex gap-2">
|
||||||
{event.event_time && formatDate(event.event_time)}
|
{(typeof event.link_tags === 'string' ?
|
||||||
</td>
|
(() => {
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
try {
|
||||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
return JSON.parse(event.link_tags);
|
||||||
event.event_type === 'conversion' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100'
|
} catch (e) {
|
||||||
}`}>
|
console.error('Error parsing link_tags:', e);
|
||||||
{event.event_type || 'unknown'}
|
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>
|
</span>
|
||||||
</td>
|
))}
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
</div>
|
||||||
<div>
|
)}
|
||||||
<div className="font-medium">{event.link_slug || '-'}</div>
|
</div>
|
||||||
<div className="text-gray-500 dark:text-gray-400 text-xs">{event.link_original_url || '-'}</div>
|
))}
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
||||||
<div>
|
|
||||||
<div>{event.browser || '-'}</div>
|
|
||||||
<div className="text-gray-500 dark:text-gray-400 text-xs">{event.os || '-'} / {event.device_type || '-'}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
||||||
<div>
|
|
||||||
<div>{event.city || '-'}</div>
|
|
||||||
<div className="text-gray-500 dark:text-gray-400 text-xs">{event.country || '-'}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
{event.referrer || '-'}
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
|
||||||
<div>
|
|
||||||
<div>{event.conversion_type || '-'}</div>
|
|
||||||
{event.conversion_value > 0 && (
|
|
||||||
<div className="text-gray-500 dark:text-gray-400 text-xs">Value: {event.conversion_value}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{loading && (
|
{hasMore && (
|
||||||
<div className="flex justify-center p-4">
|
<div className="p-4 text-center">
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!loading && hasMore && (
|
|
||||||
<div className="flex justify-center p-4">
|
|
||||||
<button
|
<button
|
||||||
onClick={loadMore}
|
onClick={loadMore}
|
||||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
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"
|
||||||
>
|
>
|
||||||
Load More
|
{loading ? '加载中...' : '加载更多'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!loading && Array.isArray(events) && events.length === 0 && (
|
{!loading && events.length === 0 && (
|
||||||
<div className="flex justify-center p-8 text-gray-500 dark:text-gray-400">
|
<div className="p-8 text-center text-gray-500">
|
||||||
No events found
|
没有找到符合条件的事件
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user