front/index.html
zzh bd97ed76fd feat: ?????????????????/???????
??????????????????????????????? H5/?????

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-30 15:16:55 +08:00

117 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/src/assets/logo.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>IDE I Faster &amp; Simpler</title>
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />
<!-- DNS 预解析,加速资源加载 -->
<link rel="dns-prefetch" href="//43.139.210.35" />
<!-- 预连接,提前建立连接 -->
<link rel="preconnect" href="//43.139.210.35" crossorigin />
<style>
/* 首屏兜底:避免扫码/冷启动长时间白屏 */
#app-boot {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0;
padding: 24px;
box-sizing: border-box;
background: linear-gradient(180deg, #e8f4f4 0%, #f5f7f8 42%);
font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
color: #4e5969;
text-align: center;
}
#app-boot .boot-spinner {
width: 36px;
height: 36px;
border: 3px solid #d4e8e8;
border-top-color: #007979;
border-radius: 50%;
animation: app-boot-spin 0.75s linear infinite;
}
#app-boot .boot-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1d2129;
}
#app-boot .boot-sub {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #86909c;
max-width: 280px;
}
#app-boot .boot-retry {
display: none;
margin-top: 4px;
height: 36px;
padding: 0 18px;
border: none;
border-radius: 10px;
background: #007979;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
#app-boot.is-timeout .boot-spinner {
display: none;
}
#app-boot.is-timeout .boot-retry {
display: inline-flex;
align-items: center;
justify-content: center;
}
@keyframes app-boot-spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="app">
<div id="app-boot" role="status" aria-live="polite">
<div class="boot-spinner" aria-hidden="true"></div>
<p class="boot-title" id="app-boot-title">加载中…</p>
<p class="boot-sub" id="app-boot-sub">网络较忙时请稍候,请勿关闭页面</p>
<button type="button" class="boot-retry" id="app-boot-retry" onclick="location.reload()">
重新加载
</button>
</div>
</div>
<script>
(function () {
var boot = document.getElementById('app-boot');
var title = document.getElementById('app-boot-title');
var sub = document.getElementById('app-boot-sub');
if (!boot) return;
window.setTimeout(function () {
if (window.__APP_MOUNTED__ || !document.getElementById('app-boot')) return;
if (sub) sub.textContent = '仍在加载,网络可能较慢…';
}, 4000);
window.setTimeout(function () {
if (window.__APP_MOUNTED__ || !document.getElementById('app-boot')) return;
boot.classList.add('is-timeout');
if (title) title.textContent = '加载时间过长';
if (sub)
sub.textContent = '请检查网络后重试;若持续失败,可切换网络或稍后再打开';
}, 20000);
})();
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>