style(channels): simplify channel status indicators (#862)

src/pages/Channels/index.tsx

@@ -407,20 +407,8 @@ export function Channels() {
     [diagnosticsSnapshot],
   );
 
-  const statusTone = useCallback((status: ChannelGroupItem['status']) => {
+
-    switch (status) {
+
-      case 'connected':
-        return 'bg-green-500/10 text-green-700 dark:text-green-300 border-green-500/20';
-      case 'connecting':
-        return 'bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/20';
-      case 'degraded':
-        return 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-300 border-yellow-500/20';
-      case 'error':
-        return 'bg-destructive/10 text-destructive border-destructive/20';
-      default:
-        return 'bg-black/5 dark:bg-white/5 text-muted-foreground border-black/10 dark:border-white/10';
-    }
-  }, []);
 
   const statusLabel = useCallback((status: ChannelGroupItem['status']) => {
     return t(`account.connectionStatus.${status}`);
@@ -630,9 +618,17 @@ export function Channels() {
                           </h3>
                           <p className="text-[12px] text-muted-foreground">{group.channelType}</p>
                         </div>
-                        <Badge className={cn('rounded-full border px-2.5 py-0.5 text-[11px] font-medium', statusTone(group.status))}>
+                        <span
-                          {statusLabel(group.status)}
+                          className={cn(
-                        </Badge>
+                            'inline-block h-2.5 w-2.5 rounded-full shrink-0',
+                            group.status === 'connected' && 'bg-green-500',
+                            group.status === 'connecting' && 'bg-sky-500 animate-pulse',
+                            group.status === 'degraded' && 'bg-yellow-500',
+                            group.status === 'error' && 'bg-red-500',
+                            group.status === 'disconnected' && 'bg-gray-400',
+                          )}
+                          title={statusLabel(group.status)}
+                        />
                       </div>
 
                       <div className="flex items-center gap-2">
@@ -684,9 +680,6 @@ export function Channels() {
                             <div className="min-w-0">
                               <div className="flex items-center gap-2">
                                 <p className="text-[13px] font-medium text-foreground truncate">{displayName}</p>
-                                <Badge className={cn('rounded-full border px-2 py-0.5 text-[10px] font-medium', statusTone(account.status))}>
-                                  {statusLabel(account.status)}
-                                </Badge>
                               </div>
                               {account.lastError && (
                                 <div className="text-[12px] text-destructive mt-1">{account.lastError}</div>

tests/e2e/channels-health-diagnostics.spec.ts

@@ -138,7 +138,7 @@ test.describe('Channels health diagnostics', () => {
     await expect(page.getByTestId('channels-page')).toBeVisible();
     await expect(page.getByTestId('channels-health-banner')).toBeVisible();
     await expect(page.getByText(/Gateway degraded|网关状态异常|ゲートウェイ劣化/)).toBeVisible();
-    await expect(page.locator('div.rounded-2xl').getByText(/Degraded|异常降级|劣化中/).first()).toBeVisible();
+    await expect(page.locator('div.rounded-2xl').getByTitle(/Degraded|异常降级|劣化中/).first()).toBeVisible();
 
     await page.getByTestId('channels-restart-gateway').click();
     await page.getByTestId('channels-copy-diagnostics').click();