feat: 完善服务监控与下游重投

src/apps/admin/system-monitoring/AdminSystemMonitoringPage.css

@@ -11,20 +11,13 @@
   align-items: center;
   display: flex;
   gap: 12px;
-  margin-top: 10px;
-}
-
-.system-monitoring-title-row h1 {
-  color: var(--color-text-strong);
-  font-size: 24px;
-  line-height: 1.25;
-  margin: 0;
+  margin-top: 8px;
 }
 
 .system-monitoring-title-row p {
   color: var(--color-text-muted);
   font-size: 13px;
-  margin: 4px 0 0;
+  margin: 0;
 }
 
 .system-monitoring-controls,
@@ -191,6 +184,24 @@
   grid-template-columns: minmax(0, 1fr) 300px;
 }
 
+.system-monitoring-service-metrics { padding: 18px; }
+.system-monitoring-service-metrics > header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.system-monitoring-service-metrics > header > div { align-items: center; color: var(--color-text-strong); display: flex; gap: 8px; }
+.system-monitoring-service-metrics > header > span { color: var(--color-text-muted); font-size: 12px; }
+.system-monitoring-service-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.system-monitoring-service-metric-grid article { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; }
+.system-monitoring-service-metric-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 9px; }
+.system-monitoring-service-metric-title > strong { color: var(--color-text-strong); font-size: 14px; }
+.system-monitoring-service-metric-row { align-items: center; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; min-height: 34px; }
+.system-monitoring-service-metric-row span { color: var(--color-text-muted); font-size: 12px; }
+.system-monitoring-service-metric-row strong { color: var(--color-text); font-size: 13px; }
+.system-monitoring-service-metric-empty { color: var(--color-text-subtle); font-size: 12px; line-height: 1.55; padding-top: 8px; }
+
 .system-monitoring-chart-stack {
   display: grid;
   gap: 16px;
@@ -285,6 +296,7 @@
   .system-monitoring-main-grid { grid-template-columns: minmax(0, 1fr); }
   .system-monitoring-services { order: -1; }
   .system-monitoring-service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .system-monitoring-service-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .system-monitoring-service { border-bottom: 0; border-right: 1px solid var(--color-border); padding: 11px 12px; }
   .system-monitoring-service:nth-child(3n) { border-right: 0; }
 }
@@ -299,7 +311,9 @@
   .system-monitoring-health__fact { border-left: 0; border-top: 1px solid var(--color-border); padding: 12px 0 0; }
   .system-monitoring-metrics,
   .system-monitoring-chart-stack,
-  .system-monitoring-service-list { grid-template-columns: minmax(0, 1fr); }
+  .system-monitoring-service-list,
+  .system-monitoring-service-metric-grid { grid-template-columns: minmax(0, 1fr); }
+  .system-monitoring-service-metrics > header { align-items: flex-start; flex-direction: column; gap: 6px; }
   .system-monitoring-service { border-bottom: 1px solid var(--color-border); border-right: 0; padding: 13px 0; }
   .system-monitoring-chart-card { padding: 14px 10px; }
 }

src/apps/admin/system-monitoring/AdminSystemMonitoringPage.tsx

@@ -69,6 +69,15 @@ function formatUptime(value: number | null) {
   return days > 0 ? `${days}天 ${hours}小时` : `${hours}小时`;
 }
 
+function formatServiceMetric(value: number | null, unit: 'percent' | 'seconds' | 'count' | 'per_second' | 'bytes') {
+  if (value === null) return '—';
+  if (unit === 'percent') return `${value.toFixed(2)}%`;
+  if (unit === 'seconds') return value < 1 ? `${Math.round(value * 1000)} ms` : `${value.toFixed(1)} s`;
+  if (unit === 'per_second') return `${value.toFixed(value < 10 ? 2 : 1)}/s`;
+  if (unit === 'bytes') return formatBytes(value);
+  return Math.round(value).toLocaleString('zh-CN');
+}
+
 function formatTime(value: string | null) {
   if (!value) return '暂无采样';
   return new Intl.DateTimeFormat('zh-CN', {
@@ -223,10 +232,7 @@ export function AdminSystemMonitoringPage() {
         <div>
           <Breadcrumb items={['系统管理', '系统监控']} />
           <div className="system-monitoring-title-row">
-            <div>
-              <h1>系统监控</h1>
-              <p>服务器资源、核心服务与活动告警</p>
-            </div>
+            <p>服务器资源、核心服务与活动告警</p>
             <Tag tone={status.tone}>{status.label}</Tag>
           </div>
         </div>
@@ -277,6 +283,29 @@ export function AdminSystemMonitoringPage() {
         <article className="surface system-monitoring-metric"><div className="system-monitoring-metric__icon is-green"><Network size={19} /></div><div><span>网络吞吐</span><strong>{formatRate(totalNetworkRate(metrics?.networkReceiveBytesPerSecond, metrics?.networkTransmitBytesPerSecond))}</strong><small>接收 {formatRate(metrics?.networkReceiveBytesPerSecond ?? null)} · 发送 {formatRate(metrics?.networkTransmitBytesPerSecond ?? null)}</small></div></article>
       </div>
 
+      <section className="surface system-monitoring-service-metrics">
+        <header>
+          <div><Database size={18} /><strong>服务关键指标</strong></div>
+          <span>固定低基数聚合，不含手机号、短信ID或SQL文本</span>
+        </header>
+        <div className="system-monitoring-service-metric-grid">
+          {(overview?.serviceMetrics ?? []).map((group) => (
+            <article key={group.key}>
+              <div className="system-monitoring-service-metric-title">
+                <strong>{group.name}</strong>
+                <Tag tone={group.available ? 'success' : 'neutral'}>{group.available ? '已采集' : '待采集'}</Tag>
+              </div>
+              {group.metrics.length ? group.metrics.map((metric) => (
+                <div className="system-monitoring-service-metric-row" key={metric.key}>
+                  <span>{metric.label}</span>
+                  <strong>{formatServiceMetric(metric.value, metric.unit)}</strong>
+                </div>
+              )) : <div className="system-monitoring-service-metric-empty">已监控服务可用性，待原生容量指标接入</div>}
+            </article>
+          ))}
+        </div>
+      </section>
+
       <div className="system-monitoring-main-grid">
         <div className="system-monitoring-chart-stack">
           <article className="surface system-monitoring-chart-card"><header><div><Cpu size={17} /><strong>CPU 趋势</strong></div><span>{formatPercent(metrics?.cpuUsagePercent ?? null)}</span></header>{overview?.trends.cpuUsagePercent.length ? <Chart height={230} option={cpuOption} /> : <EmptyChart />}</article>