feat(platform): add alert closure timeline

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

@@ -1175,6 +1175,53 @@ export function Quality({
       onClick: () => copyAlertRecoveryReceipt()
     }
   ];
+  const alertClosureTimelineItems = [
+    {
+      step: '1',
+      label: '告警触发',
+      value: `${issueRecordCount.toLocaleString()} 条事件`,
+      detail: primaryIssueImpact ? `主要问题：${qualityIssueLabel(primaryIssueImpact.name)}` : '等待告警规则命中。',
+      action: '查看事件',
+      color: issueRecordCount > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => loadIssues(filters, pagination.currentPage, pagination.pageSize)
+    },
+    {
+      step: '2',
+      label: '影响车辆',
+      value: `${issueVehicleCount.toLocaleString()} 辆车`,
+      detail: '先判断实时、轨迹、里程和历史导出是否受影响。',
+      action: '影响摘要',
+      color: issueVehicleCount > 0 ? 'orange' as const : 'green' as const,
+      onClick: copyBusinessImpact
+    },
+    {
+      step: '3',
+      label: '责任通知',
+      value: primaryPolicy?.target || '责任人待配置',
+      detail: primaryPolicy ? `${primaryPolicy.name} / ${formatEscalationMinutes(primaryPolicy.escalationMinutes) || '未配置升级'}` : '需要补充通知策略和升级时限。',
+      action: '通知策略',
+      color: primaryPolicy ? 'blue' as const : 'orange' as const,
+      onClick: () => onOpenNotificationRules?.()
+    },
+    {
+      step: '4',
+      label: '证据复核',
+      value: '实时/轨迹/里程',
+      detail: '每次通知都要带上可打开的车辆证据入口和筛选范围。',
+      action: '证据交接',
+      color: 'blue' as const,
+      onClick: copyNotificationHandoff
+    },
+    {
+      step: '5',
+      label: '恢复验收',
+      value: primaryPolicy?.acceptanceCriteria ? '有标准' : '待补充',
+      detail: primaryPolicy?.acceptanceCriteria || '确认车辆服务恢复，实时、轨迹、历史和里程证据可查。',
+      action: '复制回执',
+      color: primaryPolicy?.acceptanceCriteria ? 'green' as const : 'orange' as const,
+      onClick: copyAlertRecoveryReceipt
+    }
+  ];
 
   return (
     <div className="vp-page">
@@ -1211,6 +1258,42 @@ export function Quality({
           ))}
         </div>
       </section>
+      <Card bordered title="客户告警闭环时间线">
+        <div className="vp-alert-closure-timeline">
+          <div className="vp-alert-closure-summary">
+            <Space wrap>
+              <Tag color={customerDecision.color}>{customerDecision.label}</Tag>
+              <Tag color={priorityP0Count > 0 ? 'red' : priorityP1Count > 0 ? 'orange' : 'green'}>
+                P0 {priorityP0Count.toLocaleString()} / P1 {priorityP1Count.toLocaleString()}
+              </Tag>
+              <Tag color={primaryPolicy ? 'blue' : 'orange'}>{primaryPolicy?.name || '策略待配置'}</Tag>
+            </Space>
+            <strong>从告警触发、车辆影响、责任通知、证据复核到恢复验收，形成客户可追踪的闭环。</strong>
+            <span>
+              这条时间线把技术告警翻译成客户处理步骤：每一步都有责任、证据和下一步动作，便于值班、交接和复盘。
+            </span>
+          </div>
+          <div className="vp-alert-closure-steps">
+            {alertClosureTimelineItems.map((item) => (
+              <button
+                key={item.label}
+                type="button"
+                className="vp-alert-closure-step"
+                onClick={item.onClick}
+                aria-label={`客户告警闭环时间线 ${item.step} ${item.label} ${item.value} ${item.action}`}
+              >
+                <span>{item.step}</span>
+                <div>
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <small>{item.detail}</small>
+                  <em>{item.action}</em>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
       <Card bordered title="客户告警决策台">
         <div className="vp-alert-decision-board">
           <div className="vp-alert-decision-summary">

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

@@ -5329,6 +5329,108 @@ button.vp-realtime-command-item:focus-visible {
   line-height: 18px;
 }
 
+.vp-alert-closure-timeline {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr);
+  gap: 16px;
+}
+
+.vp-alert-closure-summary {
+  min-height: 178px;
+  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-alert-closure-summary strong {
+  color: var(--vp-text);
+  font-size: 19px;
+  line-height: 26px;
+  word-break: break-word;
+}
+
+.vp-alert-closure-summary span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-alert-closure-steps {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-alert-closure-step {
+  min-height: 178px;
+  padding: 12px;
+  border: 1px solid rgba(22, 100, 255, 0.14);
+  border-radius: 8px;
+  background: #fff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-alert-closure-step:hover,
+.vp-alert-closure-step:focus-visible {
+  border-color: rgba(22, 100, 255, 0.38);
+  background: #f6f9ff;
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-alert-closure-step > span {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: #eef4ff;
+  color: #1664ff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.vp-alert-closure-step div {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-alert-closure-step strong {
+  color: var(--vp-text);
+  font-size: 17px;
+  line-height: 22px;
+  word-break: break-word;
+}
+
+.vp-alert-closure-step small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.vp-alert-closure-step em {
+  color: #1664ff;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
 .vp-alert-decision-board {
   display: grid;
   grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
@@ -10270,6 +10372,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-current-service-grid,
   .vp-customer-vehicle-service-hub,
   .vp-customer-vehicle-service-grid,
+  .vp-alert-closure-timeline,
+  .vp-alert-closure-steps,
   .vp-vehicle-asset-console,
   .vp-vehicle-asset-console-grid,
   .vp-vehicle-service-desk,

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

@@ -3923,6 +3923,13 @@ test('shows alert rule and notification policy workspace on quality page', async
   expect(screen.getAllByText('立即处置').length).toBeGreaterThan(0);
   expect(screen.getByText('待通知车辆')).toBeInTheDocument();
   expect(screen.getAllByText('证据闭环').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getByText('客户告警闭环时间线')).toBeInTheDocument();
+  expect(screen.getByText('从告警触发、车辆影响、责任通知、证据复核到恢复验收，形成客户可追踪的闭环。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户告警闭环时间线 1 告警触发 5 条事件 查看事件' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户告警闭环时间线 2 影响车辆 3 辆车 影响摘要' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户告警闭环时间线 3 责任通知 接入运维 + 业务责任人 通知策略' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户告警闭环时间线 4 证据复核 实时/轨迹/里程 证据交接' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户告警闭环时间线 5 恢复验收 有标准 复制回执' })).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '复制告警决策' }));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户告警决策说明】'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('决策结论：立即处置'));
@@ -3951,7 +3958,7 @@ test('shows alert rule and notification policy workspace on quality page', async
   expect(screen.getByRole('button', { name: '分派团队 平台接入' })).toHaveTextContent('2 条');
   expect(screen.getByRole('button', { name: '分派团队 车辆档案' })).toHaveTextContent('主问题：VIN 缺失');
   expect(screen.getByRole('button', { name: '分派团队 基础设施' })).toHaveTextContent('SLA：15 分钟恢复');
-  expect(screen.getByText('通知策略')).toBeInTheDocument();
+  expect(screen.getAllByText('通知策略').length).toBeGreaterThan(0);
   expect(screen.getAllByText('P0 实时中断').length).toBeGreaterThan(0);
   expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThan(0);
   expect(screen.getByText('站内告警 / 邮件 / 企业微信')).toBeInTheDocument();