[优化] 添加 WAF IP 组功能，包括 CRUD 接口和前端页面支持

openflare_server/web/features/waf/components/rule-list-section.tsx

@@ -4,17 +4,22 @@ export function RuleListSection({
   title,
   description,
   items,
+  groupItems = [],
   tone,
   emptyText,
   onRemove,
+  onRemoveGroup,
 }: {
   title: string;
   description: string;
   items: string[];
+  groupItems?: Array<{ id: number; name: string; enabled: boolean }>;
   tone: 'whitelist' | 'blacklist';
   emptyText: string;
   onRemove: (item: string) => void;
+  onRemoveGroup?: (id: number) => void;
 }) {
+  const total = items.length + groupItems.length;
   return (
     <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
       <div className="flex items-start justify-between gap-4">
@@ -27,12 +32,20 @@ export function RuleListSection({
           </p>
         </div>
         <span className="shrink-0 rounded-full bg-[var(--surface-muted)] px-3 py-1 text-xs font-semibold text-[var(--foreground-primary)]">
-          {items.length}
+          {total}
         </span>
       </div>
       <div className="mt-5">
-        {items.length > 0 ? (
+        {total > 0 ? (
           <div className="flex flex-wrap gap-2">
+            {groupItems.map((group) => (
+              <RuleChip
+                key={`group-${group.id}`}
+                label={`IP组: ${group.name}${group.enabled ? '' : ' (停用)'}`}
+                tone={tone}
+                onRemove={() => onRemoveGroup?.(group.id)}
+              />
+            ))}
             {items.map((item) => (
               <RuleChip
                 key={item}