149 lines
5.1 KiB
HTML
149 lines
5.1 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>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
padding: 20px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.test-section {
|
|||
|
|
margin: 30px 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
.success {
|
|||
|
|
background: #d4edda;
|
|||
|
|
color: #155724;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
background: #f8d7da;
|
|||
|
|
color: #721c24;
|
|||
|
|
}
|
|||
|
|
iframe {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 600px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>项目库页面验证测试</h1>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>1. 页面加载测试</h2>
|
|||
|
|
<div id="pageStatus" class="status">正在加载...</div>
|
|||
|
|
<iframe id="projectLibraryFrame" src="http://localhost:5154/project-library"></iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h2>2. Mock数据测试</h2>
|
|||
|
|
<div id="mockStatus" class="status">正在测试...</div>
|
|||
|
|
<div id="mockResults"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="module">
|
|||
|
|
// 测试页面加载
|
|||
|
|
const iframe = document.getElementById('projectLibraryFrame');
|
|||
|
|
const pageStatus = document.getElementById('pageStatus');
|
|||
|
|
|
|||
|
|
iframe.onload = function() {
|
|||
|
|
pageStatus.className = 'status success';
|
|||
|
|
pageStatus.textContent = '✓ 页面加载成功';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
iframe.onerror = function() {
|
|||
|
|
pageStatus.className = 'status error';
|
|||
|
|
pageStatus.textContent = '✗ 页面加载失败';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 测试mock数据
|
|||
|
|
import { getMockProjectsList, getMockProjectDetail } from './src/mocks/projectLibraryMock.js';
|
|||
|
|
|
|||
|
|
const mockStatus = document.getElementById('mockStatus');
|
|||
|
|
const mockResults = document.getElementById('mockResults');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 测试获取项目列表
|
|||
|
|
const listResult = getMockProjectsList({ page: 1, pageSize: 5 });
|
|||
|
|
|
|||
|
|
if (listResult && listResult.success && listResult.data) {
|
|||
|
|
mockResults.innerHTML += `
|
|||
|
|
<div class="status success">
|
|||
|
|
✓ 获取项目列表成功<br>
|
|||
|
|
- 总数: ${listResult.total}<br>
|
|||
|
|
- 当前页数据: ${listResult.data.length} 条<br>
|
|||
|
|
- 第一个项目: ${listResult.data[0]?.name || '无'}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 测试获取项目详情
|
|||
|
|
const detailResult = getMockProjectDetail(1);
|
|||
|
|
if (detailResult && detailResult.success) {
|
|||
|
|
mockResults.innerHTML += `
|
|||
|
|
<div class="status success">
|
|||
|
|
✓ 获取项目详情成功<br>
|
|||
|
|
- 标题: ${detailResult.data.title}<br>
|
|||
|
|
- 类别: ${detailResult.data.category || '未分类'}
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
mockStatus.className = 'status success';
|
|||
|
|
mockStatus.textContent = '✓ Mock数据测试通过';
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
mockStatus.className = 'status error';
|
|||
|
|
mockStatus.textContent = '✗ Mock数据测试失败: ' + error.message;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 延迟检查页面内容
|
|||
|
|
setTimeout(() => {
|
|||
|
|
try {
|
|||
|
|
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
|||
|
|
const projectTitle = iframeDoc.querySelector('.project-library-title');
|
|||
|
|
|
|||
|
|
if (projectTitle && projectTitle.textContent.includes('视觉设计')) {
|
|||
|
|
mockResults.innerHTML += `
|
|||
|
|
<div class="status success">
|
|||
|
|
✓ 页面标题正确显示为"视觉设计班级项目库"
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const categories = iframeDoc.querySelector('.project-category-nav');
|
|||
|
|
if (categories) {
|
|||
|
|
mockResults.innerHTML += `
|
|||
|
|
<div class="status success">
|
|||
|
|
✓ 分类导航栏已正确加载
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const myProjects = iframeDoc.querySelector('.my-project-library');
|
|||
|
|
if (myProjects) {
|
|||
|
|
mockResults.innerHTML += `
|
|||
|
|
<div class="status success">
|
|||
|
|
✓ "我完成的项目库"板块已正确加载
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log('跨域限制，无法访问iframe内容');
|
|||
|
|
}
|
|||
|
|
}, 2000);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|