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

src/renderer/components/token-dashboard.ts

@@ -239,43 +239,47 @@ function renderGlobalOverview(stats: AllSessionsTokenStats): void {
   `;
 }
 
-/** 渲染全局柱状图（按会话） */
-function renderGlobalChart(stats: AllSessionsTokenStats): void {
-  const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
-  if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按会话';
-
-  const chartEl = dashboardModalEl.querySelector('#tdChart')!;
-  const sessions = stats.sessions.filter(s => s.total_input > 0 || s.total_output > 0);
-
-  if (sessions.length === 0) {
-    chartEl.innerHTML = '<div class="td-empty">暂无会话数据</div>';
+/** 渲染柱状图（通用，全局/会话复用） */
+function renderBarChart(
+  chartEl: HTMLElement,
+  data: Array<{ label: string; input: number; output: number; tooltip: string }>,
+  title: string,
+  note?: string,
+  savedScrollLeft?: number
+): void {
+  if (data.length === 0) {
+    chartEl.innerHTML = '<div class="td-empty">暂无数据</div>';
     return;
   }
 
-  // 最多显示 20 个会话
-  const displaySessions = sessions.slice(0, 20);
-  const maxTokens = Math.max(...displaySessions.map(s => s.total_input + s.total_output), 1);
+  const maxTokens = Math.max(...data.map(d => d.input + d.output), 1);
 
-  const barsHtml = displaySessions.map(s => {
-    const total = s.total_input + s.total_output;
-    const heightPct = Math.max((total / maxTokens) * 100, 2);
-    const inputPct = total > 0 ? (s.total_input / total) * 100 : 0;
-    const title = s.title.length > 8 ? s.title.slice(0, 8) + '…' : s.title;
-    const tooltip = `${s.title}\n输入 ${formatTokenCount(s.total_input)} + 输出 ${formatTokenCount(s.total_output)} = ${formatTokenCount(total)} tokens\n${s.round_count} 轮 · ${formatDuration(s.total_duration)}`;
+  // 网格线：5 条水平线（0%, 25%, 50%, 75%, 100%）
+  const gridLines = [0, 0.25, 0.5, 0.75, 1].map(ratio => {
+    const val = Math.round(maxTokens * ratio);
+    return `<div class="td-gridline" style="bottom:${ratio * 100}%">
+      <span class="td-gridline-label">${formatTokenCount(val)}</span>
+    </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 `
-      <div class="td-bar-col" title="${tooltip}">
-        <div class="td-bar-values">
-          <span class="td-val-output">${formatTokenCount(s.total_output)}</span>
-          <span class="td-val-input">${formatTokenCount(s.total_input)}</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 class="td-bar-col" title="${d.tooltip}">
+        <div class="td-bar-area">
+          <div class="td-bar-stack" style="height:${heightPct}%;">
+            <div class="td-bar-segment td-bar-output" style="height:${outputPct}%;"></div>
+            <div class="td-bar-segment td-bar-input-seg" style="height:${inputPct}%;"></div>
           </div>
         </div>
-        <div class="td-bar-label">${title}</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 class="td-bar-label">${d.label}</div>
       </div>
     `;
   }).join('');
@@ -284,17 +288,19 @@ function renderGlobalChart(stats: AllSessionsTokenStats): void {
     <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-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 class="td-chart-grid">
+      ${gridLines}
       <div class="td-chart-bars">${barsHtml}</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>
   `;
 
-  // 柱状图标题
-  const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
-  if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按轮次';
-
   // 柱状图
   const chartEl = dashboardModalEl.querySelector('#tdChart')!;
   const barsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
   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 = `
-      <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-input"></span>输入 Token</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 class="td-chart-bars">${barsHtml}</div>
-      </div>
-    `;
-  }
+  const chartData = rounds.map(r => ({
+    label: `R${r.round}`,
+    input: r.prompt_eval_count,
+    output: r.eval_count,
+    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)}`,
+  }));
 
-  // 恢复滚动位置
-  if (savedScrollLeft > 0) {
-    const newBarsEl = chartEl.querySelector('.td-chart-bars') as HTMLElement | null;
-    if (newBarsEl) newBarsEl.scrollLeft = savedScrollLeft;
-  }
+  const chartTitleEl = dashboardModalEl.querySelector('#tdChartTitle');
+  if (chartTitleEl) chartTitleEl.textContent = '📈 Token 消耗趋势 — 按轮次';
+
+  renderBarChart(chartEl, chartData, '按轮次', undefined, savedScrollLeft);
 
   // 表格标题
   const tableTitleEl = dashboardModalEl.querySelector('#tdTableTitle');

src/renderer/styles/style.css

@@ -3615,102 +3615,115 @@ html, body {
     border-radius: var(--radius-md);
     padding: 16px;
     box-shadow: var(--shadow-card);
-    min-height: 180px;
+    min-height: 200px;
 }
 
-.td-chart-container {
-    display: flex;
-    gap: 8px;
-    height: 180px;
+.td-chart-grid {
+    position: relative;
+    height: 200px;
+    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;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 10px;
+/* 网格线 */
+.td-gridline {
+    position: absolute;
+    left: 0;
+    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);
     font-family: var(--font-mono);
-    padding: 2px 0;
-    min-width: 36px;
-    text-align: right;
+    white-space: nowrap;
 }
 
 .td-chart-bars {
-    flex: 1;
+    position: absolute;
+    inset: 0;
     display: flex;
     align-items: flex-end;
-    gap: 6px;
-    height: 180px;
-    border-left: 1px solid var(--border-subtle);
-    border-bottom: 1px solid var(--border-subtle);
-    padding: 0 8px 0 4px;
+    gap: 4px;
+    padding: 0 8px;
     overflow-x: auto;
+    scroll-behavior: smooth;
 }
 
 .td-bar-col {
     display: flex;
     flex-direction: column;
     align-items: center;
-    flex: 1;
-    min-width: 36px;
-    max-width: 60px;
-    height: 100%;
+    flex: 0 0 auto;
+    width: 40px;
     cursor: default;
 }
 
-.td-bar-values {
-    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 {
+.td-bar-area {
     flex: 1;
     width: 100%;
     display: flex;
     align-items: flex-end;
 }
 
-.td-bar {
+.td-bar-stack {
     width: 100%;
-    border-radius: 4px 4px 0 0;
+    border-radius: 3px 3px 0 0;
     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;
     flex-direction: column-reverse;
+    transition: height 0.3s ease;
 }
 
-.td-bar-input {
+.td-bar-segment {
     width: 100%;
-    background: linear-gradient(180deg, #9B7ED8 0%, #B99BE5 100%);
-    border-radius: 4px 4px 0 0;
-    min-height: 0;
+    transition: height 0.2s ease;
 }
 
+.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 {
     display: flex;
     gap: 16px;
@@ -3739,15 +3752,13 @@ html, body {
     background: #9B7ED8;
 }
 
-.td-bar-label {
-    font-size: 10px;
-    color: var(--text-tertiary);
-    margin-top: 4px;
-    font-family: var(--font-mono);
+/* 柱子数值标签颜色 */
+.td-val-output {
+    color: #E8734A;
 }
 
-.td-bar-col:hover .td-bar-fill {
-    background: linear-gradient(180deg, #D4623A 0%, #E8734A 100%);
+.td-val-input {
+    color: #9B7ED8;
 }
 
 /* 空状态 */