442 lines
11 KiB
HTML
442 lines
11 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>CDN 状态调试 - OpenTu</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #f39c12;
|
|
--primary-hover: #e67e22;
|
|
--success-color: #00b894;
|
|
--error-color: #e91e63;
|
|
--bg-color: #f8f9fa;
|
|
--card-bg: #ffffff;
|
|
--text-color: #333;
|
|
--border-color: #e0e0e0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
sans-serif;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.card h2 {
|
|
font-size: 16px;
|
|
margin-bottom: 15px;
|
|
color: #666;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: var(--bg-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.status-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge.healthy {
|
|
background: rgba(0, 184, 148, 0.15);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.status-badge.unhealthy {
|
|
background: rgba(233, 30, 99, 0.15);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.status-badge.unknown {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #666;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.log {
|
|
background: #1a1a2e;
|
|
color: #eee;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 13px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.log-entry {
|
|
margin-bottom: 5px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.log-entry.success {
|
|
color: #00b894;
|
|
}
|
|
|
|
.log-entry.error {
|
|
color: #e91e63;
|
|
}
|
|
|
|
.log-entry.info {
|
|
color: #74b9ff;
|
|
}
|
|
|
|
.info-text {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.latency {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🌐 CDN 状态调试</h1>
|
|
|
|
<div class="card">
|
|
<h2>CDN 源状态</h2>
|
|
<p class="info-text">显示各 CDN 源的健康状态和延迟信息</p>
|
|
<div id="cdn-status" class="status-grid">
|
|
<div class="status-item">
|
|
<span>加载中...</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="refreshStatus()">
|
|
刷新状态
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="runHealthCheck()">
|
|
执行健康检查
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="resetStatus()">
|
|
重置状态
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>CDN 偏好设置</h2>
|
|
<p class="info-text">浏览器自动选择的最快 CDN（基于延迟测试）</p>
|
|
<div id="cdn-preference" class="status-grid">
|
|
<div class="status-item">
|
|
<span>加载中...</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="reselectCDN()">
|
|
重新选择
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="clearPreference()">
|
|
清除偏好
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>操作日志</h2>
|
|
<div id="log" class="log">等待操作...</div>
|
|
</div>
|
|
|
|
<script src="./cdn-config.js"></script>
|
|
<script>
|
|
const logEl = document.getElementById('log');
|
|
|
|
function log(message, type = 'info') {
|
|
const entry = document.createElement('div');
|
|
entry.className = `log-entry ${type}`;
|
|
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
|
logEl.appendChild(entry);
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
}
|
|
|
|
function clearLog() {
|
|
logEl.innerHTML = '';
|
|
}
|
|
|
|
// 获取 SW CDN 状态
|
|
async function refreshStatus() {
|
|
log('获取 SW CDN 状态...');
|
|
|
|
if (!navigator.serviceWorker.controller) {
|
|
log('Service Worker 未激活', 'error');
|
|
return;
|
|
}
|
|
|
|
return new Promise((resolve) => {
|
|
const handler = (event) => {
|
|
if (event.data && event.data.type === 'SW_CDN_STATUS') {
|
|
navigator.serviceWorker.removeEventListener('message', handler);
|
|
renderStatus(event.data.status);
|
|
log('CDN 状态已更新', 'success');
|
|
resolve(event.data.status);
|
|
}
|
|
};
|
|
|
|
navigator.serviceWorker.addEventListener('message', handler);
|
|
navigator.serviceWorker.controller.postMessage({
|
|
type: 'SW_CDN_GET_STATUS',
|
|
});
|
|
|
|
// 超时处理
|
|
setTimeout(() => {
|
|
navigator.serviceWorker.removeEventListener('message', handler);
|
|
log('获取状态超时', 'error');
|
|
resolve(null);
|
|
}, 5000);
|
|
});
|
|
}
|
|
|
|
function renderStatus(statusList) {
|
|
const container = document.getElementById('cdn-status');
|
|
|
|
if (!statusList || statusList.length === 0) {
|
|
container.innerHTML =
|
|
'<div class="status-item"><span>无数据</span></div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = statusList
|
|
.map((item) => {
|
|
const status = item.status;
|
|
const badgeClass = status.isHealthy ? 'healthy' : 'unhealthy';
|
|
const badgeText = status.isHealthy ? '健康' : '不健康';
|
|
const lastCheck = status.lastCheckTime
|
|
? new Date(status.lastCheckTime).toLocaleTimeString()
|
|
: '未检查';
|
|
|
|
return `
|
|
<div class="status-item">
|
|
<div>
|
|
<span class="status-name">${item.name}</span>
|
|
<span class="latency">失败次数: ${status.failCount} | 最后检查: ${lastCheck}</span>
|
|
</div>
|
|
<span class="status-badge ${badgeClass}">${badgeText}</span>
|
|
</div>
|
|
`;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
// 执行健康检查
|
|
async function runHealthCheck() {
|
|
log('执行 CDN 健康检查...');
|
|
|
|
if (!navigator.serviceWorker.controller) {
|
|
log('Service Worker 未激活', 'error');
|
|
return;
|
|
}
|
|
|
|
return new Promise((resolve) => {
|
|
const handler = (event) => {
|
|
if (
|
|
event.data &&
|
|
event.data.type === 'SW_CDN_HEALTH_CHECK_RESULT'
|
|
) {
|
|
navigator.serviceWorker.removeEventListener('message', handler);
|
|
|
|
const results = event.data.results;
|
|
Object.entries(results).forEach(([name, healthy]) => {
|
|
log(
|
|
`${name}: ${healthy ? '✓ 可用' : '✗ 不可用'}`,
|
|
healthy ? 'success' : 'error'
|
|
);
|
|
});
|
|
|
|
refreshStatus();
|
|
resolve(results);
|
|
}
|
|
};
|
|
|
|
navigator.serviceWorker.addEventListener('message', handler);
|
|
navigator.serviceWorker.controller.postMessage({
|
|
type: 'SW_CDN_HEALTH_CHECK',
|
|
});
|
|
|
|
setTimeout(() => {
|
|
navigator.serviceWorker.removeEventListener('message', handler);
|
|
log('健康检查超时', 'error');
|
|
resolve(null);
|
|
}, 15000);
|
|
});
|
|
}
|
|
|
|
// 重置状态
|
|
async function resetStatus() {
|
|
log('重置 CDN 状态...');
|
|
|
|
if (!navigator.serviceWorker.controller) {
|
|
log('Service Worker 未激活', 'error');
|
|
return;
|
|
}
|
|
|
|
navigator.serviceWorker.controller.postMessage({
|
|
type: 'SW_CDN_RESET_STATUS',
|
|
});
|
|
log('CDN 状态已重置', 'success');
|
|
|
|
setTimeout(refreshStatus, 500);
|
|
}
|
|
|
|
// 显示 CDN 偏好
|
|
function showPreference() {
|
|
const container = document.getElementById('cdn-preference');
|
|
const pref = window.__AITU_CDN__;
|
|
|
|
if (!pref) {
|
|
container.innerHTML =
|
|
'<div class="status-item"><span>未设置偏好</span></div>';
|
|
return;
|
|
}
|
|
|
|
const results = pref.allResults || [];
|
|
container.innerHTML = results
|
|
.map(
|
|
(r) => `
|
|
<div class="status-item">
|
|
<div>
|
|
<span class="status-name">${r.name}</span>
|
|
<span class="latency">${
|
|
r.success ? r.latency + 'ms' : '不可用'
|
|
}</span>
|
|
</div>
|
|
<span class="status-badge ${
|
|
r.name === pref.cdn ? 'healthy' : 'unknown'
|
|
}">
|
|
${r.name === pref.cdn ? '已选择' : ''}
|
|
</span>
|
|
</div>
|
|
`
|
|
)
|
|
.join('');
|
|
|
|
if (results.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="status-item">
|
|
<span class="status-name">当前选择: ${pref.cdn}</span>
|
|
<span class="latency">${pref.latency}ms</span>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 重新选择 CDN
|
|
async function reselectCDN() {
|
|
log('重新选择最佳 CDN...');
|
|
|
|
if (window.__AITU_CDN_API__) {
|
|
const result = await window.__AITU_CDN_API__.reselectCDN();
|
|
log(`已选择: ${result.cdn} (${result.latency}ms)`, 'success');
|
|
showPreference();
|
|
} else {
|
|
log('CDN API 未加载', 'error');
|
|
}
|
|
}
|
|
|
|
// 清除偏好
|
|
function clearPreference() {
|
|
if (window.__AITU_CDN_API__) {
|
|
window.__AITU_CDN_API__.clearCDNCache();
|
|
log('CDN 偏好已清除', 'success');
|
|
showPreference();
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
window.addEventListener('load', () => {
|
|
log('页面加载完成');
|
|
|
|
// 等待 SW 注册
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.ready.then(() => {
|
|
log('Service Worker 已就绪', 'success');
|
|
refreshStatus();
|
|
});
|
|
}
|
|
|
|
// 显示偏好
|
|
setTimeout(showPreference, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|