unify Semi UI query metric rails

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

@@ -0,0 +1,48 @@
+import { Card, CardGroup } from '@douyinfe/semi-ui';
+import type { ReactNode } from 'react';
+
+export type WorkspaceMetricRailItem = {
+  label: string;
+  value: ReactNode;
+  note: string;
+  className?: string;
+};
+
+export function WorkspaceMetricRail({
+  ariaLabel,
+  primary,
+  secondary,
+  className,
+  cardClassName,
+  secondaryClassName,
+  primaryValueClassName
+}: {
+  ariaLabel: string;
+  primary: WorkspaceMetricRailItem;
+  secondary: WorkspaceMetricRailItem[];
+  className: string;
+  cardClassName: string;
+  secondaryClassName: string;
+  primaryValueClassName?: string;
+}) {
+  const cardClass = (item: WorkspaceMetricRailItem, primaryCard = false) => [
+    cardClassName,
+    primaryCard ? 'is-primary' : '',
+    item.className ?? ''
+  ].filter(Boolean).join(' ');
+
+  return <Card className={className} aria-label={ariaLabel} bodyStyle={{ padding: 0 }}>
+    <Card className={cardClass(primary, true)} bodyStyle={{ padding: 0 }} aria-label={`${primary.label}：${primary.value}；${primary.note}`}>
+      <small>{primary.label}</small>
+      <strong className={primaryValueClassName}>{primary.value}</strong>
+      <span title={primary.note}>{primary.note}</span>
+    </Card>
+    <CardGroup className={secondaryClassName} type="grid" spacing={0}>
+      {secondary.map((item) => <Card className={cardClass(item)} bodyStyle={{ padding: 0 }} aria-label={`${item.label}：${item.value}；${item.note}`} key={item.label}>
+        <small>{item.label}</small>
+        <strong>{item.value}</strong>
+        <span title={item.note}>{item.note}</span>
+      </Card>)}
+    </CardGroup>
+  </Card>;
+}