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

apps/web/components/layout/Sidebar.tsx

@@ -3,14 +3,24 @@
 import { usePathname, useRouter } from 'next/navigation';
 import { Inbox, Package, FolderKanban, Tag, Users, LayoutGrid, Search, Lightbulb, Clock, Shield, Settings, Sparkles, TriangleAlert } from 'lucide-react';
 import { useHasPermission } from '@/components/auth/Guard';
+import { useXiaobaoWarningRisks } from '@/hooks/useXiaobaoWarningRisks';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { useMemberStore } from '@/stores/useMemberStore';
+import { getXiaobaoWarningRiskCount } from '@/lib/xiaobao-warning-view';
+
+type NavItemConfig = {
+  label: string;
+  path: string;
+  icon: any;
+  permission: string | null;
+  badge?: 'xiaobao-risk';
+};
 
 const NAV_GROUPS = [
   {
     label: '工作区',
     items: [
-      { label: '小宝预警', path: '/xiaobao-warning', icon: TriangleAlert, permission: 'xiaobao.warning:view' },
+      { label: '小宝预警', path: '/xiaobao-warning', icon: TriangleAlert, permission: 'xiaobao.warning:view', badge: 'xiaobao-risk' as const },
       { label: '与我相关', path: '/workspace', icon: Inbox, permission: null as string | null },
       { label: '产品', path: '/products', icon: Package, permission: 'product:view' },
       { label: '项目', path: '/projects', icon: FolderKanban, permission: 'project:view' },
@@ -104,7 +114,7 @@ function UserBlock() {
 
 function NavGroup({ label, items, isActive, onNavigate }: {
   label: string;
-  items: { label: string; path: string; icon: any; permission: string | null }[];
+  items: NavItemConfig[];
   isActive: (p: string) => boolean;
   onNavigate: (p: string) => void;
 }) {
@@ -121,7 +131,7 @@ function NavGroup({ label, items, isActive, onNavigate }: {
 }
 
 function NavItem({ item, active, onNavigate }: {
-  item: { label: string; path: string; icon: any; permission: string | null };
+  item: NavItemConfig;
   active: boolean;
   onNavigate: (p: string) => void;
 }) {
@@ -138,7 +148,20 @@ function NavItem({ item, active, onNavigate }: {
       }`}
     >
       <Icon className="h-4 w-4 shrink-0" strokeWidth={1.75} />
-      <span className="truncate">{item.label}</span>
+      <span className="min-w-0 flex-1 truncate">{item.label}</span>
+      {item.badge === 'xiaobao-risk' && <XiaobaoRiskNavBadge />}
     </button>
   );
 }
+
+function XiaobaoRiskNavBadge() {
+  const { risks } = useXiaobaoWarningRisks();
+  const count = getXiaobaoWarningRiskCount(risks);
+  if (count <= 0) return null;
+
+  return (
+    <span className="ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-red-600 px-1.5 text-[10px] font-semibold leading-none text-white">
+      {count > 99 ? '99+' : count}
+    </span>
+  );
+}

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>