【Code with SOLO】用 SOLO 搭建 GitInsight — 输入仓库地址即可生成 10 维度可视化分析报告

SOLO挑战赛专区
, ,
1

【Code with SOLO】用 SOLO 搭建 GitInsight — 输入仓库地址即可生成 10 维度可视化分析报告

一、摘要

用 TRAE SOLO 从零搭建了一个 Git 代码贡献可视化分析工具（GitInsight）——只需输入 GitHub 仓库地址（如 https://github.com/vuejs/vue），即可自动获取提交数据并生成包含贡献热力图、提交类型分布、代码行数趋势、贡献者详情卡片等 10 大维度的可视化分析报告。纯前端实现，无需安装，打开即用。

二、背景

我是一名开发者，在日常工作中经常需要回答这些问题：

  • 这个项目谁贡献最多？
  • 团队的提交频率如何？有没有人在摸鱼？
  • 代码变更集中在哪些时间段？
  • 最近一个月项目进展如何？
  • feat/fix/refactor 各占多少比例？

虽然 GitHub 自带贡献图，但它只能看个人的，无法分析整个仓库的团队贡献。市面上的 Git 分析工具（如 GitStats、GitLab Analytics）要么需要安装配置，要么依赖特定平台。

我想要一个零安装、打开即用、输入仓库地址就能分析的轻量工具。于是用 SOLO 一次对话搞定了。

三、实践过程

第一步：确定产品形态

我明确了几个设计原则：

  1. 零安装：纯 HTML/CSS/JS，浏览器直接打开
  2. 零依赖（除 CDN）：不需要 npm install，不需要构建工具
  3. 输入极简：粘贴仓库地址，一键分析
  4. 输出丰富：10 大维度的可视化图表
  5. 双模式：支持 GitHub API 自动获取 + 手动粘贴 git log

第二步：技术方案

模块 技术 说明
UI 框架 原生 HTML/CSS 零依赖，GitHub Dark 风格
图表库 Chart.js (CDN) 折线图、柱状图、雷达图、环形图、混合图
热力图 Canvas 2D 自绘 类 GitHub 贡献日历
数据源 GitHub REST API 自动获取公开仓库提交数据
数据解析 正则表达式 解析 git log 格式化输出

第三步：核心模块实现

1. GitHub API 自动获取

输入仓库地址后，自动调用 GitHub REST API 获取提交数据：

用户输入：https://github.com/anthropics/skills
         ↓ 解析仓库地址
GET /repos/anthropics/skills/commits?per_page=100&page=1
         ↓ 自动分页获取
解析出：hash、作者、时间、消息等字段

支持自动分页，最多获取约 3000 次提交。同时保留手动粘贴 git log --shortstat 的方式作为备选，可获取代码行数变更等更详细的数据。

2. Git Log 解析引擎

手动模式下，用户在终端运行：

git log --all --pretty=format:"%H|%an|%ae|%aI|%s" --shortstat

解析引擎用正则匹配每一行，提取 commit hash、作者、时间、消息，以及 shortstat 中的文件变更数、新增行数、删除行数。

3. 贡献热力图（Canvas 自绘）

完全用 Canvas 2D API 手绘，模拟 GitHub 的贡献日历：

  • 52 周 × 7 天的方块网格
  • 5 级绿色深度映射提交频率
  • 月份标签 + 星期标签
  • 自动计算最近一年的数据范围

4. 提交类型分布（环形图）

自动解析 commit message 前缀（Conventional Commits 规范）：

feat: 新增登录功能  → feat
fix: 修复首页Bug   → fix
docs: 更新文档      → docs
refactor: 重构模块  → refactor

统计各类型占比，用环形图展示。

5. 代码行数趋势（混合图）

按月统计新增行数和删除行数，用绿色柱状表示新增、红色柱状表示删除、橙色折线表示净增趋势。

6. 贡献者详情卡片

Top 5 贡献者的个人分析卡片，包含：

  • 彩色头像（首字母）
  • 提交数、新增/删除行数
  • 活跃天数
  • 贡献占比进度条
  • 最近提交时间

7. 其他图表

  • :chart_increasing: 提交趋势（按周折线图）
  • :trophy: 贡献者排行榜（Top 10 水平柱状图）
  • :alarm_clock: 时间分布（24 小时柱状图）
  • :date: 星期分布（雷达图）
  • :date: 月度活跃度（柱状图，最活跃月份高亮）

8. 报告导出

一键导出 Markdown 格式的分析报告，包含概览统计、提交类型分布、贡献者排行、最近提交记录。

第四步：用 SOLO 的过程

整个开发过程经历了多轮迭代：

第一轮：基础版本——4 个统计卡片 + 6 个图表，手动粘贴 git log。

Prompt：帮我创建一个 Git 代码贡献可视化分析工具…

第二轮：增加 GitHub API 支持——输入仓库地址即可分析。

Prompt：让 GitInsight 支持输入 GitHub 仓库地址，通过 GitHub API 自动获取提交数据…

第三轮：全面升级——扩展到 10 大维度，UI 视觉大幅提升。

