team selector

app/(app)/analytics/page.tsx

@@ -13,8 +13,8 @@ export default function AnalyticsPage() {
     to: today // 今天
   });
 
-  // 添加团队选择状态
-  const [selectedTeamId, setSelectedTeamId] = useState<string>();
+  // 添加团队选择状态 - 使用数组支持多选
+  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
 
   return (
     <div className="container mx-auto px-4 py-8">
@@ -23,11 +23,10 @@ export default function AnalyticsPage() {
         
         <div className="flex flex-col gap-4 md:flex-row md:items-center">
           <TeamSelector
-            value={selectedTeamId}
-            onChange={setSelectedTeamId}
-            className="w-[200px]"
-            variant="surface"
-            color="blue"
+            value={selectedTeamIds}
+            onChange={(value) => setSelectedTeamIds(Array.isArray(value) ? value : [value])}
+            className="w-[250px]"
+            multiple={true}
           />
           <DateRangePicker
             value={dateRange}
@@ -37,18 +36,31 @@ export default function AnalyticsPage() {
       </div>
 
       {/* 如果没有选择团队，显示提示信息 */}
-      {!selectedTeamId && (
+      {selectedTeamIds.length === 0 && (
         <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
+            Please select one or more teams to view analytics
           </p>
         </div>
       )}
 
       {/* 如果选择了团队，这里可以显示团队相关的分析数据 */}
-      {selectedTeamId && (
+      {selectedTeamIds.length > 0 && (
         <div className="space-y-6">
-          {/* 这里添加实际的分析数据组件 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">
+              Analytics for {selectedTeamIds.length} selected {selectedTeamIds.length === 1 ? 'team' : 'teams'}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* You can map through selectedTeamIds and display data for each team */}
+              {selectedTeamIds.map((teamId) => (
+                <div key={teamId} className="p-4 border rounded-md">
+                  <h3 className="font-medium text-gray-800">Team ID: {teamId}</h3>
+                  <p className="text-gray-500 mt-2">Team analytics will appear here</p>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       )}
     </div>