feat: 添加 GitHub 统计数据展示功能

新增 GitHub 统计卡片和徽章组件,在项目卡片、详情页和侧边栏中展示 GitHub stars、forks 等统计数据

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-12-30 14:14:02 +08:00
co-authored by Claude
parent 443dc8370e
commit cae5686d2d
12 changed files with 1766 additions and 41 deletions
+57 -9
View File
@@ -220,24 +220,72 @@ python main.py</code></pre>
</a>
</div>
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-2 gap-4">
<!-- 方案A: GitHub 专用统计卡片 - 分离 GitHub 数据和其他元数据 -->
<div class="mb-6">
<div class="bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 text-black dark:text-white p-4">
<h3 class="font-display text-xs uppercase tracking-widest mb-3 flex items-center gap-2">
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-3.14-.95-3.14-.95-.43-.92-.1-1.25-.1-1.25.2-.05.41.08.95.08 2.76 1.89 3.78 1.89 3.78 1.69 2.88 4.44 2.05 5.53-.16.47-.86-.94-1.25-1.14-.42-.26-.89-.04-1.25.23-.89.65-2.18.95-3.3 1.01-.22.01-.44.05-.66.12-.26.11-.53.03-.72-.13-.22-.18-.44-.49-.44-.49-.25-.95-.08-1.25.23-.72.72-1.87 2.05-2.84 2.85-.13.11-.24.26-.24.42 0 .33.27.76.76.76 1.16 0 .87.72 1.96 2.05 2.4 2.82.2.06.43.09.65.05.31-.06.6-.17.87-.33.26-.16.48-.36.63-.57.23-.21.47-.44.64-.67.19-.26.35-.54.48-.83.11-.26.17-.54.17-.82 0-.47-.27-.91-.66-1.1-.67-.34-1.45-.51-2.32-.51-.88 0-1.67.18-2.35.53-.26.13-.5.25-.73.36-.22.1-.42.23-.58.37-.14.13-.26.26-.34.4-.07.14-.1.29-.1.44 0 .18.09.34.25.46.13.11.29.18.46.18.19 0 .38-.06.55-.17.15-.11.28-.24.39-.39.1-.15.18-.31.23-.48.05-.18.06-.36.06-.54 0-.3-.17-.57-.44-.74-.23-.17-.5-.26-.78-.26-.28 0-.55.09-.79.26-.23.17-.41.39-.54.64-.12.24-.17.5-.17.77 0 .26.17.5.43.67.25.17.57.26.89.26.31 0 .6-.09.85-.26.23-.17.41-.39.54-.64.12-.24.18-.5.18-.77 0-.26-.17-.5-.43-.67-.26-.17-.57-.26-.89-.26-.31 0-.6.09-.85.26-.23.17-.41.39-.54.64-.12.24-.17.5-.17.77zM8 15c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"/>
</svg>
GitHub Statistics
</h3>
<!-- 使用 Shields.io 徽章网格显示所有 GitHub 实时数据 -->
<div class="grid grid-cols-2 gap-3">
<a href="https://github.com/agentpark/autogpt-x/stargazers" class="group" title="View stars on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
</svg>
<div>
<span class="text-xs text-gray-500 uppercase font-mono block mb-1">License</span>
<span class="font-bold text-sm">MIT</span>
<div class="text-[9px] uppercase font-mono text-gray-500">Stars</div>
<div class="font-display font-bold text-lg">142k</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/network/members" class="group" title="View forks on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
</svg>
<div>
<span class="text-xs text-gray-500 uppercase font-mono block mb-1">Pricing</span>
<span class="font-bold text-sm">Free</span>
<div class="text-[9px] uppercase font-mono text-gray-500">Forks</div>
<div class="font-display font-bold text-lg">34k</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/issues" class="group" title="View issues on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
<path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/>
</svg>
<div>
<span class="text-xs text-gray-500 uppercase font-mono block mb-1">Stars</span>
<span class="font-bold text-sm">142k</span>
<div class="text-[9px] uppercase font-mono text-gray-500">Issues</div>
<div class="font-display font-bold text-lg">892</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/blob/main/LICENSE" class="group" title="View license on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-purple-600" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1.75c4.556 0 8.25 3.694 8.25 8.25 0 1.356-.344 2.647-.956 3.78-.556.057-1.072.25-1.444.525-.436.32-.688.742-.688 1.25 0 .469.253.891.688 1.25.47.4.869.496 1.444.525 2.09-.613 3.325-1.438 4.188-.47.48-1.088.79-1.5.79-.406-.006-.738-.274-.96-.638-.31-.494-.672-.59-1.031-.59-.25 0-.476.088-.656.25-.182.163-.39.25-.625.25-.238 0-.447-.087-.625-.25-.178-.164-.395-.25-.641-.25-.356 0-.722.096-1.031.59-.413.584-.554.29-1.5-.79-.612.313-1.156.48-1.625.525-.47-.22-.906-.25-1.444-.525-.612-1.133-.956-3.78-.956-4.556 0-8.25 3.694-8.25 8.25zM4.5 9a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5z"/>
</svg>
<div>
<span class="text-xs text-gray-500 uppercase font-mono block mb-1">Forks</span>
<span class="font-bold text-sm">34k</span>
<div class="text-[9px] uppercase font-mono text-gray-500">License</div>
<div class="font-display font-bold text-lg">MIT</div>
</div>
</div>
</a>
</div>
<div class="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600">
<div class="flex items-center justify-between text-xs font-mono">
<span class="text-gray-500">Last commit</span>
<span class="font-display font-bold">2 days ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-primary border-2 border-black p-6 relative overflow-hidden shadow-brutal dark:shadow-none group cursor-pointer hover:bg-yellow-400 transition-colors">
+9
View File
@@ -172,9 +172,18 @@
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Automation</span>
<span class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-2 py-1 text-[10px] uppercase font-display font-bold text-gray-600 dark:text-gray-300">Workflow</span>
</div>
<div class="flex items-center justify-between">
<a class="inline-flex items-center font-display font-bold text-sm uppercase border-b-2 border-transparent hover:border-primary transition-colors pb-0.5" href="#">
View Details <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
</a>
<!-- Neo-brutalism Stars Badge Design -->
<div class="inline-flex items-center gap-2 px-3 py-1.5 border-2 border-black dark:border-white/40 bg-white dark:bg-surface-dark shadow-neo-sm hover:shadow-neo transition-all cursor-pointer group/stars" title="42.5k stars on GitHub">
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
</svg>
<span class="font-display font-bold text-sm text-black dark:text-white">42.5k</span>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-white/20 p-6 shadow-neo hover:shadow-neo-hover hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">