# github-api

**Repository Path**: kikolove/github-api

## Basic Information

- **Project Name**: github-api
- **Description**: 对接Github官方API，并使用React实现的第三方web UI
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-30
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README



# GitHub-API

这是一个基于 GitHub 官方 API 的客户端项目，提供仓库搜索、仓库详情查看、仓库层级目录浏览等功能。

## 功能特性

- **仓库搜索** - 支持按关键词搜索 GitHub 仓库
- **仓库详情** - 查看仓库的详细信息，包括描述、星标数、创建时间等
- **目录浏览** - 以层级结构展示仓库的目录和文件
- **用户信息** - 查看仓库所有者信息
- **响应式设计** - 适配不同尺寸的屏幕

## 技术栈

- [React](https://reactjs.org/) - 前端 UI 框架
- [Redux](https://redux.js.org/) - 状态管理
- [React Router](https://reactrouter.com/) - 路由管理
- TypeScript - 类型安全
- Axios - HTTP 请求
- Ant Design - UI 组件库

## 项目结构

```
├── config/                 # Webpack 配置文件
├── public/                 # 公共资源
├── scripts/                # 构建脚本
├── src/
│   ├── api/               # API 接口封装
│   ├── components/        # 公共组件
│   │   ├── cardDetails.tsx
│   │   ├── Play.tsx
│   │   ├── Repo.tsx
│   │   ├── repoCard.tsx
│   │   └── css/           # 组件样式
│   ├── css/               # 全局样式
│   ├── model/             # TypeScript 类型定义
│   │   └── IGithub.ts
│   ├── router/            # 路由配置
│   ├── store/             # Redux 状态管理
│   │   └── features/      # Slice 文件
│   ├── utils/             # 工具函数
│   │   ├── color.ts       # 颜色处理
│   │   ├── file.ts        # 文件处理
│   │   └── http.ts        # HTTP 请求封装
│   ├── views/             # 页面组件
│   │   └── repoDeatils.tsx
│   ├── App.tsx
│   └── index.tsx
├── static/                 # 静态资源（截图）
└── package.json
```

## 快速开始

### 环境要求

- Node.js 14+
- Yarn 或 npm

### 安装依赖

```bash
yarn install
```

### 启动开发服务器

```bash
yarn start
```

访问 http://localhost:3000

### 构建生产版本

```bash
yarn build
```

### 运行测试

```bash
yarn test
```

## 主要组件

| 组件 | 描述 |
|------|------|
| `repoCard` | 仓库卡片组件，展示仓库基本信息 |
| `cardDetails` | 用户信息卡片组件 |
| `Repo` | 仓库列表组件 |
| `Play` | 侧边栏组件 |
| `RepoDeatils` | 仓库详情页面 |

## 状态管理

项目使用 Redux Toolkit 进行状态管理，包含以下 slice：

- `repoListSlice` - 仓库列表状态
- `repoSlice` - 当前仓库状态
- `userSlice` - 用户信息状态
- `pageSlice` - 页面状态

## 工具函数

- `formatFileSize` - 格式化文件大小
- `http` - 封装了 Axios 的 HTTP 请求工具

## 预览截图

![仓库搜索](./static/p1.png)

![仓库列表](./static/p2.png)

![目录浏览](./static/p3.gif)

## License

本项目基于 MIT 许可证开源。