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,92 @@
+import { Truck } from 'lucide-react';
+import { SurfaceCard } from '../../../components/ui/surface';
+import type { CustomerType, DateQuickPick } from '../types';
+import { QUICK_PICK_OPTIONS, type RangeMode } from './model';
+
+interface DailyRangeControlsProps {
+  pick: RangeMode;
+  dateRange: { start: string; end: string };
+  customer: CustomerType;
+  onQuickPick: (pick: DateQuickPick) => void;
+  onCustomPick: () => void;
+  onDateRangeChange: (field: 'start' | 'end', value: string) => void;
+  onCustomerChange: (customer: CustomerType) => void;
+}
+
+export default function DailyRangeControls({
+  pick,
+  dateRange,
+  customer,
+  onQuickPick,
+  onCustomPick,
+  onDateRangeChange,
+  onCustomerChange,
+}: DailyRangeControlsProps) {
+  return (
+    <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={() => onQuickPick(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={onCustomPick}
+          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={event => onDateRangeChange('start', event.target.value)}
+            onInput={event => onDateRangeChange('start', event.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={event => onDateRangeChange('end', event.target.value)}
+            onInput={event => onDateRangeChange('end', event.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(option => (
+          <button
+            key={option}
+            onClick={() => onCustomerChange(option)}
+            className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
+              customer === option ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+            }`}
+          >
+            <Truck size={14} />
+            {option === 'external' ? '外部车辆' : '羚牛车辆'}
+          </button>
+        ))}
+      </div>
+    </SurfaceCard>
+  );
+}