You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
10 KiB
236 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OpenRank Dashboard - 开源贡献分析平台</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 头部导航 -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<i class="fas fa-chart-network"></i>
|
|
<span>OpenRank Analytics</span>
|
|
</div>
|
|
<nav class="nav">
|
|
<button class="nav-btn active" data-tab="overview">总览</button>
|
|
<button class="nav-btn" data-tab="repositories">仓库分析</button>
|
|
<button class="nav-btn" data-tab="developers">开发者分析</button>
|
|
<button class="nav-btn" data-tab="network">网络图谱</button>
|
|
<button class="nav-btn" data-tab="settings">配置</button>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<button class="btn-primary" id="calculate-btn">
|
|
<i class="fas fa-calculator"></i>
|
|
计算 OpenRank
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="main-content">
|
|
<!-- 总览面板 -->
|
|
<div class="tab-content active" id="overview">
|
|
<div class="stats-grid">
|
|
<!-- 关键指标卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>活跃开发者</h3>
|
|
<span class="stat-value" id="active-developers">0</span>
|
|
<span class="stat-change positive">+12%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-code-branch"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>活跃仓库</h3>
|
|
<span class="stat-value" id="active-repos">0</span>
|
|
<span class="stat-change positive">+8%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>总 OpenRank</h3>
|
|
<span class="stat-value" id="total-openrank">0</span>
|
|
<span class="stat-change positive">+15%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-trending-up"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3>平均贡献度</h3>
|
|
<span class="stat-value" id="avg-contribution">0</span>
|
|
<span class="stat-change positive">+5%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表区域 -->
|
|
<div class="charts-grid">
|
|
<div class="chart-card">
|
|
<h3>OpenRank 分布</h3>
|
|
<div class="chart-container" id="distribution-chart">
|
|
<canvas id="distribution-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-card">
|
|
<h3>活动类型分析</h3>
|
|
<div class="chart-container" id="activity-chart">
|
|
<canvas id="activity-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-card full-width">
|
|
<h3>Top 10 开发者排名</h3>
|
|
<div class="ranking-table" id="developer-ranking">
|
|
<div class="table-header">
|
|
<span>排名</span>
|
|
<span>开发者</span>
|
|
<span>OpenRank</span>
|
|
<span>变化</span>
|
|
</div>
|
|
<div class="table-body" id="ranking-body">
|
|
<!-- 排名数据将通过JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 仓库分析面板 -->
|
|
<div class="tab-content" id="repositories">
|
|
<div class="panel-header">
|
|
<h2>仓库分析</h2>
|
|
<div class="filter-controls">
|
|
<select id="repo-filter">
|
|
<option value="all">所有仓库</option>
|
|
<option value="top10">Top 10</option>
|
|
<option value="rising">上升最快</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="repo-grid" id="repo-grid">
|
|
<!-- 仓库卡片将通过JS动态生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 开发者分析面板 -->
|
|
<div class="tab-content" id="developers">
|
|
<div class="panel-header">
|
|
<h2>开发者分析</h2>
|
|
<div class="search-box">
|
|
<input type="text" placeholder="搜索开发者..." id="developer-search">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
</div>
|
|
<div class="developer-stats">
|
|
<!-- 开发者分析内容 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网络图谱面板 -->
|
|
<div class="tab-content" id="network">
|
|
<div class="panel-header">
|
|
<h2>协作网络图谱</h2>
|
|
<div class="graph-controls">
|
|
<button class="btn-secondary" id="zoom-in">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="btn-secondary" id="zoom-out">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<button class="btn-secondary" id="reset-view">
|
|
<i class="fas fa-sync"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="graph-container" id="network-graph">
|
|
<canvas id="graph-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 配置面板 -->
|
|
<div class="tab-content" id="settings">
|
|
<div class="panel-header">
|
|
<h2>算法配置</h2>
|
|
</div>
|
|
<div class="settings-grid">
|
|
<div class="setting-card">
|
|
<h3>全局参数</h3>
|
|
<div class="setting-item">
|
|
<label>衰减因子</label>
|
|
<input type="number" id="attenuation-factor" value="0.85" step="0.01" min="0" max="1">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>开发者继承比例</label>
|
|
<input type="number" id="developer-retention" value="0.5" step="0.01" min="0" max="1">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>仓库继承比例</label>
|
|
<input type="number" id="repo-retention" value="0.3" step="0.01" min="0" max="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-card">
|
|
<h3>活动权重</h3>
|
|
<div class="setting-item">
|
|
<label>Issue 评论</label>
|
|
<input type="number" id="issue-comment-weight" value="0.5252" step="0.0001">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>创建 Issue</label>
|
|
<input type="number" id="open-issue-weight" value="2.2235" step="0.0001">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>创建 PR</label>
|
|
<input type="number" id="open-pull-weight" value="4.0679" step="0.0001">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 状态栏 -->
|
|
<footer class="footer">
|
|
<div class="status-info">
|
|
<span class="status-dot"></span>
|
|
<span>系统就绪</span>
|
|
</div>
|
|
<div class="footer-info">
|
|
<span>OpenRank v1.0.0</span>
|
|
<span>最后更新: <span id="last-update">-</span></span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- 加载动画 -->
|
|
<div class="loading-overlay" id="loading-overlay">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-atom fa-spin"></i>
|
|
<p>计算中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|