From b03b660de757cf99e78220532b402d545aabb642 Mon Sep 17 00:00:00 2001
From: Jeff Gu <idevs@foxmail.com>
Date: Wed, 10 Jun 2026 11:39:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(channels):=20=E5=A2=9E=E5=8A=A0=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E6=91=98=E8=A6=81=E5=BE=BD=E7=AB=A0=E5=92=8C=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在频道页面中添加了模型摘要徽章和工具提示，以便用户能够更直观地了解每个频道的模型信息。通过引入新的 `renderModelSummaryBadge` 函数，徽章现在可以显示模型的启用状态，并在用户悬停时提供详细的模型名称。此更改旨在提升用户体验，使得频道信息更加清晰易懂，尤其是在处理多个模型时，用户能够快速识别各个模型的状态和相关信息。
---
 frontend/src/pages/Channels.tsx | 56 ++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index 3bcc80a..fe490a1 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -1105,6 +1105,29 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
   });
   const endpointPreview = getChannelEndpointPreview(formData.type, formData.endpoint);
   const endpointPlaceholder = getChannelEndpointPlaceholder(formData.type);
+  const renderModelSummaryBadge = (modelSummary: string, modelTooltipText: string, className: string) => {
+    const badge = (
+      <span
+        className={cn(className, modelTooltipText && "cursor-help")}
+        tabIndex={modelTooltipText ? 0 : undefined}
+      >
+        {modelSummary}
+      </span>
+    );
+
+    if (!modelTooltipText) {
+      return badge;
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{badge}</TooltipTrigger>
+        <TooltipContent className="max-w-sm whitespace-normal break-words leading-relaxed">
+          {modelTooltipText}
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
 
   if (view === "list") {
     return (
@@ -1172,17 +1195,23 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
             </CardContent>
           </Card>
         ) : (
-          <Card>
+          <TooltipProvider delayDuration={120}>
+            <Card>
             <div className="divide-y">
               {filteredData?.map((channel) => {
                 const rawConfig = parseChannelValue(channel);
                 const config = normalizeChannelFormConfig(rawConfig);
-                const modelCount = (config.models || []).length;
-                const enabledModelCount = (config.models || []).filter((model) => model.enabled !== false).length;
+                const models = config.models || [];
+                const modelCount = models.length;
+                const enabledModelCount = models.filter((model) => model.enabled !== false).length;
                 const modelSummary =
                   enabledModelCount === modelCount
                     ? t("channels.modelCount", { count: modelCount })
                     : t("channels.modelCountPartial", { enabled: enabledModelCount, total: modelCount });
+                const modelTooltipText = models
+                  .map((model) => (model.name || model.id || "").trim())
+                  .filter(Boolean)
+                  .join(", ");
                 const isMenuOpen = openMenu === channel.key;
                 const isEnabled = config.enabled !== false;
                 const isToggling =
@@ -1232,9 +1261,11 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
                         <span className="px-2 py-0.5 rounded bg-muted text-muted-foreground text-xs">
                           {getTypeLabel(config.type)}
                         </span>
-                        <span className="px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-500 text-xs">
-                          {modelSummary}
-                        </span>
+                        {renderModelSummaryBadge(
+                          modelSummary,
+                          modelTooltipText,
+                          "px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-500 text-xs",
+                        )}
                         <span className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-xs">
                           {config.weight ?? 0}
                         </span>
@@ -1276,9 +1307,11 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
                         {config.endpoint.replace(/^https?:\/\//, "").split("/")[0]}
                       </div>
                       <div className="text-xs text-center flex-shrink-0">
-                        <span className="text-indigo-500 bg-indigo-500/10 px-3 h-6 rounded-full flex items-center justify-center">
-                          {modelSummary}
-                        </span>
+                        {renderModelSummaryBadge(
+                          modelSummary,
+                          modelTooltipText,
+                          "text-indigo-500 bg-indigo-500/10 px-3 h-6 rounded-full flex items-center justify-center",
+                        )}
                       </div>
                       <div className="text-xs text-center flex-shrink-0">
                         <span className="text-amber-600 bg-amber-500/10 w-6 h-6 rounded-full flex items-center justify-center">
@@ -1310,11 +1343,12 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
                   </div>
                 );
               })}
-              {filteredData?.length === 0 && searchQuery && (
+              {filteredData?.length === 0 && (
                 <div className="p-8 text-center text-muted-foreground">{t("channels.noMatchingChannels")}</div>
               )}
             </div>
-          </Card>
+            </Card>
+          </TooltipProvider>
         )}
       </PageContainer>
     );