421 lines
17 KiB
HTML
421 lines
17 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.meta.project_name }}</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: #f5f7fa;
|
||
|
|
font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 40px 0;
|
||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 30px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.overall-score {
|
||
|
|
font-size: 5rem;
|
||
|
|
font-weight: bold;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.star-rating {
|
||
|
|
color: #ffd700;
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-box {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border-left: 4px solid #667eea;
|
||
|
|
padding: 20px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-value {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #667eea;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-excellent { background: #28a745; }
|
||
|
|
.badge-good { background: #17a2b8; }
|
||
|
|
.badge-fair { background: #ffc107; color: #333; }
|
||
|
|
.badge-poor { background: #dc3545; }
|
||
|
|
|
||
|
|
.progress-bar-custom {
|
||
|
|
height: 30px;
|
||
|
|
border-radius: 15px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recommendation-item {
|
||
|
|
background: white;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-left: 4px solid #667eea;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-high { border-left-color: #dc3545; }
|
||
|
|
.priority-medium { border-left-color: #ffc107; }
|
||
|
|
.priority-low { border-left-color: #28a745; }
|
||
|
|
|
||
|
|
.insight-card {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-download {
|
||
|
|
background: #28a745;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 12px 30px;
|
||
|
|
border-radius: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-download:hover {
|
||
|
|
background: #218838;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-container {
|
||
|
|
position: relative;
|
||
|
|
height: 300px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="header">
|
||
|
|
<div class="container">
|
||
|
|
<h1><i class="bi bi-file-earmark-bar-graph"></i> 项目质量分析报告</h1>
|
||
|
|
<h3>{{ report.meta.project_name }}</h3>
|
||
|
|
<p class="mb-0">分析时间: {{ report.meta.analysis_date }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container mt-4">
|
||
|
|
<!-- 返回按钮和下载按钮 -->
|
||
|
|
<div class="mb-3">
|
||
|
|
<a href="/" class="btn btn-secondary">
|
||
|
|
<i class="bi bi-arrow-left"></i> 返回首页
|
||
|
|
</a>
|
||
|
|
<a href="/api/download-report/{{ report.meta.project_name }}" class="btn btn-download float-end">
|
||
|
|
<i class="bi bi-download"></i> 下载报告
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 综合评分 -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="score-card text-center">
|
||
|
|
<h4>综合评分</h4>
|
||
|
|
<div class="overall-score">{{ report.summary.overall_score }}</div>
|
||
|
|
<div class="star-rating">
|
||
|
|
{% for i in range(report.summary.rating_stars) %}
|
||
|
|
<i class="bi bi-star-fill"></i>
|
||
|
|
{% endfor %}
|
||
|
|
{% for i in range(5 - report.summary.rating_stars) %}
|
||
|
|
<i class="bi bi-star"></i>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<h5 class="mt-3">
|
||
|
|
<span class="badge badge-{{ report.summary.quality_level.key }}">
|
||
|
|
{{ report.summary.quality_level.label }}
|
||
|
|
</span>
|
||
|
|
</h5>
|
||
|
|
<p class="mt-3">{{ report.summary.quick_summary }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="score-card">
|
||
|
|
<h4 class="mb-4">各维度评分</h4>
|
||
|
|
<div class="chart-container">
|
||
|
|
<canvas id="radarChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 详细评分 -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-code-square"></i> 代码质量</h4>
|
||
|
|
<div class="metric-value">{{ report.detailed_scores.code_quality.score }}/100</div>
|
||
|
|
<div class="progress mt-3">
|
||
|
|
<div class="progress-bar progress-bar-custom" role="progressbar"
|
||
|
|
style="width: {{ report.detailed_scores.code_quality.score }}%;
|
||
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);">
|
||
|
|
{{ report.detailed_scores.code_quality.level }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<small class="text-muted">权重: {{ report.detailed_scores.code_quality.weight }}%</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-book"></i> 文档质量</h4>
|
||
|
|
<div class="metric-value">{{ report.detailed_scores.documentation.score }}/100</div>
|
||
|
|
<div class="progress mt-3">
|
||
|
|
<div class="progress-bar progress-bar-custom" role="progressbar"
|
||
|
|
style="width: {{ report.detailed_scores.documentation.score }}%;
|
||
|
|
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);">
|
||
|
|
{{ report.detailed_scores.documentation.level }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<small class="text-muted">权重: {{ report.detailed_scores.documentation.weight }}%</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-activity"></i> 项目活跃度</h4>
|
||
|
|
<div class="metric-value">{{ report.detailed_scores.activity.score }}/100</div>
|
||
|
|
<div class="progress mt-3">
|
||
|
|
<div class="progress-bar progress-bar-custom" role="progressbar"
|
||
|
|
style="width: {{ report.detailed_scores.activity.score }}%;
|
||
|
|
background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);">
|
||
|
|
{{ report.detailed_scores.activity.level }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<small class="text-muted">权重: {{ report.detailed_scores.activity.weight }}%</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-people"></i> 社区健康度</h4>
|
||
|
|
<div class="metric-value">{{ report.detailed_scores.community.score }}/100</div>
|
||
|
|
<div class="progress mt-3">
|
||
|
|
<div class="progress-bar progress-bar-custom" role="progressbar"
|
||
|
|
style="width: {{ report.detailed_scores.community.score }}%;
|
||
|
|
background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);">
|
||
|
|
{{ report.detailed_scores.community.level }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<small class="text-muted">权重: {{ report.detailed_scores.community.weight }}%</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 代码统计 -->
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-bar-chart"></i> 代码统计</h4>
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="metric-box">
|
||
|
|
<div class="metric-value">{{ report.code_analysis.statistics.total_files }}</div>
|
||
|
|
<div>总文件数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="metric-box">
|
||
|
|
<div class="metric-value">{{ report.code_analysis.statistics.total_lines }}</div>
|
||
|
|
<div>代码行数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="metric-box">
|
||
|
|
<div class="metric-value">{{ report.code_analysis.quality_metrics.maintainability_index|round(1) }}</div>
|
||
|
|
<div>可维护性指数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="metric-box">
|
||
|
|
<div class="metric-value">{{ report.code_analysis.quality_metrics.code_smells_count }}</div>
|
||
|
|
<div>代码问题</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI洞察 -->
|
||
|
|
{% if report.ai_insights %}
|
||
|
|
<div class="insight-card">
|
||
|
|
<h4><i class="bi bi-robot"></i> AI智能分析</h4>
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<h5>整体评价</h5>
|
||
|
|
<p>{{ report.ai_insights.overall_assessment }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h5><i class="bi bi-check-circle"></i> 主要优点</h5>
|
||
|
|
<ul>
|
||
|
|
{% for strength in report.ai_insights.strengths %}
|
||
|
|
<li>{{ strength }}</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h5><i class="bi bi-exclamation-triangle"></i> 存在问题</h5>
|
||
|
|
<ul>
|
||
|
|
{% for weakness in report.ai_insights.weaknesses %}
|
||
|
|
<li>{{ weakness }}</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-12 mt-3">
|
||
|
|
<h5><i class="bi bi-star"></i> 推荐指数: {{ report.ai_insights.rating }}/5</h5>
|
||
|
|
<p><strong>适用场景:</strong> {{ report.ai_insights.use_cases }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- 改进建议 -->
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-lightbulb"></i> 改进建议</h4>
|
||
|
|
|
||
|
|
{% if report.recommendations.priority_high %}
|
||
|
|
<h5 class="mt-4 text-danger"><i class="bi bi-exclamation-circle"></i> 高优先级</h5>
|
||
|
|
{% for rec in report.recommendations.priority_high %}
|
||
|
|
<div class="recommendation-item priority-high">
|
||
|
|
<i class="bi bi-arrow-right-circle"></i> {{ rec }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if report.recommendations.priority_medium %}
|
||
|
|
<h5 class="mt-4 text-warning"><i class="bi bi-info-circle"></i> 中优先级</h5>
|
||
|
|
{% for rec in report.recommendations.priority_medium %}
|
||
|
|
<div class="recommendation-item priority-medium">
|
||
|
|
<i class="bi bi-arrow-right-circle"></i> {{ rec }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if report.recommendations.priority_low %}
|
||
|
|
<h5 class="mt-4 text-success"><i class="bi bi-check-circle"></i> 低优先级</h5>
|
||
|
|
{% for rec in report.recommendations.priority_low %}
|
||
|
|
<div class="recommendation-item priority-low">
|
||
|
|
<i class="bi bi-arrow-right-circle"></i> {{ rec }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if report.ai_insights.recommendations %}
|
||
|
|
<h5 class="mt-4"><i class="bi bi-robot"></i> AI推荐建议</h5>
|
||
|
|
{% for rec in report.ai_insights.recommendations %}
|
||
|
|
<div class="recommendation-item">
|
||
|
|
<i class="bi bi-stars"></i> {{ rec }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 项目活跃度详情 -->
|
||
|
|
<div class="score-card">
|
||
|
|
<h4><i class="bi bi-graph-up"></i> 项目活跃度详情</h4>
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<p><strong>最后提交:</strong> {{ report.activity_analysis.last_commit }}</p>
|
||
|
|
<p><strong>总提交数:</strong> {{ report.activity_analysis.commit_statistics.total }}</p>
|
||
|
|
<p><strong>贡献者数:</strong> {{ report.activity_analysis.contributors }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<p><strong>最近1个月提交:</strong> {{ report.activity_analysis.commit_statistics.last_month }}</p>
|
||
|
|
<p><strong>最近3个月提交:</strong> {{ report.activity_analysis.commit_statistics.last_3_months }}</p>
|
||
|
|
<p><strong>最近1年提交:</strong> {{ report.activity_analysis.commit_statistics.last_year }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<div class="text-center py-4">
|
||
|
|
<p class="text-muted">© 2025 红山开源平台 - 开源项目质量分析系统</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 雷达图
|
||
|
|
const ctx = document.getElementById('radarChart').getContext('2d');
|
||
|
|
const radarChart = new Chart(ctx, {
|
||
|
|
type: 'radar',
|
||
|
|
data: {
|
||
|
|
labels: ['代码质量', '文档质量', '项目活跃度', '社区健康度', '可维护性'],
|
||
|
|
datasets: [{
|
||
|
|
label: '项目评分',
|
||
|
|
data: [
|
||
|
|
{{ report.detailed_scores.code_quality.score }},
|
||
|
|
{{ report.detailed_scores.documentation.score }},
|
||
|
|
{{ report.detailed_scores.activity.score }},
|
||
|
|
{{ report.detailed_scores.community.score }},
|
||
|
|
{{ report.detailed_scores.maintainability.score }}
|
||
|
|
],
|
||
|
|
backgroundColor: 'rgba(102, 126, 234, 0.2)',
|
||
|
|
borderColor: 'rgba(102, 126, 234, 1)',
|
||
|
|
borderWidth: 2,
|
||
|
|
pointBackgroundColor: 'rgba(102, 126, 234, 1)',
|
||
|
|
pointBorderColor: '#fff',
|
||
|
|
pointHoverBackgroundColor: '#fff',
|
||
|
|
pointHoverBorderColor: 'rgba(102, 126, 234, 1)'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
scales: {
|
||
|
|
r: {
|
||
|
|
beginAtZero: true,
|
||
|
|
max: 100,
|
||
|
|
ticks: {
|
||
|
|
stepSize: 20
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|