feat: improve asset inventory statistics and responsive UX (v1.1.16)

src/modules/assets/components/FlowDetailModal.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
+import { useDialogFocus } from './useDialogFocus';
 import { Download, X } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import type { FlowDetailItem, FlowType } from '../api';
@@ -22,6 +23,9 @@ export function FlowDetailModal({
   setSelectedFlow,
   exportFlowDetails,
 }: FlowDetailModalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const close = useCallback(()=>setSelectedFlow(null),[setSelectedFlow]);
+  useDialogFocus(Boolean(selectedFlow),dialogRef,close);
   const dateLabel = selectedFlow
     ? ('date' in selectedFlow ? selectedFlow.date : `${selectedFlow.start} 至 ${selectedFlow.end}`)
     : '';
@@ -32,6 +36,7 @@ export function FlowDetailModal({
           {selectedFlow && (
             <div className="fixed inset-0 z-[1000] flex items-end justify-center bg-slate-950/45 p-0 backdrop-blur-sm sm:items-center sm:p-4">
               <motion.div
+                ref={dialogRef} role="dialog" aria-modal="true" aria-labelledby="asset-flow-title" tabIndex={-1}
                 data-testid="asset-flow-detail-modal"
                 initial={{ opacity: 0, y: 28, scale: 0.98 }}
                 animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -42,7 +47,7 @@ export function FlowDetailModal({
                   <div className="flex items-start justify-between gap-3">
                     <div>
                       <div className="text-[11px] font-black uppercase tracking-wide text-slate-400">运维签章时间口径 · 单位：车次</div>
-                      <h3 className="mt-1 text-lg font-black">
+                      <h3 id="asset-flow-title" className="mt-1 text-lg font-black">
                         {dateLabel} · {FLOW_META[selectedFlow.type].label}明细
                       </h3>
                       <div className="mt-1 text-[12px] font-bold text-slate-300">