🔍 Code Review Notes - VS Code Extension

一个强大的VS Code代码评论扩展，提供智能的addComment功能，支持多用户协作、灵活同步系统和完整的评论生命周期管理。

🚀 addComment 核心功能使用指南

💬 智能代码评论 - 主要特色

addComment 是本扩展的核心功能，提供智能的代码评论体验。当您选中代码时，会在选中区域上方自动显示 "Add Comment" 按钮，让代码评论变得简单直观。

🎯 使用方法

主要方式: 智能按钮（推荐）

1. 选择要评论的代码段
2. 在选中代码上方会自动出现 "Add Comment" 按钮
3. 点击按钮
4. 在弹出的输入框中输入评论
5. 按 Enter 确认

备用方式1: 快捷键

1. 选择要评论的代码段
2. 按 Ctrl+Shift+C (Mac: Cmd+Shift+C)
3. 在输入框中输入评论
4. 按 Enter 确认

备用方式2: 右键菜单

1. 选择要评论的代码段
2. 右键点击选中区域
3. 选择 "Add Comment"
4. 在输入框中输入评论
5. 按 Enter 确认

备用方式3: 命令面板

1. 选择要评论的代码段
2. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P)
3. 输入 "Add Comment" 并选择
4. 在输入框中输入评论
5. 按 Enter 确认

✨ 功能特点

🔘 智能按钮显示: 选中代码时自动在上方显示 "Add Comment" 按钮
🔧 智能上下文检测: 自动识别选中的代码段，无需手动指定位置
💬 清爽输入体验: 简洁的输入框，专注评论内容
📍 精准位置定位: 评论准确关联到选中的代码行和文件位置
🎨 即时视觉反馈: 添加评论后立即显示高亮效果

📝 详细使用步骤

步骤1: 选择代码

用鼠标拖拽选择要评论的代码段
或者用键盘快捷键选择（Shift+方向键）

步骤2: 点击Add Comment按钮

选中代码后，上方会自动显示 "Add Comment" 按钮
点击按钮启动评论功能
可以选择单行或多行代码

步骤2: 触发addComment

最快方式：Ctrl+Shift+C
或右键选择 "Add Comment"
或命令面板输入 "Add Comment"

步骤3: 内联输入

系统会在编辑器中显示内联输入框
输入框显示提示："输入评论..."
直接输入您的评论内容

步骤4: 确认提交

按 Enter 确认添加评论
按 Escape 取消操作
评论添加后会立即显示高亮效果

🎪 实际使用示例

JavaScript代码评论示例：

// 选择这段代码
function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}
// 按 Ctrl+Shift+C，输入："建议添加参数验证"

Python代码评论示例：

# 选择这段代码
def process_data(data):
    return [x * 2 for x in data if x > 0]
# 按 Ctrl+Shift+C，输入："考虑处理空数据的情况"

🔍 评论管理功能

添加评论后，您可以：

👀 查看评论: 鼠标悬停在高亮区域查看详情
💬 回复评论: 在侧边栏树视图中右键选择 "Reply to Comment"
✅ 解决评论: 右键选择 "Resolve Comment"
🗑️ 删除评论: 右键选择 "Delete Comment"
🔄 重开评论: 对已解决的评论选择 "Unresolve Comment"

🚀 快速开始 - 30秒上手addComment

💬 立即体验核心功能

第一次使用？只需3步：

选择代码

在任意代码文件中，用鼠标选择一段代码

添加评论

选中代码后，上方会出现 "Add Comment" 按钮
点击按钮，或按 Ctrl+Shift+C

输入并确认

在弹出的输入框中输入评论内容
按 Enter 键确认

效果：

✅ 代码立即显示高亮背景
✅ 侧边栏出现"Code Review Notes"面板
✅ 鼠标悬停可查看评论详情

⚙️ 可选设置

设置用户名（推荐）

Ctrl+Shift+P → 输入"Set Username" → 输入您的名字

这样您的评论会显示正确的作者信息。

体验更多功能

💬 回复评论: 侧边栏右键评论 → "Reply to Comment"
✅ 解决评论: 右键评论 → "Resolve Comment"
👀 查看所有评论: 点击侧边栏"All Comments"视图

✨ 其他核心特性

🔄 同步通知优化: 减少git同步时的不必要通知干扰
🎛️ 全模块集成: 通知级别控制系统扩展至所有模块
⚙️ 统一接口: 统一的通知系统确保一致用户体验

🔔 通知级别控制 v0.1.1-0.1.4

