XCodeReviewer - 您的智能代码审计伙伴 ?
XCodeReviewer 是一个由大型语言模型(LLM)驱动的现代化代码审计平台,旨在为开发者提供智能、全面且极具深度的代码质量分析和审查服务。
🌟 为什么选择 XCodeReviewer?
在快节奏的软件开发中,保证代码质量至关重要。传统代码审计工具规则死板、效率低下,而人工审计则耗时耗力。XCodeReviewer 借助 Google Gemini AI 的强大能力,彻底改变了代码审查的方式:
- 🤖 AI 驱动的深度分析:超越传统静态分析,理解代码意图,发现深层逻辑问题。
- 🎯 多维度、全方位评估:从安全性、性能、可维护性到代码风格,提供 360 度无死角的质量评估。
- 💡 清晰、可行的修复建议:独创 What-Why-How 模式,不仅告诉您“是什么”问题,还解释“为什么”,并提供“如何修复”的具体代码示例。
- ⚡ 实时反馈,即时提升:无论是代码片段还是整个代码仓库,都能获得快速、准确的分析结果。
- ✨ 现代化、高颜值的用户界面:基于 React + TypeScript 构建,提供流畅、直观的操作体验。
🎬 项目演示
主要功能界面
📊 智能仪表盘
实时展示项目统计、质量趋势和系统性能,提供全面的代码审计概览
⚡ 即时分析
支持代码片段快速分析,提供详细的 What-Why-How 解释和修复建议
🚀 项目管理
集成 GitHub/GitLab 仓库,支持多语言项目审计和批量代码分析
🚀 快速开始
环境要求
- Node.js:
18+
- pnpm:
8+
(推荐) 或npm
/yarn
- Google Gemini API Key: 用于 AI 代码分析
- Supabase 项目: 用于数据存储(可选,支持离线模式)
安装与启动
-
克隆项目
git clone https://github.com/lintsinghua/XCodeReviewer.git cd XCodeReviewer
-
安装依赖
# 使用 pnpm (推荐) pnpm install # 或使用 npm npm install # 或使用 yarn yarn install
-
配置环境变量
# 创建环境变量文件 touch .env
在
.env
文件中添加以下配置:# Google Gemini AI 配置 (必需) VITE_GEMINI_API_KEY=your_gemini_api_key_here VITE_GEMINI_MODEL=gemini-2.5-flash VITE_GEMINI_TIMEOUT_MS=25000 # Supabase 配置 (可选,用于数据持久化) VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key-here # 应用配置 VITE_APP_ID=xcodereviewer
-
启动开发服务器
pnpm dev
- 访问应用 在浏览器中打开
http://localhost:5173
🔑 获取 API Key
Google Gemini API Key
- 访问 Google AI Studio
- 创建新的 API Key
- 将 API Key 添加到
.env
文件中的VITE_GEMINI_API_KEY
Supabase 配置 (可选)
- 访问 Supabase 创建新项目
- 在项目设置中获取 URL 和匿名密钥
- 运行数据库迁移脚本:
# 在 Supabase SQL 编辑器中执行 cat supabase/migrations/full_schema.sql
✨ 核心功能
🚀 项目管理
⚡ 即时分析
🧠 智能审计
💡 可解释性分析 (What-Why-How)
📊 可视化报告
🛠️ 技术栈
分类 | 技术 | 说明 |
---|---|---|
前端框架 | React 18 TypeScript Vite |
现代化前端开发栈,支持热重载和类型安全 |
UI 组件 | Tailwind CSS Radix UI Lucide React |
响应式设计,无障碍访问,丰富的图标库 |
数据可视化 | Recharts |
专业的图表库,支持多种图表类型 |
路由管理 | React Router v6 |
单页应用路由解决方案 |
状态管理 | React Hooks Sonner |
轻量级状态管理和通知系统 |
AI 引擎 | Google Gemini 2.5 Flash |
强大的大语言模型,支持代码分析 |
后端服务 | Supabase PostgreSQL |
全栈后端即服务,实时数据库 |
HTTP 客户端 | Axios Ky |
现代化的 HTTP 请求库 |
代码质量 | Biome Ast-grep TypeScript |
代码格式化、静态分析和类型检查 |
构建工具 | Vite PostCSS Autoprefixer |
快速的构建工具和 CSS 处理 |
📁 项目结构
XCodeReviewer/
├── src/
│ ├── components/ # React 组件
│ │ ├── common/ # 通用组件 (Header, Footer, PageMeta)
│ │ ├── ui/ # UI 组件库 (基于 Radix UI)
│ │ └── debug/ # 调试组件
│ ├── pages/ # 页面组件
│ │ ├── Dashboard.tsx # 仪表盘
│ │ ├── Projects.tsx # 项目管理
│ │ ├── InstantAnalysis.tsx # 即时分析
│ │ ├── AuditTasks.tsx # 审计任务
│ │ └── AdminDashboard.tsx # 系统管理
│ ├── services/ # 服务层
│ │ ├── codeAnalysis.ts # AI 代码分析引擎
│ │ ├── repoScan.ts # 仓库扫描服务
│ │ └── repoZipScan.ts # ZIP 文件扫描
│ ├── db/ # 数据库配置
│ │ └── supabase.ts # Supabase 客户端和 API
│ ├── types/ # TypeScript 类型定义
│ ├── hooks/ # 自定义 React Hooks
│ ├── lib/ # 工具函数
│ └── routes.tsx # 路由配置
├── supabase/
│ └── migrations/ # 数据库迁移文件
├── public/ # 静态资源
└── docs/ # 文档
🎯 使用指南
即时代码分析
- 访问
/instant-analysis
页面 - 选择编程语言(支持 10+ 种语言)
- 粘贴代码或上传文件
- 点击"开始分析"获得 AI 分析结果
- 查看详细的问题报告和修复建议
项目管理
- 访问
/projects
页面 - 点击"新建项目"创建项目
- 配置仓库 URL 和扫描参数
- 启动代码审计任务
- 查看审计结果和问题统计
审计任务
- 在项目详情页创建审计任务
- 选择扫描分支和排除模式
- 配置分析深度和范围
- 监控任务执行状态
- 查看详细的问题报告
🔧 开发指南
代码规范
- 使用 TypeScript 进行类型安全开发
- 遵循 ESLint 和 Biome 代码规范
- 使用 Prettier 进行代码格式化
- 组件采用函数式组件 + Hooks
构建和部署
# 开发模式
pnpm dev
# 构建生产版本
pnpm build
# 预览构建结果
pnpm preview
# 代码检查
pnpm lint
环境变量说明
变量名 | 必需 | 说明 |
---|---|---|
VITE_GEMINI_API_KEY |
✅ | Google Gemini API 密钥 |
VITE_GEMINI_MODEL |
❌ | AI 模型名称 (默认: gemini-2.5-flash) |
VITE_GEMINI_TIMEOUT_MS |
❌ | 请求超时时间 (默认: 25000ms) |
VITE_SUPABASE_URL |
❌ | Supabase 项目 URL |
VITE_SUPABASE_ANON_KEY |
❌ | Supabase 匿名密钥 |
VITE_APP_ID |
❌ | 应用标识符 (默认: xcodereviewer) |
🤝 贡献指南
我们热烈欢迎所有形式的贡献!无论是提交 issue、创建 PR,还是改进文档,您的每一次贡献对我们都至关重要。请联系我们了解详细信息。
开发流程
- Fork 本项目
- 创建您的功能分支 (
git checkout -b feature/AmazingFeature
) - 提交您的更改 (
git commit -m 'Add some AmazingFeature'
) - 推送到分支 (
git push origin feature/AmazingFeature
) - 创建一个 Pull Request
🚨 故障排除
常见问题
1. 白屏问题
问题: 应用启动后显示白屏 解决方案:
- 检查浏览器控制台是否有错误信息
- 确认已正确配置
VITE_GEMINI_API_KEY
环境变量 - 检查网络连接,确保能访问 Google AI API
2. API 调用失败
问题: 代码分析功能无法使用 解决方案:
- 验证 Gemini API Key 是否有效
- 检查 API 配额是否用完
- 确认网络能访问
https://generativelanguage.googleapis.com
3. 数据库连接问题
问题: 项目数据无法保存 解决方案:
- 检查 Supabase 配置是否正确
- 确认数据库表结构已正确创建
- 验证 RLS (Row Level Security) 策略
4. 构建失败
问题: pnpm build
命令失败 解决方案:
# 清理缓存
pnpm clean
rm -rf node_modules
pnpm install
# 检查 TypeScript 类型错误
pnpm type-check
调试模式
启用调试模式查看详细日志:
# 设置调试环境变量
export DEBUG=true
pnpm dev
性能优化
- 使用
pnpm
而不是npm
获得更快的安装速度 - 启用 Vite 的预构建缓存
- 配置 CDN 加速静态资源加载