Merge branch 'dev' into fix/bug-fixes-collection-v2

web/src/components/ComparisonChart.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo } from 'react'
 import {
   LineChart,
   Line,
@@ -9,129 +9,140 @@ import {
   ResponsiveContainer,
   ReferenceLine,
   Legend,
-} from 'recharts';
-import useSWR from 'swr';
-import { api } from '../lib/api';
-import type { CompetitionTraderData } from '../types';
-import { getTraderColor } from '../utils/traderColors';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
-import { BarChart3 } from 'lucide-react';
+} from 'recharts'
+import useSWR from 'swr'
+import { api } from '../lib/api'
+import type { CompetitionTraderData } from '../types'
+import { getTraderColor } from '../utils/traderColors'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
+import { BarChart3 } from 'lucide-react'
 
 interface ComparisonChartProps {
-  traders: CompetitionTraderData[];
+  traders: CompetitionTraderData[]
 }
 
 export function ComparisonChart({ traders }: ComparisonChartProps) {
-  const { language } = useLanguage();
+  const { language } = useLanguage()
   // 获取所有trader的历史数据 - 使用单个useSWR并发请求所有trader数据
   // 生成唯一的key，当traders变化时会触发重新请求
-  const tradersKey = traders.map(t => t.trader_id).sort().join(',');
+  const tradersKey = traders
+    .map((t) => t.trader_id)
+    .sort()
+    .join(',')
 
   const { data: allTraderHistories, isLoading } = useSWR(
     traders.length > 0 ? `all-equity-histories-${tradersKey}` : null,
     async () => {
       // 使用批量API一次性获取所有trader的历史数据
-      const traderIds = traders.map(trader => trader.trader_id);
-      const batchData = await api.getEquityHistoryBatch(traderIds);
-      
+      const traderIds = traders.map((trader) => trader.trader_id)
+      const batchData = await api.getEquityHistoryBatch(traderIds)
+
       // 转换为原格式，保持与原有代码兼容
-      return traders.map(trader => {
-        return batchData.histories[trader.trader_id] || [];
-      });
+      return traders.map((trader) => {
+        return batchData.histories[trader.trader_id] || []
+      })
     },
     {
       refreshInterval: 30000, // 30秒刷新（对比图表数据更新频率较低）
       revalidateOnFocus: false,
       dedupingInterval: 20000,
     }
-  );
+  )
 
   // 将数据转换为与原格式兼容的结构
   const traderHistories = useMemo(() => {
     if (!allTraderHistories) {
-      return traders.map(() => ({ data: undefined }));
+      return traders.map(() => ({ data: undefined }))
     }
-    return allTraderHistories.map(data => ({ data }));
-  }, [allTraderHistories, traders.length]);
+    return allTraderHistories.map((data) => ({ data }))
+  }, [allTraderHistories, traders.length])
 
   // 使用useMemo自动处理数据合并，直接使用data对象作为依赖
   const combinedData = useMemo(() => {
     // 等待所有数据加载完成
-    const allLoaded = traderHistories.every((h) => h.data);
-    if (!allLoaded) return [];
+    const allLoaded = traderHistories.every((h) => h.data)
+    if (!allLoaded) return []
 
-    console.log(`[${new Date().toISOString()}] Recalculating chart data...`);
+    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 }>;
-    }>();
+    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;
+      const trader = traders[index]
+      if (!history.data) return
 
-      console.log(`Trader ${trader.trader_id}: ${history.data.length} data points`);
+      console.log(
+        `Trader ${trader.trader_id}: ${history.data.length} data points`
+      )
 
       history.data.forEach((point: any) => {
-        const ts = point.timestamp;
+        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()
-          });
+            traders: new Map(),
+          })
         }
 
         // 计算盈亏百分比：从total_pnl和balance计算
         // 假设初始余额 = balance - total_pnl
-        const initialBalance = point.balance - point.total_pnl;
-        const pnlPct = initialBalance > 0 ? (point.total_pnl / initialBalance) * 100 : 0;
+        const initialBalance = point.balance - point.total_pnl
+        const pnlPct =
+          initialBalance > 0 ? (point.total_pnl / initialBalance) * 100 : 0
 
         timestampMap.get(ts)!.traders.set(trader.trader_id, {
           pnl_pct: pnlPct,
-          equity: point.total_equity
-        });
-      });
-    });
+          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
+          index: index + 1, // 使用序号代替cycle
           time: data.time,
-          timestamp: ts
-        };
+          timestamp: ts,
+        }
 
         traders.forEach((trader) => {
-          const traderData = data.traders.get(trader.trader_id);
+          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;
+            entry[`${trader.trader_id}_pnl_pct`] = traderData.pnl_pct
+            entry[`${trader.trader_id}_equity`] = traderData.equity
           }
-        });
+        })
 
-        return entry;
-      });
+        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}`);
+      const lastPoint = combined[combined.length - 1]
+      console.log(
+        `Chart: ${combined.length} data points, last time: ${lastPoint.time}, timestamp: ${lastPoint.timestamp}`
+      )
     }
 
-    return combined;
-  }, [allTraderHistories, traders]);
+    return combined
+  }, [allTraderHistories, traders])
 
   if (isLoading) {
     return (
@@ -139,67 +150,69 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
         <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' }}>
         <BarChart3 className="w-12 h-12 mx-auto mb-4 opacity-60" />
-        <div className="text-lg font-semibold mb-2">{t('noHistoricalData', language)}</div>
+        <div className="text-lg font-semibold mb-2">
+          {t('noHistoricalData', language)}
+        </div>
         <div className="text-sm">{t('dataWillAppear', language)}</div>
       </div>
-    );
+    )
   }
 
   // 限制显示数据点
-  const MAX_DISPLAY_POINTS = 2000;
+  const MAX_DISPLAY_POINTS = 2000
   const displayData =
     combinedData.length > MAX_DISPLAY_POINTS
       ? combinedData.slice(-MAX_DISPLAY_POINTS)
-      : combinedData;
+      : combinedData
 
   // 计算Y轴范围
   const calculateYDomain = () => {
-    const allValues: number[] = [];
+    const allValues: number[] = []
     displayData.forEach((point) => {
       traders.forEach((trader) => {
-        const value = point[`${trader.trader_id}_pnl_pct`];
+        const value = point[`${trader.trader_id}_pnl_pct`]
         if (value !== undefined) {
-          allValues.push(value);
+          allValues.push(value)
         }
-      });
-    });
+      })
+    })
 
-    if (allValues.length === 0) return [-5, 5];
+    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%余量
+    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)
-    ];
-  };
+    return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)]
+  }
 
   // 使用统一的颜色分配逻辑（与Leaderboard保持一致）
-  const traderColor = (traderId: string) => getTraderColor(traders, traderId);
+  const traderColor = (traderId: string) => getTraderColor(traders, traderId)
 
   // 自定义Tooltip - Binance Style
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
-      const data = payload[0].payload;
+      const data = payload[0].payload
       return (
-        <div className="rounded p-3 shadow-xl" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
+        <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;
+            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">
@@ -209,33 +222,51 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
                 >
                   {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' }}>
+                <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;
-  };
+    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;
+  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', position: 'relative' }}>
+      <div
+        style={{
+          borderRadius: '8px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
         {/* NOFX Watermark */}
-        <div 
+        <div
           style={{
             position: 'absolute',
             top: '20px',
@@ -245,116 +276,195 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
             color: 'rgba(240, 185, 11, 0.15)',
             zIndex: 10,
             pointerEvents: 'none',
-            fontFamily: 'monospace'
+            fontFamily: 'monospace',
           }}
         >
           NOFX
         </div>
         <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={traderColor(trader.trader_id)} stopOpacity={0.9} />
-                <stop offset="95%" stopColor={traderColor(trader.trader_id)} stopOpacity={0.2} />
-              </linearGradient>
-            ))}
-          </defs>
+          <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={traderColor(trader.trader_id)}
+                    stopOpacity={0.9}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={traderColor(trader.trader_id)}
+                    stopOpacity={0.2}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
 
-          <CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
+            <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={traderColor(trader.trader_id)}
-              strokeWidth={3}
-              dot={displayData.length < 50 ? { fill: traderColor(trader.trader_id), r: 3 } : false}
-              activeDot={{ r: 6, fill: traderColor(trader.trader_id), stroke: '#fff', strokeWidth: 2 }}
-              name={trader.trader_name}
-              connectNulls
+            <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}
             />
-          ))}
 
-          <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>
+            <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={traderColor(trader.trader_id)}
+                strokeWidth={3}
+                dot={
+                  displayData.length < 50
+                    ? { fill: traderColor(trader.trader_id), r: 3 }
+                    : false
+                }
+                activeDot={{
+                  r: 6,
+                  fill: traderColor(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-2 md:grid-cols-4 gap-3 md:gap-4 pt-5" style={{ borderTop: '1px solid #2B3139' }}>
-        <div className="p-2 md: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' }}>{t('comparisonMode', language)}</div>
-          <div className="text-sm md:text-base font-bold" style={{ color: '#EAECEF' }}>PnL %</div>
+      <div
+        className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 pt-5"
+        style={{ borderTop: '1px solid #2B3139' }}
+      >
+        <div
+          className="p-2 md: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' }}
+          >
+            {t('comparisonMode', language)}
+          </div>
+          <div
+            className="text-sm md:text-base font-bold"
+            style={{ color: '#EAECEF' }}
+          >
+            PnL %
+          </div>
         </div>
-        <div className="p-2 md: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' }}>{t('dataPoints', language)}</div>
-          <div className="text-sm md:text-base font-bold mono" style={{ color: '#EAECEF' }}>{t('count', language, {count: combinedData.length})}</div>
+        <div
+          className="p-2 md: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' }}
+          >
+            {t('dataPoints', language)}
+          </div>
+          <div
+            className="text-sm md:text-base font-bold mono"
+            style={{ color: '#EAECEF' }}
+          >
+            {t('count', language, { count: combinedData.length })}
+          </div>
         </div>
-        <div className="p-2 md: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' }}>{t('currentGap', language)}</div>
-          <div className="text-sm md:text-base font-bold mono" style={{ color: currentGap > 1 ? '#F0B90B' : '#EAECEF' }}>
+        <div
+          className="p-2 md: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' }}
+          >
+            {t('currentGap', language)}
+          </div>
+          <div
+            className="text-sm md:text-base font-bold mono"
+            style={{ color: currentGap > 1 ? '#F0B90B' : '#EAECEF' }}
+          >
             {currentGap.toFixed(2)}%
           </div>
         </div>
-        <div className="p-2 md: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' }}>{t('displayRange', language)}</div>
-          <div className="text-sm md:text-base font-bold mono" style={{ color: '#EAECEF' }}>
+        <div
+          className="p-2 md: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' }}
+          >
+            {t('displayRange', language)}
+          </div>
+          <div
+            className="text-sm md:text-base font-bold mono"
+            style={{ color: '#EAECEF' }}
+          >
             {combinedData.length > MAX_DISPLAY_POINTS
               ? `${t('recent', language)} ${MAX_DISPLAY_POINTS}`
               : t('allData', language)}
@@ -362,5 +472,5 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

web/src/components/CompetitionPage.tsx

@@ -1,18 +1,18 @@
-import { useState } from 'react';
-import { Trophy, Medal } from 'lucide-react';
-import useSWR from 'swr';
-import { api } from '../lib/api';
-import type { CompetitionData } from '../types';
-import { ComparisonChart } from './ComparisonChart';
-import { TraderConfigViewModal } from './TraderConfigViewModal';
-import { getTraderColor } from '../utils/traderColors';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
+import { useState } from 'react'
+import { Trophy, Medal } from 'lucide-react'
+import useSWR from 'swr'
+import { api } from '../lib/api'
+import type { CompetitionData } from '../types'
+import { ComparisonChart } from './ComparisonChart'
+import { TraderConfigViewModal } from './TraderConfigViewModal'
+import { getTraderColor } from '../utils/traderColors'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
 
 export function CompetitionPage() {
-  const { language } = useLanguage();
-  const [selectedTrader, setSelectedTrader] = useState<any>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { language } = useLanguage()
+  const [selectedTrader, setSelectedTrader] = useState<any>(null)
+  const [isModalOpen, setIsModalOpen] = useState(false)
 
   const { data: competition } = useSWR<CompetitionData>(
     'competition',
@@ -22,24 +22,24 @@ export function CompetitionPage() {
       revalidateOnFocus: false,
       dedupingInterval: 10000,
     }
-  );
+  )
 
   const handleTraderClick = async (traderId: string) => {
     try {
-      const traderConfig = await api.getTraderConfig(traderId);
-      setSelectedTrader(traderConfig);
-      setIsModalOpen(true);
+      const traderConfig = await api.getTraderConfig(traderId)
+      setSelectedTrader(traderConfig)
+      setIsModalOpen(true)
     } catch (error) {
-      console.error('Failed to fetch trader config:', error);
+      console.error('Failed to fetch trader config:', error)
       // 对于未登录用户，不显示详细配置，这是正常行为
       // 竞赛页面主要用于查看排行榜和基本信息
     }
-  };
+  }
 
   const closeModal = () => {
-    setIsModalOpen(false);
-    setSelectedTrader(null);
-  };
+    setIsModalOpen(false)
+    setSelectedTrader(null)
+  }
 
   if (!competition) {
     return (
@@ -61,7 +61,7 @@ export function CompetitionPage() {
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   // 如果有数据返回但没有交易员，显示空状态
@@ -71,16 +71,31 @@ export function CompetitionPage() {
         {/* Competition Header - 精简版 */}
         <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-0">
           <div className="flex items-center gap-3 md:gap-4">
-            <div className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center" style={{
-              background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
-              boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
-            }}>
-              <Trophy className="w-6 h-6 md:w-7 md:h-7" style={{ color: '#000' }} />
+            <div
+              className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center"
+              style={{
+                background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+                boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)',
+              }}
+            >
+              <Trophy
+                className="w-6 h-6 md:w-7 md:h-7"
+                style={{ color: '#000' }}
+              />
             </div>
             <div>
-              <h1 className="text-xl md:text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+              <h1
+                className="text-xl md:text-2xl font-bold flex items-center gap-2"
+                style={{ color: '#EAECEF' }}
+              >
                 {t('aiCompetition', language)}
-                <span className="text-xs font-normal px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.15)', color: '#F0B90B' }}>
+                <span
+                  className="text-xs font-normal px-2 py-1 rounded"
+                  style={{
+                    background: 'rgba(240, 185, 11, 0.15)',
+                    color: '#F0B90B',
+                  }}
+                >
                   0 {t('traders', language)}
                 </span>
               </h1>
@@ -93,7 +108,10 @@ export function CompetitionPage() {
 
         {/* Empty State */}
         <div className="binance-card p-8 text-center">
-          <Trophy className="w-16 h-16 mx-auto mb-4 opacity-40" style={{ color: '#848E9C' }} />
+          <Trophy
+            className="w-16 h-16 mx-auto mb-4 opacity-40"
+            style={{ color: '#848E9C' }}
+          />
           <h3 className="text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>
             {t('noTraders', language)}
           </h3>
@@ -102,32 +120,47 @@ export function CompetitionPage() {
           </p>
         </div>
       </div>
-    );
+    )
   }
 
   // 按收益率排序
   const sortedTraders = [...competition.traders].sort(
     (a, b) => b.total_pnl_pct - a.total_pnl_pct
-  );
+  )
 
   // 找出领先者
-  const leader = sortedTraders[0];
+  const leader = sortedTraders[0]
 
   return (
     <div className="space-y-5 animate-fade-in">
       {/* Competition Header - 精简版 */}
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 md:gap-0">
         <div className="flex items-center gap-3 md:gap-4">
-          <div className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center" style={{
-            background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
-            boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)'
-          }}>
-            <Trophy className="w-6 h-6 md:w-7 md:h-7" style={{ color: '#000' }} />
+          <div
+            className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center"
+            style={{
+              background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+              boxShadow: '0 4px 14px rgba(240, 185, 11, 0.4)',
+            }}
+          >
+            <Trophy
+              className="w-6 h-6 md:w-7 md:h-7"
+              style={{ color: '#000' }}
+            />
           </div>
           <div>
-            <h1 className="text-xl md:text-2xl font-bold flex items-center gap-2" style={{ color: '#EAECEF' }}>
+            <h1
+              className="text-xl md:text-2xl font-bold flex items-center gap-2"
+              style={{ color: '#EAECEF' }}
+            >
               {t('aiCompetition', language)}
-              <span className="text-xs font-normal px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.15)', color: '#F0B90B' }}>
+              <span
+                className="text-xs font-normal px-2 py-1 rounded"
+                style={{
+                  background: 'rgba(240, 185, 11, 0.15)',
+                  color: '#F0B90B',
+                }}
+              >
                 {competition.count} {t('traders', language)}
               </span>
             </h1>
@@ -137,10 +170,23 @@ export function CompetitionPage() {
           </div>
         </div>
         <div className="text-left md:text-right w-full md:w-auto">
-          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>{t('leader', language)}</div>
-          <div className="text-base md: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 className="text-xs mb-1" style={{ color: '#848E9C' }}>
+            {t('leader', language)}
+          </div>
+          <div
+            className="text-base md: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>
@@ -148,9 +194,15 @@ export function CompetitionPage() {
       {/* 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="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
+              className="text-lg font-bold flex items-center gap-2"
+              style={{ color: '#EAECEF' }}
+            >
               {t('performanceComparison', language)}
             </h2>
             <div className="text-xs" style={{ color: '#848E9C' }}>
@@ -161,19 +213,35 @@ export function CompetitionPage() {
         </div>
 
         {/* Right: Leaderboard */}
-        <div className="binance-card p-5 animate-slide-in" style={{ animationDelay: '0.1s' }}>
+        <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
+              className="text-lg font-bold flex items-center gap-2"
+              style={{ color: '#EAECEF' }}
+            >
               {t('leaderboard', language)}
             </h2>
-            <div className="text-xs px-2 py-1 rounded" style={{ background: 'rgba(240, 185, 11, 0.1)', color: '#F0B90B', border: '1px solid rgba(240, 185, 11, 0.2)' }}>
+            <div
+              className="text-xs px-2 py-1 rounded"
+              style={{
+                background: 'rgba(240, 185, 11, 0.1)',
+                color: '#F0B90B',
+                border: '1px solid rgba(240, 185, 11, 0.2)',
+              }}
+            >
               {t('live', language)}
             </div>
           </div>
           <div className="space-y-2">
             {sortedTraders.map((trader, index) => {
-              const isLeader = index === 0;
-              const traderColor = getTraderColor(sortedTraders, trader.trader_id);
+              const isLeader = index === 0
+              const traderColor = getTraderColor(
+                sortedTraders,
+                trader.trader_id
+              )
 
               return (
                 <div
@@ -181,21 +249,44 @@ export function CompetitionPage() {
                   onClick={() => handleTraderClick(trader.trader_id)}
                   className="rounded p-3 transition-all duration-300 hover:translate-y-[-1px] cursor-pointer hover:shadow-lg"
                   style={{
-                    background: isLeader ? 'linear-gradient(135deg, rgba(240, 185, 11, 0.08) 0%, #0B0E11 100%)' : '#0B0E11',
+                    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)'
+                    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="w-6 flex items-center justify-center">
-                        <Medal className="w-5 h-5" style={{ color: index === 0 ? '#F0B90B' : index === 1 ? '#C0C0C0' : '#CD7F32' }} />
+                        <Medal
+                          className="w-5 h-5"
+                          style={{
+                            color:
+                              index === 0
+                                ? '#F0B90B'
+                                : index === 1
+                                  ? '#C0C0C0'
+                                  : '#CD7F32',
+                          }}
+                        />
                       </div>
                       <div>
-                        <div className="font-bold text-sm" style={{ color: '#EAECEF' }}>{trader.trader_name}</div>
-                        <div className="text-xs mono font-semibold" style={{ color: traderColor }}>
-                          {trader.ai_model.toUpperCase()} + {trader.exchange.toUpperCase()}
+                        <div
+                          className="font-bold text-sm"
+                          style={{ color: '#EAECEF' }}
+                        >
+                          {trader.trader_name}
+                        </div>
+                        <div
+                          className="text-xs mono font-semibold"
+                          style={{ color: traderColor }}
+                        >
+                          {trader.ai_model.toUpperCase()} +{' '}
+                          {trader.exchange.toUpperCase()}
                         </div>
                       </div>
                     </div>
@@ -204,31 +295,52 @@ export function CompetitionPage() {
                     <div className="flex items-center gap-2 md:gap-3 flex-wrap md:flex-nowrap">
                       {/* Total Equity */}
                       <div className="text-right">
-                        <div className="text-xs" style={{ color: '#848E9C' }}>{t('equity', language)}</div>
-                        <div className="text-xs md:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {t('equity', language)}
+                        </div>
+                        <div
+                          className="text-xs md: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-[70px] md:min-w-[90px]">
-                        <div className="text-xs" style={{ color: '#848E9C' }}>{t('pnl', language)}</div>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {t('pnl', language)}
+                        </div>
                         <div
                           className="text-base md:text-lg font-bold mono"
-                          style={{ color: (trader.total_pnl ?? 0) >= 0 ? '#0ECB81' : '#F6465D' }}
+                          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
+                          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' }}>{t('pos', language)}</div>
-                        <div className="text-xs md:text-sm font-bold mono" style={{ color: '#EAECEF' }}>
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {t('pos', language)}
+                        </div>
+                        <div
+                          className="text-xs md:text-sm font-bold mono"
+                          style={{ color: '#EAECEF' }}
+                        >
                           {trader.position_count}
                         </div>
                         <div className="text-xs" style={{ color: '#848E9C' }}>
@@ -240,9 +352,16 @@ export function CompetitionPage() {
                       <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' }
+                          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 ? '●' : '○'}
@@ -251,7 +370,7 @@ export function CompetitionPage() {
                     </div>
                   </div>
                 </div>
-              );
+              )
             })}
           </div>
         </div>
@@ -259,56 +378,81 @@ export function CompetitionPage() {
 
       {/* 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' }}>
+        <div
+          className="binance-card p-5 animate-slide-in"
+          style={{ animationDelay: '0.3s' }}
+        >
+          <h2
+            className="text-lg font-bold mb-4 flex items-center gap-2"
+            style={{ color: '#EAECEF' }}
+          >
             {t('headToHead', language)}
           </h2>
           <div className="grid grid-cols-2 gap-4">
             {sortedTraders.map((trader, index) => {
-              const isWinning = index === 0;
-              const opponent = sortedTraders[1 - index];
-              const gap = trader.total_pnl_pct - opponent.total_pnl_pct;
+              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)'
-                      }
+                  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-sm md:text-base font-bold mb-2"
-                      style={{ color: getTraderColor(sortedTraders, trader.trader_id) }}
+                      style={{
+                        color: getTraderColor(sortedTraders, trader.trader_id),
+                      }}
                     >
                       {trader.trader_name}
                     </div>
-                    <div className="text-lg md: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
+                      className="text-lg md: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' }}>
+                      <div
+                        className="text-xs font-semibold"
+                        style={{ color: '#0ECB81' }}
+                      >
                         {t('leadingBy', language, { gap: gap.toFixed(2) })}
                       </div>
                     )}
                     {!isWinning && gap < 0 && (
-                      <div className="text-xs font-semibold" style={{ color: '#F6465D' }}>
-                        {t('behindBy', language, { gap: Math.abs(gap).toFixed(2) })}
+                      <div
+                        className="text-xs font-semibold"
+                        style={{ color: '#F6465D' }}
+                      >
+                        {t('behindBy', language, {
+                          gap: Math.abs(gap).toFixed(2),
+                        })}
                       </div>
                     )}
                   </div>
                 </div>
-              );
+              )
             })}
           </div>
         </div>
@@ -321,5 +465,5 @@ export function CompetitionPage() {
         traderData={selectedTrader}
       />
     </div>
-  );
+  )
 }

web/src/components/CryptoFeatureCard.tsx

@@ -1,115 +1,136 @@
-import * as React from "react";
-import { motion } from "framer-motion";
-import { Check } from "lucide-react";
-import { cn } from "../lib/utils";
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import { Check } from 'lucide-react'
+import { cn } from '../lib/utils'
 
 interface CryptoFeatureCardProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  features: string[];
-  className?: string;
-  delay?: number;
+  icon: React.ReactNode
+  title: string
+  description: string
+  features: string[]
+  className?: string
+  delay?: number
 }
 
-export const CryptoFeatureCard = React.forwardRef<HTMLDivElement, CryptoFeatureCardProps>(
-  ({ icon, title, description, features, className, delay = 0 }, ref) => {
-    const [isHovered, setIsHovered] = React.useState(false);
+export const CryptoFeatureCard = React.forwardRef<
+  HTMLDivElement,
+  CryptoFeatureCardProps
+>(({ icon, title, description, features, className, delay = 0 }, ref) => {
+  const [isHovered, setIsHovered] = React.useState(false)
 
-    return (
-      <motion.div
-        ref={ref}
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{ duration: 0.5, delay }}
-        onHoverStart={() => setIsHovered(true)}
-        onHoverEnd={() => setIsHovered(false)}
-        className="relative h-full"
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay }}
+      onHoverStart={() => setIsHovered(true)}
+      onHoverEnd={() => setIsHovered(false)}
+      className="relative h-full"
+    >
+      <div
+        className={cn(
+          'relative h-full overflow-hidden border-2 transition-all duration-300 rounded-xl',
+          'bg-gradient-to-br from-[#000000] to-[#0A0A0A]',
+          'border-[#1A1A1A] hover:border-[#F0B90B]/50',
+          isHovered && 'shadow-[0_0_20px_rgba(240,185,11,0.2)]',
+          className
+        )}
       >
-        <div
-          className={cn(
-            "relative h-full overflow-hidden border-2 transition-all duration-300 rounded-xl",
-            "bg-gradient-to-br from-[#000000] to-[#0A0A0A]",
-            "border-[#1A1A1A] hover:border-[#F0B90B]/50",
-            isHovered && "shadow-[0_0_20px_rgba(240,185,11,0.2)]",
-            className
-          )}
+        {/* Animated glow border effect */}
+        <motion.div
+          className="absolute inset-0 opacity-0 pointer-events-none"
+          animate={{
+            opacity: isHovered ? 1 : 0,
+          }}
+          transition={{ duration: 0.3 }}
         >
-          {/* Animated glow border effect */}
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#F0B90B]/20 to-transparent animate-[shimmer_2s_infinite]" />
+        </motion.div>
+
+        {/* Background pattern */}
+        <div className="absolute inset-0 opacity-5">
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage: `radial-gradient(circle at 2px 2px, #F0B90B 1px, transparent 0)`,
+              backgroundSize: '32px 32px',
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 p-8 flex flex-col h-full">
+          {/* Icon container */}
           <motion.div
-            className="absolute inset-0 opacity-0 pointer-events-none"
+            className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-xl"
+            style={{
+              background:
+                'linear-gradient(135deg, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0.05) 100%)',
+              border: '1px solid rgba(240, 185, 11, 0.3)',
+            }}
             animate={{
-              opacity: isHovered ? 1 : 0,
+              scale: isHovered ? 1.1 : 1,
+              boxShadow: isHovered
+                ? '0 0 20px rgba(240, 185, 11, 0.4)'
+                : '0 0 0px rgba(240, 185, 11, 0)',
             }}
             transition={{ duration: 0.3 }}
           >
-            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#F0B90B]/20 to-transparent animate-[shimmer_2s_infinite]" />
+            <div style={{ color: 'var(--brand-yellow)' }}>{icon}</div>
           </motion.div>
 
-          {/* Background pattern */}
-          <div className="absolute inset-0 opacity-5">
-            <div
-              className="absolute inset-0"
-              style={{
-                backgroundImage: `radial-gradient(circle at 2px 2px, #F0B90B 1px, transparent 0)`,
-                backgroundSize: "32px 32px",
-              }}
-            />
-          </div>
+          {/* Title */}
+          <h3
+            className="text-2xl font-bold mb-3"
+            style={{ color: 'var(--brand-light-gray)' }}
+          >
+            {title}
+          </h3>
 
-          <div className="relative z-10 p-8 flex flex-col h-full">
-            {/* Icon container */}
-            <motion.div
-              className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-xl"
-              style={{
-                background: 'linear-gradient(135deg, rgba(240, 185, 11, 0.2) 0%, rgba(240, 185, 11, 0.05) 100%)',
-                border: '1px solid rgba(240, 185, 11, 0.3)'
-              }}
-              animate={{
-                scale: isHovered ? 1.1 : 1,
-                boxShadow: isHovered
-                  ? "0 0 20px rgba(240, 185, 11, 0.4)"
-                  : "0 0 0px rgba(240, 185, 11, 0)",
-              }}
-              transition={{ duration: 0.3 }}
-            >
-              <div style={{ color: 'var(--brand-yellow)' }}>{icon}</div>
-            </motion.div>
+          {/* Description */}
+          <p
+            className="mb-6 flex-grow leading-relaxed"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            {description}
+          </p>
 
-            {/* Title */}
-            <h3 className="text-2xl font-bold mb-3" style={{ color: 'var(--brand-light-gray)' }}>{title}</h3>
-
-            {/* Description */}
-            <p className="mb-6 flex-grow leading-relaxed" style={{ color: 'var(--text-secondary)' }}>{description}</p>
-
-            {/* Features list */}
-            <div className="space-y-3 mb-6">
-              {features.map((feature, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
-                  transition={{ delay: delay + index * 0.1 }}
-                  className="flex items-start gap-3"
-                >
-                  <div className="mt-0.5 flex-shrink-0">
-                    <div className="w-5 h-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(240, 185, 11, 0.2)' }}>
-                      <Check className="w-3 h-3" style={{ color: 'var(--brand-yellow)' }} />
-                    </div>
+          {/* Features list */}
+          <div className="space-y-3 mb-6">
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: -10 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: delay + index * 0.1 }}
+                className="flex items-start gap-3"
+              >
+                <div className="mt-0.5 flex-shrink-0">
+                  <div
+                    className="w-5 h-5 rounded-full flex items-center justify-center"
+                    style={{ background: 'rgba(240, 185, 11, 0.2)' }}
+                  >
+                    <Check
+                      className="w-3 h-3"
+                      style={{ color: 'var(--brand-yellow)' }}
+                    />
                   </div>
-                  <span className="text-sm" style={{ color: 'var(--brand-light-gray)' }}>{feature}</span>
-                </motion.div>
-              ))}
-            </div>
-
+                </div>
+                <span
+                  className="text-sm"
+                  style={{ color: 'var(--brand-light-gray)' }}
+                >
+                  {feature}
+                </span>
+              </motion.div>
+            ))}
           </div>
