From 7a290ca657e5ac236aaa547746566c69286ddccf Mon Sep 17 00:00:00 2001
From: xmanrui <841206367@qq.com>
Date: Mon, 2 Mar 2026 04:26:15 +0800
Subject: [PATCH] refine platform badge spacing and always show feishu suffix

---
 app/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 490b472..ed926c1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -185,6 +185,7 @@ interface PlatformTestResult {
 // 平台标签颜色
 function PlatformBadge({ platform, agentId, gatewayPort, gatewayToken, gatewayHost, t, testResult }: { platform: Platform; agentId: string; gatewayPort: number; gatewayToken?: string; gatewayHost?: string; t: TFunc; testResult?: PlatformTestResult | null }) {
   const pName = platform.name;
+  const badgeWidthClass = "w-[7.25rem]";
 
   let sessionKey: string;
   if (pName === "feishu" && platform.botOpenId) {
@@ -215,29 +216,29 @@ function PlatformBadge({ platform, agentId, gatewayPort, gatewayToken, gatewayHo
     : t("platform.discord");
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="inline-flex items-center gap-1.5 max-w-full">
       <a
         href={sessionUrl}
         target="_blank"
         rel="noopener noreferrer"
         onClick={(e) => e.stopPropagation()}
         title={t("agent.openChat")}
-        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium cursor-pointer transition-all hover:scale-105 hover:shadow-md ${badgeStyle}`}
+        className={`inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-xs font-medium cursor-pointer transition-all hover:scale-105 hover:shadow-md min-w-0 ${badgeWidthClass} ${badgeStyle}`}
       >
-        {label}
-        {platform.accountId && (
-          <span className="opacity-60">({platform.accountId})</span>
+        <span className="truncate">{label}</span>
+        {pName === "feishu" && platform.accountId && (
+          <span className="opacity-60 truncate max-w-[3.25rem]">({platform.accountId})</span>
         )}
         <span className="opacity-50 text-[10px]">↗</span>
       </a>
       {testResult === undefined ? (
-        <span className="text-xs text-[var(--text-muted)]">--</span>
+        <span className="inline-flex w-5 justify-end text-xs text-[var(--text-muted)]">--</span>
       ) : testResult === null ? (
-        <span className="text-xs text-[var(--text-muted)] animate-pulse">⏳</span>
+        <span className="inline-flex w-5 justify-end text-xs text-[var(--text-muted)] animate-pulse">⏳</span>
       ) : testResult.ok ? (
-        <span className="text-green-400 text-sm cursor-help" title={`${testResult.elapsed}ms${testResult.detail ? ' · ' + testResult.detail : testResult.reply ? ' · ' + testResult.reply : ''}`}>✅</span>
+        <span className="inline-flex w-5 justify-end text-green-400 text-sm cursor-help" title={`${testResult.elapsed}ms${testResult.detail ? ' · ' + testResult.detail : testResult.reply ? ' · ' + testResult.reply : ''}`}>✅</span>
       ) : (
-        <span className="text-red-400 text-sm cursor-help" title={testResult.error || ''}>❌</span>
+        <span className="inline-flex w-5 justify-end text-red-400 text-sm cursor-help" title={testResult.error || ''}>❌</span>
       )}
     </div>
   );
@@ -822,7 +823,6 @@ export default function Home() {
     if (!p?.id || !p.accessMode) continue;
     providerAccessModeMap[p.id] = p.accessMode;
   }
-
   return (
     <div className="p-3 max-w-6xl mx-auto">
       {/* 头部 */}