diff --git a/vehicle-data-platform/apps/web/src/pages/OpsQuality.tsx b/vehicle-data-platform/apps/web/src/pages/OpsQuality.tsx
index ee21dde8..08c19059 100644
--- a/vehicle-data-platform/apps/web/src/pages/OpsQuality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/OpsQuality.tsx
@@ -75,6 +75,33 @@ type OpsActionItem = {
acceptance: string;
};
+const customerEvidencePaths = [
+ {
+ title: '车辆不在线',
+ action: '看实时写入',
+ evidence: 'Redis 在线 Key、快速写入 pending、NATS ACK',
+ detail: '解释客户看到车辆离线时,是否是实时帧、在线 TTL 或快速写入链路中断。'
+ },
+ {
+ title: '轨迹缺数据',
+ action: '看历史消费',
+ evidence: 'Kafka Lag、历史批次、历史行待写',
+ detail: '解释轨迹回放或历史明细缺失时,数据是否卡在 Kafka、TDengine 或批量写入。'
+ },
+ {
+ title: '无法导出',
+ action: '看存储/API',
+ evidence: 'TDengine、MySQL、请求超时、运行版本',
+ detail: '解释客户导出失败、查询慢或字段缺失时,核心存储和 API 是否可用。'
+ },
+ {
+ title: '地图不可用',
+ action: '看高德配置',
+ evidence: 'Web JS Key、服务端 API Key、安全代理',
+ detail: '解释实时地图、轨迹回放和地理能力不可用时,地图配置是否完整且安全。'
+ }
+];
+
const emptyCapacityMetrics: CapacityMetrics = {
activeConnections: 0,
kafkaLag: 0,
@@ -457,8 +484,8 @@ export function OpsQuality() {
return (
} aria-label="复制容量交接" disabled={!health} onClick={() => copyText(opsCapacityHandoffText(health), '运维容量交接')}>复制容量交接
@@ -468,6 +495,32 @@ export function OpsQuality() {
)}
/>
+
+
+
+ 客户问题解释路径
+ 运维证据只在客户问题需要解释时打开,默认不参与车辆服务主流程。
+
+
证据层
+
+
+ {customerEvidencePaths.map((item) => (
+
+ ))}
+
+
+
{formatNumber(health?.kafkaLag)}
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index cf0db422..fb191b0a 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -5624,6 +5624,69 @@ button.vp-realtime-command-item:focus-visible {
line-height: 32px;
}
+.vp-ops-evidence-layer-card {
+ margin-bottom: 16px;
+}
+
+.vp-ops-evidence-layer-head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 16px;
+ margin-bottom: 14px;
+}
+
+.vp-ops-evidence-path-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 12px;
+}
+
+.vp-ops-evidence-path-item {
+ min-height: 168px;
+ padding: 14px;
+ border: 1px solid var(--vp-border);
+ border-radius: var(--vp-radius);
+ background: #fbfcff;
+ color: inherit;
+ text-align: left;
+ cursor: pointer;
+ display: grid;
+ gap: 8px;
+ align-content: start;
+}
+
+.vp-ops-evidence-path-item:hover {
+ border-color: var(--vp-primary);
+ box-shadow: 0 10px 24px rgba(21, 101, 216, 0.08);
+}
+
+.vp-ops-evidence-path-title {
+ color: var(--vp-text);
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 22px;
+}
+
+.vp-ops-evidence-path-action {
+ color: var(--vp-primary);
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 28px;
+}
+
+.vp-ops-evidence-path-evidence {
+ color: var(--vp-text);
+ font-size: 13px;
+ line-height: 20px;
+}
+
+.vp-ops-evidence-path-detail {
+ color: var(--vp-text-muted);
+ font-size: 13px;
+ line-height: 20px;
+}
+
.vp-risk-runbook {
margin-top: 12px;
padding: 12px;
@@ -9865,6 +9928,7 @@ button.vp-realtime-command-item:focus-visible {
.vp-notification-reachability-grid,
.vp-sla-summary,
.vp-risk-grid,
+ .vp-ops-evidence-path-grid,
.vp-ops-action-grid,
.vp-alert-ops-grid,
.vp-stat-workspace,
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index db35f807..cc78c585 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -4391,7 +4391,7 @@ test('renders notification rules as a standalone operations page', async () => {
expect(window.location.hash).toBe('#/detail?keyword=VIN-RULES-001');
});
-test('renders ops quality as a standalone runtime health page', async () => {
+test('renders ops quality as a separated evidence layer for customer vehicle service', async () => {
window.history.replaceState(null, '', '/#/ops-quality');
const writeText = vi.fn(() => Promise.resolve());
Object.defineProperty(navigator, 'clipboard', {
@@ -4512,7 +4512,14 @@ test('renders ops quality as a standalone runtime health page', async () => {
render();
- expect(await screen.findByRole('heading', { name: '运维质量' })).toBeInTheDocument();
+ expect(await screen.findByRole('heading', { name: '运维证据层' })).toBeInTheDocument();
+ expect(screen.getByText('客户主流程外的链路、容量、存储和地图配置证据,用来解释车辆实时、轨迹、统计、导出或告警为何不可用。')).toBeInTheDocument();
+ expect(screen.getByText('客户问题解释路径')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户问题解释路径 车辆不在线 看实时写入' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户问题解释路径 轨迹缺数据 看历史消费' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户问题解释路径 无法导出 看存储/API' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '客户问题解释路径 地图不可用 看高德配置' })).toBeInTheDocument();
+ expect(screen.getByText('运维证据只在客户问题需要解释时打开,默认不参与车辆服务主流程。')).toBeInTheDocument();
expect(screen.getByText('platform-ops-test')).toBeInTheDocument();
expect(screen.getAllByText('42').length).toBeGreaterThanOrEqual(1);
expect(screen.getAllByText('1,234').length).toBeGreaterThanOrEqual(1);