Initial commit: NOFX AI Trading System

- Multi-AI competition mode (Qwen vs DeepSeek)
- Binance Futures integration
- AI self-learning mechanism
- Professional web dashboard
- Complete risk management system

web/src/components/ComparisonChart.tsx

@@ -0,0 +1,298 @@
+import { useState, useEffect } from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+  Legend,
+} from 'recharts';
+import useSWR from 'swr';
+import { api } from '../lib/api';
+import type { CompetitionTraderData } from '../types';
+
+interface ComparisonChartProps {
+  traders: CompetitionTraderData[];
+}
+
+export function ComparisonChart({ traders }: ComparisonChartProps) {
+  const [combinedData, setCombinedData] = useState<any[]>([]);
+
+  // 获取所有trader的历史数据
+  const traderHistories = traders.map((trader) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useSWR(`equity-history-${trader.trader_id}`, () =>
+      api.getEquityHistory(trader.trader_id),
+      { refreshInterval: 10000 }
+    );
+  });
+
+  useEffect(() => {
+    // 等待所有数据加载完成
+    const allLoaded = traderHistories.every((h) => h.data);
+    if (!allLoaded) return;
+
+    // 合并所有trader的数据 - 使用cycle_number作为key确保数据对齐
+    const cycleMap = new Map<number, any>();
+
+    traderHistories.forEach((history, index) => {
+      const trader = traders[index];
+      history.data?.forEach((point: any) => {
+        const cycleNumber = point.cycle_number || 0;
+        const time = new Date(point.timestamp).toLocaleTimeString('zh-CN', {
+          hour: '2-digit',
+          minute: '2-digit',
+        });
+
+        if (!cycleMap.has(cycleNumber)) {
+          cycleMap.set(cycleNumber, {
+            cycle: cycleNumber,
+            time,
+            timestamp: point.timestamp
+          });
+        }
+
+        const entry = cycleMap.get(cycleNumber);
+        entry[`${trader.trader_id}_pnl_pct`] = point.total_pnl_pct;
+        entry[`${trader.trader_id}_equity`] = point.total_equity;
+      });
+    });
+
+    // 转换为数组并按cycle排序
+    const combined = Array.from(cycleMap.values())
+      .filter(item => {
+        // 只保留所有trader都有数据的点
+        return traders.every(t => item[`${t.trader_id}_pnl_pct`] !== undefined);
+      })
+      .sort((a, b) => a.cycle - b.cycle);
+
+    setCombinedData(combined);
+  }, [traderHistories.map((h) => h.data).join(',')]);
+
+  const isLoading = traderHistories.some((h) => !h.data);
+
+  if (isLoading) {
+    return (
+      <div className="text-center py-16" style={{ color: '#848E9C' }}>
+        <div className="spinner mx-auto mb-4"></div>
+        <div className="text-sm font-semibold">Loading comparison data...</div>
+      </div>
+    );
+  }
+
+  if (combinedData.length === 0) {
+    return (
+      <div className="text-center py-16" style={{ color: '#848E9C' }}>
+        <div className="text-6xl mb-4 opacity-50">📊</div>
+        <div className="text-lg font-semibold mb-2">暂无历史数据</div>
+        <div className="text-sm">运行几个周期后将显示对比曲线</div>
+      </div>
+    );
+  }
+
+  // 限制显示数据点
+  const MAX_DISPLAY_POINTS = 2000;
+  const displayData =
+    combinedData.length > MAX_DISPLAY_POINTS
+      ? combinedData.slice(-MAX_DISPLAY_POINTS)
+      : combinedData;
+
+  // 计算Y轴范围
+  const calculateYDomain = () => {
+    const allValues: number[] = [];
+    displayData.forEach((point) => {
+      traders.forEach((trader) => {
+        const value = point[`${trader.trader_id}_pnl_pct`];
+        if (value !== undefined) {
+          allValues.push(value);
+        }
+      });
+    });
+
+    if (allValues.length === 0) return [-5, 5];
+
+    const minVal = Math.min(...allValues);
+    const maxVal = Math.max(...allValues);
+    const range = Math.max(Math.abs(maxVal), Math.abs(minVal));
+    const padding = Math.max(range * 0.2, 1); // 至少留1%余量
+
+    return [
+      Math.floor(minVal - padding),
+      Math.ceil(maxVal + padding)
+    ];
+  };
+
+  // Trader颜色配置 - 使用更鲜艳对比度更高的颜色
+  const getTraderColor = (traderId: string) => {
+    const trader = traders.find((t) => t.trader_id === traderId);
+    if (trader?.ai_model === 'qwen') {
+      return '#c084fc'; // purple-400 (更亮)
+    } else {
+      return '#60a5fa'; // blue-400 (更亮)
+    }
+  };
+
+  // 自定义Tooltip - Binance Style
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="rounded p-3 shadow-xl" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+          <div className="text-xs mb-2" style={{ color: '#848E9C' }}>
+            Cycle #{data.cycle} - {data.time}
+          </div>
+          {traders.map((trader) => {
+            const pnlPct = data[`${trader.trader_id}_pnl_pct`];
+            const equity = data[`${trader.trader_id}_equity`];
+            if (pnlPct === undefined) return null;
+
+            return (
+              <div key={trader.trader_id} className="mb-1.5 last:mb-0">
+                <div
+                  className="text-xs font-semibold mb-0.5"
+                  style={{ color: getTraderColor(trader.trader_id) }}
+                >
+                  {trader.trader_name}
+                </div>
+                <div className="text-sm mono font-bold" style={{ color: pnlPct >= 0 ? '#0ECB81' : '#F6465D' }}>
+                  {pnlPct >= 0 ? '+' : ''}{pnlPct.toFixed(2)}%
+                  <span className="text-xs ml-2 font-normal" style={{ color: '#848E9C' }}>
+                    ({equity?.toFixed(2)} USDT)
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // 计算当前差距
+  const currentGap = displayData.length > 0 ? (() => {
+    const lastPoint = displayData[displayData.length - 1];
+    const values = traders.map(t => lastPoint[`${t.trader_id}_pnl_pct`] || 0);
+    return Math.abs(values[0] - values[1]);
+  })() : 0;
+
+  return (
+    <div>
+      <div style={{ borderRadius: '8px', overflow: 'hidden' }}>
+        <ResponsiveContainer width="100%" height={520}>
+        <LineChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 40 }}>
+          <defs>
+            {traders.map((trader) => (
+              <linearGradient
+                key={`gradient-${trader.trader_id}`}
+                id={`gradient-${trader.trader_id}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop offset="5%" stopColor={getTraderColor(trader.trader_id)} stopOpacity={0.9} />
+                <stop offset="95%" stopColor={getTraderColor(trader.trader_id)} stopOpacity={0.2} />
+              </linearGradient>
+            ))}
+          </defs>
+
+          <CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
+
+          <XAxis
+            dataKey="time"
+            stroke="#5E6673"
+            tick={{ fill: '#848E9C', fontSize: 11 }}
+            tickLine={{ stroke: '#2B3139' }}
+            interval={Math.floor(displayData.length / 12)}
+            angle={-15}
+            textAnchor="end"
+            height={60}
+          />
+
+          <YAxis
+            stroke="#5E6673"
+            tick={{ fill: '#848E9C', fontSize: 12 }}
+            tickLine={{ stroke: '#2B3139' }}
+            domain={calculateYDomain()}
+            tickFormatter={(value) => `${value.toFixed(1)}%`}
+            width={60}
+          />
+
+          <Tooltip content={<CustomTooltip />} />
+
+          <ReferenceLine
+            y={0}
+            stroke="#474D57"
+            strokeDasharray="5 5"
+            strokeWidth={1.5}
+            label={{
+              value: 'Break Even',
+              fill: '#848E9C',
+              fontSize: 11,
+              position: 'right',
+            }}
+          />
+
+          {traders.map((trader, index) => (
+            <Line
+              key={trader.trader_id}
+              type="monotone"
+              dataKey={`${trader.trader_id}_pnl_pct`}
+              stroke={getTraderColor(trader.trader_id)}
+              strokeWidth={3}
+              dot={displayData.length < 50 ? { fill: getTraderColor(trader.trader_id), r: 3 } : false}
+              activeDot={{ r: 6, fill: getTraderColor(trader.trader_id), stroke: '#fff', strokeWidth: 2 }}
+              name={trader.trader_name}
+              connectNulls
+            />
+          ))}
+
+          <Legend
+            wrapperStyle={{ paddingTop: '20px' }}
+            iconType="line"
+            formatter={(value, entry: any) => {
+              const traderId = traders.find((t) => value === t.trader_name)?.trader_id;
+              const trader = traders.find((t) => t.trader_id === traderId);
+              return (
+                <span style={{ color: entry.color, fontWeight: 600, fontSize: '14px' }}>
+                  {trader?.trader_name} ({trader?.ai_model.toUpperCase()})
+                </span>
+              );
+            }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+      </div>
+
+      {/* Stats */}
+      <div className="mt-6 grid grid-cols-4 gap-4 pt-5" style={{ borderTop: '1px solid #2B3139' }}>
+        <div className="p-3 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' }}>对比模式</div>
+          <div className="text-base font-bold" style={{ color: '#EAECEF' }}>PnL %</div>
+        </div>
+        <div className="p-3 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' }}>数据点数</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>{combinedData.length} 个</div>
+        </div>
+        <div className="p-3 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' }}>当前差距</div>
+          <div className="text-base font-bold mono" style={{ color: currentGap > 1 ? '#F0B90B' : '#EAECEF' }}>
+            {currentGap.toFixed(2)}%
+          </div>
+        </div>
+        <div className="p-3 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' }}>显示范围</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+            {combinedData.length > MAX_DISPLAY_POINTS
+              ? `最近 ${MAX_DISPLAY_POINTS}`
+              : '全部数据'}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/CompetitionPage.tsx

@@ -0,0 +1,244 @@
+import useSWR from 'swr';
+import { api } from '../lib/api';
+import type { CompetitionData } from '../types';
+import { ComparisonChart } from './ComparisonChart';
+
+export function CompetitionPage() {
+  const { data: competition } = useSWR<CompetitionData>(
+    'competition',
+    api.getCompetition,
+    {
+      refreshInterval: 5000,
+      revalidateOnFocus: true,
+    }
+  );
+
+  if (!competition || !competition.traders) {
+    return (
+      <div className="space-y-6">
+        <div className="binance-card p-8 animate-pulse">
+          <div className="flex items-center justify-between mb-6">
+            <div className="space-y-3 flex-1">
+              <div className="skeleton h-8 w-64"></div>
+              <div className="skeleton h-4 w-48"></div>
+            </div>
+            <div className="skeleton h-12 w-32"></div>
+          </div>
+        </div>
+        <div className="binance-card p-6">
+          <div className="skeleton h-6 w-40 mb-4"></div>
+          <div className="space-y-3">
+            <div className="skeleton h-20 w-full rounded"></div>
+            <div className="skeleton h-20 w-full rounded"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 按收益率排序
+  const sortedTraders = [...competition.traders].sort(
+    (a, b) => b.total_pnl_pct - a.total_pnl_pct
+  );
+
+  // 找出领先者
+  const leader = sortedTraders[0];
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Competition Header - Binance Style */}
+      <div className="rounded p-6 animate-scale-in" style={{ background: 'linear-gradient(135deg, rgba(240, 185, 11, 0.15) 0%, rgba(252, 213, 53, 0.05) 100%)', border: '1px solid rgba(240, 185, 11, 0.2)', boxShadow: '0 0 30px rgba(240, 185, 11, 0.15)' }}>
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold mb-1 flex items-center gap-3" style={{ color: '#EAECEF' }}>
+              <span>🏆</span>
+              AI Trading Competition
+              <span className="text-sm font-normal px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.15)', color: '#F0B90B' }}>
+                {competition.count} Traders
+              </span>
+            </h1>
+            <p className="text-sm" style={{ color: '#848E9C' }}>
+              Qwen vs DeepSeek · Real-time Performance Battle
+            </p>
+          </div>
+          <div className="text-right">
+            <div className="text-xs" style={{ color: '#848E9C' }}>Current Leader</div>
+            <div className="text-lg font-bold" style={{ color: '#F0B90B' }}>{leader?.trader_name}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Leader Board - Binance Style */}
+      <div className="binance-card p-6 animate-slide-in" style={{ animationDelay: '0.1s' }}>
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            🥇 Leaderboard
+          </h2>
+          <div className="text-xs px-3 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.1)', color: '#F0B90B', border: '1px solid rgba(240, 185, 11, 0.2)' }}>
+            LIVE
+          </div>
+        </div>
+        <div className="space-y-3">
+          {sortedTraders.map((trader, index) => {
+            const isLeader = index === 0;
+            const aiModelColor = trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa';
+
+            return (
+              <div
+                key={trader.trader_id}
+                className="rounded p-4 transition-all duration-300 hover:translate-y-[-2px]"
+                style={{
+                  background: isLeader ? 'linear-gradient(135deg, rgba(240, 185, 11, 0.08) 0%, #0B0E11 100%)' : '#0B0E11',
+                  border: `1px solid ${isLeader ? 'rgba(240, 185, 11, 0.4)' : '#2B3139'}`,
+                  boxShadow: isLeader ? '0 4px 20px rgba(240, 185, 11, 0.15), 0 0 0 1px rgba(240, 185, 11, 0.2)' : '0 2px 8px rgba(0, 0, 0, 0.3)'
+                }}
+              >
+                <div className="flex items-center justify-between">
+                  {/* Rank & Name */}
+                  <div className="flex items-center gap-4">
+                    <div className="text-3xl w-8">
+                      {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                    </div>
+                    <div>
+                      <div className="font-bold text-base" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
+                      <div className="text-xs mono font-semibold" style={{ color: aiModelColor }}>
+                        {trader.ai_model.toUpperCase()} Model
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Stats */}
+                  <div className="flex items-center gap-6">
+                    {/* Total Equity */}
+                    <div className="text-right">
+                      <div className="text-xs" style={{ color: '#848E9C' }}>Total Equity</div>
+                      <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+                        {trader.total_equity.toFixed(2)} USDT
+                      </div>
+                    </div>
+
+                    {/* P&L */}
+                    <div className="text-right min-w-[120px]">
+                      <div className="text-xs" style={{ color: '#848E9C' }}>Total P&L</div>
+                      <div
+                        className="text-2xl font-bold mono"
+                        style={{ color: trader.total_pnl >= 0 ? '#0ECB81' : '#F6465D' }}
+                      >
+                        {trader.total_pnl >= 0 ? '+' : ''}
+                        {trader.total_pnl_pct.toFixed(2)}%
+                      </div>
+                      <div className="text-xs mono" style={{ color: '#848E9C' }}>
+                        {trader.total_pnl >= 0 ? '+' : ''}
+                        {trader.total_pnl.toFixed(2)} USDT
+                      </div>
+                    </div>
+
+                    {/* Positions */}
+                    <div className="text-right">
+                      <div className="text-xs" style={{ color: '#848E9C' }}>Positions</div>
+                      <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+                        {trader.position_count}
+                      </div>
+                      <div className="text-xs" style={{ color: '#848E9C' }}>
+                        Margin: {trader.margin_used_pct.toFixed(1)}%
+                      </div>
+                    </div>
+
+                    {/* Cycles */}
+                    <div className="text-right">
+                      <div className="text-xs" style={{ color: '#848E9C' }}>Cycles</div>
+                      <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>{trader.call_count}</div>
+                    </div>
+
+                    {/* Status */}
+                    <div>
+                      <div
+                        className="px-3 py-1 rounded text-xs font-bold"
+                        style={trader.is_running
+                          ? { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81' }
+                          : { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
+                        }
+                      >
+                        {trader.is_running ? 'RUNNING' : 'STOPPED'}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Performance Comparison Chart */}
+      <div className="binance-card p-6 animate-slide-in" style={{ animationDelay: '0.2s' }}>
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            📈 Performance Comparison
+          </h2>
+          <div className="text-xs" style={{ color: '#848E9C' }}>
+            Real-time PnL % Chart
+          </div>
+        </div>
+        <ComparisonChart traders={sortedTraders} />
+      </div>
+
+      {/* Head-to-Head Stats */}
+      {competition.traders.length === 2 && (
+        <div className="binance-card p-6 animate-slide-in" style={{ animationDelay: '0.3s' }}>
+          <h2 className="text-xl font-bold mb-5 flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            ⚔️ Head-to-Head Battle
+          </h2>
+          <div className="grid grid-cols-2 gap-6">
+            {sortedTraders.map((trader, index) => {
+              const isWinning = index === 0;
+              const opponent = sortedTraders[1 - index];
+              const gap = trader.total_pnl_pct - opponent.total_pnl_pct;
+
+              return (
+                <div
+                  key={trader.trader_id}
+                  className="p-6 rounded transition-all duration-300 hover:scale-105"
+                  style={isWinning
+                    ? {
+                        background: 'linear-gradient(135deg, rgba(14, 203, 129, 0.08) 0%, rgba(14, 203, 129, 0.02) 100%)',
+                        border: '2px solid rgba(14, 203, 129, 0.3)',
+                        boxShadow: '0 4px 20px rgba(14, 203, 129, 0.15)'
+                      }
+                    : {
+                        background: '#0B0E11',
+                        border: '1px solid #2B3139',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
+                      }
+                  }
+                >
+                  <div className="text-center">
+                    <div
+                      className="text-lg font-bold mb-2"
+                      style={{ color: trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa' }}
+                    >
+                      {trader.trader_name}
+                    </div>
+                    <div className="text-3xl font-bold mono mb-2" style={{ color: trader.total_pnl >= 0 ? '#0ECB81' : '#F6465D' }}>
+                      {trader.total_pnl >= 0 ? '+' : ''}{trader.total_pnl_pct.toFixed(2)}%
+                    </div>
+                    {isWinning && gap > 0 && (
+                      <div className="text-sm font-semibold" style={{ color: '#0ECB81' }}>
+                        Leading by {gap.toFixed(2)}%
+                      </div>
+                    )}
+                    {!isWinning && gap < 0 && (
+                      <div className="text-sm font-semibold" style={{ color: '#F6465D' }}>
+                        Behind by {Math.abs(gap).toFixed(2)}%
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/components/EquityChart.tsx

@@ -0,0 +1,289 @@
+import { useState } from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+} from 'recharts';
+import useSWR from 'swr';
+import { api } from '../lib/api';
+
+interface EquityPoint {
+  timestamp: string;
+  total_equity: number;
+  pnl: number;
+  pnl_pct: number;
+  cycle_number: number;
+}
+
+interface EquityChartProps {
+  traderId?: string;
+}
+
+export function EquityChart({ traderId }: EquityChartProps) {
+  const [displayMode, setDisplayMode] = useState<'dollar' | 'percent'>('dollar');
+
+  const { data: history, error } = useSWR<EquityPoint[]>(
+    traderId ? `equity-history-${traderId}` : 'equity-history',
+    () => api.getEquityHistory(traderId),
+    {
+      refreshInterval: 10000, // 每10秒刷新
+    }
+  );
+
+  const { data: account } = useSWR(
+    traderId ? `account-${traderId}` : 'account',
+    () => api.getAccount(traderId),
+    {
+      refreshInterval: 5000,
+    }
+  );
+
+  if (error) {
+    return (
+      <div className="binance-card p-6">
+        <div className="flex items-center gap-3 p-4 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.2)' }}>
+          <div className="text-2xl">⚠️</div>
+          <div>
+            <div className="font-semibold" style={{ color: '#F6465D' }}>加载失败</div>
+            <div className="text-sm" style={{ color: '#848E9C' }}>{error.message}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!history || history.length === 0) {
+    return (
+      <div className="binance-card p-6">
+        <h3 className="text-lg font-semibold mb-6" style={{ color: '#EAECEF' }}>账户净值曲线</h3>
+        <div className="text-center py-16" style={{ color: '#848E9C' }}>
+          <div className="text-6xl mb-4 opacity-50">📊</div>
+          <div className="text-lg font-semibold mb-2">暂无历史数据</div>
+          <div className="text-sm">运行几个周期后将显示收益率曲线</div>
+        </div>
+      </div>
+    );
+  }
+
+  // 限制显示最近的数据点（性能优化）
+  // 如果数据超过2000个点，只显示最近2000个
+  const MAX_DISPLAY_POINTS = 2000;
+  const displayHistory = history.length > MAX_DISPLAY_POINTS
+    ? history.slice(-MAX_DISPLAY_POINTS)
+    : history;
+
+  // 计算初始余额（使用第一个数据点）
+  const initialBalance = history[0]?.total_equity || 1000;
+
+  // 转换数据格式
+  const chartData = displayHistory.map((point) => {
+    const pnl = point.total_equity - initialBalance;
+    const pnlPct = ((pnl / initialBalance) * 100).toFixed(2);
+    return {
+      time: new Date(point.timestamp).toLocaleTimeString('zh-CN', {
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
+      value: displayMode === 'dollar' ? point.total_equity : parseFloat(pnlPct),
+      cycle: point.cycle_number,
+      raw_equity: point.total_equity,
+      raw_pnl: pnl,
+      raw_pnl_pct: parseFloat(pnlPct),
+    };
+  });
+
+  const currentValue = chartData[chartData.length - 1];
+  const isProfit = currentValue.raw_pnl >= 0;
+
+  // 计算Y轴范围
+  const calculateYDomain = () => {
+    if (displayMode === 'percent') {
+      // 百分比模式：找到最大最小值，留20%余量
+      const values = chartData.map(d => d.value);
+      const minVal = Math.min(...values);
+      const maxVal = Math.max(...values);
+      const range = Math.max(Math.abs(maxVal), Math.abs(minVal));
+      const padding = Math.max(range * 0.2, 1); // 至少留1%余量
+      return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)];
+    } else {
+      // 美元模式：以初始余额为基准，上下留10%余量
+      const values = chartData.map(d => d.value);
+      const minVal = Math.min(...values, initialBalance);
+      const maxVal = Math.max(...values, initialBalance);
+      const range = maxVal - minVal;
+      const padding = Math.max(range * 0.15, initialBalance * 0.01); // 至少留1%余量
+      return [
+        Math.floor(minVal - padding),
+        Math.ceil(maxVal + padding)
+      ];
+    }
+  };
+
+  // 自定义Tooltip - Binance Style
+  const CustomTooltip = ({ active, payload }: any) => {
+    if (active && payload && payload.length) {
+      const data = payload[0].payload;
+      return (
+        <div className="rounded p-3 shadow-xl" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>Cycle #{data.cycle}</div>
+          <div className="font-bold mono" style={{ color: '#EAECEF' }}>
+            {data.raw_equity.toFixed(2)} USDT
+          </div>
+          <div
+            className="text-sm mono font-bold"
+            style={{ color: data.raw_pnl >= 0 ? '#0ECB81' : '#F6465D' }}
+          >
+            {data.raw_pnl >= 0 ? '+' : ''}
+            {data.raw_pnl.toFixed(2)} USDT ({data.raw_pnl_pct >= 0 ? '+' : ''}
+            {data.raw_pnl_pct}%)
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="binance-card p-6 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h3 className="text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>账户净值曲线</h3>
+          <div className="flex items-baseline gap-4">
+            <span className="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>
+            <div className="flex items-center gap-2">
+              <span
+                className="text-lg font-bold mono px-3 py-1 rounded"
+                style={{
+                  color: isProfit ? '#0ECB81' : '#F6465D',
+                  background: isProfit ? 'rgba(14, 203, 129, 0.1)' : 'rgba(246, 70, 93, 0.1)',
+                  border: `1px solid ${isProfit ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)'}`
+                }}
+              >
+                {isProfit ? '▲' : '▼'} {isProfit ? '+' : ''}
+                {currentValue.raw_pnl_pct}%
+              </span>
+              <span className="text-sm mono" style={{ color: '#848E9C' }}>
+                ({isProfit ? '+' : ''}{currentValue.raw_pnl.toFixed(2)} USDT)
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Display Mode Toggle */}
+        <div className="flex gap-1 rounded p-1" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
+          <button
+            onClick={() => setDisplayMode('dollar')}
+            className="px-4 py-2 rounded 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' }
+            }
+          >
+            💵 USDT
+          </button>
+          <button
+            onClick={() => setDisplayMode('percent')}
+            className="px-4 py-2 rounded 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' }
+            }
+          >
+            📊 %
+          </button>
+        </div>
+      </div>
+
+      {/* Chart */}
+      <div className="my-2" style={{ borderRadius: '8px', overflow: 'hidden' }}>
+        <ResponsiveContainer width="100%" height={420}>
+        <LineChart data={chartData} margin={{ top: 20, right: 30, left: 10, bottom: 40 }}>
+          <defs>
+            <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#F0B90B" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="#FCD535" stopOpacity={0.2} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
+          <XAxis
+            dataKey="time"
+            stroke="#5E6673"
+            tick={{ fill: '#848E9C', fontSize: 11 }}
+            tickLine={{ stroke: '#2B3139' }}
+            interval={Math.floor(chartData.length / 10)}
+            angle={-15}
+            textAnchor="end"
+            height={60}
+          />
+          <YAxis
+            stroke="#5E6673"
+            tick={{ fill: '#848E9C', fontSize: 12 }}
+            tickLine={{ stroke: '#2B3139' }}
+            domain={calculateYDomain()}
+            tickFormatter={(value) =>
+              displayMode === 'dollar' ? `$${value.toFixed(0)}` : `${value}%`
+            }
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <ReferenceLine
+            y={displayMode === 'dollar' ? initialBalance : 0}
+            stroke="#474D57"
+            strokeDasharray="3 3"
+            label={{
+              value: displayMode === 'dollar' ? '初始' : '0%',
+              fill: '#848E9C',
+              fontSize: 12,
+            }}
+          />
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke="url(#colorGradient)"
+            strokeWidth={2.5}
+            dot={chartData.length > 50 ? false : { fill: '#F0B90B', r: 3 }}
+            activeDot={{ r: 6, fill: '#FCD535', stroke: '#F0B90B', strokeWidth: 2 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+      </div>
+
+      {/* Footer Stats */}
+      <div className="mt-5 grid grid-cols-4 gap-4 pt-5" style={{ borderTop: '1px solid #2B3139' }}>
+        <div className="p-3 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' }}>初始余额</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+            {initialBalance.toFixed(2)} USDT
+          </div>
+        </div>
+        <div className="p-3 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' }}>当前净值</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+            {currentValue.raw_equity.toFixed(2)} USDT
+          </div>
+        </div>
+        <div className="p-3 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' }}>历史周期</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>{history.length} 个</div>
+        </div>
+        <div className="p-3 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' }}>显示范围</div>
+          <div className="text-base font-bold mono" style={{ color: '#EAECEF' }}>
+            {history.length > MAX_DISPLAY_POINTS
+              ? `最近 ${MAX_DISPLAY_POINTS}`
+              : '全部数据'
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}