gitlink-cli/doc/demo.html

470 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitLink CLI Skills 交互式演示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #333; }
.header { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #fff; padding: 40px 20px; text-align: center; }
.header h1 { font-size: 28px; margin-bottom: 8px; }
.header p { color: #a0aec0; font-size: 15px; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.tab { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; background: #e2e8f0; color: #4a5568; transition: all 0.2s; }
.tab:hover { background: #cbd5e0; }
.tab.active { background: #1a73e8; color: #fff; }
.panel { display: none; }
.panel.active { display: block; }
.card { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card h3 { font-size: 18px; color: #1a1a2e; margin-bottom: 8px; }
.card p { font-size: 14px; color: #555; line-height: 1.7; }
.card .tag { display: inline-block; background: #e8f0fe; color: #1a73e8; padding: 3px 12px; border-radius: 12px; font-size: 12px; margin: 2px 4px 2px 0; }
.step { margin-bottom: 12px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.step-hd { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; background: #fafbfc; }
.step-hd:hover { background: #f0f2f5; }
.step-num { width: 26px; height: 26px; background: #1a73e8; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 10px; flex-shrink: 0; }
.step-hd .title { flex: 1; font-size: 14px; font-weight: 600; }
.step-hd .arrow { font-size: 14px; color: #999; transition: transform 0.2s; }
.step-hd.open .arrow { transform: rotate(90deg); }
.step-bd { display: none; padding: 16px; }
.step-bd.open { display: block; }
.cmd { background: #1e1e2e; color: #cdd6f4; padding: 10px 14px; border-radius: 6px; font-family: Consolas,monospace; font-size: 12px; overflow-x: auto; margin-bottom: 10px; }
.cmd .prompt { color: #89b4fa; }
.output { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px 14px; font-family: Consolas,monospace; font-size: 12px; overflow-x: auto; white-space: pre-wrap; color: #333; max-height: 250px; overflow-y: auto; margin-bottom: 10px; }
.analysis { background: #fefce8; border: 1px solid #fde68a; border-radius: 6px; padding: 14px; font-size: 13px; color: #92400e; margin-top: 8px; line-height: 1.8; }
.analysis strong { color: #78350f; }
.report { background: #fff; border: 2px solid #1a73e8; border-radius: 8px; padding: 20px; font-size: 13px; line-height: 2; margin-top: 8px; }
.report h4 { font-size: 18px; margin-bottom: 10px; color: #1a1a2e; }
.report table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.report th { background: #e8f0fe; color: #1a56db; padding: 6px 10px; text-align: left; border: 1px solid #d0d7de; }
.report td { padding: 6px 10px; border: 1px solid #d0d7de; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-g { background: #dcfce7; color: #166534; }
.badge-y { background: #fef9c3; color: #854d0e; }
.badge-r { background: #fce4ec; color: #c62828; }
.file-link { color: #1a73e8; text-decoration: none; font-size: 13px; }
.file-link:hover { text-decoration: underline; }
.bar { display: inline-block; height: 14px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
@media (max-width: 768px) { .tabs { flex-direction: column; } }
</style>
</head>
<body>
<div class="header">
<h1>GitLink CLI Skills 交互式演示</h1>
<p>点击查看 AI 对数据的深度分析与处理结果</p>
</div>
<div class="container">
<div class="tabs">
<button class="tab active" data-tab="health">项目健康度报告</button>
<button class="tab" data-tab="release">Release Notes 生成</button>
<button class="tab" data-tab="triage">Issue 自动分拣</button>
</div>
<!-- ======================== 项目健康度 ======================== -->
<div class="panel active" id="panel-health">
<div class="card">
<h3>项目健康度报告</h3>
<p>采集 Issue、PR、commit 数据,从 7 个维度量化分析,生成综合评分和改进建议。</p>
<div><span class="tag">repo +info</span><span class="tag">issue +list</span><span class="tag">pr +list</span><span class="tag">commit +list</span><span class="tag">milestone +list</span></div>
<a class="file-link" href="../skills/gitlink-project-health/SKILL.md" target="_blank">查看 SKILL.md →</a>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">1</span><span class="title">采集原始数据</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="cmd"><span class="prompt">$</span> gitlink-cli issue +list --owner z2_cc --repo gitlink-cli --state all --format json</div>
<div class="output">{
"issues": [
{"number":1,"subject":"提升跨平台兼容性","status_id":1,"created_at":"2026-05-28"},
{"number":2,"subject":"keyword-test-xyz-abc","status_id":5,"created_at":"2026-05-28","closed_at":"2026-06-01"},
{"number":10,"subject":"新增 Wiki 管理","status_id":5,"created_at":"2026-06-01","closed_at":"2026-06-04"},
{"number":12,"subject":"新增代码片段管理","status_id":5,"created_at":"2026-06-03","closed_at":"2026-06-04"},
{"number":14,"subject":"Webhook 投递监控","status_id":1,"created_at":"2026-06-04"},
{"number":15,"subject":"新增 failed + task-view","status_id":1,"created_at":"2026-06-04"}
],
"total_count":16, "closed_count":14
}</div>
<div class="cmd"><span class="prompt">$</span> gitlink-cli pr +list --owner z2_cc --repo gitlink-cli --state all --format json</div>
<div class="output">{
"pull_requests": [
{"number":31,"title":"fix: normalize issue list output","state":"merged","created_at":"2026-06-01","merged_at":"2026-06-03"}
],
"total_count":5, "merged_count":4
}</div>
<div class="cmd"><span class="prompt">$</span> gitlink-cli commit +list --owner z2_cc --repo gitlink-cli --limit 50</div>
<div class="output">[
{"author":"wqer","message":"enhance: enrich skill outputs with data analysis","date":"2026-06-17"},
{"author":"wqer","message":"docs: update demo page with AI analysis","date":"2026-06-17"},
{"author":"wqer","message":"docs: add interactive demo page for skills","date":"2026-06-17"},
{"author":"wqer","message":"docs: add release notes workflow example","date":"2026-06-17"},
{"author":"wqer","message":"feat: add three new skills","date":"2026-06-17"}
]</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">2</span><span class="title">Issue 维度深度分析</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>📊 Issue 基础统计</strong><br>
总 Issue 数:<strong>16</strong><br>
打开中:<strong>2</strong>12.5%<br>
已关闭:<strong>14</strong>87.5%<br><br>
<strong>⏱ 响应时间分析</strong><br>
计算每条 closed Issue 从 created 到 closed 的天数:<br>
#2 keyword-test: 4 天<br>
#10 Wiki 管理: 3 天<br>
#12 代码片段: 1 天<br>
平均响应时间:<strong>2.7 天</strong><span class="badge badge-g">响应及时 🟢</span><br><br>
<strong>📈 积压趋势分析</strong><br>
近 30 天新增4 个<br>
近 30 天关闭3 个<br>
净变化:<strong>+1</strong><span class="badge badge-y">基本稳定 🟡</span><br><br>
<strong>🏷 标签分布</strong><br>
未打标签16 个100%)→ 建议增加标签管理<br><br>
<strong>📋 小结</strong><br>
关闭率 87.5%,响应及时,积压稳定 → <span class="badge badge-g">Issue 管理良好 🟢</span><br>
<strong>评分8/10</strong>
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">3</span><span class="title">PR 维度深度分析</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>📊 PR 基础统计</strong><br>
总 PR 数:<strong>5</strong><br>
已合并:<strong>4</strong>80%<br>
打开中:<strong>1</strong>20%<br><br>
<strong>⏱ 合并效率分析</strong><br>
#31 fix: normalize output — 2 天<br>
平均合并时间:<strong>2 天</strong><span class="badge badge-g">合并迅速 🟢</span><br><br>
<strong>📋 小结</strong><br>
合并率高,速度快 → <span class="badge badge-g">PR 流程健康 🟢</span><br>
<strong>评分8/10</strong>
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">4</span><span class="title">贡献者活跃度分析</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>👥 贡献者统计</strong><br>
近 50 次提交:<strong>15</strong><br>
去重作者:<strong>1</strong>wqer<span class="badge badge-r">单人维护 🔴</span><br>
新贡献者0 人 → <span class="badge badge-r">缺少新鲜血液 🔴</span><br><br>
<strong>📅 提交频率</strong><br>
最近一周:每天都有提交 → <span class="badge badge-g">非常活跃 🟢</span><br><br>
<strong>🔄 提交类型分布</strong><br>
feat新功能6 次40%<br>
docs文档5 次33%<br>
fix修复2 次13%<br>
chore工程2 次13%<br><br>
<strong>📋 小结</strong><br>
提交活跃但仅 1 人维护 → <span class="badge badge-y">需吸引贡献者 🟡</span><br>
<strong>评分6/10</strong>
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">5</span><span class="title">里程碑进度</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>🗓 里程碑概览</strong><br>
v1.3.0 — 到期日2026-06-30完成度60% → <span class="badge badge-g">进行中 🟢</span><br>
v2.0.0 — 到期日2026-08-15完成度20% → <span class="badge badge-y">初期阶段 🟡</span><br><br>
<strong>逾期风险:</strong>无 🔴 无逾期
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)" style="background:#f0f9ff;">
<span class="step-num" style="background:#34a853;">R</span>
<span class="title" style="color:#1a73e8;">📋 AI 生成的完整健康度报告</span>
<span class="arrow"></span>
</div>
<div class="step-bd">
<div class="report">
<h4>项目健康度报告 — z2_cc/gitlink-cli</h4>
<strong>报告日期:</strong>2026-06-17<br>
<strong>综合评分7.3/10 🟢 良好</strong><br><br>
<strong>一、Issue 状况8/10 🟢)</strong><br>
关闭率 87.5%,平均 2.7 天响应,积压基本稳定。<br><br>
<strong>二、PR 状况8/10 🟢)</strong><br>
合并率 80%,合并迅速。<br><br>
<strong>三、贡献者活跃度6/10 🟡)</strong><br>
单人维护,提交活跃,缺少新贡献者。<br><br>
<strong>四、里程碑进度7/10 🟢)</strong><br>
v1.3.0 完成 60%,按计划推进。<br><br>
<strong>五、改进建议</strong><br>
<strong>🔴 高优先级</strong><br>
1. 标记 good-first-issue 吸引新贡献者<br>
2. 为 Issue 增加标签分类<br><br>
<strong>🟡 中优先级</strong><br>
3. 添加 CONTRIBUTING.md 引导新人<br>
4. 定期清理积压 Issue<br><br>
<strong>🟢 低优先级</strong><br>
5. 考虑添加 CI/CD 自动化流水线
</div>
</div>
</div>
</div>
<!-- ======================== Release Notes ======================== -->
<div class="panel" id="panel-release">
<div class="card">
<h3>Release Notes 生成</h3>
<p>分析 commit 历史,按 Conventional Commits 规范分类统计,推荐语义化版本,生成结构化发布说明。</p>
<div><span class="tag">release +list</span><span class="tag">git log</span><span class="tag">pr +list</span></div>
<a class="file-link" href="../skills/gitlink-release-auto/SKILL.md" target="_blank">查看 SKILL.md →</a>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">1</span><span class="title">获取基线版本</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="cmd"><span class="prompt">$</span> gitlink-cli release +list --owner z2_cc --repo gitlink-cli --format json</div>
<div class="output">[ { "tag_name":"v1.2.0", "name":"v1.2.0", "body":"初始版本发布", "created_at":"2026-06-01" } ]</div>
<div class="analysis"><strong>基线版本:</strong>v1.2.02026-06-01<br>作为对比基准,计算自 v1.2.0 以来的所有变更。</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">2</span><span class="title">获取提交历史并分析</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="cmd"><span class="prompt">$</span> git log v1.2.0..HEAD --format="%H|%s|%an|%ad" --date=short</div>
<div class="output">a4587f9|feat: add webhook +failed and +task-view commands|wqer|2026-06-04
37a0f21|docs: add release notes workflow example|wqer|2026-06-17
6c0ad3b|feat: add three new skills|wqer|2026-06-17
d1cc68b|docs: add workflow examples|wqer|2026-06-17
9a51db0|feat: add wiki and snippet skills|wqer|2026-06-17
5866600|enhance: enrich skill outputs|wqer|2026-06-17
21a3447|docs: update demo page|wqer|2026-06-17</div>
<div class="cmd"><span class="prompt">$</span> git log v1.2.0..HEAD --stat --oneline | tail -5</div>
<div class="output">15 files changed, 980 insertions(+), 810 deletions(-)</div>
<div class="analysis">
<strong>📊 AI 分类统计过程:</strong><br><br>
<strong>Step 1 — 按 Conventional Commits 分类</strong><br>
feat: add webhook +failed → ✨ 新功能<br>
docs: add release notes → 📝 文档<br>
feat: add three new skills → ✨ 新功能<br>
docs: add workflow examples → 📝 文档<br>
feat: add wiki and snippet → ✨ 新功能<br>
enhance: enrich skill → ⚡ 优化<br>
docs: update demo page → 📝 文档<br><br>
<strong>Step 2 — 数量统计</strong><br>
✨ 新功能3 次43%<br>
📝 文档3 次43%<br>
⚡ 优化1 次14%<br>
<strong>总提交7 次 | 贡献者1 人</strong><br><br>
<strong>Step 3 — 变更规模</strong><br>
涉及文件15 个<br>
新增行数:+980<br>
删除行数:-810
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">3</span><span class="title">版本号推荐</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>语义化版本推荐规则:</strong><br>
<table>
<tr><th>条件</th><th>版本变更</th></tr>
<tr><td>包含 BREAKING CHANGE</td><td>主版本 +11.x.x → 2.0.0</td></tr>
<tr><td>包含 feat无 breaking</td><td><strong>次版本 +11.2.x → 1.3.0</strong></td></tr>
<tr><td>仅 fix/docs/chore</td><td>修订号 +11.2.0 → 1.2.1</td></tr>
</table>
<br>
<strong>当前版本:</strong>v1.2.0<br>
<strong>包含 feat</strong><br>
<strong>包含 BREAKING CHANGE</strong><br><br>
<strong>推荐版本v1.3.0 🏷</strong>
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)" style="background:#f0f9ff;">
<span class="step-num" style="background:#34a853;">R</span>
<span class="title" style="color:#1a73e8;">📋 AI 生成的完整 Release Notes</span>
<span class="arrow"></span>
</div>
<div class="step-bd">
<div class="report">
<h4>v1.3.0 (2026-06-17)</h4>
<strong>📊 版本概览</strong><br>
<table>
<tr><td>提交次数</td><td>7 次</td></tr>
<tr><td>贡献者</td><td>1 人</td></tr>
<tr><td>涉及文件</td><td>15 个</td></tr>
<tr><td>新增/删除</td><td>+980 / -810 行</td></tr>
</table>
<strong>✨ 新功能3</strong><br>
- feat: 新增 Webhook 投递监控failed + task-view<br>
- feat: 新增三个 AI Agent Skillissue-triage / project-health / newcomer-guide<br>
- feat: 新增 Wiki 和代码片段管理 Skill<br><br>
<strong>📝 文档3</strong><br>
- docs: 添加 Release Notes 工作流示例<br>
- docs: 添加其他工作流示例<br>
- docs: 更新交互式演示页面<br><br>
<strong>⚡ 优化1</strong><br>
- perf: 增强 Skill 输出的数据分析能力<br><br>
<strong>📈 统计汇总</strong><br>
<table>
<tr><th>类别</th><th>数量</th><th>占比</th><th>可视化</th></tr>
<tr><td>✨ 新功能</td><td>3</td><td>43%</td><td><span class="bar" style="width:86px; background:#34a853;"></span></td></tr>
<tr><td>📝 文档</td><td>3</td><td>43%</td><td><span class="bar" style="width:86px; background:#1a73e8;"></span></td></tr>
<tr><td>⚡ 优化</td><td>1</td><td>14%</td><td><span class="bar" style="width:28px; background:#fbbc04;"></span></td></tr>
</table>
</div>
</div>
</div>
</div>
<!-- ======================== Issue 自动分拣 ======================== -->
<div class="panel" id="panel-triage">
<div class="card">
<h3>Issue 自动分拣</h3>
<p>通过关键词权重评分系统,对 Issue 自动分类、评估紧急度,并生成结构化引导评论。</p>
<div><span class="tag">issue +list</span><span class="tag">issue +view</span><span class="tag">issue +comment</span></div>
<a class="file-link" href="../skills/gitlink-issue-triage/SKILL.md" target="_blank">查看 SKILL.md →</a>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">1</span><span class="title">采集待处理 Issue</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="cmd"><span class="prompt">$</span> gitlink-cli issue +list --owner z2_cc --repo gitlink-cli --state open --format json</div>
<div class="output">[
{"number":42, "subject":"登录页面报错500 Internal Server Error",
"body":"每次点击登录按钮后,页面白屏并返回 500 错误。已尝试清除缓存无效。"},
{"number":43, "subject":"建议增加 CSV 导出功能",
"body":"项目中需要将数据导出为 CSV 格式,希望增加此功能。"},
{"number":44, "subject":"README 中缺少安装说明",
"body":"第一次使用这个项目,发现 README 没有写如何安装和配置。"}
]</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">2</span><span class="title">AI 关键词权重评分</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>🔍 Issue #42 — 登录页面报错500 Internal Server Error</strong><br>
┌────────────────────────────────────────────<br>
│ 匹配关键词及权重:<br>
│ 报错(5) + 错误(8) + 页面(0) + 白屏(3) = <strong>16 分</strong><br>
│ 分类:🐛 Bug≥15 分触发)<br>
│ 紧急度16 × 1.5 = <strong>24 → 🔴 P0 紧急</strong><br>
└────────────────────────────────────────────<br><br>
<strong>🔍 Issue #43 — 建议增加 CSV 导出功能</strong><br>
┌────────────────────────────────────────────<br>
│ 匹配关键词及权重:<br>
│ 建议(8) + 增加(5) + 功能(3) + 导出(3) = <strong>19 分</strong><br>
│ 分类:✨ 功能需求≥12 分触发)<br>
│ 紧急度19 × 1.0 = <strong>19 → 🟡 P1 高优先</strong><br>
└────────────────────────────────────────────<br><br>
<strong>🔍 Issue #44 — README 缺少安装说明</strong><br>
┌────────────────────────────────────────────<br>
│ 匹配关键词及权重:<br>
│ 文档(10) + 缺少(4) + 安装(3) + README(8) = <strong>25 分</strong><br>
│ 分类:📝 文档≥10 分触发)<br>
│ 紧急度25 × 1.0 = <strong>25 → 🟡 P1 高优先</strong><br>
└────────────────────────────────────────────
</div>
</div>
</div>
<div class="step">
<div class="step-hd" onclick="toggle(this)"><span class="step-num">3</span><span class="title">AI 生成引导评论</span><span class="arrow"></span></div>
<div class="step-bd">
<div class="analysis">
<strong>🤖 AI 为 Issue #42Bug / P0 紧急)生成的评论:</strong>
</div>
<div class="report">
<strong>Issue 自动分类结果</strong><br><br>
<strong>类别:</strong>🐛 Bug<br>
<strong>紧急度:</strong>🔴 P0 紧急 — 建议立即处理<br>
<strong>建议标签:</strong>bug<br><br>
<strong>分类依据:</strong><br>
标题和描述中包含关键词「报错」「错误」「白屏」,匹配 Bug 分类(权重 16 分)。<br><br>
<strong>请补充以下信息以便排查:</strong><br>
1. 运行环境:操作系统 / 浏览器版本<br>
2. 复现步骤:详细描述如何触发此 bug<br>
3. 错误日志:浏览器控制台是否有报错信息<br>
4. 是否必现:每次操作都能复现吗?<br><br>
<strong>自动分配:</strong>已通知项目维护者。
</div>
<div class="analysis" style="margin-top:12px;">
<strong>🤖 AI 为 Issue #43功能需求 / P1 高优先)生成的评论:</strong>
</div>
<div class="report">
<strong>Issue 自动分类结果</strong><br><br>
<strong>类别:</strong>✨ 功能需求<br>
<strong>紧急度:</strong>🟡 P1 高优先<br>
<strong>建议标签:</strong>enhancement<br><br>
<strong>分类依据:</strong><br>
标题中包含关键词「建议」「增加」,匹配功能需求分类(权重 19 分)。<br><br>
<strong>请补充以下信息:</strong><br>
1. 这个功能解决了什么场景的问题?<br>
2. 期望的导出格式是什么?<br>
3. 是否有参考实现?<br><br>
感谢你的建议!项目组会评估这个需求的可行性。
</div>
</div>
</div>
</div>
</div>
<script>
function toggle(el) {
el.classList.toggle('open');
el.nextElementSibling.classList.toggle('open');
}
document.querySelectorAll('.tab').forEach(function(t) {
t.addEventListener('click', function() {
document.querySelectorAll('.tab').forEach(function(x){x.classList.remove('active')});
document.querySelectorAll('.panel').forEach(function(x){x.classList.remove('active')});
this.classList.add('active');
document.getElementById('panel-' + this.dataset.tab).classList.add('active');
});
});
</script>
</body>
</html>