feat(platform): add notification customer questions

2026-07-05 16:15:27 +08:00
parent 044fd104cc
commit 86961d08bb
3 changed files with 147 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/pages/NotificationRules.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/NotificationRules.tsx
@@ -723,6 +723,44 @@ export function NotificationRules() {
      onClick: () => copyText(notificationRulesRunbook(plan, release), '通知规则Runbook')
    }
  ];
+  const notificationCustomerQuestions = [
+    {
+      question: '哪些车受影响？',
+      value: priorityIssues.length > 0 ? `${priorityIssues.length.toLocaleString()} 辆/次` : '暂无影响',
+      evidence: p0IssueCount > 0 ? `P0 ${p0IssueCount.toLocaleString()} 条` : `${evidenceCompleteCount}/${priorityIssues.length || 0} 证据完整`,
+      detail: '先给客户受影响车辆、告警级别和可跳转证据，不让客户从规则配置里反推影响范围。',
+      action: '影响摘要',
+      color: p0IssueCount > 0 ? 'red' as const : priorityIssues.length > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => copyText(priorityIssueDigest(plan, release), '待通知告警')
+    },
+    {
+      question: '应该通知谁？',
+      value: primaryOwner,
+      evidence: policies[0]?.channel || '待配置渠道',
+      detail: '按责任团队和通知策略生成可复制文本，包含车辆、原因、证据链接和下一步动作。',
+      action: '复制通知',
+      color: ownerRows.length > 0 ? 'blue' as const : 'orange' as const,
+      onClick: () => copyText(priorityIssueDigest(plan, release), '待通知告警')
+    },
+    {
+      question: '多久没有恢复会升级？',
+      value: nextSlaRow?.policy?.escalationMinutes ? formatEscalationMinutes(nextSlaRow.policy.escalationMinutes) : `${overdueCount}/${dueSoonCount}`,
+      evidence: `${overdueCount.toLocaleString()} 超时 / ${dueSoonCount.toLocaleString()} 临近`,
+      detail: '客户看到的是升级时限和当前风险，后台再按P0/P1策略做超时升级和责任追踪。',
+      action: 'SLA报告',
+      color: overdueCount > 0 ? 'red' as const : dueSoonCount > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => copyText(slaEscalationReport(slaRows, release), 'SLA升级报告')
+    },
+    {
+      question: '恢复后怎么验收？',
+      value: policies[0]?.acceptanceCriteria || '按车辆服务证据验收',
+      evidence: release || '当前版本',
+      detail: '恢复不是只看服务在线，而是看车辆证据、实时数据、轨迹和规则命中是否一起恢复。',
+      action: '验收口径',
+      color: 'blue' as const,
+      onClick: () => copyText(notificationRulesRunbook(plan, release), '通知规则Runbook')
+    }
+  ];
  const exportNotificationRules = () => {
    const rows = notificationExportRows(plan, release);
    if (rows.length === 0) {
@@ -774,6 +812,41 @@ export function NotificationRules() {
          ))}
        </div>
      </Card>
+      <Card bordered loading={loading} title="客户通知常问" style={{ marginBottom: 16 }}>
+        <div className="vp-notification-question-board">
+          <div className="vp-notification-question-summary">
+            <Space wrap>
+              <Tag color="blue">客户口径</Tag>
+              <Tag color={priorityIssues.length > 0 ? 'orange' : 'green'}>
+                {priorityIssues.length > 0 ? `${priorityIssues.length.toLocaleString()} 待解释` : '当前稳定'}
+              </Tag>
+            </Space>
+            <Typography.Title heading={5} style={{ margin: 0 }}>把通知规则翻译成客户能理解的影响、责任、升级和恢复口径</Typography.Title>
+            <Typography.Text type="secondary">
+              客户不需要先理解规则配置，先回答受影响车辆、通知对象、升级时限和恢复验收。
+            </Typography.Text>
+          </div>
+          <div className="vp-notification-question-grid">
+            {notificationCustomerQuestions.map((item) => (
+              <button
+                key={item.question}
+                type="button"
+                className="vp-notification-question-item"
+                onClick={item.onClick}
+                aria-label={`客户通知常问 ${item.question} ${item.action}`}
+              >
+                <Space wrap>
+                  <Tag color={item.color}>{item.question}</Tag>
+                  <Tag color="grey">{item.evidence}</Tag>
+                </Space>
+                <strong>{item.value}</strong>
+                <small>{item.detail}</small>
+                <em>{item.action}</em>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
      <div className="vp-kpi-grid">
        <Card bordered loading={loading}>
          <div className="vp-kpi-value">{activeRuleCount.toLocaleString()}</div>
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -3892,6 +3892,72 @@ button.vp-realtime-command-item:focus-visible {
  align-self: end;
 }

+.vp-notification-question-board {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
+  gap: 16px;
+}
+
+.vp-notification-question-summary {
+  min-height: 160px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.24);
+  border-radius: var(--vp-radius);
+  background: #f6f9ff;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-notification-question-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-notification-question-item {
+  min-height: 160px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 9px;
+  align-content: start;
+}
+
+.vp-notification-question-item:hover,
+.vp-notification-question-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.45);
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-notification-question-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-notification-question-item small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-notification-question-item em {
+  color: #1664ff;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 600;
+  align-self: end;
+}
+
 .vp-notification-coverage-board {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
@@ -6855,6 +6921,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-alert-command-grid,
  .vp-notification-customer-board .semi-card-body,
  .vp-notification-customer-steps,
+  .vp-notification-question-board,
+  .vp-notification-question-grid,
  .vp-notification-coverage-board,
  .vp-notification-coverage-grid,
  .vp-notification-owner-item,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -4072,6 +4072,12 @@ test('renders notification rules as a standalone operations page', async () => {
  expect(screen.getByRole('button', { name: '客户告警闭环 超时升级 SLA报告' })).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '客户告警闭环 验收恢复 运行手册' })).toBeInTheDocument();
  expect(screen.getByRole('button', { 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: '客户通知常问 多久没有恢复会升级？ SLA报告' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户通知常问 恢复后怎么验收？ 验收口径' })).toBeInTheDocument();
  expect(screen.getByText('无来源规则')).toBeInTheDocument();
  expect(screen.getByText('车辆无任何来源证据')).toBeInTheDocument();
  expect(screen.getAllByText('P0 实时中断').length).toBeGreaterThan(0);