fix(theme): 亮色模式实测修正 — 看板雷达图/近白文字/图例颜色

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

实测覆盖: 看板/个股分析(K线)/市场情绪 亮暗双向切换 + 刷新持久化
(预渲染脚本生效, body 背景 #FAFAFA), 暗色无回归
This commit is contained in:
Gundy
2026-07-03 13:51:36 +08:00
parent 8abf7e338a
commit abd17f53ca
3 changed files with 13 additions and 11 deletions
@@ -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>
+8 -7
View File
@@ -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 => (
@@ -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}