fix(HEL-210): 情绪周期左右栏 flex 等高并修正夜间图表提示对比度

网格改为 stretch 对齐,图表区随右栏 flex 伸缩;夜间 tooltip 改用 surface 主题变量。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
2026-08-28 12:22:08 +00:00
co-authored by Cursor multica-agent
parent 8a5e78f022
commit 1a8f724e09
2 changed files with 67 additions and 4 deletions
+55 -4
View File
@@ -1021,9 +1021,21 @@
}
.sentiment-chart-tooltip b {
color: inherit;
font-weight: 700;
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-chart-tooltip {
border: 1px solid var(--border-strong);
background: var(--surface-muted);
color: var(--text-primary);
box-shadow: var(--elevation-float);
}
.sentiment-phase-block {
display: flex;
@@ -1431,7 +1443,7 @@
grid-template-columns: minmax(0px, 1fr) 340px;
align-items: start;
align-items: stretch;
}
.redesigned-sentiment-view .sentiment-analysis-main,
@@ -1450,13 +1462,13 @@
padding-bottom: 6px;
height: 350px;
min-height: 280px;
padding-top: 12px;
}
.redesigned-sentiment-view .sentiment-chart-shell canvas {
height: 332px;
min-height: 240px;
}
@media (max-width: 960px) {
@@ -1476,7 +1488,7 @@
gap: 12px;
align-items: start;
align-items: stretch;
margin-bottom: 12px;
}
@@ -1666,11 +1678,50 @@
}
@media (min-width: 768px) {
.redesigned-sentiment-view .sentiment-analysis-main,
.redesigned-sentiment-view .sentiment-analysis-rail {
align-self: stretch;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-trend-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-chart-shell {
flex: 1 1 auto;
height: auto;
min-height: 280px;
padding-right: 16px;
padding-left: 16px;
}
.redesigned-sentiment-view .sentiment-chart-shell canvas {
height: 100%;
min-height: 240px;
}
.redesigned-sentiment-view .sentiment-components-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0px;
}
}
@media (min-width: 1024px) {
+12
View File
@@ -1,10 +1,21 @@
let sentimentChartAnimationFrame = null;
let sentimentChartResizeObserver = null;
window.XiaobaiPageModules.register("sentiment", ["sentimentCycleView"], {
bind: bindSentimentEvents,
enter: ["loadSentiment"],
});
function ensureSentimentChartResizeObserver() {
const shell = document.querySelector("#sentimentCycleView .sentiment-chart-shell");
if (!shell || sentimentChartResizeObserver) return;
sentimentChartResizeObserver = new ResizeObserver(() => {
if (state.activeView !== "sentimentCycleView" || !state.sentimentHistory?.rows?.length) return;
drawSentimentTrendChart(state.sentimentHistory.rows, 1);
});
sentimentChartResizeObserver.observe(shell);
}
async function loadSentimentHistory(force = false) {
if (!state.dashboard || state.sentimentLoading) return;
const key = `${elements.tradeDate.value}:${state.sentimentRange}`;
@@ -107,6 +118,7 @@ function renderSentimentHistory() {
animateSentimentComponents();
animateSentimentTrendChart(rows);
bindSentimentChartTooltip(rows);
ensureSentimentChartResizeObserver();
});
animateRows(body);
}