import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { api } from '../services/api'
import './ConfigPanel.css'
const ConfigPanel = () => {
const [configs, setConfigs] = useState({})
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [message, setMessage] = useState('')
const [feasibilityCheck, setFeasibilityCheck] = useState(null)
const [checkingFeasibility, setCheckingFeasibility] = useState(false)
// 预设方案配置
// 注意:百分比配置使用整数形式(如8.0表示8%),在应用时会转换为小数(0.08)
const presets = {
conservative: {
name: '保守配置',
desc: '适合新手,风险较低,止损止盈较宽松,避免被正常波动触发',
configs: {
SCAN_INTERVAL: 900,
MIN_CHANGE_PERCENT: 2.0, // 2%
MIN_SIGNAL_STRENGTH: 5,
TOP_N_SYMBOLS: 10,
MAX_SCAN_SYMBOLS: 150,
MIN_VOLATILITY: 0.02, // 保持小数形式(波动率)
STOP_LOSS_PERCENT: 10.0, // 10%(相对于保证金,更宽松)
TAKE_PROFIT_PERCENT: 20.0, // 20%(相对于保证金,给趋势更多空间)
MIN_STOP_LOSS_PRICE_PCT: 2.0, // 2%最小价格变动保护
MIN_TAKE_PROFIT_PRICE_PCT: 3.0 // 3%最小价格变动保护
}
},
balanced: {
name: '平衡配置',
desc: '推荐使用,平衡频率和质量,止损止盈适中(盈亏比2.5:1)',
configs: {
SCAN_INTERVAL: 600,
MIN_CHANGE_PERCENT: 1.5, // 1.5%
MIN_SIGNAL_STRENGTH: 4,
TOP_N_SYMBOLS: 12,
MAX_SCAN_SYMBOLS: 250,
MIN_VOLATILITY: 0.018, // 保持小数形式(波动率)
STOP_LOSS_PERCENT: 8.0, // 8%(相对于保证金,默认值)
TAKE_PROFIT_PERCENT: 20.0, // 20%(相对于保证金,盈亏比2.5:1,提高收益)
MIN_STOP_LOSS_PRICE_PCT: 2.0, // 2%最小价格变动保护
MIN_TAKE_PROFIT_PRICE_PCT: 3.0 // 3%最小价格变动保护
}
},
aggressive: {
name: '激进高频',
desc: '晚间波动大时使用,交易频率高,止损较紧但止盈合理(盈亏比3:1)',
configs: {
SCAN_INTERVAL: 300,
MIN_CHANGE_PERCENT: 1.0, // 1%
MIN_SIGNAL_STRENGTH: 3,
TOP_N_SYMBOLS: 18,
MAX_SCAN_SYMBOLS: 350,
MIN_VOLATILITY: 0.015, // 保持小数形式(波动率)
STOP_LOSS_PERCENT: 5.0, // 5%(相对于保证金,较紧)
TAKE_PROFIT_PERCENT: 15.0, // 15%(相对于保证金,盈亏比3:1,能捕捉更大趋势)
MIN_STOP_LOSS_PRICE_PCT: 1.5, // 1.5%最小价格变动保护
MIN_TAKE_PROFIT_PRICE_PCT: 2.0 // 2%最小价格变动保护
}
}
}
useEffect(() => {
loadConfigs()
checkFeasibility()
}, [])
const checkFeasibility = async () => {
setCheckingFeasibility(true)
try {
const result = await api.checkConfigFeasibility()
setFeasibilityCheck(result)
} catch (error) {
console.error('检查配置可行性失败:', error)
// 静默失败,不显示错误
} finally {
setCheckingFeasibility(false)
}
}
const loadConfigs = async () => {
try {
const data = await api.getConfigs()
setConfigs(data)
} catch (error) {
console.error('Failed to load configs:', error)
setMessage('加载配置失败: ' + error.message)
} finally {
setLoading(false)
}
}
const handleUpdate = async (key, value, type, category) => {
setSaving(true)
setMessage('')
try {
const response = await api.updateConfig(key, {
value,
type,
category
})
setMessage(response.message || '配置已更新')
if (response.note) {
setTimeout(() => {
setMessage(response.note)
}, 2000)
}
// 重新加载配置
await loadConfigs()
// 如果更新的是与可行性相关的配置,重新检查可行性
if (['MIN_MARGIN_USDT', 'MIN_POSITION_PERCENT', 'MAX_POSITION_PERCENT', 'LEVERAGE'].includes(key)) {
await checkFeasibility()
}
} catch (error) {
const errorMsg = error.message || '更新失败'
setMessage('更新失败: ' + errorMsg)
console.error('Config update error:', error)
} finally {
setSaving(false)
}
}
// 检测当前配置匹配哪个预设方案
const detectCurrentPreset = () => {
if (!configs || Object.keys(configs).length === 0) return null
for (const [presetKey, preset] of Object.entries(presets)) {
let match = true
for (const [key, expectedValue] of Object.entries(preset.configs)) {
const currentConfig = configs[key]
if (!currentConfig) {
match = false
break
}
// 获取当前值(处理百分比转换)
let currentValue = currentConfig.value
if (key.includes('PERCENT') || key.includes('PCT')) {
currentValue = currentValue * 100
}
// 比较值(允许小的浮点数误差)
if (typeof expectedValue === 'number' && typeof currentValue === 'number') {
if (Math.abs(currentValue - expectedValue) > 0.01) {
match = false
break
}
} else if (currentValue !== expectedValue) {
match = false
break
}
}
if (match) {
return presetKey
}
}
return null
}
const applyPreset = async (presetKey) => {
const preset = presets[presetKey]
if (!preset) return
setSaving(true)
setMessage('')
try {
const configItems = Object.entries(preset.configs).map(([key, value]) => {
const config = configs[key]
if (!config) {
// 如果配置项不存在,尝试创建(用于新增的配置项)
// 根据key判断类型和分类
let type = 'number'
let category = 'risk'
if (key.includes('PERCENT') || key.includes('PCT')) {
type = 'number'
if (key.includes('STOP_LOSS') || key.includes('TAKE_PROFIT')) {
category = 'risk'
} else {
category = 'scan'
}
} else if (key === 'MIN_VOLATILITY') {
type = 'number'
category = 'scan'
} else if (typeof value === 'number') {
type = 'number'
category = 'scan'
}
return {
key,
value: (key.includes('PERCENT') || key.includes('PCT')) ? value / 100 : value,
type,
category,
description: `预设方案配置项:${key}`
}
}
return {
key,
value: (key.includes('PERCENT') || key.includes('PCT')) ? value / 100 : value,
type: config.type,
category: config.category,
description: config.description
}
}).filter(Boolean)
const response = await api.updateConfigsBatch(configItems)
setMessage(response.message || `已应用${preset.name}`)
if (response.note) {
setTimeout(() => {
setMessage(response.note)
}, 2000)
}
await loadConfigs()
} catch (error) {
setMessage('应用预设失败: ' + error.message)
} finally {
setSaving(false)
}
}
const currentPreset = detectCurrentPreset()
if (loading) return
加载中...
const configCategories = {
'scan': '市场扫描',
'position': '仓位控制',
'risk': '风险控制',
'strategy': '策略参数',
'api': 'API配置'
}
return (
交易配置
📖 配置说明
{/* 预设方案快速切换 */}
快速切换方案
当前方案:
{currentPreset ? presets[currentPreset].name : '自定义'}
{Object.entries(presets).map(([key, preset]) => (
))}
{/* 配置可行性检查提示 */}
{feasibilityCheck && (
{feasibilityCheck.feasible ? '✓ 配置可行' : '⚠ 配置冲突'}
账户余额: {feasibilityCheck.account_balance?.toFixed(2) || 'N/A'} USDT |
杠杆: {feasibilityCheck.leverage}x |
最小保证金: {feasibilityCheck.current_config?.min_margin_usdt?.toFixed(2) || 'N/A'} USDT
{!feasibilityCheck.feasible && (
需要仓位价值: {feasibilityCheck.calculated_values?.required_position_percent?.toFixed(1)}% |
最大允许: {feasibilityCheck.calculated_values?.max_allowed_position_percent?.toFixed(1)}%
)}
{feasibilityCheck.suggestions && feasibilityCheck.suggestions.length > 0 && (
建议方案:
{feasibilityCheck.suggestions.map((suggestion, index) => (
{suggestion.title}
{suggestion.description}
{suggestion.config_key && suggestion.suggested_value !== null && (
)}
))}
)}
)}
{message && (
{message}
)}
{Object.entries(configCategories).map(([category, label]) => (
{label}
{Object.entries(configs)
.filter(([key, config]) => config.category === category)
.map(([key, config]) => (
handleUpdate(key, value, config.type, config.category)}
disabled={saving}
/>
))}
))}
)
}
const ConfigItem = ({ label, config, onUpdate, disabled }) => {
// 初始化显示值:百分比配置转换为整数形式显示
const getInitialDisplayValue = (val) => {
if (config.type === 'number' && label.includes('PERCENT')) {
if (val === null || val === undefined || val === '') {
return ''
}
const numVal = typeof val === 'string' ? parseFloat(val) : val
if (isNaN(numVal)) {
return ''
}
// 如果是小数形式(0.05),转换为整数显示(5)
if (numVal < 1) {
return Math.round(numVal * 100)
}
// 如果已经是整数形式(5),直接显示
return numVal
}
return val === null || val === undefined ? '' : val
}
const [value, setValue] = useState(config.value)
const [localValue, setLocalValue] = useState(getInitialDisplayValue(config.value))
const [isEditing, setIsEditing] = useState(false)
const [showDetail, setShowDetail] = useState(false)
useEffect(() => {
setValue(config.value)
// 当配置值更新时,重置编辑状态和本地值
setIsEditing(false)
setLocalValue(getInitialDisplayValue(config.value))
}, [config.value])
const handleChange = (newValue) => {
setLocalValue(newValue)
setIsEditing(true)
}
const handleSave = () => {
setIsEditing(false)
// 处理localValue可能是字符串的情况
let processedValue = localValue
if (config.type === 'number') {
// 如果是空字符串,恢复原值
if (localValue === '' || localValue === null || localValue === undefined) {
setLocalValue(value)
return
}
const numValue = typeof localValue === 'string' ? parseFloat(localValue) : localValue
if (isNaN(numValue)) {
// 如果输入无效,恢复原值
const restoreValue = label.includes('PERCENT')
? (typeof value === 'number' && value < 1 ? Math.round(value * 100) : value)
: value
setLocalValue(restoreValue)
return
}
processedValue = numValue
// 百分比配置需要转换:用户输入的是整数(如5),需要转换为小数(0.05)
if (label.includes('PERCENT')) {
// 用户输入的是整数形式(如5表示5%),需要转换为小数(0.05)
// 如果输入值大于等于1,说明是百分比形式,需要除以100
// 如果输入值小于1,说明已经是小数形式,直接使用
if (processedValue >= 1) {
processedValue = processedValue / 100
}
// 如果小于1,说明已经是小数形式,直接使用
}
} else if (config.type === 'boolean') {
processedValue = localValue === 'true' || localValue === true
}
// 只有当值真正发生变化时才保存
if (processedValue !== value) {
onUpdate(processedValue)
} else {
// 值没变化,但需要更新显示值
setValue(processedValue)
}
}
const handleBlur = () => {
// 移动端不自动保存,需要点击保存按钮
if (window.innerWidth > 768) {
handleSave()
}
}
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
handleSave()
}
}
// 显示值:百分比配置显示为整数(如5),其他保持原样
// 处理localValue可能是字符串的情况
const getDisplayValue = () => {
if (config.type === 'number' && label.includes('PERCENT')) {
if (localValue === '' || localValue === null || localValue === undefined) {
return ''
}
const numValue = typeof localValue === 'string' ? parseFloat(localValue) : localValue
if (isNaN(numValue)) {
return ''
}
// localValue已经是显示值(整数形式),直接返回
return numValue
}
return localValue === null || localValue === undefined ? '' : localValue
}
const displayValue = getDisplayValue()
if (config.type === 'boolean') {
return (
{config.description && (
)}
{showDetail && (
{getConfigDetail(label)}
)}
{config.description && (
{config.description}
)}
)
}
if (label.includes('INTERVAL') && ['PRIMARY_INTERVAL', 'CONFIRM_INTERVAL', 'ENTRY_INTERVAL', 'KLINE_INTERVAL'].includes(label)) {
const options = ['1m', '3m', '5m', '15m', '30m', '1h', '2h', '4h', '1d']
return (
{config.description && (
)}
{showDetail && (
{getConfigDetail(label)}
)}
{config.description && (
{config.description}
)}
)
}
return (
{config.description && (
)}
{showDetail && (
{getConfigDetail(label)}
)}
{
// 使用文本输入,避免number类型的自动补0问题
let newValue = e.target.value
// 对于数字类型,只允许数字、小数点和负号
if (config.type === 'number') {
// 允许空字符串、数字、小数点和负号
const validPattern = /^-?\d*\.?\d*$/
if (newValue !== '' && !validPattern.test(newValue)) {
// 无效输入,不更新
return
}
// 如果是百分比配置,限制输入范围(0-100)
if (label.includes('PERCENT')) {
const numValue = parseFloat(newValue)
if (newValue !== '' && !isNaN(numValue) && (numValue < 0 || numValue > 100)) {
// 超出范围,不更新
return
}
}
}
// 更新本地值
if (config.type === 'number' && label.includes('PERCENT')) {
// 百分比配置:保持数字形式(整数),允许空值
if (newValue === '') {
handleChange('')
} else {
const numValue = parseFloat(newValue)
if (!isNaN(numValue)) {
handleChange(numValue)
}
// 如果无效,不更新(保持原值)
}
} else if (config.type === 'number') {
// 其他数字配置:保持数字形式,允许空值
if (newValue === '') {
handleChange('')
} else {
const numValue = parseFloat(newValue)
if (!isNaN(numValue)) {
handleChange(numValue)
}
// 如果无效,不更新(保持原值)
}
} else {
handleChange(newValue)
}
}}
onBlur={handleBlur}
onKeyPress={handleKeyPress}
onKeyDown={(e) => {
// 允许删除、退格、方向键等
if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
return
}
// 对于数字输入,只允许数字、小数点和负号
if (config.type === 'number') {
const validKeys = /^[0-9.-]$/
if (!validKeys.test(e.key) && !['Enter', 'Escape'].includes(e.key)) {
e.preventDefault()
}
}
}}
disabled={disabled}
className={isEditing ? 'editing' : ''}
placeholder={label.includes('PERCENT') ? '输入百分比' : '输入数值'}
/>
{label.includes('PERCENT') && %}
{isEditing && (
)}
{isEditing && window.innerWidth > 768 &&
按Enter保存}
{config.description && (
{config.description}
)}
)
}
// 配置项详细说明
const getConfigDetail = (key) => {
const details = {
// 市场扫描参数
'SCAN_INTERVAL': '扫描间隔(秒)。系统每隔多长时间扫描一次市场寻找交易机会。值越小扫描越频繁,能更快捕捉波动,但会增加API请求和系统负载。建议:保守策略3600秒(1小时),平衡策略600秒(10分钟),激进策略300秒(5分钟)。晚间波动大时可降低到300-600秒。',
'MIN_CHANGE_PERCENT': '最小涨跌幅阈值(%)。只有24小时涨跌幅达到此值的交易对才会被考虑交易。值越小捕捉机会越多,但可能包含噪音和假信号。值越大只捕捉大幅波动,信号质量更高但机会更少。建议:保守策略2.0-3.0%,平衡策略1.5-2.0%,激进策略1.0-1.5%。',
'MIN_SIGNAL_STRENGTH': '最小信号强度(0-10)。技术指标综合评分,只有达到此强度的信号才会执行交易。值越小交易机会越多,但信号质量可能下降,胜率降低。值越大只执行高质量信号,胜率更高但机会更少。建议:保守策略5-7,平衡策略4-5,激进策略3-4。',
'TOP_N_SYMBOLS': '每次扫描后处理的交易对数量。从符合条件的交易对中选择涨跌幅最大的前N个进行详细分析。值越大机会越多,但计算量增加,API请求增多。建议:保守策略8-10个,平衡策略12-15个,激进策略15-20个。',
'MAX_SCAN_SYMBOLS': '扫描的最大交易对数量(0表示扫描所有)。限制每次扫描时处理的交易对总数,减少API请求和计算量。值越小扫描越快,但可能错过一些机会。值越大覆盖更全面,但API请求和计算量增加。建议:保守策略100-200个,平衡策略200-300个,激进策略300-500个。设置为0会扫描所有交易对(约500+个)。',
'MIN_VOLATILITY': '最小波动率(小数形式,如0.02表示2%)。过滤掉波动率低于此值的交易对,确保只交易有足够波动的币种。值越小允许更多交易对,但可能包含波动不足的币种。值越大只交易高波动币种,但可能错过一些机会。建议:0.015-0.025(1.5%-2.5%)。',
'MIN_VOLUME_24H': '最小24小时成交量(USDT)。过滤掉24小时交易量低于此值的交易对,确保只交易流动性好的币种,避免滑点和流动性风险。建议:≥500万USDT,主流币种可设置1000万以上。',
'KLINE_INTERVAL': 'K线数据周期。获取K线数据的基础周期,影响技术指标的计算粒度。周期越短反应越快,但可能包含更多噪音。周期越长信号更平滑,但反应较慢。建议:5m-1h,通常与PRIMARY_INTERVAL保持一致。',
'PRIMARY_INTERVAL': '主周期。策略分析的主要时间周期,用于计算技术指标(RSI、MACD、布林带等)。决定策略主要关注的市场趋势级别。周期越短反应越快,周期越长趋势更明确。建议:保守策略4h-1d,平衡策略1h-4h,激进策略15m-1h。',
'CONFIRM_INTERVAL': '确认周期。用于确认交易信号的更长时间周期,增加信号的可靠性,减少假信号。通常比主周期更长。建议:保守策略1d,平衡策略4h-1d,激进策略1h-4h。',
'ENTRY_INTERVAL': '入场周期。用于精确入场的短时间周期,优化入场点,提高单笔交易的盈亏比。通常比主周期更短。建议:保守策略1h,平衡策略15m-30m,激进策略5m-15m。',
// 仓位控制参数
'MAX_POSITION_PERCENT': '单笔最大仓位(账户余额的百分比,如0.05表示5%)。单笔交易允许的最大仓位大小。值越大单笔金额越大,潜在收益和风险都增加。注意:币安要求最小名义价值5 USDT,如果账户余额较小,系统会自动调整。建议:保守策略3-5%,平衡策略5-7%,激进策略7-10%。',
'MAX_TOTAL_POSITION_PERCENT': '总仓位上限(账户余额的百分比,如0.30表示30%)。所有持仓的总价值不能超过账户余额的百分比,防止过度交易和风险集中。值越大可以同时持有更多仓位,但风险集中度增加。建议:保守策略20-30%,平衡策略30-40%,激进策略40-50%。',
'MIN_POSITION_PERCENT': '单笔最小仓位(账户余额的百分比,如0.01表示1%)。单笔交易允许的最小仓位大小,避免交易过小的仓位,减少手续费影响。建议:1-2%。',
// 风险控制参数
'STOP_LOSS_PERCENT': '止损百分比(如0.08表示8%,相对于保证金)。当亏损达到此百分比时自动平仓止损,限制单笔交易的最大亏损。值越小止损更严格,单笔损失更小但可能被正常波动触发。值越大允许更大的回撤,但单笔损失可能较大。建议:保守策略10-15%,平衡策略8-10%,激进策略5-8%。注意:止损应该小于止盈,建议盈亏比至少1:1.5。系统会结合最小价格变动保护,取更宽松的一个。',
'TAKE_PROFIT_PERCENT': '止盈百分比(如0.15表示15%,相对于保证金)。当盈利达到此百分比时自动平仓止盈,锁定利润。值越大目标利润更高,但可能错过及时止盈的机会,持仓时间更长。值越小能更快锁定利润,但可能错过更大的趋势。建议:保守策略20-30%,平衡策略15-20%,激进策略10-15%。注意:应该大于止损,建议盈亏比至少1:1.5。系统会结合最小价格变动保护,取更宽松的一个。',
'MIN_STOP_LOSS_PRICE_PCT': '最小止损价格变动百分比(如0.02表示2%)。防止止损过紧,即使基于保证金的止损更紧,也会使用至少此百分比的价格变动。建议:保守策略2-3%,平衡策略2%,激进策略1.5-2%。',
'MIN_TAKE_PROFIT_PRICE_PCT': '最小止盈价格变动百分比(如0.03表示3%)。防止止盈过紧,即使基于保证金的止盈更紧,也会使用至少此百分比的价格变动。建议:保守策略3-4%,平衡策略3%,激进策略2-3%。',
// 策略参数
'LEVERAGE': '交易杠杆倍数。放大资金利用率,同时放大收益和风险。杠杆越高,相同仓位下需要的保证金越少,但风险越大。建议:保守策略5-10倍,平衡策略10倍,激进策略10-15倍。注意:高杠杆会增加爆仓风险,请谨慎使用。',
'USE_TRAILING_STOP': '是否启用移动止损(true/false)。启用后,当盈利达到激活阈值时,止损会自动跟踪价格,保护利润。适合趋势行情,可以捕捉更大的利润空间。建议:平衡和激进策略启用,保守策略可关闭。',
'TRAILING_STOP_ACTIVATION': '移动止损激活阈值(百分比,如0.01表示1%)。当盈利达到此百分比时,移动止损开始跟踪价格,将止损移至成本价(保本)。值越小激活越早,更早保护利润但可能过早退出。值越大激活越晚,给价格更多波动空间。建议:1-2%。',
'TRAILING_STOP_PROTECT': '移动止损保护利润(百分比,如0.01表示1%)。当价格从最高点回撤达到此百分比时,触发止损平仓,锁定利润。值越小保护更严格,能锁定更多利润但可能过早退出。值越大允许更大回撤,可能捕捉更大趋势但利润可能回吐。建议:1-2%。',
// API配置
'BINANCE_API_KEY': '币安API密钥。用于访问币安账户的凭证,需要启用"合约交易"权限。请妥善保管,不要泄露。',
'BINANCE_API_SECRET': '币安API密钥。与API Key配对使用,用于签名验证。请妥善保管,不要泄露。',
'USE_TESTNET': '是否使用币安测试网(true/false)。true表示使用测试网(模拟交易,无真实资金),false表示使用生产网(真实交易)。建议:测试时使用true,正式交易使用false。'
}
return details[key] || '暂无详细说明,请参考配置说明文档'
}
export default ConfigPanel