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

fix: prevent DeepSeek token overflow with product-level limits (#1431)

Browse Source 
* feat: enforce strategy limits to prevent token overflow

* fix: tune token limits after real-world testing

- Relax kline max 20→30, timeframes 3→4 (tested ~41K tokens, safe under 131K)
- Restore ranking limits to original [5,10,15,20] options (only ~1.5K token impact)
- Add static coins limit (max 3) with toast notification
- Add timeframe limit toast when exceeding 4
- Log SSE token usage (prompt/completion/total) from API response
- Fix nil logger crash in claw402 data client (engine.go)

* feat: add token estimation functionality for strategy configurations

* feat: add discard changes button in Strategy Studio for unsaved modifications

* feat: retain selected strategy after saving in Strategy Studio

* feat: enhance strategy display in Strategy Studio with improved layout and sorting of token limits

* refactor: improve layout and styling of stats display in CompetitionPage

* refactor: replace select elements with NofxSelect component for improved consistency in strategy configuration forms

* style: update NofxSelect component to use smaller text size for improved readability

* feat: implement token overflow handling in strategy updates and UI

---------

Co-authored-by: Dean <afei.wuhao@gmail.com>
This commit is contained in:
deanokk
2026-03-27 00:26:40 +08:00
committed by shinchan-zhai
parent b705810ec2
commit 79a3be1874
20 changed files with 1124 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/components/strategy/CoinSourceEditor.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react'
import { Plus, X, Database, TrendingUp, TrendingDown, List, Ban, Zap, Shuffle } from 'lucide-react'
import type { CoinSourceConfig } from '../../types'
import { coinSource, ts } from '../../i18n/strategy-translations'
import { NofxSelect } from '../ui/select'
interface CoinSourceEditorProps {
config: CoinSourceConfig
@@ -24,7 +25,6 @@ export function CoinSourceEditor({
{ value: 'ai500', icon: Database, color: '#F0B90B' },
{ value: 'oi_top', icon: TrendingUp, color: '#0ECB81' },
{ value: 'oi_low', icon: TrendingDown, color: '#F6465D' },
{ value: 'mixed', icon: Shuffle, color: '#60a5fa' },
] as const
// Calculate mixed mode summary
@@ -71,8 +71,26 @@ export function CoinSourceEditor({
return xyzDexAssets.has(base)
}
const MAX_STATIC_COINS = 3
const showToast = (msg: string) => {
const toast = document.createElement('div')
toast.textContent = msg
toast.className = 'fixed top-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg text-sm z-50 shadow-lg'
toast.style.cssText = 'background:#F6465D;color:#fff;'
document.body.appendChild(toast)
setTimeout(() => toast.remove(), 2000)
}
const handleAddCoin = () => {
if (!newCoin.trim()) return
const currentCoins = config.static_coins || []
if (currentCoins.length >= MAX_STATIC_COINS) {
showToast(language === 'zh' ? `最多添加 ${MAX_STATIC_COINS} 个币种` : `Maximum ${MAX_STATIC_COINS} coins allowed`)
return
}
const symbol = newCoin.toUpperCase().trim()
// For xyz dex assets (stocks, forex, commodities), use xyz: prefix without USDT
@@ -85,7 +103,6 @@ export function CoinSourceEditor({
formattedSymbol = symbol.endsWith('USDT') ? symbol : `${symbol}USDT`
}
const currentCoins = config.static_coins || []
if (!currentCoins.includes(formattedSymbol)) {
onChange({
...config,
@@ -148,7 +165,7 @@ export function CoinSourceEditor({
<label className="block text-sm font-medium mb-3 text-nofx-text">
{ts(coinSource.sourceType, language)}
</label>
<div className="grid grid-cols-5 gap-2">
<div className="grid grid-cols-4 gap-2">
{sourceTypes.map(({ value, icon: Icon, color }) => (
<button
key={value}
@@ -309,19 +326,16 @@ export function CoinSourceEditor({
<span className="text-sm text-nofx-text-muted">
{ts(coinSource.ai500Limit, language)}:
</span>
<select
<NofxSelect
value={config.ai500_limit || 10}
onChange={(e) =>
onChange={(val) =>
!disabled &&
onChange({ ...config, ai500_limit: parseInt(e.target.value) || 10 })
onChange({ ...config, ai500_limit: parseInt(val) || 10 })
}
disabled={disabled}
options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
@@ -366,19 +380,16 @@ export function CoinSourceEditor({
<span className="text-sm text-nofx-text-muted">
{ts(coinSource.oiTopLimit, language)}:
</span>
<select
<NofxSelect
value={config.oi_top_limit || 10}
onChange={(e) =>
onChange={(val) =>
!disabled &&
onChange({ ...config, oi_top_limit: parseInt(e.target.value) || 10 })
onChange({ ...config, oi_top_limit: parseInt(val) || 10 })
}
disabled={disabled}
options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
@@ -423,19 +434,16 @@ export function CoinSourceEditor({
<span className="text-sm text-nofx-text-muted">
{ts(coinSource.oiLowLimit, language)}:
</span>
<select
<NofxSelect
value={config.oi_low_limit || 10}
onChange={(e) =>
onChange={(val) =>
!disabled &&
onChange({ ...config, oi_low_limit: parseInt(e.target.value) || 10 })
onChange({ ...config, oi_low_limit: parseInt(val) || 10 })
}
disabled={disabled}
options={[1, 2, 3].map(n => ({ value: n, label: String(n) }))}
className="px-3 py-1.5 rounded bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
@@ -483,20 +491,13 @@ export function CoinSourceEditor({
{config.use_ai500 && (
<div className="flex items-center gap-2 mt-2 pl-6">
<span className="text-xs text-nofx-text-muted">Limit:</span>
<select
<NofxSelect
value={config.ai500_limit || 10}
onChange={(e) => {
e.stopPropagation()
!disabled && onChange({ ...config, ai500_limit: parseInt(e.target.value) || 10 })
}}
onChange={(val) => !disabled && onChange({ ...config, ai500_limit: parseInt(val) || 10 })}
disabled={disabled}
options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
onClick={(e) => e.stopPropagation()}
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
</div>
@@ -530,20 +531,13 @@ export function CoinSourceEditor({
{config.use_oi_top && (
<div className="flex items-center gap-2 mt-2 pl-6">
<span className="text-xs text-nofx-text-muted">Limit:</span>
<select
<NofxSelect
value={config.oi_top_limit || 10}
onChange={(e) => {
e.stopPropagation()
!disabled && onChange({ ...config, oi_top_limit: parseInt(e.target.value) || 10 })
}}
onChange={(val) => !disabled && onChange({ ...config, oi_top_limit: parseInt(val) || 10 })}
disabled={disabled}
options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
onClick={(e) => e.stopPropagation()}
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
</div>
@@ -577,20 +571,13 @@ export function CoinSourceEditor({
{config.use_oi_low && (
<div className="flex items-center gap-2 mt-2 pl-6">
<span className="text-xs text-nofx-text-muted">Limit:</span>
<select
<NofxSelect
value={config.oi_low_limit || 10}
onChange={(e) => {
e.stopPropagation()
!disabled && onChange({ ...config, oi_low_limit: parseInt(e.target.value) || 10 })
}}
onChange={(val) => !disabled && onChange({ ...config, oi_low_limit: parseInt(val) || 10 })}
disabled={disabled}
options={[5, 10, 15, 20, 30, 50].map(n => ({ value: n, label: String(n) }))}
className="px-2 py-1 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
onClick={(e) => e.stopPropagation()}
>
{[5, 10, 15, 20, 30, 50].map(n => (
<option key={n} value={n}>{n}</option>
))}
</select>
/>
</div>
)}
</div>

37
web/src/components/strategy/GridConfigEditor.tsx
View File

@@ -1,6 +1,7 @@
import { Grid, DollarSign, TrendingUp, Shield, Compass } from 'lucide-react'
import type { GridStrategyConfig } from '../../types'
import { gridConfig, ts } from '../../i18n/strategy-translations'
import { NofxSelect } from '../ui/select'
interface GridConfigEditorProps {
config: GridStrategyConfig
@@ -74,20 +75,21 @@ export function GridConfigEditor({
<p className="text-xs mb-2" style={{ color: '#848E9C' }}>
{ts(gridConfig.symbolDesc, language)}
</p>
<select
<NofxSelect
value={config.symbol}
onChange={(e) => updateField('symbol', e.target.value)}
onChange={(val) => updateField('symbol', val)}
disabled={disabled}
className="w-full px-3 py-2 rounded"
style={inputStyle}
>
<option value="BTCUSDT">BTC/USDT</option>
<option value="ETHUSDT">ETH/USDT</option>
<option value="SOLUSDT">SOL/USDT</option>
<option value="BNBUSDT">BNB/USDT</option>
<option value="XRPUSDT">XRP/USDT</option>
<option value="DOGEUSDT">DOGE/USDT</option>
</select>
options={[
{ value: 'BTCUSDT', label: 'BTC/USDT' },
{ value: 'ETHUSDT', label: 'ETH/USDT' },
{ value: 'SOLUSDT', label: 'SOL/USDT' },
{ value: 'BNBUSDT', label: 'BNB/USDT' },
{ value: 'XRPUSDT', label: 'XRP/USDT' },
{ value: 'DOGEUSDT', label: 'DOGE/USDT' },
]}
/>
</div>
{/* Investment */}
@@ -170,17 +172,18 @@ export function GridConfigEditor({
<p className="text-xs mb-2" style={{ color: '#848E9C' }}>
{ts(gridConfig.distributionDesc, language)}
</p>
<select
<NofxSelect
value={config.distribution}
onChange={(e) => updateField('distribution', e.target.value as 'uniform' | 'gaussian' | 'pyramid')}
onChange={(val) => updateField('distribution', val as 'uniform' | 'gaussian' | 'pyramid')}
disabled={disabled}
className="w-full px-3 py-2 rounded"
style={inputStyle}
>
<option value="uniform">{ts(gridConfig.uniform, language)}</option>
<option value="gaussian">{ts(gridConfig.gaussian, language)}</option>
<option value="pyramid">{ts(gridConfig.pyramid, language)}</option>
</select>
options={[
{ value: 'uniform', label: ts(gridConfig.uniform, language) },
{ value: 'gaussian', label: ts(gridConfig.gaussian, language) },
{ value: 'pyramid', label: ts(gridConfig.pyramid, language) },
]}
/>
</div>
</div>
</div>

79
web/src/components/strategy/IndicatorEditor.tsx
View File

@@ -1,6 +1,7 @@
import { Clock, Activity, TrendingUp, BarChart2, Info, Lock, ExternalLink, Zap, Check, AlertCircle, Key } from 'lucide-react'
import type { IndicatorConfig } from '../../types'
import { indicator, ts } from '../../i18n/strategy-translations'
import { NofxSelect } from '../ui/select'
// Default NofxOS API Key
const DEFAULT_NOFXOS_API_KEY = 'cm_568c67eae410d912c54c'
@@ -60,6 +61,16 @@ export function IndicatorEditor({
})
}
} else {
if (current.length >= 4) {
// Show toast notification
const toast = document.createElement('div')
toast.textContent = language === 'zh' ? '最多选择 4 个时间维度' : 'Maximum 4 timeframes allowed'
toast.className = 'fixed top-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg text-sm z-50 shadow-lg'
toast.style.cssText = 'background:#F6465D;color:#fff;'
document.body.appendChild(toast)
setTimeout(() => toast.remove(), 2000)
return
}
current.push(tf)
onChange({
...config,
@@ -299,26 +310,22 @@ export function IndicatorEditor({
<p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.oiRankingDesc, language)}</p>
{config.enable_oi_ranking && (
<div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
<select
<NofxSelect
value={config.oi_ranking_duration || '1h'}
onChange={(e) => !disabled && onChange({ ...config, oi_ranking_duration: e.target.value })}
onChange={(val) => !disabled && onChange({ ...config, oi_ranking_duration: val })}
disabled={disabled}
className="flex-1 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
<option value="1h">1h</option>
<option value="4h">4h</option>
<option value="24h">24h</option>
</select>
<select
options={[{ value: '1h', label: '1h' }, { value: '4h', label: '4h' }, { value: '24h', label: '24h' }]}
/>
<NofxSelect
value={config.oi_ranking_limit || 10}
onChange={(e) => !disabled && onChange({ ...config, oi_ranking_limit: parseInt(e.target.value) })}
onChange={(val) => !disabled && onChange({ ...config, oi_ranking_limit: parseInt(val) })}
disabled={disabled}
className="w-14 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
{[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
</select>
options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
/>
</div>
)}
</div>
@@ -359,26 +366,22 @@ export function IndicatorEditor({
<p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.netflowRankingDesc, language)}</p>
{config.enable_netflow_ranking && (
<div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
<select
<NofxSelect
value={config.netflow_ranking_duration || '1h'}
onChange={(e) => !disabled && onChange({ ...config, netflow_ranking_duration: e.target.value })}
onChange={(val) => !disabled && onChange({ ...config, netflow_ranking_duration: val })}
disabled={disabled}
className="flex-1 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
<option value="1h">1h</option>
<option value="4h">4h</option>
<option value="24h">24h</option>
</select>
<select
options={[{ value: '1h', label: '1h' }, { value: '4h', label: '4h' }, { value: '24h', label: '24h' }]}
/>
<NofxSelect
value={config.netflow_ranking_limit || 10}
onChange={(e) => !disabled && onChange({ ...config, netflow_ranking_limit: parseInt(e.target.value) })}
onChange={(val) => !disabled && onChange({ ...config, netflow_ranking_limit: parseInt(val) })}
disabled={disabled}
className="w-14 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
{[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
</select>
options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
/>
</div>
)}
</div>
@@ -419,27 +422,27 @@ export function IndicatorEditor({
<p className="text-[10px] mt-1" style={{ color: '#5E6673' }}>{ts(indicator.priceRankingDesc, language)}</p>
{config.enable_price_ranking && (
<div className="flex gap-2 mt-2" onClick={(e) => e.stopPropagation()}>
<select
<NofxSelect
value={config.price_ranking_duration || '1h,4h,24h'}
onChange={(e) => !disabled && onChange({ ...config, price_ranking_duration: e.target.value })}
onChange={(val) => !disabled && onChange({ ...config, price_ranking_duration: val })}
disabled={disabled}
className="flex-1 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
<option value="1h">1h</option>
<option value="4h">4h</option>
<option value="24h">24h</option>
<option value="1h,4h,24h">{ts(indicator.priceRankingMulti, language)}</option>
</select>
<select
options={[
{ value: '1h', label: '1h' },
{ value: '4h', label: '4h' },
{ value: '24h', label: '24h' },
{ value: '1h,4h,24h', label: ts(indicator.priceRankingMulti, language) },
]}
/>
<NofxSelect
value={config.price_ranking_limit || 10}
onChange={(e) => !disabled && onChange({ ...config, price_ranking_limit: parseInt(e.target.value) })}
onChange={(val) => !disabled && onChange({ ...config, price_ranking_limit: parseInt(val) })}
disabled={disabled}
className="w-14 px-2 py-1 rounded text-[10px]"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
>
{[5, 10, 15, 20].map(n => <option key={n} value={n}>{n}</option>)}
</select>
options={[5, 10, 15, 20].map(n => ({ value: n, label: String(n) }))}
/>
</div>
)}
</div>
@@ -515,7 +518,7 @@ export function IndicatorEditor({
}
disabled={disabled}
min={10}
max={200}
max={30}
className="w-16 px-2 py-1 rounded text-xs text-center"
style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
/>

2
web/src/components/strategy/RiskControlEditor.tsx
View File

@@ -54,7 +54,7 @@ export function RiskControlEditor({
}
disabled={disabled}
min={1}
max={10}
max={3}
className="w-32 px-3 py-2 rounded"
style={{
background: '#1E2329',

143
web/src/components/strategy/TokenEstimateBar.tsx Normal file
View File

@@ -0,0 +1,143 @@
import { useState, useEffect, useRef } from 'react'
import { Loader2, Info } from 'lucide-react'
import type { StrategyConfig } from '../../types'
import { t, type Language } from '../../i18n/translations'
const API_BASE = import.meta.env.VITE_API_BASE || ''
interface ModelLimit {
name: string
context_limit: number
usage_pct: number
level: string
}
interface TokenEstimateResult {
total: number
model_limits: ModelLimit[]
suggestions: string[]
}
interface TokenEstimateBarProps {
config: StrategyConfig | null
language: Language
onOverflowChange?: (overflow: boolean) => void
}
export function TokenEstimateBar({ config, language, onOverflowChange }: TokenEstimateBarProps) {
const [estimate, setEstimate] = useState<TokenEstimateResult | null>(null)
const [isLoading, setIsLoading] = useState(false)
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const tr = (key: string) => t(`strategyStudio.${key}`, language)
useEffect(() => {
if (!config) {
setEstimate(null)
return
}
if (debounceRef.current) {
clearTimeout(debounceRef.current)
}
debounceRef.current = setTimeout(async () => {
setIsLoading(true)
try {
const response = await fetch(`${API_BASE}/api/strategies/estimate-tokens`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ config }),
})
if (response.ok) {
const data = await response.json()
setEstimate(data)
}
} catch {
// silently ignore — non-critical UI element
} finally {
setIsLoading(false)
}
}, 800)
return () => {
if (debounceRef.current) {
clearTimeout(debounceRef.current)
}
}
}, [config])
useEffect(() => {
if (!estimate) {
onOverflowChange?.(false)
return
}
const maxPct = estimate.model_limits.reduce((max, ml) => Math.max(max, ml.usage_pct), 0)
onOverflowChange?.(maxPct >= 100)
}, [estimate, onOverflowChange])
if (!config) return null
if (isLoading && !estimate) {
return (
<div className="flex items-center gap-1.5 text-xs text-nofx-text-muted">
<Loader2 className="w-3 h-3 animate-spin" />
<span>{tr('tokenEstimating')}</span>
</div>
)
}
if (!estimate) return null
// Find the strictest model (smallest context limit = highest usage_pct)
const strictest = estimate.model_limits.reduce(
(max, ml) => (ml.usage_pct > max.usage_pct ? ml : max),
estimate.model_limits[0]
)
if (!strictest) return null
const pct = strictest.usage_pct
const barWidth = Math.min(pct, 100)
let barColor = '#0ECB81' // green
let textColor = '#848E9C'
if (pct >= 100) {
barColor = '#F6465D' // red
textColor = '#F6465D'
} else if (pct >= 80) {
barColor = '#F0B90B' // yellow
textColor = '#F0B90B'
}
const exceedWarning = pct >= 100 ? tr('tokenExceedWarning') : null
return (
<div className="space-y-1">
<div className="flex items-center gap-2">
<div
className="flex-1 h-1.5 rounded-full overflow-hidden"
style={{ background: '#1E2329' }}
>
<div
className="h-full rounded-full transition-all duration-500"
style={{ width: `${barWidth}%`, background: barColor }}
/>
</div>
<span className="text-xs font-mono whitespace-nowrap" style={{ color: textColor }}>
{isLoading ? <Loader2 className="w-3 h-3 animate-spin inline" /> : `${pct}%`}
</span>
<div className="relative group">
<Info className="w-3 h-3 text-nofx-text-muted cursor-help" />
<div className="absolute bottom-full right-0 mb-1.5 px-2.5 py-1.5 rounded-lg text-[10px] whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 bg-nofx-bg-lighter border border-nofx-border text-nofx-text-muted shadow-lg">
{tr('tokenTooltip')} ({strictest.name} {(strictest.context_limit / 1000).toFixed(0)}K)
</div>
</div>
</div>
{exceedWarning && (
<p className="text-[10px]" style={{ color: '#F6465D' }}>
{exceedWarning}
</p>
)}
</div>
)
}

22
web/src/components/trader/CompetitionPage.tsx
View File

@@ -281,14 +281,14 @@ export function CompetitionPage() {
</div>
{/* Stats */}
<div className="flex items-center gap-2 md:gap-3 flex-wrap md:flex-nowrap">
<div className="flex items-center gap-4 md:gap-6">
{/* Total Equity */}
<div className="text-right">
<div className="text-xs" style={{ color: '#848E9C' }}>
<div className="text-right min-w-[60px] md:min-w-[80px]">
<div className="text-[10px] mb-0.5" style={{ color: '#848E9C' }}>
{t('equity', language)}
</div>
<div
className="text-xs md:text-sm font-bold mono"
className="text-sm md:text-base font-bold mono"
style={{ color: '#EAECEF' }}
>
{trader.total_equity?.toFixed(2) || '0.00'}
@@ -297,11 +297,11 @@ export function CompetitionPage() {
{/* P&L */}
<div className="text-right min-w-[70px] md:min-w-[90px]">
<div className="text-xs" style={{ color: '#848E9C' }}>
<div className="text-[10px] mb-0.5" style={{ color: '#848E9C' }}>
{t('pnl', language)}
</div>
<div
className="text-base md:text-lg font-bold mono"
className="text-sm md:text-base font-bold mono"
style={{
color:
(trader.total_pnl ?? 0) >= 0
@@ -313,7 +313,7 @@ export function CompetitionPage() {
{trader.total_pnl_pct?.toFixed(2) || '0.00'}%
</div>
<div
className="text-xs mono"
className="text-[10px] mono"
style={{ color: '#848E9C' }}
>
{(trader.total_pnl ?? 0) >= 0 ? '+' : ''}
@@ -322,17 +322,17 @@ export function CompetitionPage() {
</div>
{/* Positions */}
<div className="text-right">
<div className="text-xs" style={{ color: '#848E9C' }}>
<div className="text-right min-w-[40px] md:min-w-[50px]">
<div className="text-[10px] mb-0.5" style={{ color: '#848E9C' }}>
{t('pos', language)}
</div>
<div
className="text-xs md:text-sm font-bold mono"
className="text-sm md:text-base font-bold mono"
style={{ color: '#EAECEF' }}
>
{trader.position_count}
</div>
<div className="text-xs" style={{ color: '#848E9C' }}>
<div className="text-[10px]" style={{ color: '#848E9C' }}>
{trader.margin_used_pct.toFixed(1)}%
</div>
</div>

55
web/src/components/trader/PositionHistory.tsx
View File

@@ -4,6 +4,7 @@ import { useLanguage } from '../../contexts/LanguageContext'
import { t, type Language } from '../../i18n/translations'
import { MetricTooltip } from '../common/MetricTooltip'
import { formatPrice, formatQuantity } from '../../utils/format'
import { NofxSelect } from '../ui/select'
import type {
HistoricalPosition,
TraderStats,
@@ -664,23 +665,20 @@ export function PositionHistory({ traderId }: PositionHistoryProps) {
<span className="text-sm" style={{ color: '#848E9C' }}>
{t('positionHistory.symbol', language)}:
</span>
<select
<NofxSelect
value={filterSymbol}
onChange={(e) => setFilterSymbol(e.target.value)}
onChange={(val) => setFilterSymbol(val)}
options={[
{ value: 'all', label: t('positionHistory.allSymbols', language) },
...uniqueSymbols.map(s => ({ value: s, label: (s || '').replace('USDT', '') }))
]}
className="rounded px-3 py-1.5 text-sm"
style={{
background: '#0B0E11',
border: '1px solid #2B3139',
color: '#EAECEF',
}}
>
<option value="all">{t('positionHistory.allSymbols', language)}</option>
{uniqueSymbols.map((symbol) => (
<option key={symbol} value={symbol}>
{(symbol || '').replace('USDT', '')}
</option>
))}
</select>
/>
</div>
<div className="flex items-center gap-2">
@@ -708,28 +706,26 @@ export function PositionHistory({ traderId }: PositionHistoryProps) {
<span className="text-sm" style={{ color: '#848E9C' }}>
{t('positionHistory.sort', language)}:
</span>
<select
<NofxSelect
value={`${sortBy}-${sortOrder}`}
onChange={(e) => {
const [by, order] = e.target.value.split('-') as [
'time' | 'pnl' | 'pnl_pct',
'asc' | 'desc',
]
onChange={(val) => {
const [by, order] = val.split('-') as ['time' | 'pnl' | 'pnl_pct', 'asc' | 'desc']
setSortBy(by)
setSortOrder(order)
}}
options={[
{ value: 'time-desc', label: t('positionHistory.latestFirst', language) },
{ value: 'time-asc', label: t('positionHistory.oldestFirst', language) },
{ value: 'pnl-desc', label: t('positionHistory.highestPnL', language) },
{ value: 'pnl-asc', label: t('positionHistory.lowestPnL', language) },
]}
className="rounded px-3 py-1.5 text-sm"
style={{
background: '#0B0E11',
border: '1px solid #2B3139',
color: '#EAECEF',
}}
>
<option value="time-desc">{t('positionHistory.latestFirst', language)}</option>
<option value="time-asc">{t('positionHistory.oldestFirst', language)}</option>
<option value="pnl-desc">{t('positionHistory.highestPnL', language)}</option>
<option value="pnl-asc">{t('positionHistory.lowestPnL', language)}</option>
</select>
/>
</div>
</div>
@@ -841,20 +837,21 @@ export function PositionHistory({ traderId }: PositionHistoryProps) {
<span className="text-xs" style={{ color: '#848E9C' }}>
{language === 'zh' ? '每页' : 'Per page'}:
</span>
<select
<NofxSelect
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
onChange={(val) => setPageSize(Number(val))}
options={[
{ value: 20, label: '20' },
{ value: 50, label: '50' },
{ value: 100, label: '100' },
]}
className="rounded px-2 py-1 text-sm"
style={{
background: '#0B0E11',
border: '1px solid #2B3139',
color: '#EAECEF',
}}
>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</select>
/>
</div>
{/* Page navigation */}

39
web/src/components/trader/TelegramConfigModal.tsx
View File

@@ -4,6 +4,7 @@ import { toast } from 'sonner'
import { api } from '../../lib/api'
import type { TelegramConfig, AIModel } from '../../types'
import { t, type Language } from '../../i18n/translations'
import { NofxSelect } from '../ui/select'
// Step indicator (reused pattern from ExchangeConfigModal)
function StepIndicator({ currentStep, labels }: { currentStep: number; labels: string[] }) {
@@ -133,23 +134,20 @@ export function TelegramConfigModal({ onClose, language }: TelegramConfigModalPr
{t('telegram.noEnabledModels', language)}
</div>
) : (
<select
<NofxSelect
value={selectedModelId}
onChange={(e) => setSelectedModelId(e.target.value)}
className="w-full px-4 py-3 rounded-xl text-sm appearance-none"
onChange={(val) => setSelectedModelId(val)}
options={[
{ value: '', label: t('telegram.autoSelect', language) },
...models.map(m => ({ value: m.id, label: `${m.name} (${m.provider}${m.customModelName ? ` · ${m.customModelName}` : ''})` }))
]}
className="w-full px-4 py-3 rounded-xl text-sm"
style={{
background: '#0B0E11',
border: '1px solid #2B3139',
color: selectedModelId ? '#EAECEF' : '#848E9C',
}}
>
<option value="">{t('telegram.autoSelect', language)}</option>
{models.map((m) => (
<option key={m.id} value={m.id}>
{m.name} ({m.provider}{m.customModelName ? ` · ${m.customModelName}` : ''})
</option>
))}
</select>
/>
)}
<div className="text-xs" style={{ color: '#848E9C' }}>
{t('telegram.autoUseEnabled', language)}
@@ -489,23 +487,20 @@ function BoundModelSelector({
{t('telegram.aiModelLabel', language)}
</label>
<div className="flex gap-2">
<select
<NofxSelect
value={modelId}
onChange={(e) => setModelId(e.target.value)}
className="flex-1 px-3 py-2.5 rounded-xl text-sm appearance-none"
onChange={(val) => setModelId(val)}
options={[
{ value: '', label: t('telegram.aiModelAutoSelect', language) },
...models.map(m => ({ value: m.id, label: `${m.name}${m.customModelName ? ` · ${m.customModelName}` : ''}` }))
]}
className="flex-1 px-3 py-2.5 rounded-xl text-sm"
style={{
background: '#0B0E11',
border: '1px solid #2B3139',
color: modelId ? '#EAECEF' : '#848E9C',
}}
>
<option value="">{t('telegram.aiModelAutoSelect', language)}</option>
{models.map((m) => (
<option key={m.id} value={m.id}>
{m.name}{m.customModelName ? ` · ${m.customModelName}` : ''}
</option>
))}
</select>
/>
<button
onClick={handleSave}
disabled={isSaving || modelId === currentModelId}

69
web/src/components/trader/TraderConfigModal.tsx
View File

@@ -5,6 +5,7 @@ import { t } from '../../i18n/translations'
import { toast } from 'sonner'
import { Pencil, Plus, X as IconX, Sparkles, ExternalLink, UserPlus } from 'lucide-react'
import { httpClient } from '../../lib/httpClient'
import { NofxSelect } from '../ui/select'
// 提取下划线后面的名称部分
function getShortName(fullName: string): string {
@@ -250,38 +251,34 @@ export function TraderConfigModal({
<label className="text-sm text-[#EAECEF] block mb-2">
{t('aiModelRequired', language)}
</label>
<select
<NofxSelect
value={formData.ai_model}
onChange={(e) =>
handleInputChange('ai_model', e.target.value)
onChange={(val) =>
handleInputChange('ai_model', val)
}
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
>
{availableModels.map((model) => (
<option key={model.id} value={model.id}>
{getShortName(model.name || model.id).toUpperCase()}
</option>
))}
</select>
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF]"
options={availableModels.map((model) => ({
value: model.id,
label: getShortName(model.name || model.id).toUpperCase(),
}))}
/>
</div>
<div>
<label className="text-sm text-[#EAECEF] block mb-2">
{t('exchangeRequired', language)}
</label>
<select
<NofxSelect
value={formData.exchange_id}
onChange={(e) =>
handleInputChange('exchange_id', e.target.value)
onChange={(val) =>
handleInputChange('exchange_id', val)
}
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
>
{availableExchanges.map((exchange) => (
<option key={exchange.id} value={exchange.id}>
{getShortName(exchange.name || exchange.exchange_type || exchange.id).toUpperCase()}
{exchange.account_name ? ` - ${exchange.account_name}` : ''}
</option>
))}
</select>
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF]"
options={availableExchanges.map((exchange) => ({
value: exchange.id,
label: getShortName(exchange.name || exchange.exchange_type || exchange.id).toUpperCase()
+ (exchange.account_name ? ` - ${exchange.account_name}` : ''),
}))}
/>
{/* Exchange Registration Link */}
{formData.exchange_id && (() => {
// Find the selected exchange to get its type
@@ -323,22 +320,20 @@ export function TraderConfigModal({
<label className="text-sm text-[#EAECEF] block mb-2">
{t('useStrategy', language)}
</label>
<select
<NofxSelect
value={formData.strategy_id}
onChange={(e) =>
handleInputChange('strategy_id', e.target.value)
onChange={(val) =>
handleInputChange('strategy_id', val)
}
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
>
<option value="">{t('noStrategyManual', language)}</option>
{strategies.map((strategy) => (
<option key={strategy.id} value={strategy.id}>
{strategy.name}
{strategy.is_active ? t('strategyActive', language) : ''}
{strategy.is_default ? t('strategyDefault', language) : ''}
</option>
))}
</select>
className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF]"
options={[
{ value: '', label: t('noStrategyManual', language) },
...strategies.map((strategy) => ({
value: strategy.id,
label: strategy.name + (strategy.is_active ? t('strategyActive', language) : '') + (strategy.is_default ? t('strategyDefault', language) : ''),
})),
]}
/>
{strategies.length === 0 && (
<p className="text-xs text-[#848E9C] mt-2">
{t('noStrategyHint', language)}

99
web/src/components/ui/select.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { useRef, useState, useEffect, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { ChevronDown } from 'lucide-react'
import { cn } from '../../lib/cn'
export interface SelectOption {
value: string | number
label: string
}
interface NofxSelectProps {
value: string | number
onChange: (value: string) => void
options: SelectOption[]
disabled?: boolean
className?: string
style?: React.CSSProperties
}
export function NofxSelect({ value, onChange, options, disabled, className, style }: NofxSelectProps) {
const [open, setOpen] = useState(false)
const triggerRef = useRef<HTMLDivElement>(null)
const dropdownRef = useRef<HTMLDivElement>(null)
const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
const selected = options.find(o => String(o.value) === String(value))
const updatePos = useCallback(() => {
if (!triggerRef.current) return
const rect = triggerRef.current.getBoundingClientRect()
setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width })
}, [])
useEffect(() => {
if (!open) return
updatePos()
const handleClose = (e: MouseEvent) => {
const target = e.target as Node
if (triggerRef.current?.contains(target)) return
if (dropdownRef.current?.contains(target)) return
setOpen(false)
}
const handleScroll = () => setOpen(false)
document.addEventListener('mousedown', handleClose)
window.addEventListener('scroll', handleScroll, true)
return () => {
document.removeEventListener('mousedown', handleClose)
window.removeEventListener('scroll', handleScroll, true)
}
}, [open, updatePos])
return (
<div
ref={triggerRef}
className={cn('relative', className)}
style={style}
>
<div
className={cn(
'flex items-center justify-between gap-1.5 w-full h-full cursor-pointer',
disabled && 'opacity-50 cursor-not-allowed',
)}
onClick={(e) => {
e.stopPropagation()
if (!disabled) setOpen(!open)
}}
>
<span className="truncate">{selected?.label ?? String(value)}</span>
<ChevronDown className={cn('w-3 h-3 shrink-0 opacity-50 transition-transform', open && 'rotate-180')} />
</div>
{open && createPortal(
<div
ref={dropdownRef}
className="fixed z-[9999] rounded border border-[#2B3139] bg-[#0B0E11] shadow-xl shadow-black/50 max-h-60 overflow-y-auto"
style={{ top: pos.top, left: pos.left, minWidth: pos.width }}
>
{options.map((opt) => (
<div
key={opt.value}
className={cn(
'px-3 py-1.5 text-sm cursor-pointer transition-colors whitespace-nowrap',
String(opt.value) === String(value)
? 'bg-[#F0B90B]/10 text-[#F0B90B]'
: 'text-[#EAECEF] hover:bg-[#1E2329]',
)}
onClick={(e) => {
e.stopPropagation()
onChange(String(opt.value))
setOpen(false)
}}
>
{opt.label}
</div>
))}
</div>,
document.body,
)}
</div>
)
}

15
web/src/i18n/translations.ts
View File

@@ -1080,11 +1080,16 @@ export const translations = {
public: 'Public',
addDescription: 'Add strategy description...',
unsaved: 'Unsaved',
discardChanges: 'Discard',
selectOrCreate: 'Select or create a strategy',
customPromptDesc: 'Extra prompt appended to System Prompt for personalized trading style',
customPromptPlaceholder: 'Enter custom prompt...',
generatePromptPreview: 'Click to generate prompt preview',
runAiTestHint: 'Click to run AI test',
tokenEstimate: 'Token Estimate',
tokenExceedWarning: 'Exceeds context limit. Reduce coins or timeframes.',
tokenEstimating: 'Estimating...',
tokenTooltip: 'Based on strictest model',
},
// Metric Tooltip
@@ -2371,11 +2376,16 @@ export const translations = {
public: '公开',
addDescription: '添加策略简介...',
unsaved: '未保存',
discardChanges: '撤销',
selectOrCreate: '选择或创建策略',
customPromptDesc: '附加在 System Prompt 末尾的额外提示，用于补充个性化交易风格',
customPromptPlaceholder: '输入自定义提示词...',
generatePromptPreview: '点击生成 Prompt 预览',
runAiTestHint: '点击运行 AI 测试',
tokenEstimate: 'Token 预估',
tokenExceedWarning: '超出上下文限制，建议减少币种或时间框架',
tokenEstimating: '预估中...',
tokenTooltip: '基于最严格模型计算',
},
// Metric Tooltip
@@ -3464,11 +3474,16 @@ export const translations = {
public: 'Publik',
addDescription: 'Tambah deskripsi strategi...',
unsaved: 'Belum Disimpan',
discardChanges: 'Buang',
selectOrCreate: 'Pilih atau buat strategi',
customPromptDesc: 'Prompt tambahan di akhir System Prompt untuk gaya trading personal',
customPromptPlaceholder: 'Masukkan prompt kustom...',
generatePromptPreview: 'Klik untuk generate pratinjau prompt',
runAiTestHint: 'Klik untuk menjalankan uji AI',
tokenEstimate: 'Estimasi Token',
tokenExceedWarning: 'Melebihi batas konteks. Kurangi koin atau timeframe.',
tokenEstimating: 'Mengestimasi...',
tokenTooltip: 'Berdasarkan model paling ketat',
},
// Metric Tooltip

167
web/src/pages/StrategyStudioPage.tsx
View File

@@ -29,6 +29,7 @@ import {
Download,
Upload,
Globe,
X,
} from 'lucide-react'
import type { Strategy, StrategyConfig, AIModel } from '../types'
import { confirmToast, notify } from '../lib/notify'
@@ -38,8 +39,10 @@ import { RiskControlEditor } from '../components/strategy/RiskControlEditor'
import { PromptSectionsEditor } from '../components/strategy/PromptSectionsEditor'
import { PublishSettingsEditor } from '../components/strategy/PublishSettingsEditor'
import { GridConfigEditor, defaultGridConfig } from '../components/strategy/GridConfigEditor'
import { TokenEstimateBar } from '../components/strategy/TokenEstimateBar'
import { DeepVoidBackground } from '../components/common/DeepVoidBackground'
import { t } from '../i18n/translations'
import { NofxSelect } from '../components/ui/select'
const API_BASE = import.meta.env.VITE_API_BASE || ''
@@ -52,6 +55,7 @@ export function StrategyStudioPage() {
const [editingConfig, setEditingConfig] = useState<StrategyConfig | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [isSaving, setIsSaving] = useState(false)
const [tokenOverflow, setTokenOverflow] = useState(false)
const [error, setError] = useState<string | null>(null)
const [hasChanges, setHasChanges] = useState(false)
@@ -378,6 +382,10 @@ export function StrategyStudioPage() {
// Save strategy
const handleSaveStrategy = async () => {
if (!token || !selectedStrategy || !editingConfig) return
if (tokenOverflow && currentStrategyType === 'ai_trading') {
notify.error(tr('tokenExceedWarning'))
return
}
setIsSaving(true)
try {
// Always sync the config language with the current interface language
@@ -405,7 +413,17 @@ export function StrategyStudioPage() {
if (!response.ok) throw new Error('Failed to save strategy')
setHasChanges(false)
notify.success(tr('strategySaved'))
const savedId = selectedStrategy.id
await fetchStrategies()
// Stay on the strategy we just saved instead of jumping to active
setStrategies(prev => {
const saved = prev.find(s => s.id === savedId)
if (saved) {
setSelectedStrategy(saved)
setEditingConfig(saved.config)
}
return prev
})
} catch (err) {
setError(err instanceof Error ? err.message : 'Unknown error')
} finally {
@@ -641,7 +659,7 @@ export function StrategyStudioPage() {
<Sparkles className="w-5 h-5 text-black" />
</div>
<div>
<h1 className="text-lg font-bold text-nofx-text">{tr('strategyStudio')}</h1>
<h1 className="text-lg font-bold text-nofx-text">{tr('title')}</h1>
<p className="text-xs text-nofx-text-muted">{tr('subtitle')}</p>
</div>
</div>
@@ -756,34 +774,24 @@ export function StrategyStudioPage() {
{selectedStrategy && editingConfig ? (
<div className="p-4">
{/* Strategy Name & Actions */}
<div className="flex items-center justify-between mb-4">
<div className="flex-1 min-w-0">
<input
type="text"
value={selectedStrategy.name}
onChange={(e) => {
setSelectedStrategy({ ...selectedStrategy, name: e.target.value })
setHasChanges(true)
}}
disabled={selectedStrategy.is_default}
className="text-lg font-bold bg-transparent border-none outline-none w-full text-nofx-text placeholder-nofx-text-muted"
/>
<input
type="text"
value={selectedStrategy.description || ''}
onChange={(e) => {
setSelectedStrategy({ ...selectedStrategy, description: e.target.value })
setHasChanges(true)
}}
disabled={selectedStrategy.is_default}
placeholder={tr('addDescription')}
className="text-xs bg-transparent border-none outline-none w-full text-nofx-text-muted placeholder-nofx-text-muted/50 mt-1"
/>
{hasChanges && (
<span className="text-xs text-nofx-gold">● {tr('unsaved')}</span>
)}
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<div className="mb-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 flex-1 min-w-0">
<input
type="text"
value={selectedStrategy.name}
onChange={(e) => {
setSelectedStrategy({ ...selectedStrategy, name: e.target.value })
setHasChanges(true)
}}
disabled={selectedStrategy.is_default}
className="text-lg font-bold bg-transparent border-none outline-none flex-1 min-w-0 text-nofx-text placeholder-nofx-text-muted"
/>
{hasChanges && (
<span className="text-xs text-nofx-gold whitespace-nowrap">● {tr('unsaved')}</span>
)}
</div>
<div className="flex items-center gap-2 flex-shrink-0 ml-2">
{!selectedStrategy.is_active && (
<button
onClick={() => handleActivateStrategy(selectedStrategy.id)}
@@ -793,10 +801,22 @@ export function StrategyStudioPage() {
{tr('activate')}
</button>
)}
{!selectedStrategy.is_default && hasChanges && (
<button
onClick={() => {
setEditingConfig(selectedStrategy.config)
setHasChanges(false)
}}
className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors text-nofx-text-muted hover:text-nofx-text hover:bg-nofx-bg-lighter border border-nofx-border"
>
<X className="w-3 h-3" />
{tr('discardChanges')}
</button>
)}
{!selectedStrategy.is_default && (
<button
onClick={handleSaveStrategy}
disabled={isSaving || !hasChanges}
disabled={isSaving || !hasChanges || (tokenOverflow && currentStrategyType === 'ai_trading')}
className={`flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors disabled:opacity-50
${hasChanges ? 'bg-nofx-gold text-black hover:bg-yellow-500' : 'bg-nofx-bg-lighter text-nofx-text-muted cursor-not-allowed'}`}
>
@@ -805,8 +825,27 @@ export function StrategyStudioPage() {
</button>
)}
</div>
</div>
<input
type="text"
value={selectedStrategy.description || ''}
onChange={(e) => {
setSelectedStrategy({ ...selectedStrategy, description: e.target.value })
setHasChanges(true)
}}
disabled={selectedStrategy.is_default}
placeholder={tr('addDescription')}
className="text-xs bg-transparent border-none outline-none w-full text-nofx-text-muted placeholder-nofx-text-muted/50 mt-1"
/>
</div>
{/* Token Estimate Bar */}
{currentStrategyType === 'ai_trading' && (
<div className="mb-4">
<TokenEstimateBar config={editingConfig} language={language} onOverflowChange={setTokenOverflow} />
</div>
)}
{/* Strategy Type Selector */}
{editingConfig && (
<div className="mb-4 p-4 rounded-lg bg-nofx-bg-lighter border border-nofx-gold/20">
@@ -818,9 +857,12 @@ export function StrategyStudioPage() {
<button
onClick={() => {
if (!selectedStrategy?.is_default) {
updateConfig('strategy_type', 'ai_trading')
// Clear grid config when switching to AI trading
updateConfig('grid_config', undefined)
setEditingConfig(prev => prev ? {
...prev,
strategy_type: 'ai_trading',
grid_config: undefined,
} : prev)
setHasChanges(true)
}
}}
disabled={selectedStrategy?.is_default}
@@ -839,11 +881,12 @@ export function StrategyStudioPage() {
<button
onClick={() => {
if (!selectedStrategy?.is_default) {
updateConfig('strategy_type', 'grid_trading')
// Initialize grid config if not exists
if (!editingConfig.grid_config) {
updateConfig('grid_config', defaultGridConfig)
}
setEditingConfig(prev => prev ? {
...prev,
strategy_type: 'grid_trading',
grid_config: prev.grid_config || defaultGridConfig,
} : prev)
setHasChanges(true)
}
}}
disabled={selectedStrategy?.is_default}
@@ -934,15 +977,16 @@ export function StrategyStudioPage() {
<div className="p-3 space-y-3">
{/* Controls */}
<div className="flex items-center gap-2 flex-wrap">
<select
<NofxSelect
value={selectedVariant}
onChange={(e) => setSelectedVariant(e.target.value)}
className="px-2 py-1.5 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text outline-none focus:border-nofx-gold"
>
<option value="balanced">{tr('balanced')}</option>
<option value="aggressive">{tr('aggressive')}</option>
<option value="conservative">{tr('conservative')}</option>
</select>
onChange={(val) => setSelectedVariant(val)}
options={[
{ value: 'balanced', label: tr('balanced') },
{ value: 'aggressive', label: tr('aggressive') },
{ value: 'conservative', label: tr('conservative') },
]}
className="px-2 py-1.5 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
/>
<button
onClick={fetchPromptPreview}
disabled={isLoadingPrompt || !editingConfig}
@@ -1007,17 +1051,15 @@ export function StrategyStudioPage() {
<span className="text-xs font-medium text-nofx-text">{tr('selectModel')}</span>
</div>
{aiModels.length > 0 ? (
<select
<NofxSelect
value={selectedModelId}
onChange={(e) => setSelectedModelId(e.target.value)}
onChange={(val) => setSelectedModelId(val)}
options={aiModels.map((model) => ({
value: model.id,
label: `${model.name} (${model.provider})`,
}))}
className="w-full px-3 py-2 rounded-lg text-sm bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
>
{aiModels.map((model) => (
<option key={model.id} value={model.id}>
{model.name} ({model.provider})
</option>
))}
</select>
/>
) : (
<div className="px-3 py-2 rounded-lg text-sm bg-nofx-danger/10 text-nofx-danger">
{tr('noModel')}
@@ -1025,15 +1067,16 @@ export function StrategyStudioPage() {
)}
<div className="flex items-center gap-2">
<select
<NofxSelect
value={selectedVariant}
onChange={(e) => setSelectedVariant(e.target.value)}
onChange={(val) => setSelectedVariant(val)}
options={[
{ value: 'balanced', label: tr('balanced') },
{ value: 'aggressive', label: tr('aggressive') },
{ value: 'conservative', label: tr('conservative') },
]}
className="px-2 py-1.5 rounded text-xs bg-nofx-bg border border-nofx-gold/20 text-nofx-text"
>
<option value="balanced">{tr('balanced')}</option>
<option value="aggressive">{tr('aggressive')}</option>
<option value="conservative">{tr('conservative')}</option>
</select>
/>
<button
onClick={runAiTest}
disabled={isRunningAiTest || !editingConfig || !selectedModelId}

118
web/src/pages/TraderDashboardPage.tsx
View File

@@ -10,6 +10,7 @@ import { formatPrice, formatQuantity } from '../utils/format'
import { t, type Language } from '../i18n/translations'
import { LogOut, Loader2, Eye, EyeOff, Copy, Check } from 'lucide-react'
import { DeepVoidBackground } from '../components/common/DeepVoidBackground'
import { NofxSelect } from '../components/ui/select'
import { GridRiskPanel } from '../components/strategy/GridRiskPanel'
import type {
SystemStatus,
@@ -376,17 +377,12 @@ export function TraderDashboardPage({
{/* Trader Selector */}
{traders && traders.length > 0 && (
<div className="flex items-center gap-2 nofx-glass px-1 py-1 rounded-lg border border-white/5">
<select
value={selectedTraderId}
onChange={(e) => onTraderSelect(e.target.value)}
className="bg-transparent text-sm font-medium cursor-pointer transition-colors text-nofx-text-main focus:outline-none px-2 py-1"
>
{traders.map((trader) => (
<option key={trader.trader_id} value={trader.trader_id} className="bg-[#0B0E11]">
{trader.trader_name}
</option>
))}
</select>
<NofxSelect
value={selectedTraderId || ''}
onChange={(val) => onTraderSelect(val)}
options={traders.map(t => ({ value: t.trader_id, label: t.trader_name }))}
className="bg-transparent text-sm font-medium cursor-pointer transition-colors text-nofx-text-main px-2 py-1"
/>
</div>
)}
@@ -484,16 +480,22 @@ export function TraderDashboardPage({
</div>
{/* Debug Info */}
{account && (
<div className="mb-4 px-3 py-1.5 rounded bg-black/40 border border-white/5 text-[10px] font-mono text-nofx-text-muted flex justify-between items-center opacity-60 hover:opacity-100 transition-opacity">
<span>SYSTEM_STATUS::ONLINE</span>
<div className="mb-4 px-3 py-1.5 rounded bg-black/40 border border-white/5 text-[10px] font-mono text-nofx-text-muted flex justify-between items-center opacity-60 hover:opacity-100 transition-opacity">
<span style={{ color: '#0ECB81' }}>SYSTEM_STATUS::ONLINE</span>
{account ? (
<div className="flex gap-4">
<span>LAST_UPDATE::{lastUpdate}</span>
<span>EQ::{account?.total_equity?.toFixed(2)}</span>
<span>PNL::{account?.total_pnl?.toFixed(2)}</span>
<span>EQ::{account.total_equity?.toFixed(2)}</span>
<span>PNL::{account.total_pnl?.toFixed(2)}</span>
</div>
</div>
)}
) : (
<div className="flex gap-4">
<span className="inline-block w-32 h-3 rounded bg-white/5 animate-pulse" />
<span className="inline-block w-16 h-3 rounded bg-white/5 animate-pulse" />
<span className="inline-block w-16 h-3 rounded bg-white/5 animate-pulse" />
</div>
)}
</div>
{/* Account Overview */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
@@ -504,6 +506,7 @@ export function TraderDashboardPage({
change={account?.total_pnl_pct || 0}
positive={(account?.total_pnl ?? 0) > 0}
icon="💰"
loading={!account}
/>
<StatCard
title={t('availableBalance', language)}
@@ -511,6 +514,7 @@ export function TraderDashboardPage({
unit="USDT"
subtitle={`${account?.available_balance && account?.total_equity ? ((account.available_balance / account.total_equity) * 100).toFixed(1) : '0.0'}% ${t('free', language)}`}
icon="💳"
loading={!account}
/>
<StatCard
title={t('totalPnL', language)}
@@ -519,6 +523,7 @@ export function TraderDashboardPage({
change={account?.total_pnl_pct || 0}
positive={(account?.total_pnl ?? 0) >= 0}
icon="📈"
loading={!account}
/>
<StatCard
title={t('positions', language)}
@@ -526,6 +531,7 @@ export function TraderDashboardPage({
unit="ACTIVE"
subtitle={`${t('margin', language)}: ${account?.margin_used_pct?.toFixed(1) || '0.0'}%`}
icon="📊"
loading={!account}
/>
</div>
@@ -671,15 +677,12 @@ export function TraderDashboardPage({
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<span>{t('traderDashboard.perPage', language)}:</span>
<select
<NofxSelect
value={positionsPageSize}
onChange={(e) => setPositionsPageSize(Number(e.target.value))}
className="bg-black/40 border border-white/10 rounded px-2 py-1 text-xs text-nofx-text-main focus:outline-none focus:border-nofx-gold/50 transition-colors"
>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</select>
onChange={(val) => setPositionsPageSize(Number(val))}
options={[{ value: 20, label: '20' }, { value: 50, label: '50' }, { value: 100, label: '100' }]}
className="bg-black/40 border border-white/10 rounded px-2 py-1 text-xs text-nofx-text-main transition-colors"
/>
</div>
{totalPositionPages > 1 && (
<div className="flex items-center gap-1">
@@ -752,17 +755,12 @@ export function TraderDashboardPage({
)}
</div>
{/* Limit Selector */}
<select
<NofxSelect
value={decisionsLimit}
onChange={(e) => onDecisionsLimitChange(Number(e.target.value))}
className="px-3 py-1.5 rounded-lg text-sm font-medium cursor-pointer transition-all bg-black/40 text-nofx-text-main border border-white/10 hover:border-nofx-accent focus:outline-none"
>
<option value={5}>5</option>
<option value={10}>10</option>
<option value={20}>20</option>
<option value={50}>50</option>
<option value={100}>100</option>
</select>
onChange={(val) => onDecisionsLimitChange(Number(val))}
options={[{ value: 5, label: '5' }, { value: 10, label: '10' }, { value: 20, label: '20' }, { value: 50, label: '50' }, { value: 100, label: '100' }]}
className="px-3 py-1.5 rounded-lg text-sm font-medium cursor-pointer transition-all bg-black/40 text-nofx-text-main border border-white/10 hover:border-nofx-accent"
/>
</div>
{/* Decisions List - Scrollable */}
@@ -818,6 +816,7 @@ function StatCard({
positive,
subtitle,
icon,
loading,
}: {
title: string
value: string
@@ -826,6 +825,7 @@ function StatCard({
positive?: boolean
subtitle?: string
icon?: string
loading?: boolean
}) {
return (
<div className="group nofx-glass p-5 rounded-lg transition-all duration-300 hover:bg-white/5 hover:translate-y-[-2px] border border-white/5 hover:border-nofx-gold/20 relative overflow-hidden">
@@ -835,27 +835,35 @@ function StatCard({
<div className="text-xs mb-2 font-mono uppercase tracking-wider text-nofx-text-muted flex items-center gap-2">
{title}
</div>
<div className="flex items-baseline gap-1 mb-1">
<div className="text-2xl font-bold font-mono text-nofx-text-main tracking-tight group-hover:text-white transition-colors">
{value}
{loading ? (
<div className="space-y-2">
<div className="h-7 w-24 rounded bg-white/5 animate-pulse" />
<div className="h-3 w-16 rounded bg-white/5 animate-pulse" />
</div>
{unit && <span className="text-xs font-mono text-nofx-text-muted opacity-60">{unit}</span>}
</div>
{change !== undefined && (
<div className="flex items-center gap-1">
<div
className={`text-sm mono font-bold flex items-center gap-1 ${positive ? 'text-nofx-green' : 'text-nofx-red'}`}
>
<span>{positive ? '▲' : '▼'}</span>
<span>{positive ? '+' : ''}{change.toFixed(2)}%</span>
) : (
<>
<div className="flex items-baseline gap-1 mb-1">
<div className="text-2xl font-bold font-mono text-nofx-text-main tracking-tight group-hover:text-white transition-colors">
{value}
</div>
{unit && <span className="text-xs font-mono text-nofx-text-muted opacity-60">{unit}</span>}
</div>
</div>
)}
{subtitle && (
<div className="text-xs mt-2 mono text-nofx-text-muted opacity-80">
{subtitle}
</div>
{change !== undefined && (
<div className="flex items-center gap-1">
<div
className={`text-sm mono font-bold flex items-center gap-1 ${positive ? 'text-nofx-green' : 'text-nofx-red'}`}
>
<span>{positive ? '▲' : '▼'}</span>
<span>{positive ? '+' : ''}{change.toFixed(2)}%</span>
</div>
</div>
)}
{subtitle && (
<div className="text-xs mt-2 mono text-nofx-text-muted opacity-80">
{subtitle}
</div>
)}
</>
)}
</div>
)