-          
         </div>
-      </motion.div>
-    );
-  }
-);
+      </div>
+    </motion.div>
+  )
+})
 
-CryptoFeatureCard.displayName = "CryptoFeatureCard";
+CryptoFeatureCard.displayName = 'CryptoFeatureCard'

web/src/components/EquityChart.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from 'react'
 import {
   LineChart,
   Line,
@@ -8,28 +8,35 @@ import {
   Tooltip,
   ResponsiveContainer,
   ReferenceLine,
-} from 'recharts';
-import useSWR from 'swr';
-import { api } from '../lib/api';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
-import { AlertTriangle, BarChart3, DollarSign, Percent, TrendingUp as ArrowUp, TrendingDown as ArrowDown } from 'lucide-react'
+} from 'recharts'
+import useSWR from 'swr'
+import { api } from '../lib/api'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
+import {
+  AlertTriangle,
+  BarChart3,
+  DollarSign,
+  Percent,
+  TrendingUp as ArrowUp,
+  TrendingDown as ArrowDown,
+} from 'lucide-react'
 
 interface EquityPoint {
-  timestamp: string;
-  total_equity: number;
-  pnl: number;
-  pnl_pct: number;
-  cycle_number: number;
+  timestamp: string
+  total_equity: number
+  pnl: number
+  pnl_pct: number
+  cycle_number: number
 }
 
 interface EquityChartProps {
-  traderId?: string;
+  traderId?: string
 }
 
 export function EquityChart({ traderId }: EquityChartProps) {
-  const { language } = useLanguage();
-  const [displayMode, setDisplayMode] = useState<'dollar' | 'percent'>('dollar');
+  const { language } = useLanguage()
+  const [displayMode, setDisplayMode] = useState<'dollar' | 'percent'>('dollar')
 
   const { data: history, error } = useSWR<EquityPoint[]>(
     traderId ? `equity-history-${traderId}` : 'equity-history',
@@ -39,7 +46,7 @@ export function EquityChart({ traderId }: EquityChartProps) {
       revalidateOnFocus: false,
       dedupingInterval: 20000,
     }
-  );
+  )
 
   const { data: account } = useSWR(
     traderId ? `account-${traderId}` : 'account',
@@ -49,24 +56,24 @@ export function EquityChart({ traderId }: EquityChartProps) {
       revalidateOnFocus: false,
       dedupingInterval: 10000,
     }
-  );
+  )
 
   if (error) {
     return (
-      <div className='binance-card p-6'>
+      <div className="binance-card p-6">
         <div
-          className='flex items-center gap-3 p-4 rounded'
+          className="flex items-center gap-3 p-4 rounded"
           style={{
             background: 'rgba(246, 70, 93, 0.1)',
             border: '1px solid rgba(246, 70, 93, 0.2)',
           }}
         >
-          <AlertTriangle className='w-6 h-6' style={{ color: '#F6465D' }} />
+          <AlertTriangle className="w-6 h-6" style={{ color: '#F6465D' }} />
           <div>
-            <div className='font-semibold' style={{ color: '#F6465D' }}>
+            <div className="font-semibold" style={{ color: '#F6465D' }}>
               {t('loadingError', language)}
             </div>
-            <div className='text-sm' style={{ color: '#848E9C' }}>
+            <div className="text-sm" style={{ color: '#848E9C' }}>
               {error.message}
             </div>
           </div>
@@ -76,22 +83,22 @@ export function EquityChart({ traderId }: EquityChartProps) {
   }
 
   // 过滤掉无效数据：total_equity为0或小于1的数据点（API失败导致）
-  const validHistory = history?.filter(point => point.total_equity > 1) || [];
+  const validHistory = history?.filter((point) => point.total_equity > 1) || []
 
   if (!validHistory || validHistory.length === 0) {
     return (
-      <div className='binance-card p-6'>
-        <h3 className='text-lg font-semibold mb-6' style={{ color: '#EAECEF' }}>
+      <div className="binance-card p-6">
+        <h3 className="text-lg font-semibold mb-6" style={{ color: '#EAECEF' }}>
           {t('accountEquityCurve', language)}
         </h3>
-        <div className='text-center py-16' style={{ color: '#848E9C' }}>
-          <div className='mb-4 flex justify-center opacity-50'>
-            <BarChart3 className='w-16 h-16' />
+        <div className="text-center py-16" style={{ color: '#848E9C' }}>
+          <div className="mb-4 flex justify-center opacity-50">
+            <BarChart3 className="w-16 h-16" />
           </div>
-          <div className='text-lg font-semibold mb-2'>
+          <div className="text-lg font-semibold mb-2">
             {t('noHistoricalData', language)}
           </div>
-          <div className='text-sm'>{t('dataWillAppear', language)}</div>
+          <div className="text-sm">{t('dataWillAppear', language)}</div>
         </div>
       </div>
     )
@@ -99,10 +106,11 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
   // 限制显示最近的数据点（性能优化）
   // 如果数据超过2000个点，只显示最近2000个
-  const MAX_DISPLAY_POINTS = 2000;
-  const displayHistory = validHistory.length > MAX_DISPLAY_POINTS
-    ? validHistory.slice(-MAX_DISPLAY_POINTS)
-    : validHistory;
+  const MAX_DISPLAY_POINTS = 2000
+  const displayHistory =
+    validHistory.length > MAX_DISPLAY_POINTS
+      ? validHistory.slice(-MAX_DISPLAY_POINTS)
+      : validHistory
 
   // 计算初始余额（优先从 account 获取配置的初始余额，备选从历史数据反推）
   const initialBalance = account?.initial_balance  // 从交易员配置读取真实初始余额
@@ -111,8 +119,8 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
   // 转换数据格式
   const chartData = displayHistory.map((point) => {
-    const pnl = point.total_equity - initialBalance;
-    const pnlPct = ((pnl / initialBalance) * 100).toFixed(2);
+    const pnl = point.total_equity - initialBalance
+    const pnlPct = ((pnl / initialBalance) * 100).toFixed(2)
     return {
       time: new Date(point.timestamp).toLocaleTimeString('zh-CN', {
         hour: '2-digit',
@@ -123,43 +131,45 @@ export function EquityChart({ traderId }: EquityChartProps) {
       raw_equity: point.total_equity,
       raw_pnl: pnl,
       raw_pnl_pct: parseFloat(pnlPct),
-    };
-  });
+    }
+  })
 
-  const currentValue = chartData[chartData.length - 1];
-  const isProfit = currentValue.raw_pnl >= 0;
+  const currentValue = chartData[chartData.length - 1]
+  const isProfit = currentValue.raw_pnl >= 0
 
   // 计算Y轴范围
   const calculateYDomain = () => {
     if (displayMode === 'percent') {
       // 百分比模式：找到最大最小值，留20%余量
-      const values = chartData.map(d => d.value);
-      const minVal = Math.min(...values);
-      const maxVal = Math.max(...values);
-      const range = Math.max(Math.abs(maxVal), Math.abs(minVal));
-      const padding = Math.max(range * 0.2, 1); // 至少留1%余量
-      return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)];
+      const values = chartData.map((d) => d.value)
+      const minVal = Math.min(...values)
+      const maxVal = Math.max(...values)
+      const range = Math.max(Math.abs(maxVal), Math.abs(minVal))
+      const padding = Math.max(range * 0.2, 1) // 至少留1%余量
+      return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)]
     } else {
       // 美元模式：以初始余额为基准，上下留10%余量
-      const values = chartData.map(d => d.value);
-      const minVal = Math.min(...values, initialBalance);
-      const maxVal = Math.max(...values, initialBalance);
-      const range = maxVal - minVal;
-      const padding = Math.max(range * 0.15, initialBalance * 0.01); // 至少留1%余量
-      return [
-        Math.floor(minVal - padding),
-        Math.ceil(maxVal + padding)
-      ];
+      const values = chartData.map((d) => d.value)
+      const minVal = Math.min(...values, initialBalance)
+      const maxVal = Math.max(...values, initialBalance)
+      const range = maxVal - minVal
+      const padding = Math.max(range * 0.15, initialBalance * 0.01) // 至少留1%余量
+      return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)]
     }
-  };
+  }
 
   // 自定义Tooltip - Binance Style
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
-      const data = payload[0].payload;
+      const data = payload[0].payload
       return (
-        <div className="rounded p-3 shadow-xl" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>Cycle #{data.cycle}</div>
+        <div
+          className="rounded p-3 shadow-xl"
+          style={{ background: '#1E2329', border: '1px solid #2B3139' }}
+        >
+          <div className="text-xs mb-1" style={{ color: '#848E9C' }}>
+            Cycle #{data.cycle}
+          </div>
           <div className="font-bold mono" style={{ color: '#EAECEF' }}>
             {data.raw_equity.toFixed(2)} USDT
           </div>
@@ -172,38 +182,38 @@ export function EquityChart({ traderId }: EquityChartProps) {
             {data.raw_pnl_pct}%)
           </div>
         </div>
-      );
+      )
     }
