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

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;
 }
 
 /* 空状态 */