account system、custom prompt

web/src/App.tsx

@@ -3,9 +3,14 @@ import useSWR from 'swr';
 import { api } from './lib/api';
 import { EquityChart } from './components/EquityChart';
 import { AITradersPage } from './components/AITradersPage';
+import { LoginPage } from './components/LoginPage';
+import { RegisterPage } from './components/RegisterPage';
+import { CompetitionPage } from './components/CompetitionPage';
 import AILearning from './components/AILearning';
 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 type {
   SystemStatus,
   AccountInfo,
@@ -15,11 +20,34 @@ import type {
   TraderInfo,
 } from './types';
 
-type Page = 'traders' | 'trader';
+type Page = 'competition' | 'traders' | 'trader';
+
+// 获取友好的AI模型名称
+function getModelDisplayName(modelId: string): string {
+  switch (modelId.toLowerCase()) {
+    case 'deepseek':
+      return 'DeepSeek';
+    case 'qwen':
+      return 'Qwen';
+    case 'claude':
+      return 'Claude';
+    case 'gpt4':
+    case 'gpt-4':
+      return 'GPT-4';
+    case 'gpt3.5':
+    case 'gpt-3.5':
+      return 'GPT-3.5';
+    default:
+      return modelId.toUpperCase();
+  }
+}
 
 function App() {
   const { language, setLanguage } = useLanguage();
-  const [currentPage, setCurrentPage] = useState<Page>('traders');
+  const { user, token, logout, isLoading } = useAuth();
+  const { config: systemConfig, loading: configLoading } = useSystemConfig();
+  const [route, setRoute] = useState(window.location.pathname);
+  const [currentPage, setCurrentPage] = useState<Page>('competition');
   const [selectedTraderId, setSelectedTraderId] = useState<string | undefined>();
   const [lastUpdate, setLastUpdate] = useState<string>('--:--:--');
 
@@ -105,59 +133,118 @@ function App() {
 
   const selectedTrader = traders?.find((t) => t.trader_id === selectedTraderId);
 
+  // Handle routing
+  useEffect(() => {
+    const handlePopState = () => {
+      setRoute(window.location.pathname);
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  // Show loading spinner while checking auth or config
+  if (isLoading || configLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
+        <div className="text-center">
+          <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl animate-spin"
+               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+            ⚡
+          </div>
+          <p style={{ color: '#EAECEF' }}>加载中...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // If not in admin mode and not authenticated, show login/register pages
+  if (!systemConfig?.admin_mode && (!user || !token)) {
+    if (route === '/register') {
+      return <RegisterPage />;
+    }
+    return <LoginPage />;
+  }
+
   return (
     <div className="min-h-screen" style={{ background: '#0B0E11', color: '#EAECEF' }}>
       {/* Header - Binance Style */}
       <header className="glass sticky top-0 z-50 backdrop-blur-xl">
-        <div className="max-w-[1920px] mx-auto px-3 sm:px-6 py-3 sm:py-4">
-          {/* Mobile: Two rows, Desktop: Single row */}
-          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-            {/* Left: Logo and Title */}
-            <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-              <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-lg sm:text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+        <div className="max-w-[1920px] mx-auto px-6 py-4">
+          <div className="relative flex items-center">
+            {/* Left - Logo and Title */}
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-full flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
                 ⚡
               </div>
               <div>
-                <h1 className="text-base sm:text-xl font-bold leading-tight" style={{ color: '#EAECEF' }}>
+                <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
                   {t('appTitle', language)}
                 </h1>
-                <p className="text-xs mono hidden sm:block" style={{ color: '#848E9C' }}>
+                <p className="text-xs mono" style={{ color: '#848E9C' }}>
                   {t('subtitle', language)}
                 </p>
               </div>
             </div>
-
-            {/* Right: Controls - Wrap on mobile */}
-            <div className="flex items-center gap-2 flex-wrap md:flex-nowrap">
-              {/* GitHub Link - Hidden on mobile, icon only on tablet */}
-              <a
-                href="https://github.com/tinkle-community/nofx"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="hidden sm:flex items-center gap-2 px-2 md:px-3 py-1.5 md:py-2 rounded text-sm font-semibold transition-all hover:scale-105"
-                style={{ background: '#1E2329', color: '#848E9C', border: '1px solid #2B3139' }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = '#2B3139';
-                  e.currentTarget.style.color = '#EAECEF';
-                  e.currentTarget.style.borderColor = '#F0B90B';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = '#1E2329';
-                  e.currentTarget.style.color = '#848E9C';
-                  e.currentTarget.style.borderColor = '#2B3139';
-                }}
+            
+            {/* Center - Page Toggle (absolutely positioned) */}
+            <div className="absolute left-1/2 transform -translate-x-1/2 flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
+              <button
+                onClick={() => setCurrentPage('competition')}
+                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
+                style={currentPage === 'competition'
+                  ? { background: '#F0B90B', color: '#000' }
+                  : { background: 'transparent', color: '#848E9C' }
+                }
               >
-                <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
-                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-                </svg>
-                <span className="hidden md:inline">GitHub</span>
-              </a>
+                竞赛
+              </button>
+              <button
+                onClick={() => setCurrentPage('traders')}
+                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
+                style={currentPage === 'traders'
+                  ? { background: '#F0B90B', color: '#000' }
+                  : { background: 'transparent', color: '#848E9C' }
+                }
+              >
+                {t('aiTraders', language)}
+              </button>
+              <button
+                onClick={() => setCurrentPage('trader')}
+                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
+                style={currentPage === 'trader'
+                  ? { background: '#F0B90B', color: '#000' }
+                  : { background: 'transparent', color: '#848E9C' }
+                }
+              >
+                {t('tradingPanel', language)}
+              </button>
+            </div>
+            
+            {/* Right - Actions */}
+            <div className="ml-auto flex items-center gap-3">
+
+              {/* User Info - Only show if not in admin mode */}
+              {!systemConfig?.admin_mode && user && (
+                <div className="flex items-center gap-2 px-3 py-2 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+                  <div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: '#F0B90B', color: '#000' }}>
+                    {user.email[0].toUpperCase()}
+                  </div>
+                  <span className="text-sm" style={{ color: '#EAECEF' }}>{user.email}</span>
+                </div>
+              )}
+              
+              {/* Admin Mode Indicator */}
+              {systemConfig?.admin_mode && (
+                <div className="flex items-center gap-2 px-3 py-2 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+                  <span className="text-sm font-semibold" style={{ color: '#F0B90B' }}>⚡ 管理员模式</span>
+                </div>
+              )}
 
               {/* Language Toggle */}
-              <div className="flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1" style={{ background: '#1E2329' }}>
+              <div className="flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
                 <button
                   onClick={() => setLanguage('zh')}
-                  className="px-2 sm:px-3 py-1 sm:py-1.5 rounded text-xs font-semibold transition-all"
+                  className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
                   style={language === 'zh'
                     ? { background: '#F0B90B', color: '#000' }
                     : { background: 'transparent', color: '#848E9C' }
@@ -167,7 +254,7 @@ function App() {
                 </button>
                 <button
                   onClick={() => setLanguage('en')}
-                  className="px-2 sm:px-3 py-1 sm:py-1.5 rounded text-xs font-semibold transition-all"
+                  className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
                   style={language === 'en'
                     ? { background: '#F0B90B', color: '#000' }
                     : { background: 'transparent', color: '#848E9C' }
@@ -177,50 +264,21 @@ function App() {
                 </button>
               </div>
 
-              {/* Page Toggle */}
-              <div className="flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1" style={{ background: '#1E2329' }}>
+              {/* Logout Button - Only show if not in admin mode */}
+              {!systemConfig?.admin_mode && (
                 <button
-                  onClick={() => setCurrentPage('traders')}
-                  className="px-2 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-semibold transition-all"
-                  style={currentPage === 'traders'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
+                  onClick={logout}
+                  className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+                  style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D', border: '1px solid rgba(246, 70, 93, 0.2)' }}
                 >
-                  {t('aiTraders', language)}
+                  退出
                 </button>
-                <button
-                  onClick={() => setCurrentPage('trader')}
-                  className="px-2 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-semibold transition-all"
-                  style={currentPage === 'trader'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
-                >
-                  {t('tradingPanel', language)}
-                </button>
-              </div>
-
-              {/* Trader Selector (only show on trader page) */}
-              {currentPage === 'trader' && traders && traders.length > 0 && (
-                <select
-                  value={selectedTraderId}
-                  onChange={(e) => setSelectedTraderId(e.target.value)}
-                  className="rounded px-2 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm font-medium cursor-pointer transition-colors flex-1 sm:flex-initial"
-                  style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                >
-                  {traders.map((trader) => (
-                    <option key={trader.trader_id} value={trader.trader_id}>
-                      {trader.trader_name} ({trader.ai_model.toUpperCase()})
-                    </option>
-                  ))}
-                </select>
               )}
 
               {/* Status Indicator (only show on trader page) */}
               {currentPage === 'trader' && status && (
                 <div
-                  className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded"
+                  className="flex items-center gap-2 px-3 py-2 rounded"
                   style={status.is_running
                     ? { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81', border: '1px solid rgba(14, 203, 129, 0.2)' }
                     : { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D', border: '1px solid rgba(246, 70, 93, 0.2)' }
@@ -242,8 +300,15 @@ function App() {
 
       {/* Main Content */}
       <main className="max-w-[1920px] mx-auto px-6 py-6">
-        {currentPage === 'traders' ? (
-          <AITradersPage />
+        {currentPage === 'competition' ? (
+          <CompetitionPage />
+        ) : currentPage === 'traders' ? (
+          <AITradersPage 
+            onTraderSelect={(traderId) => {
+              setSelectedTraderId(traderId);
+              setCurrentPage('trader');
+            }}
+          />
         ) : (
           <TraderDetailsPage
             selectedTrader={selectedTrader}
@@ -254,6 +319,9 @@ function App() {
             stats={stats}
             lastUpdate={lastUpdate}
             language={language}
+            traders={traders}
+            selectedTraderId={selectedTraderId}
+            onTraderSelect={setSelectedTraderId}
           />
         )}
       </main>
@@ -263,6 +331,30 @@ function App() {
         <div className="max-w-[1920px] mx-auto px-6 py-6 text-center text-sm" style={{ color: '#5E6673' }}>
           <p>{t('footerTitle', language)}</p>
           <p className="mt-1">{t('footerWarning', language)}</p>
+          <div className="mt-4">
+            <a
+              href="https://github.com/tinkle-community/nofx"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+              style={{ background: '#1E2329', color: '#848E9C', border: '1px solid #2B3139' }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = '#2B3139';
+                e.currentTarget.style.color = '#EAECEF';
+                e.currentTarget.style.borderColor = '#F0B90B';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = '#1E2329';
+                e.currentTarget.style.color = '#848E9C';
+                e.currentTarget.style.borderColor = '#2B3139';
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+              </svg>
+              GitHub
+            </a>
+          </div>
         </div>
       </footer>
     </div>
@@ -278,8 +370,14 @@ function TraderDetailsPage({
   decisions,
   lastUpdate,
   language,
+  traders,
+  selectedTraderId,
+  onTraderSelect,
 }: {
   selectedTrader?: TraderInfo;
+  traders?: TraderInfo[];
+  selectedTraderId?: string;
+  onTraderSelect: (traderId: string) => void;
   status?: SystemStatus;
   account?: AccountInfo;
   positions?: Position[];
@@ -320,14 +418,35 @@ function TraderDetailsPage({
     <div>
       {/* Trader Header */}
       <div className="mb-6 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)' }}>
-        <h2 className="text-2xl font-bold mb-3 flex items-center gap-2" style={{ color: '#EAECEF' }}>
-          <span className="w-10 h-10 rounded-full flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
-            🤖
-          </span>
-          {selectedTrader.trader_name}
-        </h2>
+        <div className="flex items-start justify-between mb-3">
+          <h2 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            <span className="w-10 h-10 rounded-full flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+              🤖
+            </span>
+            {selectedTrader.trader_name}
+          </h2>
+          
+          {/* Trader Selector */}
+          {traders && traders.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm" style={{ color: '#848E9C' }}>切换交易员:</span>
+              <select
+                value={selectedTraderId}
+                onChange={(e) => onTraderSelect(e.target.value)}
+                className="rounded px-3 py-2 text-sm font-medium cursor-pointer transition-colors"
+                style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+              >
+                {traders.map((trader) => (
+                  <option key={trader.trader_id} value={trader.trader_id}>
+                    {trader.trader_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
         <div className="flex items-center gap-4 text-sm" style={{ color: '#848E9C' }}>
-          <span>AI Model: <span className="font-semibold" style={{ color: selectedTrader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa' }}>{selectedTrader.ai_model.toUpperCase()}</span></span>
+          <span>AI Model: <span className="font-semibold" style={{ color: selectedTrader.ai_model.includes('qwen') ? '#c084fc' : '#60a5fa' }}>{getModelDisplayName(selectedTrader.ai_model.split('_').pop() || selectedTrader.ai_model)}</span></span>
           {status && (
             <>
               <span>•</span>
@@ -669,11 +788,13 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
   );
 }
 
-// Wrap App with LanguageProvider
-export default function AppWithLanguage() {
+// Wrap App with providers
+export default function AppWithProviders() {
   return (
     <LanguageProvider>
-      <App />
+      <AuthProvider>
+        <App />
+      </AuthProvider>
     </LanguageProvider>
   );
 }

web/src/components/AITradersPage.tsx

@@ -4,8 +4,34 @@ import { api } from '../lib/api';
 import type { TraderInfo, CreateTraderRequest, AIModel, Exchange } from '../types';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { getExchangeIcon } from './ExchangeIcons';
+import { getModelIcon } from './ModelIcons';
 
-export function AITradersPage() {
+// 获取友好的AI模型名称
+function getModelDisplayName(modelId: string): string {
+  switch (modelId.toLowerCase()) {
+    case 'deepseek':
+      return 'DeepSeek';
+    case 'qwen':
+      return 'Qwen';
+    case 'claude':
+      return 'Claude';
+    case 'gpt4':
+    case 'gpt-4':
+      return 'GPT-4';
+    case 'gpt3.5':
+    case 'gpt-3.5':
+      return 'GPT-3.5';
+    default:
+      return modelId.toUpperCase();
+  }
+}
+
+interface AITradersPageProps {
+  onTraderSelect?: (traderId: string) => void;
+}
+
+export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
   const { language } = useLanguage();
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showModelModal, setShowModelModal] = useState(false);
@@ -14,6 +40,8 @@ export function AITradersPage() {
   const [editingExchange, setEditingExchange] = useState<string | null>(null);
   const [allModels, setAllModels] = useState<AIModel[]>([]);
   const [allExchanges, setAllExchanges] = useState<Exchange[]>([]);
+  const [supportedModels, setSupportedModels] = useState<AIModel[]>([]);
+  const [supportedExchanges, setSupportedExchanges] = useState<Exchange[]>([]);
 
   const { data: traders, mutate: mutateTraders } = useSWR<TraderInfo[]>(
     'traders',
@@ -25,22 +53,41 @@ export function AITradersPage() {
   useEffect(() => {
     const loadConfigs = async () => {
       try {
-        const [modelConfigs, exchangeConfigs] = await Promise.all([
+        console.log('🔄 开始加载模型和交易所配置...');
+        const [modelConfigs, exchangeConfigs, supportedModels, supportedExchanges] = await Promise.all([
           api.getModelConfigs(),
-          api.getExchangeConfigs()
+          api.getExchangeConfigs(),
+          api.getSupportedModels(),
+          api.getSupportedExchanges()
         ]);
+        console.log('✅ 用户模型配置加载成功:', modelConfigs);
+        console.log('✅ 用户交易所配置加载成功:', exchangeConfigs);
+        console.log('✅ 支持的模型加载成功:', supportedModels);
+        console.log('✅ 支持的交易所加载成功:', supportedExchanges);
         setAllModels(modelConfigs);
         setAllExchanges(exchangeConfigs);
+        setSupportedModels(supportedModels);
+        setSupportedExchanges(supportedExchanges);
       } catch (error) {
-        console.error('Failed to load configs:', error);
+        console.error('❌ 加载配置失败:', error);
       }
     };
     loadConfigs();
   }, []);
 
-  // 只显示已配置的模型和交易所
-  const configuredModels = allModels.filter(m => m.enabled && m.apiKey);
-  const configuredExchanges = allExchanges.filter(e => e.enabled && e.apiKey && (e.id === 'hyperliquid' || e.secretKey));
+  // 显示所有用户的模型和交易所配置（用于调试）
+  const configuredModels = allModels || [];
+  const configuredExchanges = allExchanges || [];
+  
+  // 只在创建交易员时使用已启用且配置完整的
+  const enabledModels = allModels?.filter(m => m.enabled && m.apiKey) || [];
+  const enabledExchanges = allExchanges?.filter(e => {
+    if (!e.enabled || !e.apiKey) return false;
+    // Hyperliquid 只需要私钥（作为apiKey），不需要secretKey
+    if (e.id === 'hyperliquid') return true;
+    // 其他交易所需要secretKey
+    return e.secretKey && e.secretKey.trim() !== '';
+  }) || [];
 
   // 检查模型是否正在被运行中的交易员使用
   const isModelInUse = (modelId: string) => {
@@ -52,10 +99,10 @@ export function AITradersPage() {
     return traders?.some(t => t.exchange_id === exchangeId && t.is_running) || false;
   };
 
-  const handleCreateTrader = async (modelId: string, exchangeId: string, name: string, initialBalance: number) => {
+  const handleCreateTrader = async (modelId: string, exchangeId: string, name: string, initialBalance: number, customPrompt?: string, overrideBase?: boolean) => {
     try {
-      const model = allModels.find(m => m.id === modelId);
-      const exchange = allExchanges.find(e => e.id === exchangeId);
+      const model = allModels?.find(m => m.id === modelId);
+      const exchange = allExchanges?.find(e => e.id === exchangeId);
       
       if (!model?.enabled) {
         alert(t('modelNotConfigured', language));
@@ -71,7 +118,9 @@ export function AITradersPage() {
         name,
         ai_model_id: modelId,
         exchange_id: exchangeId,
-        initial_balance: initialBalance
+        initial_balance: initialBalance,
+        custom_prompt: customPrompt,
+        override_base_prompt: overrideBase
       };
       
       await api.createTrader(request);
@@ -127,9 +176,9 @@ export function AITradersPage() {
     if (!confirm('确定要删除此AI模型配置吗？')) return;
     
     try {
-      const updatedModels = allModels.map(m => 
+      const updatedModels = allModels?.map(m => 
         m.id === modelId ? { ...m, apiKey: '', enabled: false } : m
-      );
+      ) || [];
       
       const request = {
         models: Object.fromEntries(
@@ -155,9 +204,27 @@ export function AITradersPage() {
 
   const handleSaveModelConfig = async (modelId: string, apiKey: string) => {
     try {
-      const updatedModels = allModels.map(m => 
-        m.id === modelId ? { ...m, apiKey, enabled: true } : m
-      );
+      // 找到要配置的模型（从supportedModels中）
+      const modelToUpdate = supportedModels?.find(m => m.id === modelId);
+      if (!modelToUpdate) {
+        alert('模型不存在');
+        return;
+      }
+
+      // 创建或更新用户的模型配置
+      const existingModel = allModels?.find(m => m.id === modelId);
+      let updatedModels;
+      
+      if (existingModel) {
+        // 更新现有配置
+        updatedModels = allModels?.map(m => 
+          m.id === modelId ? { ...m, apiKey, enabled: true } : m
+        ) || [];
+      } else {
+        // 添加新配置
+        const newModel = { ...modelToUpdate, apiKey, enabled: true };
+        updatedModels = [...(allModels || []), newModel];
+      }
       
       const request = {
         models: Object.fromEntries(
@@ -172,7 +239,11 @@ export function AITradersPage() {
       };
       
       await api.updateModelConfigs(request);
-      setAllModels(updatedModels);
+      
+      // 重新获取用户配置以确保数据同步
+      const refreshedModels = await api.getModelConfigs();
+      setAllModels(refreshedModels);
+      
       setShowModelModal(false);
       setEditingModel(null);
     } catch (error) {
@@ -185,9 +256,9 @@ export function AITradersPage() {
     if (!confirm('确定要删除此交易所配置吗？')) return;
     
     try {
-      const updatedExchanges = allExchanges.map(e => 
+      const updatedExchanges = allExchanges?.map(e => 
         e.id === exchangeId ? { ...e, apiKey: '', secretKey: '', enabled: false } : e
-      );
+      ) || [];
       
       const request = {
         exchanges: Object.fromEntries(
@@ -213,11 +284,29 @@ export function AITradersPage() {
     }
   };
 
-  const handleSaveExchangeConfig = async (exchangeId: string, apiKey: string, secretKey?: string, testnet?: boolean) => {
+  const handleSaveExchangeConfig = async (exchangeId: string, apiKey: string, secretKey?: string, testnet?: boolean, hyperliquidWalletAddr?: string, asterUser?: string, asterSigner?: string, asterPrivateKey?: string) => {
     try {
-      const updatedExchanges = allExchanges.map(e => 
-        e.id === exchangeId ? { ...e, apiKey, secretKey, testnet, enabled: true } : e
-      );
+      // 找到要配置的交易所（从supportedExchanges中）
+      const exchangeToUpdate = supportedExchanges?.find(e => e.id === exchangeId);
+      if (!exchangeToUpdate) {
+        alert('交易所不存在');
+        return;
+      }
+
+      // 创建或更新用户的交易所配置
+      const existingExchange = allExchanges?.find(e => e.id === exchangeId);
+      let updatedExchanges;
+      
+      if (existingExchange) {
+        // 更新现有配置
+        updatedExchanges = allExchanges?.map(e => 
+          e.id === exchangeId ? { ...e, apiKey, secretKey, testnet, hyperliquidWalletAddr, asterUser, asterSigner, asterPrivateKey, enabled: true } : e
+        ) || [];
+      } else {
+        // 添加新配置
+        const newExchange = { ...exchangeToUpdate, apiKey, secretKey, testnet, hyperliquidWalletAddr, asterUser, asterSigner, asterPrivateKey, enabled: true };
+        updatedExchanges = [...(allExchanges || []), newExchange];
+      }
       
       const request = {
         exchanges: Object.fromEntries(
@@ -227,14 +316,22 @@ export function AITradersPage() {
               enabled: exchange.enabled,
               api_key: exchange.apiKey || '',
               secret_key: exchange.secretKey || '',
-              testnet: exchange.testnet || false
+              testnet: exchange.testnet || false,
+              hyperliquid_wallet_addr: exchange.hyperliquidWalletAddr || '',
+              aster_user: exchange.asterUser || '',
+              aster_signer: exchange.asterSigner || '',
+              aster_private_key: exchange.asterPrivateKey || ''
             }
           ])
         )
       };
       
       await api.updateExchangeConfigs(request);
-      setAllExchanges(updatedExchanges);
+      
+      // 重新获取用户配置以确保数据同步
+      const refreshedExchanges = await api.getExchangeConfigs();
+      setAllExchanges(refreshedExchanges);
+      
       setShowExchangeModal(false);
       setEditingExchange(null);
     } catch (error) {
@@ -339,21 +436,25 @@ export function AITradersPage() {
                   onClick={() => handleModelClick(model.id)}
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                         style={{ 
-                           background: model.id === 'deepseek' ? '#60a5fa' : '#c084fc',
-                           color: '#fff'
-                         }}>
-                      {model.name[0]}
+                    <div className="w-8 h-8 flex items-center justify-center">
+                      {getModelIcon(model.provider || model.id, { width: 32, height: 32 }) || (
+                        <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+                             style={{ 
+                               background: model.id === 'deepseek' ? '#60a5fa' : '#c084fc',
+                               color: '#fff'
+                             }}>
+                          {model.name[0]}
+                        </div>
+                      )}
                     </div>
                     <div>
                       <div className="font-semibold" style={{ color: '#EAECEF' }}>{model.name}</div>
                       <div className="text-xs" style={{ color: '#848E9C' }}>
-                        {t('configured', language)}
+                        {inUse ? '正在使用' : model.enabled ? '已启用' : '已配置'}
                       </div>
                     </div>
                   </div>
-                  <div className={`w-3 h-3 rounded-full bg-green-400`} />
+                  <div className={`w-3 h-3 rounded-full ${model.enabled && model.apiKey ? 'bg-green-400' : 'bg-gray-500'}`} />
                 </div>
               );
             })}
@@ -384,21 +485,17 @@ export function AITradersPage() {
                   onClick={() => handleExchangeClick(exchange.id)}
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                         style={{ 
-                           background: exchange.type === 'cex' ? '#F0B90B' : '#0ECB81',
-                           color: '#000'
-                         }}>
-                      {exchange.name[0]}
+                    <div className="w-8 h-8 flex items-center justify-center">
+                      {getExchangeIcon(exchange.id, { width: 32, height: 32 })}
                     </div>
                     <div>
                       <div className="font-semibold" style={{ color: '#EAECEF' }}>{exchange.name}</div>
                       <div className="text-xs" style={{ color: '#848E9C' }}>
-                        {exchange.type.toUpperCase()} • {t('configured', language)}
+                        {exchange.type.toUpperCase()} • {inUse ? '正在使用' : exchange.enabled ? '已启用' : '已配置'}
                       </div>
                     </div>
                   </div>
-                  <div className={`w-3 h-3 rounded-full bg-green-400`} />
+                  <div className={`w-3 h-3 rounded-full ${exchange.enabled && exchange.apiKey ? 'bg-green-400' : 'bg-gray-500'}`} />
                 </div>
               );
             })}
@@ -429,7 +526,7 @@ export function AITradersPage() {
                 <div className="flex items-center gap-4">
                   <div className="w-12 h-12 rounded-full flex items-center justify-center text-xl"
                        style={{ 
-                         background: trader.ai_model === 'deepseek' ? '#60a5fa' : '#c084fc',
+                         background: trader.ai_model.includes('deepseek') ? '#60a5fa' : '#c084fc',
                          color: '#fff'
                        }}>
                     🤖
@@ -439,9 +536,9 @@ export function AITradersPage() {
                       {trader.trader_name}
                     </div>
                     <div className="text-sm" style={{ 
-                      color: trader.ai_model === 'deepseek' ? '#60a5fa' : '#c084fc' 
+                      color: trader.ai_model.includes('deepseek') ? '#60a5fa' : '#c084fc' 
                     }}>
-                      {trader.ai_model.toUpperCase()} Model • {trader.exchange_id?.toUpperCase()}
+                      {getModelDisplayName(trader.ai_model.split('_').pop() || trader.ai_model)} Model • {trader.exchange_id?.toUpperCase()}
                     </div>
                   </div>
                 </div>
@@ -463,7 +560,15 @@ export function AITradersPage() {
                   {/* Actions */}
                   <div className="flex gap-2">
                     <button
-                      onClick={() => handleToggleTrader(trader.trader_id, trader.is_running)}
+                      onClick={() => onTraderSelect?.(trader.trader_id)}
+                      className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+                      style={{ background: 'rgba(99, 102, 241, 0.1)', color: '#6366F1' }}
+                    >
+                      📊 查看
+                    </button>
+                    
+                    <button
+                      onClick={() => handleToggleTrader(trader.trader_id, trader.is_running || false)}
                       className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
                       style={trader.is_running 
                         ? { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
@@ -507,8 +612,8 @@ export function AITradersPage() {
       {/* Create Trader Modal */}
       {showCreateModal && (
         <CreateTraderModal
-          enabledModels={configuredModels}
-          enabledExchanges={configuredExchanges}
+          enabledModels={enabledModels}
+          enabledExchanges={enabledExchanges}
           onCreate={handleCreateTrader}
           onClose={() => setShowCreateModal(false)}
           language={language}
@@ -518,7 +623,7 @@ export function AITradersPage() {
       {/* Model Configuration Modal */}
       {showModelModal && (
         <ModelConfigModal
-          allModels={allModels}
+          allModels={supportedModels}
           editingModelId={editingModel}
           onSave={handleSaveModelConfig}
           onDelete={handleDeleteModelConfig}
@@ -533,7 +638,7 @@ export function AITradersPage() {
       {/* Exchange Configuration Modal */}
       {showExchangeModal && (
         <ExchangeConfigModal
-          allExchanges={allExchanges}
+          allExchanges={supportedExchanges}
           editingExchangeId={editingExchange}
           onSave={handleSaveExchangeConfig}
           onDelete={handleDeleteExchangeConfig}
@@ -558,7 +663,7 @@ function CreateTraderModal({
 }: {
   enabledModels: AIModel[];
   enabledExchanges: Exchange[];
-  onCreate: (modelId: string, exchangeId: string, name: string, initialBalance: number) => void;
+  onCreate: (modelId: string, exchangeId: string, name: string, initialBalance: number, customPrompt?: string, overrideBase?: boolean) => void;
   onClose: () => void;
   language: any;
 }) {
@@ -571,12 +676,15 @@ function CreateTraderModal({
   const [selectedExchange, setSelectedExchange] = useState(defaultExchange?.id || '');
   const [traderName, setTraderName] = useState('');
   const [initialBalance, setInitialBalance] = useState(1000);
+  const [customPrompt, setCustomPrompt] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [overrideBase, setOverrideBase] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedModel || !selectedExchange || !traderName.trim()) return;
     
-    onCreate(selectedModel, selectedExchange, traderName.trim(), initialBalance);
+    onCreate(selectedModel, selectedExchange, traderName.trim(), initialBalance, customPrompt.trim() || undefined, overrideBase);
   };
 
   return (
@@ -655,6 +763,68 @@ function CreateTraderModal({
               required
             />
           </div>
+          
+          {/* Advanced Settings Toggle */}
+          <div className="mt-4">
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="flex items-center gap-2 text-sm font-semibold"
+              style={{ color: '#F0B90B' }}
+            >
+              <span style={{ transform: showAdvanced ? 'rotate(90deg)' : 'rotate(0)', transition: 'transform 0.2s' }}>▶</span>
+              高级设置
+            </button>
+          </div>
+          
+          {/* Custom Prompt Field - Show when advanced is toggled */}
+          {showAdvanced && (
+            <div className="mt-4">
+              <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                自定义交易策略 (可选)
+              </label>
+              <textarea
+                value={customPrompt}
+                onChange={(e) => setCustomPrompt(e.target.value)}
+                placeholder="例如：专注于主流币种BTC/ETH/SOL，避免MEME币。使用保守策略，单笔仓位不超过账户的30%..."
+                rows={5}
+                className="w-full px-3 py-2 rounded resize-none"
+                style={{ 
+                  background: '#0B0E11', 
+                  border: '1px solid #2B3139', 
+                  color: '#EAECEF',
+                  fontSize: '14px'
+                }}
+              />
+              <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                输入自定义的交易策略和规则，将作为AI交易员的额外指导。留空使用默认策略。
+              </div>
+              
+              {/* Override Base Strategy Checkbox */}
+              {customPrompt.trim() && (
+                <div className="mt-3 p-3 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.2)' }}>
+                  <label className="flex items-start gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={overrideBase}
+                      onChange={(e) => setOverrideBase(e.target.checked)}
+                      className="mt-1"
+                      style={{ accentColor: '#F6465D' }}
+                    />
+                    <div>
+                      <div className="text-sm font-semibold" style={{ color: '#F6465D' }}>
+                        覆盖基础交易策略
+                      </div>
+                      <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                        ⚠️ 警告：勾选后将完全使用您的自定义策略，不再使用系统默认的风控和交易逻辑。
+                        这可能导致交易风险增加。仅在您完全理解交易逻辑时使用此选项。
+                      </div>
+                    </div>
+                  </label>
+                </div>
+              )}
+            </div>
+          )}
 
           <div className="flex gap-3 mt-6">
             <button
@@ -699,7 +869,7 @@ function ModelConfigModal({
   const [apiKey, setApiKey] = useState('');
 
   // 获取当前编辑的模型信息
-  const selectedModel = allModels.find(m => m.id === selectedModelId);
+  const selectedModel = allModels?.find(m => m.id === selectedModelId);
 
   // 如果是编辑现有模型，初始化API Key
   useEffect(() => {
@@ -715,17 +885,32 @@ function ModelConfigModal({
     onSave(selectedModelId, apiKey.trim());
   };
 
-  // 可选择的模型列表（排除已配置的，除非是当前编辑的）
-  const availableModels = allModels.filter(m => 
-    !m.enabled || !m.apiKey || m.id === editingModelId
-  );
+  // 可选择的模型列表（所有支持的模型）
+  const availableModels = allModels || [];
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-lg" style={{ background: '#1E2329' }}>
-        <h3 className="text-xl font-bold mb-4" style={{ color: '#EAECEF' }}>
-          {editingModelId ? '编辑AI模型' : '添加AI模型'}
-        </h3>
+      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-lg relative" style={{ background: '#1E2329' }}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
+            {editingModelId ? '编辑AI模型' : '添加AI模型'}
+          </h3>
+          {editingModelId && (
+            <button
+              type="button"
+              onClick={() => {
+                if (confirm('确定要删除此AI模型配置吗？')) {
+                  onDelete(editingModelId);
+                }
+              }}
+              className="p-2 rounded hover:bg-red-100 transition-colors"
+              style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
+              title="删除配置"
+            >
+              🗑️
+            </button>
+          )}
+        </div>
         
         <form onSubmit={handleSubmit} className="space-y-4">
           {!editingModelId && (
@@ -753,12 +938,16 @@ function ModelConfigModal({
           {selectedModel && (
             <div className="p-4 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
               <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                     style={{ 
-                       background: selectedModel.id === 'deepseek' ? '#60a5fa' : '#c084fc',
-                       color: '#fff'
-                     }}>
-                  {selectedModel.name[0]}
+                <div className="w-8 h-8 flex items-center justify-center">
+                  {getModelIcon(selectedModel.provider || selectedModel.id, { width: 32, height: 32 }) || (
+                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+                         style={{ 
+                           background: selectedModel.id === 'deepseek' ? '#60a5fa' : '#c084fc',
+                           color: '#fff'
+                         }}>
+                      {selectedModel.name[0]}
+                    </div>
+                  )}
                 </div>
                 <div>
                   <div className="font-semibold" style={{ color: '#EAECEF' }}>{selectedModel.name}</div>
@@ -792,18 +981,6 @@ function ModelConfigModal({
             >
               {t('cancel', language)}
             </button>
-            {editingModelId && (
-              <button
-                type="button"
-                onClick={() => {
-                  onDelete(editingModelId);
-                }}
-                className="px-4 py-2 rounded text-sm font-semibold"
-                style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
-              >
-                🗑️
-              </button>
-            )}
             <button
               type="submit"
               disabled={!selectedModelId || !apiKey.trim()}
@@ -830,7 +1007,7 @@ function ExchangeConfigModal({
 }: {
   allExchanges: Exchange[];
   editingExchangeId: string | null;
-  onSave: (exchangeId: string, apiKey: string, secretKey?: string, testnet?: boolean) => void;
+  onSave: (exchangeId: string, apiKey: string, secretKey?: string, testnet?: boolean, hyperliquidWalletAddr?: string, asterUser?: string, asterSigner?: string, asterPrivateKey?: string) => void;
   onDelete: (exchangeId: string) => void;
   onClose: () => void;
   language: any;
@@ -839,9 +1016,15 @@ function ExchangeConfigModal({
   const [apiKey, setApiKey] = useState('');
   const [secretKey, setSecretKey] = useState('');
   const [testnet, setTestnet] = useState(false);
+  // Hyperliquid 特定字段
+  const [hyperliquidWalletAddr, setHyperliquidWalletAddr] = useState('');
+  // Aster 特定字段
+  const [asterUser, setAsterUser] = useState('');
+  const [asterSigner, setAsterSigner] = useState('');
+  const [asterPrivateKey, setAsterPrivateKey] = useState('');
 
   // 获取当前编辑的交易所信息
-  const selectedExchange = allExchanges.find(e => e.id === selectedExchangeId);
+  const selectedExchange = allExchanges?.find(e => e.id === selectedExchangeId);
 
   // 如果是编辑现有交易所，初始化表单数据
   useEffect(() => {
@@ -849,28 +1032,57 @@ function ExchangeConfigModal({
       setApiKey(selectedExchange.apiKey || '');
       setSecretKey(selectedExchange.secretKey || '');
       setTestnet(selectedExchange.testnet || false);
+      setHyperliquidWalletAddr(selectedExchange.hyperliquidWalletAddr || '');
+      setAsterUser(selectedExchange.asterUser || '');
+      setAsterSigner(selectedExchange.asterSigner || '');
+      setAsterPrivateKey(selectedExchange.asterPrivateKey || '');
     }
   }, [editingExchangeId, selectedExchange]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!selectedExchangeId || !apiKey.trim()) return;
-    if (selectedExchange?.id !== 'hyperliquid' && !secretKey.trim()) return;
+    if (!selectedExchangeId) return;
     
-    onSave(selectedExchangeId, apiKey.trim(), secretKey.trim(), testnet);
+    // 根据交易所类型验证不同字段
+    if (selectedExchange?.id === 'hyperliquid') {
+      if (!apiKey.trim() || !hyperliquidWalletAddr.trim()) return;
+    } else if (selectedExchange?.id === 'aster') {
+      if (!asterUser.trim() || !asterSigner.trim() || !asterPrivateKey.trim()) return;
+    } else {
+      // Binance 等其他交易所
+      if (!apiKey.trim() || !secretKey.trim()) return;
+    }
+    
+    onSave(selectedExchangeId, apiKey.trim(), secretKey.trim(), testnet, 
+           hyperliquidWalletAddr.trim(), asterUser.trim(), asterSigner.trim(), asterPrivateKey.trim());
   };
 
-  // 可选择的交易所列表（排除已配置的，除非是当前编辑的）
-  const availableExchanges = allExchanges.filter(e => 
-    !e.enabled || !e.apiKey || e.id === editingExchangeId
-  );
+  // 可选择的交易所列表（所有支持的交易所）
+  const availableExchanges = allExchanges || [];
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-lg" style={{ background: '#1E2329' }}>
-        <h3 className="text-xl font-bold mb-4" style={{ color: '#EAECEF' }}>
-          {editingExchangeId ? '编辑交易所' : '添加交易所'}
-        </h3>
+      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-lg relative" style={{ background: '#1E2329' }}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
+            {editingExchangeId ? '编辑交易所' : '添加交易所'}
+          </h3>
+          {editingExchangeId && (
+            <button
+              type="button"
+              onClick={() => {
+                if (confirm('确定要删除此交易所配置吗？')) {
+                  onDelete(editingExchangeId);
+                }
+              }}
+              className="p-2 rounded hover:bg-red-100 transition-colors"
+              style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
+              title="删除配置"
+            >
+              🗑️
+            </button>
+          )}
+        </div>
         
         <form onSubmit={handleSubmit} className="space-y-4">
           {!editingExchangeId && (
@@ -898,12 +1110,8 @@ function ExchangeConfigModal({
           {selectedExchange && (
             <div className="p-4 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
               <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                     style={{ 
-                       background: selectedExchange.type === 'cex' ? '#F0B90B' : '#0ECB81',
-                       color: '#000'
-                     }}>
-                  {selectedExchange.name[0]}
+                <div className="w-8 h-8 flex items-center justify-center">
+                  {getExchangeIcon(selectedExchange.id, { width: 32, height: 32 })}
                 </div>
                 <div>
                   <div className="font-semibold" style={{ color: '#EAECEF' }}>{selectedExchange.name}</div>
@@ -912,50 +1120,131 @@ function ExchangeConfigModal({
               </div>
               
               <div className="space-y-3">
-                <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
-                    {selectedExchange.id === 'hyperliquid' ? 'Private Key (无需0x前缀)' : 'API Key'}
-                  </label>
-                  <input
-                    type="password"
-                    value={apiKey}
-                    onChange={(e) => setApiKey(e.target.value)}
-                    placeholder={selectedExchange.id === 'hyperliquid' ? '请输入以太坊私钥' : `请输入 ${selectedExchange.name} API Key`}
-                    className="w-full px-3 py-2 rounded"
-                    style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    required
-                  />
-                </div>
-                
-                {selectedExchange.id !== 'hyperliquid' && (
-                  <div>
-                    <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
-                      Secret Key
-                    </label>
-                    <input
-                      type="password"
-                      value={secretKey}
-                      onChange={(e) => setSecretKey(e.target.value)}
-                      placeholder={`请输入 ${selectedExchange.name} Secret Key`}
-                      className="w-full px-3 py-2 rounded"
-                      style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
-                      required
-                    />
-                  </div>
+                {/* Binance 配置 */}
+                {selectedExchange.id === 'binance' && (
+                  <>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        API Key
+                      </label>
+                      <input
+                        type="password"
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        placeholder="请输入 Binance API Key"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        Secret Key
+                      </label>
+                      <input
+                        type="password"
+                        value={secretKey}
+                        onChange={(e) => setSecretKey(e.target.value)}
+                        placeholder="请输入 Binance Secret Key"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                  </>
                 )}
 
-                {selectedExchange.type === 'dex' && (
-                  <div className="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      checked={testnet}
-                      onChange={(e) => setTestnet(e.target.checked)}
-                      className="w-4 h-4"
-                    />
-                    <label className="text-sm" style={{ color: '#EAECEF' }}>
-                      {t('useTestnet', language)}
-                    </label>
-                  </div>
+                {/* Hyperliquid 配置 */}
+                {selectedExchange.id === 'hyperliquid' && (
+                  <>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        Private Key (无需0x前缀)
+                      </label>
+                      <input
+                        type="password"
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        placeholder="请输入以太坊私钥"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        钱包地址
+                      </label>
+                      <input
+                        type="text"
+                        value={hyperliquidWalletAddr}
+                        onChange={(e) => setHyperliquidWalletAddr(e.target.value)}
+                        placeholder="请输入以太坊钱包地址"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        checked={testnet}
+                        onChange={(e) => setTestnet(e.target.checked)}
+                        className="w-4 h-4"
+                      />
+                      <label className="text-sm" style={{ color: '#EAECEF' }}>
+                        使用测试网
+                      </label>
+                    </div>
+                  </>
+                )}
+
+                {/* Aster 配置 */}
+                {selectedExchange.id === 'aster' && (
+                  <>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        用户地址
+                      </label>
+                      <input
+                        type="text"
+                        value={asterUser}
+                        onChange={(e) => setAsterUser(e.target.value)}
+                        placeholder="请输入 Aster 用户地址"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        签名者地址
+                      </label>
+                      <input
+                        type="text"
+                        value={asterSigner}
+                        onChange={(e) => setAsterSigner(e.target.value)}
+                        placeholder="请输入 Aster 签名者地址"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                        私钥
+                      </label>
+                      <input
+                        type="password"
+                        value={asterPrivateKey}
+                        onChange={(e) => setAsterPrivateKey(e.target.value)}
+                        placeholder="请输入 Aster 私钥"
+                        className="w-full px-3 py-2 rounded"
+                        style={{ background: '#1E2329', border: '1px solid #2B3139', color: '#EAECEF' }}
+                        required
+                      />
+                    </div>
+                  </>
                 )}
               </div>
             </div>
@@ -970,21 +1259,14 @@ function ExchangeConfigModal({
             >
               {t('cancel', language)}
             </button>
-            {editingExchangeId && (
-              <button
-                type="button"
-                onClick={() => {
-                  onDelete(editingExchangeId);
-                }}
-                className="px-4 py-2 rounded text-sm font-semibold"
-                style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}
-              >
-                🗑️
-              </button>
-            )}
             <button
               type="submit"
-              disabled={!selectedExchangeId || !apiKey.trim() || (selectedExchange?.id !== 'hyperliquid' && !secretKey.trim())}
+              disabled={
+                !selectedExchangeId || 
+                (selectedExchange?.id === 'binance' && (!apiKey.trim() || !secretKey.trim())) ||
+                (selectedExchange?.id === 'hyperliquid' && (!apiKey.trim() || !hyperliquidWalletAddr.trim())) ||
+                (selectedExchange?.id === 'aster' && (!asterUser.trim() || !asterSigner.trim() || !asterPrivateKey.trim()))
+              }
               className="flex-1 px-4 py-2 rounded text-sm font-semibold disabled:opacity-50"
               style={{ background: '#F0B90B', color: '#000' }}
             >

web/src/components/ComparisonChart.tsx

@@ -0,0 +1,344 @@
+import { useMemo } 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) {
+  // 获取所有trader的历史数据 - 使用单个useSWR并发请求所有trader数据
+  // 生成唯一的key，当traders变化时会触发重新请求
+  const tradersKey = traders.map(t => t.trader_id).sort().join(',');
+
+  const { data: allTraderHistories, isLoading } = useSWR(
+    traders.length > 0 ? `all-equity-histories-${tradersKey}` : null,
+    async () => {
+      // 并发请求所有trader的历史数据
+      const promises = traders.map(trader =>
+        api.getEquityHistory(trader.trader_id)
+      );
+      return Promise.all(promises);
+    },
+    {
+      refreshInterval: 30000, // 30秒刷新（对比图表数据更新频率较低）
+      revalidateOnFocus: false,
+      dedupingInterval: 20000,
+    }
+  );
+
+  // 将数据转换为与原格式兼容的结构
+  const traderHistories = useMemo(() => {
+    if (!allTraderHistories) {
+      return traders.map(() => ({ data: undefined }));
+    }
+    return allTraderHistories.map(data => ({ data }));
+  }, [allTraderHistories, traders.length]);
+
+  // 使用useMemo自动处理数据合并，直接使用data对象作为依赖
+  const combinedData = useMemo(() => {
+    // 等待所有数据加载完成
+    const allLoaded = traderHistories.every((h) => h.data);
+    if (!allLoaded) return [];
+
+    console.log(`[${new Date().toISOString()}] Recalculating chart data...`);
+
+    // 新方案：按时间戳分组，不再依赖 cycle_number（因为后端会重置）
+    // 收集所有时间戳
+    const timestampMap = new Map<string, {
+      timestamp: string;
+      time: string;
+      traders: Map<string, { pnl_pct: number; equity: number }>;
+    }>();
+
+    traderHistories.forEach((history, index) => {
+      const trader = traders[index];
+      if (!history.data) return;
+
+      console.log(`Trader ${trader.trader_id}: ${history.data.length} data points`);
+
+      history.data.forEach((point: any) => {
+        const ts = point.timestamp;
+
+        if (!timestampMap.has(ts)) {
+          const time = new Date(ts).toLocaleTimeString('zh-CN', {
+            hour: '2-digit',
+            minute: '2-digit',
+          });
+          timestampMap.set(ts, {
+            timestamp: ts,
+            time,
+            traders: new Map()
+          });
+        }
+
+        timestampMap.get(ts)!.traders.set(trader.trader_id, {
+          pnl_pct: point.total_pnl_pct,
+          equity: point.total_equity
+        });
+      });
+    });
+
+    // 按时间戳排序，转换为数组
+    const combined = Array.from(timestampMap.entries())
+      .sort(([tsA], [tsB]) => new Date(tsA).getTime() - new Date(tsB).getTime())
+      .map(([ts, data], index) => {
+        const entry: any = {
+          index: index + 1,  // 使用序号代替cycle
+          time: data.time,
+          timestamp: ts
+        };
+
+        traders.forEach((trader) => {
+          const traderData = data.traders.get(trader.trader_id);
+          if (traderData) {
+            entry[`${trader.trader_id}_pnl_pct`] = traderData.pnl_pct;
+            entry[`${trader.trader_id}_equity`] = traderData.equity;
+          }
+        });
+
+        return entry;
+      });
+
+    if (combined.length > 0) {
+      const lastPoint = combined[combined.length - 1];
+      console.log(`Chart: ${combined.length} data points, last time: ${lastPoint.time}, timestamp: ${lastPoint.timestamp}`);
+    }
+
+    return combined;
+  }, [allTraderHistories, traders]);
+
+  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' }}>
+            {data.time} - #{data.index}
+          </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) => (
+            <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,249 @@
+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: 15000, // 15秒刷新（竞赛数据不需要太频繁更新）
+      revalidateOnFocus: false,
+      dedupingInterval: 10000,
+    }
+  );
+
+  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-5 animate-fade-in">
+      {/* Competition Header - 精简版 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl" style={{
+            background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+            boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
+          }}>
+            🏆
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+              AI竞赛
+              <span className="text-xs font-normal px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.15)', color: '#F0B90B' }}>
+                {competition.count} 交易员
+              </span>
+            </h1>
+            <p className="text-xs" style={{ color: '#848E9C' }}>
+              实时对战
+            </p>
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>领先者</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'}%
+          </div>
+        </div>
+      </div>
+
+      {/* Left/Right Split: Performance Chart + Leaderboard */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
+        {/* Left: Performance Comparison Chart */}
+        <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' }}>
+              表现对比
+            </h2>
+            <div className="text-xs" style={{ color: '#848E9C' }}>
+              实时收益率
+            </div>
+          </div>
+          <ComparisonChart traders={sortedTraders} />
+        </div>
+
+        {/* Right: Leaderboard */}
+        <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' }}>
+              排行榜
+            </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)' }}>
+              实时
+            </div>
+          </div>
+          <div className="space-y-2">
+            {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-3 transition-all duration-300 hover:translate-y-[-1px]"
+                  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 3px 15px rgba(240, 185, 11, 0.12), 0 0 0 1px rgba(240, 185, 11, 0.15)' : '0 1px 4px rgba(0, 0, 0, 0.3)'
+                  }}
+                >
+                  <div className="flex items-center justify-between">
+                    {/* Rank & Name */}
+                    <div className="flex items-center gap-3">
+                      <div className="text-2xl w-6">
+                        {index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉'}
+                      </div>
+                      <div>
+                        <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
+                        <div className="text-xs mono font-semibold" style={{ color: aiModelColor }}>
+                          {trader.ai_model.toUpperCase()}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Stats */}
+                    <div className="flex items-center gap-3">
+                      {/* Total Equity */}
+                      <div className="text-right">
+                        <div className="text-xs" style={{ color: '#848E9C' }}>权益</div>
+                        <div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+                          {trader.total_equity?.toFixed(2) || '0.00'}
+                        </div>
+                      </div>
+
+                      {/* P&L */}
+                      <div className="text-right min-w-[90px]">
+                        <div className="text-xs" style={{ color: '#848E9C' }}>收益</div>
+                        <div
+                          className="text-lg font-bold mono"
+                          style={{ color: (trader.total_pnl ?? 0) >= 0 ? '#0ECB81' : '#F6465D' }}
+                        >
+                          {(trader.total_pnl ?? 0) >= 0 ? '+' : ''}
+                          {trader.total_pnl_pct?.toFixed(2) || '0.00'}%
+                        </div>
+                        <div className="text-xs mono" style={{ color: '#848E9C' }}>
+                          {(trader.total_pnl ?? 0) >= 0 ? '+' : ''}{trader.total_pnl?.toFixed(2) || '0.00'}
+                        </div>
+                      </div>
+
+                      {/* Positions */}
+                      <div className="text-right">
+                        <div className="text-xs" style={{ color: '#848E9C' }}>持仓</div>
+                        <div className="text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+                          {trader.position_count}
+                        </div>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {trader.margin_used_pct.toFixed(1)}%
+                        </div>
+                      </div>
+
+                      {/* Status */}
+                      <div>
+                        <div
+                          className="px-2 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 ? '●' : '○'}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Head-to-Head Stats */}
+      {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' }}>
+            正面对决
+          </h2>
+          <div className="grid grid-cols-2 gap-4">
+            {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-4 rounded transition-all duration-300 hover:scale-[1.02]"
+                  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 3px 15px rgba(14, 203, 129, 0.12)'
+                      }
+                    : {
+                        background: '#0B0E11',
+                        border: '1px solid #2B3139',
+                        boxShadow: '0 1px 4px rgba(0, 0, 0, 0.3)'
+                      }
+                  }
+                >
+                  <div className="text-center">
+                    <div
+                      className="text-base font-bold mb-2"
+                      style={{ color: trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa' }}
+                    >
+                      {trader.trader_name}
+                    </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)}%
+                      </div>
+                    )}
+                    {!isWinning && gap < 0 && (
+                      <div className="text-xs font-semibold" style={{ color: '#F6465D' }}>
+                        落后 {Math.abs(gap).toFixed(2)}%
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/components/ExchangeIcons.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+interface IconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+// Binance SVG 图标组件
+const BinanceIcon: React.FC<IconProps> = ({ width = 24, height = 24, className }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width={width} 
+    height={height} 
+    viewBox="-52.785 -88 457.47 528"
+    className={className}
+  >
+    <path 
+      d="M79.5 176l-39.7 39.7L0 176l39.7-39.7zM176 79.5l68.1 68.1 39.7-39.7L176 0 68.1 107.9l39.7 39.7zm136.2 56.8L272.5 176l39.7 39.7 39.7-39.7zM176 272.5l-68.1-68.1-39.7 39.7L176 352l107.8-107.9-39.7-39.7zm0-56.8l39.7-39.7-39.7-39.7-39.8 39.7z" 
+      fill="#f0b90b"
+    />
+  </svg>
+);
+
+// Hyperliquid SVG 图标组件
+const HyperliquidIcon: React.FC<IconProps> = ({ width = 24, height = 24, className }) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 144 144" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path 
+      d="M144 71.6991C144 119.306 114.866 134.582 99.5156 120.98C86.8804 109.889 83.1211 86.4521 64.116 84.0456C39.9942 81.0113 37.9057 113.133 22.0334 113.133C3.5504 113.133 0 86.2428 0 72.4315C0 58.3063 3.96809 39.0542 19.736 39.0542C38.1146 39.0542 39.1588 66.5722 62.132 65.1073C85.0007 63.5379 85.4184 34.8689 100.247 22.6271C113.195 12.0593 144 23.4641 144 71.6991Z" 
+      fill="#97FCE4"
+    />
+  </svg>
+);
+
+// Aster SVG 图标组件
+const AsterIcon: React.FC<IconProps> = ({ width = 24, height = 24, className }) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox="0 0 32 32" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <defs>
+      <linearGradient id="paint0_linear_428_3535" x1="18.9416" y1="4.14314e-07" x2="12.6408" y2="32.0507" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F4D5B1"/>
+        <stop offset="1" stopColor="#FFD29F"/>
+      </linearGradient>
+      <linearGradient id="paint1_linear_428_3535" x1="18.9416" y1="4.14314e-07" x2="12.6408" y2="32.0507" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F4D5B1"/>
+        <stop offset="1" stopColor="#FFD29F"/>
+      </linearGradient>
+      <linearGradient id="paint2_linear_428_3535" x1="18.9416" y1="4.14314e-07" x2="12.6408" y2="32.0507" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F4D5B1"/>
+        <stop offset="1" stopColor="#FFD29F"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_428_3535" x1="18.9416" y1="4.14314e-07" x2="12.6408" y2="32.0507" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F4D5B1"/>
+      </linearGradient>
+    </defs>
+    <path d="M9.13309 30.4398L9.88315 26.9871C10.7197 23.1362 7.77521 19.4988 3.82118 19.4988H0.385363C1.4689 24.3374 4.75127 28.3496 9.13309 30.4398Z" fill="url(#paint0_linear_428_3535)"/>
+    <path d="M10.64 31.0663C12.3326 31.6707 14.1567 32 16.0579 32C23.7199 32 30.1285 26.6527 31.7305 19.4988H21.249C16.5244 19.4988 12.4396 22.7824 11.44 27.3838L10.64 31.0663Z" fill="url(#paint1_linear_428_3535)"/>
+    <path d="M32.0038 17.8987C32.0778 17.2756 32.1159 16.6415 32.1159 15.9985C32.1159 7.60402 25.629 0.719287 17.3779 0.0503251L15.1273 10.4105C14.2907 14.2614 17.2352 17.8987 21.1892 17.8987H32.0038Z" fill="url(#paint2_linear_428_3535)"/>
+    <path d="M15.7459 0C7.02134 0.165717 0 7.26504 0 15.9985C0 16.6415 0.0380539 17.2756 0.112041 17.8987H3.76146C8.48603 17.8987 12.5709 14.6151 13.5705 10.0137L15.7459 0Z" fill="url(#paint3_linear_428_3535)"/>
+  </svg>
+);
+
+// 获取交易所图标的函数
+export const getExchangeIcon = (exchangeType: string, props: IconProps = {}) => {
+  // 支持完整ID或类型名
+  const type = exchangeType.toLowerCase().includes('binance') ? 'binance' :
+               exchangeType.toLowerCase().includes('hyperliquid') ? 'hyperliquid' :
+               exchangeType.toLowerCase().includes('aster') ? 'aster' : 
+               exchangeType.toLowerCase();
+  
+  const iconProps = {
+    width: props.width || 24,
+    height: props.height || 24,
+    className: props.className
+  };
+  
+  switch (type) {
+    case 'binance':
+    case 'cex':
+      return <BinanceIcon {...iconProps} />;
+    case 'hyperliquid':
+    case 'dex':
+      return <HyperliquidIcon {...iconProps} />;
+    case 'aster':
+      return <AsterIcon {...iconProps} />;
+    default:
+      return (
+        <div 
+          className={props.className}
+          style={{ 
+            width: props.width || 24, 
+            height: props.height || 24,
+            borderRadius: '50%',
+            background: '#2B3139',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '12px',
+            fontWeight: 'bold',
+            color: '#EAECEF'
+          }}
+        >
+          {type[0]?.toUpperCase() || '?'}
+        </div>
+      );
+  }
+};

web/src/components/Header.tsx

@@ -0,0 +1,58 @@
+import { useLanguage } from '../contexts/LanguageContext';
+import { t } from '../i18n/translations';
+
+interface HeaderProps {
+  simple?: boolean; // For login/register pages
+}
+
+export function Header({ simple = false }: HeaderProps) {
+  const { language, setLanguage } = useLanguage();
+
+  return (
+    <header className="glass sticky top-0 z-50 backdrop-blur-xl">
+      <div className="max-w-[1920px] mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          {/* Left - Logo and Title */}
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full flex items-center justify-center text-xl" 
+                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+              ⚡
+            </div>
+            <div>
+              <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
+                {t('appTitle', language)}
+              </h1>
+              <p className="text-xs mono" style={{ color: '#848E9C' }}>
+                {t('subtitle', language)}
+              </p>
+            </div>
+          </div>
+          
+          {/* Right - Language Toggle */}
+          <div className="flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
+            <button
+              onClick={() => setLanguage('zh')}
+              className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
+              style={language === 'zh'
+                ? { background: '#F0B90B', color: '#000' }
+                : { background: 'transparent', color: '#848E9C' }
+              }
+            >
+              中文
+            </button>
+            <button
+              onClick={() => setLanguage('en')}
+              className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
+              style={language === 'en'
+                ? { background: '#F0B90B', color: '#000' }
+                : { background: 'transparent', color: '#848E9C' }
+              }
+            >
+              EN
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

web/src/components/LoginPage.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';
+import { t } from '../i18n/translations';
+import { Header } from './Header';
+
+export function LoginPage() {
+  const { language } = useLanguage();
+  const { login, verifyOTP } = useAuth();
+  const [step, setStep] = useState<'login' | 'otp'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [otpCode, setOtpCode] = useState('');
+  const [userID, setUserID] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const result = await login(email, password);
+    
+    if (result.success) {
+      if (result.requiresOTP && result.userID) {
+        setUserID(result.userID);
+        setStep('otp');
+      }
+    } else {
+      setError(result.message || t('loginFailed', language));
+    }
+    
+    setLoading(false);
+  };
+
+  const handleOTPVerify = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const result = await verifyOTP(userID, otpCode);
+    
+    if (!result.success) {
+      setError(result.message || t('verificationFailed', language));
+    }
+    // 成功的话AuthContext会自动处理登录状态
+    
+    setLoading(false);
+  };
+
+  return (
+    <div className="min-h-screen" style={{ background: '#0B0E11' }}>
+      <Header simple />
+      
+      <div className="flex items-center justify-center" style={{ minHeight: 'calc(100vh - 80px)' }}>
+        <div className="w-full max-w-md">
+          {/* Logo */}
+          <div className="text-center mb-8">
+            <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl"
+                 style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+              ⚡
+            </div>
+            <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
+              {t('loginTitle', language)}
+            </h1>
+            <p className="text-sm mt-2" style={{ color: '#848E9C' }}>
+              {step === 'login' ? t('loginTitle', language) : t('enterOTPCode', language)}
+            </p>
+          </div>
+
+        {/* Login Form */}
+        <div className="rounded-lg p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+          {step === 'login' ? (
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('email', language)}
+                </label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('emailPlaceholder', language)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('password', language)}
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('passwordPlaceholder', language)}
+                  required
+                />
+              </div>
+
+              {error && (
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                style={{ background: '#F0B90B', color: '#000' }}
+              >
+                {loading ? t('loading', language) : t('loginButton', language)}
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={handleOTPVerify} className="space-y-4">
+              <div className="text-center mb-4">
+                <div className="text-4xl mb-2">📱</div>
+                <p className="text-sm" style={{ color: '#848E9C' }}>
+                  {t('scanQRCodeInstructions', language)}<br />
+                  {t('enterOTPCode', language)}
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('otpCode', language)}
+                </label>
+                <input
+                  type="text"
+                  value={otpCode}
+                  onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                  className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('otpPlaceholder', language)}
+                  maxLength={6}
+                  required
+                />
+              </div>
+
+              {error && (
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setStep('login')}
+                  className="flex-1 px-4 py-2 rounded text-sm font-semibold"
+                  style={{ background: '#2B3139', color: '#848E9C' }}
+                >
+                  {t('back', language)}
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading || otpCode.length !== 6}
+                  className="flex-1 px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  style={{ background: '#F0B90B', color: '#000' }}
+                >
+                  {loading ? t('loading', language) : t('verifyOTP', language)}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+
+        {/* Register Link */}
+        <div className="text-center mt-6">
+          <p className="text-sm" style={{ color: '#848E9C' }}>
+            {t('noAccount', language)}{' '}
+            <button
+              onClick={() => {
+                window.history.pushState({}, '', '/register');
+                window.dispatchEvent(new PopStateEvent('popstate'));
+              }}
+              className="font-semibold hover:underline"
+              style={{ color: '#F0B90B' }}
+            >
+              {t('registerNow', language)}
+            </button>
+          </p>
+        </div>
+      </div>
+      </div>
+    </div>
+  );
+}

web/src/components/ModelIcons.tsx

@@ -0,0 +1,36 @@
+
+interface IconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+// 获取AI模型图标的函数
+export const getModelIcon = (modelType: string, props: IconProps = {}) => {
+  // 支持完整ID或类型名
+  const type = modelType.includes('_') ? modelType.split('_').pop() : modelType;
+  
+  let iconPath: string | null = null;
+  
+  switch (type) {
+    case 'deepseek':
+      iconPath = '/icons/deepseek.svg';
+      break;
+    case 'qwen':
+      iconPath = '/icons/qwen.svg';
+      break;
+    default:
+      return null;
+  }
+
+  return (
+    <img
+      src={iconPath}
+      alt={`${type} icon`}
+      width={props.width || 24}
+      height={props.height || 24}
+      className={props.className}
+      style={{ borderRadius: '50%' }}
+    />
+  );
+};

web/src/components/RegisterPage.tsx

@@ -0,0 +1,311 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';
+import { t } from '../i18n/translations';
+
+export function RegisterPage() {
+  const { language } = useLanguage();
+  const { register, completeRegistration } = useAuth();
+  const [step, setStep] = useState<'register' | 'setup-otp' | 'verify-otp'>('register');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [otpCode, setOtpCode] = useState('');
+  const [userID, setUserID] = useState('');
+  const [otpSecret, setOtpSecret] = useState('');
+  const [qrCodeURL, setQrCodeURL] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError(t('passwordMismatch', language));
+      return;
+    }
+
+    if (password.length < 6) {
+      setError(t('passwordTooShort', language));
+      return;
+    }
+
+    setLoading(true);
+
+    const result = await register(email, password);
+    
+    if (result.success && result.userID) {
+      setUserID(result.userID);
+      setOtpSecret(result.otpSecret || '');
+      setQrCodeURL(result.qrCodeURL || '');
+      setStep('setup-otp');
+    } else {
+      setError(result.message || t('registrationFailed', language));
+    }
+    
+    setLoading(false);
+  };
+
+  const handleSetupComplete = () => {
+    setStep('verify-otp');
+  };
+
+  const handleOTPVerify = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const result = await completeRegistration(userID, otpCode);
+    
+    if (!result.success) {
+      setError(result.message || t('registrationFailed', language));
+    }
+    // 成功的话AuthContext会自动处理登录状态
+    
+    setLoading(false);
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center" style={{ background: '#0B0E11' }}>
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center text-3xl"
+               style={{ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)' }}>
+            ⚡
+          </div>
+          <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
+            {t('appTitle', language)}
+          </h1>
+          <p className="text-sm mt-2" style={{ color: '#848E9C' }}>
+            {step === 'register' && t('registerTitle', language)}
+            {step === 'setup-otp' && t('setupTwoFactor', language)}
+            {step === 'verify-otp' && t('verifyOTP', language)}
+          </p>
+        </div>
+
+        {/* Registration Form */}
+        <div className="rounded-lg p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+          {step === 'register' && (
+            <form onSubmit={handleRegister} className="space-y-4">
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('email', language)}
+                </label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('emailPlaceholder', language)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('password', language)}
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('passwordPlaceholder', language)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('confirmPassword', language)}
+                </label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('confirmPasswordPlaceholder', language)}
+                  required
+                />
+              </div>
+
+              {error && (
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                style={{ background: '#F0B90B', color: '#000' }}
+              >
+                {loading ? t('loading', language) : t('registerButton', language)}
+              </button>
+            </form>
+          )}
+
+          {step === 'setup-otp' && (
+            <div className="space-y-4">
+              <div className="text-center">
+                <div className="text-4xl mb-2">📱</div>
+                <h3 className="text-lg font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('setupTwoFactor', language)}
+                </h3>
+                <p className="text-sm" style={{ color: '#848E9C' }}>
+                  {t('setupTwoFactorDesc', language)}
+                </p>
+              </div>
+
+              <div className="space-y-3">
+                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                    {t('step1Title', language)}
+                  </p>
+                  <p className="text-xs" style={{ color: '#848E9C' }}>
+                    {t('step1Desc', language)}
+                  </p>
+                </div>
+
+                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                    {t('step2Title', language)}
+                  </p>
+                  <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
+                    {t('step2Desc', language)}
+                  </p>
+                  
+                  {qrCodeURL && (
+                    <div className="mt-2">
+                      <p className="text-xs mb-2" style={{ color: '#848E9C' }}>{t('qrCodeHint', language)}</p>
+                      <div className="bg-white p-2 rounded text-center">
+                        <img src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(qrCodeURL)}`} 
+                             alt="QR Code" className="mx-auto" />
+                      </div>
+                    </div>
+                  )}
+                  
+                  <div className="mt-2">
+                    <p className="text-xs mb-1" style={{ color: '#848E9C' }}>{t('otpSecret', language)}</p>
+                    <div className="flex items-center gap-2">
+                      <code className="flex-1 px-2 py-1 text-xs rounded font-mono" 
+                            style={{ background: '#2B3139', color: '#EAECEF' }}>
+                        {otpSecret}
+                      </code>
+                      <button
+                        onClick={() => copyToClipboard(otpSecret)}
+                        className="px-2 py-1 text-xs rounded"
+                        style={{ background: '#F0B90B', color: '#000' }}
+                      >
+                        {t('copy', language)}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                    {t('step3Title', language)}
+                  </p>
+                  <p className="text-xs" style={{ color: '#848E9C' }}>
+                    {t('step3Desc', language)}
+                  </p>
+                </div>
+              </div>
+
+              <button
+                onClick={handleSetupComplete}
+                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+                style={{ background: '#F0B90B', color: '#000' }}
+              >
+                {t('setupCompleteContinue', language)}
+              </button>
+            </div>
+          )}
+
+          {step === 'verify-otp' && (
+            <form onSubmit={handleOTPVerify} className="space-y-4">
+              <div className="text-center mb-4">
+                <div className="text-4xl mb-2">🔐</div>
+                <p className="text-sm" style={{ color: '#848E9C' }}>
+                  {t('enterOTPCode', language)}<br />
+                  {t('completeRegistrationSubtitle', language)}
+                </p>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                  {t('otpCode', language)}
+                </label>
+                <input
+                  type="text"
+                  value={otpCode}
+                  onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+                  className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
+                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  placeholder={t('otpPlaceholder', language)}
+                  maxLength={6}
+                  required
+                />
+              </div>
+
+              {error && (
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setStep('setup-otp')}
+                  className="flex-1 px-4 py-2 rounded text-sm font-semibold"
+                  style={{ background: '#2B3139', color: '#848E9C' }}
+                >
+                  {t('back', language)}
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading || otpCode.length !== 6}
+                  className="flex-1 px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  style={{ background: '#F0B90B', color: '#000' }}
+                >
+                  {loading ? t('loading', language) : t('completeRegistration', language)}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+
+        {/* Login Link */}
+        {step === 'register' && (
+          <div className="text-center mt-6">
+            <p className="text-sm" style={{ color: '#848E9C' }}>
+              已有账户？{' '}
+              <button
+                onClick={() => {
+                  window.history.pushState({}, '', '/login');
+                  window.dispatchEvent(new PopStateEvent('popstate'));
+                }}
+                className="font-semibold hover:underline"
+                style={{ color: '#F0B90B' }}
+              >
+                立即登录
+              </button>
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/contexts/AuthContext.tsx

@@ -0,0 +1,209 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { getSystemConfig } from '../lib/config';
+
+interface User {
+  id: string;
+  email: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  token: string | null;
+  login: (email: string, password: string) => Promise<{ success: boolean; message?: string; userID?: string; requiresOTP?: boolean }>;
+  register: (email: string, password: string) => Promise<{ success: boolean; message?: string; userID?: string; otpSecret?: string; qrCodeURL?: string }>;
+  verifyOTP: (userID: string, otpCode: string) => Promise<{ success: boolean; message?: string }>;
+  completeRegistration: (userID: string, otpCode: string) => Promise<{ success: boolean; message?: string }>;
+  logout: () => void;
+  isLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // 先检查是否为管理员模式（使用带缓存的系统配置获取）
+    getSystemConfig()
+      .then(data => {
+        if (data.admin_mode) {
+          // 管理员模式下，模拟admin用户
+          setUser({ id: 'admin', email: 'admin@localhost' });
+          setToken('admin-mode');
+        } else {
+          // 非管理员模式，检查本地存储中是否有token
+          const savedToken = localStorage.getItem('auth_token');
+          const savedUser = localStorage.getItem('auth_user');
+          
+          if (savedToken && savedUser) {
+            setToken(savedToken);
+            setUser(JSON.parse(savedUser));
+          }
+        }
+        setIsLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to fetch system config:', err);
+        // 发生错误时，继续检查本地存储
+        const savedToken = localStorage.getItem('auth_token');
+        const savedUser = localStorage.getItem('auth_user');
+        
+        if (savedToken && savedUser) {
+          setToken(savedToken);
+          setUser(JSON.parse(savedUser));
+        }
+        setIsLoading(false);
+      });
+  }, []);
+
+  const login = async (email: string, password: string) => {
+    try {
+      const response = await fetch('/api/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        if (data.requires_otp) {
+          return {
+            success: true,
+            userID: data.user_id,
+            requiresOTP: true,
+            message: data.message,
+          };
+        }
+      } else {
+        return { success: false, message: data.error };
+      }
+    } catch (error) {
+      return { success: false, message: '登录失败，请重试' };
+    }
+
+    return { success: false, message: '未知错误' };
+  };
+
+  const register = async (email: string, password: string) => {
+    try {
+      const response = await fetch('/api/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        return {
+          success: true,
+          userID: data.user_id,
+          otpSecret: data.otp_secret,
+          qrCodeURL: data.qr_code_url,
+          message: data.message,
+        };
+      } else {
+        return { success: false, message: data.error };
+      }
+    } catch (error) {
+      return { success: false, message: '注册失败，请重试' };
+    }
+  };
+
+  const verifyOTP = async (userID: string, otpCode: string) => {
+    try {
+      const response = await fetch('/api/verify-otp', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ user_id: userID, otp_code: otpCode }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // 登录成功，保存token和用户信息
+        const userInfo = { id: data.user_id, email: data.email };
+        setToken(data.token);
+        setUser(userInfo);
+        localStorage.setItem('auth_token', data.token);
+        localStorage.setItem('auth_user', JSON.stringify(userInfo));
+        
+        return { success: true, message: data.message };
+      } else {
+        return { success: false, message: data.error };
+      }
+    } catch (error) {
+      return { success: false, message: 'OTP验证失败，请重试' };
+    }
+  };
+
+  const completeRegistration = async (userID: string, otpCode: string) => {
+    try {
+      const response = await fetch('/api/complete-registration', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ user_id: userID, otp_code: otpCode }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // 注册完成，自动登录
+        const userInfo = { id: data.user_id, email: data.email };
+        setToken(data.token);
+        setUser(userInfo);
+        localStorage.setItem('auth_token', data.token);
+        localStorage.setItem('auth_user', JSON.stringify(userInfo));
+        
+        return { success: true, message: data.message };
+      } else {
+        return { success: false, message: data.error };
+      }
+    } catch (error) {
+      return { success: false, message: '注册完成失败，请重试' };
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    setToken(null);
+    localStorage.removeItem('auth_token');
+    localStorage.removeItem('auth_user');
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        token,
+        login,
+        register,
+        verifyOTP,
+        completeRegistration,
+        logout,
+        isLoading,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

web/src/hooks/useSystemConfig.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { getSystemConfig, type SystemConfig } from '../lib/config';
+
+export function useSystemConfig() {
+  const [config, setConfig] = useState<SystemConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    getSystemConfig()
+      .then((data) => {
+        if (!mounted) return;
+        setConfig(data);
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        if (!mounted) return;
+        console.error('Failed to fetch system config:', err);
+        setError(err.message);
+        setLoading(false);
+      });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return { config, loading, error };
+}

web/src/i18n/translations.ts

@@ -152,6 +152,58 @@ export const translations = {
     loading: 'Loading...',
     loadingError: '⚠️ Failed to load AI learning data',
     noCompleteData: 'No complete trading data (needs to complete open → close cycle)',
+    
+    // Login & Register
+    login: 'Sign In',
+    register: 'Sign Up',
+    email: 'Email',
+    password: 'Password',
+    confirmPassword: 'Confirm Password',
+    emailPlaceholder: 'your@email.com',
+    passwordPlaceholder: 'Enter your password',
+    confirmPasswordPlaceholder: 'Re-enter your password',
+    otpPlaceholder: '000000',
+    loginTitle: 'Sign in to your account',
+    registerTitle: 'Create a new account',
+    loginButton: 'Sign In',
+    registerButton: 'Sign Up',
+    back: 'Back',
+    noAccount: "Don't have an account?",
+    hasAccount: 'Already have an account?',
+    registerNow: 'Sign up now',
+    loginNow: 'Sign in now',
+    forgotPassword: 'Forgot password?',
+    rememberMe: 'Remember me',
+    otpCode: 'OTP Code',
+    scanQRCode: 'Scan QR Code',
+    enterOTPCode: 'Enter 6-digit OTP code',
+    verifyOTP: 'Verify OTP',
+    setupTwoFactor: 'Set up two-factor authentication',
+    setupTwoFactorDesc: 'Follow the steps below to secure your account with Google Authenticator',
+    scanQRCodeInstructions: 'Scan this QR code with Google Authenticator or Authy',
+    otpSecret: 'Or enter this secret manually:',
+    qrCodeHint: 'QR code (if scanning fails, use the secret below):',
+    step1Title: 'Step 1: Install Google Authenticator',
+    step1Desc: 'Download and install Google Authenticator from your app store',
+    step2Title: 'Step 2: Add account',
+    step2Desc: 'Tap "+", then choose "Scan QR code" or "Enter a setup key"',
+    step3Title: 'Step 3: Verify setup',
+    step3Desc: 'After setup, continue to enter the 6-digit code',
+    setupCompleteContinue: 'I have completed setup, continue',
+    copy: 'Copy',
+    completeRegistration: 'Complete Registration',
+    completeRegistrationSubtitle: 'to complete registration',
+    loginSuccess: 'Login successful',
+    registrationSuccess: 'Registration successful',
+    loginFailed: 'Login failed',
+    registrationFailed: 'Registration failed',
+    verificationFailed: 'OTP verification failed',
+    invalidCredentials: 'Invalid email or password',
+    passwordMismatch: 'Passwords do not match',
+    emailRequired: 'Email is required',
+    passwordRequired: 'Password is required',
+    invalidEmail: 'Invalid email format',
+    passwordTooShort: 'Password must be at least 6 characters',
   },
   zh: {
     // Header
@@ -304,6 +356,58 @@ export const translations = {
     loading: '加载中...',
     loadingError: '⚠️ 加载AI学习数据失败',
     noCompleteData: '暂无完整交易数据（需要完成开仓→平仓的完整周期）',
+    
+    // Login & Register
+    login: '登录',
+    register: '注册',
+    email: '邮箱',
+    password: '密码',
+    confirmPassword: '确认密码',
+    emailPlaceholder: '请输入邮箱地址',
+    passwordPlaceholder: '请输入密码（至少6位）',
+    confirmPasswordPlaceholder: '请再次输入密码',
+    otpPlaceholder: '000000',
+    loginTitle: '登录到您的账户',
+    registerTitle: '创建新账户',
+    loginButton: '登录',
+    registerButton: '注册',
+    back: '返回',
+    noAccount: '还没有账户？',
+    hasAccount: '已有账户？',
+    registerNow: '立即注册',
+    loginNow: '立即登录',
+    forgotPassword: '忘记密码？',
+    rememberMe: '记住我',
+    otpCode: 'OTP验证码',
+    scanQRCode: '扫描二维码',
+    enterOTPCode: '输入6位OTP验证码',
+    verifyOTP: '验证OTP',
+    setupTwoFactor: '设置双因素认证',
+    setupTwoFactorDesc: '请按以下步骤设置Google验证器以保护您的账户安全',
+    scanQRCodeInstructions: '使用Google Authenticator或Authy扫描此二维码',
+    otpSecret: '或手动输入此密钥：',
+    qrCodeHint: '二维码（如果无法扫描，请使用下方密钥）：',
+    step1Title: '步骤1：下载Google Authenticator',
+    step1Desc: '在手机应用商店下载并安装Google Authenticator应用',
+    step2Title: '步骤2：添加账户',
+    step2Desc: '在应用中点击“+”，选择“扫描二维码”或“手动输入密钥”',
+    step3Title: '步骤3：验证设置',
+    step3Desc: '设置完成后，点击下方按钮输入6位验证码',
+    setupCompleteContinue: '我已完成设置，继续',
+    copy: '复制',
+    completeRegistration: '完成注册',
+    completeRegistrationSubtitle: '以完成注册',
+    loginSuccess: '登录成功',
+    registrationSuccess: '注册成功',
+    loginFailed: '登录失败',
+    registrationFailed: '注册失败',
+    verificationFailed: 'OTP验证失败',
+    invalidCredentials: '邮箱或密码错误',
+    passwordMismatch: '两次输入的密码不一致',
+    emailRequired: '请输入邮箱',
+    passwordRequired: '请输入密码',
+    invalidEmail: '邮箱格式不正确',
+    passwordTooShort: '密码至少需要6个字符',
   }
 };
 

web/src/lib/api.ts

@@ -10,14 +10,31 @@ import type {
   CreateTraderRequest,
   UpdateModelConfigRequest,
   UpdateExchangeConfigRequest,
+  CompetitionData,
 } from '../types';
 
 const API_BASE = '/api';
 
+// Helper function to get auth headers
+function getAuthHeaders(): Record<string, string> {
+  const token = localStorage.getItem('auth_token');
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+  
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  
+  return headers;
+}
+
 export const api = {
   // AI交易员管理接口
   async getTraders(): Promise<TraderInfo[]> {
-    const res = await fetch(`${API_BASE}/traders`);
+    const res = await fetch(`${API_BASE}/traders`, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取trader列表失败');
     return res.json();
   },
@@ -25,7 +42,7 @@ export const api = {
   async createTrader(request: CreateTraderRequest): Promise<TraderInfo> {
     const res = await fetch(`${API_BASE}/traders`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: getAuthHeaders(),
       body: JSON.stringify(request),
     });
     if (!res.ok) throw new Error('创建交易员失败');
@@ -35,6 +52,7 @@ export const api = {
   async deleteTrader(traderId: string): Promise<void> {
     const res = await fetch(`${API_BASE}/traders/${traderId}`, {
       method: 'DELETE',
+      headers: getAuthHeaders(),
     });
     if (!res.ok) throw new Error('删除交易员失败');
   },
@@ -42,6 +60,7 @@ export const api = {
   async startTrader(traderId: string): Promise<void> {
     const res = await fetch(`${API_BASE}/traders/${traderId}/start`, {
       method: 'POST',
+      headers: getAuthHeaders(),
     });
     if (!res.ok) throw new Error('启动交易员失败');
   },
@@ -49,21 +68,40 @@ export const api = {
   async stopTrader(traderId: string): Promise<void> {
     const res = await fetch(`${API_BASE}/traders/${traderId}/stop`, {
       method: 'POST',
+      headers: getAuthHeaders(),
     });
     if (!res.ok) throw new Error('停止交易员失败');
   },
 
+  async updateTraderPrompt(traderId: string, customPrompt: string): Promise<void> {
+    const res = await fetch(`${API_BASE}/traders/${traderId}/prompt`, {
+      method: 'PUT',
+      headers: getAuthHeaders(),
+      body: JSON.stringify({ custom_prompt: customPrompt }),
+    });
+    if (!res.ok) throw new Error('更新自定义策略失败');
+  },
+
   // AI模型配置接口
   async getModelConfigs(): Promise<AIModel[]> {
-    const res = await fetch(`${API_BASE}/models`);
+    const res = await fetch(`${API_BASE}/models`, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取模型配置失败');
     return res.json();
   },
 
+  // 获取系统支持的AI模型列表（无需认证）
+  async getSupportedModels(): Promise<AIModel[]> {
+    const res = await fetch(`${API_BASE}/supported-models`);
+    if (!res.ok) throw new Error('获取支持的模型失败');
+    return res.json();
+  },
+
   async updateModelConfigs(request: UpdateModelConfigRequest): Promise<void> {
     const res = await fetch(`${API_BASE}/models`, {
       method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
+      headers: getAuthHeaders(),
       body: JSON.stringify(request),
     });
     if (!res.ok) throw new Error('更新模型配置失败');
@@ -71,15 +109,24 @@ export const api = {
 
   // 交易所配置接口
   async getExchangeConfigs(): Promise<Exchange[]> {
-    const res = await fetch(`${API_BASE}/exchanges`);
+    const res = await fetch(`${API_BASE}/exchanges`, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取交易所配置失败');
     return res.json();
   },
 
+  // 获取系统支持的交易所列表（无需认证）
+  async getSupportedExchanges(): Promise<Exchange[]> {
+    const res = await fetch(`${API_BASE}/supported-exchanges`);
+    if (!res.ok) throw new Error('获取支持的交易所失败');
+    return res.json();
+  },
+
   async updateExchangeConfigs(request: UpdateExchangeConfigRequest): Promise<void> {
     const res = await fetch(`${API_BASE}/exchanges`, {
       method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
+      headers: getAuthHeaders(),
       body: JSON.stringify(request),
     });
     if (!res.ok) throw new Error('更新交易所配置失败');
@@ -90,7 +137,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/status?trader_id=${traderId}`
       : `${API_BASE}/status`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取系统状态失败');
     return res.json();
   },
@@ -103,6 +152,7 @@ export const api = {
     const res = await fetch(url, {
       cache: 'no-store',
       headers: {
+        ...getAuthHeaders(),
         'Cache-Control': 'no-cache',
       },
     });
@@ -117,7 +167,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/positions?trader_id=${traderId}`
       : `${API_BASE}/positions`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取持仓列表失败');
     return res.json();
   },
@@ -127,7 +179,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/decisions?trader_id=${traderId}`
       : `${API_BASE}/decisions`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取决策日志失败');
     return res.json();
   },
@@ -137,7 +191,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/decisions/latest?trader_id=${traderId}`
       : `${API_BASE}/decisions/latest`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取最新决策失败');
     return res.json();
   },
@@ -147,7 +203,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/statistics?trader_id=${traderId}`
       : `${API_BASE}/statistics`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取统计信息失败');
     return res.json();
   },
@@ -157,7 +215,9 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/equity-history?trader_id=${traderId}`
       : `${API_BASE}/equity-history`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取历史数据失败');
     return res.json();
   },
@@ -167,8 +227,19 @@ export const api = {
     const url = traderId
       ? `${API_BASE}/performance?trader_id=${traderId}`
       : `${API_BASE}/performance`;
-    const res = await fetch(url);
+    const res = await fetch(url, {
+      headers: getAuthHeaders(),
+    });
     if (!res.ok) throw new Error('获取AI学习数据失败');
     return res.json();
   },
+
+  // 获取竞赛数据
+  async getCompetition(): Promise<CompetitionData> {
+    const res = await fetch(`${API_BASE}/competition`, {
+      headers: getAuthHeaders(),
+    });
+    if (!res.ok) throw new Error('获取竞赛数据失败');
+    return res.json();
+  },
 };

web/src/lib/config.ts

@@ -0,0 +1,27 @@
+export interface SystemConfig {
+  admin_mode: boolean;
+}
+
+let configPromise: Promise<SystemConfig> | null = null;
+let cachedConfig: SystemConfig | null = null;
+
+export function getSystemConfig(): Promise<SystemConfig> {
+  if (cachedConfig) {
+    return Promise.resolve(cachedConfig);
+  }
+  if (configPromise) {
+    return configPromise;
+  }
+  configPromise = fetch('/api/config')
+    .then((res) => res.json())
+    .then((data: SystemConfig) => {
+      cachedConfig = data;
+      return data;
+    })
+    .finally(() => {
+      // Keep cachedConfig for reuse; allow re-fetch via explicit invalidation if added later
+    });
+  return configPromise;
+}
+
+

web/src/types.ts

@@ -89,7 +89,9 @@ export interface TraderInfo {
   trader_id: string;
   trader_name: string;
   ai_model: string;
+  exchange_id?: string;
   is_running?: boolean;
+  custom_prompt?: string;
 }
 
 export interface AIModel {
@@ -108,6 +110,12 @@ export interface Exchange {
   apiKey?: string;
   secretKey?: string;
   testnet?: boolean;
+  // Hyperliquid 特定字段
+  hyperliquidWalletAddr?: string;
+  // Aster 特定字段
+  asterUser?: string;
+  asterSigner?: string;
+  asterPrivateKey?: string;
 }
 
 export interface CreateTraderRequest {
@@ -115,6 +123,8 @@ export interface CreateTraderRequest {
   ai_model_id: string;
   exchange_id: string;
   initial_balance: number;
+  custom_prompt?: string;
+  override_base_prompt?: boolean;
 }
 
 export interface UpdateModelConfigRequest {
@@ -133,6 +143,30 @@ export interface UpdateExchangeConfigRequest {
       api_key: string;
       secret_key: string;
       testnet?: boolean;
+      // Hyperliquid 特定字段
+      hyperliquid_wallet_addr?: string;
+      // Aster 特定字段
+      aster_user?: string;
+      aster_signer?: string;
+      aster_private_key?: string;
     };
   };
 }
+
+// Competition related types
+export interface CompetitionTraderData {
+  trader_id: string;
+  trader_name: string;
+  ai_model: string;
+  total_equity: number;
+  total_pnl: number;
+  total_pnl_pct: number;
+  position_count: number;
+  margin_used_pct: number;
+  is_running: boolean;
+}
+
+export interface CompetitionData {
+  traders: CompetitionTraderData[];
+  count: number;
+}