-    return null;
-  };
+    return null
+  }
 
   return (
-    <div className='binance-card p-3 sm:p-5 animate-fade-in'>
+    <div className="binance-card p-3 sm:p-5 animate-fade-in">
       {/* Header */}
-      <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4'>
-        <div className='flex-1'>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
+        <div className="flex-1">
           <h3
-            className='text-base sm:text-lg font-bold mb-2'
+            className="text-base sm:text-lg font-bold mb-2"
             style={{ color: '#EAECEF' }}
           >
             {t('accountEquityCurve', language)}
           </h3>
-          <div className='flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4'>
+          <div className="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
             <span
-              className='text-2xl sm:text-3xl font-bold mono'
+              className="text-2xl sm:text-3xl font-bold mono"
               style={{ color: '#EAECEF' }}
             >
               {account?.total_equity.toFixed(2) || '0.00'}
               <span
-                className='text-base sm:text-lg ml-1'
+                className="text-base sm:text-lg ml-1"
                 style={{ color: '#848E9C' }}
               >
                 USDT
               </span>
             </span>
-            <div className='flex items-center gap-2 flex-wrap'>
+            <div className="flex items-center gap-2 flex-wrap">
               <span
-                className='text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded flex items-center gap-1'
+                className="text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded flex items-center gap-1"
                 style={{
                   color: isProfit ? '#0ECB81' : '#F6465D',
                   background: isProfit
@@ -216,12 +226,16 @@ export function EquityChart({ traderId }: EquityChartProps) {
                   }`,
                 }}
               >
-                {isProfit ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+                {isProfit ? (
+                  <ArrowUp className="w-4 h-4" />
+                ) : (
+                  <ArrowDown className="w-4 h-4" />
+                )}
                 {isProfit ? '+' : ''}
                 {currentValue.raw_pnl_pct}%
               </span>
               <span
-                className='text-xs sm:text-sm mono'
+                className="text-xs sm:text-sm mono"
                 style={{ color: '#848E9C' }}
               >
                 ({isProfit ? '+' : ''}
@@ -233,12 +247,12 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
         {/* Display Mode Toggle */}
         <div
-          className='flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto'
+          className="flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto"
           style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
         >
           <button
             onClick={() => setDisplayMode('dollar')}
-            className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
+            className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1"
             style={
               displayMode === 'dollar'
                 ? {
@@ -249,11 +263,11 @@ export function EquityChart({ traderId }: EquityChartProps) {
                 : { background: 'transparent', color: '#848E9C' }
             }
           >
-            <DollarSign className='w-4 h-4' /> USDT
+            <DollarSign className="w-4 h-4" /> USDT
           </button>
           <button
             onClick={() => setDisplayMode('percent')}
-            className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
+            className="px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1"
             style={
               displayMode === 'percent'
                 ? {
@@ -264,15 +278,22 @@ export function EquityChart({ traderId }: EquityChartProps) {
                 : { background: 'transparent', color: '#848E9C' }
             }
           >
-            <Percent className='w-4 h-4' />
+            <Percent className="w-4 h-4" />
           </button>
         </div>
       </div>
 
       {/* Chart */}
-      <div className='my-2' style={{ borderRadius: '8px', overflow: 'hidden', position: 'relative' }}>
+      <div
+        className="my-2"
+        style={{
+          borderRadius: '8px',
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
         {/* NOFX Watermark */}
-        <div 
+        <div
           style={{
             position: 'absolute',
             top: '15px',
@@ -282,35 +303,35 @@ export function EquityChart({ traderId }: EquityChartProps) {
             color: 'rgba(240, 185, 11, 0.15)',
             zIndex: 10,
             pointerEvents: 'none',
-            fontFamily: 'monospace'
+            fontFamily: 'monospace',
           }}
         >
           NOFX
         </div>
-        <ResponsiveContainer width='100%' height={280}>
+        <ResponsiveContainer width="100%" height={280}>
           <LineChart
             data={chartData}
             margin={{ top: 10, right: 20, left: 5, bottom: 30 }}
           >
             <defs>
-              <linearGradient id='colorGradient' x1='0' y1='0' x2='0' y2='1'>
-                <stop offset='5%' stopColor='#F0B90B' stopOpacity={0.8} />
-                <stop offset='95%' stopColor='#FCD535' stopOpacity={0.2} />
+              <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#F0B90B" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="#FCD535" stopOpacity={0.2} />
               </linearGradient>
             </defs>
-            <CartesianGrid strokeDasharray='3 3' stroke='#2B3139' />
+            <CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
             <XAxis
-              dataKey='time'
-              stroke='#5E6673'
+              dataKey="time"
+              stroke="#5E6673"
               tick={{ fill: '#848E9C', fontSize: 11 }}
               tickLine={{ stroke: '#2B3139' }}
               interval={Math.floor(chartData.length / 10)}
               angle={-15}
-              textAnchor='end'
+              textAnchor="end"
               height={60}
             />
             <YAxis
-              stroke='#5E6673'
+              stroke="#5E6673"
               tick={{ fill: '#848E9C', fontSize: 12 }}
               tickLine={{ stroke: '#2B3139' }}
               domain={calculateYDomain()}
@@ -321,8 +342,8 @@ export function EquityChart({ traderId }: EquityChartProps) {
             <Tooltip content={<CustomTooltip />} />
             <ReferenceLine
               y={displayMode === 'dollar' ? initialBalance : 0}
-              stroke='#474D57'
-              strokeDasharray='3 3'
+              stroke="#474D57"
+              strokeDasharray="3 3"
               label={{
                 value:
                   displayMode === 'dollar'
@@ -333,9 +354,9 @@ export function EquityChart({ traderId }: EquityChartProps) {
               }}
             />
             <Line
-              type='natural'
-              dataKey='value'
-              stroke='url(#colorGradient)'
+              type="natural"
+              dataKey="value"
+              stroke="url(#colorGradient)"
               strokeWidth={3}
               dot={chartData.length > 50 ? false : { fill: '#F0B90B', r: 3 }}
               activeDot={{
@@ -352,72 +373,72 @@ export function EquityChart({ traderId }: EquityChartProps) {
 
       {/* Footer Stats */}
       <div
-        className='mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3'
+        className="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3"
         style={{ borderTop: '1px solid #2B3139' }}
       >
         <div
-          className='p-2 rounded transition-all hover:bg-opacity-50'
+          className="p-2 rounded transition-all hover:bg-opacity-50"
           style={{ background: 'rgba(240, 185, 11, 0.05)' }}
         >
           <div
-            className='text-xs mb-1 uppercase tracking-wider'
+            className="text-xs mb-1 uppercase tracking-wider"
             style={{ color: '#848E9C' }}
           >
             {t('initialBalance', language)}
           </div>
           <div
-            className='text-xs sm:text-sm font-bold mono'
+            className="text-xs sm:text-sm font-bold mono"
             style={{ color: '#EAECEF' }}
           >
             {initialBalance.toFixed(2)} USDT
           </div>
         </div>
         <div
-          className='p-2 rounded transition-all hover:bg-opacity-50'
+          className="p-2 rounded transition-all hover:bg-opacity-50"
           style={{ background: 'rgba(240, 185, 11, 0.05)' }}
         >
           <div
-            className='text-xs mb-1 uppercase tracking-wider'
+            className="text-xs mb-1 uppercase tracking-wider"
             style={{ color: '#848E9C' }}
           >
             {t('currentEquity', language)}
           </div>
           <div
-            className='text-xs sm:text-sm font-bold mono'
+            className="text-xs sm:text-sm font-bold mono"
             style={{ color: '#EAECEF' }}
           >
             {currentValue.raw_equity.toFixed(2)} USDT
           </div>
         </div>
         <div
-          className='p-2 rounded transition-all hover:bg-opacity-50'
+          className="p-2 rounded transition-all hover:bg-opacity-50"
           style={{ background: 'rgba(240, 185, 11, 0.05)' }}
         >
           <div
-            className='text-xs mb-1 uppercase tracking-wider'
+            className="text-xs mb-1 uppercase tracking-wider"
             style={{ color: '#848E9C' }}
           >
             {t('historicalCycles', language)}
           </div>
           <div
-            className='text-xs sm:text-sm font-bold mono'
+            className="text-xs sm:text-sm font-bold mono"
             style={{ color: '#EAECEF' }}
           >
             {validHistory.length} {t('cycles', language)}
           </div>
         </div>
         <div
-          className='p-2 rounded transition-all hover:bg-opacity-50'
+          className="p-2 rounded transition-all hover:bg-opacity-50"
           style={{ background: 'rgba(240, 185, 11, 0.05)' }}
         >
           <div
-            className='text-xs mb-1 uppercase tracking-wider'
+            className="text-xs mb-1 uppercase tracking-wider"
             style={{ color: '#848E9C' }}
           >
             {t('displayRange', language)}
           </div>
           <div
-            className='text-xs sm:text-sm font-bold mono'
+            className="text-xs sm:text-sm font-bold mono"
             style={{ color: '#EAECEF' }}
           >
             {validHistory.length > MAX_DISPLAY_POINTS

web/src/components/ExchangeIcons.tsx

@@ -1,107 +1,165 @@
-import React from 'react';
+import React from 'react'
 
 interface IconProps {
-  width?: number;
-  height?: number;
-  className?: string;
+  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} 
+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" 
+    <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" 
+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" 
+    <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" 
+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
+        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
+        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
+        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
+        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)"/>
+    <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 = {}) => {
+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 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
-  };
-  
+    className: props.className,
+  }
+
   switch (type) {
     case 'binance':
     case 'cex':
-      return <BinanceIcon {...iconProps} />;
+      return <BinanceIcon {...iconProps} />
     case 'hyperliquid':
     case 'dex':
-      return <HyperliquidIcon {...iconProps} />;
+      return <HyperliquidIcon {...iconProps} />
     case 'aster':
-      return <AsterIcon {...iconProps} />;
+      return <AsterIcon {...iconProps} />
     default:
       return (
-        <div 
+        <div
           className={props.className}
-          style={{ 
-            width: props.width || 24, 
+          style={{
+            width: props.width || 24,
             height: props.height || 24,
             borderRadius: '50%',
             background: '#2B3139',
@@ -110,11 +168,11 @@ export const getExchangeIcon = (exchangeType: string, props: IconProps = {}) =>
             justifyContent: 'center',
             fontSize: '12px',
             fontWeight: 'bold',
-            color: '#EAECEF'
+            color: '#EAECEF',
           }}
         >
           {type[0]?.toUpperCase() || '?'}
         </div>
-      );
+      )
   }
-};
+}

web/src/components/Header.tsx

@@ -1,12 +1,12 @@
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
 
 interface HeaderProps {
-  simple?: boolean; // For login/register pages
+  simple?: boolean // For login/register pages
 }
 
 export function Header({ simple = false }: HeaderProps) {
-  const { language, setLanguage } = useLanguage();
+  const { language, setLanguage } = useLanguage()
 
   return (
     <header className="glass sticky top-0 z-50 backdrop-blur-xl">
@@ -28,15 +28,19 @@ export function Header({ simple = false }: HeaderProps) {
               )}
             </div>
           </div>
-          
+
           {/* Right - Language Toggle (always show) */}
-          <div className="flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
+          <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' }
+              style={
+                language === 'zh'
+                  ? { background: '#F0B90B', color: '#000' }
+                  : { background: 'transparent', color: '#848E9C' }
               }
             >
               中文
@@ -44,9 +48,10 @@ export function Header({ simple = false }: HeaderProps) {
             <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' }
+              style={
+                language === 'en'
+                  ? { background: '#F0B90B', color: '#000' }
+                  : { background: 'transparent', color: '#848E9C' }
               }
             >
               EN
@@ -55,5 +60,5 @@ export function Header({ simple = false }: HeaderProps) {
         </div>
       </div>
     </header>
-  );
+  )
 }

web/src/components/LoginPage.tsx

@@ -1,208 +1,272 @@
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
-import HeaderBar from './landing/HeaderBar';
+import React, { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
+import HeaderBar from './landing/HeaderBar'
 
 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 { 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);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const result = await login(email, password)
 
-    const result = await login(email, password);
-    
     if (result.success) {
       if (result.requiresOTP && result.userID) {
-        setUserID(result.userID);
-        setStep('otp');
+        setUserID(result.userID)
+        setStep('otp')
       }
     } else {
-      setError(result.message || t('loginFailed', language));
+      setError(result.message || t('loginFailed', language))
     }
-    
-    setLoading(false);
-  };
+
+    setLoading(false)
+  }
 
   const handleOTPVerify = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const result = await verifyOTP(userID, otpCode)
 
-    const result = await verifyOTP(userID, otpCode);
-    
     if (!result.success) {
-      setError(result.message || t('verificationFailed', language));
+      setError(result.message || t('verificationFailed', language))
     }
     // 成功的话AuthContext会自动处理登录状态
-    
-    setLoading(false);
-  };
+
+    setLoading(false)
+  }
 
   return (
     <div className="min-h-screen" style={{ background: 'var(--brand-black)' }}>
-      <HeaderBar 
-        onLoginClick={() => {}} 
-        isLoggedIn={false} 
+      <HeaderBar
+        onLoginClick={() => {}}
+        isLoggedIn={false}
         isHomePage={false}
         currentPage="login"
         language={language}
         onLanguageChange={() => {}}
         onPageChange={(page) => {
-          console.log('LoginPage onPageChange called with:', page);
+          console.log('LoginPage onPageChange called with:', page)
           if (page === 'competition') {
-            window.location.href = '/competition';
+            window.location.href = '/competition'
           }
         }}
       />
 
-      <div className="flex items-center justify-center pt-20" style={{ minHeight: 'calc(100vh - 80px)' }}>
+      <div
+        className="flex items-center justify-center pt-20"
+        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 mx-auto mb-4 flex items-center justify-center">
-              <img src="/icons/nofx.svg" alt="NoFx Logo" className="w-16 h-16 object-contain" />
+              <img
+                src="/icons/nofx.svg"
+                alt="NoFx Logo"
+                className="w-16 h-16 object-contain"
+              />
             </div>
-            <h1 className="text-2xl font-bold" style={{ color: 'var(--brand-light-gray)' }}>
+            <h1
+              className="text-2xl font-bold"
+              style={{ color: 'var(--brand-light-gray)' }}
+            >
               登录 NOFX
             </h1>
-            <p className="text-sm mt-2" style={{ color: 'var(--text-secondary)' }}>
+            <p
+              className="text-sm mt-2"
+              style={{ color: 'var(--text-secondary)' }}
+            >
               {step === 'login' ? '请输入您的邮箱和密码' : '请输入两步验证码'}
             </p>
           </div>
 
-        {/* Login Form */}
-        <div className="rounded-lg p-6" style={{ background: 'var(--panel-bg)', border: '1px solid var(--panel-border)' }}>
-          {step === 'login' ? (
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('emailPlaceholder', language)}
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('passwordPlaceholder', language)}
-                  required
-                />
-              </div>
-
-              {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
-                  {error}
+          {/* Login Form */}
+          <div
+            className="rounded-lg p-6"
+            style={{
+              background: 'var(--panel-bg)',
+              border: '1px solid var(--panel-border)',
+            }}
+          >
+            {step === 'login' ? (
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('emailPlaceholder', language)}
+                    required
+                  />
                 </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: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
-              >
-                {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: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('otpPlaceholder', language)}
-                  maxLength={6}
-                  required
-                />
-              </div>
-
-              {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
-                  {error}
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('passwordPlaceholder', language)}
+                    required
+                  />
                 </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: 'var(--panel-bg-hover)', color: 'var(--text-secondary)' }}
-                >
-                  {t('back', language)}
-                </button>
+                {error && (
+                  <div
+                    className="text-sm px-3 py-2 rounded"
+                    style={{
+                      background: 'var(--binance-red-bg)',
+                      color: 'var(--binance-red)',
+                    }}
+                  >
+                    {error}
+                  </div>
+                )}
+
                 <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' }}
+                  disabled={loading}
+                  className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  style={{
+                    background: 'var(--brand-yellow)',
+                    color: 'var(--brand-black)',
+                  }}
                 >
-                  {loading ? t('loading', language) : t('verifyOTP', language)}
+                  {loading
+                    ? t('loading', language)
+                    : t('loginButton', language)}
                 </button>
-              </div>
-            </form>
-          )}
-        </div>
+              </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>
 
-        {/* Register Link */}
-        <div className="text-center mt-6">
-          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-            还没有账户？{' '}
-            <button
-              onClick={() => {
-                window.history.pushState({}, '', '/register');
-                window.dispatchEvent(new PopStateEvent('popstate'));
-              }}
-              className="font-semibold hover:underline transition-colors"
-              style={{ color: 'var(--brand-yellow)' }}
-            >
-              立即注册
-            </button>
-          </p>
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('otpPlaceholder', language)}
+                    maxLength={6}
+                    required
+                  />
+                </div>
+
+                {error && (
+                  <div
+                    className="text-sm px-3 py-2 rounded"
+                    style={{
+                      background: 'var(--binance-red-bg)',
+                      color: 'var(--binance-red)',
+                    }}
+                  >
+                    {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: 'var(--panel-bg-hover)',
+                      color: 'var(--text-secondary)',
+                    }}
+                  >
+                    {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: 'var(--text-secondary)' }}>
+              还没有账户？{' '}
+              <button
+                onClick={() => {
+                  window.history.pushState({}, '', '/register')
+                  window.dispatchEvent(new PopStateEvent('popstate'))
+                }}
+                className="font-semibold hover:underline transition-colors"
+                style={{ color: 'var(--brand-yellow)' }}
+              >
+                立即注册
+              </button>
+            </p>
+          </div>
         </div>
       </div>
-      </div>
     </div>
-  );
+  )
 }

web/src/components/ModelIcons.tsx

@@ -1,26 +1,25 @@
-
 interface IconProps {
-  width?: number;
-  height?: number;
-  className?: string;
+  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;
-  
+  const type = modelType.includes('_') ? modelType.split('_').pop() : modelType
+
+  let iconPath: string | null = null
+
   switch (type) {
     case 'deepseek':
-      iconPath = '/icons/deepseek.svg';
-      break;
+      iconPath = '/icons/deepseek.svg'
+      break
     case 'qwen':
-      iconPath = '/icons/qwen.svg';
-      break;
+      iconPath = '/icons/qwen.svg'
+      break
     default:
-      return null;
+      return null
   }
 
   return (
@@ -32,5 +31,5 @@ export const getModelIcon = (modelType: string, props: IconProps = {}) => {
       className={props.className}
       style={{ borderRadius: '50%' }}
     />
-  );
-};
+  )
+}

web/src/components/RegisterPage.tsx

@@ -1,366 +1,502 @@
-import React, { useState, useEffect } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
-import { getSystemConfig } from '../lib/config';
-import HeaderBar from './landing/HeaderBar';
+import React, { useState, useEffect } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
+import { getSystemConfig } from '../lib/config'
+import HeaderBar from './landing/HeaderBar'
 
 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 [betaCode, setBetaCode] = useState('');
-  const [betaMode, setBetaMode] = useState(false);
-  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 { 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 [betaCode, setBetaCode] = useState('')
+  const [betaMode, setBetaMode] = useState(false)
+  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)
 
   useEffect(() => {
     // 获取系统配置，检查是否开启内测模式
-    getSystemConfig().then(config => {
-      setBetaMode(config.beta_mode || false);
-    }).catch(err => {
-      console.error('Failed to fetch system config:', err);
-    });
-  }, []);
+    getSystemConfig()
+      .then((config) => {
+        setBetaMode(config.beta_mode || false)
+      })
+      .catch((err) => {
+        console.error('Failed to fetch system config:', err)
+      })
+  }, [])
 
   const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
+    e.preventDefault()
+    setError('')
 
     if (password !== confirmPassword) {
-      setError(t('passwordMismatch', language));
-      return;
+      setError(t('passwordMismatch', language))
+      return
     }
 
     if (password.length < 6) {
-      setError(t('passwordTooShort', language));
-      return;
+      setError(t('passwordTooShort', language))
+      return
     }
 
     if (betaMode && !betaCode.trim()) {
-      setError('内测期间，注册需要提供内测码');
-      return;
+      setError('内测期间，注册需要提供内测码')
+      return
     }
 
-    setLoading(true);
+    setLoading(true)
+
+    const result = await register(email, password, betaCode.trim() || undefined)
 
-    const result = await register(email, password, betaCode.trim() || undefined);
-    
     if (result.success && result.userID) {
-      setUserID(result.userID);
-      setOtpSecret(result.otpSecret || '');
-      setQrCodeURL(result.qrCodeURL || '');
-      setStep('setup-otp');
+      setUserID(result.userID)
+      setOtpSecret(result.otpSecret || '')
+      setQrCodeURL(result.qrCodeURL || '')
+      setStep('setup-otp')
     } else {
-      setError(result.message || t('registrationFailed', language));
+      setError(result.message || t('registrationFailed', language))
     }
-    
-    setLoading(false);
-  };
+
+    setLoading(false)
+  }
 
   const handleSetupComplete = () => {
-    setStep('verify-otp');
-  };
+    setStep('verify-otp')
+  }
 
   const handleOTPVerify = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    const result = await completeRegistration(userID, otpCode)
 
-    const result = await completeRegistration(userID, otpCode);
-    
     if (!result.success) {
-      setError(result.message || t('registrationFailed', language));
+      setError(result.message || t('registrationFailed', language))
     }
     // 成功的话AuthContext会自动处理登录状态
-    
-    setLoading(false);
-  };
+
+    setLoading(false)
+  }
 
   const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-  };
+    navigator.clipboard.writeText(text)
+  }
 
   return (
     <div className="min-h-screen" style={{ background: 'var(--brand-black)' }}>
-      <HeaderBar 
-        isLoggedIn={false} 
+      <HeaderBar
+        isLoggedIn={false}
         isHomePage={false}
         currentPage="register"
         language={language}
         onLanguageChange={() => {}}
         onPageChange={(page) => {
-          console.log('RegisterPage onPageChange called with:', page);
+          console.log('RegisterPage onPageChange called with:', page)
           if (page === 'competition') {
-            window.location.href = '/competition';
+            window.location.href = '/competition'
           }
         }}
       />
 
-      <div className="flex items-center justify-center pt-20" style={{ minHeight: 'calc(100vh - 80px)' }}>
+      <div
+        className="flex items-center justify-center pt-20"
+        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 mx-auto mb-4 flex items-center justify-center">
-            <img src="/icons/nofx.svg" alt="NoFx Logo" className="w-16 h-16 object-contain" />
+            <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+              <img
+                src="/icons/nofx.svg"
+                alt="NoFx Logo"
+                className="w-16 h-16 object-contain"
+              />
+            </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>
-          <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: 'var(--panel-bg)', border: '1px solid var(--panel-border)' }}>
-          {step === 'register' && (
-            <form onSubmit={handleRegister} className="space-y-4">
-              <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('emailPlaceholder', language)}
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('passwordPlaceholder', language)}
-                  required
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('confirmPasswordPlaceholder', language)}
-                  required
-                />
-              </div>
-
-              {betaMode && (
+          {/* Registration Form */}
+          <div
+            className="rounded-lg p-6"
+            style={{
+              background: 'var(--panel-bg)',
+              border: '1px solid var(--panel-border)',
+            }}
+          >
+            {step === 'register' && (
+              <form onSubmit={handleRegister} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
-                    内测码 *
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {t('email', language)}
                   </label>
                   <input
-                    type="text"
-                    value={betaCode}
-                    onChange={(e) => setBetaCode(e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase())}
-                    className="w-full px-3 py-2 rounded font-mono"
-                    style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
-                    placeholder="请输入6位内测码"
-                    maxLength={6}
-                    required={betaMode}
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full px-3 py-2 rounded"
+                    style={{
+                      background: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('emailPlaceholder', language)}
+                    required
                   />
-                  <p className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                    内测码由6位字母数字组成，区分大小写
-                  </p>
                 </div>
-              )}
 
-              {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
-                  {error}
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('passwordPlaceholder', language)}
+                    required
+                  />
                 </div>
-              )}
 
-              <button
-                type="submit"
-                disabled={loading || (betaMode && !betaCode.trim())}
-                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
-                style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
-              >
-                {loading ? t('loading', language) : t('registerButton', language)}
-              </button>
-            </form>
-          )}
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('confirmPasswordPlaceholder', language)}
+                    required
+                  />
+                </div>
 
-          {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>
+                {betaMode && (
+                  <div>
+                    <label
+                      className="block text-sm font-semibold mb-2"
+                      style={{ color: '#EAECEF' }}
+                    >
+                      内测码 *
+                    </label>
+                    <input
+                      type="text"
+                      value={betaCode}
+                      onChange={(e) =>
+                        setBetaCode(
+                          e.target.value
+                            .replace(/[^a-z0-9]/gi, '')
+                            .toLowerCase()
+                        )
+                      }
+                      className="w-full px-3 py-2 rounded font-mono"
+                      style={{
+                        background: '#0B0E11',
+                        border: '1px solid #2B3139',
+                        color: '#EAECEF',
+                      }}
+                      placeholder="请输入6位内测码"
+                      maxLength={6}
+                      required={betaMode}
+                    />
+                    <p className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                      内测码由6位字母数字组成，区分大小写
+                    </p>
+                  </div>
+                )}
 
-              <div className="space-y-3">
-                <div className="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                    {t('authStep1Title', language)}
-                  </p>
-                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                    {t('authStep1Desc', language)}
+                {error && (
+                  <div
+                    className="text-sm px-3 py-2 rounded"
+                    style={{
+                      background: 'var(--binance-red-bg)',
+                      color: 'var(--binance-red)',
+                    }}
+                  >
+                    {error}
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={loading || (betaMode && !betaCode.trim())}
+                  className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  style={{
+                    background: 'var(--brand-yellow)',
+                    color: 'var(--brand-black)',
+                  }}
+                >
+                  {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="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                    {t('authStep2Title', language)}
-                  </p>
-                  <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
-                    {t('authStep2Desc', language)}
-                  </p>
-                  
-                  {qrCodeURL && (
+                <div className="space-y-3">
+                  <div
+                    className="p-3 rounded"
+                    style={{
+                      background: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                    }}
+                  >
+                    <p
+                      className="text-sm font-semibold mb-2"
+                      style={{ color: 'var(--brand-light-gray)' }}
+                    >
+                      {t('authStep1Title', language)}
+                    </p>
+                    <p
+                      className="text-xs"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {t('authStep1Desc', language)}
+                    </p>
+                  </div>
+
+                  <div
+                    className="p-3 rounded"
+                    style={{
+                      background: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                    }}
+                  >
+                    <p
+                      className="text-sm font-semibold mb-2"
+                      style={{ color: 'var(--brand-light-gray)' }}
+                    >
+                      {t('authStep2Title', language)}
+                    </p>
+                    <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
+                      {t('authStep2Desc', 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-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" />
+                      <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: 'var(--panel-bg-hover)',
+                            color: 'var(--brand-light-gray)',
+                          }}
+                        >
+                          {otpSecret}
+                        </code>
+                        <button
+                          onClick={() => copyToClipboard(otpSecret)}
+                          className="px-2 py-1 text-xs rounded"
+                          style={{
+                            background: 'var(--brand-yellow)',
+                            color: 'var(--brand-black)',
+                          }}
+                        >
+                          {t('copy', language)}
+                        </button>
                       </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: 'var(--panel-bg-hover)', color: 'var(--brand-light-gray)' }}>
-                        {otpSecret}
-                      </code>
-                      <button
-                        onClick={() => copyToClipboard(otpSecret)}
-                        className="px-2 py-1 text-xs rounded"
-                        style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
-                      >
-                        {t('copy', language)}
-                      </button>
-                    </div>
+                  </div>
+
+                  <div
+                    className="p-3 rounded"
+                    style={{
+                      background: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                    }}
+                  >
+                    <p
+                      className="text-sm font-semibold mb-2"
+                      style={{ color: 'var(--brand-light-gray)' }}
+                    >
+                      {t('authStep3Title', language)}
+                    </p>
+                    <p
+                      className="text-xs"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      {t('authStep3Desc', language)}
+                    </p>
                   </div>
                 </div>
 
-                <div className="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
-                    {t('authStep3Title', language)}
-                  </p>
-                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                    {t('authStep3Desc', 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: 'var(--brand-light-gray)' }}>
-                  {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: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
-                  placeholder={t('otpPlaceholder', language)}
-                  maxLength={6}
-                  required
-                />
-              </div>
-
-              {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
-                  {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: 'var(--panel-bg-hover)', color: 'var(--text-secondary)' }}
-                >
-                  {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"
+                  onClick={handleSetupComplete}
+                  className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
                   style={{ background: '#F0B90B', color: '#000' }}
                 >
-                  {loading ? t('loading', language) : t('completeRegistration', language)}
+                  {t('setupCompleteContinue', language)}
                 </button>
               </div>
-            </form>
-          )}
-        </div>
+            )}
 
-        {/* Login Link */}
-        {step === 'register' && (
-          <div className="text-center mt-6">
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              已有账户？{' '}
-              <button
-                onClick={() => {
-                  window.history.pushState({}, '', '/login');
-                  window.dispatchEvent(new PopStateEvent('popstate'));
-                }}
-                className="font-semibold hover:underline transition-colors"
-                style={{ color: 'var(--brand-yellow)' }}
-              >
-                立即登录
-              </button>
-            </p>
+            {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: 'var(--brand-light-gray)' }}
+                  >
+                    {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: 'var(--brand-black)',
+                      border: '1px solid var(--panel-border)',
+                      color: 'var(--brand-light-gray)',
+                    }}
+                    placeholder={t('otpPlaceholder', language)}
+                    maxLength={6}
+                    required
+                  />
+                </div>
+
+                {error && (
+                  <div
+                    className="text-sm px-3 py-2 rounded"
+                    style={{
+                      background: 'var(--binance-red-bg)',
+                      color: 'var(--binance-red)',
+                    }}
+                  >
+                    {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: 'var(--panel-bg-hover)',
+                      color: 'var(--text-secondary)',
+                    }}
+                  >
+                    {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: 'var(--text-secondary)' }}>
+                已有账户？{' '}
+                <button
+                  onClick={() => {
+                    window.history.pushState({}, '', '/login')
+                    window.dispatchEvent(new PopStateEvent('popstate'))
+                  }}
+                  className="font-semibold hover:underline transition-colors"
+                  style={{ color: 'var(--brand-yellow)' }}
+                >
+                  立即登录
+                </button>
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </div>
-  );
+  )
 }

web/src/components/TraderConfigModal.tsx

@@ -1,52 +1,52 @@
-import { useState, useEffect } from 'react';
-import type { AIModel, Exchange, CreateTraderRequest } from '../types';
-import { useLanguage } from '../contexts/LanguageContext';
-import { t } from '../i18n/translations';
+import { useState, useEffect } from 'react'
+import type { AIModel, Exchange, CreateTraderRequest } from '../types'
+import { useLanguage } from '../contexts/LanguageContext'
+import { t } from '../i18n/translations'
 
 // 提取下划线后面的名称部分
 function getShortName(fullName: string): string {
-  const parts = fullName.split('_');
-  return parts.length > 1 ? parts[parts.length - 1] : fullName;
+  const parts = fullName.split('_')
+  return parts.length > 1 ? parts[parts.length - 1] : fullName
 }
 
 interface TraderConfigData {
-  trader_id?: string;
-  trader_name: string;
-  ai_model: string;
-  exchange_id: string;
-  btc_eth_leverage: number;
-  altcoin_leverage: number;
-  trading_symbols: string;
-  custom_prompt: string;
-  override_base_prompt: boolean;
-  system_prompt_template: string;
-  is_cross_margin: boolean;
-  use_coin_pool: boolean;
-  use_oi_top: boolean;
-  initial_balance: number;
-  scan_interval_minutes: number;
+  trader_id?: string
+  trader_name: string
+  ai_model: string
+  exchange_id: string
+  btc_eth_leverage: number
+  altcoin_leverage: number
+  trading_symbols: string
+  custom_prompt: string
+  override_base_prompt: boolean
+  system_prompt_template: string
+  is_cross_margin: boolean
+  use_coin_pool: boolean
+  use_oi_top: boolean
+  initial_balance: number
+  scan_interval_minutes: number
 }
 
 interface TraderConfigModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  traderData?: TraderConfigData | null;
-  isEditMode?: boolean;
-  availableModels?: AIModel[];
-  availableExchanges?: Exchange[];
-  onSave?: (data: CreateTraderRequest) => Promise<void>;
+  isOpen: boolean
+  onClose: () => void
+  traderData?: TraderConfigData | null
+  isEditMode?: boolean
+  availableModels?: AIModel[]
+  availableExchanges?: Exchange[]
+  onSave?: (data: CreateTraderRequest) => Promise<void>
 }
 
-export function TraderConfigModal({ 
-  isOpen, 
-  onClose, 
-  traderData, 
+export function TraderConfigModal({
+  isOpen,
+  onClose,
+  traderData,
   isEditMode = false,
   availableModels = [],
   availableExchanges = [],
-  onSave 
+  onSave,
 }: TraderConfigModalProps) {
-  const { language } = useLanguage();
+  const { language } = useLanguage()
   const [formData, setFormData] = useState<TraderConfigData>({
     trader_name: '',
     ai_model: '',
@@ -62,20 +62,25 @@ export function TraderConfigModal({
     use_oi_top: false,
     initial_balance: 1000,
     scan_interval_minutes: 3,
-  });
-  const [isSaving, setIsSaving] = useState(false);
-  const [availableCoins, setAvailableCoins] = useState<string[]>([]);
-  const [selectedCoins, setSelectedCoins] = useState<string[]>([]);
-  const [showCoinSelector, setShowCoinSelector] = useState(false);
-  const [promptTemplates, setPromptTemplates] = useState<{name: string}[]>([]);
+  })
+  const [isSaving, setIsSaving] = useState(false)
+  const [availableCoins, setAvailableCoins] = useState<string[]>([])
+  const [selectedCoins, setSelectedCoins] = useState<string[]>([])
+  const [showCoinSelector, setShowCoinSelector] = useState(false)
+  const [promptTemplates, setPromptTemplates] = useState<{ name: string }[]>([])
+  const [isFetchingBalance, setIsFetchingBalance] = useState(false)
+  const [balanceFetchError, setBalanceFetchError] = useState<string>('')
 
   useEffect(() => {
     if (traderData) {
-      setFormData(traderData);
+      setFormData(traderData)
       // 设置已选择的币种
       if (traderData.trading_symbols) {
-        const coins = traderData.trading_symbols.split(',').map(s => s.trim()).filter(s => s);
-        setSelectedCoins(coins);
+        const coins = traderData.trading_symbols
+          .split(',')
+          .map((s) => s.trim())
+          .filter((s) => s)
+        setSelectedCoins(coins)
       }
     } else if (!isEditMode) {
       setFormData({
@@ -93,85 +98,135 @@ export function TraderConfigModal({
         use_oi_top: false,
         initial_balance: 1000,
         scan_interval_minutes: 3,
-      });
+      })
     }
     // 确保旧数据也有默认的 system_prompt_template
     if (traderData && !traderData.system_prompt_template) {
-      setFormData(prev => ({
+      setFormData((prev) => ({
         ...prev,
-        system_prompt_template: 'default'
-      }));
+        system_prompt_template: 'default',
+      }))
     }
-  }, [traderData, isEditMode, availableModels, availableExchanges]);
+  }, [traderData, isEditMode, availableModels, availableExchanges])
 
   // 获取系统配置中的币种列表
   useEffect(() => {
     const fetchConfig = async () => {
       try {
-        const response = await fetch('/api/config');
-        const config = await response.json();
+        const response = await fetch('/api/config')
+        const config = await response.json()
         if (config.default_coins) {
-          setAvailableCoins(config.default_coins);
+          setAvailableCoins(config.default_coins)
         }
       } catch (error) {
-        console.error('Failed to fetch config:', error);
+        console.error('Failed to fetch config:', error)
         // 使用默认币种列表
-        setAvailableCoins(['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT', 'XRPUSDT', 'DOGEUSDT', 'ADAUSDT']);
+        setAvailableCoins([
+          'BTCUSDT',
+          'ETHUSDT',
+          'SOLUSDT',
+          'BNBUSDT',
+          'XRPUSDT',
+          'DOGEUSDT',
+          'ADAUSDT',
+        ])
       }
-    };
-    fetchConfig();
-  }, []);
+    }
+    fetchConfig()
+  }, [])
 
   // 获取系统提示词模板列表
   useEffect(() => {
     const fetchPromptTemplates = async () => {
       try {
-        const response = await fetch('/api/prompt-templates');
-        const data = await response.json();
+        const response = await fetch('/api/prompt-templates')
+        const data = await response.json()
         if (data.templates) {
-          setPromptTemplates(data.templates);
+          setPromptTemplates(data.templates)
         }
       } catch (error) {
-        console.error('Failed to fetch prompt templates:', error);
+        console.error('Failed to fetch prompt templates:', error)
         // 使用默认模板列表
-        setPromptTemplates([{name: 'default'}, {name: 'aggressive'}]);
+        setPromptTemplates([{ name: 'default' }, { name: 'aggressive' }])
       }
-    };
-    fetchPromptTemplates();
-  }, []);
+    }
+    fetchPromptTemplates()
+  }, [])
 
   // 当选择的币种改变时，更新输入框
   useEffect(() => {
-    const symbolsString = selectedCoins.join(',');
-    setFormData(prev => ({ ...prev, trading_symbols: symbolsString }));
-  }, [selectedCoins]);
+    const symbolsString = selectedCoins.join(',')
+    setFormData((prev) => ({ ...prev, trading_symbols: symbolsString }))
+  }, [selectedCoins])
 
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   const handleInputChange = (field: keyof TraderConfigData, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    
+    setFormData((prev) => ({ ...prev, [field]: value }))
+
     // 如果是直接编辑trading_symbols，同步更新selectedCoins
     if (field === 'trading_symbols') {
-      const coins = value.split(',').map((s: string) => s.trim()).filter((s: string) => s);
-      setSelectedCoins(coins);
+      const coins = value
+        .split(',')
+        .map((s: string) => s.trim())
+        .filter((s: string) => s)
+      setSelectedCoins(coins)
+    }
+  }
+
+  const handleCoinToggle = (coin: string) => {
+    setSelectedCoins((prev) => {
+      if (prev.includes(coin)) {
+        return prev.filter((c) => c !== coin)
+      } else {
+        return [...prev, coin]
+      }
+    })
+  }
+
+  const handleFetchCurrentBalance = async () => {
+    if (!isEditMode || !traderData?.trader_id) {
+      setBalanceFetchError('只有在编辑模式下才能获取当前余额');
+      return;
+    }
+
+    setIsFetchingBalance(true);
+    setBalanceFetchError('');
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/account?trader_id=${traderData.trader_id}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('获取账户余额失败');
+      }
+
+      const data = await response.json();
+
+      // total_equity = 当前账户净值（包含未实现盈亏）
+      // 这应该作为新的初始余额
+      const currentBalance = data.total_equity || data.balance || 0;
+
+      setFormData(prev => ({ ...prev, initial_balance: currentBalance }));
+
+      // 显示成功提示
+      console.log('已获取当前余额:', currentBalance);
+    } catch (error) {
+      console.error('获取余额失败:', error);
+      setBalanceFetchError('获取余额失败，请检查网络连接');
+    } finally {
+      setIsFetchingBalance(false);
     }
   };
 
-  const handleCoinToggle = (coin: string) => {
-    setSelectedCoins(prev => {
-      if (prev.includes(coin)) {
-        return prev.filter(c => c !== coin);
-      } else {
-        return [...prev, coin];
-      }
-    });
-  };
-
   const handleSave = async () => {
-    if (!onSave) return;
+    if (!onSave) return
 
-    setIsSaving(true);
+    setIsSaving(true)
     try {
       const saveData: CreateTraderRequest = {
         name: formData.trader_name,
@@ -188,19 +243,19 @@ export function TraderConfigModal({
         use_oi_top: formData.use_oi_top,
         initial_balance: formData.initial_balance,
         scan_interval_minutes: formData.scan_interval_minutes,
-      };
-      await onSave(saveData);
-      onClose();
+      }
+      await onSave(saveData)
+      onClose()
     } catch (error) {
-      console.error('保存失败:', error);
+      console.error('保存失败:', error)
     } finally {
-      setIsSaving(false);
+      setIsSaving(false)
     }
-  };
+  }
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
-      <div 
+      <div
         className="bg-[#1E2329] border border-[#2B3139] rounded-xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto"
         onClick={(e) => e.stopPropagation()}
       >
@@ -236,24 +291,32 @@ export function TraderConfigModal({
             </h3>
             <div className="space-y-4">
               <div>
-                <label className="text-sm text-[#EAECEF] block mb-2">交易员名称</label>
+                <label className="text-sm text-[#EAECEF] block mb-2">
+                  交易员名称
+                </label>
                 <input
                   type="text"
                   value={formData.trader_name}
-                  onChange={(e) => handleInputChange('trader_name', e.target.value)}
+                  onChange={(e) =>
+                    handleInputChange('trader_name', e.target.value)
+                  }
                   className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                   placeholder="请输入交易员名称"
                 />
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">AI模型</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    AI模型
+                  </label>
                   <select
                     value={formData.ai_model}
-                    onChange={(e) => handleInputChange('ai_model', e.target.value)}
+                    onChange={(e) =>
+                      handleInputChange('ai_model', e.target.value)
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                   >
-                    {availableModels.map(model => (
+                    {availableModels.map((model) => (
                       <option key={model.id} value={model.id}>
                         {getShortName(model.name || model.id).toUpperCase()}
                       </option>
@@ -261,15 +324,21 @@ export function TraderConfigModal({
                   </select>
                 </div>
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">交易所</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    交易所
+                  </label>
                   <select
                     value={formData.exchange_id}
-                    onChange={(e) => handleInputChange('exchange_id', e.target.value)}
+                    onChange={(e) =>
+                      handleInputChange('exchange_id', e.target.value)
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                   >
-                    {availableExchanges.map(exchange => (
+                    {availableExchanges.map((exchange) => (
                       <option key={exchange.id} value={exchange.id}>
-                        {getShortName(exchange.name || exchange.id).toUpperCase()}
+                        {getShortName(
+                          exchange.name || exchange.id
+                        ).toUpperCase()}
                       </option>
                     ))}
                   </select>
@@ -287,14 +356,16 @@ export function TraderConfigModal({
               {/* 第一行：保证金模式和初始余额 */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">保证金模式</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    保证金模式
+                  </label>
                   <div className="flex gap-2">
                     <button
                       type="button"
                       onClick={() => handleInputChange('is_cross_margin', true)}
                       className={`flex-1 px-3 py-2 rounded text-sm ${
-                        formData.is_cross_margin 
-                          ? 'bg-[#F0B90B] text-black' 
+                        formData.is_cross_margin
+                          ? 'bg-[#F0B90B] text-black'
                           : 'bg-[#0B0E11] text-[#848E9C] border border-[#2B3139]'
                       }`}
                     >
@@ -302,10 +373,12 @@ export function TraderConfigModal({
                     </button>
                     <button
                       type="button"
-                      onClick={() => handleInputChange('is_cross_margin', false)}
+                      onClick={() =>
+                        handleInputChange('is_cross_margin', false)
+                      }
                       className={`flex-1 px-3 py-2 rounded text-sm ${
-                        !formData.is_cross_margin 
-                          ? 'bg-[#F0B90B] text-black' 
+                        !formData.is_cross_margin
+                          ? 'bg-[#F0B90B] text-black'
                           : 'bg-[#0B0E11] text-[#848E9C] border border-[#2B3139]'
                       }`}
                     >
@@ -314,32 +387,75 @@ export function TraderConfigModal({
                   </div>
                 </div>
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">初始余额 ($)</label>
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm text-[#EAECEF]">
+                      初始余额 ($)
+                      {!isEditMode && <span className="text-[#F0B90B] ml-1">*</span>}
+                    </label>
+                    {isEditMode && (
+                      <button
+                        type="button"
+                        onClick={handleFetchCurrentBalance}
+                        disabled={isFetchingBalance}
+                        className="px-3 py-1 text-xs bg-[#F0B90B] text-black rounded hover:bg-[#E1A706] transition-colors disabled:bg-[#848E9C] disabled:cursor-not-allowed"
+                      >
+                        {isFetchingBalance ? '获取中...' : '获取当前余额'}
+                      </button>
+                    )}
+                  </div>
                   <input
                     type="number"
                     value={formData.initial_balance}
-                    onChange={(e) => handleInputChange('initial_balance', Number(e.target.value))}
+                    onChange={(e) =>
+                      handleInputChange(
+                        'initial_balance',
+                        Number(e.target.value)
+                      )
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                     min="100"
-                    step="100"
+                    step="0.01"
                   />
+                  {!isEditMode && (
+                    <p className="text-xs text-[#F0B90B] mt-1 flex items-center gap-1">
+                      <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>
+                      请输入您交易所账户的当前实际余额。如果输入不准确，P&L统计将会错误。
+                    </p>
+                  )}
+                  {isEditMode && (
+                    <p className="text-xs text-[#848E9C] mt-1">
+                      点击"获取当前余额"按钮可自动获取您交易所账户的当前净值
+                    </p>
+                  )}
+                  {balanceFetchError && (
+                    <p className="text-xs text-red-500 mt-1">{balanceFetchError}</p>
+                  )}
                 </div>
               </div>
 
               {/* 第二行：AI 扫描决策间隔 */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">{t('aiScanInterval', language)}</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    {t('aiScanInterval', language)}
+                  </label>
                   <input
                     type="number"
                     value={formData.scan_interval_minutes}
-                    onChange={(e) => handleInputChange('scan_interval_minutes', Number(e.target.value))}
+                    onChange={(e) =>
+                      handleInputChange(
+                        'scan_interval_minutes',
+                        Number(e.target.value)
+                      )
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                     min="1"
                     max="60"
                     step="1"
                   />
-                  <p className="text-xs text-gray-500 mt-1">{t('scanIntervalRecommend', language)}</p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    {t('scanIntervalRecommend', language)}
+                  </p>
                 </div>
                 <div></div>
               </div>
@@ -347,22 +463,36 @@ export function TraderConfigModal({
               {/* 第三行：杠杆设置 */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">BTC/ETH 杠杆</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    BTC/ETH 杠杆
+                  </label>
                   <input
                     type="number"
                     value={formData.btc_eth_leverage}
-                    onChange={(e) => handleInputChange('btc_eth_leverage', Number(e.target.value))}
+                    onChange={(e) =>
+                      handleInputChange(
+                        'btc_eth_leverage',
+                        Number(e.target.value)
+                      )
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                     min="1"
                     max="125"
                   />
                 </div>
                 <div>
-                  <label className="text-sm text-[#EAECEF] block mb-2">山寨币杠杆</label>
+                  <label className="text-sm text-[#EAECEF] block mb-2">
+                    山寨币杠杆
+                  </label>
                   <input
                     type="number"
                     value={formData.altcoin_leverage}
-                    onChange={(e) => handleInputChange('altcoin_leverage', Number(e.target.value))}
+                    onChange={(e) =>
+                      handleInputChange(
+                        'altcoin_leverage',
+                        Number(e.target.value)
+                      )
+                    }
                     className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                     min="1"
                     max="75"
@@ -373,7 +503,9 @@ export function TraderConfigModal({
               {/* 第三行：交易币种 */}
               <div>
                 <div className="flex items-center justify-between mb-2">
-                  <label className="text-sm text-[#EAECEF]">交易币种 (用逗号分隔，留空使用默认)</label>
+                  <label className="text-sm text-[#EAECEF]">
+                    交易币种 (用逗号分隔，留空使用默认)
+                  </label>
                   <button
                     type="button"
                     onClick={() => setShowCoinSelector(!showCoinSelector)}
@@ -385,17 +517,21 @@ export function TraderConfigModal({
                 <input
                   type="text"
                   value={formData.trading_symbols}
-                  onChange={(e) => handleInputChange('trading_symbols', e.target.value)}
+                  onChange={(e) =>
+                    handleInputChange('trading_symbols', e.target.value)
+                  }
                   className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                   placeholder="例如: BTCUSDT,ETHUSDT,ADAUSDT"
                 />
-                
+
                 {/* 币种选择器 */}
                 {showCoinSelector && (
                   <div className="mt-3 p-3 bg-[#0B0E11] border border-[#2B3139] rounded">
-                    <div className="text-xs text-[#848E9C] mb-2">点击选择币种：</div>
+                    <div className="text-xs text-[#848E9C] mb-2">
+                      点击选择币种：
+                    </div>
                     <div className="flex flex-wrap gap-2">
-                      {availableCoins.map(coin => (
+                      {availableCoins.map((coin) => (
                         <button
                           key={coin}
                           type="button"
@@ -426,19 +562,27 @@ export function TraderConfigModal({
                 <input
                   type="checkbox"
                   checked={formData.use_coin_pool}
-                  onChange={(e) => handleInputChange('use_coin_pool', e.target.checked)}
+                  onChange={(e) =>
+                    handleInputChange('use_coin_pool', e.target.checked)
+                  }
                   className="w-4 h-4"
                 />
-                <label className="text-sm text-[#EAECEF]">使用 Coin Pool 信号</label>
+                <label className="text-sm text-[#EAECEF]">
+                  使用 Coin Pool 信号
+                </label>
               </div>
               <div className="flex items-center gap-3">
                 <input
                   type="checkbox"
                   checked={formData.use_oi_top}
-                  onChange={(e) => handleInputChange('use_oi_top', e.target.checked)}
+                  onChange={(e) =>
+                    handleInputChange('use_oi_top', e.target.checked)
+                  }
                   className="w-4 h-4"
                 />
-                <label className="text-sm text-[#EAECEF]">使用 OI Top 信号</label>
+                <label className="text-sm text-[#EAECEF]">
+                  使用 OI Top 信号
+                </label>
               </div>
             </div>
           </div>
@@ -451,17 +595,24 @@ export function TraderConfigModal({
             <div className="space-y-4">
               {/* 系统提示词模板选择 */}
               <div>
-                <label className="text-sm text-[#EAECEF] block mb-2">系统提示词模板</label>
+                <label className="text-sm text-[#EAECEF] block mb-2">
+                  系统提示词模板
+                </label>
                 <select
                   value={formData.system_prompt_template}
-                  onChange={(e) => handleInputChange('system_prompt_template', e.target.value)}
+                  onChange={(e) =>
+                    handleInputChange('system_prompt_template', e.target.value)
+                  }
                   className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none"
                 >
-                  {promptTemplates.map(template => (
+                  {promptTemplates.map((template) => (
                     <option key={template.name} value={template.name}>
-                      {template.name === 'default' ? 'Default (默认稳健)' :
-                       template.name === 'aggressive' ? 'Aggressive (激进)' :
-                       template.name.charAt(0).toUpperCase() + template.name.slice(1)}
+                      {template.name === 'default'
+                        ? 'Default (默认稳健)'
+                        : template.name === 'aggressive'
+                          ? 'Aggressive (激进)'
+                          : template.name.charAt(0).toUpperCase() +
+                            template.name.slice(1)}
                     </option>
                   ))}
                 </select>
@@ -474,21 +625,47 @@ export function TraderConfigModal({
                 <input
                   type="checkbox"
                   checked={formData.override_base_prompt}
-                  onChange={(e) => handleInputChange('override_base_prompt', e.target.checked)}
+                  onChange={(e) =>
+                    handleInputChange('override_base_prompt', e.target.checked)
+                  }
                   className="w-4 h-4"
                 />
                 <label className="text-sm text-[#EAECEF]">覆盖默认提示词</label>
-                <span className="text-xs text-[#F0B90B] inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg> 启用后将完全替换默认策略</span>
+                <span className="text-xs text-[#F0B90B] inline-flex items-center gap-1">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="w-3.5 h-3.5"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+                    <line x1="12" x2="12" y1="9" y2="13" />
+                    <line x1="12" x2="12.01" y1="17" y2="17" />
+                  </svg>{' '}
+                  启用后将完全替换默认策略
+                </span>
               </div>
               <div>
                 <label className="text-sm text-[#EAECEF] block mb-2">
-                  {formData.override_base_prompt ? '自定义提示词' : '附加提示词'}
+                  {formData.override_base_prompt
+                    ? '自定义提示词'
+                    : '附加提示词'}
                 </label>
                 <textarea
                   value={formData.custom_prompt}
-                  onChange={(e) => handleInputChange('custom_prompt', e.target.value)}
+                  onChange={(e) =>
+                    handleInputChange('custom_prompt', e.target.value)
+                  }
                   className="w-full px-3 py-2 bg-[#0B0E11] border border-[#2B3139] rounded text-[#EAECEF] focus:border-[#F0B90B] focus:outline-none h-24 resize-none"
-                  placeholder={formData.override_base_prompt ? "输入完整的交易策略提示词..." : "输入额外的交易策略提示..."}
+                  placeholder={
+                    formData.override_base_prompt
+                      ? '输入完整的交易策略提示词...'
+                      : '输入额外的交易策略提示...'
+                  }
                 />
               </div>
             </div>
@@ -506,14 +683,19 @@ export function TraderConfigModal({
           {onSave && (
             <button
               onClick={handleSave}
-              disabled={isSaving || !formData.trader_name || !formData.ai_model || !formData.exchange_id}
+              disabled={
+                isSaving ||
+                !formData.trader_name ||
+                !formData.ai_model ||
+                !formData.exchange_id
+              }
               className="px-8 py-3 bg-gradient-to-r from-[#F0B90B] to-[#E1A706] text-black rounded-lg hover:from-[#E1A706] hover:to-[#D4951E] transition-all duration-200 disabled:bg-[#848E9C] disabled:cursor-not-allowed font-medium shadow-lg"
             >
-              {isSaving ? '保存中...' : (isEditMode ? '保存修改' : '创建交易员')}
+              {isSaving ? '保存中...' : isEditMode ? '保存修改' : '创建交易员'}
             </button>
           )}
         </div>
       </div>
     </div>
-  );
+  )
 }

web/src/components/TraderConfigViewModal.tsx

@@ -1,57 +1,70 @@
-import { useState } from 'react';
-import type { TraderConfigData } from '../types';
+import { useState } from 'react'
+import type { TraderConfigData } from '../types'
 
 // 提取下划线后面的名称部分
 function getShortName(fullName: string): string {
-  const parts = fullName.split('_');
-  return parts.length > 1 ? parts[parts.length - 1] : fullName;
+  const parts = fullName.split('_')
+  return parts.length > 1 ? parts[parts.length - 1] : fullName
 }
 
-
 interface TraderConfigViewModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  traderData?: TraderConfigData | null;
+  isOpen: boolean
+  onClose: () => void
+  traderData?: TraderConfigData | null
 }
 
-export function TraderConfigViewModal({ 
-  isOpen, 
-  onClose, 
-  traderData
+export function TraderConfigViewModal({
+  isOpen,
+  onClose,
+  traderData,
 }: TraderConfigViewModalProps) {
-  const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [copiedField, setCopiedField] = useState<string | null>(null)
 
-  if (!isOpen || !traderData) return null;
+  if (!isOpen || !traderData) return null
 
   const copyToClipboard = async (text: string, fieldName: string) => {
     try {
-      await navigator.clipboard.writeText(text);
-      setCopiedField(fieldName);
-      setTimeout(() => setCopiedField(null), 2000);
+      await navigator.clipboard.writeText(text)
+      setCopiedField(fieldName)
+      setTimeout(() => setCopiedField(null), 2000)
     } catch (error) {
-      console.error('Failed to copy:', error);
+      console.error('Failed to copy:', error)
     }
-  };
+  }
 
-  const CopyButton = ({ text, fieldName }: { text: string; fieldName: string }) => (
+  const CopyButton = ({
+    text,
+    fieldName,
+  }: {
+    text: string
+    fieldName: string
+  }) => (
     <button
       onClick={() => copyToClipboard(text, fieldName)}
       className="ml-2 px-2 py-1 text-xs rounded transition-all duration-200 hover:scale-105"
       style={{
-        background: copiedField === fieldName ? 'rgba(14, 203, 129, 0.1)' : 'rgba(240, 185, 11, 0.1)',
+        background:
+          copiedField === fieldName
+            ? 'rgba(14, 203, 129, 0.1)'
+            : 'rgba(240, 185, 11, 0.1)',
         color: copiedField === fieldName ? '#0ECB81' : '#F0B90B',
-        border: `1px solid ${copiedField === fieldName ? 'rgba(14, 203, 129, 0.3)' : 'rgba(240, 185, 11, 0.3)'}`
+        border: `1px solid ${copiedField === fieldName ? 'rgba(14, 203, 129, 0.3)' : 'rgba(240, 185, 11, 0.3)'}`,
       }}
     >
       {copiedField === fieldName ? '✓ 已复制' : '📋 复制'}
     </button>
-  );
+  )
 
-  const InfoRow = ({ label, value, copyable = false, fieldName = '' }: {
-    label: string;
-    value: string | number | boolean;
-    copyable?: boolean;
-    fieldName?: string;
+  const InfoRow = ({
+    label,
+    value,
+    copyable = false,
+    fieldName = '',
+  }: {
+    label: string
+    value: string | number | boolean
+    copyable?: boolean
+    fieldName?: string
   }) => (
     <div className="flex justify-between items-start py-2 border-b border-[#2B3139] last:border-b-0">
       <span className="text-sm text-[#848E9C] font-medium">{label}</span>
@@ -64,11 +77,11 @@ export function TraderConfigViewModal({
         )}
       </div>
     </div>
-  );
+  )
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
-      <div 
+      <div
         className="bg-[#1E2329] border border-[#2B3139] rounded-xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"
         onClick={(e) => e.stopPropagation()}
       >
@@ -79,9 +92,7 @@ export function TraderConfigViewModal({
               <span className="text-lg">👁️</span>
             </div>
             <div>
-              <h2 className="text-xl font-bold text-[#EAECEF]">
-                交易员配置
-              </h2>
+              <h2 className="text-xl font-bold text-[#EAECEF]">交易员配置</h2>
               <p className="text-sm text-[#848E9C] mt-1">
                 {traderData.trader_name} 的配置信息
               </p>
@@ -91,9 +102,10 @@ export function TraderConfigViewModal({
             {/* Running Status */}
             <div
               className="px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1"
-              style={traderData.is_running
-                ? { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81' }
-                : { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
+              style={
+                traderData.is_running
+                  ? { background: 'rgba(14, 203, 129, 0.1)', color: '#0ECB81' }
+                  : { background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }
               }
             >
               <span>{traderData.is_running ? '●' : '○'}</span>
@@ -116,11 +128,30 @@ export function TraderConfigViewModal({
               🤖 基础信息
             </h3>
             <div className="space-y-3">
-              <InfoRow label="交易员ID" value={traderData.trader_id || ''} copyable fieldName="trader_id" />
-              <InfoRow label="交易员名称" value={traderData.trader_name} copyable fieldName="trader_name" />
-              <InfoRow label="AI模型" value={getShortName(traderData.ai_model).toUpperCase()} />
-              <InfoRow label="交易所" value={getShortName(traderData.exchange_id).toUpperCase()} />
-              <InfoRow label="初始余额" value={`$${traderData.initial_balance.toLocaleString()}`} />
+              <InfoRow
+                label="交易员ID"
+                value={traderData.trader_id || ''}
+                copyable
+                fieldName="trader_id"
+              />
+              <InfoRow
+                label="交易员名称"
+                value={traderData.trader_name}
+                copyable
+                fieldName="trader_name"
+              />
+              <InfoRow
+                label="AI模型"
+                value={getShortName(traderData.ai_model).toUpperCase()}
+              />
+              <InfoRow
+                label="交易所"
+                value={getShortName(traderData.exchange_id).toUpperCase()}
+              />
+              <InfoRow
+                label="初始余额"
+                value={`$${traderData.initial_balance.toLocaleString()}`}
+              />
             </div>
           </div>
 
@@ -130,14 +161,23 @@ export function TraderConfigViewModal({
               ⚖️ 交易配置
             </h3>
             <div className="space-y-3">
-              <InfoRow label="保证金模式" value={traderData.is_cross_margin ? '全仓' : '逐仓'} />
-              <InfoRow label="BTC/ETH 杠杆" value={`${traderData.btc_eth_leverage}x`} />
-              <InfoRow label="山寨币杠杆" value={`${traderData.altcoin_leverage}x`} />
-              <InfoRow 
-                label="交易币种" 
-                value={traderData.trading_symbols || '使用默认币种'} 
-                copyable 
-                fieldName="trading_symbols" 
+              <InfoRow
+                label="保证金模式"
+                value={traderData.is_cross_margin ? '全仓' : '逐仓'}
+              />
+              <InfoRow
+                label="BTC/ETH 杠杆"
+                value={`${traderData.btc_eth_leverage}x`}
+              />
+              <InfoRow
+                label="山寨币杠杆"
+                value={`${traderData.altcoin_leverage}x`}
+              />
+              <InfoRow
+                label="交易币种"
+                value={traderData.trading_symbols || '使用默认币种'}
+                copyable
+                fieldName="trading_symbols"
               />
             </div>
           </div>
@@ -148,7 +188,10 @@ export function TraderConfigViewModal({
               📡 信号源配置
             </h3>
             <div className="space-y-3">
-              <InfoRow label="Coin Pool 信号" value={traderData.use_coin_pool} />
+              <InfoRow
+                label="Coin Pool 信号"
+                value={traderData.use_coin_pool}
+              />
               <InfoRow label="OI Top 信号" value={traderData.use_oi_top} />
             </div>
           </div>
@@ -160,29 +203,41 @@ export function TraderConfigViewModal({
                 💬 交易策略提示词
               </h3>
               {traderData.custom_prompt && (
-                <CopyButton text={traderData.custom_prompt} fieldName="custom_prompt" />
+                <CopyButton
+                  text={traderData.custom_prompt}
+                  fieldName="custom_prompt"
+                />
               )}
             </div>
             <div className="space-y-3">
-              <InfoRow label="覆盖默认提示词" value={traderData.override_base_prompt} />
+              <InfoRow
+                label="覆盖默认提示词"
+                value={traderData.override_base_prompt}
+              />
               {traderData.custom_prompt ? (
                 <div>
                   <div className="text-sm text-[#848E9C] mb-2">
-                    {traderData.override_base_prompt ? '自定义提示词' : '附加提示词'}：
+                    {traderData.override_base_prompt
+                      ? '自定义提示词'
+                      : '附加提示词'}
+                    ：
                   </div>
-                  <div 
+                  <div
                     className="p-3 rounded border text-sm text-[#EAECEF] font-mono leading-relaxed max-h-48 overflow-y-auto"
-                    style={{ 
-                      background: '#0B0E11', 
+                    style={{
+                      background: '#0B0E11',
                       border: '1px solid #2B3139',
-                      whiteSpace: 'pre-wrap'
+                      whiteSpace: 'pre-wrap',
                     }}
                   >
                     {traderData.custom_prompt}
                   </div>
                 </div>
               ) : (
-                <div className="text-sm text-[#848E9C] italic p-3 rounded border" style={{ border: '1px solid #2B3139' }}>
+                <div
+                  className="text-sm text-[#848E9C] italic p-3 rounded border"
+                  style={{ border: '1px solid #2B3139' }}
+                >
                   未设置自定义提示词，使用系统默认策略
                 </div>
               )}
@@ -199,7 +254,12 @@ export function TraderConfigViewModal({
             关闭
           </button>
           <button
-            onClick={() => copyToClipboard(JSON.stringify(traderData, null, 2), 'full_config')}
+            onClick={() =>
+              copyToClipboard(
+                JSON.stringify(traderData, null, 2),
+                'full_config'
+              )
+            }
             className="px-6 py-3 bg-gradient-to-r from-[#F0B90B] to-[#E1A706] text-black rounded-lg hover:from-[#E1A706] hover:to-[#D4951E] transition-all duration-200 font-medium shadow-lg"
           >
             {copiedField === 'full_config' ? '✓ 已复制配置' : '📋 复制完整配置'}
@@ -207,5 +267,5 @@ export function TraderConfigViewModal({
         </div>
       </div>
     </div>
-  );
-}
+  )
+}

web/src/components/Typewriter.tsx

@@ -21,16 +21,25 @@ export default function Typewriter({
   const charIndexRef = useRef(0)
   const timerRef = useRef<number | null>(null)
   const blinkRef = useRef<number | null>(null)
-  const sanitizedLines = useMemo(() => lines.map((l) => String(l ?? '')), [lines])
+  const sanitizedLines = useMemo(
+    () => lines.map((l) => String(l ?? '')),
+    [lines]
+  )
 
   useEffect(() => {
+    // 重置状态
+    lineIndexRef.current = 0
+    charIndexRef.current = 0
+    setTypedLines([''])
+
     function typeNext() {
       const currentLine = sanitizedLines[lineIndexRef.current] ?? ''
       if (charIndexRef.current < currentLine.length) {
+        const ch = currentLine.charAt(charIndexRef.current)
         setTypedLines((prev) => {
           const next = [...prev]
-          const ch = currentLine.charAt(charIndexRef.current)
-          next[next.length - 1] = (next[next.length - 1] || '') + ch
+          const lastIndex = next.length - 1
+          next[lastIndex] = (next[lastIndex] ?? '') + ch
           return next
         })
         charIndexRef.current += 1
@@ -49,7 +58,8 @@ export default function Typewriter({
       }
     }
 
-    typeNext()
+    // 延迟一帧开始打字,确保状态已重置
+    timerRef.current = window.setTimeout(typeNext, 0)
 
     // 光标闪烁
     blinkRef.current = window.setInterval(() => {
@@ -60,9 +70,12 @@ export default function Typewriter({
       if (timerRef.current) window.clearTimeout(timerRef.current)
       if (blinkRef.current) window.clearInterval(blinkRef.current)
     }
-  }, [lines, typingSpeed, lineDelay])
+  }, [sanitizedLines, typingSpeed, lineDelay])
 
-  const displayText = useMemo(() => typedLines.join('\n').replace(/undefined/g, ''), [typedLines])
+  const displayText = useMemo(
+    () => typedLines.join('\n').replace(/undefined/g, ''),
+    [typedLines]
+  )
 
   return (
     <pre className={className} style={{ whiteSpace: 'pre-wrap', ...style }}>

web/src/components/landing/AboutSection.tsx

@@ -10,18 +10,18 @@ interface AboutSectionProps {
 
 export default function AboutSection({ language }: AboutSectionProps) {
   return (
-    <AnimatedSection id='about' backgroundColor='var(--brand-dark-gray)'>
-      <div className='max-w-7xl mx-auto'>
-        <div className='grid lg:grid-cols-2 gap-12 items-center'>
+    <AnimatedSection id="about" backgroundColor="var(--brand-dark-gray)">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
           <motion.div
-            className='space-y-6'
+            className="space-y-6"
             initial={{ opacity: 0, x: -50 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
             <motion.div
-              className='inline-flex items-center gap-2 px-4 py-2 rounded-full'
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-full"
               style={{
                 background: 'rgba(240, 185, 11, 0.1)',
                 border: '1px solid rgba(240, 185, 11, 0.2)',
@@ -29,11 +29,11 @@ export default function AboutSection({ language }: AboutSectionProps) {
               whileHover={{ scale: 1.05 }}
             >
               <Target
-                className='w-4 h-4'
+                className="w-4 h-4"
                 style={{ color: 'var(--brand-yellow)' }}
               />
               <span
-                className='text-sm font-semibold'
+                className="text-sm font-semibold"
                 style={{ color: 'var(--brand-yellow)' }}
               >
                 {t('aboutNofx', language)}
@@ -41,45 +41,49 @@ export default function AboutSection({ language }: AboutSectionProps) {
             </motion.div>
 
             <h2
-              className='text-4xl font-bold'
+              className="text-4xl font-bold"
               style={{ color: 'var(--brand-light-gray)' }}
             >
               {t('whatIsNofx', language)}
             </h2>
             <p
-              className='text-lg leading-relaxed'
+              className="text-lg leading-relaxed"
               style={{ color: 'var(--text-secondary)' }}
             >
-              {t('nofxNotAnotherBot', language)} {t('nofxDescription1', language)} {t('nofxDescription2', language)}
+              {t('nofxNotAnotherBot', language)}{' '}
+              {t('nofxDescription1', language)}{' '}
+              {t('nofxDescription2', language)}
             </p>
             <p
-              className='text-lg leading-relaxed'
+              className="text-lg leading-relaxed"
               style={{ color: 'var(--text-secondary)' }}
             >
-              {t('nofxDescription3', language)} {t('nofxDescription4', language)} {t('nofxDescription5', language)}
+              {t('nofxDescription3', language)}{' '}
+              {t('nofxDescription4', language)}{' '}
+              {t('nofxDescription5', language)}
             </p>
             <motion.div
-              className='flex items-center gap-3 pt-4'
+              className="flex items-center gap-3 pt-4"
               whileHover={{ x: 5 }}
             >
               <div
-                className='w-12 h-12 rounded-full flex items-center justify-center'
+                className="w-12 h-12 rounded-full flex items-center justify-center"
                 style={{ background: 'rgba(240, 185, 11, 0.1)' }}
               >
                 <Shield
-                  className='w-6 h-6'
+                  className="w-6 h-6"
                   style={{ color: 'var(--brand-yellow)' }}
                 />
               </div>
               <div>
                 <div
-                  className='font-semibold'
+                  className="font-semibold"
                   style={{ color: 'var(--brand-light-gray)' }}
                 >
                   {t('youFullControl', language)}
                 </div>
                 <div
-                  className='text-sm'
+                  className="text-sm"
                   style={{ color: 'var(--text-secondary)' }}
                 >
                   {t('fullControlDesc', language)}
@@ -88,9 +92,9 @@ export default function AboutSection({ language }: AboutSectionProps) {
             </motion.div>
           </motion.div>
 
-          <div className='relative'>
+          <div className="relative">
             <div
-              className='rounded-2xl p-8'
+              className="rounded-2xl p-8"
               style={{
                 background: 'var(--brand-black)',
                 border: '1px solid var(--panel-border)',
@@ -108,7 +112,7 @@ export default function AboutSection({ language }: AboutSectionProps) {
                 ]}
                 typingSpeed={70}
                 lineDelay={900}
-                className='text-sm font-mono'
+                className="text-sm font-mono"
                 style={{
                   color: '#00FF88',
                   textShadow: '0 0 8px rgba(0,255,136,0.4)',
@@ -121,4 +125,3 @@ export default function AboutSection({ language }: AboutSectionProps) {
     </AnimatedSection>
   )
 }
-

web/src/components/landing/AnimatedSection.tsx

@@ -17,7 +17,7 @@ export default function AnimatedSection({
     <motion.section
       id={id}
       ref={ref}
-      className='py-20 px-4'
+      className="py-20 px-4"
       style={{ background: backgroundColor }}
       initial={{ opacity: 0 }}
       animate={isInView ? { opacity: 1 } : { opacity: 0 }}
@@ -27,4 +27,3 @@ export default function AnimatedSection({
     </motion.section>
   )
 }
-

web/src/components/landing/CommunitySection.tsx

@@ -2,31 +2,40 @@ import { motion } from 'framer-motion'
 import AnimatedSection from './AnimatedSection'
 
 interface CardProps {
-  quote: string;
-  authorName: string;
-  handle: string;
-  avatarUrl: string;
-  tweetUrl: string;
-  delay: number;
+  quote: string
+  authorName: string
+  handle: string
+  avatarUrl: string
+  tweetUrl: string
+  delay: number
 }
 
 function TestimonialCard({ quote, authorName, delay }: CardProps) {
   return (
     <motion.div
-      className='p-6 rounded-xl'
-      style={{ background: 'var(--brand-dark-gray)', border: '1px solid rgba(240, 185, 11, 0.1)' }}
+      className="p-6 rounded-xl"
+      style={{
+        background: 'var(--brand-dark-gray)',
+        border: '1px solid rgba(240, 185, 11, 0.1)',
+      }}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ delay }}
       whileHover={{ scale: 1.05 }}
     >
-      <p className='text-lg mb-4' style={{ color: 'var(--brand-light-gray)' }}>
+      <p className="text-lg mb-4" style={{ color: 'var(--brand-light-gray)' }}>
         "{quote}"
       </p>
-      <div className='flex items-center gap-2'>
-        <div className='w-8 h-8 rounded-full' style={{ background: 'var(--binance-yellow)' }} />
-        <span className='text-sm font-semibold' style={{ color: 'var(--text-secondary)' }}>
+      <div className="flex items-center gap-2">
+        <div
+          className="w-8 h-8 rounded-full"
+          style={{ background: 'var(--binance-yellow)' }}
+        />
+        <span
+          className="text-sm font-semibold"
+          style={{ color: 'var(--text-secondary)' }}
+        >
           {authorName}
         </span>
       </div>
@@ -35,7 +44,9 @@ function TestimonialCard({ quote, authorName, delay }: CardProps) {
 }
 
 export default function CommunitySection() {
-  const staggerContainer = { animate: { transition: { staggerChildren: 0.1 } } }
+  const staggerContainer = {
+    animate: { transition: { staggerChildren: 0.1 } },
+  }
 
   // 推特内容整合（保持原三列布局，超出自动换行）
   const items: CardProps[] = [
@@ -74,12 +85,12 @@ export default function CommunitySection() {
 
   return (
     <AnimatedSection>
-      <div className='max-w-7xl mx-auto'>
+      <div className="max-w-7xl mx-auto">
         <motion.div
-          className='grid md:grid-cols-3 gap-6'
+          className="grid md:grid-cols-3 gap-6"
           variants={staggerContainer}
-          initial='initial'
-          whileInView='animate'
+          initial="initial"
+          whileInView="animate"
           viewport={{ once: true }}
         >
           {items.map((item, idx) => (

web/src/components/landing/FeaturesSection.tsx

@@ -10,61 +10,78 @@ interface FeaturesSectionProps {
 
 export default function FeaturesSection({ language }: FeaturesSectionProps) {
   return (
-    <AnimatedSection id='features'>
-      <div className='max-w-7xl mx-auto'>
-        <motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
+    <AnimatedSection id="features">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+        >
           <motion.div
-            className='inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6'
-            style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6"
+            style={{
+              background: 'rgba(240, 185, 11, 0.1)',
+              border: '1px solid rgba(240, 185, 11, 0.2)',
+            }}
             whileHover={{ scale: 1.05 }}
           >
-            <Rocket className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
-            <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
+            <Rocket
+              className="w-4 h-4"
+              style={{ color: 'var(--brand-yellow)' }}
+            />
+            <span
+              className="text-sm font-semibold"
+              style={{ color: 'var(--brand-yellow)' }}
+            >
               {t('coreFeatures', language)}
             </span>
           </motion.div>
-          <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
+          <h2
+            className="text-4xl font-bold mb-4"
+            style={{ color: 'var(--brand-light-gray)' }}
+          >
             {t('whyChooseNofx', language)}
           </h2>
-          <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
             {t('openCommunityDriven', language)}
           </p>
         </motion.div>
 
-        <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto'>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
           <CryptoFeatureCard
-            icon={<Code className='w-8 h-8' />}
+            icon={<Code className="w-8 h-8" />}
             title={t('openSourceSelfHosted', language)}
             description={t('openSourceDesc', language)}
             features={[
               t('openSourceFeatures1', language),
               t('openSourceFeatures2', language),
               t('openSourceFeatures3', language),
-              t('openSourceFeatures4', language)
+              t('openSourceFeatures4', language),
             ]}
             delay={0}
           />
           <CryptoFeatureCard
-            icon={<Cpu className='w-8 h-8' />}
+            icon={<Cpu className="w-8 h-8" />}
             title={t('multiAgentCompetition', language)}
             description={t('multiAgentDesc', language)}
             features={[
               t('multiAgentFeatures1', language),
               t('multiAgentFeatures2', language),
               t('multiAgentFeatures3', language),
-              t('multiAgentFeatures4', language)
+              t('multiAgentFeatures4', language),
             ]}
             delay={0.1}
           />
           <CryptoFeatureCard
-            icon={<Lock className='w-8 h-8' />}
+            icon={<Lock className="w-8 h-8" />}
             title={t('secureReliableTrading', language)}
             description={t('secureDesc', language)}
             features={[
               t('secureFeatures1', language),
               t('secureFeatures2', language),
               t('secureFeatures3', language),
-              t('secureFeatures4', language)
+              t('secureFeatures4', language),
             ]}
             delay={0.2}
           />
@@ -73,4 +90,3 @@ export default function FeaturesSection({ language }: FeaturesSectionProps) {
     </AnimatedSection>
   )
 }
-

web/src/components/landing/FooterSection.tsx

@@ -6,57 +6,62 @@ interface FooterSectionProps {
 
 export default function FooterSection({ language }: FooterSectionProps) {
   return (
-    <footer style={{ borderTop: '1px solid var(--panel-border)', background: 'var(--brand-dark-gray)' }}>
-      <div className='max-w-[1200px] mx-auto px-6 py-10'>
+    <footer
+      style={{
+        borderTop: '1px solid var(--panel-border)',
+        background: 'var(--brand-dark-gray)',
+      }}
+    >
+      <div className="max-w-[1200px] mx-auto px-6 py-10">
         {/* Brand */}
-        <div className='flex items-center gap-3 mb-8'>
-          <img src='/icons/nofx.svg' alt='NOFX Logo' className='w-8 h-8' />
+        <div className="flex items-center gap-3 mb-8">
+          <img src="/icons/nofx.svg" alt="NOFX Logo" className="w-8 h-8" />
           <div>
-            <div className='text-lg font-bold' style={{ color: '#EAECEF' }}>
+            <div className="text-lg font-bold" style={{ color: '#EAECEF' }}>
               NOFX
             </div>
-            <div className='text-xs' style={{ color: '#848E9C' }}>
+            <div className="text-xs" style={{ color: '#848E9C' }}>
               {t('futureStandardAI', language)}
             </div>
           </div>
         </div>
 
         {/* Multi-link columns */}
-        <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-8'>
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 gap-8">
           <div>
             <h3
-              className='text-sm font-semibold mb-3'
+              className="text-sm font-semibold mb-3"
               style={{ color: '#EAECEF' }}
             >
               {t('links', language)}
             </h3>
-            <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
+            <ul className="space-y-2 text-sm" style={{ color: '#848E9C' }}>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://github.com/tinkle-community/nofx'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://github.com/tinkle-community/nofx"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   GitHub
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://t.me/nofx_dev_community'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://t.me/nofx_dev_community"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Telegram
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://x.com/nofx_ai'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://x.com/nofx_ai"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   X (Twitter)
                 </a>
@@ -66,38 +71,38 @@ export default function FooterSection({ language }: FooterSectionProps) {
 
           <div>
             <h3
-              className='text-sm font-semibold mb-3'
+              className="text-sm font-semibold mb-3"
               style={{ color: '#EAECEF' }}
             >
               {t('resources', language)}
             </h3>
-            <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
+            <ul className="space-y-2 text-sm" style={{ color: '#848E9C' }}>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://github.com/tinkle-community/nofx/blob/main/README.md'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://github.com/tinkle-community/nofx/blob/main/README.md"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   {t('documentation', language)}
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://github.com/tinkle-community/nofx/issues'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://github.com/tinkle-community/nofx/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Issues
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://github.com/tinkle-community/nofx/pulls'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://github.com/tinkle-community/nofx/pulls"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Pull Requests
                 </a>
@@ -107,50 +112,53 @@ export default function FooterSection({ language }: FooterSectionProps) {
 
           <div>
             <h3
-              className='text-sm font-semibold mb-3'
+              className="text-sm font-semibold mb-3"
               style={{ color: '#EAECEF' }}
             >
               {t('supporters', language)}
             </h3>
-            <ul className='space-y-2 text-sm' style={{ color: '#848E9C' }}>
+            <ul className="space-y-2 text-sm" style={{ color: '#848E9C' }}>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://asterdex.com/'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://asterdex.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Aster DEX
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://www.binance.com/'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://www.binance.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Binance
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://hyperliquid.xyz/'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://hyperliquid.xyz/"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   Hyperliquid
                 </a>
               </li>
               <li>
                 <a
-                  className='hover:text-[#F0B90B]'
-                  href='https://amber.ac/'
-                  target='_blank'
-                  rel='noopener noreferrer'
+                  className="hover:text-[#F0B90B]"
+                  href="https://amber.ac/"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  Amber.ac <span className='opacity-70'>{t('strategicInvestment', language)}</span>
+                  Amber.ac{' '}
+                  <span className="opacity-70">
+                    {t('strategicInvestment', language)}
+                  </span>
                 </a>
               </li>
             </ul>
@@ -159,11 +167,14 @@ export default function FooterSection({ language }: FooterSectionProps) {
 
         {/* Bottom note (kept subtle) */}
         <div
-          className='pt-6 mt-8 text-center text-xs'
-          style={{ color: 'var(--text-tertiary)', borderTop: '1px solid var(--panel-border)' }}
+          className="pt-6 mt-8 text-center text-xs"
+          style={{
+            color: 'var(--text-tertiary)',
+            borderTop: '1px solid var(--panel-border)',
+          }}
         >
           <p>{t('footerTitle', language)}</p>
-          <p className='mt-1'>{t('footerWarning', language)}</p>
+          <p className="mt-1">{t('footerWarning', language)}</p>
         </div>
       </div>
     </footer>

web/src/components/landing/HeaderBar.tsx

@@ -16,7 +16,17 @@ interface HeaderBarProps {
   onPageChange?: (page: string) => void
 }
 
-export default function HeaderBar({ isLoggedIn = false, isHomePage = false, currentPage, language = 'zh' as Language, onLanguageChange, user, onLogout, isAdminMode = false, onPageChange }: HeaderBarProps) {
+export default function HeaderBar({
+  isLoggedIn = false,
+  isHomePage = false,
+  currentPage,
+  language = 'zh' as Language,
+  onLanguageChange,
+  user,
+  onLogout,
+  isAdminMode = false,
+  onPageChange,
+}: HeaderBarProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false)
   const [userDropdownOpen, setUserDropdownOpen] = useState(false)
@@ -26,10 +36,16 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
   // Close dropdown when clicking outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setLanguageDropdownOpen(false)
       }
-      if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) {
+      if (
+        userDropdownRef.current &&
+        !userDropdownRef.current.contains(event.target as Node)
+      ) {
         setUserDropdownOpen(false)
       }
     }
@@ -41,231 +57,311 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
   }, [])
 
   return (
-    <nav className='fixed top-0 w-full z-50 header-bar'>
-      <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
-        <div className='flex items-center justify-between h-16'>
+    <nav className="fixed top-0 w-full z-50 header-bar">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <a href='/' className='flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer'>
-            <img src='/icons/nofx.svg' alt='NOFX Logo' className='w-8 h-8' />
-            <span className='text-xl font-bold' style={{ color: 'var(--brand-yellow)' }}>
+          <a
+            href="/"
+            className="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer"
+          >
+            <img src="/icons/nofx.svg" alt="NOFX Logo" className="w-8 h-8" />
+            <span
+              className="text-xl font-bold"
+              style={{ color: 'var(--brand-yellow)' }}
+            >
               NOFX
             </span>
-            <span className='text-sm hidden sm:block' style={{ color: 'var(--text-secondary)' }}>
+            <span
+              className="text-sm hidden sm:block"
+              style={{ color: 'var(--text-secondary)' }}
+            >
               Agentic Trading OS
             </span>
           </a>
 
           {/* Desktop Menu */}
-          <div className='hidden md:flex items-center justify-between flex-1 ml-8'>
+          <div className="hidden md:flex items-center justify-between flex-1 ml-8">
             {/* Left Side - Navigation Tabs */}
-            <div className='flex items-center gap-4'>
+            <div className="flex items-center gap-4">
               {isLoggedIn ? (
                 // Main app navigation when logged in
                 <>
                   <button
                     onClick={() => {
-                      console.log('实时 button clicked, onPageChange:', onPageChange);
-                      onPageChange?.('competition');
+                      console.log(
+                        '实时 button clicked, onPageChange:',
+                        onPageChange
+                      )
+                      onPageChange?.('competition')
                     }}
-                    className='text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+                    className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                     style={{
-                      color: currentPage === 'competition' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                      color:
+                        currentPage === 'competition'
+                          ? 'var(--brand-yellow)'
+                          : 'var(--brand-light-gray)',
                       padding: '8px 16px',
                       borderRadius: '8px',
-                      position: 'relative'
+                      position: 'relative',
                     }}
                     onMouseEnter={(e) => {
                       if (currentPage !== 'competition') {
-                        e.currentTarget.style.color = 'var(--brand-yellow)';
+                        e.currentTarget.style.color = 'var(--brand-yellow)'
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (currentPage !== 'competition') {
-                        e.currentTarget.style.color = 'var(--brand-light-gray)';
+                        e.currentTarget.style.color = 'var(--brand-light-gray)'
                       }
                     }}
                   >
                     {/* Background for selected state */}
                     {currentPage === 'competition' && (
-                      <span 
+                      <span
                         className="absolute inset-0 rounded-lg"
                         style={{
                           background: 'rgba(240, 185, 11, 0.15)',
-                          zIndex: -1
+                          zIndex: -1,
                         }}
                       />
                     )}
-                    
+
                     {t('realtimeNav', language)}
                   </button>
-                  
+
                   <button
                     onClick={() => {
-                      console.log('配置 button clicked, onPageChange:', onPageChange);
-                      onPageChange?.('traders');
+                      console.log(
+                        '配置 button clicked, onPageChange:',
+                        onPageChange
+                      )
+                      onPageChange?.('traders')
                     }}
-                    className='text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+                    className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                     style={{
-                      color: currentPage === 'traders' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                      color:
+                        currentPage === 'traders'
+                          ? 'var(--brand-yellow)'
+                          : 'var(--brand-light-gray)',
                       padding: '8px 16px',
                       borderRadius: '8px',
-                      position: 'relative'
+                      position: 'relative',
                     }}
                     onMouseEnter={(e) => {
                       if (currentPage !== 'traders') {
-                        e.currentTarget.style.color = 'var(--brand-yellow)';
+                        e.currentTarget.style.color = 'var(--brand-yellow)'
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (currentPage !== 'traders') {
-                        e.currentTarget.style.color = 'var(--brand-light-gray)';
+                        e.currentTarget.style.color = 'var(--brand-light-gray)'
                       }
                     }}
                   >
                     {/* Background for selected state */}
                     {currentPage === 'traders' && (
-                      <span 
+                      <span
                         className="absolute inset-0 rounded-lg"
                         style={{
                           background: 'rgba(240, 185, 11, 0.15)',
-                          zIndex: -1
+                          zIndex: -1,
                         }}
                       />
                     )}
-                    
+
                     {t('configNav', language)}
                   </button>
-                  
+
                   <button
                     onClick={() => {
-                      console.log('看板 button clicked, onPageChange:', onPageChange);
-                      onPageChange?.('trader');
+                      console.log(
+                        '看板 button clicked, onPageChange:',
+                        onPageChange
+                      )
+                      onPageChange?.('trader')
                     }}
-                    className='text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+                    className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                     style={{
-                      color: currentPage === 'trader' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                      color:
+                        currentPage === 'trader'
+                          ? 'var(--brand-yellow)'
+                          : 'var(--brand-light-gray)',
                       padding: '8px 16px',
                       borderRadius: '8px',
-                      position: 'relative'
+                      position: 'relative',
                     }}
                     onMouseEnter={(e) => {
                       if (currentPage !== 'trader') {
-                        e.currentTarget.style.color = 'var(--brand-yellow)';
+                        e.currentTarget.style.color = 'var(--brand-yellow)'
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (currentPage !== 'trader') {
-                        e.currentTarget.style.color = 'var(--brand-light-gray)';
+                        e.currentTarget.style.color = 'var(--brand-light-gray)'
                       }
                     }}
                   >
                     {/* Background for selected state */}
                     {currentPage === 'trader' && (
-                      <span 
+                      <span
                         className="absolute inset-0 rounded-lg"
                         style={{
                           background: 'rgba(240, 185, 11, 0.15)',
-                          zIndex: -1
+                          zIndex: -1,
                         }}
                       />
                     )}
-                    
+
                     {t('dashboardNav', language)}
                   </button>
                 </>
               ) : (
                 // Landing page navigation when not logged in
                 <a
-                  href='/competition'
-                  className='text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+                  href="/competition"
+                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                   style={{
-                    color: currentPage === 'competition' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                    color:
+                      currentPage === 'competition'
+                        ? 'var(--brand-yellow)'
+                        : 'var(--brand-light-gray)',
                     padding: '8px 16px',
                     borderRadius: '8px',
-                    position: 'relative'
+                    position: 'relative',
                   }}
                   onMouseEnter={(e) => {
                     if (currentPage !== 'competition') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)';
+                      e.currentTarget.style.color = 'var(--brand-yellow)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (currentPage !== 'competition') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)';
+                      e.currentTarget.style.color = 'var(--brand-light-gray)'
                     }
                   }}
                 >
                   {/* Background for selected state */}
                   {currentPage === 'competition' && (
-                    <span 
+                    <span
                       className="absolute inset-0 rounded-lg"
                       style={{
                         background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1
+                        zIndex: -1,
                       }}
                     />
                   )}
-                  
+
                   {t('realtimeNav', language)}
                 </a>
               )}
             </div>
-            
+
             {/* Right Side - Original Navigation Items and Login */}
-            <div className='flex items-center gap-6'>
+            <div className="flex items-center gap-6">
               {/* Only show original navigation items on home page */}
-              {isHomePage && [
-                { key: 'features', label: t('features', language) },
-                { key: 'howItWorks', label: t('howItWorks', language) },
-                { key: 'GitHub', label: 'GitHub' },
-                { key: 'community', label: t('community', language) }
-              ].map((item) => (
-                <a
-                  key={item.key}
-                  href={
-                    item.key === 'GitHub'
-                      ? 'https://github.com/tinkle-community/nofx'
-                      : item.key === 'community'
-                      ? 'https://t.me/nofx_dev_community'
-                      : `#${item.key === 'features' ? 'features' : 'how-it-works'}`
-                  }
-                  target={item.key === 'GitHub' || item.key === 'community' ? '_blank' : undefined}
-                  rel={item.key === 'GitHub' || item.key === 'community' ? 'noopener noreferrer' : undefined}
-                  className='text-sm transition-colors relative group'
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {item.label}
-                  <span
-                    className='absolute -bottom-1 left-0 w-0 h-0.5 group-hover:w-full transition-all duration-300'
-                    style={{ background: 'var(--brand-yellow)' }}
-                  />
-                </a>
-              ))}
+              {isHomePage &&
+                [
+                  { key: 'features', label: t('features', language) },
+                  { key: 'howItWorks', label: t('howItWorks', language) },
+                  { key: 'GitHub', label: 'GitHub' },
+                  { key: 'community', label: t('community', language) },
+                ].map((item) => (
+                  <a
+                    key={item.key}
+                    href={
+                      item.key === 'GitHub'
+                        ? 'https://github.com/tinkle-community/nofx'
+                        : item.key === 'community'
+                          ? 'https://t.me/nofx_dev_community'
+                          : `#${item.key === 'features' ? 'features' : 'how-it-works'}`
+                    }
+                    target={
+                      item.key === 'GitHub' || item.key === 'community'
+                        ? '_blank'
+                        : undefined
+                    }
+                    rel={
+                      item.key === 'GitHub' || item.key === 'community'
+                        ? 'noopener noreferrer'
+                        : undefined
+                    }
+                    className="text-sm transition-colors relative group"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {item.label}
+                    <span
+                      className="absolute -bottom-1 left-0 w-0 h-0.5 group-hover:w-full transition-all duration-300"
+                      style={{ background: 'var(--brand-yellow)' }}
+                    />
+                  </a>
+                ))}
 
               {/* User Info and Actions */}
               {isLoggedIn && user ? (
-                <div className='flex items-center gap-3'>
+                <div className="flex items-center gap-3">
                   {/* User Info with Dropdown */}
-                  <div className='relative' ref={userDropdownRef}>
+                  <div className="relative" ref={userDropdownRef}>
                     <button
                       onClick={() => setUserDropdownOpen(!userDropdownOpen)}
-                      className='flex items-center gap-2 px-3 py-2 rounded transition-colors'
-                      style={{ background: 'var(--panel-bg)', border: '1px solid var(--panel-border)' }}
-                      onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'}
-                      onMouseLeave={(e) => e.currentTarget.style.background = 'var(--panel-bg)'}
+                      className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
+                      style={{
+                        background: 'var(--panel-bg)',
+                        border: '1px solid var(--panel-border)',
+                      }}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.background =
+                          'rgba(255, 255, 255, 0.05)')
+                      }
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.background = 'var(--panel-bg)')
+                      }
                     >
