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.
347 lines
12 KiB
347 lines
12 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>简化的代码质量检查工具</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.container {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.tool-checkbox {
|
|
margin: 15px 0;
|
|
padding: 10px;
|
|
background-color: #f1f8ff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.file-upload {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.download-btn {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
#report-area {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
display: none;
|
|
background-color: #e8f5e9;
|
|
}
|
|
|
|
#result {
|
|
background-color: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.loader {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #3498db;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 20px auto;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
.btn:disabled {
|
|
background-color: #95a5a6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.debug-panel {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-top: 20px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-height: 200px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>简化的代码质量检查工具</h1>
|
|
|
|
<div id="toolContainer">
|
|
<fieldset>
|
|
<legend>选择工具：</legend>
|
|
<div class="tool-checkbox">
|
|
<input type="checkbox" id="bandit" name="tools" value="bandit" checked>
|
|
<label for="bandit">Bandit</label>
|
|
</div>
|
|
<div class="tool-checkbox">
|
|
<input type="checkbox" id="flake8" name="tools" value="flake8" checked>
|
|
<label for="flake8">Flake8</label>
|
|
</div>
|
|
<div class="tool-checkbox">
|
|
<input type="checkbox" id="pylint" name="tools" value="pylint" checked>
|
|
<label for="pylint">Pylint</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="file-upload">
|
|
<label for="file">上传代码文件：</label>
|
|
<input type="file" id="file" name="file" accept=".py" aria-label="选择Python文件">
|
|
</div>
|
|
|
|
<button type="button" id="submitBtn" class="btn">提交检查</button>
|
|
</div>
|
|
|
|
<div class="loader" id="loader"></div>
|
|
|
|
<div id="report-area" aria-live="polite">
|
|
<h2>检查报告</h2>
|
|
<p>报告已生成，点击下载：</p>
|
|
<a id="report-download" href="#" class="download-btn">下载报告</a>
|
|
<button id="close-report" class="btn" style="margin-left: 10px;">关闭</button>
|
|
</div>
|
|
|
|
<h2>结果：</h2>
|
|
<pre id="result" role="log" aria-live="polite"></pre>
|
|
|
|
<div class="debug-panel">
|
|
<strong>调试信息：</strong><br>
|
|
<div id="debug-log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 简单的调试日志函数
|
|
function debugLog(message, data = null) {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const logEntry = `[${timestamp}] ${message}`;
|
|
if (data) {
|
|
console.log(logEntry, data);
|
|
} else {
|
|
console.log(logEntry);
|
|
}
|
|
|
|
const debugDiv = document.getElementById('debug-log');
|
|
debugDiv.innerHTML += logEntry + '<br>';
|
|
debugDiv.scrollTop = debugDiv.scrollHeight;
|
|
}
|
|
|
|
// 页面加载
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
debugLog('页面DOM加载完成');
|
|
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const resultPre = document.getElementById('result');
|
|
const reportArea = document.getElementById('report-area');
|
|
const reportLink = document.getElementById('report-download');
|
|
const closeReportBtn = document.getElementById('close-report');
|
|
const loader = document.getElementById('loader');
|
|
const fileInput = document.getElementById('file');
|
|
|
|
let isProcessing = false;
|
|
|
|
// 初始隐藏报告区域
|
|
reportArea.style.display = 'none';
|
|
|
|
// 关闭报告区域
|
|
closeReportBtn.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
reportArea.style.display = 'none';
|
|
debugLog('报告区域已关闭');
|
|
});
|
|
|
|
// 提交按钮处理
|
|
submitBtn.addEventListener('click', async function (event) {
|
|
debugLog('提交按钮被点击');
|
|
|
|
// 阻止所有默认行为
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
debugLog('阻止了默认行为和冒泡');
|
|
|
|
// 防止重复提交
|
|
if (isProcessing) {
|
|
debugLog('正在处理中，忽略重复点击');
|
|
return;
|
|
}
|
|
isProcessing = true;
|
|
debugLog('开始处理请求');
|
|
|
|
// 更新UI状态
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = '检查中...';
|
|
loader.style.display = 'block';
|
|
resultPre.textContent = '正在检查...';
|
|
reportArea.style.display = 'none';
|
|
|
|
try {
|
|
// 验证文件
|
|
if (fileInput.files.length === 0) {
|
|
throw new Error('请上传一个文件');
|
|
}
|
|
debugLog('文件验证通过');
|
|
|
|
// 获取选中的工具
|
|
const tools = [];
|
|
if (document.getElementById('bandit').checked) tools.push('bandit');
|
|
if (document.getElementById('flake8').checked) tools.push('flake8');
|
|
if (document.getElementById('pylint').checked) tools.push('pylint');
|
|
|
|
if (tools.length === 0) {
|
|
throw new Error('请至少选择一个工具');
|
|
}
|
|
debugLog('工具选择:', tools);
|
|
|
|
// 准备表单数据
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
formData.append('tools', tools.join(','));
|
|
debugLog('表单数据准备完成');
|
|
|
|
// 发送请求
|
|
debugLog('开始发送网络请求...');
|
|
const response = await fetch('http://localhost:3000/check', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
debugLog('收到响应，状态码:', response.status);
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
throw new Error(`HTTP错误! 状态码: ${response.status}\n${errorText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
debugLog('成功解析响应数据');
|
|
debugLog('响应数据结构:', data);
|
|
|
|
// 显示结果
|
|
resultPre.textContent = JSON.stringify(data, null, 2);
|
|
debugLog('结果已显示在页面上');
|
|
|
|
// 显示报告下载区域
|
|
if (data.reportUrl) {
|
|
const downloadUrl = 'http://localhost:3000' + data.reportUrl;
|
|
reportLink.href = downloadUrl;
|
|
reportLink.download = `code_report_${Date.now()}.md`;
|
|
reportArea.style.display = 'block';
|
|
debugLog('报告下载链接已设置');
|
|
}
|
|
|
|
} catch (error) {
|
|
debugLog('处理过程中发生错误:', error.message);
|
|
resultPre.textContent = `错误: ${error.message}`;
|
|
console.error('详细错误信息:', error);
|
|
} finally {
|
|
// 恢复UI状态
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '提交检查';
|
|
loader.style.display = 'none';
|
|
isProcessing = false;
|
|
debugLog('UI状态已恢复');
|
|
}
|
|
});
|
|
|
|
// 下载链接处理
|
|
reportLink.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
debugLog('下载链接被点击');
|
|
|
|
// 使用简单的下载方式
|
|
const link = document.createElement('a');
|
|
link.href = reportLink.href;
|
|
link.download = reportLink.download;
|
|
link.style.display = 'none';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
debugLog('下载已启动');
|
|
});
|
|
|
|
debugLog('事件监听器设置完成');
|
|
});
|
|
|
|
// 全局错误处理
|
|
window.addEventListener('error', function (event) {
|
|
console.error('全局JavaScript错误:', event.error);
|
|
debugLog('捕获到全局错误: ' + event.message);
|
|
});
|
|
|
|
window.addEventListener('unhandledrejection', function (event) {
|
|
console.error('未处理的Promise错误:', event.reason);
|
|
debugLog('捕获到未处理Promise错误: ' + event.reason);
|
|
});
|
|
|
|
debugLog('脚本初始化完成');
|
|
</script>
|
|
</body>
|
|
|
|
</html> |