event search

app/(app)/events/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import { addDays, format } from 'date-fns';
+import { format } from 'date-fns';
 import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
-import { Event } from '@/app/api/types';
+import { Event, EventType } from '@/lib/types';
 
 export default function EventsPage() {
   const [dateRange, setDateRange] = useState({
@@ -16,36 +16,62 @@ export default function EventsPage() {
   const [events, setEvents] = useState<Event[]>([]);
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
-  const [filter, setFilter] = useState({
+  const [totalEvents, setTotalEvents] = useState(0);
+  const [tags, setTags] = useState<string[]>([]);
+  
+  // 过滤条件状态
+  const [filters, setFilters] = useState({
     eventType: '',
     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'"),
-    endTime: format(new Date('2025-03-05'), "yyyy-MM-dd'T'HH:mm:ss'Z'"),
-    page: 1,
-    pageSize: 20
-  });
-
-  const [summary, setSummary] = useState<any>(null);
+  // 加载标签列表
+  const fetchTags = async () => {
+    try {
+      const response = await fetch('/api/events/tags');
+      const data = await response.json();
+      if (data.success && Array.isArray(data.data)) {
+        setTags(data.data.map((tag: { tag_name: string }) => tag.tag_name));
+      }
+    } 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({
-        startTime,
-        endTime,
         page: pageNum.toString(),
-        pageSize: '50'
+        pageSize: '20'
       });
 
-      if (filter.eventType) params.append('eventType', filter.eventType);
-      if (filter.linkId) params.append('linkId', filter.linkId);
-      if (filter.linkSlug) params.append('linkSlug', filter.linkSlug);
+      // 添加时间范围参数（如果有）
+      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();
@@ -54,15 +80,14 @@ export default function EventsPage() {
         throw new Error(data.error || 'Failed to fetch events');
       }
 
-      const eventsData = data.data || data.events || [];
-      
       if (pageNum === 1) {
-        setEvents(eventsData);
+        setEvents(data.data || []);
       } 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) {
       console.error("Error fetching events:", err);
       setError(err instanceof Error ? err.message : 'An error occurred while fetching events');
@@ -72,13 +97,20 @@ export default function EventsPage() {
     }
   };
 
+  // 初始化加载
+  useEffect(() => {
+    fetchTags();
+  }, []);
+
+  // 当过滤条件改变时重新加载数据
   useEffect(() => {
     setPage(1);
     setEvents([]);
     setLoading(true);
     fetchEvents(1);
-  }, [dateRange, filter]);
+  }, [dateRange, filters]);
 
+  // 加载更多数据
   const loadMore = () => {
     if (!loading && hasMore) {
       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 date = new Date(dateString);
     return date.toLocaleString();
@@ -102,153 +151,213 @@ export default function EventsPage() {
 
   return (
     <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">
+        <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 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>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Event Type
-            </label>
             <select
-              value={filter.eventType}
-              onChange={e => setFilter(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"
+              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="">All Types</option>
-              <option value="click">Click</option>
-              <option value="conversion">Conversion</option>
+              <option value="">所有事件类型</option>
+              {Object.values(EventType).map(type => (
+                <option key={type} value={type}>{type}</option>
+              ))}
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link ID
-            </label>
             <input
               type="text"
-              value={filter.linkId}
-              onChange={e => setFilter(prev => ({ ...prev, linkId: e.target.value }))}
-              placeholder="Enter Link ID"
-              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"
+              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>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link Slug
-            </label>
             <input
               type="text"
-              value={filter.linkSlug}
-              onChange={e => setFilter(prev => ({ ...prev, linkSlug: e.target.value }))}
-              placeholder="Enter Link Slug"
-              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"
+              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.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="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead className="bg-gray-50 dark:bg-gray-900">
-              <tr>
-                <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
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Type
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Link
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Visitor
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Location
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Referrer
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                  Conversion
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-              {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'}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    {event.event_time && formatDate(event.event_time)}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                      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'
-                    }`}>
-                      {event.event_type || 'unknown'}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
-                    <div>
-                      <div className="font-medium">{event.link_slug || '-'}</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>
+        {/* 标签选择 */}
+        <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>
             ))}
-            </tbody>
-          </table>
+          </div>
         </div>
 
-        {loading && (
-          <div className="flex justify-center p-4">
-            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500" />
+        <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>
 
-        {!loading && hasMore && (
-          <div className="flex justify-center p-4">
+        {hasMore && (
+          <div className="p-4 text-center">
             <button
               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>
           </div>
         )}
 
-        {!loading && Array.isArray(events) && events.length === 0 && (
-          <div className="flex justify-center p-8 text-gray-500 dark:text-gray-400">
-            No events found
+        {!loading && events.length === 0 && (
+          <div className="p-8 text-center text-gray-500">
+            没有找到符合条件的事件
           </div>
         )}
       </div>