feat: unify alert operations queue

vehicle-data-platform/apps/web/src/v2/shared/WorkspaceMetricRail.tsx

@@ -1,4 +1,4 @@
-import { Card, CardGroup } from '@douyinfe/semi-ui';
+import { Button, Card, CardGroup } from '@douyinfe/semi-ui';
 import type { ReactNode } from 'react';
 
 export type WorkspaceMetricRailItem = {
@@ -14,6 +14,9 @@ export type WorkspaceQueueMetricRailItem = {
   note?: ReactNode;
   tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
   emphasis?: 'primary' | 'secondary';
+  active?: boolean;
+  ariaLabel?: string;
+  onClick?: () => void;
 };
 
 type WorkspaceSummaryMetricRailProps = {
@@ -41,14 +44,31 @@ export function WorkspaceMetricRail(props: WorkspaceSummaryMetricRailProps | Wor
         {props.items.map((item, index) => {
           const toneClassName = `is-${item.tone ?? 'neutral'}`;
           const emphasisClassName = `is-${item.emphasis ?? (index < 2 ? 'primary' : 'secondary')}`;
-          return <span
-            className={toneClassName === emphasisClassName ? toneClassName : `${toneClassName} ${emphasisClassName}`}
-            role="listitem"
-            key={item.label}
-          >
+          const classes = [
+            toneClassName,
+            emphasisClassName !== toneClassName ? emphasisClassName : '',
+            item.onClick ? 'is-action' : '',
+            item.active ? 'is-active' : ''
+          ].filter(Boolean).join(' ');
+          const content = <>
             <small>{item.label}</small>
             <strong>{item.value}</strong>
             {item.note ? <em>{item.note}</em> : null}
+          </>;
+          return <span
+            className={classes}
+            role="listitem"
+            key={item.label}
+          >
+            {item.onClick ? <Button
+              className="v2-workspace-metric-action"
+              theme="borderless"
+              type="tertiary"
+              htmlType="button"
+              aria-label={item.ariaLabel}
+              aria-pressed={item.active}
+              onClick={item.onClick}
+            >{content}</Button> : content}
           </span>;
         })}
       </div>