From abd17f53ca40f5fbb7791c14527c5dc10604fda8 Mon Sep 17 00:00:00 2001
From: Gundy <duduxia678@gmail.com>
Date: Fri, 3 Jul 2026 12:39:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(theme):=20=E4=BA=AE=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=AE=9E=E6=B5=8B=E4=BF=AE=E6=AD=A3=20=E2=80=94=20?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E9=9B=B7=E8=BE=BE=E5=9B=BE/=E8=BF=91?=
 =?UTF-8?q?=E7=99=BD=E6=96=87=E5=AD=97/=E5=9B=BE=E4=BE=8B=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用浏览器实测双主题后的修正:
- 看板情绪雷达 (SVG): 网格/中心渐变/描边从写死的深 slate 色改为
  hsl(var(--surface/elevated/border)) CSS 变量, 亮暗自动切换
  (亮色下原来是一块突兀的深色六边形)
- 回测统计卡: 中性值文字写死近白色 #f8fafc → inherit (亮色下不可见)
- ExtDimensionAnalysis 装饰图形 white/xx → foreground/xx
- 情绪页图表: 折线补 itemStyle, 图例色块与线色一致
  (原用 ECharts 默认调色板, 与线对不上, 双主题都存在的旧瑕疵)

实测覆盖: 看板/个股分析(K线)/市场情绪 亮暗双向切换 + 刷新持久化
(预渲染脚本生效, body 背景 #FAFAFA), 暗色无回归
---
 frontend/src/components/ExtDimensionAnalysis.tsx |  4 ++--
 frontend/src/pages/Dashboard.tsx                 | 15 ++++++++-------
 frontend/src/pages/backtest/StrategyBacktest.tsx |  5 +++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ExtDimensionAnalysis.tsx b/frontend/src/components/ExtDimensionAnalysis.tsx
index 30b04cf..7d5de5e 100644
--- a/frontend/src/components/ExtDimensionAnalysis.tsx
+++ b/frontend/src/components/ExtDimensionAnalysis.tsx
@@ -296,8 +296,8 @@ export function ExtDimensionAnalysis({
               页面按分析菜单配置读取扩展数据源，使用分组字段生成榜单，并严格按照 detail_columns 渲染明细列。
             </p>
           </div>
-          <div className="absolute right-8 top-6 hidden h-28 w-28 rounded-full border border-white/10 bg-white/[0.03] lg:flex items-center justify-center">
-            <BarChart3 className="h-12 w-12 text-white/20" />
+          <div className="absolute right-8 top-6 hidden h-28 w-28 rounded-full border border-foreground/10 bg-foreground/[0.03] lg:flex items-center justify-center">
+            <BarChart3 className="h-12 w-12 text-foreground/20" />
           </div>
         </section>
 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index c5e8ee4..9dd9235 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -325,24 +325,25 @@ function EmotionRadar({ radar, score }: { radar: OverviewMarket['radar']; score:
             <stop offset="0%" stopColor={`${color}57`} />
             <stop offset="100%" stopColor={`${color}1f`} />
           </radialGradient>
+          {/* 中心/网格用 CSS 变量取色, 亮暗主题自动切换 (SVG 属性支持 hsl(var(--x))) */}
           <radialGradient id="emotionRadarCenter" cx="50%" cy="50%" r="55%">
-            <stop offset="0%" stopColor="rgba(15,23,42,0.92)" />
-            <stop offset="68%" stopColor="rgba(15,23,42,0.70)" />
-            <stop offset="100%" stopColor="rgba(15,23,42,0)" />
+            <stop offset="0%" stopColor="hsl(var(--surface) / 0.92)" />
+            <stop offset="68%" stopColor="hsl(var(--surface) / 0.70)" />
+            <stop offset="100%" stopColor="hsl(var(--surface) / 0)" />
           </radialGradient>
         </defs>
         {gridPolygons.map(g => (
           <polygon
             key={g.level}
             points={g.points}
-            fill={g.idx % 2 === 0 ? 'rgba(30,41,59,0.26)' : 'rgba(15,23,42,0.16)'}
-            stroke={g.level === 1 ? 'rgba(148,163,184,0.22)' : 'rgba(148,163,184,0.12)'}
+            fill={g.idx % 2 === 0 ? 'hsl(var(--elevated) / 0.55)' : 'hsl(var(--elevated) / 0.3)'}
+            stroke={g.level === 1 ? 'hsl(var(--border) / 0.9)' : 'hsl(var(--border) / 0.5)'}
             strokeWidth={g.level === 1 ? 1.2 : 0.8}
           />
         ))}
-        {points.map(p => <line key={p.key} x1={cx} y1={cy} x2={p.gx} y2={p.gy} stroke="rgba(148,163,184,0.08)" />)}
+        {points.map(p => <line key={p.key} x1={cx} y1={cy} x2={p.gx} y2={p.gy} stroke="hsl(var(--border) / 0.4)" />)}
         <polygon points={polygon} fill="url(#emotionRadarFill)" stroke={color} strokeWidth="2" />
-        {points.map(p => <circle key={p.key} cx={p.x} cy={p.y} r="2.8" fill={color} stroke="rgba(15,23,42,0.9)" strokeWidth="1" />)}
+        {points.map(p => <circle key={p.key} cx={p.x} cy={p.y} r="2.8" fill={color} stroke="hsl(var(--surface) / 0.9)" strokeWidth="1" />)}
         <circle cx={cx} cy={cy} r="29" fill="url(#emotionRadarCenter)" />
         <text x={cx} y={cy + 7} textAnchor="middle" className="fill-foreground font-mono text-[24px] font-bold">{score}</text>
         {points.map(p => (
diff --git a/frontend/src/pages/backtest/StrategyBacktest.tsx b/frontend/src/pages/backtest/StrategyBacktest.tsx
index bc951c5..30f89b1 100644
--- a/frontend/src/pages/backtest/StrategyBacktest.tsx
+++ b/frontend/src/pages/backtest/StrategyBacktest.tsx
@@ -186,7 +186,8 @@ const fmtLots = (v: number | null | undefined) => {
 }
 
 const statValueColor = (v: number | null | undefined) => {
-  if (v == null || Number.isNaN(v) || v === 0) return '#f8fafc'
+  // 中性值继承页面前景色 (亮暗主题都可读), 不再写死近白色
+  if (v == null || Number.isNaN(v) || v === 0) return 'inherit'
   return v > 0 ? '#f87171' : '#34d399'
 }
 
@@ -383,7 +384,7 @@ function Stat({ label, value, color }: { label: ReactNode; value: string; color?
       <div className="text-[11px] text-secondary">{label}</div>
       <div
         className="mt-1 break-words text-sm font-mono font-semibold leading-tight tracking-tight num xl:text-base"
-        style={{ color: color ?? '#f8fafc' }}
+        style={{ color: color ?? 'inherit' }}
         title={value}
       >
         {value}