show label

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 ')})`);

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));
         }
         
         // 发送请求

app/page.tsx

@@ -97,6 +97,7 @@ const extractEventInfo = (event: Event) => {
     eventTime: event.created_at || event.event_time,
     linkName: event.link_label || linkAttrs?.name || eventAttrs?.link_name || event.link_slug || '-',
     originalUrl: event.link_original_url || eventAttrs?.origin_url || '-',
+    fullUrl: eventAttrs?.full_url || '-',
     eventType: event.event_type || '-',
     visitorId: event.visitor_id?.substring(0, 8) || '-',
     referrer: eventAttrs?.referrer || '-',
@@ -124,9 +125,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 +172,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 +224,7 @@ export default function HomePage() {
     };
 
     fetchData();
-  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagIds, currentPage, pageSize]);
+  }, [dateRange, selectedTeamIds, selectedProjectIds, selectedTagNames, currentPage, pageSize]);
 
   if (loading) {
     return (
@@ -272,8 +272,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 +355,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
@@ -424,6 +436,9 @@ export default function HomePage() {
                 <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Original URL
                 </th>
+                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Full URL
+                </th>
                 <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                   Event Type
                 </th>
@@ -463,6 +478,11 @@ export default function HomePage() {
                         {info.originalUrl}
                       </a>
                     </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-blue-600">
+                      <a href={info.fullUrl} className="hover:underline truncate max-w-xs block" target="_blank" rel="noopener noreferrer">
+                        {info.fullUrl}
+                      </a>
+                    </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm">
                       <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                         info.eventType === 'click' 
@@ -772,7 +792,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>

scripts/db/sql/clickhouse/add_req_full_path.sql

@@ -0,0 +1,9 @@
+-- add_req_full_path.sql
+-- Add req_full_path column to the shorturl_analytics.events table
+ALTER TABLE
+  shorturl_analytics.events
+ADD
+  COLUMN IF NOT EXISTS req_full_path String COMMENT 'Full request path including query parameters';
+
+-- Display the updated table structure
+DESCRIBE TABLE shorturl_analytics.events;