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