90 lines
4.0 KiB
HTML
90 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>年级册次排序测试</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.test-container { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
|
|
.success { border-color: #28a745; background-color: #f8fff9; }
|
|
select { width: 200px; padding: 8px; margin: 5px 0; }
|
|
label { display: block; margin: 10px 0 5px 0; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>年级册次排序测试</h1>
|
|
|
|
<div class="test-container">
|
|
<h2>排序验证</h2>
|
|
<div id="sortResult"></div>
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<h2>前端选择器预览</h2>
|
|
<label for="gradeSelect">年级册次选择：</label>
|
|
<select id="gradeSelect"></select>
|
|
<div id="selectorResult"></div>
|
|
</div>
|
|
|
|
<script>
|
|
async function testSorting() {
|
|
const sortResult = document.getElementById('sortResult');
|
|
const gradeSelect = document.getElementById('gradeSelect');
|
|
const selectorResult = document.getElementById('selectorResult');
|
|
|
|
try {
|
|
// 获取筛选条件
|
|
const response = await fetch('/api/filters');
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
const grades = result.data.grades;
|
|
const correctOrder = ['一年级上册', '二年级上册', '三年级上册', '四年级上册', '五年级上册', '六年级上册', '七年级上册', '八年级上册'];
|
|
|
|
// 验证排序是否正确
|
|
const isCorrect = JSON.stringify(grades) === JSON.stringify(correctOrder);
|
|
|
|
if (isCorrect) {
|
|
sortResult.innerHTML = '<div class="success">✓ 年级册次排序正确！</div>';
|
|
sortResult.innerHTML += '<h3>正确的排序顺序：</h3>';
|
|
correctOrder.forEach((grade, index) => {
|
|
sortResult.innerHTML += `<div>${index + 1}. ${grade}</div>`;
|
|
});
|
|
} else {
|
|
sortResult.innerHTML = '<div>✗ 年级册次排序不正确</div>';
|
|
sortResult.innerHTML += '<h3>当前排序：</h3>';
|
|
grades.forEach((grade, index) => {
|
|
sortResult.innerHTML += `<div>${index + 1}. ${grade}</div>`;
|
|
});
|
|
sortResult.innerHTML += '<h3>正确排序：</h3>';
|
|
correctOrder.forEach((grade, index) => {
|
|
sortResult.innerHTML += `<div>${index + 1}. ${grade}</div>`;
|
|
});
|
|
}
|
|
|
|
// 填充选择器
|
|
gradeSelect.innerHTML = '<option value="">选择年级册次...</option>';
|
|
grades.forEach(grade => {
|
|
const option = document.createElement('option');
|
|
option.value = grade;
|
|
option.textContent = grade;
|
|
gradeSelect.appendChild(option);
|
|
});
|
|
|
|
selectorResult.innerHTML = '<div class="success">✓ 前端选择器已正确填充</div>';
|
|
|
|
} else {
|
|
sortResult.innerHTML = '<div>✗ 获取筛选条件失败</div>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('测试失败:', error);
|
|
sortResult.innerHTML = `<div>测试失败: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// 页面加载完成后运行测试
|
|
window.onload = testSorting;
|
|
</script>
|
|
</body>
|
|
</html> |