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,56 @@
+import { formatCount, formatDateTime, formatDecimal } from './model';
+import type { BatchRow } from './types';
+
+interface BatchTableProps {
+  batches: BatchRow[];
+  batchFilter: string;
+  onClearFilter: () => void;
+  onSelectBatch: (batchId: string) => void;
+}
+
+export function BatchTable({ batches, batchFilter, onClearFilter, onSelectBatch }: BatchTableProps) {
+  if (batches.length === 0) return null;
+
+  return (
+    <section className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
+      <div className="px-3 py-2 bg-slate-50 flex items-center justify-between">
+        <span className="text-[11px] font-bold text-slate-500">最近上传批次</span>
+        {batchFilter && (
+          <button onClick={onClearFilter} className="text-[10px] font-bold text-blue-500">取消筛选</button>
+        )}
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-[11px]">
+          <thead className="text-slate-400 font-bold bg-slate-50/40">
+            <tr>
+              <th className="px-3 py-2 text-left">导入时间</th>
+              <th className="px-3 py-2 text-right">总数</th>
+              <th className="px-3 py-2 text-right">内部</th>
+              <th className="px-3 py-2 text-right">外部</th>
+              <th className="px-3 py-2 text-right">电量(度)</th>
+              <th className="px-3 py-2 text-right">费用(元)</th>
+              <th className="px-3 py-2 text-right">批次</th>
+            </tr>
+          </thead>
+          <tbody>
+            {batches.map(batch => (
+              <tr
+                key={batch.batch_id}
+                onClick={() => onSelectBatch(batch.batch_id)}
+                className={`border-t border-slate-100 cursor-pointer transition-colors ${batchFilter === batch.batch_id ? 'bg-blue-50/40' : 'hover:bg-slate-50/60'}`}
+              >
+                <td className="px-3 py-2 text-slate-600 whitespace-nowrap">{formatDateTime(batch.imported_at, 19)}</td>
+                <td className="px-3 py-2 text-right font-bold text-slate-700">{formatCount(batch.records)}</td>
+                <td className="px-3 py-2 text-right text-blue-600 font-bold">{formatCount(batch.internal_count)}</td>
+                <td className="px-3 py-2 text-right text-amber-600 font-bold">{formatCount(batch.external_count)}</td>
+                <td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">{formatDecimal(batch.total_kwh, 1)}</td>
+                <td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">¥{formatDecimal(batch.total_fee, 2)}</td>
+                <td className="px-3 py-2 text-right text-slate-300 font-mono text-[10px]">{batch.batch_id.slice(0, 12)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}