refactor: modularize application domains

2026-08-13 12:03:34 +08:00
parent d610e4b841
commit 06fe75b4c7
142 changed files with 14645 additions and 8885 deletions
@@ -0,0 +1,45 @@
+import { RefreshCw } from 'lucide-react';
+import { motion } from 'motion/react';
+import { fmtDate } from './utils';
+
+export default function DailyReportLoadingOverlay({ reportDate }: { reportDate: string }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.16, ease: 'easeOut' }}
+      role="status"
+      aria-live="polite"
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/20 p-5 backdrop-blur-[2px]"
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 12, scale: 0.96 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        exit={{ opacity: 0, y: 8, scale: 0.98 }}
+        transition={{ duration: 0.22, ease: 'easeOut' }}
+        className="w-full max-w-[260px] overflow-hidden rounded-xl border border-slate-100 bg-white p-5 text-center shadow-2xl"
+      >
+        <div className="relative mx-auto flex h-12 w-12 items-center justify-center">
+          <motion.span
+            className="absolute inset-0 rounded-full border-2 border-blue-100"
+            animate={{ scale: [0.86, 1.15], opacity: [0.9, 0] }}
+            transition={{ duration: 1.2, repeat: Infinity, ease: 'easeOut' }}
+          />
+          <span className="relative flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 text-blue-600">
+            <RefreshCw size={19} className="animate-spin" />
+          </span>
+        </div>
+        <div className="mt-3 text-sm font-black text-slate-900">正在加载日报</div>
+        <div className="mt-1 text-[11px] font-bold text-slate-400">正在汇总 {fmtDate(reportDate)} 的里程数据</div>
+        <div className="mt-4 h-1 overflow-hidden rounded-full bg-slate-100">
+          <motion.div
+            className="h-full w-1/2 rounded-full bg-blue-500"
+            animate={{ x: ['-100%', '220%'] }}
+            transition={{ duration: 1.15, repeat: Infinity, ease: 'easeInOut' }}
+          />
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}