feat: 利润与成本指标卡增加颜色标识 - 绿色正常/黄色关注/红色问题

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<string, string> = {
+  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<string, string> = {
+  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 (
-    <div className={cn('rounded-lg border bg-card p-4 shadow-sm', className)}>
+    <div className={cn('rounded-lg border bg-card p-4 shadow-sm', status && STATUS_STYLES[status], className)}>
       <div className="flex items-center gap-1">
         <p className="text-sm text-muted-foreground">{title}</p>
         {description && (
@@ -33,7 +46,7 @@ export function MetricCard({ title, value, unit, format = 'number', trend, descr
         )}
       </div>
       <div className="mt-2 flex items-baseline gap-1">
-        <span className="text-2xl font-bold">{displayValue}</span>
+        <span className={cn('text-2xl font-bold', status && STATUS_VALUE_STYLES[status])}>{displayValue}</span>
         {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
       </div>
       {trend !== undefined && (