From 608d5bbd92e717e288a88691815addd604517d2f Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Mon, 17 Aug 2026 19:46:21 +0800
Subject: [PATCH] fix(web): reuse Dify Tag in quality table (WTA-2076)

Linear: https://linear.app/dify/issue/WTA-2076/uiux-%E8%B4%A8%E9%87%8F%E9%A1%B5%E6%A0%87%E7%AD%BE%E5%88%97%E5%A4%8D%E7%94%A8-dify-tag-%E6%8E%A7%E4%BB%B6
---
 web/features/new-rag/quality/quality-page.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/features/new-rag/quality/quality-page.tsx b/web/features/new-rag/quality/quality-page.tsx
index f9a8b8103f4..f0686efaf5e 100644
--- a/web/features/new-rag/quality/quality-page.tsx
+++ b/web/features/new-rag/quality/quality-page.tsx
@@ -27,6 +27,7 @@ import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-q
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
+import Tag from '@/app/components/base/tag'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { consoleClient, consoleQuery } from '@/service/client'
 import { newKnowledgeQualityPath, newKnowledgeRetrievalTestPath } from '../routes'
@@ -536,12 +537,9 @@ export function QualityPage({ knowledgeSpaceId }: { knowledgeSpaceId: string })
                 />
                 <div className="flex min-w-0 gap-1 overflow-hidden">
                   {visibleTags(item.tags).map((tag) => (
-                    <span
-                      key={tag}
-                      className="h-4 shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 system-2xs-medium text-text-tertiary"
-                    >
+                    <Tag key={tag} color="gray" bordered className="max-w-full min-w-0 truncate">
                       {tag}
-                    </span>
+                    </Tag>
                   ))}
                 </div>
                 <Popover>