|
|
|
@@ -74,17 +74,27 @@ export default function CostHeader({ theme = 'dark', onToggleTheme, orders }: Co
|
|
|
|
|
{/* Logo + 标题 */}
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1, position: 'relative', zIndex: 1 }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
height: 50, borderRadius: 8,
|
|
|
|
|
height: 50, borderRadius: 10,
|
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
background: isLight ? '#ffffff' : 'rgba(235,242,255,0.95)',
|
|
|
|
|
background: isLight ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.08)',
|
|
|
|
|
border: `1px solid ${isLight ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.15)'}`,
|
|
|
|
|
padding: '0 10px',
|
|
|
|
|
boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
|
|
|
|
|
backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
|
|
|
|
|
boxShadow: isLight
|
|
|
|
|
? '0 2px 12px rgba(0,0,0,0.08)'
|
|
|
|
|
: '0 0 20px rgba(0,212,255,0.08), inset 0 0 12px rgba(255,255,255,0.04)',
|
|
|
|
|
}}>
|
|
|
|
|
<img
|
|
|
|
|
src="/regal-rexnord-logo.png"
|
|
|
|
|
alt="Regal Rexnord"
|
|
|
|
|
style={{ height: '92%', objectFit: 'contain' }}
|
|
|
|
|
style={{
|
|
|
|
|
height: '86%', objectFit: 'contain',
|
|
|
|
|
filter: isLight
|
|
|
|
|
? 'brightness(0.25) contrast(1.1)'
|
|
|
|
|
: 'brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.45))',
|
|
|
|
|
opacity: isLight ? 0.9 : 0.95,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
@@ -94,7 +104,7 @@ export default function CostHeader({ theme = 'dark', onToggleTheme, orders }: Co
|
|
|
|
|
letterSpacing: '0.05em', margin: 0,
|
|
|
|
|
textShadow: tokens.titleGlow,
|
|
|
|
|
}}>
|
|
|
|
|
订单成本枢纽平台
|
|
|
|
|
AI+成本智能分析平台
|
|
|
|
|
</h1>
|
|
|
|
|
<span style={{
|
|
|
|
|
display: 'inline-flex', alignItems: 'center', gap: 4,
|
|
|
|
@@ -116,48 +126,52 @@ export default function CostHeader({ theme = 'dark', onToggleTheme, orders }: Co
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 分隔线 */}
|
|
|
|
|
<div style={{ width: 1, height: 44, background: `linear-gradient(to bottom, transparent, ${tokens.accent}33, transparent)`, flexShrink: 0, marginRight: 24, position: 'relative', zIndex: 1 }} />
|
|
|
|
|
<div style={{ width: 1, height: 44, background: `linear-gradient(to bottom, transparent, ${tokens.accent}33, transparent)`, flexShrink: 0, marginRight: 20, position: 'relative', zIndex: 1 }} />
|
|
|
|
|
|
|
|
|
|
{/* 统计指标 */}
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flex: 1, justifyContent: 'center', position: 'relative', zIndex: 1, marginTop: 24 }}>
|
|
|
|
|
{stats.map((item, idx) => (
|
|
|
|
|
<div key={item.label} style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
textAlign: 'center', padding: '6px 16px', borderRadius: 10,
|
|
|
|
|
background: tokens.kpiCardBg, border: `1px solid ${tokens.kpiCardBorder}`,
|
|
|
|
|
backdropFilter: 'blur(8px)',
|
|
|
|
|
}}>
|
|
|
|
|
<div style={{ color: item.color, fontSize: 24, fontWeight: 800, lineHeight: 1, textShadow: isLight ? 'none' : `0 0 12px ${item.color}80` }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
|
|
|
|
|
flex: 1, position: 'relative', zIndex: 1,
|
|
|
|
|
}}>
|
|
|
|
|
{stats.map((item) => (
|
|
|
|
|
<div key={item.label} style={{
|
|
|
|
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
|
|
|
padding: '7px 14px', borderRadius: 20,
|
|
|
|
|
background: isLight ? 'rgba(255,255,255,0.42)' : 'rgba(0,20,50,0.32)',
|
|
|
|
|
border: `1px solid ${isLight ? 'rgba(0,0,0,0.06)' : tokens.accent + '18'}`,
|
|
|
|
|
backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
|
|
|
|
|
boxShadow: isLight ? '0 1px 4px rgba(0,0,0,0.04)' : '0 2px 10px rgba(0,0,0,0.15)',
|
|
|
|
|
transition: 'all 0.2s ease',
|
|
|
|
|
}}>
|
|
|
|
|
<span style={{
|
|
|
|
|
width: 7, height: 7, borderRadius: '50%', flexShrink: 0,
|
|
|
|
|
background: item.color,
|
|
|
|
|
boxShadow: `0 0 8px ${item.color}`,
|
|
|
|
|
}} />
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
|
|
|
|
|
<span style={{
|
|
|
|
|
color: item.color, fontSize: 17, fontWeight: 800, lineHeight: 1,
|
|
|
|
|
textShadow: isLight ? 'none' : `0 0 10px ${item.color}80`,
|
|
|
|
|
fontVariantNumeric: 'tabular-nums',
|
|
|
|
|
}}>
|
|
|
|
|
{item.value}
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ color: isLight ? tokens.textSub : tokens.textMuted, fontSize: 13, marginTop: 4, letterSpacing: '0.04em', fontWeight: 600 }}>
|
|
|
|
|
</span>
|
|
|
|
|
<span style={{
|
|
|
|
|
color: isLight ? tokens.textSub : tokens.textMuted,
|
|
|
|
|
fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap', letterSpacing: '0.02em',
|
|
|
|
|
}}>
|
|
|
|
|
{item.label}
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
{idx < stats.length - 1 && <div style={{ width: 1, height: 36, background: `${tokens.accent}18`, margin: '0 3px' }} />}
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 右分隔线 */}
|
|
|
|
|
<div style={{ width: 1, height: 44, background: `linear-gradient(to bottom, transparent, ${tokens.accent}33, transparent)`, flexShrink: 0, marginLeft: 24, position: 'relative', zIndex: 1 }} />
|
|
|
|
|
<div style={{ width: 1, height: 44, background: `linear-gradient(to bottom, transparent, ${tokens.accent}33, transparent)`, flexShrink: 0, marginLeft: 20, position: 'relative', zIndex: 1 }} />
|
|
|
|
|
|
|
|
|
|
{/* 时间 + 切换按钮 */}
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1, justifyContent: 'flex-end', position: 'relative', zIndex: 1 }}>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => navigate('/')}
|
|
|
|
|
style={{
|
|
|
|
|
padding: '6px 12px', borderRadius: 8, cursor: 'pointer',
|
|
|
|
|
border: `1px solid ${tokens.accent}55`,
|
|
|
|
|
background: tokens.accentBg,
|
|
|
|
|
color: tokens.accent, fontSize: 12, fontWeight: 600,
|
|
|
|
|
transition: 'all 0.18s ease',
|
|
|
|
|
}}
|
|
|
|
|
onMouseEnter={e => { e.currentTarget.style.background = `${tokens.accent}18`; e.currentTarget.style.borderColor = tokens.accent; }}
|
|
|
|
|
onMouseLeave={e => { e.currentTarget.style.background = tokens.accentBg; e.currentTarget.style.borderColor = `${tokens.accent}55`; }}
|
|
|
|
|
>
|
|
|
|
|
← 返回平台
|
|
|
|
|
</button>
|
|
|
|
|
<div style={{ textAlign: 'right' }}>
|
|
|
|
|
<div style={{ color: tokens.accent, fontSize: 20, fontWeight: 700, fontVariantNumeric: 'tabular-nums', lineHeight: 1, textShadow: isLight ? 'none' : `0 0 16px ${tokens.accentGlow}`, letterSpacing: '0.05em' }}>
|
|
|
|
|
{timeStr}
|
|
|
|
@@ -170,6 +184,22 @@ export default function CostHeader({ theme = 'dark', onToggleTheme, orders }: Co
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 返回平台按钮 */}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => navigate('/')}
|
|
|
|
|
style={{
|
|
|
|
|
padding: '6px 12px', borderRadius: 8, cursor: 'pointer',
|
|
|
|
|
border: `1px solid ${isLight ? 'rgba(0,80,180,0.4)' : 'rgba(0,212,255,0.55)'}`,
|
|
|
|
|
background: isLight ? 'rgba(0,80,180,0.06)' : 'rgba(0,212,255,0.08)',
|
|
|
|
|
color: isLight ? '#1e3a6e' : '#00d4ff', fontSize: 12, fontWeight: 600,
|
|
|
|
|
transition: 'all 0.18s ease',
|
|
|
|
|
}}
|
|
|
|
|
onMouseEnter={e => { e.currentTarget.style.background = isLight ? 'rgba(0,80,180,0.12)' : 'rgba(0,212,255,0.18)'; }}
|
|
|
|
|
onMouseLeave={e => { e.currentTarget.style.background = isLight ? 'rgba(0,80,180,0.06)' : 'rgba(0,212,255,0.08)'; }}
|
|
|
|
|
>
|
|
|
|
|
← 返回平台
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{/* 切换风格按钮 */}
|
|
|
|
|
{onToggleTheme && (
|
|
|
|
|
<button
|
|
|
|
|