# 设置面板 UI 说明

## 内容区

### 1. 快速开始

三步引导卡片：

| 步骤 | 描述 | 完成状态 |
|------|------|---------|
| ① | 配置 AI 模型及 API Key | 圆形序号变紫色（`done`） |
| ② | 启用自定义规则 | 同上 |
| ③ | 保存并测试连接，含快捷键提示 `Ctrl+Shift+R` | 同上 |

`Ctrl+Shift+R` 为 `vscode-code-reviewer.review` 快捷键。

### 2. 审核引擎

三个模块标签：

| 标签 | 圆点颜色 | 描述 |
|------|---------|------|
| 🔵 共通规则 | 蓝色 `#58a6ff` | Linter 静态分析 |
| 🟡 自定义规则 | 琥珀色 `#d29922` | 团队编码规范 |
| 🟢 AI 审核 | 绿色 `#3fb950` | 深度代码审查 |

### 3. AI 模型配置

卡片式表单：

| 字段 | 控件 | 说明 |
|------|------|------|
| 模型提供商 | 下拉选择 | OpenAI / Azure OpenAI / DeepSeek / 腾讯混元 / Ollama |
| 模型名称 | 下拉选择 | 按提供商动态切换可选模型列表 |
| 状态标签 | `已配置` / `未配置` | 右侧药丸标签（绿/灰） |

底部提示：建议使用支持结构化输出的模型。

### 4. API Key

卡片式表单：

| 字段 | 控件 | 说明 |
|------|------|------|
| API Key | 密码输入框 | `sk-...` 格式，已输入显示为圆点掩码 |
| Base URL | 文本输入框 | 可选，按提供商自动填充默认地址 |
| 状态标签 | `已配置` / `未配置` | 右侧药丸标签 |

底部提示：Key 仅存储在本地 VS Code 安全存储中。

### 5a. 输出语言

| 字段 | 控件 | 说明 |
|------|------|------|
| AI 审查结果输出语言 | 下拉选择 | 中文（简体）/ English / 日本語 |

配置项 `ai.outputLanguage`，默认 `zh-CN`。

### 5b. 自定义规则

| 元素 | 说明 |
|------|------|
| 状态标签 | 显示已启用数，如 `3 条启用` |
| 规则行 | 开关滑块 + 规则名（等宽字体）+ 删除按钮 `×` |
| 添加行 | 文本框 + 紫色 `+ 添加` 按钮 |

示例规则：`no-console-in-production`、`max-function-lines: 80`、`require-javadoc-public`、`no-any-type`

## 底部操作栏

| 按钮 | 样式 | 功能 |
|------|------|------|
| `重置` | 次级按钮（暗色边框） | 恢复默认设置 |
| `保存并测试连接` | 主按钮（紫色 `#7c3aed`） | 保存配置 → 调用 API 测试 → 显示结果 |
| 测试中 | 按钮禁用 + spinner 动画 | — |
| 测试成功 | 按钮变为 `✓ 已连接` | Toast 绿色提示，5 秒消失 |
| 测试失败 | 按钮变为 `✗ 重试` | Toast 红色提示，5 秒消失 |

## 交互行为

- 输入 API Key → 步骤①自动标记完成（圆形变紫色）
- 开启任意规则 → 步骤②自动标记完成
- 步骤③取决于前两步完成 + 测试连接成功
- 规则开关即时切换，可删除单条规则
- 测试结果 Toast 5 秒自动消失