-                      <div className='w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold' style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}>
+                      <div
+                        className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
+                        style={{
+                          background: 'var(--brand-yellow)',
+                          color: 'var(--brand-black)',
+                        }}
+                      >
                         {user.email[0].toUpperCase()}
                       </div>
-                      <span className='text-sm' style={{ color: 'var(--brand-light-gray)' }}>{user.email}</span>
-                      <ChevronDown className='w-4 h-4' style={{ color: 'var(--brand-light-gray)' }} />
+                      <span
+                        className="text-sm"
+                        style={{ color: 'var(--brand-light-gray)' }}
+                      >
+                        {user.email}
+                      </span>
+                      <ChevronDown
+                        className="w-4 h-4"
+                        style={{ color: 'var(--brand-light-gray)' }}
+                      />
                     </button>
-                    
+
                     {userDropdownOpen && (
-                      <div className='absolute right-0 top-full mt-2 w-48 rounded-lg shadow-lg overflow-hidden z-50' style={{ background: 'var(--brand-dark-gray)', border: '1px solid var(--panel-border)' }}>
-                        <div className='px-3 py-2 border-b' style={{ borderColor: 'var(--panel-border)' }}>
-                          <div className='text-xs' style={{ color: 'var(--text-secondary)' }}>{t('loggedInAs', language)}</div>
-                          <div className='text-sm font-medium' style={{ color: 'var(--brand-light-gray)' }}>{user.email}</div>
+                      <div
+                        className="absolute right-0 top-full mt-2 w-48 rounded-lg shadow-lg overflow-hidden z-50"
+                        style={{
+                          background: 'var(--brand-dark-gray)',
+                          border: '1px solid var(--panel-border)',
+                        }}
+                      >
+                        <div
+                          className="px-3 py-2 border-b"
+                          style={{ borderColor: 'var(--panel-border)' }}
+                        >
+                          <div
+                            className="text-xs"
+                            style={{ color: 'var(--text-secondary)' }}
+                          >
+                            {t('loggedInAs', language)}
+                          </div>
+                          <div
+                            className="text-sm font-medium"
+                            style={{ color: 'var(--brand-light-gray)' }}
+                          >
+                            {user.email}
+                          </div>
                         </div>
                         {!isAdminMode && onLogout && (
                           <button
@@ -273,10 +369,13 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                               onLogout()
                               setUserDropdownOpen(false)
                             }}
-                            className='w-full px-3 py-2 text-sm font-semibold transition-colors hover:opacity-80 text-center'
-                            style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}
+                            className="w-full px-3 py-2 text-sm font-semibold transition-colors hover:opacity-80 text-center"
+                            style={{
+                              background: 'var(--binance-red-bg)',
+                              color: 'var(--binance-red)',
+                            }}
                           >
-{t('exitLogin', language)}
+                            {t('exitLogin', language)}
                           </button>
                         )}
                       </div>
