jianf/ModelRouter
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/ModelRouter.git synced 2026-09-20 08:57:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): cache the status page so switching back to home no longer rebuilds the whole dashboard

Browse Source 
renderStatus() re-injected the entire status tab (#tab-status.innerHTML) + all charts + tables on every visit, so each tab switch back to home stuttered. Now the page is built once (pane.dataset.built) and revisits only reload live data via paintStats() + restart the 3s poll. Static parts (source table, model chips, connection box) are not rebuilt. Deployed (bak .bak.20260811y), server active.
This commit is contained in:
root
2026-08-11 18:44:12 +08:00
parent 788e5a3d0d
commit 32303e4238
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
internal/gateway/ui/index.html
View File

@ -691,13 +691,22 @@ async function renderStatus() {
const s = await api('/api/status'); const s = await api('/api/status');
const base = window._base = s.base_url || location.origin + '/v1'; const base = window._base = s.base_url || location.origin + '/v1';
const key = window._key = (s.gateway_keys && s.gateway_keys[0]) || ''; const key = window._key = (s.gateway_keys && s.gateway_keys[0]) || '';
// If the status page is already built, don't rebuild the whole DOM (tab
// switches would stutter); just refresh the live data via paintStats.
const pane = $('#tab-status');
if (pane && pane.dataset.built) {
if (statsTimerId) clearInterval(statsTimerId);
await paintStats();
statsTimerId = setInterval(paintStats, 3000);
return;
}
const srcRows = s.sources ? s.sources.map(x => const srcRows = s.sources ? s.sources.map(x =>
`<tr><td>${x.live_available ? `<span class="tag tag-green"><i class="net-dot"></i>${t('online')}</span>` : `<span class="tag tag-red" title="${esc(x.last_error || '')}"><i class="net-dot"></i>${t('offline')}</span>`}</td> `<tr><td>${x.live_available ? `<span class="tag tag-green"><i class="net-dot"></i>${t('online')}</span>` : `<span class="tag tag-red" title="${esc(x.last_error || '')}"><i class="net-dot"></i>${t('offline')}</span>`}</td>
<td><b>${esc(x.name)}</b></td><td>${esc(x.adapter)}</td> <td><b>${esc(x.name)}</b></td><td>${esc(x.adapter)}</td>
<td><div class="src-models">${x.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig('${escAttr(x.name)}','${escAttr(m)}')">${esc(m)}</span>`).join('')}</div></td> <td><div class="src-models">${x.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig('${escAttr(x.name)}','${escAttr(m)}')">${esc(m)}</span>`).join('')}</div></td>
<td><span class="muted">${esc(x.base_url || '')}</span></td> <td><span class="muted">${esc(x.base_url || '')}</span></td>
<td>${x.max_concurrent}</td></tr>`).join('') : ''; <td>${x.max_concurrent}</td></tr>`).join('') : '';
$('#tab-status').innerHTML = ` pane.innerHTML = `
<div class="kpis" id="kpi-row"><div class="kpi-skeletons" aria-hidden="true">${Array(5).fill('').map(() => ` <div class="kpis" id="kpi-row"><div class="kpi-skeletons" aria-hidden="true">${Array(5).fill('').map(() => `
<div class="ksk"><i></i><i></i><i></i></div>`).join('')}</div></div> <div class="ksk"><i></i><i></i><i></i></div>`).join('')}</div></div>
<div class="card"><h2>${t('connTitle')}</h2> <div class="card"><h2>${t('connTitle')}</h2>
@ -727,6 +736,7 @@ async function renderStatus() {
<div class="tbl-wrap"><table><tr><th>${t('tName')}</th><th>${t('tVersion')}</th></tr> <div class="tbl-wrap"><table><tr><th>${t('tName')}</th><th>${t('tVersion')}</th></tr>
${s.adapters.map(a => `<tr><td>${esc(a.name)}</td><td>${esc(a.version || '')}</td></tr>`).join('')}</table></div> ${s.adapters.map(a => `<tr><td>${esc(a.name)}</td><td>${esc(a.version || '')}</td></tr>`).join('')}</table></div>
</div>` : ''}`; </div>` : ''}`;
pane.dataset.built = '1';
$('#conncfg').textContent = ''; $('#conncfg').textContent = '';
showModelConfig(null, ''); showModelConfig(null, '');
$('#model-chips').innerHTML = s.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig(null,'${escAttr(m)}')">${esc(m)}</span>`).join(''); $('#model-chips').innerHTML = s.models.map(m => `<span class="tag tag-blue modelchip" onclick="showModelConfig(null,'${escAttr(m)}')">${esc(m)}</span>`).join('');