From af7b6beba8151cef4c49cf9b88006a4a9399534c Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 9 Apr 2026 20:57:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20Tab4=20by=5Fanomaly=20=E6=AC=84?=
 =?UTF-8?q?=E4=BD=8D=E4=BF=AE=E6=AD=A3=20=E2=80=94=20=E9=81=A9=E9=85=8D?=
 =?UTF-8?q?=E7=9C=9F=E5=AF=A6=20API=20=E7=B5=90=E6=A7=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

by_anomaly 回傳結構為 {alert_name, anomaly_key, disposition:{total,auto_repair,auto_rate,...}}
修正：
- 排序依 disposition.total（非 count）
- 名稱顯示用 alert_name || anomaly_key
- auto_rate 取自 disposition.auto_rate * 100
- 計數取自 disposition.total

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 35dc1db8..c980b3f0 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -300,23 +300,28 @@ function DispositionTab() {
 
       {/* By Anomaly Top 5 */}
       {Array.isArray(data?.by_anomaly) && data.by_anomaly.length > 0 && (() => {
-        const top5 = [...data.by_anomaly].sort((a: any, b: any) => b.count - a.count).slice(0, 5)
-        const maxCount = top5[0]?.count || 1
+        const top5 = [...data.by_anomaly]
+          .sort((a: any, b: any) => (b.disposition?.total ?? 0) - (a.disposition?.total ?? 0))
+          .slice(0, 5)
+        const maxCount = top5[0]?.disposition?.total || 1
         return (
           <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 10, padding: '14px 16px', marginBottom: 16 }}>
             <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#87867f', marginBottom: 10 }}>{t('byAnomalyTitle')}</div>
             {top5.map((item: any, i: number) => {
-              const autoRate = item.count > 0 ? Math.round((item.auto_repair ?? 0) / item.count * 100) : 0
+              const disp = item.disposition ?? {}
+              const count = disp.total ?? 0
+              const autoRate = Math.round((disp.auto_rate ?? 0) * 100)
+              const label = item.alert_name || item.anomaly_key || '--'
               return (
                 <div key={i} style={{ marginBottom: 8 }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
-                    <span style={{ color: '#141413', fontWeight: 500, maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.anomaly_type || item.type || '--'}</span>
+                    <span style={{ color: '#141413', fontWeight: 500, maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
                     <span style={{ color: '#87867f', fontFamily: "'JetBrains Mono', monospace", fontSize: 10 }}>
-                      {item.count} · {t('byAnomalyAutoRate', { pct: autoRate })}
+                      {count} · {t('byAnomalyAutoRate', { pct: autoRate })}
                     </span>
                   </div>
                   <div style={{ height: 6, background: '#f0ede5', borderRadius: 3, overflow: 'hidden' }}>
-                    <div style={{ height: '100%', width: `${(item.count / maxCount) * 100}%`, background: autoRate >= 80 ? '#22C55E' : autoRate >= 50 ? '#F59E0B' : '#cc2200', borderRadius: 3, transition: 'width 0.4s ease' }} />
+                    <div style={{ height: '100%', width: `${(count / maxCount) * 100}%`, background: autoRate >= 80 ? '#22C55E' : autoRate >= 50 ? '#F59E0B' : '#cc2200', borderRadius: 3, transition: 'width 0.4s ease' }} />
                   </div>
                 </div>
               )