@@ -285,43 +384,58 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                 </div>
               ) : (
                 /* Show login/register buttons when not logged in and not on login/register pages */
-                currentPage !== 'login' && currentPage !== 'register' && (
-                  <div className='flex items-center gap-3'>
+                currentPage !== 'login' &&
+                currentPage !== 'register' && (
+                  <div className="flex items-center gap-3">
                     <a
-                      href='/login'
-                      className='px-3 py-2 text-sm font-medium transition-colors rounded'
+                      href="/login"
+                      className="px-3 py-2 text-sm font-medium transition-colors rounded"
                       style={{ color: 'var(--brand-light-gray)' }}
                     >
-{t('signIn', language)}
+                      {t('signIn', language)}
                     </a>
                     <a
-                      href='/register'
-                      className='px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90'
-                      style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
+                      href="/register"
+                      className="px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90"
+                      style={{
+                        background: 'var(--brand-yellow)',
+                        color: 'var(--brand-black)',
+                      }}
                     >
-{t('signUp', language)}
+                      {t('signUp', language)}
                     </a>
                   </div>
                 )
               )}
-              
+
               {/* Language Toggle - Always at the rightmost */}
-              <div className='relative' ref={dropdownRef}>
+              <div className="relative" ref={dropdownRef}>
                 <button
                   onClick={() => setLanguageDropdownOpen(!languageDropdownOpen)}