Prompt：全面升级：增加提交类型分布、代码行数趋势、月度活跃度、贡献者详情卡片…

每一轮 SOLO 都能快速理解需求并生成高质量代码，我只做了少量调试和微调。

第五步：踩坑记录

  1. ES Module 兼容性：初始用了 export/import 语法，但直接打开 HTML 文件时不支持。解决方案：合并为单文件
  2. GitHub API 速率限制：未认证 API 限制 60 次请求/小时。解决方案：请求间隔设为 60 秒，并提供手动粘贴作为备选
  3. git log 格式解析：--shortstat 的输出是多行的，需要正确处理 commit 行和 stat 行的对应关系
  4. 热力图日期对齐：需要将日期对齐到周日开始，否则周数会错位
  5. Chart.js 实例管理：切换数据时需要先销毁旧图表实例，否则会内存泄漏
  6. Conventional Commits 解析：需要支持 feat(scope): 格式，正则需要处理括号内的 scope

四、成果展示

image
image2560×1529 417 KB

功能清单

功能 说明
:link: 仓库地址输入 粘贴 GitHub 仓库地址，自动获取数据
:bullseye: 热门仓库快捷键 vuejs/vue、facebook/react、torvalds/linux、microsoft/vscode 一键分析
:bar_chart: 8 项概览统计 总提交数、贡献者、活跃天数、日均提交、新增/删除行数、文件数、项目持续时间
:fire: 贡献热力图 GitHub 风格的年度贡献日历，5 级绿色深度
:label: 提交类型分布 环形图展示 feat/fix/docs/refactor 等各类型占比
:bar_chart: 代码行数趋势 混合图：绿色柱状(新增) + 红色柱状(删除) + 橙色折线(净增)
:date: 月度活跃度 柱状图展示每月提交数，最活跃月份高亮
:bust_in_silhouette: 贡献者详情 Top 5 贡献者个人卡片，含贡献占比进度条
:chart_increasing: 提交趋势 按周统计的折线图
:trophy: 贡献者排行 Top 10 水平柱状图，hover 显示详细数据
:alarm_clock: 时间分布 24 小时提交分布柱状图
:date: 星期分布 雷达图展示工作日/周末贡献差异
:clipboard: 提交列表 最近 100 条提交记录，含彩色类型标签
:page_facing_up: 报告导出 一键导出 Markdown 格式分析报告
:video_game: 示例数据 内置 180 天模拟数据，无需真实仓库即可体验

使用方式

方式一：仓库地址（推荐）

  1. 打开 index.html
  2. 输入 GitHub 仓库地址（如 https://github.com/anthropics/skills）
  3. 点击"分析" → 等待数据获取 → 查看报告

方式二：手动粘贴

  1. 在终端运行 git log --all --pretty=format:"%H|%an|%ae|%aI|%s" --shortstat
  2. 展开"手动粘贴"面板 → 粘贴输出 → 点击"开始分析"

技术亮点

  • 纯前端零安装：一个 HTML 文件 + 一个 CSS + 一个 JS，浏览器直接打开
  • 双数据源：GitHub API 自动获取 + git log 手动粘贴
  • Canvas 手绘热力图：不依赖任何图表库，完全自定义绘制
  • Conventional Commits 解析：智能识别 feat/fix/docs/refactor 等 11 种提交类型
  • 8 项统计卡片：带彩色左边框和数字跳动动画
  • 贡献者详情卡片：GitHub 个人卡片风格，含贡献占比进度条
  • 提交类型彩色标签：每种类型独立配色，一目了然
  • 入场动画：卡片 fadeInUp 动画，提升视觉体验

五、效果与总结

提效数据

指标 传统方式 用 SOLO
开发时间 2-3 天 多轮迭代，每轮约 30 分钟
代码量 ~2500 行手写 SOLO 生成 + 微调
分析维度 4-6 个 10 个维度
使用门槛 需安装 GitStats 等工具 输入仓库地址即可

思考与收获

  1. 小工具大价值：不需要复杂的项目才能参赛，解决真实痛点的小工具同样有竞争力
  2. SOLO 的迭代能力：从基础版到全面升级，每轮 SOLO 都能快速理解需求并生成高质量代码
  3. 纯前端的优势：零安装、零配置、即开即用，分享一个 HTML 文件就能让任何人使用
  4. 可视化让数据说话：同样的 git log 数据，可视化后信息密度和可读性提升了 10 倍
  5. 双模式设计：GitHub API 方便快速体验，git log 粘贴保留完整数据能力

适用场景

  • :office_building: 团队管理：快速了解团队成员的贡献情况和工作节奏
  • :bar_chart: 项目复盘：回顾项目周期内的开发节奏和代码变更趋势
  • :bust_in_silhouette: 个人总结：生成年终/季度个人开发报告
  • :bullseye: 招聘评估：分析候选人的 GitHub 开源贡献模式
  • :clipboard: 开源选型：对比不同开源项目的活跃度和维护状态

:light_bulb: 一句话总结：用 SOLO 搭建了一个输入仓库地址就能生成 10 维度可视化报告的 Git 分析工具，零安装、即开即用，这就是 AI 赋能开发者生产力的最好证明。