MetonaTeam/metona-ollama-desktop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: 重写 Token 消耗趋势图 — 网格线 + 正确高度计算 + 柱子底部对齐

Browse Source
This commit is contained in:
Metona Dev
2026-04-24 12:56:45 +08:00
parent 5fafaa691f
commit b24370cc15
2 changed files with 131 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/token-dashboard.ts
+52 -86
View File
@@ -239,43 +239,47 @@ function renderGlobalOverview(stats: AllSessionsTokenStats): void {
`; `;
} }
/** 渲染全局柱状图（按会话） */ /** 渲染柱状图（通用，全局/会话复用） */
function renderGlobalChart(stats: AllSessionsTokenStats): void { function renderBarChart(
const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle'); chartEl: HTMLElement,
if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按会话'; data: Array<{ label: string; input: number; output: number; tooltip: string }>,
title: string,
const chartEl = dashboardModalEl.querySelector('#tdChart')!; note?: string,
const sessions = stats.sessions.filter(s => s.total_input > 0 || s.total_output > 0); savedScrollLeft?: number
): void {
if (sessions.length === 0) { if (data.length === 0) {
chartEl.innerHTML = '<div class="td-empty">暂无会话数据</div>'; chartEl.innerHTML = '<div class="td-empty">暂无数据</div>';
return; return;
} }
// 最多显示 20 个会话 const maxTokens = Math.max(...data.map(d => d.input + d.output), 1);
const displaySessions = sessions.slice(0, 20);
const maxTokens = Math.max(...displaySessions.map(s => s.total_input + s.total_output), 1);
const barsHtml = displaySessions.map(s => { // 网格线：5 条水平线（0%, 25%, 50%, 75%, 100%）
const total = s.total_input + s.total_output; const gridLines = [0, 0.25, 0.5, 0.75, 1].map(ratio => {
const heightPct = Math.max((total / maxTokens) * 100, 2); const val = Math.round(maxTokens * ratio);
const inputPct = total > 0 ? (s.total_input / total) * 100 : 0; return `<div class="td-gridline" style="bottom:${ratio * 100}%">
const title = s.title.length > 8 ? s.title.slice(0, 8) + '…' : s.title; <span class="td-gridline-label">${formatTokenCount(val)}</span>
const tooltip = `${s.title}\n输入 ${formatTokenCount(s.total_input)} + 输出 ${formatTokenCount(s.total_output)} = ${formatTokenCount(total)} tokens\n${s.round_count} 轮 · ${formatDuration(s.total_duration)}`; </div>`;
}).join('');
const barsHtml = data.map(d => {
const total = d.input + d.output;
const heightPct = Math.max((total / maxTokens) * 100, 1.5);
const inputPct = total > 0 ? (d.input / total) * 100 : 0;
const outputPct = 100 - inputPct;
return ` return `
<div class="td-bar-col" title="${tooltip}"> <div class="td-bar-col" title="${d.tooltip}">
<div class="td-bar-values"> <div class="td-bar-area">
<span class="td-val-output">${formatTokenCount(s.total_output)}</span> <div class="td-bar-stack" style="height:${heightPct}%;">
<span class="td-val-input">${formatTokenCount(s.total_input)}</span> <div class="td-bar-segment td-bar-output" style="height:${outputPct}%;"></div>
</div> <div class="td-bar-segment td-bar-input-seg" style="height:${inputPct}%;"></div>
<div class="td-bar-wrapper">
<div class="td-bar" style="height:${heightPct}%;">
<div class="td-bar-fill">
<div class="td-bar-input" style="height:${inputPct}%;"></div>
</div> </div>
</div> </div>
<div class="td-bar-labels">
<span class="td-val-output">${formatTokenCount(d.output)}</span>
<span class="td-val-input">${formatTokenCount(d.input)}</span>
</div> </div>
<div class="td-bar-label">${title}</div> <div class="td-bar-label">${d.label}</div>
</div> </div>
`; `;
}).join(''); }).join('');
@@ -284,17 +288,19 @@ function renderGlobalChart(stats: AllSessionsTokenStats): void {
<div class="td-chart-legend"> <div class="td-chart-legend">
<span class="td-legend-item"><span class="td-legend-dot td-legend-output"></span>输出 Token</span> <span class="td-legend-item"><span class="td-legend-dot td-legend-output"></span>输出 Token</span>
<span class="td-legend-item"><span class="td-legend-dot td-legend-input"></span>输入 Token</span> <span class="td-legend-item"><span class="td-legend-dot td-legend-input"></span>输入 Token</span>
${sessions.length > 20 ? `<span class="td-legend-item td-legend-note">（仅显示最近 20 个会话）</span>` : ''} ${note ? `<span class="td-legend-item td-legend-note">${note}</span>` : ''}
</div>
<div class="td-chart-container">
<div class="td-chart-y-axis">
<span>${formatTokenCount(maxTokens)}</span>
<span>${formatTokenCount(Math.round(maxTokens / 2))}</span>
<span>0</span>
</div> </div>
<div class="td-chart-grid">
${gridLines}
<div class="td-chart-bars">${barsHtml}</div> <div class="td-chart-bars">${barsHtml}</div>
</div> </div>
`; `;
// 恢复滚动位置
if (savedScrollLeft && savedScrollLeft > 0) {
const newBarsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
if (newBarsEl) newBarsEl.scrollLeft = savedScrollLeft;
}
} }
/** 渲染全局明细表格 */ /** 渲染全局明细表格 */
@@ -379,62 +385,22 @@ function renderSessionView(): void {
</div> </div>
`; `;
// 柱状图标题
const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按轮次';
// 柱状图 // 柱状图
const chartEl = dashboardModalEl.querySelector('#tdChart')!; const chartEl = dashboardModalEl.querySelector('#tdChart')!;
const barsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null; const barsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
const savedScrollLeft = barsEl?.scrollLeft ?? 0; const savedScrollLeft = barsEl?.scrollLeft ?? 0;
if (rounds.length === 0) {
chartEl.innerHTML = '<div class="td-empty">暂无数据，发送消息后开始统计</div>';
} else {
const maxTokens = Math.max(...rounds.map(r => r.eval_count + r.prompt_eval_count), 1);
const barsHtml = rounds.map(r => {
const total = r.eval_count + r.prompt_eval_count;
const heightPct = Math.max((total / maxTokens) * 100, 2);
const inputPct = total > 0 ? (r.prompt_eval_count / total) * 100 : 0;
const tooltip = `第${r.round}轮 · 输入 ${formatTokenCount(r.prompt_eval_count)} + 输出 ${formatTokenCount(r.eval_count)} = ${formatTokenCount(total)} tokens · ${formatDuration(r.total_duration)}`;
return `
<div class="td-bar-col" title="${tooltip}">
<div class="td-bar-values">
<span class="td-val-output">${formatTokenCount(r.eval_count)}</span>
<span class="td-val-input">${formatTokenCount(r.prompt_eval_count)}</span>
</div>
<div class="td-bar-wrapper">
<div class="td-bar" style="height:${heightPct}%;">
<div class="td-bar-fill">
<div class="td-bar-input" style="height:${inputPct}%;"></div>
</div>
</div>
</div>
<div class="td-bar-label">R${r.round}</div>
</div>
`;
}).join('');
chartEl.innerHTML = ` const chartData = rounds.map(r => ({
<div class="td-chart-legend"> label: `R${r.round}`,
<span class="td-legend-item"><span class="td-legend-dot td-legend-output"></span>输出 Token</span> input: r.prompt_eval_count,
<span class="td-legend-item"><span class="td-legend-dot td-legend-input"></span>输入 Token</span> output: r.eval_count,
</div> tooltip: `第${r.round}轮 · 输入 ${formatTokenCount(r.prompt_eval_count)} + 输出 ${formatTokenCount(r.eval_count)} = ${formatTokenCount(r.eval_count + r.prompt_eval_count)} tokens · ${formatDuration(r.total_duration)}`,
<div class="td-chart-container"> }));
<div class="td-chart-y-axis">
<span>${formatTokenCount(maxTokens)}</span>
<span>${formatTokenCount(Math.round(maxTokens / 2))}</span>
<span>0</span>
</div>
<div class="td-chart-bars">${barsHtml}</div>
</div>
`;
}
// 恢复滚动位置 const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
if (savedScrollLeft > 0) { if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按轮次';
const newBarsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
if (newBarsEl) newBarsEl.scrollLeft = savedScrollLeft; renderBarChart(chartEl, chartData, '按轮次', undefined, savedScrollLeft);
}
// 表格标题 // 表格标题
const tableTitleEl = dashboardModalEl.querySelector('#tdTableTitle'); const tableTitleEl = dashboardModalEl.querySelector('#tdTableTitle');
src/renderer/styles/style.css
+78 -67
View File
@@ -3615,102 +3615,115 @@ html, body {
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 16px; padding: 16px;
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
min-height: 180px; min-height: 200px;
} }
.td-chart-container { .td-chart-grid {
display: flex; position: relative;
gap: 8px; height: 200px;
height: 180px; border-left: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
margin-left: 40px;
margin-bottom: 4px;
} }
.td-chart-y-axis { /* 网格线 */
display: flex; .td-gridline {
flex-direction: column; position: absolute;
justify-content: space-between; left: 0;
font-size: 10px; right: 0;
border-top: 1px dashed var(--border-subtle);
pointer-events: none;
opacity: 0.5;
}
.td-gridline:first-child {
border-top: none;
}
.td-gridline-label {
position: absolute;
right: calc(100% + 6px);
transform: translateY(-50%);
font-size: 9px;
color: var(--text-tertiary); color: var(--text-tertiary);
font-family: var(--font-mono); font-family: var(--font-mono);
padding: 2px 0; white-space: nowrap;
min-width: 36px;
text-align: right;
} }
.td-chart-bars { .td-chart-bars {
flex: 1; position: absolute;
inset: 0;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 6px; gap: 4px;
height: 180px; padding: 0 8px;
border-left: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 0 8px 0 4px;
overflow-x: auto; overflow-x: auto;
scroll-behavior: smooth;
} }
.td-bar-col { .td-bar-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex: 1; flex: 0 0 auto;
min-width: 36px; width: 40px;
max-width: 60px;
height: 100%;
cursor: default; cursor: default;
} }
.td-bar-values { .td-bar-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
margin-bottom: 2px;
font-size: 9px;
font-family: var(--font-mono);
white-space: nowrap;
flex-shrink: 0;
}
.td-val-output {
color: #E8734A;
}
.td-val-input {
color: #9B7ED8;
}
.td-bar-wrapper {
flex: 1; flex: 1;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
.td-bar { .td-bar-stack {
width: 100%; width: 100%;
border-radius: 4px 4px 0 0; border-radius: 3px 3px 0 0;
overflow: hidden; overflow: hidden;
position: relative;
min-height: 2px;
}
.td-bar-fill {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #E8734A 0%, #F0976E 100%);
border-radius: 4px 4px 0 0;
transition: height 0.3s ease;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
transition: height 0.3s ease;
} }
.td-bar-input { .td-bar-segment {
width: 100%; width: 100%;
background: linear-gradient(180deg, #9B7ED8 0%, #B99BE5 100%); transition: height 0.2s ease;
border-radius: 4px 4px 0 0;
min-height: 0;
} }
.td-bar-output {
background: linear-gradient(180deg, #E8734A 0%, #F0976E 100%);
}
.td-bar-input-seg {
background: linear-gradient(180deg, #9B7ED8 0%, #B99BE5 100%);
}
.td-bar-labels {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
margin-top: 3px;
font-size: 9px;
font-family: var(--font-mono);
white-space: nowrap;
flex-shrink: 0;
}
.td-bar-label {
font-size: 10px;
color: var(--text-tertiary);
margin-top: 2px;
font-family: var(--font-mono);
}
.td-bar-col:hover .td-bar-stack {
filter: brightness(1.1);
}
/* 图例 */
.td-chart-legend { .td-chart-legend {
display: flex; display: flex;
gap: 16px; gap: 16px;
@@ -3739,15 +3752,13 @@ html, body {
background: #9B7ED8; background: #9B7ED8;
} }
.td-bar-label { /* 柱子数值标签颜色 */
font-size: 10px; .td-val-output {
color: var(--text-tertiary); color: #E8734A;
margin-top: 4px;
font-family: var(--font-mono);
} }
.td-bar-col:hover .td-bar-fill { .td-val-input {
background: linear-gradient(180deg, #D4623A 0%, #E8734A 100%); color: #9B7ED8;
} }
/* 空状态 */ /* 空状态 */