diff --git a/client/src/components/MetricCard.tsx b/client/src/components/MetricCard.tsx index 5987793..c322bee 100644 --- a/client/src/components/MetricCard.tsx +++ b/client/src/components/MetricCard.tsx @@ -8,9 +8,22 @@ interface MetricCardProps { trend?: number description?: string className?: string + status?: 'good' | 'warn' | 'bad' } -export function MetricCard({ title, value, unit, format = 'number', trend, description, className }: MetricCardProps) { +const STATUS_STYLES: Record = { + good: 'border-green-200 bg-green-50/40', + warn: 'border-yellow-200 bg-yellow-50/40', + bad: 'border-red-200 bg-red-50/40', +} + +const STATUS_VALUE_STYLES: Record = { + good: 'text-green-700', + warn: 'text-yellow-700', + bad: 'text-red-700', +} + +export function MetricCard({ title, value, unit, format = 'number', trend, description, className, status }: MetricCardProps) { const displayValue = format === 'percent' ? value === null || value === undefined ? '-' : `${Number(value).toFixed(2)}%` : format === 'currency' @@ -20,7 +33,7 @@ export function MetricCard({ title, value, unit, format = 'number', trend, descr : formatNumber(value) return ( -
+

{title}

{description && ( @@ -33,7 +46,7 @@ export function MetricCard({ title, value, unit, format = 'number', trend, descr )}
- {displayValue} + {displayValue} {unit && {unit}}
{trend !== undefined && ( diff --git a/client/src/pages/DashboardPage.tsx b/client/src/pages/DashboardPage.tsx index b1a47b4..7a80446 100644 --- a/client/src/pages/DashboardPage.tsx +++ b/client/src/pages/DashboardPage.tsx @@ -192,16 +192,16 @@ export function DashboardPage() { {ex && (
- - - - + + + 10 ? 'bad' : Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct) > 5 ? 'warn' : 'good'} description={`成本率 ${formatPercent(ex.actual_food_cost_rate_pct)} · 理论成本率 ${formatPercent(ex.theoretical_food_cost_rate_pct)} · 差异 ${formatPercent(Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct))}`} /> + 50 ? 'bad' : Number(ex.overall_expense_rate_pct) > 40 ? 'warn' : 'good'} description={`费用率 ${formatPercent(ex.overall_expense_rate_pct)} · 人工 ${formatCurrency(ex.total_wage)} · 房租 ${formatCurrency(ex.total_rent)}`} />
- - - - + 30 ? 'bad' : Number(ex.overall_wage_rate_pct) > 25 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_wage_rate_pct)}`} /> + 20 ? 'bad' : Number(ex.overall_rent_rate_pct) > 15 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_rent_rate_pct)}`} /> + 8 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_utility_rate_pct)}`} /> + 4000000 ? 'warn' : 'good'} description="外卖平台佣金合计" />
)}