-                  className='flex items-center gap-2 px-3 py-2 rounded transition-colors'
+                  className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
                   style={{ color: 'var(--brand-light-gray)' }}
-                  onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'}
-                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.background =
+                      'rgba(255, 255, 255, 0.05)')
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.background = 'transparent')
+                  }
                 >
-                  <span className='text-lg'>
+                  <span className="text-lg">
                     {language === 'zh' ? '🇨🇳' : '🇺🇸'}
                   </span>
-                  <ChevronDown className='w-4 h-4' />
+                  <ChevronDown className="w-4 h-4" />
                 </button>
-                
+
                 {languageDropdownOpen && (
-                  <div className='absolute right-0 top-full mt-2 w-32 rounded-lg shadow-lg overflow-hidden z-50' style={{ background: 'var(--brand-dark-gray)', border: '1px solid var(--panel-border)' }}>
+                  <div
+                    className="absolute right-0 top-full mt-2 w-32 rounded-lg shadow-lg overflow-hidden z-50"
+                    style={{
+                      background: 'var(--brand-dark-gray)',
+                      border: '1px solid var(--panel-border)',
+                    }}
+                  >
                     <button
                       onClick={() => {
                         onLanguageChange?.('zh')
@@ -330,13 +444,16 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                       className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
                         language === 'zh' ? '' : 'hover:opacity-80'
                       }`}
-                      style={{ 
+                      style={{
                         color: 'var(--brand-light-gray)',
-                        background: language === 'zh' ? 'rgba(240, 185, 11, 0.1)' : 'transparent'
+                        background:
+                          language === 'zh'
+                            ? 'rgba(240, 185, 11, 0.1)'
+                            : 'transparent',
                       }}
                     >
-                      <span className='text-base'>🇨🇳</span>
-                      <span className='text-sm'>中文</span>
+                      <span className="text-base">🇨🇳</span>
+                      <span className="text-sm">中文</span>
                     </button>
                     <button
                       onClick={() => {
@@ -346,13 +463,16 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                       className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
                         language === 'en' ? '' : 'hover:opacity-80'
                       }`}
-                      style={{ 
+                      style={{
                         color: 'var(--brand-light-gray)',
-                        background: language === 'en' ? 'rgba(240, 185, 11, 0.1)' : 'transparent'
+                        background:
+                          language === 'en'
+                            ? 'rgba(240, 185, 11, 0.1)'
+                            : 'transparent',
                       }}
                     >
-                      <span className='text-base'>🇺🇸</span>
-                      <span className='text-sm'>English</span>
+                      <span className="text-base">🇺🇸</span>
+                      <span className="text-sm">English</span>
                     </button>
                   </div>
                 )}
@@ -363,11 +483,15 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
           {/* Mobile Menu Button */}
           <motion.button
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className='md:hidden'
+            className="md:hidden"
             style={{ color: 'var(--brand-light-gray)' }}
             whileTap={{ scale: 0.9 }}
           >
-            {mobileMenuOpen ? <X className='w-6 h-6' /> : <Menu className='w-6 h-6' />}
+            {mobileMenuOpen ? (
+              <X className="w-6 h-6" />
+            ) : (
+              <Menu className="w-6 h-6" />
+            )}
           </motion.button>
         </div>
       </div>
@@ -375,65 +499,81 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
       {/* Mobile Menu */}
       <motion.div
         initial={false}
-        animate={mobileMenuOpen ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }}
+        animate={
+          mobileMenuOpen
+            ? { height: 'auto', opacity: 1 }
+            : { height: 0, opacity: 0 }
+        }
         transition={{ duration: 0.3 }}
-        className='md:hidden overflow-hidden'
-        style={{ background: 'var(--brand-dark-gray)', borderTop: '1px solid rgba(240, 185, 11, 0.1)' }}
+        className="md:hidden overflow-hidden"
+        style={{
+          background: 'var(--brand-dark-gray)',
+          borderTop: '1px solid rgba(240, 185, 11, 0.1)',
+        }}
       >
-        <div className='px-4 py-4 space-y-3'>
+        <div className="px-4 py-4 space-y-3">
           {/* New Navigation Tabs */}
           {isLoggedIn ? (
             <button
               onClick={() => {
-                console.log('移动端 实时 button clicked, onPageChange:', onPageChange);
+                console.log(
+                  '移动端 实时 button clicked, onPageChange:',
+                  onPageChange
+                )
                 onPageChange?.('competition')
                 setMobileMenuOpen(false)
               }}
-              className='block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+              className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
               style={{
-                color: currentPage === 'competition' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                color:
+                  currentPage === 'competition'
+                    ? 'var(--brand-yellow)'
+                    : 'var(--brand-light-gray)',
                 padding: '12px 16px',
                 borderRadius: '8px',
                 position: 'relative',
                 width: '100%',
-                textAlign: 'left'
+                textAlign: 'left',
               }}
             >
               {/* Background for selected state */}
               {currentPage === 'competition' && (
-                <span 
+                <span
                   className="absolute inset-0 rounded-lg"
                   style={{
                     background: 'rgba(240, 185, 11, 0.15)',
-                    zIndex: -1
+                    zIndex: -1,
                   }}
                 />
               )}
-              
+
               {t('realtimeNav', language)}
             </button>
           ) : (
-            <a 
-              href='/competition'
-              className='block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500'
+            <a
+              href="/competition"
+              className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
               style={{
-                color: currentPage === 'competition' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                color:
+                  currentPage === 'competition'
+                    ? 'var(--brand-yellow)'
+                    : 'var(--brand-light-gray)',
                 padding: '12px 16px',
                 borderRadius: '8px',
-                position: 'relative'
+                position: 'relative',
               }}
             >
               {/* Background for selected state */}
               {currentPage === 'competition' && (
-                <span 
+                <span
                   className="absolute inset-0 rounded-lg"
                   style={{
                     background: 'rgba(240, 185, 11, 0.15)',
-                    zIndex: -1
+                    zIndex: -1,
                   }}
                 />
               )}
-              
+
               {t('realtimeNav', language)}
             </a>
           )}
@@ -442,107 +582,135 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
             <>
               <button
                 onClick={() => {
-                  console.log('移动端 配置 button clicked, onPageChange:', onPageChange);
+                  console.log(
+                    '移动端 配置 button clicked, onPageChange:',
+                    onPageChange
+                  )
                   onPageChange?.('traders')
                   setMobileMenuOpen(false)
                 }}
-                className='block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500'
+                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
                 style={{
-                  color: currentPage === 'traders' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                  color:
+                    currentPage === 'traders'
+                      ? 'var(--brand-yellow)'
+                      : 'var(--brand-light-gray)',
                   padding: '12px 16px',
                   borderRadius: '8px',
                   position: 'relative',
                   width: '100%',
-                  textAlign: 'left'
+                  textAlign: 'left',
                 }}
               >
                 {/* Background for selected state */}
                 {currentPage === 'traders' && (
-                  <span 
+                  <span
                     className="absolute inset-0 rounded-lg"
                     style={{
                       background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1
+                      zIndex: -1,
                     }}
                   />
                 )}
-                
+
                 {t('configNav', language)}
               </button>
               <button
                 onClick={() => {
-                  console.log('移动端 看板 button clicked, onPageChange:', onPageChange);
+                  console.log(
+                    '移动端 看板 button clicked, onPageChange:',
+                    onPageChange
+                  )
                   onPageChange?.('trader')
                   setMobileMenuOpen(false)
                 }}
-                className='block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500'
+                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
                 style={{
-                  color: currentPage === 'trader' ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
+                  color:
+                    currentPage === 'trader'
+                      ? 'var(--brand-yellow)'
+                      : 'var(--brand-light-gray)',
                   padding: '12px 16px',
                   borderRadius: '8px',
                   position: 'relative',
                   width: '100%',
-                  textAlign: 'left'
+                  textAlign: 'left',
                 }}
               >
                 {/* Background for selected state */}
                 {currentPage === 'trader' && (
-                  <span 
+                  <span
                     className="absolute inset-0 rounded-lg"
                     style={{
                       background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1
+                      zIndex: -1,
                     }}
                   />
                 )}
-                
+
                 {t('dashboardNav', language)}
               </button>
             </>
           )}
