move page

2025-04-01 22:18:25 +08:00
parent 36f22059e9
commit 1be6a6dbf0
4 changed files with 210 additions and 441 deletions
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -8,6 +8,62 @@ import GeoAnalytics from '@/app/components/analytics/GeoAnalytics';
 import DevicePieCharts from '@/app/components/charts/DevicePieCharts';
 import { EventsSummary, TimeSeriesData, GeoData, DeviceAnalytics as DeviceAnalyticsType } from '@/app/api/types';

+// 事件类型定义
+interface Event {
+  event_id?: string;
+  url_id: string;
+  url: string;
+  event_type: string;
+  visitor_id: string;
+  created_at: string;
+  referrer?: string;
+  browser?: string;
+  os?: string;
+  device_type?: string;
+  country?: string;
+  city?: string;
+}
+
+// 获取事件的函数
+const fetchEvents = async (
+  startTime?: string, 
+  endTime?: string, 
+  urlId?: string, 
+  eventType?: string
+): Promise<Event[]> => {
+  try {
+    // 构建查询参数
+    const params = new URLSearchParams();
+    if (startTime) params.append('startTime', startTime);
+    if (endTime) params.append('endTime', endTime);
+    if (urlId) params.append('urlId', urlId);
+    if (eventType) params.append('eventType', eventType);
+    
+    // 发送请求
+    const response = await fetch(`/api/events?${params.toString()}`);
+    
+    if (!response.ok) {
+      throw new Error('Failed to fetch events');
+    }
+    
+    const data = await response.json();
+    return data.data || [];
+  } catch (error) {
+    console.error('Error fetching events:', error);
+    return [];
+  }
+};
+
+// 格式化日期函数
+const formatDate = (dateString: string) => {
+  if (!dateString) return '';
+  try {
+    return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
+  } catch {
+    return dateString;
+  }
+};
+
 export default function DashboardPage() {
  const [dateRange, setDateRange] = useState({
    from: new Date('2024-02-01'),
@@ -20,6 +76,8 @@ export default function DashboardPage() {
  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([]);
  const [geoData, setGeoData] = useState<GeoData[]>([]);
  const [deviceData, setDeviceData] = useState<DeviceAnalyticsType | null>(null);
+  const [events, setEvents] = useState<Event[]>([]);
+  const [urlFilter, setUrlFilter] = useState('');

  useEffect(() => {
    const fetchData = async () => {
@@ -31,11 +89,12 @@ export default function DashboardPage() {
        const endTime = format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'");

        // 并行获取所有数据
-        const [summaryRes, timeSeriesRes, geoRes, deviceRes] = await Promise.all([
+        const [summaryRes, timeSeriesRes, geoRes, deviceRes, eventsRes] = await Promise.all([
          fetch(`/api/events/summary?startTime=${startTime}&endTime=${endTime}`),
          fetch(`/api/events/time-series?startTime=${startTime}&endTime=${endTime}`),
          fetch(`/api/events/geo?startTime=${startTime}&endTime=${endTime}`),
-          fetch(`/api/events/devices?startTime=${startTime}&endTime=${endTime}`)
+          fetch(`/api/events/devices?startTime=${startTime}&endTime=${endTime}`),
+          fetchEvents(startTime, endTime, urlFilter || undefined)
        ]);

        const [summaryData, timeSeriesData, geoData, deviceData] = await Promise.all([
@@ -54,6 +113,7 @@ export default function DashboardPage() {
        setTimeSeriesData(timeSeriesData.data);
        setGeoData(geoData.data);
        setDeviceData(deviceData.data);
+        setEvents(eventsRes || []);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
      } finally {
@@ -62,7 +122,7 @@ export default function DashboardPage() {
    };

    fetchData();
-  }, [dateRange]);
+  }, [dateRange, urlFilter]);

  if (loading) {
    return (
@@ -131,10 +191,104 @@ export default function DashboardPage() {
        {deviceData && <DevicePieCharts data={deviceData} />}
      </div>

-      <div className="bg-white rounded-lg shadow p-6">
+      <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 className="flex items-center space-x-4 mb-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-gray-500 mb-1">
+                Filter by URL ID
+              </label>
+              <input
+                type="text"
+                value={urlFilter}
+                onChange={e => setUrlFilter(e.target.value)}
+                className="w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
+                placeholder="Enter URL ID to filter"
+              />
+            </div>
+          </div>
+        </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">
+                  URL ID
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  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">
+                  Visitor ID
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Referrer
+                </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Location
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {events.map((event, index) => (
+                <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(event.created_at)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.url_id}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <a href={event.url} className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">
+                      {event.url}
+                    </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 ${
+                      event.event_type === 'click' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-blue-100 text-blue-800'
+                    }`}>
+                      {event.event_type}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.visitor_id.substring(0, 8)}...
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.referrer || '-'}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.country && event.city ? `${event.city}, ${event.country}` : (event.country || '-')}
+                  </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>
  );
 }