liuyu/nofx
1
0
Fork 0
mirror of https://github.com/NoFxAiOS/nofx.git synced 2026-07-05 20:11:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Optimize mobile display to prevent selection boxes from exceeding the screen boundaries.

Browse Source
This commit is contained in:
SkywalkerJi
2025-10-30 12:08:39 +08:00
parent 0072c6ee09
commit 616215cdd9
2 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/EquityChart.tsx
View File

@@ -154,19 +154,19 @@ export function EquityChart({ traderId }: EquityChartProps) {
};
return (
<div className="binance-card p-5 animate-fade-in">
<div className="binance-card p-3 sm:p-5 animate-fade-in">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>{t('accountEquityCurve', language)}</h3>
<div className="flex items-baseline gap-4">
<span className="text-3xl font-bold mono" style={{ color: '#EAECEF' }}>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
<div className="flex-1">
<h3 className="text-base sm:text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>{t('accountEquityCurve', language)}</h3>
<div className="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
<span className="text-2xl sm:text-3xl font-bold mono" style={{ color: '#EAECEF' }}>
{account?.total_equity.toFixed(2) || '0.00'}
<span className="text-lg ml-1" style={{ color: '#848E9C' }}>USDT</span>
<span className="text-base sm:text-lg ml-1" style={{ color: '#848E9C' }}>USDT</span>
</span>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-wrap">
<span
className="text-lg font-bold mono px-3 py-1 rounded"
className="text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded"
style={{
color: isProfit ? '#0ECB81' : '#F6465D',
background: isProfit ? 'rgba(14, 203, 129, 0.1)' : 'rgba(246, 70, 93, 0.1)',
@@ -176,7 +176,7 @@ export function EquityChart({ traderId }: EquityChartProps) {
{isProfit ? '▲' : '▼'} {isProfit ? '+' : ''}
{currentValue.raw_pnl_pct}%
</span>
<span className="text-sm mono" style={{ color: '#848E9C' }}>
<span className="text-xs sm:text-sm mono" style={{ color: '#848E9C' }}>
({isProfit ? '+' : ''}{currentValue.raw_pnl.toFixed(2)} USDT)
</span>
</div>
@@ -184,10 +184,10 @@ export function EquityChart({ traderId }: EquityChartProps) {
</div>
{/* Display Mode Toggle */}
<div className="flex gap-1 rounded p-1" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
<div className="flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
<button
onClick={() => setDisplayMode('dollar')}
className="px-4 py-2 rounded text-sm font-bold transition-all"
className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all"
style={displayMode === 'dollar'
? { background: '#F0B90B', color: '#000', boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)' }
: { background: 'transparent', color: '#848E9C' }
@@ -197,7 +197,7 @@ export function EquityChart({ traderId }: EquityChartProps) {
</button>
<button
onClick={() => setDisplayMode('percent')}
className="px-4 py-2 rounded text-sm font-bold transition-all"
className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all"
style={displayMode === 'percent'
? { background: '#F0B90B', color: '#000', boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)' }
: { background: 'transparent', color: '#848E9C' }
@@ -262,26 +262,26 @@ export function EquityChart({ traderId }: EquityChartProps) {
</div>
{/* Footer Stats */}
<div className="mt-3 grid grid-cols-4 gap-3 pt-3" style={{ borderTop: '1px solid #2B3139' }}>
<div className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3" style={{ borderTop: '1px solid #2B3139' }}>
<div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
<div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('initialBalance', language)}</div>
<div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
<div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
{initialBalance.toFixed(2)} USDT
</div>
</div>
<div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
<div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('currentEquity', language)}</div>
<div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
<div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
{currentValue.raw_equity.toFixed(2)} USDT
</div>
</div>
<div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
<div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('historicalCycles', language)}</div>
<div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>{history.length} {t('cycles', language)}</div>
<div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>{history.length} {t('cycles', language)}</div>
</div>
<div className="p-2 rounded transition-all hover:bg-opacity-50" style={{ background: 'rgba(240, 185, 11, 0.05)' }}>
<div className="text-xs mb-1 uppercase tracking-wider" style={{ color: '#848E9C' }}>{t('displayRange', language)}</div>
<div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
<div className="text-xs sm:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
{history.length > MAX_DISPLAY_POINTS
? `${t('recent', language)} ${MAX_DISPLAY_POINTS}`
: t('allData', language)