-          
+
           {/* Original Navigation Items - Only on home page */}
-          {isHomePage && [
-            { key: 'features', label: t('features', language) },
-            { key: 'howItWorks', label: t('howItWorks', language) },
-            { key: 'GitHub', label: 'GitHub' },
-            { key: 'community', label: t('community', language) }
-          ].map((item) => (
-            <a 
-              key={item.key} 
-              href={
-                item.key === 'GitHub'
-                  ? 'https://github.com/tinkle-community/nofx'
-                  : item.key === 'community'
-                  ? 'https://t.me/nofx_dev_community'
-                  : `#${item.key === 'features' ? 'features' : 'how-it-works'}`
-              }
-              target={item.key === 'GitHub' || item.key === 'community' ? '_blank' : undefined}
-              rel={item.key === 'GitHub' || item.key === 'community' ? 'noopener noreferrer' : undefined}
-              className='block text-sm py-2' 
-              style={{ color: 'var(--brand-light-gray)' }}
-            >
-              {item.label}
-            </a>
-          ))}
-          
+          {isHomePage &&
+            [
+              { key: 'features', label: t('features', language) },
+              { key: 'howItWorks', label: t('howItWorks', language) },
+              { key: 'GitHub', label: 'GitHub' },
+              { key: 'community', label: t('community', language) },
+            ].map((item) => (
+              <a
+                key={item.key}
+                href={
+                  item.key === 'GitHub'
+                    ? 'https://github.com/tinkle-community/nofx'
+                    : item.key === 'community'
+                      ? 'https://t.me/nofx_dev_community'
+                      : `#${item.key === 'features' ? 'features' : 'how-it-works'}`
+                }
+                target={
+                  item.key === 'GitHub' || item.key === 'community'
+                    ? '_blank'
+                    : undefined
+                }
+                rel={
+                  item.key === 'GitHub' || item.key === 'community'
+                    ? 'noopener noreferrer'
+                    : undefined
+                }
+                className="block text-sm py-2"
+                style={{ color: 'var(--brand-light-gray)' }}
+              >
+                {item.label}
+              </a>
+            ))}
+
           {/* Language Toggle */}
-          <div className='py-2'>
-            <div className='flex items-center gap-2 mb-2'>
-              <span className='text-xs' style={{ color: 'var(--brand-light-gray)' }}>{t('language', language)}:</span>
+          <div className="py-2">
+            <div className="flex items-center gap-2 mb-2">
+              <span
+                className="text-xs"
+                style={{ color: 'var(--brand-light-gray)' }}
+              >
+                {t('language', language)}:
+              </span>
             </div>
-            <div className='space-y-1'>
+            <div className="space-y-1">
               <button
                 onClick={() => {
                   onLanguageChange?.('zh')
                   setMobileMenuOpen(false)
                 }}
                 className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
-                  language === 'zh' ? 'bg-yellow-500 text-black' : 'text-gray-400 hover:text-white'
+                  language === 'zh'
+                    ? 'bg-yellow-500 text-black'
+                    : 'text-gray-400 hover:text-white'
                 }`}
               >
-                <span className='text-lg'>🇨🇳</span>
-                <span className='text-sm'>中文</span>
+                <span className="text-lg">🇨🇳</span>
+                <span className="text-sm">中文</span>
               </button>
               <button
                 onClick={() => {
@@ -550,25 +718,49 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                   setMobileMenuOpen(false)
                 }}
                 className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
-                  language === 'en' ? 'bg-yellow-500 text-black' : 'text-gray-400 hover:text-white'
+                  language === 'en'
+                    ? 'bg-yellow-500 text-black'
+                    : 'text-gray-400 hover:text-white'
                 }`}
               >
