rm dack

app/(app)/AppLayoutClient.tsx

@@ -16,43 +16,43 @@ export default function AppLayoutClient({
 
   return (
     <ProtectedRoute>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-        <nav className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+      <div className="min-h-screen bg-gray-50">
+        <nav className="bg-white border-b border-gray-200">
           <div className="container mx-auto px-4">
             <div className="flex items-center justify-between h-16">
               <div className="flex items-center">
-                <Link href="/" className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                <Link href="/" className="text-xl font-bold text-gray-900">
                   ShortURL Analytics
                 </Link>
                 <div className="hidden md:block ml-10">
                   <div className="flex items-baseline space-x-4">
                     <Link
                       href="/dashboard"
-                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                      className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
                     >
                       Dashboard
                     </Link>
                     <Link
                       href="/analytics"
-                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                      className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
                     >
                       Analytics
                     </Link>
                     <Link
                       href="/events"
-                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                      className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
                     >
                       Events
                     </Link>
                     <Link
                       href="/analytics/geo"
-                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                      className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
                     >
                       Geographic
                     </Link>
                     <Link
                       href="/analytics/devices"
-                      className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+                      className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
                     >
                       Devices
                     </Link>
@@ -60,24 +60,18 @@ export default function AppLayoutClient({
                 </div>
               </div>
               <div className="flex items-center">
-                {user && (
-                  <div className="flex items-center space-x-4">
-                    <span className="text-sm text-gray-700 dark:text-gray-300">
-                      {user.email}
-                    </span>
-                    <button
-                      onClick={handleSignOut}
-                      className="text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md"
-                    >
-                      退出登录
-                    </button>
-                  </div>
-                )}
+                <span className="text-sm text-gray-500 mr-4">{user?.email}</span>
+                <button
+                  onClick={handleSignOut}
+                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  Sign Out
+                </button>
               </div>
             </div>
           </div>
         </nav>
-        <main className="py-10">
+        <main className="container mx-auto px-4 py-8">
           {children}
         </main>
       </div>

app/(app)/analytics/geo/page.tsx

@@ -92,7 +92,7 @@ export default function GeoAnalyticsPage() {
                   <td className="px-6 py-4 whitespace-nowrap text-sm">
                     <div className="flex items-center">
                       <span className="mr-2 text-foreground">{item.percentage.toFixed(1)}%</span>
-                      <div className="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                      <div className="w-24 bg-gray-200 rounded-full h-2">
                         <div
                           className="bg-blue-500 h-2 rounded-full"
                           style={{ width: `${item.percentage}%` }}

app/(app)/analytics/page.tsx

@@ -19,7 +19,7 @@ export default function AnalyticsPage() {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
-        <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Analytics</h1>
+        <h1 className="text-xl font-bold text-gray-900">Analytics</h1>
         
         <div className="flex flex-col gap-4 md:flex-row md:items-center">
           <TeamSelector
@@ -38,8 +38,8 @@ export default function AnalyticsPage() {
 
       {/* 如果没有选择团队，显示提示信息 */}
       {!selectedTeamId && (
-        <div className="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg">
-          <p className="text-gray-500 dark:text-gray-400">
+        <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
+          <p className="text-gray-500">
             Please select a team to view analytics
           </p>
         </div>

app/(app)/dashboard/page.tsx

@@ -83,7 +83,7 @@ export default function DashboardPage() {
   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">Analytics Dashboard</h1>
+        <h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
         <DateRangePicker
           value={dateRange}
           onChange={setDateRange}
@@ -92,47 +92,47 @@ export default function DashboardPage() {
 
       {summary && (
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Events</h3>
-            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500">Total Events</h3>
+            <p className="text-2xl font-semibold text-gray-900">
               {typeof summary.totalEvents === 'number' ? summary.totalEvents.toLocaleString() : summary.totalEvents}
             </p>
           </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Unique Visitors</h3>
-            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500">Unique Visitors</h3>
+            <p className="text-2xl font-semibold text-gray-900">
               {typeof summary.uniqueVisitors === 'number' ? summary.uniqueVisitors.toLocaleString() : summary.uniqueVisitors}
             </p>
           </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Total Conversions</h3>
-            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500">Total Conversions</h3>
+            <p className="text-2xl font-semibold text-gray-900">
               {typeof summary.totalConversions === 'number' ? summary.totalConversions.toLocaleString() : summary.totalConversions}
             </p>
           </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Avg. Time Spent</h3>
-            <p className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+          <div className="bg-white rounded-lg shadow p-6">
+            <h3 className="text-sm font-medium text-gray-500">Avg. Time Spent</h3>
+            <p className="text-2xl font-semibold text-gray-900">
               {summary.averageTimeSpent?.toFixed(1) || '0'}s
             </p>
           </div>
         </div>
       )}
 
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Event Trends</h2>
+      <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 dark:text-gray-100 mb-4">Device Analytics</h2>
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Device Analytics</h2>
         {deviceData && <DeviceAnalytics data={deviceData} />}
       </div>
 
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Geographic Distribution</h2>
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Geographic Distribution</h2>
         <GeoAnalytics data={geoData} />
       </div>
     </div>

app/(app)/events/page.tsx

@@ -1,227 +1,222 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import { addDays, format } from 'date-fns';
-import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
-import { Event } from '@/app/api/types';
+import { format } from 'date-fns';
+
+// 更复杂的事件类型定义
+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 EventsPage() {
-  const [dateRange, setDateRange] = useState({
-    from: new Date('2024-02-01'),
-    to: new Date('2025-03-05')
-  });
-
+  // 状态定义
+  const [events, setEvents] = useState<Event[]>([]);
   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 [filter, setFilter] = useState({
-    eventType: '',
-    linkId: '',
-    linkSlug: ''
-  });
-
   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
+    startDate: format(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd'),
+    endDate: format(new Date(), 'yyyy-MM-dd'),
+    urlId: '',
+    eventType: ''
   });
-
-  const [summary, setSummary] = useState<any>(null);
-
-  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'
-      });
-
-      if (filter.eventType) params.append('eventType', filter.eventType);
-      if (filter.linkId) params.append('linkId', filter.linkId);
-      if (filter.linkSlug) params.append('linkSlug', filter.linkSlug);
-
-      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');
-      }
-
-      const eventsData = data.data || data.events || [];
-      
-      if (pageNum === 1) {
-        setEvents(eventsData);
-      } else {
-        setEvents(prev => [...prev, ...eventsData]);
-      }
-
-      setHasMore(Array.isArray(eventsData) && eventsData.length === 50);
-    } 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(() => {
-    setPage(1);
-    setEvents([]);
-    setLoading(true);
-    fetchEvents(1);
-  }, [dateRange, filter]);
-
-  const loadMore = () => {
-    if (!loading && hasMore) {
-      const nextPage = page + 1;
-      setPage(nextPage);
-      fetchEvents(nextPage);
-    }
+    const loadEvents = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const startTime = `${filters.startDate}T00:00:00Z`;
+        const endTime = `${filters.endDate}T23:59:59Z`;
+        
+        const eventsData = await fetchEvents(
+          startTime,
+          endTime,
+          filters.urlId || undefined,
+          filters.eventType || undefined
+        );
+        
+        setEvents(eventsData);
+      } catch (err) {
+        setError('Failed to load events');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    loadEvents();
+  }, [filters]);
+  
+  // 处理筛选条件变化
+  const handleFilterChange = (name: string, value: string) => {
+    setFilters(prev => ({
+      ...prev,
+      [name]: value
+    }));
   };
-
-  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="flex justify-between items-center mb-8">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Events</h1>
-        <DateRangePicker
-          value={dateRange}
-          onChange={setDateRange}
-        />
+      {/* 页面标题 */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Events</h1>
+        <p className="mt-2 text-gray-600">View and analyze all events for your URLs</p>
       </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 className="bg-white rounded-lg shadow p-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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"
-            >
-              <option value="">All Types</option>
-              <option value="click">Click</option>
-              <option value="conversion">Conversion</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link ID
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              Start Date
             </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"
+              type="date"
+              value={filters.startDate}
+              onChange={e => handleFilterChange('startDate', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
             />
           </div>
+          
           <div>
-            <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Link Slug
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              End Date
+            </label>
+            <input
+              type="date"
+              value={filters.endDate}
+              onChange={e => handleFilterChange('endDate', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-500 mb-1">
+              URL ID
             </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"
+              value={filters.urlId}
+              onChange={e => handleFilterChange('urlId', e.target.value)}
+              className="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-sm text-gray-900"
+              placeholder="Filter by URL ID"
             />
           </div>
         </div>
       </div>
-
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+      
+      {/* 事件表格 */}
+      <div className="bg-white 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">
+          <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 dark:text-gray-400 uppercase tracking-wider">
+                <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 dark:text-gray-400 uppercase tracking-wider">
-                  Type
+                <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 dark:text-gray-400 uppercase tracking-wider">
-                  Link
+                <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 dark:text-gray-400 uppercase tracking-wider">
-                  Visitor
+                <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 dark:text-gray-400 uppercase tracking-wider">
-                  Location
+                <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 dark:text-gray-400 uppercase tracking-wider">
+                <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 dark:text-gray-400 uppercase tracking-wider">
-                  Conversion
+                <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 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)}
+            <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={`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'
+                    <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 || 'unknown'}
+                      {event.event_type}
                     </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 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-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">
+                  <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-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 className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {event.country && event.city ? `${event.city}, ${event.country}` : (event.country || '-')}
                   </td>
                 </tr>
               ))}
@@ -229,25 +224,23 @@ export default function EventsPage() {
           </table>
         </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="flex justify-center items-center p-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
           </div>
         )}
 
-        {!loading && hasMore && (
-          <div className="flex justify-center p-4">
-            <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"
-            >
-              Load More
-            </button>
+        {/* 错误状态 */}
+        {error && (
+          <div className="flex justify-center items-center p-8 text-red-500">
+            {error}
           </div>
         )}
 
-        {!loading && Array.isArray(events) && events.length === 0 && (
-          <div className="flex justify-center p-8 text-gray-500 dark:text-gray-400">
+        {/* 空状态 */}
+        {!loading && !error && events.length === 0 && (
+          <div className="flex justify-center items-center p-8 text-gray-500">
             No events found
           </div>
         )}

app/(app)/page.tsx

@@ -1,58 +1,64 @@
-import Link from 'next/link';
-
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="container mx-auto px-4">
-      <div className="max-w-2xl mx-auto py-16">
-        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-8">
+    <div className="container mx-auto px-4 py-8">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-8">
           Welcome to ShortURL Analytics
         </h1>
-        <div className="grid gap-6">
-          <Link
-            href="/dashboard"
-            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
-          >
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-              Dashboard
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              View your overall analytics and key metrics
-            </p>
-          </Link>
-          <Link
-            href="/events"
-            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
-          >
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-              Events
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              Track and analyze event data
-            </p>
-          </Link>
-          <Link
-            href="/analytics/geo"
-            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
-          >
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-              Geographic Analysis
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              Explore visitor locations and geographic patterns
-            </p>
-          </Link>
-          <Link
-            href="/analytics/devices"
-            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
-          >
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-              Device Analytics
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              Understand how users access your links
-            </p>
-          </Link>
-        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <a 
+          href="/dashboard" 
+          className="block p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+        >
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Dashboard
+          </h2>
+          
+          <p className="text-gray-600">
+            Get an overview of all your short URL analytics data.
+          </p>
+        </a>
+        
+        <a 
+          href="/events" 
+          className="block p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+        >
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Event Tracking
+          </h2>
+          
+          <p className="text-gray-600">
+            View detailed events for all your short URLs.
+          </p>
+        </a>
+        
+        <a 
+          href="/analytics" 
+          className="block p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+        >
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            URL Analysis
+          </h2>
+          
+          <p className="text-gray-600">
+            Analyze performance of specific short URLs.
+          </p>
+        </a>
+        
+        <a 
+          href="/account" 
+          className="block p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+        >
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            Account Settings
+          </h2>
+          
+          <p className="text-gray-600">
+            Manage your account and team settings.
+          </p>
+        </a>
       </div>
     </div>
   );