add filter

app/(app)/dashboard/page.tsx

@@ -8,6 +8,8 @@ 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';
 import { TeamSelector } from '@/app/components/ui/TeamSelector';
+import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
+import { TagSelector } from '@/app/components/ui/TagSelector';
 
 // 事件类型定义
 interface Event {
@@ -102,6 +104,11 @@ export default function DashboardPage() {
   
   // 添加团队选择状态 - 使用数组支持多选
   const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
+  // 添加项目选择状态 - 使用数组支持多选
+  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  // 添加标签选择状态 - 使用数组支持多选
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+  
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [summary, setSummary] = useState<EventsSummary | null>(null);
@@ -133,6 +140,20 @@ export default function DashboardPage() {
           });
         }
         
+        // 添加项目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([
           fetch(`${baseUrl}/summary?${params.toString()}`),
@@ -169,7 +190,7 @@ export default function DashboardPage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds]);
 
   if (loading) {
     return (
@@ -191,13 +212,27 @@ export default function DashboardPage() {
     <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">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
             value={selectedTeamIds}
             onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
             className="w-[250px]"
             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
             value={dateRange}
             onChange={setDateRange}
@@ -235,6 +270,68 @@ export default function DashboardPage() {
         </div>
       )}
 
+      {/* 显示项目选择信息 */}
+      {selectedProjectIds.length > 0 && (
+        <div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
+          <span className="text-blue-700 font-medium mr-2">
+            {selectedProjectIds.length === 1 ? 'Project filter:' : 'Projects filter:'}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {selectedProjectIds.map(projectId => (
+              <span key={projectId} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                {projectId}
+                <button
+                  onClick={() => setSelectedProjectIds(selectedProjectIds.filter(id => id !== projectId))}
+                  className="ml-1 text-blue-600 hover:text-blue-800"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+            {selectedProjectIds.length > 0 && (
+              <button
+                onClick={() => setSelectedProjectIds([])}
+                className="text-xs text-gray-500 hover:text-gray-700 underline"
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 显示标签选择信息 */}
+      {selectedTagIds.length > 0 && (
+        <div className="bg-blue-50 rounded-lg p-3 mb-6 flex items-center">
+          <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>
+      )}
+
+      {/* 仪表板内容 */}
+      <>
         {summary && (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
             <div className="bg-white rounded-lg shadow p-6">
@@ -380,6 +477,7 @@ export default function DashboardPage() {
             </div>
           )}
         </div>
+      </>
     </div>
   );
 }