2026Technology-Competition/docs/superpowers/specs/review-panel-ui.md

审查结果面板 UI 说明

顶部区域

元素	描述
标题	SVG 图标 + "代码审查报告"
元信息	文件路径 · 语言 · 耗时（秒）

降级横幅（AI 失败时显示）

⚠ AI 审查未完成，报告仅包含静态分析结果

执行错误框

列出 linter 未配置/未安装、适配器异常等信息。

统计卡片

卡片	颜色	说明
总计问题	白色	所有问题数量之和
错误	红色 #f48771	error 级别数量
警告	黄色 #d29922	warning 级别数量
建议	蓝色 #58a6ff	info 级别数量

三栏标签页

标签	来源	说明
🔧 {linter名称}	ESLint / PMD / SqlLint / Stylelint	静态分析检测到的问题
📋 自定义规则	.code-review-rules.yaml → AI 评估	团队自定义规则违规
🤖 AI 审查	DeepSeek API	AI 深度审查发现的问题

每个标签右侧有药丸计数（红/黄/蓝分别对应错误/警告/建议数量）。

问题条目

每一条问题卡片包含：

┌──────────────────────────────────────────────────┐
│▌  ●  BADGE  ruleId  消息文本...           L行号  │  ← 点击展开详情
│▌                                             🔧  │  ← 修复按钮
└──────────────────────────────────────────────────┘

元素	说明
左侧色条 ▌	红色=错误, 黄色=警告, 蓝色=建议（5px 宽圆角条）
彩色圆点 ●	同色圆点辅助标识
Badge	Linter（灰色）/ 自定义（紫色）/ AI（青色）
ruleId	规则标识，如 pmd:SQLInjection
消息	中文问题描述（单行省略）
行号	L18 格式，灰色背景
🔧 修复	仅 fixable 条目显示，点击后变 ⏳... 并禁用

展开详情（点击条目切换）

• 原文对照：原始英文问题描述（linter 条目）
• 💡 修复建议：蓝色背景框，给出具体修复方向
• diff 代码对比：深色背景 + del(红色) / ins(绿色) 显示修改前后
• 🎯 AI 分类标签：如"安全漏洞"、"代码设计"等（仅 AI 条目）

底部操作栏

按钮	功能
🔄 重新审查	重新运行审查流程
📄 导出报告	复制到剪贴板 / 保存为 Markdown
⚙️ 设置	打开 VS Code 设置（vscode-code-reviewer）

交互行为

• 点击条目 ← 展开/收起详情
• 点击条目空白区 ← 跳转到编辑器对应行
• 点击 🔧 修复 ← 调 AI 生成修复并应用，完成后自动重新审查
• 标签页切换 ← 三栏独立切换（保留展开状态 via retainContextWhenHidden）

空状态

• 某栏无问题：居中斜体提示，如"未发现任何问题"、"无 AI 审查建议"
• Linter 未启用：提示"请检查上方错误信息"