From 723b4c50c06a0db442ecca3bf56051338d66ea7d Mon Sep 17 00:00:00 2001 From: argszero Date: Mon, 24 Aug 2026 12:34:42 +0800 Subject: [PATCH] fix(ui): trend chart gradient area renders solid black (rant 2026-08-24T12:32:18) --- ui/css/style.css | 14 -------------- ui/index.html | 10 +++++----- ui/js/app.js | 21 +++++++++++++-------- 3 files changed, 18 insertions(+), 27 deletions(-) diff --git a/ui/css/style.css b/ui/css/style.css index b578a60..56aafaa 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -349,20 +349,6 @@ select.input option { background: var(--bg-card); } 无网格线、无数据点圆、渐变 0.35→0、teal 主题色系——消费用主强调色区分） */ .tx-trend svg .trend-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tx-trend svg .trend-area { stroke: none; } -.tx-trend svg .tg-0 { stop-opacity: 0; } -.tx-trend svg .tg-1 { stop-opacity: 0; } -.tx-trend svg.m-exp .trend-line { stroke: var(--accent); } -.tx-trend svg.m-exp .tg-0 { stop-color: var(--accent); stop-opacity: 0.35; } -.tx-trend svg.m-exp .tg-1 { stop-color: var(--accent); } -.tx-trend svg.m-inc .trend-line { stroke: var(--ok); } -.tx-trend svg.m-inc .tg-0 { stop-color: var(--ok); stop-opacity: 0.35; } -.tx-trend svg.m-inc .tg-1 { stop-color: var(--ok); } -.tx-trend svg.m-net .trend-line { stroke: var(--accent-text); } -.tx-trend svg.m-net .tg-0 { stop-color: var(--accent-text); stop-opacity: 0.35; } -.tx-trend svg.m-net .tg-1 { stop-color: var(--accent-text); } -.tx-trend svg.m-tok .trend-line { stroke: var(--warn); } -.tx-trend svg.m-tok .tg-0 { stop-color: var(--warn); stop-opacity: 0.35; } -.tx-trend svg.m-tok .tg-1 { stop-color: var(--warn); } /* 悬停引导线 + tooltip */ .tx-trend-guide { position: absolute; top: 2px; bottom: 6px; width: 1px; background: var(--text-dim); opacity: 0.45; display: none; pointer-events: none; } .tx-trend-tip { diff --git a/ui/index.html b/ui/index.html index 595f12d..7018136 100644 --- a/ui/index.html +++ b/ui/index.html @@ -5,7 +5,7 @@ AITokenPool - + @@ -683,9 +683,9 @@

使用模型

- - - - + + + + diff --git a/ui/js/app.js b/ui/js/app.js index 60a6bd3..55e96fe 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -1257,10 +1257,10 @@ } const bucket = tr.bucket || "day"; const METRICS = [ - { key: "expense", label: T("tx.trend.metric.expense"), pick: (b) => b.expense || 0, cls: "exp" }, - { key: "income", label: T("tx.trend.metric.income"), pick: (b) => b.income || 0, cls: "inc" }, - { key: "net", label: T("tx.trend.metric.net"), pick: (b) => (b.net === undefined ? (b.income || 0) - (b.expense || 0) : b.net) || 0, cls: "net", signed: true }, - { key: "tokens", label: T("tx.trend.metric.tokens"), pick: (b) => b.tokens || 0, cls: "tok" }, + { key: "expense", label: T("tx.trend.metric.expense"), pick: (b) => b.expense || 0, cls: "exp", stroke: "var(--accent)" }, + { key: "income", label: T("tx.trend.metric.income"), pick: (b) => b.income || 0, cls: "inc", stroke: "var(--ok)" }, + { key: "net", label: T("tx.trend.metric.net"), pick: (b) => (b.net === undefined ? (b.income || 0) - (b.expense || 0) : b.net) || 0, cls: "net", signed: true, stroke: "var(--accent-text)" }, + { key: "tokens", label: T("tx.trend.metric.tokens"), pick: (b) => b.tokens || 0, cls: "tok", stroke: "var(--warn)" }, ]; const m = METRICS.find((x) => x.key === txTrendMetric) || METRICS[0]; const vals = buckets.map(m.pick); @@ -1321,16 +1321,21 @@ '" ).join("") + ""; + const stroke = m.stroke || "var(--accent)"; + const gid = "spark-grad-" + (++_sparkId); // 每实例唯一 id，防多次渲染/多图冲突（rant 12:32:18：CSS class 设 stop 色在 Chrome 不可靠 → 内联属性） const total = vals.reduce((a, b) => a + b, 0); const html = '
' + esc(T("tx.trend.title")) + "
" + switchHtml + '
' + - '' + - '' + + '' + + '' + + '' + + '' + + "" + axis + xlabels + - '' + - '' + + '' + + '' + "" + '
' + '
' +