refactor(quality): Q29 前端巨型组件拆分 — AlertCenter 542L→312L (-42%), 提取 4 个受控组件 (AlertsToolbar 89L 筛选工具栏 + AlertsTab 149L 告警列表表格+分页 + ContactsTab 87L 联系人卡片网格 + ContactGroupsTab 88L 联系组卡片网格), 客户端搜索过滤逻辑移入 AlertsTab, 删除确认逻辑下沉到子组件, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (18.71s), go build=0, 17/17 测试通过

ROADMAP.md

@@ -500,6 +500,44 @@ services/api.ts (1324L)
 | Q26 | 前端巨型组件拆分（PodLogsViewer 553L→331L，提取 pod-logs-viewer/types(highlightKeyword 纯函数) + LogsHeader + ControlBar + LogContentArea + BottomStatusBar） | P0 | **done** |
 | Q27 | 前端巨型组件拆分（HostMonitor 547L→224L (-59%)，提取 host-monitor/tabs/ 8 个文件 (BasicTab + DiskTab + NetworkTab + PortMonitorTab + ProcessTable + FDUsageCard + ContextSwitchCard + ProcessTab)，TABS 常量数组提取为模块级，PCT_REF_LINES 常量提升到 types.ts，端口/进程数组类型 JsonData→JsonData[] 类型安全升级） | P0 | **done** |
 | Q28 | 前端巨型组件拆分（KubernetesClusterDetail 547L→130L (-76%)，提取 cluster-detail/ 8 个文件 (types(computeClusterMetrics/buildTrendData 纯函数) + OverviewTab + NodesTab + PodsTab + DeploymentsTab + ServicesTab + IngressesTab + EventsTab)） | P0 | **done** |
+| Q29 | 前端巨型组件拆分（AlertCenter 542L→312L (-42%)，提取 4 个受控组件 (AlertsToolbar 89L 筛选工具栏 + AlertsTab 149L 告警列表表格+分页 + ContactsTab 87L 联系人卡片网格 + ContactGroupsTab 88L 联系组卡片网格)，客户端搜索过滤逻辑移入 AlertsTab，删除确认逻辑下沉到子组件） | P0 | **done** |
+
+---
+
+## Q29: 前端巨型组件拆分 — AlertCenter [done]
+
+**问题**: `AlertCenter.tsx`（542 行）是 Q28 拆分后项目最大的核心业务组件之一（排除 UI 库 sidebar/data-table），包含告警中心主页面的全部编排逻辑：6 个 Tab（告警列表/告警规则/指标目录/报警联系人/报警联系组/通知策略）、~20 个 useState 状态管理、TanStack Query hooks（useAlerts/useUnifiedAlertRules/useMetricCatalog/useAlertMutations）、告警操作（确认/解决/静默）、联系人/联系组 CRUD、以及 4 块大段内联 JSX（筛选工具栏 ~56 行 + 告警列表表格+分页 ~110 行 + 联系人卡片网格 ~48 行 + 联系组卡片网格 ~48 行）。单文件过大导致维护困难。
+
+**已完成 (2026-07-09)**:
+
+将筛选工具栏、告警列表表格、联系人 Tab、联系组 Tab 提取为 `alert-center/` 目录下的独立文件:
+
+| 新文件 | 行数 | 职责 |
+|--------|------|------|
+| `AlertsToolbar.tsx` | 89 | 告警筛选工具栏（搜索框 + 严重级别/状态/来源 3 个 Select 下拉 + 总数 + 刷新按钮），受控展示组件接收 9 个 props（searchQuery/onSearchChange + 3 筛选值 + onFilterChange + total/fetchingAlerts/onRefresh） |
+| `AlertsTab.tsx` | 149 | 告警列表 Tab（Card + 表格表头 + loading/空状态 + 告警行渲染（标题/描述/标签徽章/严重级别 Badge/状态 Badge/来源/持续时间/操作按钮）+ 分页控件），受控组件接收 11 个 props（alerts/loading/searchQuery/nowMs/total/totalPages/page + 4 回调） |
+| `ContactsTab.tsx` | 87 | 报警联系人 Tab（空状态 + 卡片网格，每张卡片含名称/手机/邮箱/渠道类型徽章/Webhook URL + 编辑/删除按钮 + useConfirm 二次确认），受控展示组件接收 contacts + onEdit + onDelete 回调 |
+| `ContactGroupsTab.tsx` | 88 | 报警联系组 Tab（空状态 + 卡片网格，每张卡片含组名/人数徽章/备注/成员名称徽章列表 + 编辑/删除按钮 + useConfirm 二次确认），受控展示组件接收 contactGroups/contacts（用于解析成员名）+ onEdit + onDelete 回调 |
+
+主文件 `AlertCenter.tsx` 从 **542 行降至 312 行**（-42%），仅保留：~20 个 useState 状态声明、TanStack Query hooks 编排、alertParams useMemo、fetchContacts/fetchContactGroups 数据加载、告警操作（handleAcknowledge/handleResolve/handleSilence/handleQuickSetup）、告警规则删除（handleDeleteAgentRule/handleDeleteMonitorRule）、handleFilterChange、pageTabs 配置、nowMs、PageShell 布局（StatStrip + 6 Tab 条件渲染分发 + actions 按钮组）、4 个 Dialog 挂载（AlertDetailDialog/AlertSilenceDialog/ContactDialog/ContactGroupDialog）。
+
+**关键改进**:
+- **客户端搜索逻辑下沉**: 原 `alerts.filter(alert => { ... searchQuery ... })` 内联在主组件 JSX 的 `.map()` 前，提取到 `AlertsTab` 组件内部作为 `filteredAlerts` 派生值，主组件不再感知搜索过滤逻辑。
+- **删除确认逻辑下沉**: 原 ContactsTab/ContactGroupsTab 的删除按钮内联 `useConfirm` + `alertApi.deleteContact` + `toast` + `fetchContacts` 逻辑，提取到子组件内部，主组件只需传入 `onDelete(id)` async 回调。
+- **受控组件架构**: 4 个子组件全部为受控展示组件（接收状态 + 回调 props），无独立状态。所有状态管理保留在主组件，拆分为纯机械操作（移动 JSX + 添加 props 透传），零逻辑变更。
+
+**验收标准**:
+- [x] AlertCenter.tsx 从 542 行降至 **312 行**（-42%）
+- [x] 4 个提取的文件全部 < 150 行（最大 AlertsTab 149 行）
+- [x] `tsc -b` 零错误
+- [x] `npm run build` 零错误（✓ built in 18.71s）
+- [x] ESLint errors 保持 **0**（5 个文件零 errors/warnings）
+- [x] ESLint warnings 保持 **65**（无新增）
+- [x] 全局 ESLint any 保持 **0**
+- [x] `go build` 零错误
+- [x] 17/17 集成回归测试通过（零回归）
+- [x] Docker 部署 healthy，前端页面正常加载（HTTP 200）
+- [x] 告警中心页功能不变（6 个 Tab：告警列表筛选+表格+分页/告警规则/指标目录/报警联系人/报警联系组/通知策略全部正常）
 
 ---