lulu/arbitrage-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: strategy-plaza white/light theme matching existing UI style

Browse Source
This commit is contained in:
root 2026-03-07 07:09:45 +00:00
parent a6165d8c86
commit e515063809
2 changed files with 112 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/app/strategy-plaza/[id]/page.tsx
View File

@ -126,19 +126,19 @@ export default function StrategyDetailPage() {
{/* Summary Bar */} {/* Summary Bar */}
{summary && ( {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} /> <StatusBadge status={summary.status} />
<span className="text-xs text-gray-400"> <span className="text-xs text-slate-400 flex items-center gap-1">
<Clock size={10} className="inline mr-1" />运行 {fmtDur(summary.started_at)} <Clock size={10} />运行 {fmtDur(summary.started_at)}
</span> </span>
{summary.cvd_windows && ( {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="ml-auto flex items-center gap-4 text-xs">
<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-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-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-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-gray-400">余额 <span className={`font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>{summary.current_balance.toLocaleString()} U</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-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="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> </span>
</div> </div>
)} )}
@ -152,10 +152,10 @@ export default function StrategyDetailPage() {
<button <button
key={key} key={key}
onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${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 tab === key
? "bg-cyan-600 text-white" ? "bg-blue-600 text-white border-blue-600"
: "bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700" : "bg-white text-slate-600 border-slate-200 hover:border-blue-300 hover:text-blue-600"
}`} }`}
> >
{label} {label}

142
frontend/app/strategy-plaza/page.tsx
View File

@ -7,7 +7,6 @@ import Link from "next/link";
import { import {
TrendingUp, TrendingUp,
TrendingDown, TrendingDown,
Minus,
Clock, Clock,
Activity, Activity,
AlertCircle, AlertCircle,
@ -61,23 +60,23 @@ function formatTime(ms: number | null): string {
function StatusBadge({ status }: { status: string }) { function StatusBadge({ status }: { status: string }) {
if (status === "running") { if (status === "running") {
return ( return (
<span className="flex items-center gap-1 text-xs text-emerald-400"> <span className="flex items-center gap-1 text-xs text-emerald-600 font-medium">
<CheckCircle size={12} /> <CheckCircle size={11} className="text-emerald-500" />
运行中 运行中
</span> </span>
); );
} }
if (status === "paused") { if (status === "paused") {
return ( return (
<span className="flex items-center gap-1 text-xs text-yellow-400"> <span className="flex items-center gap-1 text-xs text-amber-600 font-medium">
<PauseCircle size={12} /> <PauseCircle size={11} className="text-amber-500" />
已暂停 已暂停
</span> </span>
); );
} }
return ( return (
<span className="flex items-center gap-1 text-xs text-red-400"> <span className="flex items-center gap-1 text-xs text-red-600 font-medium">
<AlertCircle size={12} /> <AlertCircle size={11} className="text-red-500" />
异常 异常
</span> </span>
); );
@ -90,91 +89,102 @@ function StrategyCardComponent({ s }: { s: StrategyCard }) {
return ( return (
<Link href={`/strategy-plaza/${s.id}`}> <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 */} {/* Header */}
<div className="flex items-start justify-between mb-4"> <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
<div> <div className="flex items-center gap-2">
<h3 className="text-white font-semibold text-lg group-hover:text-cyan-400 transition-colors"> <h3 className="font-semibold text-slate-800 text-sm group-hover:text-blue-700 transition-colors">
{s.display_name} {s.display_name}
</h3> </h3>
<div className="flex items-center gap-2 mt-1">
<StatusBadge status={s.status} /> <StatusBadge status={s.status} />
<span className="text-xs text-gray-500"> </div>
<Clock size={10} className="inline mr-1" /> <span className="text-[10px] text-slate-400 flex items-center gap-1">
已运行 {formatDuration(s.started_at)} <Clock size={9} />
{formatDuration(s.started_at)}
</span> </span>
</div> </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>
<div className="text-right"> <div className="text-right">
<div className={`text-2xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}> <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 {isProfit ? "+" : ""}{s.net_usdt.toLocaleString()} U
</div> </div>
<div className="text-xs text-gray-400">{balancePct}% 余额</div>
</div> </div>
</div> </div>
{/* Balance Bar */} {/* Balance Bar */}
<div className="mb-4"> <div className="mb-3">
<div className="flex justify-between text-xs text-gray-400 mb-1"> <div className="flex justify-between text-[10px] text-slate-400 mb-1">
<span>当前余额</span> <span>{balancePct}%</span>
<span>{s.current_balance.toLocaleString()} / {s.initial_balance.toLocaleString()} USDT</span> <span>{s.initial_balance.toLocaleString()} USDT 初始</span>
</div> </div>
<div className="w-full bg-gray-700 rounded-full h-1.5"> <div className="w-full bg-slate-100 rounded-full h-1.5">
<div <div
className={`h-1.5 rounded-full ${s.current_balance >= s.initial_balance ? "bg-emerald-500" : "bg-red-500"}`} 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))}%` }} style={{ width: `${Math.min(100, Math.max(0, (s.current_balance / s.initial_balance) * 100))}%` }}
/> />
</div> </div>
</div> </div>
{/* Stats Grid */} {/* Stats Row */}
<div className="grid grid-cols-3 gap-3 mb-4"> <div className="grid grid-cols-3 gap-2 mb-3">
<div className="bg-gray-800 rounded-lg p-2.5"> <div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="text-xs text-gray-400 mb-1">胜率</div> <div className="text-[10px] text-slate-400">胜率</div>
<div className={`text-base font-bold ${s.win_rate >= 50 ? "text-emerald-400" : s.win_rate >= 45 ? "text-yellow-400" : "text-red-400"}`}> <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}% {s.win_rate}%
</div> </div>
</div> </div>
<div className="bg-gray-800 rounded-lg p-2.5"> <div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="text-xs text-gray-400 mb-1">净R</div> <div className="text-[10px] text-slate-400">净R</div>
<div className={`text-base font-bold ${s.net_r >= 0 ? "text-emerald-400" : "text-red-400"}`}> <div className={`text-sm font-bold ${s.net_r >= 0 ? "text-emerald-600" : "text-red-500"}`}>
{s.net_r >= 0 ? "+" : ""}{s.net_r}R {s.net_r >= 0 ? "+" : ""}{s.net_r}R
</div> </div>
</div> </div>
<div className="bg-gray-800 rounded-lg p-2.5"> <div className="bg-slate-50 rounded-lg p-2 text-center">
<div className="text-xs text-gray-400 mb-1">交易数</div> <div className="text-[10px] text-slate-400">交易数</div>
<div className="text-base font-bold text-white">{s.trade_count}</div> <div className="text-sm font-bold text-slate-700">{s.trade_count}</div>
</div> </div>
</div> </div>
{/* P&L Ratio */} {/* Avg win/loss */}
<div className="grid grid-cols-2 gap-3 mb-4"> <div className="flex gap-2 mb-3">
<div className="bg-gray-800 rounded-lg p-2.5"> <div className="flex-1 bg-emerald-50 rounded-lg px-2.5 py-1.5">
<div className="text-xs text-gray-400 mb-1">平均赢</div> <span className="text-[10px] text-emerald-600">平均赢</span>
<div className="text-sm font-medium text-emerald-400">+{s.avg_win_r}R</div> <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>
<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>
</div> </div>
{/* 24h & Last Trade */} {/* Footer */}
<div className="flex items-center justify-between border-t border-gray-700 pt-3"> <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"> <div className="flex items-center gap-1">
{is24hProfit ? ( {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"}`}> <span className={`text-[10px] font-medium ${is24hProfit ? "text-emerald-600" : "text-red-500"}`}>
24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U ({is24hProfit ? "+" : ""}{s.pnl_r_24h}R) 24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U
</span> </span>
</div> </div>
<div className="flex items-center gap-1 text-xs text-gray-500"> <div className="flex items-center gap-1 text-[10px] text-slate-400">
<Activity size={10} /> <Activity size={9} />
{s.open_positions > 0 ? ( {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> <span>上次: {formatTime(s.last_trade_at)}</span>
)} )}
@ -212,41 +222,37 @@ export default function StrategyPlazaPage() {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen"> <div className="flex items-center justify-center min-h-64">
<div className="text-gray-400 animate-pulse">加载中...</div> <div className="text-slate-400 text-sm animate-pulse">加载中...</div>
</div> </div>
); );
} }
return ( return (
<div className="p-6 max-w-6xl mx-auto"> <div className="p-4 max-w-5xl mx-auto">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-5">
<div> <div>
<h1 className="text-2xl font-bold text-white">策略广场</h1> <h1 className="text-lg font-bold text-slate-800">策略广场</h1>
<p className="text-gray-400 text-sm mt-1"> <p className="text-slate-500 text-xs mt-0.5">点击卡片查看信号引擎和模拟盘详情</p>
点击策略卡片查看信号引擎和模拟盘详情
</p>
</div> </div>
<div className="text-xs text-gray-500"> {lastUpdated && (
{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" />
<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 })}
{lastUpdated.toLocaleTimeString("zh-CN", { timeZone: "Asia/Shanghai", hour12: false })} 更新
</>
) : null}
</div> </div>
)}
</div> </div>
{/* Strategy Cards */} {/* 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) => ( {strategies.map((s) => (
<StrategyCardComponent key={s.id} s={s} /> <StrategyCardComponent key={s.id} s={s} />
))} ))}
</div> </div>
{strategies.length === 0 && ( {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> </div>
); );