+
+ {/* ====== HEADER ====== */}
+
+
+
+ {time}
+
+
+ 实时监控中
+
+
+
+
+ {/* ====== KPI ROW ====== */}
+
+ {[
+ { label: '今日拉取 IOC 总数', value: MOCK.kpi.totalPulled.toLocaleString(), delta: MOCK.kpi.totalPulledDelta, color: BLUE },
+ { label: '命中内部资产', value: MOCK.kpi.internalHits.toLocaleString(), delta: MOCK.kpi.internalHitsDelta, color: ORANGE },
+ { label: '已执行封禁', value: MOCK.kpi.blocked.toLocaleString(), delta: MOCK.kpi.blockedDelta, color: GREEN },
+ { label: '待处置', value: MOCK.kpi.pending.toLocaleString(), delta: MOCK.kpi.pendingDelta, color: YELLOW },
+ { label: '自动化封禁率', value: MOCK.kpi.autoBlockRate + '%', delta: 0, color: GREEN },
+ ].map((kpi, i) => (
+
+
{kpi.label}
+
+
+ {kpi.value}
+
+ {kpi.delta !== 0 && }
+
+
+
+ ))}
+
+
+ {/* ====== MAIN CONTENT GRID ====== */}
+
+
+ {/* IOC 类型分布 */}
+
+
IOC 类型分布 (24h)
+ {MOCK.iocTypes.map((item, i) => (
+
+
+ {item.type}
+ {item.count.toLocaleString()}
+
+
+
+ ))}
+
+
+ 合计 {MOCK.iocTypes.reduce((s, i) => s + i.count, 0).toLocaleString()} 条 IOC
+
+
+
+
+ {/* 情报贡献排行 */}
+
+
情报源贡献排行
+ {MOCK.sourceRanking.map((item, i) => (
+
+
+ {item.name}
+
+ 高置信 {item.highConf.toLocaleString()}
+
+
+
+
+ ))}
+
+
+ {/* 置信度分布 */}
+
+
情报置信度分布
+
+ {[
+ { label: '高置信', value: MOCK.confidence.high, color: RED },
+ { label: '中置信', value: MOCK.confidence.medium, color: ORANGE },
+ { label: '低置信', value: MOCK.confidence.low, color: YELLOW },
+ ].map((item, i) => (
+
+
+ {item.value.toLocaleString()}
+
+
+
+ {item.label} ({((item.value / totalConf) * 100).toFixed(1)}%)
+
+
+ ))}
+
+
+
+
+ {/* ====== SECOND ROW ====== */}
+
+
+ {/* 实时封禁流水 */}
+
+
+ 实时封禁流水
+ LIVE
+
+
+ {MOCK.blockStream.map((item, i) => {
+ const isVisible = i >= streamIdx && i < streamIdx + 8;
+ const visibleIdx = i >= streamIdx ? i - streamIdx : -1;
+ return (
+
+
+ {item.time}
+
+
+ {item.action}
+
+
+ {item.target}
+
+
+ {item.type === 'block' ? '已封禁' : '待处置'}
+
+
+ );
+ })}
+
+
+
+
+ {/* 受影响资产 Top10 */}
+
+
受影响资产 Top10
+ {MOCK.affectedAssets.map((item, i) => (
+
+
+
+ #{i + 1}
+ {item.name}
+
+
+
+ {item.hits}
+
+
+ {levelLabel(item.level)}危
+
+
+
+
+
+ ))}
+
+
+
+ {/* ====== THIRD ROW: Decay Curve ====== */}
+
+
+
封禁效果衰减曲线（封禁后 24h 命中次数）
+
+
+
+
+ {/* ====== BOTTOM: Strategy Status ====== */}
+
+
+
封禁策略执行状态
+
+ {[
+ { label: '防火墙封禁', value: MOCK.strategy.firewall, color: RED },
+ { label: '零信任封禁', value: MOCK.strategy.zeroTrust, color: ORANGE },
+ { label: 'DNS 防火墙', value: MOCK.strategy.dnsFirewall, color: BLUE },
+ { label: 'EDR 拦截', value: MOCK.strategy.edr, color: GREEN },
+ ].map((item, i) => (
+
+
+ {item.label}
+
+ {item.value}
+
+
+
+
+ ))}
+
+
+
+
+ {MOCK.strategy.multiLayerRate}%
+
+
多层叠加率
+
+
+
+
+
+
+
+