add filter
This commit is contained in:
@@ -8,6 +8,8 @@ import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
|
|||||||
import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
|
import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
|
||||||
import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';
|
||||||
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
import { TeamSelector } from '@/app/components/ui/TeamSelector';
|
||||||
|
import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
|
||||||
|
import { TagSelector } from '@/app/components/ui/TagSelector';
|
||||||
|
|
||||||
// 事件类型定义
|
// 事件类型定义
|
||||||
interface Event {
|
interface Event {
|
||||||
@@ -102,6 +104,11 @@ export default function DashboardPage() {
|
|||||||
|
|
||||||
// 添加团队选择状态 - 使用数组支持多选
|
// 添加团队选择状态 - 使用数组支持多选
|
||||||
const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
|
const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
|
||||||
|
// 添加项目选择状态 - 使用数组支持多选
|
||||||
|
const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
|
||||||
|
// 添加标签选择状态 - 使用数组支持多选
|
||||||
|
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [summary, setSummary] = useState<EventsSummary | null>(null);
|
const [summary, setSummary] = useState<EventsSummary | null>(null);
|
||||||
@@ -132,6 +139,20 @@ export default function DashboardPage() {
|
|||||||
params.append('teamId', teamId);
|
params.append('teamId', teamId);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 添加项目ID参数 - 支持多个项目
|
||||||
|
if (selectedProjectIds.length > 0) {
|
||||||
|
selectedProjectIds.forEach(projectId => {
|
||||||
|
params.append('projectId', projectId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加标签ID参数 - 支持多个标签
|
||||||
|
if (selectedTagIds.length > 0) {
|
||||||
|
selectedTagIds.forEach(tagId => {
|
||||||
|
params.append('tagId', tagId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 并行获取所有数据
|
// 并行获取所有数据
|
||||||
const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
|
const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
|
||||||
@@ -169,7 +190,7 @@ export default function DashboardPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
}, [dateRange, selectedTeamIds]);
|
}, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
@@ -191,13 +212,27 @@ export default function DashboardPage() {
|
|||||||
<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">
|
<div className="flex justify-between items-center mb-8">
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
|
<h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex flex-col gap-4 md:flex-row md:items-center">
|
||||||
<TeamSelector
|
<TeamSelector
|
||||||
value={selectedTeamIds}
|
value={selectedTeamIds}
|
||||||
onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
|
onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
|
||||||
className="w-[250px]"
|
className="w-[250px]"
|
||||||
multiple={true}
|
multiple={true}
|
||||||
/>
|
/>
|
||||||
|
<ProjectSelector
|
||||||
|
value={selectedProjectIds}
|
||||||
|
onChange={(value) => setSelectedProjectIds(Array.isArray(value) ? value : [value])}
|
||||||
|
className="w-[250px]"
|
||||||
|
multiple={true}
|
||||||
|
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
||||||
|
/>
|
||||||
|
<TagSelector
|
||||||
|
value={selectedTagIds}
|
||||||
|
onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
|
||||||
|
className="w-[250px]"
|
||||||
|
multiple={true}
|
||||||
|
teamId={selectedTeamIds.length === 1 ? selectedTeamIds[0] : undefined}
|
||||||
|
/>
|
||||||
<DateRangePicker
|
<DateRangePicker
|
||||||
value={dateRange}
|
value={dateRange}
|
||||||
onChange={setDateRange}
|
onChange={setDateRange}
|
||||||
@@ -235,151 +270,214 @@ export default function DashboardPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{summary && (
|
{/* 显示项目选择信息 */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
{selectedProjectIds.length > 0 && (
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
||||||
<h3 className="text-sm font-medium text-gray-500">Total Events</h3>
|
<span className="text-blue-700 font-medium mr-2">
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
{selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
|
||||||
{typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
|
</span>
|
||||||
</p>
|
<div className="flex flex-wrap gap-2">
|
||||||
</div>
|
{selectedProjectIds.map(projectId => (
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
<span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||||
<h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
|
{projectId}
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
<button
|
||||||
{typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
|
onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
|
||||||
</p>
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||||
</div>
|
>
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
×
|
||||||
<h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
|
</button>
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
</span>
|
||||||
{typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
|
))}
|
||||||
</p>
|
{selectedProjectIds.length > 0 && (
|
||||||
</div>
|
<button
|
||||||
<div className="bg-white rounded-lg shadow p-6">
|
onClick={() => setSelectedProjectIds([])}
|
||||||
<h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
|
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
||||||
<p className="text-2xl font-semibold text-gray-900">
|
>
|
||||||
{summary.averageTimeSpent?.toFixed(1) || '0'}s
|
Clear all
|
||||||
</p>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
{/* 显示标签选择信息 */}
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
|
{selectedTagIds.length > 0 && (
|
||||||
<div className="h-96">
|
<div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
|
||||||
<TimeSeriesChart data={timeSeriesData} />
|
<span className="text-blue-700 font-medium mr-2">
|
||||||
|
{selectedTagIds.length === 1 ? 'Tag filter:' : 'Tags filter:'}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedTagIds.map(tagId => (
|
||||||
|
<span key={tagId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
|
||||||
|
{tagId}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTagIds(selectedTagIds.filter(id => id !== tagId))}
|
||||||
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{selectedTagIds.length > 0 && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTagIds([])}
|
||||||
|
className="text-xs text-gray-500 hover:text-gray-700 underline"
|
||||||
|
>
|
||||||
|
Clear all
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<div className="mb-8">
|
{/* 仪表板内容 */}
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
|
<>
|
||||||
{deviceData && <DevicePieCharts data={deviceData} />}
|
{summary && (
|
||||||
</div>
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
<h3 className="text-sm font-medium text-gray-500">Total Events</h3>
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
<GeoAnalytics data={geoData} />
|
{typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
{/* 事件列表部分 */}
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
<div className="bg-white rounded-lg shadow overflow-hidden mb-8">
|
<h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
|
||||||
<div className="p-6 border-b border-gray-200">
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
|
{typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<div className="overflow-x-auto">
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
<table className="min-w-full divide-y divide-gray-200">
|
<h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
|
||||||
<thead className="bg-gray-50">
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
<tr>
|
{typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
</p>
|
||||||
Time
|
</div>
|
||||||
</th>
|
<div className="bg-white rounded-lg shadow p-6">
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
|
||||||
Link Name
|
<p className="text-2xl font-semibold text-gray-900">
|
||||||
</th>
|
{summary.averageTimeSpent?.toFixed(1) || '0'}s
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
</p>
|
||||||
Original URL
|
</div>
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Event Type
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
User
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Team/Project
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
Device Info
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
|
||||||
{events.map((event, index) => {
|
|
||||||
const info = extractEventInfo(event);
|
|
||||||
return (
|
|
||||||
<tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
{formatDate(info.eventTime)}
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
||||||
<span className="font-medium">{info.linkName}</span>
|
|
||||||
<div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
|
|
||||||
ID: {event.link_id?.substring(0, 8) || '-'}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
|
|
||||||
<a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
|
|
||||||
{info.originalUrl}
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
|
||||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
|
||||||
info.eventType === 'click'
|
|
||||||
? 'bg-green-100 text-green-800'
|
|
||||||
: 'bg-blue-100 text-blue-800'
|
|
||||||
}`}>
|
|
||||||
{info.eventType}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="font-medium">{info.userInfo}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="font-medium">{info.teamName}</div>
|
|
||||||
<div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-xs inline-flex items-center mb-1">
|
|
||||||
<span className="font-medium">Device:</span>
|
|
||||||
<span className="ml-1">{info.device}</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-xs inline-flex items-center mb-1">
|
|
||||||
<span className="font-medium">Browser:</span>
|
|
||||||
<span className="ml-1">{info.browser}</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-xs inline-flex items-center">
|
|
||||||
<span className="font-medium">OS:</span>
|
|
||||||
<span className="ml-1">{info.os}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 表格为空状态 */}
|
|
||||||
{!loading && events.length === 0 && (
|
|
||||||
<div className="flex justify-center items-center p-8 text-gray-500">
|
|
||||||
No events found
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Event Trends</h2>
|
||||||
|
<div className="h-96">
|
||||||
|
<TimeSeriesChart data={timeSeriesData} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
|
||||||
|
{deviceData && <DevicePieCharts data={deviceData} />}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
|
||||||
|
<GeoAnalytics data={geoData} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 事件列表部分 */}
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden mb-8">
|
||||||
|
<div className="p-6 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">Recent Events</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Time
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Link Name
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Original URL
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Event Type
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
User
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Team/Project
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Device Info
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{events.map((event, index) => {
|
||||||
|
const info = extractEventInfo(event);
|
||||||
|
return (
|
||||||
|
<tr key={event.event_id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{formatDate(info.eventTime)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||||
|
<span className="font-medium">{info.linkName}</span>
|
||||||
|
<div className="text-xs text-gray-500 mt-1 truncate max-w-xs">
|
||||||
|
ID: {event.link_id?.substring(0, 8) || '-'}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
|
||||||
|
<a href={info.originalUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
|
||||||
|
{info.originalUrl}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||||
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||||
|
info.eventType === 'click'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-blue-100 text-blue-800'
|
||||||
|
}`}>
|
||||||
|
{info.eventType}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="font-medium">{info.userInfo}</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">{info.visitorId}...</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="font-medium">{info.teamName}</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">{info.projectName}</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xs inline-flex items-center mb-1">
|
||||||
|
<span className="font-medium">Device:</span>
|
||||||
|
<span className="ml-1">{info.device}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs inline-flex items-center mb-1">
|
||||||
|
<span className="font-medium">Browser:</span>
|
||||||
|
<span className="ml-1">{info.browser}</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs inline-flex items-center">
|
||||||
|
<span className="font-medium">OS:</span>
|
||||||
|
<span className="ml-1">{info.os}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 表格为空状态 */}
|
||||||
|
{!loading && events.length === 0 && (
|
||||||
|
<div className="flex justify-center items-center p-8 text-gray-500">
|
||||||
|
No events found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user