refine Semi UI alert disposition

vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx

@@ -5,7 +5,7 @@ import { FormEvent, memo, useCallback, useEffect, useMemo, useState } from 'reac
 import { Link, useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { AlertEvent, AlertQuery, AlertRule, AlertRuleInput, AlertStatus, MetricDefinition, Page } from '../../api/types';
-import { actionLabels, alertValue, canAct, formatAlertTime, operatorLabels, ruleCondition, severityLabels, statusLabels, thresholdText } from '../domain/alert';
+import { actionLabels, alertDeltaText, alertValue, canAct, formatAlertTime, operatorLabels, ruleCondition, severityLabels, statusLabels, thresholdText } from '../domain/alert';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MetricActionButton } from '../shared/MetricActionButton';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
@@ -114,23 +114,30 @@ const AlertEventTable = memo(function AlertEventTable({ rows, selectedID, compac
 
 function EventInspector({ event, note, acting, actionError, editable, onNote, onAction, onClose, sheet = false }: { event?: AlertEvent; note: string; acting: boolean; actionError?: string; editable: boolean; onNote: (value: string) => void; onAction: (action: 'acknowledge' | 'close' | 'ignore') => void; onClose: () => void; sheet?: boolean }) {
   if (!event) return <Card className="v2-alert-inspector" bodyStyle={{ padding: 0 }}><Empty className="v2-alert-inspector-empty" image={<IconAlarm />} title="选择告警事件" description="查看触发证据、状态时间线和处置动作。" /></Card>;
-  return <Card className={`v2-alert-inspector${sheet ? ' is-sheet' : ''}`} bodyStyle={{ padding: 0 }}><WorkspacePanelHeader className="v2-alert-inspector-heading" title={event.ruleName} actions={<><span className="v2-alert-inspector-status"><SeverityTag severity={event.severity} /><StatusTag status={event.status} /></span>{sheet ? null : <Button className="v2-alert-inspector-close" theme="borderless" icon={<IconClose />} aria-label="关闭告警详情" onClick={onClose} />}</>} />
+  const actionCount = event.actions?.length ?? 0;
+  return <Card className={`v2-alert-inspector${sheet ? ' is-sheet' : ''}`} bodyStyle={{ padding: 0 }}><WorkspacePanelHeader className="v2-alert-inspector-heading" title="事件处置" description={event.ruleName} actions={<><span className="v2-alert-inspector-status"><SeverityTag severity={event.severity} /><StatusTag status={event.status} /></span>{sheet ? null : <Button className="v2-alert-inspector-close" theme="borderless" icon={<IconClose />} aria-label="关闭告警详情" onClick={onClose} />}</>} />
     <div className="v2-alert-inspector-content">
       <Card className="v2-alert-detail-card v2-alert-focus-card" bodyStyle={{ padding: 0 }} aria-label="告警处置摘要">
         <header className="v2-alert-focus-identity">
-          <span><small>告警车辆</small><strong>{event.plate || '未绑定车牌'}</strong><code>{event.vin}</code></span>
-          <Tag color="blue" type="light" size="small">{event.protocol || '未知协议'}</Tag>
+          <span><small>告警对象</small><strong>{event.plate || '未绑定车牌'}</strong><code>{event.vin}</code></span>
+          <span className="v2-alert-focus-current"><small>当前状态</small><StatusTag status={event.status} /></span>
         </header>
-        <div className="v2-alert-focus-facts">
+        <div className="v2-alert-focus-facts" aria-label="告警事件上下文">
+          <span><small>数据来源</small><strong><Tag color="blue" type="light" size="small">{event.protocol || '未知协议'}</Tag></strong></span>
           <span><small>触发时间</small><strong><AlertTime value={event.triggeredAt} /></strong></span>
-          <span><small>当前状态</small><strong>{statusLabels[event.status]}</strong></span>
+          <span><small>处理记录</small><strong>{actionCount} 条</strong></span>
         </div>
-        <div className="v2-alert-evidence"><Card className="v2-alert-evidence-value is-trigger"><small>触发值</small><strong>{alertValue(event)}</strong></Card><Tag color="grey" type="light" size="small">VS</Tag><Card className="v2-alert-evidence-value"><small>阈值条件</small><strong>{thresholdText(event)}</strong></Card></div>
+        <div className="v2-alert-evidence" aria-label="告警触发证据">
+          <Card className="v2-alert-evidence-value is-trigger"><small>触发值</small><strong>{alertValue(event)}</strong></Card>
+          <Card className="v2-alert-evidence-value"><small>阈值条件</small><strong>{thresholdText(event)}</strong></Card>
+          <Card className="v2-alert-evidence-value is-delta"><small>超限幅度</small><strong>{alertDeltaText(event)}</strong></Card>
+        </div>
+        <div className="v2-alert-focus-rule"><Tag color="grey" type="light" size="small">规则判断</Tag><span>{event.ruleName}</span></div>
       </Card>
-      <Card className="v2-alert-detail-card v2-alert-progress-card" title={<strong>处理进度</strong>} headerLine>
+      <Card className="v2-alert-detail-card v2-alert-progress-card" title={<span className="v2-alert-detail-title"><strong>处理进度</strong><Tag color={actionCount ? 'blue' : 'amber'} type="light" size="small">{actionCount ? `${actionCount} 条记录` : '待处置'}</Tag></span>} headerLine>
         {event.actions?.length ? <Timeline className="v2-alert-timeline" aria-label="告警处理进度">{event.actions.map((item, index) => <Timeline.Item key={item.id} type={index === event.actions!.length - 1 ? 'ongoing' : 'default'} time={<span>{item.actor} · <AlertTime value={item.createdAt} /></span>}><strong>{actionLabels[item.action] ?? item.action}</strong>{item.note ? <p>{item.note}</p> : null}</Timeline.Item>)}</Timeline> : <Empty className="v2-alert-timeline-empty" title="暂无处理记录" description="事件被确认、关闭或忽略后，将在这里形成审计履历。" />}
       </Card>
-      <Card className="v2-alert-detail-card v2-alert-disposition-card" title={<strong>处置与备注</strong>} headerLine>
+      <Card className="v2-alert-detail-card v2-alert-disposition-card" title={<span className="v2-alert-detail-title"><strong>处置与备注</strong><Tag color={editable ? 'green' : 'grey'} type="light" size="small">{editable ? '可操作' : '只读'}</Tag></span>} headerLine>
         {editable ? <><TextArea maxCount={200} autosize={{ minRows: 2, maxRows: 5 }} placeholder="请输入处置说明（选填）" value={note} onChange={onNote} />{actionError ? <p className="v2-alert-action-error">{actionError}</p> : null}<div className="v2-alert-actions"><Button theme="solid" className="is-primary" disabled={acting || !canAct(event.status, 'acknowledge')} onClick={() => onAction('acknowledge')}>确认告警</Button><Button theme="light" disabled={acting || !canAct(event.status, 'close')} onClick={() => onAction('close')}>关闭</Button><Button theme="borderless" disabled={acting || !canAct(event.status, 'ignore')} onClick={() => onAction('ignore')}>忽略</Button></div></> : <p className="v2-role-notice">当前为只读角色，可查看完整证据与处置记录。</p>}
       </Card>
       <Collapse className="v2-alert-technical-collapse" keepDOM>
@@ -255,7 +262,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
           aria-label={mobileLayout ? '告警事件列表，可上下滚动' : undefined}
         >
           {mobileLayout
-            ? <div className="v2-alert-mobile-list">{rows.map((event) => <Card key={event.id} className={`v2-alert-mobile-card${selectedID === event.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}><Button theme="borderless" type="tertiary" className="v2-alert-mobile-action" aria-pressed={selectedID === event.id} aria-expanded={selectedID === event.id} aria-label={`查看 ${event.plate || event.vin} ${event.ruleName} 告警详情`} onClick={() => selectEvent(event.id)}><span className="v2-alert-mobile-card-content"><header><strong>{event.plate || '未绑定车牌'}</strong><span><SeverityTag severity={event.severity} /><StatusTag status={event.status} /></span></header><p>{event.ruleName}</p><dl><div><dt>触发时间</dt><dd><AlertTime value={event.triggeredAt} /></dd></div><div><dt>数据来源</dt><dd>{event.protocol || '—'}</dd></div><div><dt>触发 / 阈值</dt><dd>{alertValue(event)} / {thresholdText(event)}</dd></div></dl><footer>查看处置详情<IconChevronRight /></footer></span></Button></Card>)}</div>
+            ? <div className="v2-alert-mobile-list">{rows.map((event) => <Card key={event.id} className={`v2-alert-mobile-card${selectedID === event.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}><Button theme="borderless" type="tertiary" className="v2-alert-mobile-action" aria-pressed={selectedID === event.id} aria-expanded={selectedID === event.id} aria-label={`查看 ${event.plate || event.vin} ${event.ruleName} 告警详情`} onClick={() => selectEvent(event.id)}><span className="v2-alert-mobile-card-content"><header><strong>{event.plate || '未绑定车牌'}</strong><span><SeverityTag severity={event.severity} /><StatusTag status={event.status} /></span></header><p>{event.ruleName}</p><dl><div><dt>触发时间</dt><dd><AlertTime value={event.triggeredAt} /></dd></div><div><dt>数据来源</dt><dd>{event.protocol || '—'}</dd></div><div><dt>超限幅度</dt><dd>{alertDeltaText(event)}</dd></div></dl><footer>核验并处置<IconChevronRight /></footer></span></Button></Card>)}</div>
             : <AlertEventTable rows={rows} selectedID={selectedID} compact={Boolean(selectedID)} onSelect={selectEvent} />}
           {events.isFetching ? <PanelLoading className="v2-alert-loading" title="正在更新事件…" description="告警列表返回后会自动更新。" compact={Boolean(rows.length)} /> : null}
           {!events.isFetching && !rows.length ? <PanelEmpty className="v2-alert-empty" title="当前筛选条件没有告警事件" description="调整车辆、严重程度、状态或时间范围后重试。" /> : null}