🔔 通知级别设置: 通过配置控制通知显示频率
🧹 减少不必要通知: 优化同步操作的通知体验
🛠️ 修复UI问题: 解决了AddComment UI无选择时显示的问题

🔄 灵活同步系统 v0.1.0

🔄 多种同步策略: 本地存储 / Git同步 / 服务器同步（即将推出）
🎮 交互式选择器: 一键切换同步方法，无缝数据迁移
⚙️ 策略模式架构: 可扩展设计，轻松添加新的同步方式
🛡️ 向后兼容: 保留所有现有功能，平滑升级体验
📊 实时状态监控: 同步状态和健康指标显示

同步方法详解

同步方法	适用场景	特点
🏠 本地存储	个人使用	快速、可靠、无需外部依赖
🔗 Git同步	团队协作	通过Git仓库同步，支持分支和合并
🌐 服务器同步	实时协作	类似Overleaf，实时更新（开发中）

🎨 多用户协作

🌈 用户特定颜色: 8种预设颜色，自动为不同用户分配
💬 评论线程: 支持评论回复，构建完整讨论
👤 解决者信息追踪: 自动记录谁解决了评论及解决时间
👥 多用户场景: 完整支持团队代码评审工作流

🖥️ 界面体验

🌳 双重树视图: 当前文件 + 全工作区评论视图
✅ 状态管理: 已解决/未解决评论视觉区分
🎯 悬停提示: 完整评论详情和解决者信息
🔍 智能过滤: 按状态过滤（全部/已解决/未解决）

⚡ 便捷操作

⌨️ 快捷键: Ctrl+Shift+C 快速添加评论
🖱️ 上下文菜单: 右键快速操作
📋 命令面板: 完整命令集成

🚀 快速开始

💬 体验GitHub Copilot风格的内联聊天

选择要评论的代码

在编辑器中用鼠标或键盘选择任意代码段

快速添加评论

方法1: 右键选择 "Add Comment"
方法2: 按快捷键 Ctrl+Shift+C (Mac: Cmd+Shift+C)
方法3: 命令面板输入 "Add Comment"

享受内联聊天体验

系统会显示GitHub Copilot风格的内联输入框
直接在编辑器上下文中输入评论，无弹窗干扰

⚙️ 设置同步系统

选择同步方法
```
Ctrl+Shift+P → "Choose Sync Method" → 选择适合的同步策略
```
- 本地存储: 默认选项，适合个人使用
- Git同步: 适合团队协作，需要Git仓库
- 服务器同步: 即将推出的实时协作功能

设置用户名

Ctrl+Shift+P → "Set Username" → 输入您的用户名

体验同步功能

Ctrl+Shift+P → "Sync Now" → 立即同步评论
Ctrl+Shift+P → "Get Sync Status" → 查看同步状态

📋 功能详解

同步系统操作

操作	命令	说明
选择同步方法	"Choose Sync Method"	交互式选择器，支持实时切换
立即同步	"Sync Now"	手动触发完整同步
查看状态	"Get Sync Status"	显示当前同步方法和状态
Git同步	"Sync Comments to Git"	向后兼容的Git同步命令
Git加载	"Load Comments from Git"	从Git仓库加载评论
自动同步	"Enable Auto Sync"	启用Git自动同步

评论操作

操作	方法	说明
添加评论	选择文本 → 右键 / `Ctrl+Shift+C`	使用当前设置的用户名
回复评论	树视图右键 → "Reply to Comment"	形成讨论线程
解决评论	树视图右键 → "Resolve Comment"	记录解决者和时间
重开评论	树视图右键 → "Unresolve Comment"	清除解决状态
查看详情	鼠标悬停代码高亮区域	显示完整信息
跳转位置	点击树视图评论条目	直接导航到代码

解决者信息显示

悬停提示格式

✅ 已解决

作者: Alice
时间: 2024-12-26 14:30:25
解决者: Bob (2024-12-26 15:45:10)

评论内容...

树视图格式

📁 src/example.js
  ✅ 需要添加错误处理 (已解决 by Bob)
  💬 建议优化性能

视觉反馈系统

评论高亮

未解决评论: 实线彩色边框，用户专属颜色
已解决评论: 虚线半透明边框，淡化显示
用户颜色: 自动分配8种颜色中的一种

用户颜色方案

🟠 橙黄色 #ff9500 2. 🟢 绿色 #30d158
🔵 蓝色 #007aff 4. 🔴 红色 #ff3b30
⚫ 灰色 #8e8e93 6. 🟣 紫色 #af52de
🟤 深橙色 #ff6b35 8. 🔷 青色 #32d2c9

🎯 命令列表

