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
@@ -1,46 +1,19 @@
 import { useEffect, useMemo, useState } from 'react';
-import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Truck, Wallet } from 'lucide-react';
+import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import TrendBadge from './TrendBadge';
 import { fetchElectricMonthly } from './api';
 import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
 import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
-
-const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
-  { id: 'thisWeek',  label: '本周'    },
-  { id: 'thisMonth', label: '本月'    },
-  { id: 'last15',    label: '近 15 天' },
-];
-
-type RangeMode = DateQuickPick | 'custom';
-
-function fmtYmd(d: Date): string {
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-}
-
-function addDays(d: Date, days: number): Date {
-  const next = new Date(d);
-  next.setDate(next.getDate() + days);
-  return next;
-}
-
-function getQuickRange(pick: DateQuickPick): { start: string; end: string } {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  if (pick === 'thisWeek') {
-    const day = today.getDay() || 7;
-    return { start: fmtYmd(addDays(today, -(day - 1))), end: fmtYmd(today) };
-  }
-  if (pick === 'thisMonth') {
-    return { start: fmtYmd(new Date(today.getFullYear(), today.getMonth(), 1)), end: fmtYmd(today) };
-  }
-  return { start: fmtYmd(addDays(today, -14)), end: fmtYmd(today) };
-}
-
-function normalizeRange(start: string, end: string): { start: string; end: string } {
-  return start <= end ? { start, end } : { start: end, end: start };
-}
+import { EmptyState, ErrorState, LoadingState, MetricTile } from '../../components/ui/surface';
+import DailyRangeControls from './daily-range/DailyRangeControls';
+import {
+  getQuickRange,
+  getRangeModeLabel,
+  normalizeRange,
+  type RangeMode,
+} from './daily-range/model';
+import { summarizeElectricMonths } from './electric-daily/model';

 export default function ElectricDaily() {
  const [customer, setCustomer] = useState<CustomerType>('lingniu');
@@ -75,17 +48,17 @@ export default function ElectricDaily() {
    return next;
  });

-  const totalKwh = useMemo(() => (months ?? []).reduce((s, m) => s + (m.kwh || 0), 0), [months]);
-  const totalFee = useMemo(() => (months ?? []).reduce((s, m) => s + (m.fee || 0), 0), [months]);
-  const activeDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => r.kwh > 0).length, 0), [months]);
-  const abnormalDays = useMemo(() => (months ?? []).reduce((sum, m) => sum + m.rows.filter(r => Math.abs(r.chainPct) >= 0.3).length, 0), [months]);
-  const avgKwh = activeDays > 0 ? totalKwh / activeDays : 0;
-  const avgPrice = totalKwh > 0 ? totalFee / totalKwh : 0;
-  const scopeLabel = pick === 'custom'
-    ? '自定义区间'
-    : QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
+  const {
+    totalKwh,
+    totalFee,
+    activeDays,
+    abnormalDays,
+    avgKwh,
+    avgPrice,
+    hasFeeDetail,
+  } = useMemo(() => summarizeElectricMonths(months), [months]);
+  const scopeLabel = getRangeModeLabel(pick);
  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
-  const hasFeeDetail = totalFee > 0;
  const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;

  const applyQuickPick = (nextPick: DateQuickPick) => {
@@ -101,71 +74,15 @@ export default function ElectricDaily() {

  return (
    <div className="flex flex-col gap-3">
-      <SurfaceCard className="p-2 md:p-3">
-        <div className="flex items-center gap-2 overflow-x-auto pb-1">
-          {QUICK_PICK_OPTIONS.map(opt => (
-            <button
-              key={opt.id}
-              onClick={() => applyQuickPick(opt.id)}
-              className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
-                pick === opt.id
-                  ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
-                  : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-          <button
-            onClick={() => setPick('custom')}
-            className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
-              pick === 'custom'
-                ? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
-                : 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
-            }`}
-          >
-            自定义
-          </button>
-        </div>
-
-        <div className="mt-2 grid grid-cols-2 gap-2">
-          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
-            <span className="block text-[10px] font-black text-slate-400">开始日期</span>
-            <input
-              type="date"
-              value={dateRange.start}
-              onChange={e => updateDateRange('start', e.target.value)}
-              onInput={e => updateDateRange('start', e.currentTarget.value)}
-              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
-            />
-          </label>
-          <label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
-            <span className="block text-[10px] font-black text-slate-400">结束日期</span>
-            <input
-              type="date"
-              value={dateRange.end}
-              onChange={e => updateDateRange('end', e.target.value)}
-              onInput={e => updateDateRange('end', e.currentTarget.value)}
-              className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
-            />
-          </label>
-        </div>
-
-        <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
-          {(['lingniu', 'external'] as const).map(c => (
-            <button
-              key={c}
-              onClick={() => setCustomer(c)}
-              className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
-                customer === c ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
-              }`}
-            >
-              <Truck size={14} />
-              {c === 'external' ? '外部车辆' : '羚牛车辆'}
-            </button>
-          ))}
-        </div>
-      </SurfaceCard>
+      <DailyRangeControls
+        pick={pick}
+        dateRange={dateRange}
+        customer={customer}
+        onQuickPick={applyQuickPick}
+        onCustomPick={() => setPick('custom')}
+        onDateRangeChange={updateDateRange}
+        onCustomerChange={setCustomer}
+      />

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={rangeText} />