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
@@ -0,0 +1,114 @@
+import type { ReactNode } from 'react';
+import { CalendarDays, Fuel, Sparkles, TrendingUp, Wallet } from 'lucide-react';
+import type { HydrogenKpi } from '../../types';
+import { formatKg as fmtKg, formatYuan as fmtYuan } from '../model';
+
+interface KpiCardProps {
+  icon: ReactNode;
+  label: string;
+  hero: { value: string; unit: string };
+  rows: { label: string; value: string; valueClass?: string }[];
+  accentClass: string;
+  iconBg: string;
+}
+
+function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps) {
+  return (
+    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <div className={`w-7 h-7 rounded-xl flex items-center justify-center ${iconBg}`}>
+          {icon}
+        </div>
+        <span className="text-[11px] font-bold text-slate-500">{label}</span>
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className={`text-xl md:text-2xl font-black tabular-nums leading-none ${accentClass}`}>{hero.value}</span>
+        <span className="text-[11px] text-slate-400 font-bold">{hero.unit}</span>
+      </div>
+      <div className="space-y-0.5 pt-1 border-t border-slate-50">
+        {rows.map((r, i) => (
+          <div key={i} className="flex items-center justify-between text-[11px] font-bold">
+            <span className="text-slate-400">{r.label}</span>
+            <span className={`tabular-nums ${r.valueClass ?? 'text-slate-700'}`}>{r.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function KpiSection({ kpi: k }: { kpi: HydrogenKpi }) {
+  const yearKgFmt = fmtKg(k.yearKg);
+  const yearFeeFmt = fmtYuan(k.yearFee);
+  const yearProfitFmt = fmtYuan(k.yearProfit);
+  const ourYearKgFmt = fmtKg(k.ourYearKg);
+  const customerYearKgFmt = fmtKg(k.customerYearKg);
+  const monthKgFmt = fmtKg(k.monthKg);
+  const monthFeeFmt = fmtYuan(k.monthFee);
+  const todayKgFmt = fmtKg(k.todayKg);
+  const todayFeeFmt = fmtYuan(k.todayFee);
+  const customerYearFee = Math.max(0, k.yearFee - k.ourYearFee);
+  const customerYearFeeFmt = fmtYuan(customerYearFee);
+  const yearRevenueFmt = fmtYuan(k.yearRevenue);
+  const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
+      <KpiCard
+        icon={<Fuel size={14} className="text-cyan-600" strokeWidth={2.4} />}
+        iconBg="bg-cyan-50"
+        accentClass="text-slate-800"
+        label="累计加氢量"
+        hero={yearKgFmt}
+        rows={[
+          { label: '我司', value: `${ourYearKgFmt.value} ${ourYearKgFmt.unit}` },
+          { label: '客户', value: `${customerYearKgFmt.value} ${customerYearKgFmt.unit}` },
+        ]}
+      />
+      <KpiCard
+        icon={<Wallet size={14} className="text-blue-600" strokeWidth={2.4} />}
+        iconBg="bg-blue-50"
+        accentClass="text-slate-800"
+        label="累计加氢费"
+        hero={{ value: `¥${yearFeeFmt.value}`, unit: yearFeeFmt.unit }}
+        rows={[
+          { label: '我司承担', value: `¥${fmtYuan(k.ourYearFee).value} ${fmtYuan(k.ourYearFee).unit}` },
+          { label: '客户承担', value: `¥${customerYearFeeFmt.value} ${customerYearFeeFmt.unit}` },
+        ]}
+      />
+      <KpiCard
+        icon={<TrendingUp size={14} className="text-emerald-600" strokeWidth={2.4} />}
+        iconBg="bg-emerald-50"
+        accentClass={profitColor}
+        label="时享加氢获利"
+        hero={{ value: `¥${yearProfitFmt.value}`, unit: yearProfitFmt.unit }}
+        rows={[
+          { label: '收入', value: `¥${yearRevenueFmt.value} ${yearRevenueFmt.unit}` },
+          { label: '成本', value: `¥${yearFeeFmt.value} ${yearFeeFmt.unit}` },
+        ]}
+      />
+      <KpiCard
+        icon={<CalendarDays size={14} className="text-amber-600" strokeWidth={2.4} />}
+        iconBg="bg-amber-50"
+        accentClass="text-amber-600"
+        label="本月加氢"
+        hero={monthKgFmt}
+        rows={[
+          { label: '加氢费', value: `¥${monthFeeFmt.value} ${monthFeeFmt.unit}` },
+          { label: '占年比', value: `${k.yearKg > 0 ? (k.monthKg / k.yearKg * 100).toFixed(1) : '0.0'}%` },
+        ]}
+      />
+      <KpiCard
+        icon={<Sparkles size={14} className="text-violet-600" strokeWidth={2.4} />}
+        iconBg="bg-violet-50"
+        accentClass="text-violet-600"
+        label="本日加氢"
+        hero={todayKgFmt}
+        rows={[
+          { label: '加氢费', value: `¥${todayFeeFmt.value} ${todayFeeFmt.unit}` },
+          { label: '占月比', value: `${k.monthKg > 0 ? (k.todayKg / k.monthKg * 100).toFixed(1) : '0.0'}%` },
+        ]}
+      />
+    </div>
+  );
+}