feat(platform): add customer alert SLA view

vehicle-data-platform/apps/web/src/pages/Quality.tsx

@@ -798,6 +798,8 @@ export function Quality({
     : impactSeverity.label === '需关注'
       ? { label: '当日跟进', color: 'orange' as const, detail: '纳入当日数据治理，持续观察来源恢复和车辆证据。' }
       : { label: '持续观察', color: 'green' as const, detail: '当前没有客户侧高优先级影响，保持常规监控。' };
+  const primaryPolicy = policies.find((item) => item.name.startsWith('P0')) ?? policies[0];
+  const secondaryPolicy = policies.find((item) => item.name.startsWith('P1')) ?? policies[1] ?? primaryPolicy;
   const primaryProtocolImpact = summaryProtocols[0];
   const primaryIssueImpact = summaryIssueTypes[0];
   const impactCards = [
@@ -807,6 +809,40 @@ export function Quality({
     { label: '主要问题', value: primaryIssueImpact ? qualityIssueLabel(primaryIssueImpact.name) : '-', detail: primaryIssueImpact ? `${primaryIssueImpact.count.toLocaleString()} 条` : '暂无问题类型', color: primaryIssueImpact ? 'orange' as const : 'green' as const },
     { label: '容量与存储', value: storageWritable ? '可写' : '异常', detail: `Kafka Lag ${formatLag(health?.kafkaLag)} / 发现 ${capacityFindingCount} 项`, color: storageWritable && capacityFindingCount === 0 ? 'green' as const : 'red' as const }
   ];
+  const customerNotificationSlaItems = [
+    {
+      label: '客户影响范围',
+      value: `${issueVehicleCount.toLocaleString()} 辆车`,
+      detail: `${issueRecordCount.toLocaleString()} 条告警记录，优先判断实时、轨迹和里程是否受影响。`,
+      color: issueVehicleCount > 0 ? 'orange' as const : 'green' as const,
+      action: '影响摘要',
+      onClick: () => copyBusinessImpact()
+    },
+    {
+      label: '通知负责人',
+      value: primaryPolicy?.target || '待配置',
+      detail: primaryPolicy ? `${primaryPolicy.name} / ${primaryPolicy.channel}` : '缺少通知策略，建议先配置责任团队。',
+      color: primaryPolicy ? 'blue' as const : 'orange' as const,
+      action: '通知规则',
+      onClick: () => onOpenNotificationRules?.()
+    },
+    {
+      label: '升级时限',
+      value: formatEscalationMinutes(primaryPolicy?.escalationMinutes) || '未配置',
+      detail: secondaryPolicy && secondaryPolicy !== primaryPolicy ? `P1 参考：${secondaryPolicy.target} / ${formatEscalationMinutes(secondaryPolicy.escalationMinutes) || '未配置'}` : '高优先级事件需要明确超时升级路径。',
+      color: priorityP0Count > 0 ? 'red' as const : priorityP1Count > 0 ? 'orange' as const : 'green' as const,
+      action: '复制策略',
+      onClick: () => copyPolicyRunbook()
+    },
+    {
+      label: '恢复验收',
+      value: primaryPolicy?.acceptanceCriteria ? '有标准' : '待补充',
+      detail: primaryPolicy?.acceptanceCriteria || '车辆服务状态恢复，实时、轨迹、历史和里程证据可查询。',
+      color: primaryPolicy?.acceptanceCriteria ? 'green' as const : 'orange' as const,
+      action: '交接包',
+      onClick: () => copyNotificationHandoff()
+    }
+  ];
 
   const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
     setLoadingIssues(true);
@@ -1057,6 +1093,44 @@ export function Quality({
           </div>
         </div>
       </Card>
+      <Card bordered title="客户通知 SLA" style={{ marginTop: 16 }}>
+        <div className="vp-alert-sla-board">
+          <div className="vp-alert-sla-summary">
+            <Space wrap>
+              <Tag color={customerDecision.color}>{customerDecision.label}</Tag>
+              <Tag color={priorityP0Count > 0 ? 'red' : 'green'}>P0 {priorityP0Count.toLocaleString()}</Tag>
+              <Tag color={primaryPolicy ? 'blue' : 'orange'}>{primaryPolicy?.name || '策略待配置'}</Tag>
+            </Space>
+            <strong>把告警翻译成客户能理解的通知、时限和恢复标准</strong>
+            <span>
+              每一条告警都先回答影响哪些车、通知谁、多久升级、恢复后如何验收；链路、协议和原始记录只作为证据附件。
+            </span>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" onClick={copyNotificationHandoff}>复制通知交接包</Button>
+              <Button size="small" onClick={copyPolicyRunbook}>复制 SLA 策略</Button>
+              {onOpenNotificationRules ? <Button size="small" onClick={onOpenNotificationRules}>维护通知规则</Button> : null}
+            </Space>
+          </div>
+          <div className="vp-alert-sla-grid">
+            {customerNotificationSlaItems.map((item) => (
+              <button
+                key={item.label}
+                type="button"
+                className="vp-alert-sla-item"
+                onClick={item.onClick}
+                aria-label={`客户通知SLA ${item.label} ${item.action}`}
+              >
+                <div>
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <Tag color="grey">{item.action}</Tag>
+                </div>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
       <Card bordered title="告警事件与通知中心">
         <div className="vp-alert-center-board">
           <div className="vp-alert-center-summary">

vehicle-data-platform/apps/web/src/styles/global.css

@@ -3133,6 +3133,82 @@ button.vp-realtime-command-item:focus-visible {
   line-height: 20px;
 }
 
+.vp-alert-sla-board {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
+  gap: 16px;
+}
+
+.vp-alert-sla-summary {
+  min-height: 164px;
+  padding: 12px;
+  border: 1px solid rgba(255, 176, 31, 0.34);
+  border-radius: var(--vp-radius);
+  background: #fffaf0;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-alert-sla-summary strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-alert-sla-summary span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-alert-sla-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-alert-sla-item {
+  min-height: 164px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vp-alert-sla-item:hover,
+.vp-alert-sla-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-alert-sla-item > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.vp-alert-sla-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-alert-sla-item span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .vp-alert-center-board {
   display: grid;
   grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
@@ -6392,6 +6468,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-alert-flow,
   .vp-alert-decision-board,
   .vp-alert-decision-grid,
+  .vp-alert-sla-board,
+  .vp-alert-sla-grid,
   .vp-alert-impact-board,
   .vp-alert-impact-grid,
   .vp-alert-dispatch-grid,

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -3730,7 +3730,7 @@ test('shows alert rule and notification policy workspace on quality page', async
   expect(screen.getAllByText('P0 实时中断').length).toBeGreaterThan(0);
   expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThan(0);
   expect(screen.getByText('站内告警 / 邮件 / 企业微信')).toBeInTheDocument();
-  expect(screen.getByText('30 分钟升级')).toBeInTheDocument();
+  expect(screen.getAllByText('30 分钟升级').length).toBeGreaterThanOrEqual(1);
   expect(screen.getByText('验收：来源恢复并持续 10 分钟，车辆服务可查到实时与历史证据')).toBeInTheDocument();
 
   fireEvent.click(screen.getByRole('button', { name: '复制业务影响报告' }));
@@ -3962,7 +3962,7 @@ test('uses backend quality notification plan on quality page', async () => {
   expect(screen.getAllByText('后端建议动作').length).toBeGreaterThan(0);
   expect(screen.getAllByText('10 分钟确认').length).toBeGreaterThan(0);
   expect(screen.getByText('后端无来源规则')).toBeInTheDocument();
-  expect(screen.getByText('后端 P0 通知策略')).toBeInTheDocument();
+  expect(screen.getAllByText('后端 P0 通知策略').length).toBeGreaterThan(0);
   expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/alert-events/notification-plan?limit=20'), undefined);
 });
 
@@ -4600,7 +4600,16 @@ test('copies priority queue notification digest on quality page', async () => {
 
   expect(await screen.findByText('处置优先队列')).toBeInTheDocument();
   expect(await screen.findByText('platform-20260704153951')).toBeInTheDocument();
-  fireEvent.click(screen.getByRole('button', { name: '复制通知交接包' }));
+  expect(screen.getByText('客户通知 SLA')).toBeInTheDocument();
+  expect(screen.getByText('把告警翻译成客户能理解的通知、时限和恢复标准')).toBeInTheDocument();
+  expect(screen.getByText('每一条告警都先回答影响哪些车、通知谁、多久升级、恢复后如何验收；链路、协议和原始记录只作为证据附件。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户通知SLA 客户影响范围 影响摘要' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户通知SLA 通知负责人 通知规则' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户通知SLA 升级时限 复制策略' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户通知SLA 恢复验收 交接包' })).toBeInTheDocument();
+  expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getAllByText('30 分钟升级').length).toBeGreaterThanOrEqual(1);
+  fireEvent.click(screen.getAllByRole('button', { name: '复制通知交接包' })[0]);
 
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【告警通知交接包】'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('运行版本：platform-20260704153951'));