erp-frontend/test-vue-app.html
2026-04-06 21:14:31 +08:00

140 lines
5.7 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue应用测试</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.container { max-width: 800px; margin: 0 auto; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0; }
.success { color: green; }
.error { color: red; }
.loading { color: blue; }
button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
iframe { width: 100%; height: 500px; border: 1px solid #ddd; border-radius: 4px; }
</style>
</head>
<body>
<div class="container">
<h1>Vue应用功能测试</h1>
<p>测试Vue应用各页面是否正常工作</p>
<div class="card">
<h2>测试1: 主应用</h2>
<button onclick="testMainApp()">测试 http://localhost:5155/</button>
<div id="result1" class="loading">等待测试...</div>
<iframe id="frame1" style="display:none;"></iframe>
</div>
<div class="card">
<h2>测试2: 打印页面(原版)</h2>
<button onclick="testPrintPage()">测试 http://localhost:5155/print/batch</button>
<div id="result2" class="loading">等待测试...</div>
<iframe id="frame2" style="display:none;"></iframe>
</div>
<div class="card">
<h2>测试3: 打印页面(修复版)</h2>
<button onclick="testPrintFixed()">测试 http://localhost:5155/print/batch-fixed</button>
<div id="result2" class="loading">等待测试...</div>
<iframe id="frame3" style="display:none;"></iframe>
</div>
<div class="card">
<h2>测试4: 商品管理页面</h2>
<button onclick="testGoodsPage()">测试 http://localhost:5155/goods/list</button>
<div id="result3" class="loading">等待测试...</div>
<iframe id="frame4" style="display:none;"></iframe>
</div>
<div class="card">
<h2>测试5: 订单管理页面</h2>
<button onclick="testOrdersPage()">测试 http://localhost:5155/orders/list</button>
<div id="result4" class="loading">等待测试...</div>
<iframe id="frame5" style="display:none;"></iframe>
</div>
<div class="card">
<h2>手动测试指南</h2>
<ol>
<li>打开浏览器控制台F12</li>
<li>访问 <a href="http://localhost:5155/" target="_blank">http://localhost:5155/</a></li>
<li>检查控制台是否有错误</li>
<li>导航到各个页面测试功能</li>
<li>重点关注打印页面是否卡顿</li>
</ol>
</div>
</div>
<script>
function testPage(url, resultId, frameId) {
const resultEl = document.getElementById(resultId);
const frameEl = document.getElementById(frameId);
resultEl.className = 'loading';
resultEl.textContent = '加载中...';
frameEl.style.display = 'block';
frameEl.src = url;
// 监听iframe加载
frameEl.onload = function() {
try {
// 尝试访问iframe内容
const iframeDoc = frameEl.contentDocument || frameEl.contentWindow.document;
if (iframeDoc.readyState === 'complete') {
// 检查是否有Vue应用
const vueApp = iframeDoc.getElementById('app');
const hasContent = iframeDoc.body && iframeDoc.body.innerHTML.length > 100;
if (vueApp && hasContent) {
resultEl.className = 'success';
resultEl.textContent = '✅ 页面加载成功Vue应用正常。';
} else {
resultEl.className = 'error';
resultEl.textContent = '⚠️ 页面加载但可能缺少内容。';
}
}
} catch (e) {
// 跨域限制但至少iframe加载了
resultEl.className = 'success';
resultEl.textContent = '✅ 页面加载成功(跨域限制无法检查内容)。';
}
};
frameEl.onerror = function() {
resultEl.className = 'error';
resultEl.textContent = '❌ 页面加载失败!';
frameEl.style.display = 'none';
};
}
function testMainApp() {
testPage('http://localhost:5155/', 'result1', 'frame1');
}
function testPrintPage() {
testPage('http://localhost:5155/print/batch', 'result2', 'frame2');
}
function testPrintFixed() {
testPage('http://localhost:5155/print/batch-fixed', 'result2', 'frame3');
}
function testGoodsPage() {
testPage('http://localhost:5155/goods/list', 'result3', 'frame4');
}
function testOrdersPage() {
testPage('http://localhost:5155/orders/list', 'result4', 'frame5');
}
// 自动测试主应用
window.onload = () => {
setTimeout(testMainApp, 1000);
};
</script>
</body>
</html>