refactor(quality): Q11 前端巨型组件拆分 — PipelineRunDetail 678L→273L (-60%), 提取 types + StageProgressBar + RunsTable + LogConsole 4 个独立文件

ROADMAP.md

@@ -482,6 +482,7 @@ services/api.ts (1324L)
 | Q8 | 前端巨型组件拆分（SystemSettingsTab 754L→173L，提取通用/安全/LDAP 3 个子 Tab） | P0 | **done** |
 | Q9 | 前端巨型组件拆分（NamespaceResourcePage 719L→300L，提取 RESOURCE_CONFIG + PodDetailDialog） | P0 | **done** |
 | Q10 | 前端巨型组件拆分（ApprovalWorkflowPage 705L→167L，提取 types + UserSelectInline + WorkflowEditorModal + WorkflowCard） | P0 | **done** |
+| Q11 | 前端巨型组件拆分（PipelineRunDetail 678L→273L，提取 types + StageProgressBar + RunsTable + LogConsole） | P0 | **done** |
 
 ---
 
@@ -775,3 +776,36 @@ pending → in_progress → done / blocked
 - [x] 17/17 集成回归测试通过（零回归）
 - [x] Docker 部署 healthy
 - [x] 命名空间资源列表页 13 种资源类型功能不变（全部可正常渲染/操作）
+
+---
+
+## Q11: 前端巨型组件拆分 — PipelineRunDetail [done]
+
+**问题**: `PipelineRunDetail.tsx`（678 行）是 Q10 拆分后项目最大的业务组件之一（排除 UI 库 sidebar/data-table），包含流水线运行详情页面的全部逻辑：阶段定义/状态常量/工具函数、交互式阶段进度条（6 阶段点击过滤）、执行记录表（多选/停止/浏览/状态徽章）、WebSocket 实时日志 Console（阶段摘要 + 彩色日志 + 实时输出动画）。单文件过大导致维护困难、代码导航低效。
+
+**已完成 (2026-07-07)**:
+
+将类型/常量/工具函数、阶段进度条、执行记录表、日志 Console 提取为 `pipeline-run-detail/` 子目录下的独立文件:
+
+| 新文件 | 行数 | 职责 |
+|--------|------|------|
+| `types.ts` | 119 | STAGE_DEFS/STATUS_BADGES/STATUS_ICONS 常量 + PipelineRun/LogEntry/StageStatus 接口 + formatDuration/formatTime/parseStageStatuses/getRunStageStats/getStageLogSummary 工具函数 + JsonData re-export |
+| `StageProgressBar.tsx` | 89 | 交互式阶段进度条（6 阶段按钮 + 状态颜色 + 点击切换日志过滤 + ChevronRight 连接器） |
+| `RunsTable.tsx` | 131 | 执行记录表（loading/空状态/checkbox 多选 + 状态徽章 + 触发方式 + 用户/时长/操作列） |
+| `LogConsole.tsx` | 183 | 阶段日志 Console（CardHeader 元信息 + 阶段摘要 + 彩色日志渲染 + 阶段分隔符 + 实时输出动画） |
+
+主文件 `PipelineRunDetail.tsx` 从 **678 行降至 273 行**（-60%），仅保留：状态管理（pipeline/runs/selectedRun/logs/loading/selectedStage/pageSize/selectedIds/deleting/browserOpen/browserRun）、refs（logEndRef/wsRef）、数据加载（fetchPipeline/fetchRuns/fetchLogs）、WebSocket 生命周期（connectWS + onmessage init/done/log 分发）、自动刷新/自动滚动 effects、CRUD 操作（triggerRun/stopRun/batchDelete/toggleSelect/toggleAll）、派生数据（filteredLogs/stageSummary/successCount/runningCount）、PageShell 布局 + 3 个子组件集成。
+
+**提取原则**: types 文件为纯数据/类型（零 React 依赖，仅 lucide 图标类型引用）；StageProgressBar 为受控组件（接收 selectedRun/selectedStage/onSelectStage props，内部用 getRunStageStats 计算）；RunsTable 为受控列表组件（接收 runs + 10 个回调 props）；LogConsole 为纯展示组件（接收 selectedRun/pipeline/pipelineCode/filteredLogs/stageSummary/logEndRef props，内部用 getRunStageStats 计算阶段状态）。零逻辑变更。
+
+**验收标准**:
+- [x] PipelineRunDetail.tsx 从 678 行降至 **273 行**（-60%）
+- [x] 4 个提取的文件全部 < 185 行（最大 LogConsole 183 行）
+- [x] `tsc -b` 零错误
+- [x] `npm run build` 零错误（✓ built in 17.39s）
+- [x] ESLint errors 保持 **0**（清理 1 个 unused var + 2 个冗余 disable 指令）
+- [x] ESLint warnings 保持 **59**（无新增）
+- [x] `go build` 零错误
+- [x] 17/17 集成回归测试通过（零回归）
+- [x] Docker 部署 healthy
+- [x] 流水线运行详情页功能不变（阶段进度条/执行记录表/日志 Console/文件浏览器全部正常）