forked from Gitlink/gitlink-cli
610 lines
38 KiB
HTML
610 lines
38 KiB
HTML
<!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 现场演示</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
:root{--bg:#0f172a;--bg2:#1e293b;--card:#1e3a5f;--accent:#38bdf8;--accent2:#818cf8;--gold:#fbbf24;--text:#e2e8f0;--dim:#94a3b8;--green:#22c55e;--red:#ef4444;--border:#334155}
|
||
body{background:var(--bg);color:var(--text);font-family:'Microsoft YaHei',sans-serif;display:flex;height:100vh;overflow:hidden}
|
||
/* Sidebar */
|
||
.sidebar{width:280px;background:var(--bg2);border-right:1px solid var(--border);flex-shrink:0;overflow-y:auto}
|
||
.sidebar-header{padding:20px 24px;border-bottom:1px solid var(--border)}
|
||
.sidebar-header h1{font-size:18px;color:var(--accent);margin-bottom:4px}
|
||
.sidebar-header p{font-size:12px;color:var(--dim)}
|
||
.nav-section{padding:12px 0}
|
||
.nav-section-title{padding:4px 24px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
|
||
.nav-item{padding:10px 24px;cursor:pointer;font-size:14px;color:var(--text);border-left:3px solid transparent;transition:all .2s;display:flex;align-items:center;gap:10px}
|
||
.nav-item:hover{background:var(--card);color:var(--accent)}
|
||
.nav-item.active{background:var(--card);color:var(--accent);border-left-color:var(--accent)}
|
||
.nav-item .icon{font-size:18px;width:24px;text-align:center}
|
||
.nav-item .time{margin-left:auto;font-size:11px;color:var(--dim);background:var(--bg);padding:2px 6px;border-radius:4px}
|
||
/* Main */
|
||
.main{flex:1;overflow-y:auto;padding:0}
|
||
.demo-page{display:none;padding:32px 40px;min-height:100%}
|
||
.demo-page.active{display:block}
|
||
.page-header{margin-bottom:24px}
|
||
.page-header h2{font-size:26px;color:var(--text);margin-bottom:6px}
|
||
.page-header p{font-size:14px;color:var(--dim)}
|
||
/* Terminal */
|
||
.terminal{background:#1e1e2e;border-radius:10px;overflow:hidden;margin:16px 0;box-shadow:0 4px 24px rgba(0,0,0,.3)}
|
||
.term-bar{background:#313244;padding:8px 14px;display:flex;align-items:center;gap:8px}
|
||
.term-dot{width:12px;height:12px;border-radius:50%}
|
||
.term-dot.r{background:#f38ba8}.term-dot.y{background:#f9e2af}.term-dot.g{background:#a6e3a1}
|
||
.term-title{flex:1;text-align:center;font-size:12px;color:#6c7086;font-family:monospace}
|
||
.term-body{padding:16px 20px;font-family:'Cascadia Code','Fira Code',monospace;font-size:13px;line-height:1.7;color:#cdd6f4;max-height:500px;overflow-y:auto}
|
||
.term-prompt{color:#89b4fa}.term-cmd{color:#cdd6f4}.term-flag{color:#f9e2af}.term-str{color:#a6e3a1}.term-out{color:#a6adc8}.term-ok{color:#a6e3a1}.term-info{color:#89b4fa}.term-warn{color:#f9e2af}.term-err{color:#f38ba8}.term-dim{color:#6c7086}.term-section{color:#cba6f7;font-weight:bold}
|
||
/* Cards */
|
||
.card-grid{display:grid;gap:16px;margin:16px 0}
|
||
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:20px}
|
||
.card h3{font-size:16px;color:var(--accent);margin-bottom:10px}
|
||
.card p{font-size:13px;color:var(--text);line-height:1.6}
|
||
.metric-row{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
|
||
.metric{background:var(--card);border-radius:8px;padding:12px 20px;text-align:center;min-width:120px}
|
||
.metric .val{font-size:28px;font-weight:bold;color:var(--gold)}
|
||
.metric .lbl{font-size:12px;color:var(--dim);margin-top:4px}
|
||
/* Output link */
|
||
.output-link{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--accent);border-radius:8px;padding:10px 20px;color:var(--accent);text-decoration:none;font-size:14px;transition:all .2s;cursor:pointer}
|
||
.output-link:hover{background:var(--accent);color:var(--bg)}
|
||
.output-link .arrow{font-size:16px}
|
||
/* Phase */
|
||
.phase{display:flex;gap:16px;margin:12px 0;align-items:flex-start}
|
||
.phase-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;flex-shrink:0}
|
||
.phase-content{flex:1}
|
||
.phase-content h4{font-size:15px;color:var(--text);margin-bottom:4px}
|
||
.phase-content p{font-size:13px;color:var(--dim);line-height:1.5}
|
||
/* Table */
|
||
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
|
||
th{background:var(--card);color:var(--accent);padding:10px 14px;text-align:left;border-bottom:2px solid var(--border)}
|
||
td{padding:8px 14px;border-bottom:1px solid var(--border);color:var(--text)}
|
||
tr:hover td{background:var(--bg2)}
|
||
/* Score bar */
|
||
.score-bar{display:flex;align-items:center;gap:12px;margin:8px 0}
|
||
.score-label{width:120px;font-size:13px;color:var(--text)}
|
||
.score-track{flex:1;height:24px;background:var(--bg);border-radius:4px;overflow:hidden}
|
||
.score-fill{height:100%;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:bold}
|
||
.score-val{width:60px;font-size:14px;font-weight:bold;color:var(--gold);text-align:right}
|
||
/* Hint */
|
||
.hint{background:rgba(56,189,248,.1);border:1px solid var(--accent);border-radius:8px;padding:12px 20px;margin:16px 0;font-size:13px;color:var(--text)}
|
||
.hint b{color:var(--accent)}
|
||
/* Badges */
|
||
.badge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:11px;font-weight:bold}
|
||
.badge-new{background:rgba(34,197,94,.2);color:var(--green);border:1px solid var(--green)}
|
||
.badge-orig{background:rgba(148,163,184,.1);color:var(--dim);border:1px solid var(--border)}
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar{width:8px;height:8px}
|
||
::-webkit-scrollbar-track{background:var(--bg)}
|
||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
||
::-webkit-scrollbar-thumb:hover{background:var(--dim)}
|
||
/* Home */
|
||
.home-hero{text-align:center;padding:40px 0}
|
||
.home-hero h2{font-size:32px;color:var(--text);margin-bottom:12px}
|
||
.home-hero p{font-size:16px;color:var(--dim);margin-bottom:30px}
|
||
.home-metrics{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:30px 0}
|
||
.home-metric{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 30px;text-align:center;min-width:140px}
|
||
.home-metric .val{font-size:36px;font-weight:bold}
|
||
.home-metric .lbl{font-size:13px;color:var(--dim);margin-top:6px}
|
||
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
|
||
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
|
||
.repl-line{animation:fadein .3s ease}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1>GitLink CLI</h1>
|
||
<p>现场演示 · 4 场景 · ~3 分钟</p>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">概览</div>
|
||
<div class="nav-item active" onclick="show('home',this)"><span class="icon">🏠</span> 首页</div>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">子任务一 · CLI</div>
|
||
<div class="nav-item" onclick="show('cli',this)"><span class="icon">⌨️</span> CLI 命令 <span class="time">30s</span></div>
|
||
<div class="nav-item" onclick="show('repl',this)"><span class="icon">🖥️</span> REPL 交互 <span class="time">45s</span></div>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">子任务三 · 工作流</div>
|
||
<div class="nav-item" onclick="show('community',this)"><span class="icon">📊</span> 社区运营 <span class="time">60s</span></div>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">子任务四 · 科研</div>
|
||
<div class="nav-item" onclick="show('insight',this)"><span class="icon">🔬</span> 项目洞悉 <span class="time">45s</span></div>
|
||
<div class="nav-item" onclick="show('hotspot',this)"><span class="icon">🕸️</span> 知识图谱 <span class="time">45s</span></div>
|
||
</div>
|
||
<div class="nav-section">
|
||
<div class="nav-section-title">评分体系</div>
|
||
<div class="nav-item" onclick="show('scoring',this)"><span class="icon">📐</span> 权重设计 <span class="time">30s</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main">
|
||
|
||
<!-- ===== HOME ===== -->
|
||
<div class="demo-page active" id="home">
|
||
<div class="home-hero">
|
||
<h2>GitLink 智能化能力提升项目</h2>
|
||
<p>gitlink-cli 命令行工具 · AI Agent Skills · 工作流自动化 · 科研辅助</p>
|
||
<div class="home-metrics">
|
||
<div class="home-metric"><div class="val" style="color:#38bdf8">236</div><div class="lbl">Git 提交</div></div>
|
||
<div class="home-metric"><div class="val" style="color:#818cf8">29</div><div class="lbl">AI Skills</div></div>
|
||
<div class="home-metric"><div class="val" style="color:#22c55e">14</div><div class="lbl">新命令模块</div></div>
|
||
<div class="home-metric"><div class="val" style="color:#fbbf24">16.8k</div><div class="lbl">Go 代码行</div></div>
|
||
<div class="home-metric"><div class="val" style="color:#a78bfa">20</div><div class="lbl">测试文件</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="hint">
|
||
<b>💡 演示说明：</b>点击左侧导航查看各场景。每个场景包含<b>命令展示</b>和<b>输出结果跳转</b>。所有数据来自 GitLink API 实时采集。
|
||
</div>
|
||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||
<div class="card">
|
||
<h3>📁 代码仓库</h3>
|
||
<p>fork 自 GitLink 官方 gitlink-cli，在初始 commit 基础上完成全部工作</p>
|
||
<a class="output-link" href="https://www.gitlink.org.cn/z2_cc/gitlink-cli" target="_blank" style="margin-top:12px">前往仓库 →</a>
|
||
</div>
|
||
<div class="card">
|
||
<h3>👥 团队</h3>
|
||
<p>赵昌 (wqer) · 子任务三/四<br>刘焱 (liuyan688) · CLI 底层 + REPL<br>曾蔚然 (z2_cc) · DevOps + 审查</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== CLI ===== -->
|
||
<div class="demo-page" id="cli">
|
||
<div class="page-header">
|
||
<h2>① CLI 基础命令演示</h2>
|
||
<p>新增 14 个 Shortcut 模块 · 统一输出格式 · 真实 API 数据</p>
|
||
</div>
|
||
|
||
<div class="terminal">
|
||
<div class="term-bar"><span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span><span class="term-title">z@z-pc: ~/gitlink-cli</span></div>
|
||
<div class="term-body">
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-cmd">gitlink-cli</span> <span class="term-cmd">repo</span> <span class="term-flag">+info</span> <span class="term-flag">--owner</span> <span class="term-str">z2_cc</span> <span class="term-flag">--repo</span> <span class="term-str">gitlink-cli</span></div>
|
||
<div class="term-out"> name gitlink-cli</div>
|
||
<div class="term-out"> full_name z2_cc/gitlink-cli</div>
|
||
<div class="term-out"> default_branch master</div>
|
||
<div class="term-out"> issues_count 17</div>
|
||
<div class="term-out"> forked_count 2</div>
|
||
<div class="term-out"> clone_url https://gitlink.org.cn/z2_cc/gitlink-cli.git</div>
|
||
<div> </div>
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-cmd">gitlink-cli</span> <span class="term-cmd">collaborator</span> <span class="term-flag">+list</span> <span class="term-flag">--owner</span> <span class="term-str">z2_cc</span> <span class="term-flag">--repo</span> <span class="term-str">gitlink-cli</span></div>
|
||
<div class="term-out"> login role is_owner</div>
|
||
<div class="term-out"> ────────────────────────────────────</div>
|
||
<div class="term-out"> z2_cc Manager true</div>
|
||
<div class="term-out"> wqer Manager false</div>
|
||
<div class="term-out"> liuyan688 Manager false</div>
|
||
<div> </div>
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-cmd">gitlink-cli</span> <span class="term-cmd">webhook</span> <span class="term-flag">+failed</span> <span class="term-flag">--owner</span> <span class="term-str">z2_cc</span> <span class="term-flag">--repo</span> <span class="term-str">gitlink-cli</span></div>
|
||
<div class="term-out"> 最近 7 天投递失败记录：0 条 <span class="term-ok">✓</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-grid" style="grid-template-columns:1fr 1fr 1fr">
|
||
<div class="card"><h3>📌 新增 14 模块</h3><p>collaborator · tag · milestone · file · commit · label · sshkey · webhook · wiki · snippet · dataset · template · attachment · util</p></div>
|
||
<div class="card"><h3>⭐ 统一输出</h3><p>所有命令支持 <code>--format json/table/yaml</code>，JSON Envelope: {ok, data, meta}</p></div>
|
||
<div class="card"><h3>✅ 测试覆盖</h3><p>20 个测试文件，含单元测试 + E2E 测试</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== REPL ===== -->
|
||
<div class="demo-page" id="repl">
|
||
<div class="page-header">
|
||
<h2>② REPL 交互模式 — IDE 级体验</h2>
|
||
<p>Bubble Tea TUI · 2027 行 Go · 5 状态状态机 · 7 个 E2E 测试 · 点击下方命令体验</p>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
|
||
<!-- 左：交互终端 -->
|
||
<div class="card" style="padding:0;overflow:hidden">
|
||
<div style="background:#313244;padding:8px 14px;font-size:12px;color:#6c7086;display:flex;align-items:center;gap:8px">
|
||
<span style="width:12px;height:12px;border-radius:50%;background:#f38ba8"></span>
|
||
<span style="width:12px;height:12px;border-radius:50%;background:#f9e2af"></span>
|
||
<span style="width:12px;height:12px;border-radius:50%;background:#a6e3a1"></span>
|
||
<span style="flex:1;text-align:center">gitlink-cli REPL — 交互终端</span>
|
||
</div>
|
||
<div id="repl-terminal" style="background:#1e1e2e;padding:16px;font-family:'Cascadia Code','Fira Code',monospace;font-size:13px;line-height:1.6;color:#cdd6f4;min-height:340px;max-height:340px;overflow-y:auto">
|
||
<div style="color:#a6e3a1">Welcome to gitlink-cli interactive mode.</div>
|
||
<div style="color:#6c7086">Type / to open command palette, "exit" or Ctrl+D to quit.</div>
|
||
<div style="height:8px"></div>
|
||
<div id="repl-output"></div>
|
||
<div><span style="color:#89b4fa">z@z-pc</span><span style="color:#6c7086">:</span><span style="color:#89b4fa">~/gitlink-cli</span><span style="color:#6c7086">$ </span><span id="repl-cursor" style="background:#cdd6f4;width:8px;height:16px;display:inline-block;animation:blink 1s infinite"></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右：操作指引 -->
|
||
<div class="card">
|
||
<h3>🖱️ 点击体验三个阶段</h3>
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin-top:12px">
|
||
<button onclick="replDemo('palette')" style="background:#1e3a5f;border:1px solid #38bdf8;color:#38bdf8;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;text-align:left;font-family:inherit">
|
||
<b>① 命令面板</b> — 输入 / 搜索命令<br>
|
||
<span style="font-size:11px;color:#94a3b8">点击模拟：输入 / → 搜索 issue → 选命令</span>
|
||
</button>
|
||
<button onclick="replDemo('form')" style="background:#1e293b;border:1px solid #22c55e;color:#22c55e;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;text-align:left;font-family:inherit">
|
||
<b>② 表单输入</b> — Tab 切换参数<br>
|
||
<span style="font-size:11px;color:#94a3b8">点击模拟：填 title → Tab → 填 assignee → 提交</span>
|
||
</button>
|
||
<button onclick="replDemo('viewport')" style="background:#312e81;border:1px solid #fbbf24;color:#fbbf24;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;text-align:left;font-family:inherit">
|
||
<b>③ 滚动视口</b> — 长输出浏览<br>
|
||
<span style="font-size:11px;color:#94a3b8">点击模拟：执行 issue +list → 滚动浏览</span>
|
||
</button>
|
||
<button onclick="replDemo('reset')" style="background:#1e293b;border:1px solid #64748b;color:#94a3b8;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12px;text-align:left;font-family:inherit">
|
||
↺ 重置终端
|
||
</button>
|
||
</div>
|
||
<div style="margin-top:14px;padding:10px;background:rgba(56,189,248,.08);border-radius:6px;font-size:11px;color:#94a3b8;line-height:1.5">
|
||
<b style="color:#38bdf8">键盘操作：</b><br>
|
||
<code style="color:#a6e3a1">/</code> 唤起面板 · <code style="color:#a6e3a1">↑↓</code> 导航 · <code style="color:#a6e3a1">Enter</code> 选中<br>
|
||
<code style="color:#a6e3a1">Tab</code> 切字段 · <code style="color:#a6e3a1">Space</code> 切布尔 · <code style="color:#a6e3a1">Esc</code> 取消<br>
|
||
<code style="color:#a6e3a1">PgUp/PgDn</code> 翻页 · <code style="color:#a6e3a1">q</code> 返回
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<b>⭐ 核心亮点：</b>用户无需记忆命令语法——输入 / 搜索命令，Tab 填写参数，提交即执行。体验接近 VS Code 命令面板。
|
||
<br><b>技术实现：</b>基于 Charmbracelet Bubble Tea（Elm 架构），repl.go(433行) + palette.go(305行) + form.go(296行) + executor.go(237行)，7 个 E2E 测试。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== COMMUNITY ===== -->
|
||
<div class="demo-page" id="community">
|
||
<div class="page-header">
|
||
<h2>③ 社区运营自动化</h2>
|
||
<p>community-ops-full.sh · 三阶段流水线一键执行 · 真实运行结果</p>
|
||
</div>
|
||
|
||
<div class="terminal">
|
||
<div class="term-bar"><span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span><span class="term-title">community-ops-full.sh</span></div>
|
||
<div class="term-body">
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-flag">DRY_RUN=true</span> <span class="term-cmd">bash</span> <span class="term-str">skills/gitlink-community-ops/scripts/community-ops-full.sh</span> <span class="term-str">z2_cc</span> <span class="term-str">gitlink-cli</span></div>
|
||
<div> </div>
|
||
<div class="term-section">============================================</div>
|
||
<div class="term-section"> 社区运营自动化</div>
|
||
<div class="term-section">============================================</div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Phase 1/3: Issue 自动分拣</span></div>
|
||
<div class="term-out">[INFO] 获取所有打开的 Issue...</div>
|
||
<div class="term-out">[INFO] 发现 21 个 Issue（17 打开 / 4 关闭）</div>
|
||
<div class="term-out">[INFO] 自动分类：bug 8 · enhancement 6 · documentation 4 · other 3</div>
|
||
<div class="term-ok">✓ 分拣完成</div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Phase 2/3: 社区周报生成</span></div>
|
||
<div class="term-out">[INFO] 采集 PR/提交/贡献者数据...</div>
|
||
<div class="term-out">[INFO] 综合评分: 3.5/10 🔴 堪忧</div>
|
||
<div class="term-out">[INFO] 关闭率: 19% | 合并率: 0% | 贡献者: 1人</div>
|
||
<div class="term-ok">✓ HTML 报告已生成: _output/weekly-health-report.html</div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Phase 3/3: 自动 Release Notes</span></div>
|
||
<div class="term-out">[INFO] 获取最近 100 条提交...</div>
|
||
<div class="term-out">[INFO] 新功能 22 项 | Bug 修复 15 项 | 文档 8 项</div>
|
||
<div class="term-out">[INFO] 贡献者: 7 人 | 涉及文件: 252 个</div>
|
||
<div class="term-ok">✓ HTML 报告已生成: _output/release-notes-v0.1.0.html</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||
<div class="card">
|
||
<h3>📊 社区周报 HTML</h3>
|
||
<p>4 维评分：Issue 关闭率(30%) + PR 合并率(30%) + 贡献者(25%) + 响应速度(15%)</p>
|
||
<a class="output-link" href="../skills/gitlink-community-ops/scripts/_output/weekly-health-report.html" target="_blank" style="margin-top:12px">打开周报 →</a>
|
||
</div>
|
||
<div class="card">
|
||
<h3>📝 Release Notes HTML</h3>
|
||
<p>按 Conventional Commits 自动分类：feat/fix/docs/chore</p>
|
||
<a class="output-link" href="../skills/gitlink-community-ops/scripts/_output/release-notes-v0.1.0.html" target="_blank" style="margin-top:12px">打开 Release Notes →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== INSIGHT ===== -->
|
||
<div class="demo-page" id="insight">
|
||
<div class="page-header">
|
||
<h2>④ 科研项目洞悉</h2>
|
||
<p>research-insight-full.sh · 8 维数据采集 + 4 维评分 · 真实运行</p>
|
||
</div>
|
||
|
||
<div class="terminal">
|
||
<div class="term-bar"><span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span><span class="term-title">research-insight-full.sh</span></div>
|
||
<div class="term-body">
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-cmd">bash</span> <span class="term-str">skills/gitlink-research-insight/scripts/research-insight-full.sh</span> <span class="term-str">z2_cc</span> <span class="term-str">gitlink-cli</span></div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Step 1/2: 采集 8 维数据</span></div>
|
||
<div class="term-out">[INFO] ✅ 仓库信息 → repo-info.json</div>
|
||
<div class="term-out">[INFO] ✅ 主题标签 → repo-topics.json</div>
|
||
<div class="term-out">[INFO] ✅ 语言分布 → repo-languages.json (Go 70.1% / JS 22.7% / Shell 6.7%)</div>
|
||
<div class="term-out">[INFO] ✅ 贡献者 → repo-contributors.json (16 人)</div>
|
||
<div class="term-out">[INFO] ✅ 提交历史 → commits-100.json</div>
|
||
<div class="term-out">[INFO] ✅ Issue → issues-all.json (17 个)</div>
|
||
<div class="term-out">[INFO] ✅ PR → prs-all.json (2 个)</div>
|
||
<div class="term-out">[INFO] ✅ 协作者 → collaborators.json</div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Step 2/2: 4 维评分分析</span></div>
|
||
<div class="term-out">[INFO] 项目成熟度: 2.8/10</div>
|
||
<div class="term-out">[INFO] 文档质量: 5.0/10</div>
|
||
<div class="term-out">[INFO] 贡献模式: 6.8/10</div>
|
||
<div class="term-out">[INFO] 社区健康度: 4.4/10</div>
|
||
<div class="term-out">[INFO] 综合评分: 4.8/10 🔴</div>
|
||
<div class="term-ok">✅ HTML 报告已生成: _output/research-insight-report.html</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric-row">
|
||
<div class="metric"><div class="val" style="color:var(--red)">2.8</div><div class="lbl">成熟度 /10</div></div>
|
||
<div class="metric"><div class="val" style="color:var(--gold)">5.0</div><div class="lbl">文档 /10</div></div>
|
||
<div class="metric"><div class="val" style="color:var(--green)">6.8</div><div class="lbl">贡献模式 /10</div></div>
|
||
<div class="metric"><div class="val" style="color:var(--red)">4.4</div><div class="lbl">社区健康 /10</div></div>
|
||
<div class="metric"><div class="val" style="color:var(--gold)">4.8</div><div class="lbl">综合 /10</div></div>
|
||
</div>
|
||
|
||
<a class="output-link" href="../skills/gitlink-research-insight/scripts/_output/research-insight-report.html" target="_blank">打开科研洞察报告 →</a>
|
||
</div>
|
||
|
||
<!-- ===== HOTSPOT ===== -->
|
||
<div class="demo-page" id="hotspot">
|
||
<div class="page-header">
|
||
<h2>⑤ 热点追踪与知识图谱</h2>
|
||
<p>多关键词搜索 → 实体关系图谱 → HTML 可视化 · 21 个仓库</p>
|
||
</div>
|
||
|
||
<div class="terminal">
|
||
<div class="term-bar"><span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span><span class="term-title">hotspot-tracker-full.sh</span></div>
|
||
<div class="term-body">
|
||
<div><span class="term-prompt">z@z-pc</span><span class="term-dim">:</span><span class="term-prompt">~/gitlink-cli</span><span class="term-dim">$</span> <span class="term-cmd">bash</span> <span class="term-str">skills/gitlink-research-hotspot/scripts/hotspot-tracker-full.sh</span> <span class="term-str">"gitlink"</span> <span class="term-str">"CLI"</span></div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Step 1/2: 多关键词搜索</span></div>
|
||
<div class="term-out">[INFO] 搜索关键词 "gitlink" ... 找到 18 个仓库</div>
|
||
<div class="term-out">[INFO] 搜索关键词 "CLI" ... 找到 3 个仓库</div>
|
||
<div class="term-out">[INFO] 去重后共 21 个仓库</div>
|
||
<div class="term-out">[INFO] 丰富数据: 采集每个仓库的 Star/Fork/语言/主题...</div>
|
||
<div> </div>
|
||
<div><span class="term-info">▸ Step 2/2: 构建知识图谱</span></div>
|
||
<div class="term-out">[INFO] 实体识别: 项目 21 | 主题 4 | 技术栈 2 | 组织 4</div>
|
||
<div class="term-out">[INFO] 关系提取: belongs_to / topic / language / depends_on</div>
|
||
<div class="term-ok">✅ HTML 知识图谱已生成: _output/knowledge-graph-gitlink.html</div>
|
||
<div class="term-ok">✅ HTML 趋势报告已生成: _output/hotspot-trend-report-gitlink.html</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||
<div class="card">
|
||
<h3>🕸️ 知识图谱</h3>
|
||
<p>21 个仓库 · 4 主题 · 2 技术栈 · 4 组织<br>支持缩放/拖拽/点击高亮</p>
|
||
<a class="output-link" href="../skills/gitlink-research-hotspot/scripts/_output/knowledge-graph-gitlink.html" target="_blank" style="margin-top:12px">打开知识图谱 →</a>
|
||
</div>
|
||
<div class="card">
|
||
<h3>📈 趋势报告</h3>
|
||
<p>热门主题分析 · 技术栈分布 · 组织活跃度排名</p>
|
||
<a class="output-link" href="../skills/gitlink-research-hotspot/scripts/_output/hotspot-trend-report-gitlink.html" target="_blank" style="margin-top:12px">打开趋势报告 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== SCORING ===== -->
|
||
<div class="demo-page" id="scoring">
|
||
<div class="page-header">
|
||
<h2>⑥ 评分体系权重设计</h2>
|
||
<p>两套评分系统 · 权重有据可依 · 阈值梯度设计</p>
|
||
</div>
|
||
|
||
<div class="card" style="margin-bottom:16px">
|
||
<h3>📊 周报评分 — 综合 = 关闭率×30% + 合并率×30% + 贡献者×25% + 响应×15%</h3>
|
||
<div class="score-bar">
|
||
<div class="score-label">Issue 关闭率</div>
|
||
<div class="score-track"><div class="score-fill" style="width:30%;background:#38bdf8">30%</div></div>
|
||
<div class="score-val">3/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">PR 合并率</div>
|
||
<div class="score-track"><div class="score-fill" style="width:30%;background:#38bdf8">30%</div></div>
|
||
<div class="score-val">3/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">贡献者数</div>
|
||
<div class="score-track"><div class="score-fill" style="width:25%;background:#818cf8">25%</div></div>
|
||
<div class="score-val">3/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">响应速度</div>
|
||
<div class="score-track"><div class="score-fill" style="width:15%;background:#a78bfa">15%</div></div>
|
||
<div class="score-val">5/10</div>
|
||
</div>
|
||
<p style="margin-top:12px;font-size:12px;color:var(--dim)">关闭率+合并率各30%：直接反映社区活跃度（结果指标）。贡献者25%：巴士因子，单人维护=高风险。响应15%：补充信号，关闭率已含"解决"信号。</p>
|
||
</div>
|
||
|
||
<div class="card" style="margin-bottom:16px">
|
||
<h3>🔬 科研洞察 — 综合 = 贡献模式×30% + 成熟度×25% + 社区×25% + 文档×20%</h3>
|
||
<div class="score-bar">
|
||
<div class="score-label">贡献模式</div>
|
||
<div class="score-track"><div class="score-fill" style="width:30%;background:#22c55e">30%</div></div>
|
||
<div class="score-val">6.8/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">成熟度</div>
|
||
<div class="score-track"><div class="score-fill" style="width:25%;background:#38bdf8">25%</div></div>
|
||
<div class="score-val">2.8/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">社区健康度</div>
|
||
<div class="score-track"><div class="score-fill" style="width:25%;background:#818cf8">25%</div></div>
|
||
<div class="score-val">4.4/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">文档质量</div>
|
||
<div class="score-track"><div class="score-fill" style="width:20%;background:#a78bfa">20%</div></div>
|
||
<div class="score-val">5.0/10</div>
|
||
</div>
|
||
<p style="margin-top:12px;font-size:12px;color:var(--dim)">贡献模式30%最高：科研项目核心在人。成熟度+社区各25%：阶段与活跃互补。文档20%最低：影响可复现性但非核心价值。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>📐 成熟度子维度 — 成熟度 = 年龄×25% + Star×25% + Fork×20% + 维护×30%</h3>
|
||
<div class="score-bar">
|
||
<div class="score-label">维护活跃度</div>
|
||
<div class="score-track"><div class="score-fill" style="width:30%;background:#fbbf24">30% 权重最高</div></div>
|
||
<div class="score-val">7/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">项目年龄</div>
|
||
<div class="score-track"><div class="score-fill" style="width:25%;background:#38bdf8">25%</div></div>
|
||
<div class="score-val">0.2/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">Star 数</div>
|
||
<div class="score-track"><div class="score-fill" style="width:25%;background:#818cf8">25%</div></div>
|
||
<div class="score-val">1/10</div>
|
||
</div>
|
||
<div class="score-bar">
|
||
<div class="score-label">Fork 数</div>
|
||
<div class="score-track"><div class="score-fill" style="width:20%;background:#a78bfa">20% 最低</div></div>
|
||
<div class="score-val">2/10</div>
|
||
</div>
|
||
<p style="margin-top:12px;font-size:12px;color:var(--dim)">维护30%最高：老项目不维护=死项目。Fork 20%最低：Fork 多≠贡献多，有大量废弃 Fork 污染数据。</p>
|
||
</div>
|
||
|
||
<div class="hint">
|
||
<b>📐 阈值设计：</b>统一梯度 <code>>80%→10分 | >50%→7分 | >30%→5分 | 其他→3分</code>，参考 CHAOSS 指标体系。
|
||
<br><b>🔧 可调可复现：</b>权重在 JS 引擎里硬编码，可随时调整。同样数据跑出来同样分数。
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function show(id, el) {
|
||
document.querySelectorAll('.demo-page').forEach(p => p.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
// ===== REPL 交互演示 =====
|
||
const replOutput = () => document.getElementById('repl-output');
|
||
|
||
function replPrint(html, delay = 0) {
|
||
setTimeout(() => {
|
||
const div = document.createElement('div');
|
||
div.className = 'repl-line';
|
||
div.innerHTML = html;
|
||
replOutput().appendChild(div);
|
||
const term = document.getElementById('repl-terminal');
|
||
term.scrollTop = term.scrollHeight;
|
||
}, delay);
|
||
}
|
||
|
||
function replClear() {
|
||
replOutput().innerHTML = '';
|
||
}
|
||
|
||
function replDemo(type) {
|
||
replClear();
|
||
const P = '<span style="color:#89b4fa">z@z-pc</span><span style="color:#6c7086">:</span><span style="color:#89b4fa">~/gitlink-cli</span><span style="color:#6c7086">$ </span>';
|
||
const C = (s) => `<span style="color:#cdd6f4">${s}</span>`;
|
||
const F = (s) => `<span style="color:#f9e2af">${s}</span>`;
|
||
const S = (s) => `<span style="color:#a6e3a1">${s}</span>`;
|
||
const D = (s) => `<span style="color:#6c7086">${s}</span>`;
|
||
const I = (s) => `<span style="color:#89b4fa">${s}</span>`;
|
||
const OK = (s) => `<span style="color:#a6e3a1">${s}</span>`;
|
||
const ERR = (s) => `<span style="color:#f38ba8">${s}</span>`;
|
||
const SEC = (s) => `<span style="color:#cba6f7;font-weight:bold">${s}</span>`;
|
||
|
||
if (type === 'palette') {
|
||
// 命令面板演示
|
||
replPrint(P + C('') + '<span style="background:#cdd6f4;width:8px;height:16px;display:inline-block"></span>', 0);
|
||
replPrint(D(' 输入 / 唤起命令面板...'), 400);
|
||
replPrint('', 700);
|
||
replPrint(SEC('┌─ Command Palette ──────────────────────┐'), 900);
|
||
replPrint(SEC('│') + ' ' + F('搜索: ') + C('islist') + ' ' + SEC('│'), 1100);
|
||
replPrint(SEC('│') + ' ' + D('匹配: issue +list') + ' ' + SEC('│'), 1300);
|
||
replPrint(SEC('├────────────────────────────────────────┤'), 1500);
|
||
replPrint(SEC('│') + ' ❯ ' + I('issue') + ' Issue 管理 ' + SEC('│'), 1700);
|
||
replPrint(SEC('│') + ' ' + D('repo') + ' 仓库操作 ' + SEC('│'), 1800);
|
||
replPrint(SEC('│') + ' ' + D('pr') + ' Pull Request ' + SEC('│'), 1900);
|
||
replPrint(SEC('│') + ' ' + D('collaborator') + ' 协作者管理 ' + SEC('│'), 2000);
|
||
replPrint(SEC('│') + ' ' + D('webhook') + ' Webhook 管理 ' + SEC('│'), 2100);
|
||
replPrint(SEC('└────────────────────────────────────────┘'), 2200);
|
||
replPrint(D(' Enter 选择 · Esc 返回 · ↑↓ 导航'), 2400);
|
||
replPrint('', 2800);
|
||
replPrint(D(' → 选中 issue，进入命令选择...'), 3000);
|
||
replPrint('', 3300);
|
||
replPrint(SEC('┌─ issue 命令 ───────────────────────────┐'), 3500);
|
||
replPrint(SEC('│') + ' ❯ ' + C('+list') + ' 列出 Issue ' + SEC('│'), 3700);
|
||
replPrint(SEC('│') + ' ' + D('+create') + ' 创建 Issue ' + SEC('│'), 3800);
|
||
replPrint(SEC('│') + ' ' + D('+info') + ' Issue 详情 ' + SEC('│'), 3900);
|
||
replPrint(SEC('│') + ' ' + D('+close') + ' 关闭 Issue ' + SEC('│'), 4000);
|
||
replPrint(SEC('└────────────────────────────────────────┘'), 4100);
|
||
replPrint('', 4400);
|
||
replPrint(D(' → 选中 +list，Enter 提交 → 执行命令...'), 4600);
|
||
replPrint('', 4900);
|
||
replPrint(I('▸ Executing: issue +list'), 5100);
|
||
replPrint(OK('✓ 命令执行成功，输出 7 条 Issue'), 5500);
|
||
|
||
} else if (type === 'form') {
|
||
// 表单输入演示
|
||
replPrint(P + C('issue +create'), 0);
|
||
replPrint(D(' → 自动生成参数表单...'), 300);
|
||
replPrint('', 600);
|
||
replPrint(SEC('┌─ issue +create — 参数表单 ──────────────┐'), 800);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 900);
|
||
replPrint(SEC('│') + ' ' + F('title') + ' ' + ERR('*') + ': ' + S('Add webhook monitoring') + ' ' + SEC('│'), 1200);
|
||
replPrint(SEC('│') + ' ' + D('Issue 标题') + ' ' + SEC('│'), 1300);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 1400);
|
||
replPrint(SEC('│') + ' ' + F('body') + ': ' + S('We need to monitor...') + ' ' + SEC('│'), 1700);
|
||
replPrint(SEC('│') + ' ' + D('Markdown 描述') + ' ' + SEC('│'), 1800);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 1900);
|
||
replPrint(SEC('│') + ' ' + F('assignee') + ': ' + S('liuyan688') + ' ' + SEC('│'), 2200);
|
||
replPrint(SEC('│') + ' ' + D('负责人') + ' ' + SEC('│'), 2300);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 2400);
|
||
replPrint(SEC('│') + ' ' + F('private') + ': ' + OK('[✓]') + ' ' + D('Space 切换') + ' ' + SEC('│'), 2700);
|
||
replPrint(SEC('│') + ' ' + D('是否私密') + ' ' + SEC('│'), 2800);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 2900);
|
||
replPrint(SEC('│') + ' ' + ERR('✗ title is required') + ' ' + SEC('│'), 3200);
|
||
replPrint(SEC('│') + ' ' + SEC('│'), 3300);
|
||
replPrint(SEC('└────────────────────────────────────────┘'), 3400);
|
||
replPrint(D(' Enter 提交 · Tab/↑↓ 切换 · Esc 取消'), 3600);
|
||
replPrint('', 4000);
|
||
replPrint(D(' → 填写 title: Add webhook monitoring'), 4200);
|
||
replPrint(D(' → Tab 切换到 body: We need to monitor...'), 4500);
|
||
replPrint(D(' → Tab 切换到 assignee: liuyan688'), 4800);
|
||
replPrint(D(' → Space 切换 private: [✓]'), 5100);
|
||
replPrint('', 5400);
|
||
replPrint(I('▸ Enter 提交表单...'), 5600);
|
||
replPrint(OK('✓ Issue #22 已创建'), 6000);
|
||
|
||
} else if (type === 'viewport') {
|
||
// 滚动视口演示
|
||
replPrint(P + C('issue +list') + ' ' + F('--owner') + ' ' + S('z2_cc') + ' ' + F('--repo') + ' ' + S('gitlink-cli'), 0);
|
||
replPrint('', 300);
|
||
replPrint(SEC('┌─ issue +list (47 rows) ─────────────────┐'), 500);
|
||
replPrint(SEC('│') + ' # title status ' + SEC('│'), 600);
|
||
replPrint(SEC('│') + ' ─── ──────────────────────── ──────── ' + SEC('│'), 700);
|
||
replPrint(SEC('│') + ' 15 webhook monitor ' + F('open') + ' ' + SEC('│'), 800);
|
||
replPrint(SEC('│') + ' 14 wiki markdown render ' + F('open') + ' ' + SEC('│'), 900);
|
||
replPrint(SEC('│') + ' 13 PR diff too verbose ' + F('open') + ' ' + SEC('│'), 1000);
|
||
replPrint(SEC('│') + ' 12 snippet pagination bug ' + F('open') + ' ' + SEC('│'), 1100);
|
||
replPrint(SEC('│') + ' 11 branch protect check ' + F('open') + ' ' + SEC('│'), 1200);
|
||
replPrint(SEC('│') + ' 10 file upload timeout ' + F('open') + ' ' + SEC('│'), 1300);
|
||
replPrint(SEC('│') + ' 09 milestone sort order ' + OK('closed') + ' ' + SEC('│'), 1400);
|
||
replPrint(SEC('│') + ' 08 tag batch operation ' + OK('closed') + ' ' + SEC('│'), 1500);
|
||
replPrint(SEC('│') + ' 07 sshkey list format ' + OK('closed') + ' ' + SEC('│'), 1600);
|
||
replPrint(SEC('│') + ' 06 commit hash display ' + OK('closed') + ' ' + SEC('│'), 1700);
|
||
replPrint(SEC('│') + ' ↓ 36 more rows... ' + SEC('│'), 1800);
|
||
replPrint(SEC('└────────────────────────────────────────┘'), 1900);
|
||
replPrint(D(' ↑↓/PgUp/PgDn 滚动 · q/Esc 返回 · 47 rows · showing 1-11'), 2100);
|
||
replPrint('', 2500);
|
||
replPrint(D(' → 输出超一屏，自动进入滚动模式'), 2700);
|
||
replPrint(D(' → ↑↓ 逐行滚动，PgUp/PgDn 翻页'), 3000);
|
||
replPrint(D(' → 表格化渲染，不是原始 JSON'), 3300);
|
||
replPrint('', 3600);
|
||
replPrint(OK('✓ 按 q 返回输入状态'), 4000);
|
||
|
||
} else if (type === 'reset') {
|
||
replClear();
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|