fix: v1.3.1 - 四项优化

1. VRAM/内存进度条改为仅 sticky 置顶显示
   - 去掉页面内重复的 vram-display 进度条
   - 只保留顶部 sticky bar,滚动时始终可见

2. 去掉参数修改标记
   - 不再用红色线框标记已更改的参数

3. 命令区域简化
   - 去掉独立的「复制命令」和「重新生成」按钮
   - 复制按钮改为命令文本框右下角悬空小按钮

4. h2 标题 margin-top 改为 0
This commit is contained in:
2026-07-19 23:48:18 +08:00
parent 3c27a205e5
commit fb3d7290bf
3 changed files with 41 additions and 37 deletions
+13 -21
View File
@@ -183,8 +183,7 @@ function renderParams() {
function renderParamItem(p) {
const val = state.paramValues[p.param_key];
const isMod = isParamModified(p, val);
const mc = isMod ? 'modified' : '';
const mc = '';
const vb = p.affects_vram ? '<span class="vram-badge">⚡显存</span>' : '';
// Show both short and long flag
const shortFlag = p.short_flag || '';
@@ -221,8 +220,7 @@ function isParamModified(p, val) {
function setParam(key, value) {
state.paramValues[key] = value;
const item = document.querySelector(`.param-item[data-key="${key}"]`);
if (item) { const p = state.params.find(p => p.param_key === key); if (p && isParamModified(p, value)) item.classList.add('modified'); else item.classList.remove('modified'); }
// No visual modification marker per user request
generateCommand(); updateEstimate();
}
@@ -259,25 +257,13 @@ function collectParamsForEstimate() {
}
function renderVramDisplay(data) {
const bar = document.getElementById('vram-bar'), label = document.getElementById('vram-label'), bd = document.getElementById('vram-breakdown');
if (!data.total_vram_available_mb) { bar.style.width = '0%'; label.textContent = '请选择GPU'; bd.innerHTML = ''; return; }
const pct = data.usage_percent || 0;
bar.style.width = Math.min(pct, 100) + '%';
bar.className = 'vram-bar' + (pct > 90 ? ' danger' : pct > 75 ? ' warning' : '');
label.textContent = `VRAM: ${data.total_gb}GB / ${data.total_vram_available_gb}GB (${pct}%)`;
bd.innerHTML = `<div class="breakdown-item"><span class="label">模型权重</span><span class="value">${data.weights_gb}GB</span></div><div class="breakdown-item"><span class="label">KV缓存</span><span class="value">${data.kv_cache_gb}GB</span></div><div class="breakdown-item"><span class="label">计算/开销</span><span class="value">${(data.compute_mb/1024).toFixed(2)}GB</span></div><div class="breakdown-item"><span class="label">CUDA开销</span><span class="value">${(data.cuda_overhead_mb/1024).toFixed(2)}GB</span></div>`;
// Update sticky bar instead of inline display
updateStickyBar(data, parseFloat(document.getElementById('sys-memory').value) || 0, (parseFloat(document.getElementById('sys-memory').value) || 0) === 0);
}
function renderRamDisplay(data, sysGb, isUnlimited) {
const bar = document.getElementById('ram-bar'), label = document.getElementById('ram-label'), bd = document.getElementById('ram-breakdown');
if (isUnlimited) { bar.style.width = '0%'; label.textContent = `内存: ${data.cpu_total_gb}GB (无限制)`; }
else {
const pct = data.cpu_usage_percent || 0;
bar.style.width = Math.min(pct, 100) + '%';
bar.className = 'vram-bar ram-bar' + (pct > 90 ? ' danger' : pct > 75 ? ' warning' : '');
label.textContent = `内存: ${data.cpu_total_gb}GB / ${sysGb}GB (${pct}%)`;
}
bd.innerHTML = `<div class="breakdown-item"><span class="label">CPU模型权重</span><span class="value">${data.cpu_weights_gb}GB</span></div><div class="breakdown-item"><span class="label">CPU KV缓存</span><span class="value">${(data.cpu_kv_cache_mb/1024).toFixed(2)}GB</span></div>`;
// Update sticky ram bar instead of inline display
// (sticky bar is already updated in updateStickyBar)
}
// ===== Sticky top bar =====
@@ -386,7 +372,13 @@ function copyCommand() {
const ta = document.createElement('textarea');
ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px';
document.body.appendChild(ta); ta.select();
try { document.execCommand('copy'); const btn = document.querySelector('.btn-copy'); const o = btn.textContent; btn.textContent = '✅ 已复制!'; setTimeout(() => btn.textContent = o, 2000); } catch(e) { alert('复制失败,请手动选择文本复制'); }
try {
document.execCommand('copy');
const btn = document.getElementById('copy-btn');
btn.textContent = '✅ 已复制';
btn.classList.add('copied');
setTimeout(() => { btn.textContent = '📋 复制'; btn.classList.remove('copied'); }, 2000);
} catch(e) { alert('复制失败,请手动选择文本复制'); }
document.body.removeChild(ta);
}