命令	功能	快捷键
`Set Username`	设置当前用户名	-
`Add Comment`	添加新评论	`Ctrl+Shift+C`
`Reply to Comment`	回复评论	-
`Resolve Comment`	解决评论（记录解决者）	-
`Unresolve Comment`	重新打开评论	-
`Refresh Comments`	刷新评论视图	-
`Create Test Comments`	创建多用户演示评论	-
`Toggle Comment Highlights`	切换评论高亮	-
`Toggle Resolved Highlights`	切换已解决评论高亮	-

⚙️ 配置选项

在VS Code设置中可配置：

{
  "codeReviewNotes.defaultAuthor": "YourName",
  "codeReviewNotes.syncMethod": "local",
  "codeReviewNotes.serverUrl": "http://localhost:3000",
  "codeReviewNotes.serverAuthToken": "your-token",
  "codeReviewNotes.enableRealTimeSync": false,
  "codeReviewNotes.showResolvedCommentHighlights": true,
  "codeReviewNotes.unresolvedCommentColor": "#ff9500",
  "codeReviewNotes.resolvedCommentColor": "#30d158"
}

新增配置项说明

配置项	类型	默认值	说明
`syncMethod`	string	"local"	同步方法: local/git/server
`serverUrl`	string	""	服务器同步URL地址
`serverAuthToken`	string	""	服务器同步认证令牌
`enableRealTimeSync`	boolean	false	启用实时同步（需服务器支持）

🏗️ 技术架构

策略模式设计

// 抽象同步策略
abstract class SyncStrategy {
    abstract getSyncMethod(): SyncMethod;
    abstract isSupported(): Promise<boolean>;
    abstract saveComments(comments: Comment[]): Promise<SyncResult>;
    abstract loadComments(): Promise<Comment[]>;
    abstract performFullSync(localComments: Comment[]): Promise<Comment[]>;
}

// 具体策略实现
class LocalSyncStrategy extends SyncStrategy { ... }
class GitSyncStrategy extends SyncStrategy { ... }
class ServerSyncStrategy extends SyncStrategy { ... }

// 统一管理器
class SyncManager {
    async setSyncMethod(method: SyncMethod): Promise<void>
    async showSyncMethodPicker(): Promise<void>
    getCurrentSyncMethod(): SyncMethod
}

文件结构

src/
├── syncStrategy.ts          # 抽象基类和接口
├── localSyncStrategy.ts     # 本地同步实现
├── gitSyncService.ts        # Git同步实现
├── serverSyncStrategy.ts    # 服务器同步占位
├── syncManager.ts           # 同步管理器
├── commentService.ts        # 评论服务（已重构）
└── extension.ts             # 扩展入口（新增命令）

🔧 开发调试

环境要求

VS Code 1.100.0+
Node.js 16+
TypeScript 5.0+

本地开发

# 安装依赖
npm install

# 编译TypeScript
npm run compile

# 启动监听模式
npm run watch

# 运行扩展
按 F5 启动Extension Development Host

扩展打包

# 打包为VSIX文件
npx @vscode/vsce package

📁 数据存储

存储位置

评论数据: 工作区状态存储
用户设置: VS Code工作区配置
用户颜色: 扩展上下文存储

评论数据结构

interface Comment {
  id: string;
  text: string;
  author: string;
  timestamp: number;
  range: CommentRange;
  documentUri: string;
  resolved: boolean;
  resolvedBy?: string;    // 🆕 解决者用户名
  resolvedAt?: number;    // 🆕 解决时间戳
  replies: Reply[];
}

🧪 测试场景

基础功能测试

✅ 设置用户名并验证保存
✅ 添加评论使用正确用户名
✅ 解决评论并记录解决者信息
✅ 验证悬停提示显示解决者详情
✅ 检查树视图解决者信息格式

多用户协作测试

✅ 运行"Create Test Comments"命令
✅ 验证不同用户显示不同颜色
✅ 测试解决其他用户的评论
✅ 检查解决者信息的正确显示

边界条件测试

✅ 空用户名处理
✅ 特殊字符用户名
✅ 长用户名显示
✅ 向后兼容性（旧评论无解决者信息）

🐛 故障排除

常见问题

Q: 如何设置用户名？ A: 按Ctrl+Shift+P，输入"Set Username"，在弹出框中输入您的用户名

Q: 解决者信息不显示？ A: 确保评论是在设置用户名后解决的，旧评论可能没有解决者信息

Q: 扩展没有激活？ A: 检查VS Code版本（需要1.100.0+），在Extension Development Host中按F5运行

