CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

使用Claude优化动画

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-06 02:40:28 +08:00
parent 225ec71ac3
commit 96de50285f
1 changed files with 336 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

618
public/js/app.js
View File

@@ -172,7 +172,7 @@
} }
if (dom.btnCancelEditRoute) { if (dom.btnCancelEditRoute) {
dom.btnCancelEditRoute.onclick = cancelEditRoute; dom.btnCancelEditRoute.onclick = cancelEditRoute;
} }
dom.settingsModal.addEventListener('click', (e) => { dom.settingsModal.addEventListener('click', (e) => {
@@ -251,7 +251,7 @@
offset: 1 offset: 1
} }
], { ], {
duration: 400, duration: 600,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)', easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
fill: 'none' fill: 'none'
}); });
@@ -305,7 +305,7 @@
offset: 1 offset: 1
} }
], { ], {
duration: 350, duration: 500,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)', easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
fill: 'forwards' // Hold final frame until we remove class fill: 'forwards' // Hold final frame until we remove class
}); });
@@ -674,72 +674,72 @@
if (!dom.globeContainer) return; if (!dom.globeContainer) return;
if (typeof echarts === 'undefined') { if (typeof echarts === 'undefined') {
console.warn('[Map2D] ECharts library not loaded.'); console.warn('[Map2D] ECharts library not loaded.');
dom.globeContainer.innerHTML = `<div class="chart-empty">地图库加载失败</div>`; dom.globeContainer.innerHTML = `<div class="chart-empty">地图库加载失败</div>`;
return; return;
} }
try { try {
// Fetch map data // Fetch map data
const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json'); const resp = await fetch('https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json');
const worldJSON = await resp.json(); const worldJSON = await resp.json();
// Transform to Pacific-centered correctly // Transform to Pacific-centered correctly
const transformCoords = (coords) => { const transformCoords = (coords) => {
if (!Array.isArray(coords) || coords.length === 0) return; if (!Array.isArray(coords) || coords.length === 0) return;
const first = coords[0]; const first = coords[0];
if (!Array.isArray(first)) return; if (!Array.isArray(first)) return;
if (typeof first[0] === 'number') { // Ring if (typeof first[0] === 'number') { // Ring
let sum = 0; let sum = 0;
coords.forEach(pt => sum += pt[0]); coords.forEach(pt => sum += pt[0]);
let avg = sum / coords.length; let avg = sum / coords.length;
if (avg < -20) { if (avg < -20) {
coords.forEach(pt => pt[0] += 360); coords.forEach(pt => pt[0] += 360);
} }
} else { } else {
coords.forEach(transformCoords); coords.forEach(transformCoords);
}
};
if (worldJSON && worldJSON.features) {
worldJSON.features.forEach(feature => {
if (feature.geometry && feature.geometry.coordinates) {
transformCoords(feature.geometry.coordinates);
}
});
} }
};
echarts.registerMap('world', worldJSON); if (worldJSON && worldJSON.features) {
worldJSON.features.forEach(feature => {
if (feature.geometry && feature.geometry.coordinates) {
transformCoords(feature.geometry.coordinates);
}
});
}
if (myMap2D) { echarts.registerMap('world', worldJSON);
myMap2D.dispose();
if (mapResizeHandler) { if (myMap2D) {
window.removeEventListener('resize', mapResizeHandler); myMap2D.dispose();
} if (mapResizeHandler) {
window.removeEventListener('resize', mapResizeHandler);
} }
}
myMap2D = echarts.init(dom.globeContainer); myMap2D = echarts.init(dom.globeContainer);
const isLight = document.documentElement.classList.contains('light-theme'); const isLight = document.documentElement.classList.contains('light-theme');
// Helper to transform app coordinates to shifted map coordinates // Helper to transform app coordinates to shifted map coordinates
const shiftLng = (lng) => (lng < -20 ? lng + 360 : lng); const shiftLng = (lng) => (lng < -20 ? lng + 360 : lng);
const option = { const option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
show: true, show: true,
trigger: 'item', trigger: 'item',
confine: true, confine: true,
transitionDuration: 0, transitionDuration: 0,
backgroundColor: 'rgba(10, 14, 26, 0.9)', backgroundColor: 'rgba(10, 14, 26, 0.9)',
borderColor: 'var(--accent-indigo)', borderColor: 'var(--accent-indigo)',
textStyle: { color: '#fff', fontSize: 12 }, textStyle: { color: '#fff', fontSize: 12 },
formatter: (params) => { formatter: (params) => {
const d = params.data; const d = params.data;
if (!d) return ''; if (!d) return '';
return ` return `
<div style="padding: 4px;"> <div style="padding: 4px;">
<div style="font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 4px; padding-bottom: 4px;">${escapeHtml(d.job)}</div> <div style="font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 4px; padding-bottom: 4px;">${escapeHtml(d.job)}</div>
<div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div> <div style="font-size: 0.75rem; color: var(--text-secondary);">${escapeHtml(d.city || '')}, ${escapeHtml(d.countryName || d.country || '')}</div>
@@ -748,53 +748,53 @@
</div> </div>
</div> </div>
`; `;
} }
}, },
geo: { geo: {
map: 'world', map: 'world',
roam: true, roam: true,
center: [165, 20], // Centered in Pacific center: [165, 20], // Centered in Pacific
zoom: 1.1, zoom: 1.1,
aspectScale: 0.85, aspectScale: 0.85,
emphasis: { emphasis: {
label: { show: false }, label: { show: false },
itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' } itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
}, },
itemStyle: { itemStyle: {
areaColor: isLight ? '#f4f6fa' : '#1a1d2e', areaColor: isLight ? '#f4f6fa' : '#1a1d2e',
borderColor: isLight ? '#cbd5e1' : '#2d334d', borderColor: isLight ? '#cbd5e1' : '#2d334d',
borderWidth: 1 borderWidth: 1
}, },
select: { select: {
itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' } itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' }
} }
}, },
series: [{ series: [{
type: 'scatter', type: 'scatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
geoIndex: 0, geoIndex: 0,
symbolSize: 5, symbolSize: 5,
itemStyle: { itemStyle: {
color: '#06b6d4', color: '#06b6d4',
shadowBlur: 3, shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)' shadowColor: 'rgba(6, 182, 212, 0.5)'
}, },
data: [] data: []
}] }]
}; };
myMap2D.setOption(option); myMap2D.setOption(option);
mapResizeHandler = debounce(() => { mapResizeHandler = debounce(() => {
if (myMap2D) myMap2D.resize(); if (myMap2D) myMap2D.resize();
}, 100); }, 100);
window.addEventListener('resize', mapResizeHandler); window.addEventListener('resize', mapResizeHandler);
if (allServersData.length > 0) { if (allServersData.length > 0) {
updateMap2D(allServersData); updateMap2D(allServersData);
} }
} catch (err) { } catch (err) {
console.error('[Map2D] Initialization failed:', err); console.error('[Map2D] Initialization failed:', err);
} }
} }
@@ -802,15 +802,15 @@
if (!myMap2D) return; if (!myMap2D) return;
const isLight = theme === 'light'; const isLight = theme === 'light';
myMap2D.setOption({ myMap2D.setOption({
geo: { geo: {
itemStyle: { itemStyle: {
areaColor: isLight ? '#f4f6fa' : '#1a1d2e', areaColor: isLight ? '#f4f6fa' : '#1a1d2e',
borderColor: isLight ? '#cbd5e1' : '#2d334d' borderColor: isLight ? '#cbd5e1' : '#2d334d'
}, },
emphasis: { emphasis: {
itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' } itemStyle: { areaColor: isLight ? '#f4f8ff' : '#2d334d' }
}
} }
}
}); });
} }
function updateMap2D(servers) { function updateMap2D(servers) {
@@ -820,175 +820,175 @@
const shiftLng = (lng) => (lng < -20 ? lng + 360 : lng); const shiftLng = (lng) => (lng < -20 ? lng + 360 : lng);
const geoData = servers const geoData = servers
.filter(s => s.lat && s.lng) .filter(s => s.lat && s.lng)
.map(s => ({ .map(s => ({
name: s.job, name: s.job,
value: [shiftLng(s.lng), s.lat], value: [shiftLng(s.lng), s.lat],
job: s.job, job: s.job,
city: s.city, city: s.city,
country: s.country, country: s.country,
countryName: s.countryName, countryName: s.countryName,
netRx: s.netRx, netRx: s.netRx,
netTx: s.netTx netTx: s.netTx
})); }));
// Combine all series // Combine all series
const finalSeries = [ const finalSeries = [
{ {
type: 'scatter', type: 'scatter',
coordinateSystem: 'geo', coordinateSystem: 'geo',
geoIndex: 0, geoIndex: 0,
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
color: '#06b6d4', color: '#06b6d4',
shadowBlur: 3, shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)' shadowColor: 'rgba(6, 182, 212, 0.5)'
}, },
data: geoData, data: geoData,
zlevel: 1 zlevel: 1
} }
]; ];
// Add latency routes if configured // Add latency routes if configured
if (currentLatencies && currentLatencies.length > 0) { if (currentLatencies && currentLatencies.length > 0) {
const countryCoords = { const countryCoords = {
'china': [116.4074, 39.9042], 'china': [116.4074, 39.9042],
'beijing': [116.4074, 39.9042], 'beijing': [116.4074, 39.9042],
'shanghai': [121.4737, 31.2304], 'shanghai': [121.4737, 31.2304],
'hong kong': [114.1694, 22.3193], 'hong kong': [114.1694, 22.3193],
'taiwan': [120.9605, 23.6978], 'taiwan': [120.9605, 23.6978],
'united states': [-95.7129, 37.0902], 'united states': [-95.7129, 37.0902],
'us seattle': [-122.3321, 47.6062], 'us seattle': [-122.3321, 47.6062],
'seattle': [-122.3321, 47.6062], 'seattle': [-122.3321, 47.6062],
'us chicago': [-87.6298, 41.8781], 'us chicago': [-87.6298, 41.8781],
'chicago': [-87.6298, 41.8781], 'chicago': [-87.6298, 41.8781],
'news york': [-74.0060, 40.7128], 'news york': [-74.0060, 40.7128],
'new york corp': [-74.0060, 40.7128], 'new york corp': [-74.0060, 40.7128],
'new york': [-74.0060, 40.7128], 'new york': [-74.0060, 40.7128],
'san francisco': [-122.4194, 37.7749], 'san francisco': [-122.4194, 37.7749],
'los angeles': [-118.2437, 34.0522], 'los angeles': [-118.2437, 34.0522],
'japan': [138.2529, 36.2048], 'japan': [138.2529, 36.2048],
'tokyo': [139.6917, 35.6895], 'tokyo': [139.6917, 35.6895],
'singapore': [103.8198, 1.3521], 'singapore': [103.8198, 1.3521],
'germany': [10.4515, 51.1657], 'germany': [10.4515, 51.1657],
'frankfurt': [8.6821, 50.1109], 'frankfurt': [8.6821, 50.1109],
'united kingdom': [-3.436, 55.3781], 'united kingdom': [-3.436, 55.3781],
'london': [-0.1276, 51.5074], 'london': [-0.1276, 51.5074],
'france': [2.2137, 46.2276], 'france': [2.2137, 46.2276],
'paris': [2.3522, 48.8566], 'paris': [2.3522, 48.8566],
'south korea': [127.7669, 35.9078], 'south korea': [127.7669, 35.9078],
'korea': [127.7669, 35.9078], 'korea': [127.7669, 35.9078],
'seoul': [126.9780, 37.5665] 'seoul': [126.9780, 37.5665]
}; };
const getCoords = (name) => { const getCoords = (name) => {
const lowerName = (name || '').toLowerCase().trim(); const lowerName = (name || '').toLowerCase().trim();
if (countryCoords[lowerName]) return countryCoords[lowerName]; if (countryCoords[lowerName]) return countryCoords[lowerName];
const s = servers.find(sv => const s = servers.find(sv =>
(sv.countryName || '').toLowerCase() === lowerName || (sv.countryName || '').toLowerCase() === lowerName ||
(sv.country || '').toLowerCase() === lowerName || (sv.country || '').toLowerCase() === lowerName ||
(sv.city || '').toLowerCase() === lowerName (sv.city || '').toLowerCase() === lowerName
); );
if (s && s.lng && s.lat) return [shiftLng(s.lng), s.lat]; if (s && s.lng && s.lat) return [shiftLng(s.lng), s.lat];
return null; return null;
}; };
const getShiftedCoords = (name) => { const getShiftedCoords = (name) => {
const c = countryCoords[(name || '').toLowerCase().trim()]; const c = countryCoords[(name || '').toLowerCase().trim()];
if (c) return [shiftLng(c[0]), c[1]]; if (c) return [shiftLng(c[0]), c[1]];
const raw = getCoords(name); const raw = getCoords(name);
if (raw) return [shiftLng(raw[0]), raw[1]]; if (raw) return [shiftLng(raw[0]), raw[1]];
return null; return null;
}; };
// Group latency routes by path to handle overlap visually // Group latency routes by path to handle overlap visually
const routeGroups = {}; const routeGroups = {};
currentLatencies.forEach(route => { currentLatencies.forEach(route => {
const start = getShiftedCoords(route.source); const start = getShiftedCoords(route.source);
const end = getShiftedCoords(route.dest); const end = getShiftedCoords(route.dest);
if (start && end) { if (start && end) {
// Canonical points for grouping (independent of direction) // Canonical points for grouping (independent of direction)
// Sort by longitude then latitude // Sort by longitude then latitude
const pts = [start, end].slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]); const pts = [start, end].slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]);
const key = `${pts[0][0].toFixed(4)},${pts[0][1].toFixed(4)}_${pts[1][0].toFixed(4)},${pts[1][1].toFixed(4)}`; const key = `${pts[0][0].toFixed(4)},${pts[0][1].toFixed(4)}_${pts[1][0].toFixed(4)},${pts[1][1].toFixed(4)}`;
if (!routeGroups[key]) routeGroups[key] = []; if (!routeGroups[key]) routeGroups[key] = [];
routeGroups[key].push({ route, start, end }); routeGroups[key].push({ route, start, end });
} }
}); });
Object.keys(routeGroups).forEach(key => { Object.keys(routeGroups).forEach(key => {
const routes = routeGroups[key]; const routes = routeGroups[key];
const count = routes.length; const count = routes.length;
routes.forEach((item, i) => { routes.forEach((item, i) => {
const { route, start, end } = item; const { route, start, end } = item;
// Identify if the route is in the "canonical" direction // Identify if the route is in the "canonical" direction
const pts = [start, end].slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]); const pts = [start, end].slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]);
const isForward = (start === pts[0]); const isForward = (start === pts[0]);
// Calculate curveness: ensure all lines are slightly curved // Calculate curveness: ensure all lines are slightly curved
let finalCurve = 0; let finalCurve = 0;
if (count === 1) { if (count === 1) {
finalCurve = 0.15; // Default slight curve for single lines finalCurve = 0.15; // Default slight curve for single lines
} else { } else {
// Spread overlapping lines: 0.15, -0.15, 0.3, -0.3... // Spread overlapping lines: 0.15, -0.15, 0.3, -0.3...
// This creates an "eye" or "fan" effect where no line is straight // This creates an "eye" or "fan" effect where no line is straight
const magnitude = 0.15 + Math.floor(i / 2) * 0.15; const magnitude = 0.15 + Math.floor(i / 2) * 0.15;
const spread = (i % 2 === 0) ? magnitude : -magnitude; const spread = (i % 2 === 0) ? magnitude : -magnitude;
// Adjust sign based on direction so they occupy unique visual slots // Adjust sign based on direction so they occupy unique visual slots
finalCurve = isForward ? spread : -spread; finalCurve = isForward ? spread : -spread;
} }
finalSeries.push({ finalSeries.push({
type: 'lines', type: 'lines',
coordinateSystem: 'geo', coordinateSystem: 'geo',
zlevel: 2, zlevel: 2,
latencyLine: true, latencyLine: true,
effect: { effect: {
show: true, show: true,
period: 4, period: 4,
trailLength: 0.1, trailLength: 0.1,
color: 'rgba(99, 102, 241, 0.8)', color: 'rgba(99, 102, 241, 0.8)',
symbol: 'arrow', symbol: 'arrow',
symbolSize: 6 symbolSize: 6
}, },
lineStyle: { lineStyle: {
color: 'rgba(99, 102, 241, 0.3)', color: 'rgba(99, 102, 241, 0.3)',
width: 2, width: 2,
curveness: finalCurve curveness: finalCurve
}, },
tooltip: { tooltip: {
formatter: () => { formatter: () => {
const latVal = (route.latency !== null && route.latency !== undefined) ? `${route.latency.toFixed(2)} ms` : '测量中...'; const latVal = (route.latency !== null && route.latency !== undefined) ? `${route.latency.toFixed(2)} ms` : '测量中...';
return ` return `
<div style="padding: 4px;"> <div style="padding: 4px;">
<div style="font-weight: 700;">${route.source} ↔ ${route.dest}</div> <div style="font-weight: 700;">${route.source} ↔ ${route.dest}</div>
<div style="font-size: 0.75rem; color: var(--accent-indigo); margin-top: 4px;">延时: ${latVal}</div> <div style="font-size: 0.75rem; color: var(--accent-indigo); margin-top: 4px;">延时: ${latVal}</div>
</div> </div>
`; `;
} }
}, },
data: [{ data: [{
fromName: route.source, fromName: route.source,
toName: route.dest, toName: route.dest,
coords: [start, end] coords: [start, end]
}] }]
}); });
});
}); });
});
} }
myMap2D.setOption({ myMap2D.setOption({
series: finalSeries series: finalSeries
}); });
// Update footer stats // Update footer stats
if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length; if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
if (dom.globeTotalRegions) { if (dom.globeTotalRegions) {
const regions = new Set(geoData.map(d => d.country)).size; const regions = new Set(geoData.map(d => d.country)).size;
dom.globeTotalRegions.textContent = regions; dom.globeTotalRegions.textContent = regions;
} }
} }
@@ -1282,9 +1282,9 @@
async function openServerDetail(instance, job, source) { async function openServerDetail(instance, job, source) {
// Cleanup old charts if any were still present from a previous open (safety) // Cleanup old charts if any were still present from a previous open (safety)
if (currentServerDetail.charts) { if (currentServerDetail.charts) {
Object.values(currentServerDetail.charts).forEach(chart => { Object.values(currentServerDetail.charts).forEach(chart => {
if (chart && chart.destroy) chart.destroy(); if (chart && chart.destroy) chart.destroy();
}); });
} }
currentServerDetail = { instance, job, source, charts: {} }; currentServerDetail = { instance, job, source, charts: {} };
@@ -1333,7 +1333,7 @@
// Disk Total // Disk Total
if (dom.detailDiskTotal) { if (dom.detailDiskTotal) {
dom.detailDiskTotal.textContent = formatBytes(data.totalDiskSize || 0); dom.detailDiskTotal.textContent = formatBytes(data.totalDiskSize || 0);
} }
// Define metrics to show // Define metrics to show
@@ -1416,21 +1416,21 @@
// Handle partitions integration: Move the expandable partition section UNDER the Disk Usage metric // Handle partitions integration: Move the expandable partition section UNDER the Disk Usage metric
if (data.partitions && data.partitions.length > 0) { if (data.partitions && data.partitions.length > 0) {
dom.detailPartitionsContainer.style.display = 'block'; dom.detailPartitionsContainer.style.display = 'block';
dom.partitionSummary.textContent = `${data.partitions.length} 个本地分区`; dom.partitionSummary.textContent = `${data.partitions.length} 个本地分区`;
// Find the disk metric item and insert the partition container after it // Find the disk metric item and insert the partition container after it
const diskMetricItem = document.getElementById('metric-rootFsUsedPct'); const diskMetricItem = document.getElementById('metric-rootFsUsedPct');
if (diskMetricItem) { if (diskMetricItem) {
diskMetricItem.after(dom.detailPartitionsContainer); diskMetricItem.after(dom.detailPartitionsContainer);
} }
dom.partitionHeader.onclick = (e) => { dom.partitionHeader.onclick = (e) => {
e.stopPropagation(); e.stopPropagation();
dom.detailPartitionsContainer.classList.toggle('active'); dom.detailPartitionsContainer.classList.toggle('active');
}; };
dom.detailPartitionsList.innerHTML = data.partitions.map(p => ` dom.detailPartitionsList.innerHTML = data.partitions.map(p => `
<div class="partition-row"> <div class="partition-row">
<div class="partition-info"> <div class="partition-info">
<span class="partition-mount">${escapeHtml(p.mountpoint)}</span> <span class="partition-mount">${escapeHtml(p.mountpoint)}</span>
@@ -1442,7 +1442,7 @@
</div> </div>
`).join(''); `).join('');
} else { } else {
dom.detailPartitionsContainer.style.display = 'none'; dom.detailPartitionsContainer.style.display = 'none';
} }
} }
@@ -1507,20 +1507,20 @@
const data = await res.json(); const data = await res.json();
if (metricKey === 'networkTrend' && data.stats) { if (metricKey === 'networkTrend' && data.stats) {
const stats = data.stats; const stats = data.stats;
const summaryDiv = document.getElementById(`summary-${metricKey}`); const summaryDiv = document.getElementById(`summary-${metricKey}`);
if (summaryDiv) { if (summaryDiv) {
summaryDiv.style.display = 'flex'; summaryDiv.style.display = 'flex';
const rxEl = document.getElementById(`stat-${metricKey}-rx`); const rxEl = document.getElementById(`stat-${metricKey}-rx`);
const txEl = document.getElementById(`stat-${metricKey}-tx`); const txEl = document.getElementById(`stat-${metricKey}-tx`);
const p95El = document.getElementById(`stat-${metricKey}-p95`); const p95El = document.getElementById(`stat-${metricKey}-p95`);
const totalEl = document.getElementById(`stat-${metricKey}-total`); const totalEl = document.getElementById(`stat-${metricKey}-total`);
if (rxEl) rxEl.textContent = formatBytes(stats.rxTotal); if (rxEl) rxEl.textContent = formatBytes(stats.rxTotal);
if (txEl) txEl.textContent = formatBytes(stats.txTotal); if (txEl) txEl.textContent = formatBytes(stats.txTotal);
if (p95El) p95El.textContent = formatBandwidth(stats.p95); if (p95El) p95El.textContent = formatBandwidth(stats.p95);
if (totalEl) totalEl.textContent = formatBytes(stats.total); if (totalEl) totalEl.textContent = formatBytes(stats.total);
} }
} }
chart.setData(data); chart.setData(data);
@@ -1639,7 +1639,7 @@
// Listen for system theme changes if set to auto (cleanup existing listener first) // Listen for system theme changes if set to auto (cleanup existing listener first)
if (siteThemeQuery && siteThemeHandler) { if (siteThemeQuery && siteThemeHandler) {
siteThemeQuery.removeEventListener('change', siteThemeHandler); siteThemeQuery.removeEventListener('change', siteThemeHandler);
} }
siteThemeQuery = window.matchMedia('(prefers-color-scheme: light)'); siteThemeQuery = window.matchMedia('(prefers-color-scheme: light)');
@@ -1690,17 +1690,17 @@
if (settings.show_95_bandwidth !== undefined || settings.p95_type !== undefined) { if (settings.show_95_bandwidth !== undefined || settings.p95_type !== undefined) {
if (networkChart) { if (networkChart) {
if (settings.show_95_bandwidth !== undefined) { if (settings.show_95_bandwidth !== undefined) {
networkChart.showP95 = !!settings.show_95_bandwidth; networkChart.showP95 = !!settings.show_95_bandwidth;
if (dom.legendP95) { if (dom.legendP95) {
dom.legendP95.classList.toggle('disabled', !networkChart.showP95); dom.legendP95.classList.toggle('disabled', !networkChart.showP95);
} }
} }
if (settings.p95_type !== undefined) { if (settings.p95_type !== undefined) {
networkChart.p95Type = settings.p95_type; networkChart.p95Type = settings.p95_type;
if (dom.p95LabelText) { if (dom.p95LabelText) {
const types = { tx: '上行', rx: '下行', both: '上行+下行' }; const types = { tx: '上行', rx: '下行', both: '上行+下行' };
dom.p95LabelText.textContent = types[settings.p95_type] || '上行'; dom.p95LabelText.textContent = types[settings.p95_type] || '上行';
} }
} }
networkChart.draw(); networkChart.draw();
} }
@@ -1785,30 +1785,30 @@
`).join(''); `).join('');
} }
window.editRoute = function(id, source_id, source, dest, target) { window.editRoute = function (id, source_id, source, dest, target) {
editingRouteId = id; editingRouteId = id;
dom.routeSourceSelect.value = source_id; dom.routeSourceSelect.value = source_id;
dom.routeSourceInput.value = source; dom.routeSourceInput.value = source;
dom.routeDestInput.value = dest; dom.routeDestInput.value = dest;
dom.routeTargetInput.value = target; dom.routeTargetInput.value = target;
dom.btnAddRoute.textContent = '保存修改'; dom.btnAddRoute.textContent = '保存修改';
dom.btnCancelEditRoute.style.display = 'block'; dom.btnCancelEditRoute.style.display = 'block';
// Select the tab just in case (though it's already there) // Select the tab just in case (though it's already there)
const tab = Array.from(dom.modalTabs).find(t => t.dataset.tab === 'routes'); const tab = Array.from(dom.modalTabs).find(t => t.dataset.tab === 'routes');
if (tab) tab.click(); if (tab) tab.click();
}; };
function cancelEditRoute() { function cancelEditRoute() {
editingRouteId = null; editingRouteId = null;
dom.routeSourceSelect.value = ""; dom.routeSourceSelect.value = "";
dom.routeSourceInput.value = ""; dom.routeSourceInput.value = "";
dom.routeDestInput.value = ""; dom.routeDestInput.value = "";
dom.routeTargetInput.value = ""; dom.routeTargetInput.value = "";
dom.btnAddRoute.textContent = '添加线路'; dom.btnAddRoute.textContent = '添加线路';
dom.btnCancelEditRoute.style.display = 'none'; dom.btnCancelEditRoute.style.display = 'none';
} }
async function addLatencyRoute() { async function addLatencyRoute() {
@@ -1853,7 +1853,7 @@
} }
} }
window.deleteLatencyRoute = async function(id) { window.deleteLatencyRoute = async function (id) {
if (!user) { if (!user) {
showSiteMessage('请登录后再操作', 'error'); showSiteMessage('请登录后再操作', 'error');
openLoginModal(); openLoginModal();
@@ -1973,10 +1973,10 @@
} }
if (dom.routeSourceSelect) { if (dom.routeSourceSelect) {
const currentVal = dom.routeSourceSelect.value; const currentVal = dom.routeSourceSelect.value;
dom.routeSourceSelect.innerHTML = '<option value="">-- 选择数据源 --</option>' + dom.routeSourceSelect.innerHTML = '<option value="">-- 选择数据源 --</option>' +
sources.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join(''); sources.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
dom.routeSourceSelect.value = currentVal; dom.routeSourceSelect.value = currentVal;
} }
} }