From d1d21948b652826aaf643ace26aef99bc570ad7e Mon Sep 17 00:00:00 2001
From: William Tso <vitalitymailg@gmail.com>
Date: Thu, 3 Apr 2025 17:56:16 +0800
Subject: [PATCH] tag fix

---
 app/api/events/utm/route.ts               |  8 +++-
 app/components/analytics/UtmAnalytics.tsx |  4 +-
 app/page.tsx                              | 45 ++++++++++++++---------
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/app/api/events/utm/route.ts b/app/api/events/utm/route.ts
index 6653cc0..2286445 100644
--- a/app/api/events/utm/route.ts
+++ b/app/api/events/utm/route.ts
@@ -29,6 +29,7 @@ export async function GET(request: NextRequest) {
     const teamIds = searchParams.getAll('teamId');
     const projectIds = searchParams.getAll('projectId');
     const tagIds = searchParams.getAll('tagId');
+    const tagNames = searchParams.getAll('tagName');
     
     // 获取UTM类型参数
     const utmType = searchParams.get('utmType') || 'source';
@@ -72,9 +73,12 @@ export async function GET(request: NextRequest) {
     }
     
     // 添加标签筛选
-    if (tagIds && tagIds.length > 0) {
+    if ((tagIds && tagIds.length > 0) || (tagNames && tagNames.length > 0)) {
+      // 优先使用tagNames，如果有的话
+      const tagsToUse = tagNames.length > 0 ? tagNames : tagIds;
+      
       // 使用与buildFilter函数相同的处理方式
-      const tagConditions = tagIds.map(tag => 
+      const tagConditions = tagsToUse.map(tag => 
         `link_tags LIKE '%${tag}%'`
       );
       conditions.push(`(${tagConditions.join(' OR ')})`);
diff --git a/app/components/analytics/UtmAnalytics.tsx b/app/components/analytics/UtmAnalytics.tsx
index a65b7cb..7b05a1e 100644
--- a/app/components/analytics/UtmAnalytics.tsx
+++ b/app/components/analytics/UtmAnalytics.tsx
@@ -50,9 +50,9 @@ export default function UtmAnalytics({ startTime, endTime, linkId, teamIds, proj
           projectIds.forEach(id => params.append('projectId', id));
         }
         
-        // 添加标签ID参数
+        // 添加标签名称参数
         if (tagIds && tagIds.length > 0) {
-          tagIds.forEach(id => params.append('tagId', id));
+          tagIds.forEach(tagName => params.append('tagName', tagName));
         }
         
         // 发送请求
diff --git a/app/page.tsx b/app/page.tsx
index 2080a74..129c54d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -124,9 +124,8 @@ export default function HomePage() {
   const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
   // 添加项目选择状态 - 使用数组支持多选
   const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
-  // 添加标签选择状态 - 使用数组支持多选
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-  
+  // 添加标签名称状态 - 用于在UI中显示和API请求
+  const [selectedTagNames, setSelectedTagNames] = useState<string[]>([]);
   // 添加分页状态
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
@@ -172,10 +171,10 @@ export default function HomePage() {
           });
         }
         
-        // 添加标签ID参数 - 支持多个标签
-        if (selectedTagIds.length > 0) {
-          selectedTagIds.forEach(tagId => {
-            params.append('tagId', tagId);
+        // 添加标签名称参数 - 支持多个标签
+        if (selectedTagNames.length > 0) {
+          selectedTagNames.forEach(tagName => {
+            params.append('tagName', tagName);
           });
         }
 
@@ -224,7 +223,7 @@ export default function HomePage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds, currentPage, pageSize]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagNames, currentPage, pageSize]);
 
   if (loading) {
     return (
@@ -272,8 +271,17 @@ export default function HomePage() {
             teamIds={selectedTeamIds.length > 0 ? selectedTeamIds : undefined}
           />
           <TagSelector
-            value={selectedTagIds}
-            onChange={(value) => setSelectedTagIds(Array.isArray(value) ? value : [value])}
+            value={selectedTagNames}
+            onChange={(value) => {
+              // TagSelector返回的是标签名称
+              if (Array.isArray(value)) {
+                setSelectedTagNames(value);
+              } else {
+                setSelectedTagNames(value ? [value] : []);
+              }
+              // 我们需要将标签名称映射回ID，但由于TagSelector内部已经做了处理
+              // 这里不需要额外的映射代码，selectedTagNames存储名称即可
+            }}
             className="w-[250px]"
             multiple={true}
             teamIds={selectedTeamIds.length > 0 ? selectedTeamIds : undefined}
@@ -346,26 +354,29 @@ export default function HomePage() {
       )}
 
       {/* 显示标签选择信息 */}
-      {selectedTagIds.length > 0 && (
+      {selectedTagNames.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:'}
+            {selectedTagNames.length === 1 ? 'Tag filter:' : 'Tags filter:'}
           </span>
           <div className="flex flex-wrap gap-2">
-            {selectedTagIds.map(tagName => (
+            {selectedTagNames.map(tagName => (
               <span key={tagName} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                 {tagName}
                 <button
-                  onClick={() => setSelectedTagIds(selectedTagIds.filter(name => name !== tagName))}
+                  onClick={() => {
+                    // 移除对应的标签名称
+                    setSelectedTagNames(selectedTagNames.filter(name => name !== tagName));
+                  }}
                   className="ml-1 text-blue-600 hover:text-blue-800"
                 >
                   ×
                 </button>
               </span>
             ))}
-            {selectedTagIds.length > 0 && (
+            {selectedTagNames.length > 0 && (
               <button
-                onClick={() => setSelectedTagIds([])}
+                onClick={() => setSelectedTagNames([])}
                 className="text-xs text-gray-500 hover:text-gray-700 underline"
               >
                 Clear all
@@ -772,7 +783,7 @@ export default function HomePage() {
           endTime={format(dateRange.to, "yyyy-MM-dd'T'HH:mm:ss'Z'")}
           teamIds={selectedTeamIds}
           projectIds={selectedProjectIds}
-          tagIds={selectedTagIds}
+          tagIds={selectedTagNames}
         />
       </>
     </div>