diff --git a/internal/gateway/ui/index.html b/internal/gateway/ui/index.html index 3b6a9fe..4aab48b 100644 --- a/internal/gateway/ui/index.html +++ b/internal/gateway/ui/index.html @@ -157,30 +157,53 @@ 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; } +/* ---------- scratch-style canvas & jigsaw blocks ---------- */ +.sort-canvas { position:relative; min-height:360px; padding:26px 10px 30px; margin:4px 0 10px; + background-color:var(--card2); + background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); + background-size:26px 26px; + border:1px dashed var(--line); border-radius:12px; } +.scr-block { position:relative; display:flex; align-items:center; gap:12px; margin:10px 24px; + padding:16px 20px 15px 26px; color:#fff; font-weight:700; font-size:13.5px; cursor:grab; + user-select:none; touch-action:none; border-radius:12px 12px 7px 7px; + box-shadow:0 7px 0 rgba(0,0,0,.13), inset 0 2px 0 rgba(255,255,255,.28), + inset 0 -6px 0 rgba(0,0,0,.07); } +/* 顶部凸榫：像拼图块上缘伸出的插头 */ +.scr-block::before { content:''; position:absolute; left:50%; transform:translateX(-50%); + top:-8px; width:56px; height:14px; border-radius:9px 9px 4px 4px; background:inherit; } +/* 底部凹槽：被下一块凸榫咬合 */ +.scr-block::after { content:''; position:absolute; left:50%; transform:translateX(-50%); + bottom:-6px; width:66px; height:11px; background:var(--card2); + border-radius:4px 4px 9px 9px; box-shadow:inset 0 1px 0 var(--line); } +/* 链首：没有顶部榫头，块顶圆润 + 大扭扣帽 */ +.scr-block.cap::before { display:none; } +.scr-block.cap { border-radius:16px 16px 8px 8px; box-shadow:0 9px 0 rgba(0,0,0,.14), + inset 0 2px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(0,0,0,.07); } +.scr-block .scr-ico { width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:flex; + align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.5px; + background:rgba(0,0,0,.2); box-shadow:inset 0 2px 3px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2); } +.scr-block .scr-src { font-size:11px; opacity:.92; font-weight:600; padding:3px 11px; border-radius:20px; + background:rgba(255,255,255,.22); white-space:nowrap; } +.scr-block .scr-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; + font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; } +/* 优先级 = 积木上的参数槽（Scratch 椭圆参数口样式） */ +.scr-block .scr-prio { width:86px; flex:0 0 auto; text-align:center; color:var(--accent); background:#fff; + border:2px solid rgba(255,255,255,.65); border-radius:14px; padding:6px 10px; + font:700 13px ui-monospace,Menlo,Consolas,monospace; outline:none; box-shadow:inset 0 1px 4px rgba(0,0,0,.12); } +.scr-block .scr-prio:focus { border-color:var(--accent); } +.scr-block .scr-grip { flex:0 0 auto; font-size:15px; opacity:.65; letter-spacing:2px; color:rgba(255,255,255,.9); + text-shadow:0 1px 2px rgba(0,0,0,.3); } +.scr-block.drag-src { opacity:.30; } +.scr-ghost { position:fixed; z-index:200; pointer-events:none; margin:0!important; padding-right:0!important; + transform:rotate(1.2deg) scale(1.045); filter:drop-shadow(0 16px 20px rgba(0,0,0,.35)); cursor:grabbing; } +.scr-ghost .scr-prio, .scr-ghost .scr-grip { visibility:hidden; } +.sort-dropline { height:10px; margin:2px 26px; border-radius:7px; background:var(--accent); + box-shadow:0 1px 6px var(--accent); } .sortbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; } .sortbar .grow { flex:1; } +.scr-hint { font-size:12px; color:var(--muted); margin-top:10px; display:flex; gap:12px; flex-wrap:wrap; } +.scr-hint span { display:flex; align-items:center; gap:5px; } +.scr-hint i { font-style:normal; width:10px; height:10px; border-radius:3px; display:inline-block; } /* ---------- responsive / narrow screens ---------- */ @media (max-width: 900px) { @@ -285,8 +308,8 @@ 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:'排序已保存并热重载', + sortTitle:'积木排序：在画布上拖拽模型积木', sortHint:'拼图积木从上到下排列 = 优先级从高到低。拖动积木把它拼到链上任意位置；每个积木上的数字（priority）可直接编辑——多个积木可设相同值，此时按链上位置（上者先用）作为先后顺序。生图模型（kind=image）不参与链排序。', + sortSave:'保存排序', sortReset:'重置', sortSaved:'排序已保存并热重载', sortNoChange:'无变更', sortSource:'源', sortPrio:'优先级 %s', sortEmpty:'（该源暂无模型）', }, en: { @@ -317,8 +340,8 @@ 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', + sortTitle:'Block sorting: drag model blocks on the canvas', sortHint:'Blocks chain top→bottom = priority high→low. Drag a block to snap it anywhere in the chain; the number on each block (priority) is editable — blocks may share the same value, then chain order (top first) breaks ties. Image models (kind=image) stay out of the chain.', + sortSave:'Save order', sortReset:'Reset', sortSaved:'Order saved & hot-reloaded', sortNoChange:'No changes', sortSource:'source', sortPrio:'priority %s', sortEmpty:'(no models in this source)', } }; @@ -755,178 +778,169 @@ async function delSource(name) { toast(t('toastDelOk')); renderSources(); } -/* ---------- sort tab (scratch-style drag priority) ---------- */ +/* ---------- sort tab: scratch jigsaw chain on canvas ---------- */ 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 }; +function srcColor(name) { + let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0; + return SORT_COLORS[h % SORT_COLORS.length]; +} +function srcShort(name) { return (name || '?').slice(0, 2).toUpperCase(); } +const sortState = { items: [], 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.items = []; + j.sources.forEach(s => (s.models || []).forEach(m => { + if (m.kind === 'image') return; // image models never share the chat chain + sortState.items.push({ src: s.name, id: m.id, prio: m.priority || 0 }); })); - sortState.origin = JSON.stringify(sortState.cols); + sortState.origin = JSON.stringify(sortState.items); + $('#tab-sort').innerHTML = ` +

${t('sortTitle')} + +

+
${t('sortHint')}
+
+
+ ${sortState.items.map((it, i) => { const c = srcColor(it.src); + return `${esc(it.src)}`; }) + .filter((v, i, a) => a.indexOf(v) === i).join('') || ''} +
+
`; paintSort(); } +function scrBlockHtml(it, isCap) { + const c = srcColor(it.src); + return ` +
+ ${esc(srcShort(it.src))} + ${esc(it.src)} + ${esc(it.id)} + + ⠿ +
`; +} function paintSort() { - const groups = sortState.cols.map((c, ci) => ` -
-

- ${esc(c.name)}${t('sortSource')} -

-
- ${c.models.length ? c.models.map((m, mi) => sortShell(ci, mi, m)).join('') - : `
${t('sortEmpty')}
`} -
-
`).join(''); - $('#tab-sort').innerHTML = ` -
-

${t('sortTitle')} - -

-
${t('sortHint')}
-
${groups}
-
`; - bindSortDrag(); -} -function sortShell(ci, mi, m) { - const c = sortState.cols[ci]; - return `
- ${mi === 0 ? '' : ''} -
- ⋮⋮ - ${esc(m.id)} - ${esc(c.name)} - ${tFmt('sortPrio', m.priority)} -
-
`; -} -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; - } + const cv = $('#scr-canvas'); + if (!cv) return; + const srcIdx = sortState.items.map((it, i) => i); + const html = []; + for (let i = 0; i <= sortState.items.length; i++) { + html.push(``); + if (i < sortState.items.length) html.push(scrBlockHtml(sortState.items[i], i === 0)); } - insertAt = Math.max(0, Math.min(insertAt, tCol.models.length)); - tCol.models.splice(insertAt, 0, mdl); - recomputePriorities(); + cv.innerHTML = html.join(''); + cv.querySelectorAll('.scr-prio').forEach(inp => { + inp.addEventListener('input', () => { + const blk = inp.closest('.scr-block'); + const idx = sortState.items.findIndex(x => x.src + '|' + x.id === blk.dataset.key); + if (idx >= 0) { const v = parseInt(inp.value, 10); sortState.items[idx].prio = isFinite(v) ? v : 0; } + }); + inp.addEventListener('pointerdown', e => e.stopPropagation()); + }); + cv.querySelectorAll('.scr-block').forEach(block => { + block.addEventListener('pointerdown', e => { + if (e.target.classList.contains('scr-prio')) return; + e.preventDefault(); + const idx = sortState.items.findIndex(x => x.src + '|' + x.id === block.dataset.key); + if (idx < 0) return; + sortState.drag = { idx, key: block.dataset.key }; + block.classList.add('drag-src'); + makeGhost(block, e.clientX, e.clientY); + const move = ev => onSortMove(ev); + const up = ev => { + block.removeEventListener('pointermove', move); + block.removeEventListener('pointerup', up); + block.removeEventListener('pointercancel', up); + onSortUp(ev); + }; + block.addEventListener('pointermove', move); + block.addEventListener('pointerup', up); + block.addEventListener('pointercancel', up); + try { block.setPointerCapture(e.pointerId); } catch (err) {} + }); + }); +} +function onSortMove(e) { + if (!sortState.drag) return; + const cv = document.getElementById('scr-canvas'); + if (!cv) return; + let toLine = sortState.items.length; + cv.querySelectorAll('.scr-block').forEach(b => { + const idx = sortState.items.findIndex(x => x.src + '|' + x.id === b.dataset.key); + if (idx < 0 || idx === sortState.drag.idx) return; + const r = b.getBoundingClientRect(); + if (e.clientY < r.top + r.height / 2) { if (idx < toLine) toLine = idx; } + else { if (idx + 1 > toLine) toLine = idx + 1; } + }); + cv.querySelectorAll('.sort-dropline').forEach(l => l.style.display = 'none'); + const line = cv.querySelector(`[data-line="${Math.max(0, Math.min(toLine, sortState.items.length))}"]`); + if (line) line.style.display = 'block'; + if (gEl) { gEl.style.left = (e.clientX + 12) + 'px'; gEl.style.top = (e.clientY - 40) + 'px'; } +} +function onSortUp(e) { + const d = sortState.drag; + if (!d) return; + const line = document.querySelector('#scr-canvas .sort-dropline[style*="display: block"]'); + let to = d.idx; + if (line) { + to = +line.dataset.line; + if (d.idx < to) to -= 1; + to = Math.max(0, Math.min(to, sortState.items.length - 1)); + } + const [moved] = sortState.items.splice(d.idx, 1); + sortState.items.splice(to, 0, moved); + removeGhost(); + sortState.drag = null; 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')); +let gEl = null; +function makeGhost(block, x, y) { + removeGhost(); + gEl = block.cloneNode(true); + gEl.classList.add('scr-ghost'); + gEl.style.position = 'fixed'; + gEl.style.left = (x + 12) + 'px'; + gEl.style.top = (y - 40) + 'px'; + gEl.style.width = block.offsetWidth + 'px'; + gEl.style.margin = '0'; + gEl.style.pointerEvents = 'none'; + document.body.appendChild(gEl); } +function removeGhost() { if (gEl) { gEl.remove(); gEl = null; } } function sortReset() { - if (sortState.origin) sortState.cols = JSON.parse(sortState.origin); - sortDragCleanup(); + if (sortState.origin) sortState.items = JSON.parse(sortState.origin); + sortState.drag = null; removeGhost(); paintSort(); } async function saveSort() { const snap = await api('/api/sources'); - const byName = {}; snap.sources.forEach(s => byName[s.name] = s); + const byName = {}; snap.sources.forEach(x => byName[x.name] = x); + const groups = {}; + sortState.items.forEach(it => (groups[it.src] = groups[it.src] || []).push(it)); let dirty = 0; - for (const c of sortState.cols) { - const base = byName[c.name]; + for (const name of Object.keys(groups)) { + const base = byName[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' }; + const seen = new Set(); + const ordered = groups[name].filter(it => { if (seen.has(it.id)) return false; seen.add(it.id); return true; }) + .map(it => ({ id: it.id, priority: it.prio, kind: 'chat' })); + (base.models || []).forEach(x => { + if (seen.has(x.id)) return; + ordered.push({ id: x.id, priority: x.priority || 0, kind: x.kind === 'image' ? 'image' : 'chat' }); }); - if (JSON.stringify(next) !== JSON.stringify(base.models)) { - base.models = next; + if (JSON.stringify(ordered) !== JSON.stringify(base.models)) { + base.models = ordered; await api('/api/sources', { method: 'POST', body: JSON.stringify(base) }); dirty++; } } - toast(t('sortSaved')); - sortState.origin = JSON.stringify(sortState.cols); - renderSort(); + toast(dirty ? t('sortSaved') : t('sortNoChange')); + sortState.origin = JSON.stringify(sortState.items); } /* ---------- adapters tab ---------- */