341 lines
12 KiB
HTML
341 lines
12 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>开源项目质量分析系统 - 红山开源平台</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">
|
||
<style>
|
||
:root {
|
||
--primary-color: #4a90e2;
|
||
--success-color: #28a745;
|
||
--warning-color: #ffc107;
|
||
--danger-color: #dc3545;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #3f275fff 0%, #e5bb6dff 100%);
|
||
min-height: 100vh;
|
||
font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
.hero-section {
|
||
padding: 60px 0;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-section h1 {
|
||
font-size: 3rem;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.hero-section p {
|
||
font-size: 1.3rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.main-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||
padding: 40px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.feature-box {
|
||
text-align: center;
|
||
padding: 30px;
|
||
margin: 20px 0;
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.feature-box:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.feature-box i {
|
||
font-size: 3rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.btn-analyze {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border: none;
|
||
padding: 15px 40px;
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
border-radius: 50px;
|
||
color: white;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-analyze:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
|
||
color: white;
|
||
}
|
||
|
||
.analysis-type-card {
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.analysis-type-card:hover {
|
||
border-color: var(--primary-color);
|
||
background: #f8f9ff;
|
||
}
|
||
|
||
.analysis-type-card.active {
|
||
border-color: var(--primary-color);
|
||
background: #f0f4ff;
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.7);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-content {
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.spinner {
|
||
border: 5px solid #f3f3f3;
|
||
border-top: 5px solid var(--primary-color);
|
||
border-radius: 50%;
|
||
width: 60px;
|
||
height: 60px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.footer {
|
||
background: rgba(0,0,0,0.2);
|
||
color: white;
|
||
padding: 30px 0;
|
||
margin-top: 50px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero Section -->
|
||
<div class="hero-section">
|
||
<div class="container">
|
||
<h1><i class="bi bi-graph-up-arrow"></i> 开源项目质量分析系统</h1>
|
||
<p>基于九格大模型的智能分析 · 为红山开源平台赋能</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container">
|
||
<div class="main-card">
|
||
<h2 class="text-center mb-4">开始分析您的项目</h2>
|
||
|
||
<form id="analysisForm">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="analysis-type-card" data-type="github" onclick="selectAnalysisType('github')">
|
||
<i class="bi bi-github" style="font-size: 3rem; color: #333;"></i>
|
||
<h4>GitHub 仓库分析</h4>
|
||
<p class="text-muted">输入GitHub仓库URL进行在线分析</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="analysis-type-card" data-type="upload" onclick="selectAnalysisType('upload')">
|
||
<i class="bi bi-cloud-upload" style="font-size: 3rem; color: var(--primary-color);"></i>
|
||
<h4>上传项目文件</h4>
|
||
<p class="text-muted">上传项目压缩包进行本地分析</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<input type="hidden" id="analysisType" name="analysis_type" value="">
|
||
|
||
<!-- GitHub Input -->
|
||
<div id="githubInput" style="display: none;">
|
||
<div class="mb-3">
|
||
<label for="repoUrl" class="form-label">GitHub 仓库 URL</label>
|
||
<input type="url" class="form-control form-control-lg" id="repoUrl" name="repo_url"
|
||
placeholder="https://github.com/username/repository">
|
||
<div class="form-text">示例: https://github.com/flask/flask</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- File Upload -->
|
||
<div id="uploadInput" style="display: none;">
|
||
<div class="mb-3">
|
||
<label for="fileUpload" class="form-label">选择项目压缩包</label>
|
||
<input type="file" class="form-control form-control-lg" id="fileUpload" name="file"
|
||
accept=".zip,.tar,.tar.gz,.tgz">
|
||
<div class="form-text">支持 .zip, .tar, .tar.gz 格式，最大100MB</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<button type="submit" class="btn btn-analyze" id="analyzeBtn">
|
||
<i class="bi bi-play-circle"></i> 开始分析
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Features -->
|
||
<div class="row mt-5">
|
||
<div class="col-md-3">
|
||
<div class="feature-box">
|
||
<i class="bi bi-code-square"></i>
|
||
<h5>代码质量</h5>
|
||
<p>深度分析代码结构和可维护性</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="feature-box">
|
||
<i class="bi bi-book"></i>
|
||
<h5>文档完整性</h5>
|
||
<p>评估文档的完整性和规范性</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="feature-box">
|
||
<i class="bi bi-activity"></i>
|
||
<h5>项目活跃度</h5>
|
||
<p>分析提交频率和社区参与度</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="feature-box">
|
||
<i class="bi bi-robot"></i>
|
||
<h5>AI智能建议</h5>
|
||
<p>基于九格大模型提供改进建议</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="loading-content">
|
||
<div class="spinner"></div>
|
||
<h3>正在分析项目...</h3>
|
||
<p>这可能需要几分钟时间，请耐心等待</p>
|
||
<div id="loadingStatus">初始化分析...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<div class="container text-center">
|
||
<p>© 2025 红山开源平台 - 开源项目质量分析系统</p>
|
||
<p>基于九格大模型技术支持</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
function selectAnalysisType(type) {
|
||
// 更新选中状态
|
||
document.querySelectorAll('.analysis-type-card').forEach(card => {
|
||
card.classList.remove('active');
|
||
});
|
||
document.querySelector(`[data-type="${type}"]`).classList.add('active');
|
||
|
||
// 设置分析类型
|
||
document.getElementById('analysisType').value = type;
|
||
|
||
// 显示对应的输入区域
|
||
document.getElementById('githubInput').style.display = type === 'github' ? 'block' : 'none';
|
||
document.getElementById('uploadInput').style.display = type === 'upload' ? 'block' : 'none';
|
||
}
|
||
|
||
document.getElementById('analysisForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
const analysisType = document.getElementById('analysisType').value;
|
||
if (!analysisType) {
|
||
alert('请选择分析类型');
|
||
return;
|
||
}
|
||
|
||
if (analysisType === 'github') {
|
||
const repoUrl = document.getElementById('repoUrl').value;
|
||
if (!repoUrl) {
|
||
alert('请输入GitHub仓库URL');
|
||
return;
|
||
}
|
||
} else if (analysisType === 'upload') {
|
||
const fileUpload = document.getElementById('fileUpload').files[0];
|
||
if (!fileUpload) {
|
||
alert('请选择要上传的文件');
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 显示加载动画
|
||
document.getElementById('loadingOverlay').style.display = 'flex';
|
||
|
||
// 构建FormData
|
||
const formData = new FormData(this);
|
||
|
||
// 更新加载状态
|
||
updateLoadingStatus('正在上传项目文件...');
|
||
|
||
try {
|
||
const response = await fetch('/analyze', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
updateLoadingStatus('正在分析代码质量...');
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
updateLoadingStatus('分析完成！正在跳转到报告页面...');
|
||
// 跳转到报告页面
|
||
setTimeout(() => {
|
||
window.location.href = '/report/' + result.project_name;
|
||
}, 1000);
|
||
} else {
|
||
alert('分析失败: ' + (result.error || '未知错误'));
|
||
document.getElementById('loadingOverlay').style.display = 'none';
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
alert('分析过程中出现错误: ' + error.message);
|
||
document.getElementById('loadingOverlay').style.display = 'none';
|
||
}
|
||
});
|
||
|
||
function updateLoadingStatus(status) {
|
||
document.getElementById('loadingStatus').textContent = status;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|