竞赛fix、交易员新增参数

web/src/components/CompetitionPage.tsx

@@ -1,10 +1,18 @@
+import { useState } from 'react';
 import useSWR from 'swr';
 import { api } from '../lib/api';
 import type { CompetitionData } from '../types';
 import { ComparisonChart } from './ComparisonChart';
+import { TraderConfigModal } from './TraderConfigModal';
 import { getTraderColor } from '../utils/traderColors';
+import { useLanguage } from '../contexts/LanguageContext';
+import { t } from '../i18n/translations';
 
 export function CompetitionPage() {
+  const { language } = useLanguage();
+  const [selectedTrader, setSelectedTrader] = useState<any>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const { data: competition } = useSWR<CompetitionData>(
     'competition',
     api.getCompetition,
@@ -15,6 +23,21 @@ export function CompetitionPage() {
     }
   );
 
+  const handleTraderClick = async (traderId: string) => {
+    try {
+      const traderConfig = await api.getTraderConfig(traderId);
+      setSelectedTrader(traderConfig);
+      setIsModalOpen(true);
+    } catch (error) {
+      console.error('Failed to fetch trader config:', error);
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedTrader(null);
+  };
+
   if (!competition || !competition.traders) {
     return (
       <div className="space-y-6">
@@ -59,18 +82,18 @@ export function CompetitionPage() {
           </div>
           <div>
             <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-              AI竞赛
+              {t('aiCompetition', language)}
               <span className="text-xs font-normal px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.15)', color: '#F0B90B' }}>
-                {competition.count} 交易员
+                {competition.count} {t('traders', language)}
               </span>
             </h1>
             <p className="text-xs" style={{ color: '#848E9C' }}>
-              实时对战
+              {t('liveBattle', language)}
             </p>
           </div>
         </div>
         <div className="text-right">
-          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>领先者</div>
+          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>{t('leader', language)}</div>
           <div className="text-lg font-bold" style={{ color: '#F0B90B' }}>{leader?.trader_name}</div>
           <div className="text-sm font-semibold" style={{ color: (leader?.total_pnl ?? 0) >= 0 ? '#0ECB81' : '#F6465D' }}>
             {(leader?.total_pnl ?? 0) >= 0 ? '+' : ''}{leader?.total_pnl_pct?.toFixed(2) || '0.00'}%
@@ -84,10 +107,10 @@ export function CompetitionPage() {
         <div className="binance-card p-5 animate-slide-in" style={{ animationDelay: '0.1s' }}>
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-              表现对比
+              {t('performanceComparison', language)}
             </h2>
             <div className="text-xs" style={{ color: '#848E9C' }}>
-              实时收益率
+              {t('realTimePnL', language)}
             </div>
           </div>
           <ComparisonChart traders={sortedTraders} />
@@ -97,10 +120,10 @@ export function CompetitionPage() {
         <div className="binance-card p-5 animate-slide-in" style={{ animationDelay: '0.1s' }}>
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-lg font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
-              排行榜
+              {t('leaderboard', language)}
             </h2>
             <div className="text-xs px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.1)', color: '#F0B90B', border: '1px solid rgba(240, 185, 11, 0.2)' }}>
-              实时
+              {t('live', language)}
             </div>
           </div>
           <div className="space-y-2">
@@ -111,7 +134,8 @@ export function CompetitionPage() {
               return (
                 <div
                   key={trader.trader_id}
-                  className="rounded p-3 transition-all duration-300 hover:translate-y-[-1px]"
+                  onClick={() => handleTraderClick(trader.trader_id)}
+                  className="rounded p-3 transition-all duration-300 hover:translate-y-[-1px] cursor-pointer hover:shadow-lg"
                   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'}`,
@@ -127,7 +151,7 @@ export function CompetitionPage() {
                       <div>
                         <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
                         <div className="text-xs mono font-semibold" style={{ color: traderColor }}>
-                          {trader.ai_model.toUpperCase()}
+                          {trader.ai_model.toUpperCase()} + {trader.exchange.toUpperCase()}
                         </div>
                       </div>
                     </div>
@@ -136,7 +160,7 @@ export function CompetitionPage() {
                     <div className="flex items-center gap-3">
                       {/* Total Equity */}
                       <div className="text-right">
-                        <div className="text-xs" style={{ color: '#848E9C' }}>权益</div>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>{t('equity', language)}</div>
                         <div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
                           {trader.total_equity?.toFixed(2) || '0.00'}
                         </div>
@@ -144,7 +168,7 @@ export function CompetitionPage() {
 
                       {/* P&L */}
                       <div className="text-right min-w-[90px]">
-                        <div className="text-xs" style={{ color: '#848E9C' }}>收益</div>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>{t('pnl', language)}</div>
                         <div
                           className="text-lg font-bold mono"
                           style={{ color: (trader.total_pnl ?? 0) >= 0 ? '#0ECB81' : '#F6465D' }}
@@ -159,7 +183,7 @@ export function CompetitionPage() {
 
                       {/* Positions */}
                       <div className="text-right">
-                        <div className="text-xs" style={{ color: '#848E9C' }}>持仓</div>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>{t('pos', language)}</div>
                         <div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
                           {trader.position_count}
                         </div>
@@ -193,7 +217,7 @@ export function CompetitionPage() {
       {competition.traders.length === 2 && (
         <div className="binance-card p-5 animate-slide-in" style={{ animationDelay: '0.3s' }}>
           <h2 className="text-lg font-bold mb-4 flex items-center gap-2" style={{ color: '#EAECEF' }}>
-            正面对决
+            {t('headToHead', language)}
           </h2>
           <div className="grid grid-cols-2 gap-4">
             {sortedTraders.map((trader, index) => {
@@ -220,22 +244,25 @@ export function CompetitionPage() {
                 >
                   <div className="text-center">
                     <div
-                      className="text-base font-bold mb-2"
+                      className="text-base font-bold mb-1"
                       style={{ color: getTraderColor(sortedTraders, trader.trader_id) }}
                     >
                       {trader.trader_name}
                     </div>
+                    <div className="text-xs mono mb-2" style={{ color: '#848E9C' }}>
+                      {trader.ai_model.toUpperCase()} + {trader.exchange.toUpperCase()}
+                    </div>
                     <div className="text-2xl font-bold mono mb-1" style={{ color: (trader.total_pnl ?? 0) >= 0 ? '#0ECB81' : '#F6465D' }}>
                       {(trader.total_pnl ?? 0) >= 0 ? '+' : ''}{trader.total_pnl_pct?.toFixed(2) || '0.00'}%
                     </div>
                     {isWinning && gap > 0 && (
                       <div className="text-xs font-semibold" style={{ color: '#0ECB81' }}>
-                        领先 {gap.toFixed(2)}%
+                        {t('leadingBy', language, { gap: gap.toFixed(2) })}
                       </div>
                     )}
                     {!isWinning && gap < 0 && (
                       <div className="text-xs font-semibold" style={{ color: '#F6465D' }}>
-                        落后 {Math.abs(gap).toFixed(2)}%
+                        {t('behindBy', language, { gap: Math.abs(gap).toFixed(2) })}
                       </div>
                     )}
                   </div>
@@ -245,6 +272,13 @@ export function CompetitionPage() {
           </div>
         </div>
       )}
+
+      {/* Trader Config Modal */}
+      <TraderConfigModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        traderData={selectedTrader}
+      />
     </div>
   );
 }