forked from Gitlink/gitlink-cli
111 lines
4.6 KiB
HTML
111 lines
4.6 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>科研知识图谱 — {{REPORT_DATE}}</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #333; }
|
|
.header { background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%); color: #fff; padding: 36px 30px; }
|
|
.header h1 { font-size: 26px; margin-bottom: 6px; }
|
|
.header .subtitle { opacity: 0.8; font-size: 14px; }
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
|
|
.card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-align: center; }
|
|
.card .value { font-size: 32px; font-weight: 700; color: #1a237e; }
|
|
.card .label { font-size: 12px; color: #888; margin-top: 4px; }
|
|
.panel { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin-bottom: 24px; }
|
|
.panel h2 { font-size: 18px; margin-bottom: 16px; color: #1a237e; border-bottom: 2px solid #3949ab; padding-bottom: 8px; }
|
|
#graphChart { width: 100%; height: 600px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; }
|
|
th { background: #f5f7fa; color: #555; font-weight: 600; }
|
|
.tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; margin: 2px; }
|
|
.tag.rising { background: #e8f5e9; color: #2e7d32; }
|
|
.tag.stable { background: #e3f2fd; color: #1565c0; }
|
|
.tag.declining { background: #fce4ec; color: #c62828; }
|
|
.footer { text-align: center; padding: 24px; color: #999; font-size: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>科研知识图谱</h1>
|
|
<div class="subtitle">
|
|
关键词：{{KEYWORDS}} —
|
|
仓库：{{TOTAL_REPOS}} 个 —
|
|
贡献者：{{TOTAL_CONTRIBUTORS}} 人 —
|
|
{{REPORT_DATE}}
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
|
|
<div class="cards">
|
|
<div class="card"><div class="value">{{TOTAL_REPOS}}</div><div class="label">仓库节点</div></div>
|
|
<div class="card"><div class="value">{{TOTAL_CONTRIBUTORS}}</div><div class="label">贡献者节点</div></div>
|
|
<div class="card"><div class="value">{{TOTAL_TOPICS}}</div><div class="label">主题节点</div></div>
|
|
<div class="card"><div class="value">{{TOTAL_EDGES}}</div><div class="label">关系边</div></div>
|
|
<div class="card"><div class="value">{{HOTTEST_REPO}}</div><div class="label">最热仓库</div></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>知识图谱 — 力导向布局</h2>
|
|
<div id="graphChart"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>热度排行榜</h2>
|
|
<table id="hotnessTable">
|
|
<thead><tr><th>排名</th><th>仓库</th><th>热度</th><th>语言</th><th>Stars</th><th>趋势</th></tr></thead>
|
|
<tbody>{{TABLE_ROWS}}</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="footer">Generated by GitLink Research Assistant — {{REPORT_DATE}}</div>
|
|
|
|
<script>
|
|
var graph = echarts.init(document.getElementById('graphChart'));
|
|
graph.setOption({
|
|
tooltip: {
|
|
formatter: function(p) {
|
|
if (p.dataType === 'edge') return p.data.source + ' → ' + p.data.target + '<br/>' + p.data.evidence;
|
|
var d = p.data;
|
|
return '<b>' + d.label + '</b><br/>' + (d.desc || '') + '<br/>' +
|
|
(d.stars ? 'Stars: ' + d.stars : '') + (d.repo_count ? ' 关联仓库: ' + d.repo_count : '');
|
|
}
|
|
},
|
|
legend: [{
|
|
data: ['仓库', '贡献者', '主题', '论文', '组织'],
|
|
orient: 'vertical', right: 10, top: 20
|
|
}],
|
|
series: [{
|
|
type: 'graph',
|
|
layout: 'force',
|
|
roam: true,
|
|
draggable: true,
|
|
force: {
|
|
repulsion: 200,
|
|
edgeLength: [80, 300],
|
|
layoutAnimation: true
|
|
},
|
|
categories: [
|
|
{ name: '仓库', itemStyle: { color: '#5470c6' }, symbol: 'roundRect' },
|
|
{ name: '贡献者', itemStyle: { color: '#91cc75' }, symbol: 'circle' },
|
|
{ name: '主题', itemStyle: { color: '#fac858' }, symbol: 'diamond' },
|
|
{ name: '论文', itemStyle: { color: '#ee6666' }, symbol: 'triangle' },
|
|
{ name: '组织', itemStyle: { color: '#73c0de' }, symbol: 'pin' }
|
|
],
|
|
data: {{GRAPH_NODES}},
|
|
links: {{GRAPH_EDGES}},
|
|
label: { show: true, fontSize: 11, formatter: '{b}' },
|
|
emphasis: { focus: 'adjacency', label: { fontSize: 14 } },
|
|
lineStyle: { color: '#ccc', curveness: 0.1 }
|
|
}]
|
|
});
|
|
window.addEventListener('resize', function() { graph.resize(); });
|
|
</script>
|
|
</body>
|
|
</html>
|