feat(小宝预警): 调整风险列表布局和导航徽标

apps/web/components/xiaobao-warning/XiaobaoWarningCard.tsx

@@ -1,9 +1,7 @@
 'use client';
 
-import { CalendarClock, ChevronRight, Sparkles, TrendingDown, TrendingUp, TriangleAlert } from 'lucide-react';
+import { ChevronRight, TriangleAlert } from 'lucide-react';
 import type { XiaobaoRiskLevel, XiaobaoVersionRisk } from '@/lib/xiaobao-risk';
-import { formatDateTime } from '@/lib/format';
-import { formatRemainingWork } from '@/lib/xiaobao-warning-view';
 
 const RISK_LEVEL_LABEL: Record<XiaobaoRiskLevel, string> = {
   on_track: '按期',
@@ -14,31 +12,40 @@ const RISK_LEVEL_LABEL: Record<XiaobaoRiskLevel, string> = {
 };
 
 const RISK_LEVEL_STYLE: Record<XiaobaoRiskLevel, string> = {
-  on_track: 'bg-emerald-50 text-emerald-700 border-emerald-200',
-  attention: 'bg-amber-50 text-amber-700 border-amber-200',
-  at_risk: 'bg-orange-50 text-orange-700 border-orange-200',
-  likely_delayed: 'bg-red-50 text-red-700 border-red-200',
-  blocked: 'bg-zinc-900 text-white border-zinc-900',
+  on_track: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  attention: 'border-amber-200 bg-amber-50 text-amber-700',
+  at_risk: 'border-orange-200 bg-orange-50 text-orange-700',
+  likely_delayed: 'border-red-200 bg-red-50 text-red-700',
+  blocked: 'border-zinc-900 bg-zinc-900 text-white',
 };
 
-export function XiaobaoWarningCard({ risk, onClick }: { risk: XiaobaoVersionRisk; onClick: () => void }) {
-  const firstReason = risk.reasons[0];
-  const TrendIcon = risk.trend.direction === 'down' ? TrendingDown : risk.trend.direction === 'up' ? TrendingUp : TriangleAlert;
-
+export function XiaobaoWarningCard({
+  risk,
+  active = false,
+  onClick,
+}: {
+  risk: XiaobaoVersionRisk;
+  active?: boolean;
+  onClick: () => void;
+}) {
   return (
     <button
       type="button"
       onClick={onClick}
-      className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] p-4 text-left transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-subtle)]"
+      className={`w-full rounded-lg border p-3 text-left transition-colors ${
+        active
+          ? 'border-[var(--accent)] bg-[var(--accent-soft)]'
+          : 'border-[var(--line)] bg-[var(--bg)] hover:border-[var(--accent)] hover:bg-[var(--bg-subtle)]'
+      }`}
     >
       <div className="flex items-start gap-3">
-        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--bg-subtle)] text-[var(--accent)]">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--bg-subtle)] text-[var(--accent)]">
           <TriangleAlert className="h-4 w-4" strokeWidth={1.8} />
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-start gap-2">
             <div className="min-w-0 flex-1">
-              <h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{risk.versionName}</h3>
+              <h3 className="truncate text-[13px] font-semibold text-[var(--ink)]">{risk.versionName}</h3>
               <p className="mt-0.5 truncate text-[11px] text-[var(--ink-muted)]">
                 {risk.productName ?? '-'} / {risk.projectName ?? '-'}
               </p>
@@ -48,36 +55,10 @@ export function XiaobaoWarningCard({ risk, onClick }: { risk: XiaobaoVersionRisk
             </span>
           </div>
 
-          <div className="mt-3 grid grid-cols-4 gap-2">
-            <Metric label="风险分" value={String(risk.riskScore)} tone={risk.riskScore >= 70 ? 'danger' : risk.riskScore >= 45 ? 'warn' : 'ok'} />
-            <Metric label="延期" value={risk.delayDays > 0 ? `${risk.delayDays}天` : '0天'} tone={risk.delayDays > 0 ? 'danger' : 'ok'} />
-            <Metric label="剩余" value={formatRemainingWork(risk.remainingWorkHours)} tone={risk.remainingWorkHours > 0 ? 'warn' : 'ok'} />
+          <div className="mt-3 grid grid-cols-2 gap-2">
+            <Metric label="风险分" value={String(risk.riskScore)} tone={risk.riskScore >= 75 ? 'danger' : risk.riskScore >= 55 ? 'warn' : 'ok'} />
             <Metric label="置信" value={`${risk.confidence}%`} tone={risk.confidence < 50 ? 'danger' : risk.confidence < 75 ? 'warn' : 'ok'} />
           </div>
-
-          <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--ink-muted)]">
-            <span className="inline-flex items-center gap-1">
-              <CalendarClock className="h-3.5 w-3.5" />
-              期望 {formatDateTime(risk.expectedReleaseDate)}
-            </span>
-            <span>预测 {formatDateTime(risk.forecastReleaseDate)}</span>
-            <span className="inline-flex items-center gap-1">
-              <TrendIcon className="h-3.5 w-3.5" />
-              {risk.trend.summary}
-            </span>
-          </div>
-
-          {firstReason && (
-            <p className="mt-2 text-[12px] leading-5 text-[var(--ink-soft)]">
-              {firstReason.title}: {firstReason.detail}
-            </p>
-          )}
-          {risk.aiInsight?.summary && (
-            <p className="mt-2 flex items-start gap-1.5 text-[12px] leading-5 text-[var(--accent)]">
-              <Sparkles className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-              <span>{risk.aiInsight.summary}</span>
-            </p>
-          )}
         </div>
         <ChevronRight className="mt-2 h-4 w-4 shrink-0 text-[var(--ink-muted)]" />
       </div>
@@ -88,7 +69,7 @@ export function XiaobaoWarningCard({ risk, onClick }: { risk: XiaobaoVersionRisk
 function Metric({ label, value, tone }: { label: string; value: string; tone: 'ok' | 'warn' | 'danger' }) {
   const toneClass = tone === 'danger' ? 'text-red-600' : tone === 'warn' ? 'text-amber-600' : 'text-emerald-600';
   return (
-    <div className="rounded-lg border border-[var(--line)] bg-[var(--bg)] px-2 py-2">
+    <div className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2 py-2">
       <p className="text-[10px] text-[var(--ink-muted)]">{label}</p>
       <p className={`mt-0.5 text-[13px] font-semibold tabular-nums ${toneClass}`}>{value}</p>
     </div>