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>
+  );
+}