# git-vesion-viewer

**Repository Path**: daoos_admin/git-vesion-viewer

## Basic Information

- **Project Name**: git-vesion-viewer
- **Description**: 自定义的git版本数据查看器
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Git Version Viewer

一个基于 Vue 3 和 Vite 构建的 Git 版本可视化工具，支持直观地查看 Git 仓库的分支结构和提交历史。

## 功能特性

### 核心功能
- **双视图模式**：
  - **水平分支图**：横向展示分支结构，适合查看整体分支演进
  - **垂直分支图**：经典三栏式布局（分支列表、分支图、提交详情）
- **多仓库支持**：可同时加载和查看多个 Git 仓库数据
- **实时同步滚动**：分支图与提交列表同步滚动，提升查看体验
- **响应式设计**：适配不同屏幕尺寸，支持窗口大小变化重绘

### 技术特色
- 使用 Vue 3 Composition API 构建
- 纯前端实现，无需后端服务
- 支持 Git 数据导入和可视化展示
- 自定义滚动条样式，美观且功能完整

## 项目截图

### 单仓库视图
![单仓库视图](./docs/单仓库视图.png)

### 多仓库视图
![多仓库视图](./docs/多仓库视图.png)
### 多仓库视图-右键
![多仓库视图-右键](./docs/图1.png)
### 多仓库视图-高亮
![多仓库视图-高亮](./docs/图3.png)
### 单仓库视图-右键
![单仓库视图-右键](./docs/图2.png)
## 技术栈

- **前端框架**：Vue 3.5+
- **构建工具**：Vite 7.3+
- **开发依赖**：@vitejs/plugin-vue, vite-plugin-vue-devtools
- **Node 版本**：^20.19.0 || >=22.12.0

## 快速开始

### 环境要求
- Node.js ^20.19.0 或 >=22.12.0
- npm 或 yarn 包管理器

### 安装依赖
```sh
npm install
```

### 开发模式运行
```sh
npm run dev
```

### 生产环境构建
```sh
npm run build
```

### 预览构建结果
```sh
npm run preview
```

## 项目结构

```
src/
├── components/          # Vue 组件
│   ├── GitHeader.vue   # Git 头部信息
│   ├── RefsList.vue    # 分支列表
│   ├── BranchGraph.vue # 垂直分支图
│   ├── HorizontalBranchGraph.vue  # 水平分支图
│   ├── CommitList.vue  # 提交列表
│   └── CommitDetails.vue # 提交详情
├── composables/        # 组合式函数
│   ├── useGitData.js   # Git 数据处理
│   └── useMultiRepoData.js # 多仓库数据管理
├── App.vue             # 主应用组件
└── ...
```

## 浏览器兼容性

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

## 开发建议

### IDE 推荐配置
- **VS Code** + [Vue 官方扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- **WebStorm** - 内置优秀的 Vue 支持

### 浏览器调试
- 安装 [Vue.js devtools](https://github.com/vuejs/devtools) 进行调试
- 支持自定义对象格式化显示

## 许可证

[MIT](./LICENSE)

## 贡献指南

欢迎提交 Issue 和 Pull Request 来改进项目！