# GithubCodeAnalyzer

**Repository Path**: mJieg/github-code-analyzer

## Basic Information

- **Project Name**: GithubCodeAnalyzer
- **Description**: GitHub 仓库代码分析工具
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GitHub Code Analyzer

一个基于 AI 的 GitHub 仓库代码分析工具，可以自动分析仓库的代码结构、技术栈、入口文件，并生成函数调用链图。

## 功能特性

### 核心功能
- **仓库文件浏览** - 输入 GitHub 仓库 URL，自动获取并展示完整的文件目录树
- **AI 智能分析** - 使用 AI 分析仓库代码，识别：
  - 主要编程语言
  - 技术栈（框架、库、工具、数据库等）
  - 项目入口文件
  - 项目类型和简介
- **函数调用链分析** - 自动分析入口函数的调用链，生成可视化的函数调用图

### 辅助功能
- **代码预览** - 支持多种编程语言的语法高亮显示
- **文件缓存** - 已查看的文件自动缓存，无需重复请求
- **工作日志** - 记录分析过程中的关键操作，支持查看 AI 请求和响应详情
- **历史记录** - 保存分析历史，支持快速重新访问

## 技术栈

### 前端框架
- **React 19** - 用户界面构建
- **React Router 7** - 路由管理
- **TypeScript 5.8** - 类型安全

### 构建工具
- **Vite 6** - 构建和开发服务器
- **Tailwind CSS 4** - 样式框架

### UI 组件
- **Lucide React** - 图标库
- **Motion** - 动画库
- **React Syntax Highlighter** - 代码语法高亮
- **React Resizable Panels** - 可调整大小的面板布局

### AI 支持
- **SiliconFlow** - 支持多种开源模型（Qwen、DeepSeek 等）

### 后端
- **Express** - 服务端功能支持

## 环境要求

- **Node.js**: 20.19.0
- **npm**: 11.11.1

## 快速开始

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd github-code-analyzer
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **运行开发服务器**
   ```bash
   npm run dev
   ```

4. **访问应用**

   打开浏览器访问 http://localhost:3000

5. **配置 AI**

   在首页输入以下信息：
   - GitHub 仓库地址（如：https://github.com/facebook/react）
   - 模型名称（默认：Qwen/Qwen3-14B）
   - Base URL（默认：https://api.siliconflow.cn/v1）
   - API Key（从 [SiliconFlow](https://cloud.siliconflow.cn/i/9qwD4Tr3) 获取）

## 项目结构

```
github-code-analyzer/
├── src/
│   ├── components/              # React 组件
│   │   ├── CodeViewer.tsx       # 代码预览组件
│   │   ├── CodeSettingsToolbar.tsx # 代码设置工具栏
│   │   ├── FileTree.tsx         # 文件树组件
│   │   ├── FunctionCallGraph.tsx # 函数调用图组件
│   │   └── LogPanel.tsx         # 日志面板组件
│   ├── lib/
│   │   ├── ai.ts                # AI 分析逻辑
│   │   ├── codeSettings.ts      # 代码设置配置
│   │   ├── github.ts            # GitHub API
│   │   ├── logger.ts            # 日志系统
│   │   ├── analysisHistory.ts   # 历史记录管理
│   │   ├── functionModules.ts   # 函数模块分析
│   │   └── useFileCache.ts      # 文件缓存 Hook
│   ├── pages/
│   │   ├── Home.tsx             # 首页
│   │   └── Analysis.tsx         # 分析页面
│   ├── App.tsx                  # 应用主组件
│   ├── index.css                # 全局样式
│   └── main.tsx                 # 入口文件
├── package.json
├── vite.config.ts
└── README.md
```

## 构建部署

### 构建生产版本

```bash
npm run build
```

构建产物将输出到 `dist` 目录。

### 预览构建结果

```bash
npm run preview
```

### 部署到静态服务器

将 `dist` 目录部署到任意静态文件服务器即可，如：
- Nginx
- Apache
- Vercel
- Netlify
- GitHub Pages

### Docker 部署（示例）

```dockerfile
FROM node:20.19.0-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 环境变量

项目支持以下环境变量（可选）：

| 变量名 | 说明 | 默认值 |
|--------|------|--------|
| `VITE_CALL_CHAIN_MAX_DEPTH` | 函数调用链最大深度 | 2 |

## 常用命令

| 命令 | 说明 |
|------|------|
| `npm run dev` | 启动开发服务器 |
| `npm run build` | 构建生产版本 |
| `npm run preview` | 预览构建结果 |
| `npm run lint` | TypeScript 类型检查 |
| `npm run clean` | 清理构建产物 |

## 许可证

MIT License