From 4c744650751913dda236f23a195661f4d7153e61 Mon Sep 17 00:00:00 2001
From: icy <icyoung520@gmail.com>
Date: Tue, 4 Nov 2025 02:08:38 +0800
Subject: [PATCH] =?UTF-8?q?Add=20NOFX=20watermarks=20to=20charts=20and=20f?=
 =?UTF-8?q?ix=20empty=20state=20internationalization=20-=20Add=20NOFX=20wa?=
 =?UTF-8?q?termark=20to=20ComparisonChart=20(competition=20page)=20-=20Add?=
 =?UTF-8?q?=20NOFX=20watermark=20to=20EquityChart=20(dashboard=20page)=20-?=
 =?UTF-8?q?=20Fix=20empty=20state=20handling=20and=20internationalization?=
 =?UTF-8?q?=20in=20CompetitionPage=20=F0=9F=A4=96=20Generated=20with=20[Cl?=
 =?UTF-8?q?aude=20Code](https://claude.ai/code)=20Co-Authored-By:=20tinkle?=
 =?UTF-8?q?-community=20<tinklefund@gmail.com>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ComparisonChart.tsx | 18 ++++++++++-
 web/src/components/CompetitionPage.tsx | 43 +++++++++++++++++++++++++-
 web/src/components/EquityChart.tsx     | 18 ++++++++++-
 3 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ComparisonChart.tsx b/web/src/components/ComparisonChart.tsx
index 600421a3..7a933920 100644
--- a/web/src/components/ComparisonChart.tsx
+++ b/web/src/components/ComparisonChart.tsx
@@ -233,7 +233,23 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
 
   return (
     <div>
-      <div style={{ borderRadius: '8px', overflow: 'hidden' }}>
+      <div style={{ borderRadius: '8px', overflow: 'hidden', position: 'relative' }}>
+        {/* NOFX Watermark */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '20px',
+            right: '20px',
+            fontSize: '24px',
+            fontWeight: 'bold',
+            color: 'rgba(240, 185, 11, 0.15)',
+            zIndex: 10,
+            pointerEvents: 'none',
+            fontFamily: 'monospace'
+          }}
+        >
+          NOFX
+        </div>
         <ResponsiveContainer width="100%" height={520}>
         <LineChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 40 }}>
           <defs>
diff --git a/web/src/components/CompetitionPage.tsx b/web/src/components/CompetitionPage.tsx
index 3168bd14..d719472e 100644
--- a/web/src/components/CompetitionPage.tsx
+++ b/web/src/components/CompetitionPage.tsx
@@ -41,7 +41,7 @@ export function CompetitionPage() {
     setSelectedTrader(null);
   };
 
-  if (!competition || !competition.traders) {
+  if (!competition) {
     return (
       <div className="space-y-6">
         <div className="binance-card p-8 animate-pulse">
@@ -64,6 +64,47 @@ export function CompetitionPage() {
     );
   }
 
+  // 如果有数据返回但没有交易员，显示空状态
+  if (!competition.traders || competition.traders.length === 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>
+            <div>
+              <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' }}>
+                  0 {t('traders', language)}
+                </span>
+              </h1>
+              <p className="text-xs" style={{ color: '#848E9C' }}>
+                {t('liveBattle', language)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 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' }} />
+          <h3 className="text-lg font-bold mb-2" style={{ color: '#EAECEF' }}>
+            {t('noTraders', language)}
+          </h3>
+          <p className="text-sm" style={{ color: '#848E9C' }}>
+            {t('createFirstTrader', language)}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   // 按收益率排序
   const sortedTraders = [...competition.traders].sort(
     (a, b) => b.total_pnl_pct - a.total_pnl_pct
diff --git a/web/src/components/EquityChart.tsx b/web/src/components/EquityChart.tsx
index bfa89617..e7441779 100644
--- a/web/src/components/EquityChart.tsx
+++ b/web/src/components/EquityChart.tsx
@@ -270,7 +270,23 @@ export function EquityChart({ traderId }: EquityChartProps) {
       </div>
 
       {/* Chart */}
-      <div className='my-2' style={{ borderRadius: '8px', overflow: 'hidden' }}>
+      <div className='my-2' style={{ borderRadius: '8px', overflow: 'hidden', position: 'relative' }}>
+        {/* NOFX Watermark */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: '15px',
+            right: '15px',
+            fontSize: '20px',
+            fontWeight: 'bold',
+            color: 'rgba(240, 185, 11, 0.15)',
+            zIndex: 10,
+            pointerEvents: 'none',
+            fontFamily: 'monospace'
+          }}
+        >
+          NOFX
+        </div>
         <ResponsiveContainer width='100%' height={280}>
           <LineChart
             data={chartData}