fix(HEL-221): 按确认样图实现情绪周期左右等高与夜间提示

桌面分析区固定 600px 并 stretch 对齐，评分构成在剩余高度内分配；夜间 tooltip 使用指定深色对比度，图表按容器尺寸重绘且不随视口拉满整页。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

frontend/pages/sentiment/page.js

@@ -1,10 +1,39 @@
 let sentimentChartAnimationFrame = null;
+let sentimentChartResizeObserver = null;
+let sentimentChartLastSize = "";
 
 window.XiaobaiPageModules.register("sentiment", ["sentimentCycleView"], {
   bind: bindSentimentEvents,
   enter: ["loadSentiment"],
 });
 
+function sentimentChartSizeKey(target) {
+  if (!target) return "";
+  const rect = target.getBoundingClientRect();
+  return `${Math.round(rect.width)}x${Math.round(rect.height)}x${window.devicePixelRatio || 1}`;
+}
+
+function observeSentimentTrendChart() {
+  const shell = document.querySelector("#sentimentCycleView .sentiment-chart-shell");
+  if (!shell) return;
+  if (!sentimentChartResizeObserver) {
+    sentimentChartResizeObserver = new ResizeObserver(() => {
+      if (sentimentChartAnimationFrame) return;
+      if (state.activeView !== "sentimentCycleView") return;
+      const rows = state.sentimentHistory?.rows;
+      if (!rows?.length) return;
+      const current = document.querySelector("#sentimentCycleView .sentiment-chart-shell");
+      const nextKey = sentimentChartSizeKey(current);
+      if (!nextKey || nextKey === sentimentChartLastSize) return;
+      drawSentimentTrendChart(rows, 1);
+    });
+  } else {
+    sentimentChartResizeObserver.disconnect();
+  }
+  sentimentChartLastSize = sentimentChartSizeKey(shell);
+  sentimentChartResizeObserver.observe(shell);
+}
+
 async function loadSentimentHistory(force = false) {
   if (!state.dashboard || state.sentimentLoading) return;
   const key = `${elements.tradeDate.value}:${state.sentimentRange}`;
@@ -126,6 +155,7 @@ function animateSentimentTrendChart(rows) {
   if (sentimentChartAnimationFrame) cancelAnimationFrame(sentimentChartAnimationFrame);
   if (!motionEnabled()) {
     drawSentimentTrendChart(rows, 1);
+    observeSentimentTrendChart();
     return;
   }
   const startedAt = performance.now();
@@ -135,7 +165,10 @@ function animateSentimentTrendChart(rows) {
     const progress = 1 - (1 - rawProgress) ** 3;
     drawSentimentTrendChart(rows, progress);
     if (rawProgress < 1) sentimentChartAnimationFrame = requestAnimationFrame(frame);
-    else sentimentChartAnimationFrame = null;
+    else {
+      sentimentChartAnimationFrame = null;
+      observeSentimentTrendChart();
+    }
   };
   sentimentChartAnimationFrame = requestAnimationFrame(frame);
 }
@@ -144,9 +177,9 @@ function drawSentimentTrendChart(rows, progress = 1) {
   const canvas = document.querySelector("#sentimentTrendChart");
   if (!canvas || !rows.length || state.activeView !== "sentimentCycleView") return;
   const rect = canvas.getBoundingClientRect();
-  if (!rect.width) return;
-  const width = Math.max(320, rect.width);
-  const height = Math.max(220, rect.height);
+  if (rect.width < 8 || rect.height < 8) return;
+  const width = rect.width;
+  const height = rect.height;
   const ratio = window.devicePixelRatio || 1;
   canvas.width = Math.round(width * ratio);
   canvas.height = Math.round(height * ratio);
@@ -258,6 +291,7 @@ function drawSentimentTrendChart(rows, progress = 1) {
     const dateText = displayCompactDate(row.trade_date).slice(5);
     context.fillText(dateText, x(index), height - padding.bottom + 10);
   });
+  sentimentChartLastSize = sentimentChartSizeKey(canvas.closest(".sentiment-chart-shell"));
 }
 
 function bindSentimentChartTooltip(rows) {