feat: enhance site observability panel with improved latency color gradients and new UI components

src/web/components/ModelAnalysisPanel.tsx

@@ -205,9 +205,31 @@ export default function ModelAnalysisPanel({ data }: ModelAnalysisPanelProps) {
             <tbody>
               {callRanking.map((item, index) => {
                 const latMs = item.avgLatencyMs;
-                const latColor = latMs > 10000 ? '#ef4444' : latMs > 3000 ? '#f59e0b' : '#22c55e';
+                const latSec = latMs / 1000;
-                const latBg = latMs > 10000 ? 'rgba(239,68,68,0.08)' : latMs > 3000 ? 'rgba(245,158,11,0.08)' : 'rgba(34,197,94,0.08)';
+                // ≤15s green, 15-60s gradient green→yellow→red, >60s or failed → red
-                const latText = latMs >= 1000 ? `${(latMs / 1000).toFixed(latMs >= 10000 ? 0 : 1)}s` : `${latMs}ms`;
+                let latColor: string;
+                let latBg: string;
+                if (latSec <= 15) {
+                  // green gradient: 0s=#22c55e → 15s=blend towards yellow
+                  const t = Math.min(latSec / 15, 1);
+                  const r = Math.round(34 + t * (245 - 34));
+                  const g = Math.round(197 + t * (158 - 197));
+                  const b = Math.round(94 + t * (11 - 94));
+                  latColor = `rgb(${r},${g},${b})`;
+                  latBg = `rgba(${r},${g},${b},0.08)`;
+                } else if (latSec <= 60) {
+                  // yellow→red gradient: 15s=#f59e0b → 60s=#ef4444
+                  const t = Math.min((latSec - 15) / 45, 1);
+                  const r = Math.round(245 + t * (239 - 245));
+                  const g = Math.round(158 + t * (68 - 158));
+                  const b = Math.round(11 + t * (68 - 11));
+                  latColor = `rgb(${r},${g},${b})`;
+                  latBg = `rgba(${r},${g},${b},0.08)`;
+                } else {
+                  latColor = '#ef4444';
+                  latBg = 'rgba(239,68,68,0.08)';
+                }
+                const latText = latMs >= 1000 ? `${(latMs / 1000).toFixed(latSec >= 60 ? 0 : 1)}s` : `${latMs}ms`;
                 const rateColor = item.successRate >= 90 ? '#16a34a' : item.successRate >= 60 ? '#d97706' : '#dc2626';
                 const rateBg = item.successRate >= 90 ? 'rgba(34,197,94,0.1)' : item.successRate >= 60 ? 'rgba(245,158,11,0.1)' : 'rgba(239,68,68,0.1)';
 

src/web/index.css

@@ -4028,6 +4028,18 @@ textarea {
   margin-bottom: 4px;
 }
 
+.site-observability-count-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 12%, transparent));
+  color: var(--color-primary);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.6;
+}
+
 .site-observability-subtitle {
   font-size: 12px;
   color: var(--color-text-muted);
@@ -4049,9 +4061,161 @@ textarea {
   width: 14px;
   height: 14px;
   border-radius: 4px;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-border) 62%, transparent),
+    0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
+.site-observability-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.site-observability-toggle-btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
+}
+
+/* Grid layout: 2 columns by default, 3 on wide screens */
+.site-observability-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (min-width: 1400px) {
+  .site-observability-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 780px) {
+  .site-observability-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.site-observability-card {
+  padding: 12px 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-light);
+  background: color-mix(in srgb, var(--color-bg) 88%, white);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.site-observability-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+}
+
+.site-observability-card--inactive {
+  opacity: 0.55;
+  border-style: dashed;
+}
+
+.site-observability-card--inactive:hover {
+  opacity: 0.8;
+}
+
+.site-observability-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.site-observability-card-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.site-observability-card-title .site-observability-site-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.site-observability-card-metrics {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.site-observability-metric-main {
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.site-observability-metric-sep {
+  color: var(--color-border);
+  font-weight: 300;
+}
+
+.site-observability-log-link-compact {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-light);
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.site-observability-log-link-compact:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
+}
+
+.site-availability-strip-compact {
+  display: grid;
+  grid-template-columns: repeat(24, 10px);
+  gap: 4px;
+  align-items: end;
+  justify-content: space-between;
+  padding: 2px 0;
+}
+
+.site-availability-strip-compact .site-availability-cell {
+  width: 10px;
+  height: 24px;
+  border-radius: 999px;
+}
+
+.site-availability-cell-pill {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 68%, transparent);
+  backface-visibility: hidden;
+}
+
+/* Keep old list styles for backward compat */
 .site-observability-list {
   display: flex;
   flex-direction: column;
@@ -4171,7 +4335,7 @@ textarea {
   transform: translateY(-1px);
   box-shadow:
     inset 0 0 0 1px color-mix(in srgb, var(--color-border) 78%, transparent),
-    0 2px 6px rgba(15, 23, 42, 0.12);
+    0 2px 4px rgba(15, 23, 42, 0.12);
 }
 
 .site-availability-cell-link:focus-visible,
@@ -4313,6 +4477,20 @@ textarea {
     border-radius: 3px;
   }
 
+  .site-availability-strip-compact {
+    gap: 3px;
+  }
+
+  .site-availability-strip-compact .site-availability-cell {
+    height: 20px;
+    width: 9px;
+    border-radius: 999px;
+  }
+
+  .site-availability-strip-compact {
+    grid-template-columns: repeat(24, 9px);
+  }
+
   .monitor-iframe {
     height: calc(100vh - 320px);
     min-height: 460px;

src/web/pages/Dashboard.tsx

@@ -69,8 +69,30 @@ function getAvailabilityColor(value: number | null | undefined): string {
   if (typeof value !== 'number' || Number.isNaN(value) || !Number.isFinite(value)) {
     return 'var(--color-border-light)';
   }
-  const hue = Math.max(0, Math.min(120, value * 1.2));
+  const clamped = Math.max(0, Math.min(100, value));
-  return `hsl(${hue}, 72%, 45%)`;
+  const low = { r: 229, g: 80, b: 69 };   // 鲜亮红
+  const mid = { r: 217, g: 161, b: 37 };  // 鲜亮黄
+  const high = { r: 82, g: 196, b: 26 };  // 鲜亮绿
+
+  const lerp = (a: number, b: number, t: number) => Math.round(a + (b - a) * t);
+
+  let r: number;
+  let g: number;
+  let b: number;
+
+  if (clamped <= 50) {
+    const t = clamped / 50;
+    r = lerp(low.r, mid.r, t);
+    g = lerp(low.g, mid.g, t);
+    b = lerp(low.b, mid.b, t);
+  } else {
+    const t = (clamped - 50) / 50;
+    r = lerp(mid.r, high.r, t);
+    g = lerp(mid.g, high.g, t);
+    b = lerp(mid.b, high.b, t);
+  }
+
+  return `rgb(${r}, ${g}, ${b})`;
 }
 
 function padDateTimeSegment(value: number): string {
@@ -147,6 +169,7 @@ export default function Dashboard({ adminName = '\u7ba1\u7406\u5458' }: { adminN
   const [sites, setSites] = useState<any[]>([]);
   const [siteSpeedStates, setSiteSpeedStates] = useState<Record<string, SiteSpeedState>>({});
   const [trendDays, setTrendDays] = useState(7);
+  const [showInactiveSites, setShowInactiveSites] = useState(false);
   const toast = useToast();
   const normalizedAdminName = (adminName || '').trim() || '\u7ba1\u7406\u5458';
 
@@ -313,9 +336,14 @@ export default function Dashboard({ adminName = '\u7ba1\u7406\u5458' }: { adminN
   const performanceWindowSeconds = Math.max(1, safeNumber(data?.performance?.windowSeconds) || 60);
   const requestsPerMinute = safeNumber(data?.performance?.requestsPerMinute);
   const tokensPerMinute = safeNumber(data?.performance?.tokensPerMinute);
-  const siteAvailability: SiteAvailabilitySummary[] = Array.isArray(data?.siteAvailability)
+  const rawSiteAvailability: SiteAvailabilitySummary[] = Array.isArray(data?.siteAvailability)
     ? data.siteAvailability
     : [];
+  const activeSites = rawSiteAvailability
+    .filter((s) => s.totalRequests > 0)
+    .sort((a, b) => (b.totalRequests || 0) - (a.totalRequests || 0));
+  const inactiveSites = rawSiteAvailability.filter((s) => !s.totalRequests || s.totalRequests === 0);
+  const siteAvailability = showInactiveSites ? [...activeSites, ...inactiveSites] : activeSites;
 
   const getLatencyColor = (ms: number) => (
     ms <= 500
@@ -570,68 +598,79 @@ export default function Dashboard({ adminName = '\u7ba1\u7406\u5458' }: { adminN
             <div className="site-observability-title">
               <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12h4l3 8 4-16 3 8h4" /></svg>
               站点可用性观测
+              <span className="site-observability-count-badge">{activeSites.length}/{rawSiteAvailability.length}</span>
             </div>
-            <div className="site-observability-subtitle">最近 24 小时，每个色块代表 1 小时，按单次上游请求统计</div>
+            <div className="site-observability-subtitle">最近 24 小时 · 每色块 = 1h · 按使用量排序</div>
           </div>
-          <div className="site-observability-legend">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <span className="site-observability-legend-text">低</span>
+            <div className="site-observability-legend">
-            <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(0) }} />
+              <span className="site-observability-legend-text">低</span>
-            <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(50) }} />
+              <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(0) }} />
-            <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(100) }} />
+              <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(50) }} />
-            <span className="site-observability-legend-text">高</span>
+              <span className="site-observability-legend-chip" style={{ background: getAvailabilityColor(100) }} />
+              <span className="site-observability-legend-text">高</span>
+            </div>
+            {inactiveSites.length > 0 && (
+              <button
+                className="site-observability-toggle-btn"
+                onClick={() => setShowInactiveSites((v) => !v)}
+              >
+                {showInactiveSites ? '隐藏未使用' : `显示未使用 (${inactiveSites.length})`}
+              </button>
+            )}
           </div>
         </div>
 
         {siteAvailability.length > 0 ? (
-          <div className="site-observability-list">
+          <div className="site-observability-grid">
             {siteAvailability.map((site) => (
-              <div key={site.siteId} className="site-observability-row">
+              <div key={site.siteId} className={`site-observability-card${site.totalRequests > 0 ? '' : ' site-observability-card--inactive'}`}>
-                <div className="site-observability-row-header">
+                <div className="site-observability-card-top">
-                  <div className="site-observability-site-meta">
+                  <div className="site-observability-card-title">
-                    <div className="site-observability-site-name-row">
+                    <span className="site-observability-site-name">{site.siteName}</span>
-                      <span className="site-observability-site-name">{site.siteName}</span>
+                    {site.platform && (
-                      {site.platform && (
+                      <span className="site-observability-platform-badge">{site.platform}</span>
-                        <span className="site-observability-platform-badge">{site.platform}</span>
+                    )}
-                      )}
-                      {site.siteUrl && (
-                        <a
-                          href={site.siteUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="site-observability-link"
-                        >
-                          打开
-                        </a>
-                      )}
-                    </div>
-                    <div className="site-observability-site-stats">
-                      <span>{formatAvailabilityPercent(site.availabilityPercent)} 可用性</span>
-                      <span style={site.averageLatencyMs != null ? { color: getLatencyColor(site.averageLatencyMs) } : undefined}>
-                        {site.averageLatencyMs != null ? `${site.averageLatencyMs}ms` : '—'} 平均响应
-                      </span>
-                      <span>{Math.round(site.totalRequests || 0)} 次请求</span>
-                      <span>{Math.round(site.successCount || 0)} 成功 / {Math.round(site.failedCount || 0)} 失败</span>
-                    </div>
-                  </div>
-                  <div className="site-observability-row-actions">
-                    <Link
-                      to={buildSiteLast24hLogsRoute(site.siteId)}
-                      className="site-observability-log-link"
-                    >
-                      查看日志
-                    </Link>
                   </div>
+                  <Link
+                    to={buildSiteLast24hLogsRoute(site.siteId)}
+                    className="site-observability-log-link-compact"
+                    title="查看日志"
+                  >
+                    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+                  </Link>
                 </div>
-                <div className="site-availability-strip">
+                <div className="site-observability-card-metrics">
+                  <span className="site-observability-metric-main" style={{ color: getAvailabilityColor(site.availabilityPercent) }}>
+                    {formatAvailabilityPercent(site.availabilityPercent)}
+                  </span>
+                  <span className="site-observability-metric-sep">·</span>
+                  <span style={site.averageLatencyMs != null ? { color: getLatencyColor(site.averageLatencyMs) } : undefined}>
+                    {site.averageLatencyMs != null ? `${site.averageLatencyMs}ms` : '—'}
+                  </span>
+                  <span className="site-observability-metric-sep">·</span>
+                  <span>{Math.round(site.totalRequests || 0)} 次</span>
+                </div>
+                <div className="site-availability-strip-compact">
                   {site.buckets.map((bucket, index) => (
                     <Link
                       key={`${site.siteId}-${index}`}
                       to={buildAvailabilityBucketLogsRoute(site.siteId, bucket)}
-                      className="site-availability-cell site-availability-cell-link"
+                      className="site-availability-cell site-availability-cell-link site-availability-cell-pill"
                       style={{
                         background: getAvailabilityColor(bucket.availabilityPercent),
-                        opacity: bucket.totalRequests > 0 ? 1 : 0.35,
+                        opacity: bucket.totalRequests > 0 ? 1 : 0.3,
                       }}
+                      data-tooltip={[
+                        `时间：${formatAvailabilityBucketLabel(bucket)}`,
+                        bucket.totalRequests > 0
+                          ? `可用性：${formatAvailabilityPercent(bucket.availabilityPercent)}`
+                          : '可用性：无请求',
+                        `请求：${bucket.totalRequests} 次`,
+                        `成功/失败：${bucket.successCount}/${bucket.failedCount}`,
+                        bucket.averageLatencyMs != null ? `平均响应：${bucket.averageLatencyMs}ms` : '平均响应：—',
+                      ].join(' · ')}
+                      data-tooltip-align="start"
                       title={[
                         formatAvailabilityBucketLabel(bucket),
                         bucket.totalRequests > 0

src/web/pages/dashboard.site-observability.test.tsx

@@ -120,10 +120,13 @@ describe('Dashboard site observability panel', () => {
       expect(collectText(panel)).toContain('Demo Site');
       expect(collectText(panel)).toContain('75%');
       expect(collectText(panel)).toContain('320ms');
-      expect(collectText(panel)).toContain('查看日志');
+      expect(logLink.props.title).toBe('查看日志');
       expect(cells).toHaveLength(24);
       expect(String(cells[0]?.props.title || '')).toContain('可用性 100%');
       expect(String(cells[7]?.props.title || '')).toContain('可用性 0%');
+      expect(String(cells[0]?.props['data-tooltip'] || '')).toContain('时间：');
+      expect(String(cells[0]?.props['data-tooltip'] || '')).toContain('可用性：100%');
+      expect(String(cells[0]?.props['data-tooltip'] || '')).toContain('成功/失败：1/0');
       expect(String(logLink.props.href || logLink.props.to || '')).toContain('/logs?siteId=1');
     } finally {
       root?.unmount();