feat: unify account directory metrics with semi ui

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

@@ -12,6 +12,7 @@ import { VehicleCandidateList } from '../shared/VehicleCandidateList';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceConfirmDialog } from '../shared/WorkspaceDialog';
+import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceSideSheet, type WorkspaceSideSheetBadgeColor } from '../shared/WorkspaceSideSheet';
 import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
@@ -153,6 +154,36 @@ export default function UsersPage() {
   const readyCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).key === 'ready').length, [visibleCustomers]);
   const attentionCustomers = useMemo(() => visibleCustomers.filter((user) => customerAccessState(user.status, user.menuKeys.length, user.vehicles.length).attention).length, [visibleCustomers]);
   const grantedVehicles = useMemo(() => visibleCustomers.reduce((total, user) => total + user.vehicles.length, 0), [visibleCustomers]);
+  const directoryMetrics: WorkspaceQueueMetricRailItem[] = [
+    {
+      label: '当前账号',
+      value: <>{visibleCustomers.length}<i className="v2-user-directory-metric-unit"> / {customers.length}</i></>,
+      note: customerKeyword.trim() || customerStatus !== 'all' ? '筛选结果 / 全部客户' : '全部客户账号',
+      tone: 'primary',
+      emphasis: 'primary'
+    },
+    {
+      label: '待完善',
+      value: attentionCustomers,
+      note: '缺少菜单或车辆',
+      tone: attentionCustomers ? 'warning' : 'success',
+      emphasis: 'primary'
+    },
+    {
+      label: '权限就绪',
+      value: readyCustomers,
+      note: '启用且权限完整',
+      tone: 'success',
+      emphasis: 'secondary'
+    },
+    {
+      label: '车辆授权',
+      value: grantedVehicles,
+      note: '当前范围合计',
+      tone: 'neutral',
+      emphasis: 'secondary'
+    }
+  ];
   const editingGrant = useMemo(() => draft.vehicleGrants.find((grant) => grant.vin === editingGrantVIN), [draft.vehicleGrants, editingGrantVIN]);
   const editingGrantPlate = editingGrant ? vehicleLabels[editingGrant.vin] : '';
   const grantWindowInvalid = Boolean(editingGrant && (!editingGrant.validFrom || (editingGrant.validTo && editingGrant.validTo <= editingGrant.validFrom)));
@@ -469,12 +500,12 @@ export default function UsersPage() {
           className="v2-user-directory-header"
           title="客户权限目录"
           description="当前范围内的账号、菜单与车辆授权摘要"
-          meta={<span className="v2-user-directory-summary">
-            <Tag color={visibleCustomers.length === customers.length ? 'grey' : 'blue'} type="light" size="small">{visibleCustomers.length} / {customers.length} 个账号</Tag>
-            <Typography.Text className="is-ready" type="tertiary">权限就绪 {readyCustomers}</Typography.Text>
-            {attentionCustomers ? <Tag className="is-attention" color="amber" type="light" size="small">待完善 {attentionCustomers}</Tag> : null}
-            <Typography.Text type="tertiary">车辆授权 {grantedVehicles}</Typography.Text>
-          </span>}
+        />
+        <WorkspaceMetricRail
+          variant="queue"
+          className="v2-user-directory-metric-rail"
+          ariaLabel="客户权限目录统计"
+          items={directoryMetrics}
         />
         <div className="v2-user-directory-body">
           {users.isPending ? <PanelLoading className="v2-user-list-loading" title="正在加载客户账号" description="账号目录和授权摘要就绪后会自动显示。" /> : customers.length === 0 ? <PanelEmpty className="v2-user-list-empty" title="还没有客户账号" description="创建客户账号后，可在这里配置菜单和车辆范围。" action={<Button theme="solid" onClick={startCreate}>创建第一个客户账号</Button>} /> : <>