fix: 3 display bugs found in full-page audit
1. MacroVibesPageClient — funding stats rendered "undefined%" when latest_rate_pct / last_24h_avg_pct were null. `?.toFixed()` returns undefined inside a template literal → shows as the string "undefined%". Fixed: explicit null check → '—' fallback. 2. SettingsClient — broken internal anchor: href="#btc-settings-panel" but the section id is "btc-settings". "Open panel ↓" link did nothing. Fixed: corrected href to "#btc-settings". 3. KolPageClient — undefined CSS variables throughout the file: --bg-card (transparent) and --border (no border) were never defined in the design system (globals.css uses --surface and --line). KOL cards rendered with transparent bg and invisible borders. Fixed: --bg-card → --surface, --border → --line, --accent → --amber. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -163,8 +163,8 @@ function DigestWidget({
|
|||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
|
marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
|
||||||
borderRadius: 12, background: 'var(--bg-card)',
|
borderRadius: 12, background: 'var(--surface)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--line)',
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{
|
||||||
display: 'flex', justifyContent: 'space-between',
|
display: 'flex', justifyContent: 'space-between',
|
||||||
@@ -451,8 +451,8 @@ function WalletCheckWidget({
|
|||||||
return (
|
return (
|
||||||
<div style={{
|
<div style={{
|
||||||
marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
|
marginBottom: 16, padding: 'clamp(12px, 3vw, 18px)',
|
||||||
borderRadius: 12, background: 'var(--bg-card)',
|
borderRadius: 12, background: 'var(--surface)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--line)',
|
||||||
}}>
|
}}>
|
||||||
<div style={{
|
<div style={{
|
||||||
display: 'flex', justifyContent: 'space-between',
|
display: 'flex', justifyContent: 'space-between',
|
||||||
@@ -506,7 +506,7 @@ function WalletCheckWidget({
|
|||||||
padding: '14px 16px',
|
padding: '14px 16px',
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
background: 'var(--bg-sunk)',
|
background: 'var(--bg-sunk)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--line)',
|
||||||
}}>
|
}}>
|
||||||
<div style={{ minWidth: 0 }}>
|
<div style={{ minWidth: 0 }}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
|
||||||
@@ -860,7 +860,7 @@ export default function KolPage({
|
|||||||
<button
|
<button
|
||||||
onClick={() => setTickerFilter(null)}
|
onClick={() => setTickerFilter(null)}
|
||||||
style={{
|
style={{
|
||||||
background: 'var(--bg-sunk)', border: '1px solid var(--border)',
|
background: 'var(--bg-sunk)', border: '1px solid var(--line)',
|
||||||
borderRadius: 4, padding: '2px 8px',
|
borderRadius: 4, padding: '2px 8px',
|
||||||
cursor: 'pointer', fontSize: 11, color: 'var(--ink-2)',
|
cursor: 'pointer', fontSize: 11, color: 'var(--ink-2)',
|
||||||
}}
|
}}
|
||||||
@@ -901,13 +901,13 @@ export default function KolPage({
|
|||||||
onClick={() => openDetail(p.id)}
|
onClick={() => openDetail(p.id)}
|
||||||
style={{
|
style={{
|
||||||
padding: 14, borderRadius: 10,
|
padding: 14, borderRadius: 10,
|
||||||
background: 'var(--bg-card)',
|
background: 'var(--surface)',
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--line)',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transition: 'border-color 0.15s',
|
transition: 'border-color 0.15s',
|
||||||
}}
|
}}
|
||||||
onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
|
onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--amber)')}
|
||||||
onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--border)')}
|
onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--line)')}
|
||||||
>
|
>
|
||||||
{/* 顶部:作者 + 右侧操作区 */}
|
{/* 顶部:作者 + 右侧操作区 */}
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between',
|
<div style={{ display: 'flex', justifyContent: 'space-between',
|
||||||
|
|||||||
@@ -274,12 +274,12 @@ function FundingPanel({
|
|||||||
}}>
|
}}>
|
||||||
<StatBox
|
<StatBox
|
||||||
label="Latest cycle"
|
label="Latest cycle"
|
||||||
value={`${snap.latest_rate_pct?.toFixed(4)}%`}
|
value={snap.latest_rate_pct == null ? '—' : `${snap.latest_rate_pct.toFixed(4)}%`}
|
||||||
hint="The most recent funding payment, in % per cycle. Positive = longs pay shorts."
|
hint="The most recent funding payment, in % per cycle. Positive = longs pay shorts."
|
||||||
/>
|
/>
|
||||||
<StatBox
|
<StatBox
|
||||||
label="Last 24h avg"
|
label="Last 24h avg"
|
||||||
value={`${snap.last_24h_avg_pct?.toFixed(4)}%`}
|
value={snap.last_24h_avg_pct == null ? '—' : `${snap.last_24h_avg_pct.toFixed(4)}%`}
|
||||||
hint="Average of the last 24 hours of funding cycles. Smooths out one-off prints."
|
hint="Average of the last 24 hours of funding cycles. Smooths out one-off prints."
|
||||||
/>
|
/>
|
||||||
<StatBox
|
<StatBox
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export default function SettingsClient() {
|
|||||||
<div className="settings-scope-copy">
|
<div className="settings-scope-copy">
|
||||||
Strategy mode, BTC leverage, and de-risk behavior used by the Macro Vibes sleeve.
|
Strategy mode, BTC leverage, and de-risk behavior used by the Macro Vibes sleeve.
|
||||||
</div>
|
</div>
|
||||||
<a href="#btc-settings-panel" className="settings-scope-link">Open panel ↓</a>
|
<a href="#btc-settings" className="settings-scope-link">Open panel ↓</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="global-settings" className="settings-scope-card global">
|
<section id="global-settings" className="settings-scope-card global">
|
||||||
|
|||||||
Reference in New Issue
Block a user