<!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}} &mdash;
    仓库：{{TOTAL_REPOS}} 个 &mdash;
    贡献者：{{TOTAL_CONTRIBUTORS}} 人 &mdash;
    {{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>
