revert: restore v1.1.14 (37a9f303)

2026-09-16 09:29:30 +08:00
parent c49a02e3d9
commit 6ea1b3d5dd
210 changed files with 4448 additions and 36179 deletions
@@ -1,52 +1,79 @@
-import { useEffect, useState } from 'react';
-import { BadgeCheck, CarFront, FileText, ReceiptText, WalletCards } from 'lucide-react';
-import { fetchEtcOverview, type EtcOverviewResponse } from './api';
+import { motion } from 'motion/react';
+import { Construction, Hammer } from 'lucide-react';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

-function formatYuan(value: number) {
-  return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
-}
+const ETC_HINTS = [
+  'ETC 通行费数据正在与发卡方系统打通…',
+  '工人 GG 正在搭脚手架，敬请期待 ~',
+  '马上能看到每月通行费明细啦',
+  '想看哪个维度的 ETC？反馈一下嘛',
+  '上线时机：等数据接通的那一天',
+];

 export default function ETCView() {
-  const [data, setData] = useState<EtcOverviewResponse | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    fetchEtcOverview()
-      .then(result => { if (!cancelled) setData(result); })
-      .catch(reason => { if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason)); });
-    return () => { cancelled = true; };
-  }, []);
-
-  if (error) return <ErrorState message="ETC 数据源暂时不可用，请稍后刷新。" />;
-  if (!data) return <LoadingState label="正在核对 ETC 台账" />;
-
-  if (!data.hasData) {
-    return (
-      <div className="flex flex-col gap-3">
-        <EmptyState title="暂无 ETC 通行台账" description="当前账单和通行明细均未入库，接入后会自动展示统计数据。" />
-        <RotatingFooterHint hints={['ETC 台账状态已按数据库实时核对', '待通行明细入库后自动生成统计']} />
-      </div>
-    );
-  }
-
  return (
-    <div className="flex flex-col gap-3">
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-        <MetricTile icon={ReceiptText} label="通行明细" value={data.tollRecordCount.toLocaleString('zh-CN')} unit="笔" helper={data.latestTollTime ? `最新记录 ${data.latestTollTime}` : '暂无通行时间'} />
-        <MetricTile icon={CarFront} label="涉及车辆" value={data.vehicleCount.toLocaleString('zh-CN')} unit="台" helper="按通行明细车牌去重" tone="emerald" />
-        <MetricTile icon={WalletCards} label="通行费金额" value={formatYuan(data.totalAmount)} helper="通行费与服务费合计" tone="amber" />
-        <MetricTile icon={FileText} label="ETC 账单" value={data.billCount.toLocaleString('zh-CN')} unit="张" helper={`应收 ${formatYuan(data.receivableAmount)} · 已收 ${formatYuan(data.paidAmount)}`} tone="slate" />
-      </div>
-      <SurfaceCard className="p-4">
-        <div className="flex items-start gap-2 text-xs font-bold text-slate-500">
-          <BadgeCheck size={17} className="mt-0.5 shrink-0 text-emerald-500" />
-          <div>当前统计直接读取 ETC 通行明细与账单台账；金额、应收和已收均不做推算。</div>
+    <div className="flex flex-col gap-4">
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
+      >
+        <div className="relative w-20 h-20 mb-4">
+          <motion.div
+            animate={{ rotate: [0, -8, 8, -4, 4, 0] }}
+            transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
+            className="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"
+          >
+            <Construction size={36} className="text-amber-500" strokeWidth={2.2} />
+          </motion.div>
+          <motion.div
+            animate={{ rotate: [0, 18, -10, 0], y: [0, -2, 1, 0] }}
+            transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
+            className="absolute -top-1 -right-1 w-9 h-9 rounded-2xl bg-white border border-amber-100 shadow-sm flex items-center justify-center"
+          >
+            <Hammer size={16} className="text-amber-500" strokeWidth={2.2} />
+          </motion.div>
        </div>
-      </SurfaceCard>
-      <RotatingFooterHint />
+
+        <div className="text-base font-black text-slate-800 mb-1.5">ETC 模块建设中</div>
+        <div className="text-[12px] text-slate-500 font-bold leading-relaxed max-w-[280px]">
+          通行费明细、按车按月统计、运营成本拆分
+          <br />
+          这些数据都在路上啦
+        </div>
+
+        {/* 简单的里程碑进度感 */}
+        <div className="mt-6 w-full max-w-xs space-y-2">
+          {[
+            { label: '需求评审', done: true },
+            { label: '数据对接', done: true },
+            { label: '页面开发', done: false, current: true },
+            { label: '正式上线', done: false },
+          ].map((m, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -8 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.1 + i * 0.08, duration: 0.3 }}
+              className="flex items-center gap-2.5 text-[11px]"
+            >
+              <span className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                m.done ? 'bg-emerald-400'
+                : m.current ? 'bg-amber-400 ring-4 ring-amber-100 animate-pulse'
+                : 'bg-slate-200'
+              }`} />
+              <span className={`font-bold ${m.done ? 'text-slate-500' : m.current ? 'text-amber-600' : 'text-slate-300'}`}>
+                {m.label}
+              </span>
+              {m.done && <span className="text-[10px] text-emerald-500 font-bold ml-auto">已完成</span>}
+              {m.current && <span className="text-[10px] text-amber-500 font-bold ml-auto">进行中</span>}
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+
+      <RotatingFooterHint hints={ETC_HINTS} />
    </div>
  );
 }