-                <span className='text-lg'>🇺🇸</span>
-                <span className='text-sm'>English</span>
+                <span className="text-lg">🇺🇸</span>
+                <span className="text-sm">English</span>
               </button>
             </div>
           </div>
 
           {/* User info and logout for mobile when logged in */}
           {isLoggedIn && user && (
-            <div className='mt-4 pt-4' style={{ borderTop: '1px solid var(--panel-border)' }}>
-              <div className='flex items-center gap-2 px-3 py-2 mb-2 rounded' style={{ background: 'var(--panel-bg)' }}>
-                <div className='w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold' style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}>
+            <div
+              className="mt-4 pt-4"
+              style={{ borderTop: '1px solid var(--panel-border)' }}
+            >
+              <div
+                className="flex items-center gap-2 px-3 py-2 mb-2 rounded"
+                style={{ background: 'var(--panel-bg)' }}
+              >
+                <div
+                  className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
+                  style={{
+                    background: 'var(--brand-yellow)',
+                    color: 'var(--brand-black)',
+                  }}
+                >
                   {user.email[0].toUpperCase()}
                 </div>
                 <div>
-                  <div className='text-xs' style={{ color: 'var(--text-secondary)' }}>{t('loggedInAs', language)}</div>
-                  <div className='text-sm' style={{ color: 'var(--brand-light-gray)' }}>{user.email}</div>
+                  <div
+                    className="text-xs"
+                    style={{ color: 'var(--text-secondary)' }}
+                  >
+                    {t('loggedInAs', language)}
+                  </div>
+                  <div
+                    className="text-sm"
+                    style={{ color: 'var(--brand-light-gray)' }}
+                  >
+                    {user.email}
+                  </div>
                 </div>
               </div>
               {!isAdminMode && onLogout && (
@@ -577,8 +769,11 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
                     onLogout()
                     setMobileMenuOpen(false)
                   }}
-                  className='w-full px-4 py-2 rounded text-sm font-semibold transition-colors text-center'
-                  style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}
+                  className="w-full px-4 py-2 rounded text-sm font-semibold transition-colors text-center"
+                  style={{
+                    background: 'var(--binance-red-bg)',
+                    color: 'var(--binance-red)',
+                  }}
                 >
                   {t('exitLogin', language)}
                 </button>
@@ -587,29 +782,36 @@ export default function HeaderBar({ isLoggedIn = false, isHomePage = false, curr
           )}
 
           {/* Show login/register buttons when not logged in and not on login/register pages */}
-          {!isLoggedIn && currentPage !== 'login' && currentPage !== 'register' && (
-            <div className='space-y-2 mt-2'>
-              <a
-                href='/login'
-                className='block w-full px-4 py-2 rounded text-sm font-medium text-center transition-colors'
-                style={{ color: 'var(--brand-light-gray)', border: '1px solid var(--brand-light-gray)' }}
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                {t('signIn', language)}
-              </a>
-              <a
-                href='/register'
-                className='block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors'
-                style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                {t('signUp', language)}
-              </a>
-            </div>
-          )}
+          {!isLoggedIn &&
+            currentPage !== 'login' &&
+            currentPage !== 'register' && (
+              <div className="space-y-2 mt-2">
+                <a
+                  href="/login"
+                  className="block w-full px-4 py-2 rounded text-sm font-medium text-center transition-colors"
+                  style={{
+                    color: 'var(--brand-light-gray)',
+                    border: '1px solid var(--brand-light-gray)',
+                  }}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {t('signIn', language)}
+                </a>
+                <a
+                  href="/register"
+                  className="block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors"
+                  style={{
+                    background: 'var(--brand-yellow)',
+                    color: 'var(--brand-black)',
+                  }}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {t('signUp', language)}
+                </a>
+              </div>
+            )}
         </div>
       </motion.div>
     </nav>
   )
 }
-

web/src/components/landing/HeroSection.tsx

@@ -1,6 +1,8 @@
 import { motion, useScroll, useTransform, useAnimation } from 'framer-motion'
 import { Sparkles } from 'lucide-react'
 import { t, Language } from '../../i18n/translations'
+import { useGitHubStats } from '../../hooks/useGitHubStats'
+import { useCounterAnimation } from '../../hooks/useCounterAnimation'
 
 interface HeroSectionProps {
   language: Language
@@ -11,75 +13,151 @@ export default function HeroSection({ language }: HeroSectionProps) {
   const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0])
   const scale = useTransform(scrollYProgress, [0, 0.2], [1, 0.8])
   const handControls = useAnimation()
+  const { stars, daysOld, isLoading } = useGitHubStats('NoFxAiOS', 'nofx')
+
+  // 动画数字 - 仅对 stars 添加动画
+  const animatedStars = useCounterAnimation({
+    start: 0,
+    end: stars,
+    duration: 2000,
+  })
 
   const fadeInUp = {
     initial: { opacity: 0, y: 60 },
     animate: { opacity: 1, y: 0 },
     transition: { duration: 0.6, ease: [0.6, -0.05, 0.01, 0.99] },
   }
-  const staggerContainer = { animate: { transition: { staggerChildren: 0.1 } } }
+  const staggerContainer = {
+    animate: { transition: { staggerChildren: 0.1 } },
+  }
 
   return (
-    <section className='relative pt-32 pb-20 px-4'>
-      <div className='max-w-7xl mx-auto'>
-        <div className='grid lg:grid-cols-2 gap-12 items-center'>
+    <section className="relative pt-32 pb-20 px-4">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
           {/* Left Content */}
-          <motion.div className='space-y-6 relative z-10' style={{ opacity, scale }} initial='initial' animate='animate' variants={staggerContainer}>
+          <motion.div
+            className="space-y-6 relative z-10"
+            style={{ opacity, scale }}
+            initial="initial"
+            animate="animate"
+            variants={staggerContainer}
+          >
             <motion.div variants={fadeInUp}>
               <motion.div
-                className='inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6'
-                style={{ background: 'rgba(240, 185, 11, 0.1)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
-                whileHover={{ scale: 1.05, boxShadow: '0 0 20px rgba(240, 185, 11, 0.2)' }}
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6"
+                style={{
+                  background: 'rgba(240, 185, 11, 0.1)',
+                  border: '1px solid rgba(240, 185, 11, 0.2)',
+                }}
+                whileHover={{
+                  scale: 1.05,
+                  boxShadow: '0 0 20px rgba(240, 185, 11, 0.2)',
+                }}
               >
-                <Sparkles className='w-4 h-4' style={{ color: 'var(--brand-yellow)' }} />
-                <span className='text-sm font-semibold' style={{ color: 'var(--brand-yellow)' }}>
-{t('githubStarsInDays', language)}
+                <Sparkles
+                  className="w-4 h-4"
+                  style={{ color: 'var(--brand-yellow)' }}
+                />
+                <span
+                  className="text-sm font-semibold"
+                  style={{ color: 'var(--brand-yellow)' }}
+                >
+                  {isLoading ? (
+                    t('githubStarsInDays', language)
+                  ) : language === 'zh' ? (
+                    <>
+                      {daysOld} 天内{' '}
+                      <span className="inline-block tabular-nums">
+                        {(animatedStars / 1000).toFixed(1)}
+                      </span>
+                      K+ GitHub Stars
+                    </>
+                  ) : (
+                    <>
+                      <span className="inline-block tabular-nums">
+                        {(animatedStars / 1000).toFixed(1)}
+                      </span>
+                      K+ GitHub Stars in {daysOld} days
+                    </>
+                  )}
                 </span>
               </motion.div>
             </motion.div>
 
-            <h1 className='text-5xl lg:text-7xl font-bold leading-tight' style={{ color: 'var(--brand-light-gray)' }}>
+            <h1
+              className="text-5xl lg:text-7xl font-bold leading-tight"
+              style={{ color: 'var(--brand-light-gray)' }}
+            >
               {t('heroTitle1', language)}
               <br />
-              <span style={{ color: 'var(--brand-yellow)' }}>{t('heroTitle2', language)}</span>
+              <span style={{ color: 'var(--brand-yellow)' }}>
+                {t('heroTitle2', language)}
+              </span>
             </h1>
 
-            <motion.p className='text-xl leading-relaxed' style={{ color: 'var(--text-secondary)' }} variants={fadeInUp}>
+            <motion.p
+              className="text-xl leading-relaxed"
+              style={{ color: 'var(--text-secondary)' }}
+              variants={fadeInUp}
+            >
               {t('heroDescription', language)}
             </motion.p>
 
-            <div className='flex items-center gap-3 flex-wrap'>
-              <motion.a href='https://github.com/tinkle-community/nofx' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+            <div className="flex items-center gap-3 flex-wrap">
+              <motion.a
+                href="https://github.com/tinkle-community/nofx"
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ scale: 1.05 }}
+                transition={{ type: 'spring', stiffness: 400 }}
+              >
                 <img
-                  src='https://img.shields.io/github/stars/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
-                  alt='GitHub Stars'
-                  className='h-7'
+                  src="https://img.shields.io/github/stars/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A"
+                  alt="GitHub Stars"
+                  className="h-7"
                 />
               </motion.a>
-              <motion.a href='https://github.com/tinkle-community/nofx/network/members' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+              <motion.a
+                href="https://github.com/tinkle-community/nofx/network/members"
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ scale: 1.05 }}
+                transition={{ type: 'spring', stiffness: 400 }}
+              >
                 <img
-                  src='https://img.shields.io/github/forks/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
-                  alt='GitHub Forks'
-                  className='h-7'
+                  src="https://img.shields.io/github/forks/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A"
+                  alt="GitHub Forks"
+                  className="h-7"
                 />
               </motion.a>
-              <motion.a href='https://github.com/tinkle-community/nofx/graphs/contributors' target='_blank' rel='noopener noreferrer' whileHover={{ scale: 1.05 }} transition={{ type: 'spring', stiffness: 400 }}>
+              <motion.a
+                href="https://github.com/tinkle-community/nofx/graphs/contributors"
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ scale: 1.05 }}
+                transition={{ type: 'spring', stiffness: 400 }}
+              >
                 <img
-                  src='https://img.shields.io/github/contributors/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A'
-                  alt='GitHub Contributors'
-                  className='h-7'
+                  src="https://img.shields.io/github/contributors/tinkle-community/nofx?style=for-the-badge&logo=github&logoColor=white&color=F0B90B&labelColor=0A0A0A"
+                  alt="GitHub Contributors"
+                  className="h-7"
                 />
               </motion.a>
             </div>
 
-            <motion.p className='text-xs pt-4' style={{ color: 'var(--text-tertiary)' }} variants={fadeInUp}>
-{t('poweredBy', language)}
+            <motion.p
+              className="text-xs pt-4"
+              style={{ color: 'var(--text-tertiary)' }}
+              variants={fadeInUp}
+            >
+              {t('poweredBy', language)}
             </motion.p>
           </motion.div>
 
           {/* Right Visual - Interactive Robot */}
-          <div 
-            className='relative w-full cursor-pointer'
+          <div
+            className="relative w-full cursor-pointer"
             onMouseEnter={() => {
               handControls.start({
                 y: [-8, 8, -8],
@@ -88,9 +166,9 @@ export default function HeroSection({ language }: HeroSectionProps) {
                 transition: {
                   duration: 2.5,
                   repeat: Infinity,
-                  ease: "easeInOut",
-                  times: [0, 0.5, 1]
-                }
+                  ease: 'easeInOut',
+                  times: [0, 0.5, 1],
+                },
               })
             }}
             onMouseLeave={() => {
@@ -100,32 +178,32 @@ export default function HeroSection({ language }: HeroSectionProps) {
                 x: 0,
                 transition: {
                   duration: 0.6,
-                  ease: "easeOut"
-                }
+                  ease: 'easeOut',
+                },
               })
             }}
           >
             {/* Background Layer */}
-            <motion.img 
-              src='/images/hand-bg.png' 
-              alt='NOFX Platform Background' 
-              className='w-full opacity-90'
+            <motion.img
+              src="/images/hand-bg.png"
+              alt="NOFX Platform Background"
+              className="w-full opacity-90"
               style={{ opacity, scale }}
               whileHover={{ scale: 1.02 }}
               transition={{ type: 'spring', stiffness: 300 }}
             />
-            
+
             {/* Hand Layer - Animated */}
-            <motion.img 
-              src='/images/hand.png' 
-              alt='Robot Hand' 
-              className='absolute top-0 left-0 w-full'
+            <motion.img
+              src="/images/hand.png"
+              alt="Robot Hand"
+              className="absolute top-0 left-0 w-full"
               style={{ opacity }}
               animate={handControls}
               initial={{ y: 0, rotate: 0, x: 0 }}
               whileHover={{
                 scale: 1.05,
-                transition: { type: 'spring', stiffness: 400 }
+                transition: { type: 'spring', stiffness: 400 },
               }}
             />
           </div>
@@ -134,4 +212,3 @@ export default function HeroSection({ language }: HeroSectionProps) {
     </section>
   )
 }
-

web/src/components/landing/HowItWorksSection.tsx

@@ -4,20 +4,36 @@ import { t, Language } from '../../i18n/translations'
 
 function StepCard({ number, title, description, delay }: any) {
   return (
-    <motion.div className='flex gap-6 items-start' initial={{ opacity: 0, x: -50 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay }} whileHover={{ x: 10 }}>
+    <motion.div
+      className="flex gap-6 items-start"
+      initial={{ opacity: 0, x: -50 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true }}
+      transition={{ delay }}
+      whileHover={{ x: 10 }}
+    >
       <motion.div
-        className='flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center font-bold text-2xl'
-        style={{ background: 'var(--binance-yellow)', color: 'var(--brand-black)' }}
+        className="flex-shrink-0 w-14 h-14 rounded-full flex items-center justify-center font-bold text-2xl"
+        style={{
+          background: 'var(--binance-yellow)',
+          color: 'var(--brand-black)',
+        }}
         whileHover={{ scale: 1.2, rotate: 360 }}
         transition={{ type: 'spring', stiffness: 260, damping: 20 }}
       >
         {number}
       </motion.div>
       <div>
-        <h3 className='text-2xl font-semibold mb-2' style={{ color: 'var(--brand-light-gray)' }}>
+        <h3
+          className="text-2xl font-semibold mb-2"
+          style={{ color: 'var(--brand-light-gray)' }}
+        >
           {title}
         </h3>
-        <p className='text-lg leading-relaxed' style={{ color: 'var(--text-secondary)' }}>
+        <p
+          className="text-lg leading-relaxed"
+          style={{ color: 'var(--text-secondary)' }}
+        >
           {description}
         </p>
       </div>
@@ -29,46 +45,91 @@ interface HowItWorksSectionProps {
   language: Language
 }
 
-export default function HowItWorksSection({ language }: HowItWorksSectionProps) {
+export default function HowItWorksSection({
+  language,
+}: HowItWorksSectionProps) {
   return (
-    <AnimatedSection id='how-it-works' backgroundColor='var(--brand-dark-gray)'>
-      <div className='max-w-7xl mx-auto'>
-        <motion.div className='text-center mb-16' initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
-          <h2 className='text-4xl font-bold mb-4' style={{ color: 'var(--brand-light-gray)' }}>
+    <AnimatedSection id="how-it-works" backgroundColor="var(--brand-dark-gray)">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+        >
+          <h2
+            className="text-4xl font-bold mb-4"
+            style={{ color: 'var(--brand-light-gray)' }}
+          >
             {t('howToStart', language)}
           </h2>
-          <p className='text-lg' style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
             {t('fourSimpleSteps', language)}
           </p>
         </motion.div>
 
-        <div className='space-y-8'>
+        <div className="space-y-8">
           {[
-            { number: 1, title: t('step1Title', language), description: t('step1Desc', language) },
-            { number: 2, title: t('step2Title', language), description: t('step2Desc', language) },
-            { number: 3, title: t('step3Title', language), description: t('step3Desc', language) },
-            { number: 4, title: t('step4Title', language), description: t('step4Desc', language) },
+            {
+              number: 1,
+              title: t('step1Title', language),
+              description: t('step1Desc', language),
+            },
+            {
+              number: 2,
+              title: t('step2Title', language),
+              description: t('step2Desc', language),
+            },
+            {
+              number: 3,
+              title: t('step3Title', language),
+              description: t('step3Desc', language),
+            },
+            {
+              number: 4,
+              title: t('step4Title', language),
+              description: t('step4Desc', language),
+            },
           ].map((step, index) => (
             <StepCard key={step.number} {...step} delay={index * 0.1} />
           ))}
         </div>
 
         <motion.div
-          className='mt-12 p-6 rounded-xl flex items-start gap-4'
-          style={{ background: 'rgba(246, 70, 93, 0.1)', border: '1px solid rgba(246, 70, 93, 0.3)' }}
+          className="mt-12 p-6 rounded-xl flex items-start gap-4"
+          style={{
+            background: 'rgba(246, 70, 93, 0.1)',
+            border: '1px solid rgba(246, 70, 93, 0.3)',
+          }}
           initial={{ opacity: 0, scale: 0.9 }}
           whileInView={{ opacity: 1, scale: 1 }}
           viewport={{ once: true }}
           whileHover={{ scale: 1.02 }}
         >
-          <div className='w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0' style={{ background: 'rgba(246, 70, 93, 0.2)', color: '#F6465D' }}>
-            <svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
+            style={{ background: 'rgba(246, 70, 93, 0.2)', color: '#F6465D' }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+              <line x1="12" x2="12" y1="9" y2="13" />
+              <line x1="12" x2="12.01" y1="17" y2="17" />
+            </svg>
           </div>
           <div>
-            <div className='font-semibold mb-2' style={{ color: '#F6465D' }}>
+            <div className="font-semibold mb-2" style={{ color: '#F6465D' }}>
               {t('importantRiskWarning', language)}
             </div>
-            <p className='text-sm' style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
               {t('riskWarningText', language)}
             </p>
           </div>

web/src/components/landing/LoginModal.tsx

@@ -10,7 +10,7 @@ interface LoginModalProps {
 export default function LoginModal({ onClose, language }: LoginModalProps) {
   return (
     <motion.div
-      className='fixed inset-0 z-50 flex items-center justify-center p-4'
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
       style={{ background: 'rgba(0, 0, 0, 0.8)' }}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
@@ -18,32 +18,50 @@ export default function LoginModal({ onClose, language }: LoginModalProps) {
       onClick={onClose}
     >
       <motion.div
-        className='relative max-w-md w-full rounded-2xl p-8'
-        style={{ background: 'var(--brand-dark-gray)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+        className="relative max-w-md w-full rounded-2xl p-8"
+        style={{
+          background: 'var(--brand-dark-gray)',
+          border: '1px solid rgba(240, 185, 11, 0.2)',
+        }}
         initial={{ scale: 0.9, y: 50 }}
         animate={{ scale: 1, y: 0 }}
         exit={{ scale: 0.9, y: 50 }}
         onClick={(e) => e.stopPropagation()}
       >
-        <motion.button onClick={onClose} className='absolute top-4 right-4' style={{ color: 'var(--text-secondary)' }} whileHover={{ scale: 1.1, rotate: 90 }} whileTap={{ scale: 0.9 }}>
-          <X className='w-6 h-6' />
+        <motion.button
+          onClick={onClose}
+          className="absolute top-4 right-4"
+          style={{ color: 'var(--text-secondary)' }}
+          whileHover={{ scale: 1.1, rotate: 90 }}
+          whileTap={{ scale: 0.9 }}
+        >
+          <X className="w-6 h-6" />
         </motion.button>
-        <h2 className='text-2xl font-bold mb-6' style={{ color: 'var(--brand-light-gray)' }}>
+        <h2
+          className="text-2xl font-bold mb-6"
+          style={{ color: 'var(--brand-light-gray)' }}
+        >
           {t('accessNofxPlatform', language)}
         </h2>
-        <p className='text-sm mb-6' style={{ color: 'var(--text-secondary)' }}>
+        <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
           {t('loginRegisterPrompt', language)}
         </p>
-        <div className='space-y-3'>
+        <div className="space-y-3">
           <motion.button
             onClick={() => {
               window.history.pushState({}, '', '/login')
               window.dispatchEvent(new PopStateEvent('popstate'))
               onClose()
             }}
-            className='block w-full px-6 py-3 rounded-lg font-semibold text-center'
-            style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
-            whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(240, 185, 11, 0.4)' }}
+            className="block w-full px-6 py-3 rounded-lg font-semibold text-center"
+            style={{
+              background: 'var(--brand-yellow)',
+              color: 'var(--brand-black)',
+            }}
+            whileHover={{
+              scale: 1.05,
+              boxShadow: '0 10px 30px rgba(240, 185, 11, 0.4)',
+            }}
             whileTap={{ scale: 0.95 }}
           >
             {t('signIn', language)}
@@ -54,8 +72,12 @@ export default function LoginModal({ onClose, language }: LoginModalProps) {
               window.dispatchEvent(new PopStateEvent('popstate'))
               onClose()
             }}
-            className='block w-full px-6 py-3 rounded-lg font-semibold text-center'
-            style={{ background: 'var(--brand-dark-gray)', color: 'var(--brand-light-gray)', border: '1px solid rgba(240, 185, 11, 0.2)' }}
+            className="block w-full px-6 py-3 rounded-lg font-semibold text-center"
+            style={{
+              background: 'var(--brand-dark-gray)',
+              color: 'var(--brand-light-gray)',
+              border: '1px solid rgba(240, 185, 11, 0.2)',
+            }}
             whileHover={{ scale: 1.05, borderColor: 'var(--brand-yellow)' }}
             whileTap={{ scale: 0.95 }}
           >
@@ -66,4 +88,3 @@ export default function LoginModal({ onClose, language }: LoginModalProps) {
     </motion.div>
   )
 }
-