Q: 评论颜色冲突？ A: 可在设置中自定义颜色，或切换VS Code主题

📊 版本历史

v0.1.0 (当前版本) - 2025年5月26日

🚀 重大功能发布: 灵活同步系统

✅ 策略模式架构重写
✅ 本地/Git/服务器三种同步策略
✅ 交互式同步方法选择器
✅ 向后兼容所有现有功能
✅ 新增6个同步相关命令
✅ 完整的配置选项支持

v0.0.2 - 2025年5月26日

✅ 用户特定颜色系统
✅ 解决者信息追踪
✅ 悬浮提示优化
✅ 测试评论命令

v0.0.1 - 2025年5月26日

✅ 基础评论功能
✅ 双树视图界面
✅ 评论线程和回复
✅ 状态管理和高亮

🔮 路线图

即将推出 (v0.2.0)

[ ] 🌐 服务器同步实现: WebSocket实时通信
[ ] 👥 团队功能: 用户管理和在线状态
[ ] 🔔 通知系统: 评论更新提醒

未来版本

[ ] 📊 分析报告: 导出评论报告（PDF/Excel）
[ ] 🔗 平台集成: GitHub/Azure DevOps集成
[ ] 🎯 工作流: 代码审查工作流自动化
[ ] 📱 移动支持: VS Code移动版适配

🧪 测试验证

同步系统测试 ✅

# 运行集成测试
node integration_test.js

测试覆盖：

✅ 所有文件正确编译
✅ 命令正确注册
✅ 配置项正确设置
✅ 策略切换正常工作
✅ 向后兼容性保持

功能测试建议

基础功能: 创建→回复→解决评论
同步切换: 本地↔Git↔服务器策略切换
多用户协作: 不同用户颜色和解决者信息
Git集成: 分支同步和冲突处理

🐛 故障排除

同步相关问题

Q: 如何切换同步方法？ A: Ctrl+Shift+P → "Choose Sync Method" → 选择新的同步策略

Q: Git同步失败？ A: 确保当前工作区是Git仓库，并且有适当的读写权限

Q: 服务器同步不可用？ A: 服务器同步功能当前为占位实现，将在v0.2.0版本中完整实现

Q: 数据会丢失吗？ A: 切换同步方法时会自动迁移数据，建议切换前手动同步一次

通用问题

Q: 扩展没有激活？ A: 检查VS Code版本（需要1.100.0+），重新安装扩展

Q: 命令找不到？ A: 重新加载窗口 (Ctrl+Shift+P → "Reload Window")

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

Fork项目
创建功能分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add amazing feature')
推送到分支 (git push origin feature/amazing-feature)
发起Pull Request

开发者: GitHub Copilot
项目状态: ✅ 生产就绪，同步系统架构完整
最后更新: 2025年5月26日

🚀 立即开始:

按 F5 启动扩展开发环境
Ctrl+Shift+P → "Choose Sync Method" 选择同步策略
开始体验强大的协作功能！

Code Review Notes

renyumeng

🔍 Code Review Notes - VS Code Extension

🚀 addComment 核心功能使用指南

💬 智能代码评论 - 主要特色

🎯 使用方法

✨ 功能特点

📝 详细使用步骤

🎪 实际使用示例

🔍 评论管理功能

🚀 快速开始 - 30秒上手addComment

💬 立即体验核心功能

⚙️ 可选设置

✨ 其他核心特性

🔔 通知级别控制 v0.1.1-0.1.4

🔄 灵活同步系统 v0.1.0

同步方法详解

🎨 多用户协作

🖥️ 界面体验

⚡ 便捷操作

🚀 快速开始

💬 体验GitHub Copilot风格的内联聊天

⚙️ 设置同步系统

📋 功能详解

同步系统操作

评论操作

解决者信息显示

悬停提示格式

树视图格式

视觉反馈系统

评论高亮

用户颜色方案

🎯 命令列表

⚙️ 配置选项

新增配置项说明

🏗️ 技术架构

策略模式设计

文件结构

🔧 开发调试

环境要求

本地开发

扩展打包

📁 数据存储

存储位置

评论数据结构

🧪 测试场景

基础功能测试

多用户协作测试

边界条件测试

🐛 故障排除

常见问题

📊 版本历史

v0.1.0 (当前版本) - 2025年5月26日

v0.0.2 - 2025年5月26日

v0.0.1 - 2025年5月26日

🔮 路线图

即将推出 (v0.2.0)

未来版本

🧪 测试验证

同步系统测试 ✅

功能测试建议

🐛 故障排除

同步相关问题

通用问题

📄 许可证

🤝 贡献