Akiba So
33f0f497d3
Final phase of the UX modernization. Four conflict-free lanes. Responsive (D4 — desktop+mobile 并重): - 7 analysis pages made usable at 375px: grid-cols-4/5 → grid-cols-2 sm:* responsive variants; raw tables wrapped in overflow-x-auto; page overflow guards - new e2e/responsive.spec.ts loops all 7 analysis routes at 375px asserting no horizontal scroll Perf harness: - playwright.config.ts gains an isolated `perf` project (testMatch /perf/), default chromium project excludes it (testIgnore) - new e2e/perf.spec.ts: CDP Network.emulateNetworkConditions (Fast 3G) + PerformanceObserver LCP on /overview kpi-row + route-transition timing; numbers reported as a relative regression signal (dev-server, not a prod SLA), not gated God-component splits (pure refactors, behavior-preserving): - MonitoringDashboard 686 → 239 lines: extracted components/monitoring/* (StatsBar, OverviewTab, CaseStatsTab, DistrictStatsTab) + useMonitoringData hook; URL-granularity source-of-truth + drilldown reconcile kept in the orchestrator (no desync regression) - AlertsDashboard 816 → 301 lines: extracted components/alerts/* (Toolbar, List, RiskPanel, MapPanel, DetailModal, …); role/privacy/grid-hide logic kept in the orchestrator — doctor-view privacy invariant (zero patient-point) still holds Gates: tsc 0 · vitest 75 · functional e2e 37/37 (incl doctor-view privacy + granularity + responsive) · build ok · perf project runs + reports Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { memo } from 'react';
|
|
import { ErrorBanner } from '@/components/ErrorBanner';
|
|
import { MetricHeatmapTable } from '@/components/MetricHeatmapTable';
|
|
|
|
interface DistrictStatsTabProps {
|
|
loading: boolean;
|
|
loaded: boolean;
|
|
error: string | null;
|
|
rows: string[];
|
|
data: Record<string, Record<string, number>>;
|
|
onRetry: () => void;
|
|
onDismissError: () => void;
|
|
onSort: (col: string) => void;
|
|
}
|
|
|
|
// 区域统计 tab —— 区域指标热力表。纯展示，排序键由父级持有。
|
|
export const DistrictStatsTab = memo(function DistrictStatsTab({
|
|
loading,
|
|
loaded,
|
|
error,
|
|
rows,
|
|
data,
|
|
onRetry,
|
|
onDismissError,
|
|
onSort,
|
|
}: DistrictStatsTabProps) {
|
|
if (loading && !loaded) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{error && (
|
|
<ErrorBanner
|
|
error={error}
|
|
onRetry={onRetry}
|
|
onDismiss={onDismissError}
|
|
/>
|
|
)}
|
|
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">区域指标热力表</h3>
|
|
<p className="text-xs text-gray-500 mb-4">点击列标题排序</p>
|
|
{rows.length > 0 ? (
|
|
<MetricHeatmapTable
|
|
rows={rows}
|
|
columns={[
|
|
{ key: 'total', label: '病例' },
|
|
{ key: 'outpatient', label: '门诊' },
|
|
{ key: 'inpatient', label: '住院' },
|
|
{ key: 'inpatient_ratio', label: '住院占比%' },
|
|
]}
|
|
data={data}
|
|
onSort={onSort}
|
|
/>
|
|
) : (
|
|
<div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|