From e5150638098776a69f61042c05822d7418e74e69 Mon Sep 17 00:00:00 2001
From: root <root@s52867.vps.hosting>
Date: Sat, 7 Mar 2026 07:09:45 +0000
Subject: [PATCH] fix: strategy-plaza white/light theme matching existing UI
 style

---
 frontend/app/strategy-plaza/[id]/page.tsx |  24 +--
 frontend/app/strategy-plaza/page.tsx      | 194 +++++++++++-----------
 2 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/frontend/app/strategy-plaza/[id]/page.tsx b/frontend/app/strategy-plaza/[id]/page.tsx
index 024ec7d..0b47768 100644
--- a/frontend/app/strategy-plaza/[id]/page.tsx
+++ b/frontend/app/strategy-plaza/[id]/page.tsx
@@ -126,19 +126,19 @@ export default function StrategyDetailPage() {
 
       {/* Summary Bar */}
       {summary && (
-        <div className="flex flex-wrap items-center gap-4 bg-gray-900 border border-gray-700 rounded-xl px-5 py-3 mb-4">
+        <div className="flex flex-wrap items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-2.5 mb-4">
           <StatusBadge status={summary.status} />
-          <span className="text-xs text-gray-400">
-            <Clock size={10} className="inline mr-1" />运行 {fmtDur(summary.started_at)}
+          <span className="text-xs text-slate-400 flex items-center gap-1">
+            <Clock size={10} />运行 {fmtDur(summary.started_at)}
           </span>
           {summary.cvd_windows && (
-            <span className="text-xs text-cyan-400 bg-cyan-900/30 px-2 py-0.5 rounded">CVD {summary.cvd_windows}</span>
+            <span className="text-xs text-blue-600 bg-blue-50 border border-blue-100 px-2 py-0.5 rounded">CVD {summary.cvd_windows}</span>
           )}
-          <span className="ml-auto flex items-center gap-4 text-sm">
-            <span className="text-gray-400">胜率 <span className={summary.win_rate >= 50 ? "text-emerald-400 font-bold" : "text-yellow-400 font-bold"}>{summary.win_rate}%</span></span>
-            <span className="text-gray-400">净R <span className={`font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>{summary.net_r >= 0 ? "+" : ""}{summary.net_r}R</span></span>
-            <span className="text-gray-400">余额 <span className={`font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>{summary.current_balance.toLocaleString()} U</span></span>
-            <span className="text-gray-400">24h <span className={`font-bold ${summary.pnl_usdt_24h >= 0 ? "text-emerald-400" : "text-red-400"}`}>{summary.pnl_usdt_24h >= 0 ? "+" : ""}{summary.pnl_usdt_24h} U</span></span>
+          <span className="ml-auto flex items-center gap-4 text-xs">
+            <span className="text-slate-500">胜率 <span className={summary.win_rate >= 50 ? "text-emerald-600 font-bold" : "text-amber-600 font-bold"}>{summary.win_rate}%</span></span>
+            <span className="text-slate-500">净R <span className={`font-bold ${isProfit ? "text-emerald-600" : "text-red-500"}`}>{summary.net_r >= 0 ? "+" : ""}{summary.net_r}R</span></span>
+            <span className="text-slate-500">余额 <span className={`font-bold ${isProfit ? "text-emerald-600" : "text-red-500"}`}>{summary.current_balance.toLocaleString()} U</span></span>
+            <span className="text-slate-500">24h <span className={`font-bold ${summary.pnl_usdt_24h >= 0 ? "text-emerald-600" : "text-red-500"}`}>{summary.pnl_usdt_24h >= 0 ? "+" : ""}{summary.pnl_usdt_24h} U</span></span>
           </span>
         </div>
       )}
@@ -152,10 +152,10 @@ export default function StrategyDetailPage() {
           <button
             key={key}
             onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${key}`)}
-            className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors ${
+            className={`px-4 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
               tab === key
-                ? "bg-cyan-600 text-white"
-                : "bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700"
+                ? "bg-blue-600 text-white border-blue-600"
+                : "bg-white text-slate-600 border-slate-200 hover:border-blue-300 hover:text-blue-600"
             }`}
           >
             {label}
diff --git a/frontend/app/strategy-plaza/page.tsx b/frontend/app/strategy-plaza/page.tsx
index a927003..473725e 100644
--- a/frontend/app/strategy-plaza/page.tsx
+++ b/frontend/app/strategy-plaza/page.tsx
@@ -7,7 +7,6 @@ import Link from "next/link";
 import {
   TrendingUp,
   TrendingDown,
-  Minus,
   Clock,
   Activity,
   AlertCircle,
@@ -61,23 +60,23 @@ function formatTime(ms: number | null): string {
 function StatusBadge({ status }: { status: string }) {
   if (status === "running") {
     return (
-      <span className="flex items-center gap-1 text-xs text-emerald-400">
-        <CheckCircle size={12} />
+      <span className="flex items-center gap-1 text-xs text-emerald-600 font-medium">
+        <CheckCircle size={11} className="text-emerald-500" />
         运行中
       </span>
     );
   }
   if (status === "paused") {
     return (
-      <span className="flex items-center gap-1 text-xs text-yellow-400">
-        <PauseCircle size={12} />
+      <span className="flex items-center gap-1 text-xs text-amber-600 font-medium">
+        <PauseCircle size={11} className="text-amber-500" />
         已暂停
       </span>
     );
   }
   return (
-    <span className="flex items-center gap-1 text-xs text-red-400">
-      <AlertCircle size={12} />
+    <span className="flex items-center gap-1 text-xs text-red-600 font-medium">
+      <AlertCircle size={11} className="text-red-500" />
       异常
     </span>
   );
@@ -90,91 +89,102 @@ function StrategyCardComponent({ s }: { s: StrategyCard }) {
 
   return (
     <Link href={`/strategy-plaza/${s.id}`}>
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-5 hover:border-cyan-600 hover:bg-gray-800 transition-all cursor-pointer group">
+      <div className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:border-blue-300 hover:shadow-md transition-all cursor-pointer group">
         {/* Header */}
-        <div className="flex items-start justify-between mb-4">
-          <div>
-            <h3 className="text-white font-semibold text-lg group-hover:text-cyan-400 transition-colors">
+        <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-slate-800 text-sm group-hover:text-blue-700 transition-colors">
               {s.display_name}
             </h3>
-            <div className="flex items-center gap-2 mt-1">
-              <StatusBadge status={s.status} />
-              <span className="text-xs text-gray-500">
-                <Clock size={10} className="inline mr-1" />
-                已运行 {formatDuration(s.started_at)}
-              </span>
+            <StatusBadge status={s.status} />
+          </div>
+          <span className="text-[10px] text-slate-400 flex items-center gap-1">
+            <Clock size={9} />
+            {formatDuration(s.started_at)}
+          </span>
+        </div>
+
+        {/* Main PnL */}
+        <div className="px-4 pt-3 pb-2">
+          <div className="flex items-end justify-between mb-2">
+            <div>
+              <div className="text-[10px] text-slate-400 mb-0.5">当前余额</div>
+              <div className="text-xl font-bold text-slate-800">
+                {s.current_balance.toLocaleString()}
+                <span className="text-xs font-normal text-slate-400 ml-1">USDT</span>
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-[10px] text-slate-400 mb-0.5">累计盈亏</div>
+              <div className={`text-lg font-bold ${isProfit ? "text-emerald-600" : "text-red-500"}`}>
+                {isProfit ? "+" : ""}{s.net_usdt.toLocaleString()} U
+              </div>
             </div>
           </div>
-          <div className="text-right">
-            <div className={`text-2xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>
-              {isProfit ? "+" : ""}{s.net_usdt.toLocaleString()} U
+
+          {/* Balance Bar */}
+          <div className="mb-3">
+            <div className="flex justify-between text-[10px] text-slate-400 mb-1">
+              <span>{balancePct}%</span>
+              <span>{s.initial_balance.toLocaleString()} USDT 初始</span>
+            </div>
+            <div className="w-full bg-slate-100 rounded-full h-1.5">
+              <div
+                className={`h-1.5 rounded-full ${isProfit ? "bg-emerald-400" : "bg-red-400"}`}
+                style={{ width: `${Math.min(100, Math.max(0, (s.current_balance / s.initial_balance) * 100))}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Stats Row */}
+          <div className="grid grid-cols-3 gap-2 mb-3">
+            <div className="bg-slate-50 rounded-lg p-2 text-center">
+              <div className="text-[10px] text-slate-400">胜率</div>
+              <div className={`text-sm font-bold ${s.win_rate >= 50 ? "text-emerald-600" : s.win_rate >= 45 ? "text-amber-600" : "text-red-500"}`}>
+                {s.win_rate}%
+              </div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-2 text-center">
+              <div className="text-[10px] text-slate-400">净R</div>
+              <div className={`text-sm font-bold ${s.net_r >= 0 ? "text-emerald-600" : "text-red-500"}`}>
+                {s.net_r >= 0 ? "+" : ""}{s.net_r}R
+              </div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-2 text-center">
+              <div className="text-[10px] text-slate-400">交易数</div>
+              <div className="text-sm font-bold text-slate-700">{s.trade_count}</div>
+            </div>
+          </div>
+
+          {/* Avg win/loss */}
+          <div className="flex gap-2 mb-3">
+            <div className="flex-1 bg-emerald-50 rounded-lg px-2.5 py-1.5">
+              <span className="text-[10px] text-emerald-600">平均赢</span>
+              <span className="float-right text-[10px] font-bold text-emerald-600">+{s.avg_win_r}R</span>
+            </div>
+            <div className="flex-1 bg-red-50 rounded-lg px-2.5 py-1.5">
+              <span className="text-[10px] text-red-500">平均亏</span>
+              <span className="float-right text-[10px] font-bold text-red-500">{s.avg_loss_r}R</span>
             </div>
-            <div className="text-xs text-gray-400">{balancePct}% 余额</div>
           </div>
         </div>
 
-        {/* Balance Bar */}
-        <div className="mb-4">
-          <div className="flex justify-between text-xs text-gray-400 mb-1">
-            <span>当前余额</span>
-            <span>{s.current_balance.toLocaleString()} / {s.initial_balance.toLocaleString()} USDT</span>
-          </div>
-          <div className="w-full bg-gray-700 rounded-full h-1.5">
-            <div
-              className={`h-1.5 rounded-full ${s.current_balance >= s.initial_balance ? "bg-emerald-500" : "bg-red-500"}`}
-              style={{ width: `${Math.min(100, Math.max(0, (s.current_balance / s.initial_balance) * 100))}%` }}
-            />
-          </div>
-        </div>
-
-        {/* Stats Grid */}
-        <div className="grid grid-cols-3 gap-3 mb-4">
-          <div className="bg-gray-800 rounded-lg p-2.5">
-            <div className="text-xs text-gray-400 mb-1">胜率</div>
-            <div className={`text-base font-bold ${s.win_rate >= 50 ? "text-emerald-400" : s.win_rate >= 45 ? "text-yellow-400" : "text-red-400"}`}>
-              {s.win_rate}%
-            </div>
-          </div>
-          <div className="bg-gray-800 rounded-lg p-2.5">
-            <div className="text-xs text-gray-400 mb-1">净R</div>
-            <div className={`text-base font-bold ${s.net_r >= 0 ? "text-emerald-400" : "text-red-400"}`}>
-              {s.net_r >= 0 ? "+" : ""}{s.net_r}R
-            </div>
-          </div>
-          <div className="bg-gray-800 rounded-lg p-2.5">
-            <div className="text-xs text-gray-400 mb-1">交易数</div>
-            <div className="text-base font-bold text-white">{s.trade_count}</div>
-          </div>
-        </div>
-
-        {/* P&L Ratio */}
-        <div className="grid grid-cols-2 gap-3 mb-4">
-          <div className="bg-gray-800 rounded-lg p-2.5">
-            <div className="text-xs text-gray-400 mb-1">平均赢</div>
-            <div className="text-sm font-medium text-emerald-400">+{s.avg_win_r}R</div>
-          </div>
-          <div className="bg-gray-800 rounded-lg p-2.5">
-            <div className="text-xs text-gray-400 mb-1">平均亏</div>
-            <div className="text-sm font-medium text-red-400">{s.avg_loss_r}R</div>
-          </div>
-        </div>
-
-        {/* 24h & Last Trade */}
-        <div className="flex items-center justify-between border-t border-gray-700 pt-3">
+        {/* Footer */}
+        <div className="px-4 py-2.5 border-t border-slate-100 flex items-center justify-between bg-slate-50/60">
           <div className="flex items-center gap-1">
             {is24hProfit ? (
-              <TrendingUp size={14} className="text-emerald-400" />
+              <TrendingUp size={12} className="text-emerald-500" />
             ) : (
-              <TrendingDown size={14} className="text-red-400" />
+              <TrendingDown size={12} className="text-red-500" />
             )}
-            <span className={`text-xs font-medium ${is24hProfit ? "text-emerald-400" : "text-red-400"}`}>
-              24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U ({is24hProfit ? "+" : ""}{s.pnl_r_24h}R)
+            <span className={`text-[10px] font-medium ${is24hProfit ? "text-emerald-600" : "text-red-500"}`}>
+              24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U
             </span>
           </div>
-          <div className="flex items-center gap-1 text-xs text-gray-500">
-            <Activity size={10} />
+          <div className="flex items-center gap-1 text-[10px] text-slate-400">
+            <Activity size={9} />
             {s.open_positions > 0 ? (
-              <span className="text-yellow-400">{s.open_positions}仓持仓中</span>
+              <span className="text-amber-600 font-medium">{s.open_positions}仓持仓中</span>
             ) : (
               <span>上次: {formatTime(s.last_trade_at)}</span>
             )}
@@ -212,41 +222,37 @@ export default function StrategyPlazaPage() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-gray-400 animate-pulse">加载中...</div>
+      <div className="flex items-center justify-center min-h-64">
+        <div className="text-slate-400 text-sm animate-pulse">加载中...</div>
       </div>
     );
   }
 
   return (
-    <div className="p-6 max-w-6xl mx-auto">
+    <div className="p-4 max-w-5xl mx-auto">
       {/* Header */}
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex items-center justify-between mb-5">
         <div>
-          <h1 className="text-2xl font-bold text-white">策略广场</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            点击策略卡片查看信号引擎和模拟盘详情
-          </p>
-        </div>
-        <div className="text-xs text-gray-500">
-          {lastUpdated ? (
-            <>
-              <span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
-              {lastUpdated.toLocaleTimeString("zh-CN", { timeZone: "Asia/Shanghai", hour12: false })} 更新
-            </>
-          ) : null}
+          <h1 className="text-lg font-bold text-slate-800">策略广场</h1>
+          <p className="text-slate-500 text-xs mt-0.5">点击卡片查看信号引擎和模拟盘详情</p>
         </div>
+        {lastUpdated && (
+          <div className="text-[10px] text-slate-400 flex items-center gap-1">
+            <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            {lastUpdated.toLocaleTimeString("zh-CN", { timeZone: "Asia/Shanghai", hour12: false })}
+          </div>
+        )}
       </div>
 
       {/* Strategy Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         {strategies.map((s) => (
           <StrategyCardComponent key={s.id} s={s} />
         ))}
       </div>
 
       {strategies.length === 0 && (
-        <div className="text-center text-gray-500 py-20">暂无策略数据</div>
+        <div className="text-center text-slate-400 text-sm py-16">暂无策略数据</div>
       )}
     </div>
   );