tags selector

app/(app)/analytics/page.tsx

@@ -5,6 +5,7 @@ import { subDays } from 'date-fns';
 import { DateRangePicker } from '@/app/components/ui/DateRangePicker';
 import { TeamSelector } from '@/app/components/ui/TeamSelector';
 import { ProjectSelector } from '@/app/components/ui/ProjectSelector';
+import { TagSelector } from '@/app/components/ui/TagSelector';
 
 export default function AnalyticsPage() {
   // 默认日期范围为最近7天
@@ -19,6 +20,14 @@ export default function AnalyticsPage() {
   
   // 添加项目选择状态 - 使用数组支持多选
   const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  
+  // 添加标签选择状态 - 使用数组支持多选
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+
+  // 分析是否有任何选择
+  const hasNoSelection = selectedTeamIds.length === 0 && 
+                          selectedProjectIds.length === 0 && 
+                          selectedTagIds.length === 0;
 
   return (
     <div className="container mx-auto px-4 py-8">
@@ -39,6 +48,13 @@ export default function AnalyticsPage() {
             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}
@@ -46,11 +62,11 @@ export default function AnalyticsPage() {
         </div>
       </div>
 
-      {/* 如果没有选择团队或项目，显示提示信息 */}
-      {selectedTeamIds.length === 0 && selectedProjectIds.length === 0 && (
+      {/* 如果没有选择任何项，显示提示信息 */}
+      {hasNoSelection && (
         <div className="flex items-center justify-center p-8 bg-gray-50 rounded-lg">
           <p className="text-gray-500">
-            Please select teams or projects to view analytics
+            Please select teams, projects, or tags to view analytics
           </p>
         </div>
       )}
@@ -74,7 +90,7 @@ export default function AnalyticsPage() {
       
       {/* 显示项目相关的分析数据 */}
       {selectedProjectIds.length > 0 && (
-        <div className="bg-white rounded-lg shadow p-6">
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h2 className="text-lg font-semibold text-gray-900 mb-4">
             Project Analytics ({selectedProjectIds.length} selected)
           </h2>
@@ -88,6 +104,23 @@ export default function AnalyticsPage() {
           </div>
         </div>
       )}
+      
+      {/* 显示标签相关的分析数据 */}
+      {selectedTagIds.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+            Tag Analytics ({selectedTagIds.length} selected)
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {selectedTagIds.map((tagId) => (
+              <div key={tagId} className="p-4 border rounded-md">
+                <h3 className="font-medium text-gray-800">Tag ID: {tagId}</h3>
+                <p className="text-gray-500 mt-2">Tag analytics will appear here</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }