mirror of
https://gitcode.com/JianFeeeee/ModelRouter.git
synced 2026-09-20 00:48:00 +00:00
feat(webui): scratch-style drag sorting of model priority per source
This commit is contained in:
root
@ -157,6 +157,31 @@ html[data-theme="dark"] .dropzone.dragover, html[data-theme="dark"] .dropzone:ho
|
||||
justify-content:center; overflow:auto; padding:48px 20px; z-index:50; }
|
||||
.twrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
||||
|
||||
/* ---------- scratch-style priority sorting ---------- */
|
||||
.sort-canvas { display:flex; flex-direction:column; gap:26px; }
|
||||
.sort-col { display:flex; flex-direction:column; gap:3px; }
|
||||
.sort-group { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
|
||||
box-shadow:var(--shadow); }
|
||||
.sort-group > h3 { margin:0 0 12px; font-size:13px; color:var(--muted); font-weight:600;
|
||||
display:flex; align-items:center; gap:8px; }
|
||||
.sort-group > h3 .grow { flex:1; }
|
||||
.sort-chip { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; cursor:grab;
|
||||
color:#fff; font-weight:600; font-size:13.5px; box-shadow:0 3px 0 rgba(0,0,0,.14);
|
||||
position:relative; user-select:none; transition:transform .12s,box-shadow .12s,opacity .15s; touch-action:none; }
|
||||
.sort-chip::before { content:''; position:absolute; left:0; top:0; bottom:0; width:10px; border-radius:9px 0 0 9px;
|
||||
background:rgba(0,0,0,.22); }
|
||||
.sort-chip.dragging { opacity:.55; transform:scale(1.02); }
|
||||
.sort-chip .grip { font-size:15px; opacity:.75; }
|
||||
.sort-chip .mid { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.sort-chip .src { font-size:11px; opacity:.85; font-weight:500; padding:2px 9px; border-radius:20px;
|
||||
background:rgba(255,255,255,.18); }
|
||||
.sort-chip .prio { font-size:11px; opacity:.95; font-weight:500; background:rgba(0,0,0,.18);
|
||||
padding:2px 9px; border-radius:20px; white-space:nowrap; }
|
||||
.sort-dropline { height:8px; border-radius:6px; margin:0; background:var(--accent); opacity:.8; }
|
||||
.chip-shell { display:flex; flex-direction:column; }
|
||||
.sortbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
|
||||
.sortbar .grow { flex:1; }
|
||||
|
||||
/* ---------- responsive / narrow screens ---------- */
|
||||
@media (max-width: 900px) {
|
||||
header { padding:12px 16px; }
|
||||
@ -217,12 +242,14 @@ html[data-theme="dark"] .dropzone.dragover, html[data-theme="dark"] .dropzone:ho
|
||||
<nav>
|
||||
<button data-tab="status" class="active" data-i="navStatus">状态</button>
|
||||
<button data-tab="chat" data-i="navChat">Chat 测试</button>
|
||||
<button data-tab="sort" data-i="navSort">优先级</button>
|
||||
<button data-tab="sources" data-i="navSources">源</button>
|
||||
<button data-tab="adapters" data-i="navAdapters">适配器</button>
|
||||
</nav>
|
||||
<main>
|
||||
<div id="tab-status"></div>
|
||||
<div id="tab-chat" class="hidden"></div>
|
||||
<div id="tab-sort" class="hidden"></div>
|
||||
<div id="tab-sources" class="hidden"></div>
|
||||
<div id="tab-adapters" class="hidden"></div>
|
||||
</main>
|
||||
@ -232,7 +259,7 @@ html[data-theme="dark"] .dropzone.dragover, html[data-theme="dark"] .dropzone:ho
|
||||
const STR = {
|
||||
zh: {
|
||||
tagline:'统一 LLM 网关', logout:'退出登录', langTo:'EN',
|
||||
navStatus:'状态', navChat:'Chat 测试', navSources:'源', navAdapters:'适配器',
|
||||
navStatus:'状态', navChat:'Chat 测试', navSources:'源', navAdapters:'适配器', navSort:'优先级',
|
||||
connTitle:'连接配置（Agent / OpenAI SDK）', connHint:'模型名默认 AUTO，按优先级自动选择可用源；点击任一模型可生成固定到该模型的配置。',
|
||||
copyCfg:'一键复制配置', copyEnv:'复制为环境变量',
|
||||
srcTitle:'源状态', srcCount:'共 %d 个',
|
||||
@ -258,10 +285,13 @@ const STR = {
|
||||
toastDelOk:'已删除', confirmDelSrc:'确定删除源 %s 吗？', confirmDelAdp:'确定删除适配器 %s 吗？',
|
||||
u:'用户', a:'助手', at:'助手[思考]', aEmpty:'(空回复)', aErr:'请求失败: %s', cErr:'错误: %s',
|
||||
chatMeta:'模型=%s · 耗时 %s ms · %d 字符', connPinned:'# 固定到模型: %s (源 %s)', connAuto:'# 模型名 AUTO（自动选择可用源）',
|
||||
sortTitle:'拖拽排序：调整源下各模型的优先级', sortHint:'从高（上）到低（下）拖动各源下的模型方块，松手后自动重算 priority。数值越大 AUTO 越优先使用。',
|
||||
sortSave:'保存排序', sortReset:'重置', sortSaved:'排序已保存并热重载',
|
||||
sortSource:'源', sortPrio:'优先级 %s', sortEmpty:'（该源暂无模型）',
|
||||
},
|
||||
en: {
|
||||
tagline:'Unified LLM Gateway', logout:'Log out', langTo:'中',
|
||||
navStatus:'Status', navChat:'Chat', navSources:'Sources', navAdapters:'Adapters',
|
||||
navStatus:'Status', navChat:'Chat', navSources:'Sources', navAdapters:'Adapters', navSort:'Priority',
|
||||
connTitle:'Connection config (Agent / OpenAI SDK)', connHint:'Model defaults to AUTO — picks the best healthy source by priority. Click a model to pin it.',
|
||||
copyCfg:'Copy config', copyEnv:'Copy as env vars',
|
||||
srcTitle:'Sources', srcCount:'%d total',
|
||||
@ -287,6 +317,9 @@ const STR = {
|
||||
toastDelOk:'Deleted', confirmDelSrc:'Delete source %s?', confirmDelAdp:'Delete adapter %s?',
|
||||
u:'You:', a:'Assistant:', at:'Assistant [thinking]', aEmpty:'(empty)', aErr:'Request failed: %s',
|
||||
cErr:'Error: %s', chatMeta:'Model=%s · %s ms · %d chars', connPinned:'# Pinned to model: %s (source %s)', connAuto:'# Model "AUTO" picks healthy source by priority',
|
||||
sortTitle:'Drag to reorder: priority of each source’s models', sortHint:'Drag model blocks from high (top) to low (bottom); priority is recomputed on drop. Larger values are preferred by AUTO.',
|
||||
sortSave:'Save order', sortReset:'Reset', sortSaved:'Order saved & hot-reloaded',
|
||||
sortSource:'source', sortPrio:'priority %s', sortEmpty:'(no models in this source)',
|
||||
}
|
||||
};
|
||||
let LANG = localStorage.getItem('llms-proxy.lang') || ((navigator.language || '').toLowerCase().startsWith('zh') ? 'zh' : 'en');
|
||||
@ -322,7 +355,7 @@ document.getElementById('btn-logout').onclick = () => { location.href = '/api/lo
|
||||
document.querySelectorAll('nav button').forEach(b => {
|
||||
b.onclick = () => {
|
||||
document.querySelectorAll('nav button').forEach(x => x.classList.toggle('active', x === b));
|
||||
['status','chat','sources','adapters'].forEach(tn => $('#tab-' + tn).classList.toggle('hidden', tn !== b.dataset.tab));
|
||||
['status','chat','sort','sources','adapters'].forEach(tn => $('#tab-' + tn).classList.toggle('hidden', tn !== b.dataset.tab));
|
||||
lastTab = b.dataset.tab; refresh(lastTab);
|
||||
};
|
||||
});
|
||||
@ -722,6 +755,180 @@ async function delSource(name) {
|
||||
toast(t('toastDelOk')); renderSources();
|
||||
}
|
||||
|
||||
/* ---------- sort tab (scratch-style drag priority) ---------- */
|
||||
const SORT_COLORS = [
|
||||
['#5b8def', '#3f6ef5'], ['#37b273', '#1f9d5a'], ['#f2a541', '#e08a15'],
|
||||
['#a466e8', '#8b4dd4'], ['#e86f9c', '#d74f86'], ['#45c4c0', '#2aa8a4'],
|
||||
['#e8564a', '#d03f34'], ['#8ba3c7', '#6f8ab3'],
|
||||
];
|
||||
const sortState = { cols: [], origin: null, drag: null };
|
||||
async function renderSort() {
|
||||
const j = await api('/api/sources');
|
||||
sortState.cols = j.sources.map((s, i) => ({
|
||||
name: s.name, colors: SORT_COLORS[i % SORT_COLORS.length],
|
||||
models: s.models.map(m => ({ id: m.id, priority: m.priority || 0 })),
|
||||
}));
|
||||
sortState.origin = JSON.stringify(sortState.cols);
|
||||
paintSort();
|
||||
}
|
||||
function paintSort() {
|
||||
const groups = sortState.cols.map((c, ci) => `
|
||||
<div class="sort-group">
|
||||
<h3><span style="width:10px;height:10px;border-radius:3px;background:${c.colors[0]}"></span>
|
||||
<span>${esc(c.name)}</span><span class="muted" style="font-weight:400">${t('sortSource')}</span>
|
||||
<span class="grow"></span></h3>
|
||||
<div class="sort-col" data-col="${ci}">
|
||||
${c.models.length ? c.models.map((m, mi) => sortShell(ci, mi, m)).join('')
|
||||
: `<div class="empty">${t('sortEmpty')}</div>`}
|
||||
</div>
|
||||
</div>`).join('');
|
||||
$('#tab-sort').innerHTML = `
|
||||
<div class="card">
|
||||
<h2><span>${t('sortTitle')}</span><span class="grow"></span>
|
||||
<button class="ghost small" onclick="sortReset()">${t('sortReset')}</button>
|
||||
<button class="small" onclick="saveSort()">${t('sortSave')}</button></h2>
|
||||
<div class="muted" style="margin-bottom:16px">${t('sortHint')}</div>
|
||||
<div class="sort-canvas">${groups}</div>
|
||||
</div>`;
|
||||
bindSortDrag();
|
||||
}
|
||||
function sortShell(ci, mi, m) {
|
||||
const c = sortState.cols[ci];
|
||||
return `<div class="chip-shell" data-col="${ci}" data-id="${escAttr(m.id)}">
|
||||
${mi === 0 ? '' : '<div class="sort-dropline hidden"></div>'}
|
||||
<div class="sort-chip" draggable="true" data-col="${ci}" data-id="${escAttr(m.id)}"
|
||||
style="background:linear-gradient(135deg,${c.colors[0]},${c.colors[1]})">
|
||||
<span class="grip">⋮⋮</span>
|
||||
<span class="mid">${esc(m.id)}</span>
|
||||
<span class="src">${esc(c.name)}</span>
|
||||
<span class="prio">${tFmt('sortPrio', m.priority)}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
function bindSortDrag() {
|
||||
document.querySelectorAll('.sort-chip').forEach(chip => {
|
||||
chip.addEventListener('dragstart', e => {
|
||||
sortState.drag = { col: +chip.dataset.col, id: chip.dataset.id };
|
||||
chip.classList.add('dragging');
|
||||
if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); }
|
||||
});
|
||||
chip.addEventListener('dragend', () => { sortDragCleanup(); });
|
||||
chip.addEventListener('touchstart', e => {
|
||||
sortState.drag = { col: +chip.dataset.col, id: chip.dataset.id };
|
||||
chip.classList.add('dragging');
|
||||
}, { passive: true });
|
||||
chip.addEventListener('touchmove', e => {
|
||||
if (!sortState.drag) return;
|
||||
e.preventDefault();
|
||||
const t = e.touches[0];
|
||||
const el = document.elementFromPoint(t.clientX, t.clientY);
|
||||
if (el && el.classList && el.classList.contains('sort-chip')) {
|
||||
showDropLine(+el.dataset.col, el.dataset.id, t.clientY, el);
|
||||
}
|
||||
}, { passive: false });
|
||||
chip.addEventListener('touchend', () => {
|
||||
const d = sortState.drag;
|
||||
if (d) {
|
||||
const tgt = document.querySelector('#tab-sort .sort-dropline:not(.hidden)');
|
||||
if (tgt) {
|
||||
const tcol = +tgt.closest('[data-col]').dataset.col;
|
||||
const before = tgt.dataset.before === '1';
|
||||
sortDrop(tcol, before ? tgt.dataset.nextId : tgt.dataset.id, before);
|
||||
}
|
||||
}
|
||||
sortDragCleanup();
|
||||
}, { passive: true });
|
||||
});
|
||||
document.querySelectorAll('.sort-col').forEach(col => {
|
||||
col.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
const t = e.clientY;
|
||||
const chips = [...col.querySelectorAll('.sort-chip')];
|
||||
const under = chips.filter(c => { const r = c.getBoundingClientRect(); return t < r.bottom; })
|
||||
.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)[0];
|
||||
if (under) showDropLine(+col.dataset.col, under.dataset.id, t, under);
|
||||
});
|
||||
col.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
const dl = col.querySelector('.sort-dropline:not(.hidden)');
|
||||
if (dl) sortDrop(+col.dataset.col, dl.dataset.before === '1' ? dl.dataset.nextId : dl.dataset.id, dl.dataset.before === '1');
|
||||
else sortDrop(+col.dataset.col, null, true);
|
||||
sortDragCleanup();
|
||||
});
|
||||
});
|
||||
}
|
||||
function showDropLine(ci, id, y, refChip) {
|
||||
const shells = [...document.querySelectorAll(`#tab-sort .chip-shell[data-col="${ci}"]`)];
|
||||
const r = refChip.getBoundingClientRect();
|
||||
const before = y < r.top + r.height / 2;
|
||||
const idx = shells.findIndex(s => s.dataset.id === id);
|
||||
const target = shells[idx + (before ? 0 : 1)];
|
||||
document.querySelectorAll('#tab-sort .sort-dropline:not(.hidden)').forEach(l => l.classList.add('hidden'));
|
||||
if (!target) return;
|
||||
const line = target.querySelector('.sort-dropline');
|
||||
if (!line) return;
|
||||
line.dataset.before = before ? '1' : '0';
|
||||
line.dataset.nextId = target.dataset.id;
|
||||
line.classList.remove('hidden');
|
||||
}
|
||||
function sortDrop(tci, tid, before) {
|
||||
if (!sortState.drag) return;
|
||||
const dci = sortState.drag.col, did = sortState.drag.id;
|
||||
const dCol = sortState.cols[dci], tCol = sortState.cols[tci];
|
||||
const dIdx = dCol.models.findIndex(m => m.id === did);
|
||||
if (dIdx < 0) return;
|
||||
const [mdl] = dCol.models.splice(dIdx, 1);
|
||||
let insertAt = tCol.models.length;
|
||||
if (tid !== null) {
|
||||
const tIdx = tCol.models.findIndex(m => m.id === tid);
|
||||
if (tIdx >= 0) {
|
||||
// 同列且目标原本在被拖着下方时，移除后目标会前移一位
|
||||
let pos = tIdx;
|
||||
if (tci === dci && dIdx < tIdx) pos -= 1;
|
||||
insertAt = before ? pos : pos + 1;
|
||||
}
|
||||
}
|
||||
insertAt = Math.max(0, Math.min(insertAt, tCol.models.length));
|
||||
tCol.models.splice(insertAt, 0, mdl);
|
||||
recomputePriorities();
|
||||
paintSort();
|
||||
}
|
||||
function recomputePriorities() {
|
||||
let rank = 0;
|
||||
sortState.cols.forEach(c => c.models.forEach(m => { m.priority = Math.max(100 - rank * 5, 5); rank++; }));
|
||||
}
|
||||
function sortDragCleanup() {
|
||||
sortState.drag = null;
|
||||
document.querySelectorAll('#tab-sort .sort-dropline').forEach(l => l.classList.add('hidden'));
|
||||
document.querySelectorAll('#tab-sort .sort-chip.dragging').forEach(c => c.classList.remove('dragging'));
|
||||
}
|
||||
function sortReset() {
|
||||
if (sortState.origin) sortState.cols = JSON.parse(sortState.origin);
|
||||
sortDragCleanup();
|
||||
paintSort();
|
||||
}
|
||||
async function saveSort() {
|
||||
const snap = await api('/api/sources');
|
||||
const byName = {}; snap.sources.forEach(s => byName[s.name] = s);
|
||||
let dirty = 0;
|
||||
for (const c of sortState.cols) {
|
||||
const base = byName[c.name];
|
||||
if (!base) continue;
|
||||
const next = c.models.map(m => {
|
||||
const old = (base.models || []).find(x => x.id === m.id) || { kind: 'chat' };
|
||||
return { id: m.id, priority: m.priority, kind: old.kind || 'chat' };
|
||||
});
|
||||
if (JSON.stringify(next) !== JSON.stringify(base.models)) {
|
||||
base.models = next;
|
||||
await api('/api/sources', { method: 'POST', body: JSON.stringify(base) });
|
||||
dirty++;
|
||||
}
|
||||
}
|
||||
toast(t('sortSaved'));
|
||||
sortState.origin = JSON.stringify(sortState.cols);
|
||||
renderSort();
|
||||
}
|
||||
|
||||
/* ---------- adapters tab ---------- */
|
||||
async function renderAdapters() {
|
||||
const j = await api('/api/status');
|
||||
@ -783,6 +990,7 @@ async function delAdapter(name) {
|
||||
function refresh(tab) {
|
||||
if (tab === 'status') return renderStatus();
|
||||
if (tab === 'chat') return renderChat();
|
||||
if (tab === 'sort') return renderSort();
|
||||
if (tab === 'sources') return renderSources();
|
||||
return renderAdapters();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user