122 lines
6.2 KiB
HTML
122 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Base.js Modular & Performance Tests</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- 同步加载已构建好的依赖 (通过 test/lib/ 软链接) -->
|
|
<script src="./lib/state.js"></script>
|
|
<script src="./lib/bootstrap.js"></script>
|
|
|
|
<!-- 同步加载 Base 源码 (用于测试当前正在开发的源码) -->
|
|
<script src="../src/ui.js"></script>
|
|
<script src="../src/http.js"></script>
|
|
<script src="../src/form.js"></script>
|
|
<script src="../src/list.js"></script>
|
|
<script src="../src/interaction.js"></script>
|
|
<script src="../src/controls.js"></script>
|
|
<script src="../src/nav.js"></script>
|
|
</head>
|
|
<body class="d-flex flex-column vh-100">
|
|
<script>
|
|
window.addEventListener('error', e => console.log('GLOBAL ERROR:', e.message, e.filename, e.lineno, e.colno, e.error));
|
|
window.addEventListener('unhandledrejection', e => console.log('UNHANDLED REJECTION:', e.reason));
|
|
</script>
|
|
<div id="results" class="p-2 bg-light border-bottom">Running tests...</div>
|
|
|
|
<script>
|
|
const list_data = []
|
|
for (let i = 0; i < 10000; i++) {
|
|
list_data.push({ id: i, label: `item ${i}`, index: i, group: i % 1000, summary: `item ${i} summary`, parent: Math.floor(i / 10) })
|
|
}
|
|
const group_list = []
|
|
for (let i = 0; i < 1000; i++) {
|
|
group_list.push({ id: i, label: `group ${i}`, summary: `group ${i} summary` })
|
|
}
|
|
</script>
|
|
<script>
|
|
function switchTab(tabId) {
|
|
document.querySelectorAll('.list-container').forEach(el => el.style.display = 'none');
|
|
const target = document.getElementById('container-' + tabId);
|
|
if (target) target.style.display = 'flex';
|
|
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
const btn = document.getElementById('btn-' + tabId);
|
|
if (btn) btn.classList.add('active');
|
|
window.activeTab = tabId;
|
|
}
|
|
</script>
|
|
<div class="p-2 border-bottom d-flex gap-2">
|
|
<button id="btn-ll" class="tab-btn btn btn-sm btn-outline-primary active" onclick="switchTab('ll')">Fast List</button>
|
|
<button id="btn-gl" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('gl')">Fast Grouped</button>
|
|
<button id="btn-tt" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('tt')">Fast Tree</button>
|
|
<button id="btn-ct" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('ct')">Normal Tree</button>
|
|
<button id="btn-form" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('form')">AutoForm Controls</button>
|
|
</div>
|
|
<div class="d-flex flex-fill p-2 overflow-hidden">
|
|
<div id="container-ll" class="list-container flex-fill d-flex flex-column overflow-hidden">
|
|
<h5>Fast List (Variable Height)</h5>
|
|
<FastList fast id="ll" auto-select class="flex-fill d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
|
|
<template slot="item">
|
|
<div class="d-flex justify-content-center align-items-center border border-primary rounded" $text="item.label" $.style.height="${(item.index%10)*5+40}px"></div>
|
|
</template>
|
|
</FastList>
|
|
</div>
|
|
<div id="container-gl" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
|
<h5>Fast Grouped List</h5>
|
|
<FastList fast mode="group" id="gl" auto-select auto-select-group class="flex-fill d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
|
|
$ongroupclick="console.log(index, item)">
|
|
</FastList>
|
|
</div>
|
|
<div id="container-tt" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
|
<h5>Fast Tree List</h5>
|
|
<FastList fast mode="tree" id="tt" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></FastList>
|
|
</div>
|
|
<div id="container-ct" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
|
<h5>Normal Tree List (Collapsible)</h5>
|
|
<FastList mode="tree" collapsible id="ct" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
|
|
</FastList>
|
|
</div>
|
|
<div id="container-form" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
|
<h5>AutoForm Controls</h5>
|
|
<AutoForm id="test-form" class="border p-3 rounded bg-light" $onsubmit="UI.toast('Form Submitted: ' + JSON.stringify(event.detail))"></AutoForm>
|
|
<script>
|
|
setTimeout(() => {
|
|
const form = document.getElementById('test-form');
|
|
if (form) {
|
|
form.state.schema = [
|
|
{ name: 'startDate', label: 'Date Range', type: 'DatePicker', setting: { rangeEnd: 'endDate' } },
|
|
{ name: 'endDate', label: 'End Date (Shadow)', type: 'date' },
|
|
{ name: 'themeColor', label: 'Theme Color', type: 'ColorPicker' },
|
|
{ name: 'appIcon', label: 'App Icon', type: 'IconPicker' }
|
|
];
|
|
form.data = { startDate: '2026-05-01', endDate: '2026-05-31', themeColor: '#ff0000', appIcon: 'gear' };
|
|
}
|
|
}, 600);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载测试脚本 -->
|
|
<script src="./base.test.js"></script>
|
|
<script>
|
|
async function runAll() {
|
|
const results = document.getElementById('results');
|
|
try {
|
|
// Wait for components to initialize (async due to MutationObserver)
|
|
await new Promise(r => setTimeout(r, 800));
|
|
await runTests();
|
|
results.innerHTML = '<h1 style="color: green; font-size: 1.2rem">All Tests Passed 🎉</h1>';
|
|
window.testStatus = 'passed';
|
|
} catch (e) {
|
|
console.error(e);
|
|
results.innerHTML = '<h1 style="color: red; font-size: 1.2rem">Tests Failed: ' + e.message + '</h1>';
|
|
window.testStatus = 'failed';
|
|
}
|
|
}
|
|
runAll();
|
|
</script>
|
|
</body>
|
|
</html>
|