feat: 添加候选币种为0时的前端警告提示 (#515)

* feat: add frontend warnings for zero candidate coins
当候选币种数量为0时,在前端添加详细的错误提示和诊断信息
主要改动:
1. 决策日志中显示候选币种数量,为0时标红警告
2. 候选币种为0时显示详细警告卡片,包含可能原因和解决方案
3. 交易员列表页面添加信号源未配置的全局警告
4. 更新TraderInfo类型定义,添加use_coin_pool和use_oi_top字段
详细说明:
- 在App.tsx的账户状态摘要中添加候选币种显示
- 当候选币种为0时,显示详细的警告卡片,列出:
  * 可能原因(API未配置、连接超时、数据为空等)
  * 解决方案(配置自定义币种、配置API、禁用选项等)
- 在AITradersPage中添加信号源配置检查
  * 当交易员启用了币种池但未配置API时显示全局警告
  * 提供"立即配置信号源"快捷按钮
- 不改变任何后端逻辑,纯UI层面的用户提示改进
影响范围:
- web/src/App.tsx: 决策记录卡片中的警告显示
- web/src/components/AITradersPage.tsx: 交易员列表页警告
- web/src/types.ts: TraderInfo类型定义更新
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
* fix: import AlertTriangle from lucide-react in App.tsx
修复TypeScript编译错误:Cannot find name 'AlertTriangle'
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
---------
Co-authored-by: tinkle-community <tinklefund@gmail.com>
This commit is contained in:
CoderMageFox
2025-11-05 17:11:04 +08:00
committed by GitHub
parent 7ab2dbcc8d
commit 28fd03d8ba
3 changed files with 90 additions and 0 deletions
+41
View File
@@ -13,6 +13,7 @@ import { LanguageProvider, useLanguage } from './contexts/LanguageContext'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import { t, type Language } from './i18n/translations'
import { useSystemConfig } from './hooks/useSystemConfig'
import { AlertTriangle } from 'lucide-react'
import type {
SystemStatus,
AccountInfo,
@@ -1038,6 +1039,46 @@ function DecisionCard({
: {decision.account_state.margin_used_pct.toFixed(1)}%
</span>
<span>: {decision.account_state.position_count}</span>
<span style={{
color: decision.candidate_coins && decision.candidate_coins.length === 0
? '#F6465D'
: '#848E9C'
}}>
: {decision.candidate_coins?.length || 0}
</span>
</div>
)}
{/* 候选币种为0的警告提示 */}
{decision.candidate_coins && decision.candidate_coins.length === 0 && (
<div
className="text-sm rounded px-4 py-3 mb-3 flex items-start gap-3"
style={{
background: 'rgba(246, 70, 93, 0.1)',
border: '1px solid rgba(246, 70, 93, 0.3)',
color: '#F6465D'
}}
>
<AlertTriangle size={16} className="flex-shrink-0 mt-0.5" />
<div className="flex-1">
<div className="font-semibold mb-1"> 0</div>
<div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
<div></div>
<ul className="list-disc list-inside space-y-0.5 ml-2">
<li>API未配置或无法访问</li>
<li>API连接超时或返回数据为空</li>
<li>API获取失败</li>
</ul>
<div className="mt-2">
<strong></strong>
</div>
<ul className="list-disc list-inside space-y-0.5 ml-2">
<li></li>
<li>API地址</li>
<li>"使用币种池""使用OI Top"</li>
</ul>
</div>
</div>
</div>
)}
+47
View File
@@ -659,6 +659,53 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
</div>
</div>
{/* 信号源配置警告 */}
{traders && traders.some(t => (t.use_coin_pool || t.use_oi_top)) &&
(!userSignalSource.coinPoolUrl && !userSignalSource.oiTopUrl) && (
<div
className="rounded-lg px-4 py-3 flex items-start gap-3 animate-slide-in"
style={{
background: 'rgba(246, 70, 93, 0.1)',
border: '1px solid rgba(246, 70, 93, 0.3)',
}}
>
<AlertTriangle
size={20}
className="flex-shrink-0 mt-0.5"
style={{ color: '#F6465D' }}
/>
<div className="flex-1">
<div className="font-semibold mb-1" style={{ color: '#F6465D' }}>
</div>
<div className="text-sm" style={{ color: '#848E9C' }}>
<p className="mb-2">
"使用币种池""使用OI Top"API地址
<strong style={{ color: '#F6465D' }}>0</strong>
</p>
<p>
<strong></strong>
</p>
<ul className="list-disc list-inside space-y-1 ml-2 mt-1">
<li>"📡 信号源"API地址</li>
<li>"使用币种池""使用OI Top"</li>
<li></li>
</ul>
</div>
<button
onClick={() => setShowSignalSourceModal(true)}
className="mt-3 px-3 py-1.5 rounded text-sm font-semibold transition-all hover:scale-105"
style={{
background: '#F0B90B',
color: '#000',
}}
>
</button>
</div>
</div>
)}
{/* Configuration Status */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
{/* AI Models */}
+2
View File
@@ -92,6 +92,8 @@ export interface TraderInfo {
exchange_id?: string
is_running?: boolean
custom_prompt?: string
use_coin_pool?: boolean
use_oi_top?: boolean
}
export interface AIModel {