# 审查结果面板 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 未启用：提示"请检查上方错误信息"