feat: strategy-plaza frontend - cards overview + detail tabs
This commit is contained in:
root
parent
602d9ae034
commit
4d5ebbb1b3
328
frontend/app/strategy-plaza/[id]/page.tsx
Normal file
328
frontend/app/strategy-plaza/[id]/page.tsx
Normal file
@ -0,0 +1,328 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||||
|
import { authFetch } from "@/lib/auth";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
CheckCircle,
|
||||||
|
PauseCircle,
|
||||||
|
AlertCircle,
|
||||||
|
Clock,
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
// ─── Types ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface StrategySummary {
|
||||||
|
id: string;
|
||||||
|
display_name: string;
|
||||||
|
status: string;
|
||||||
|
started_at: number;
|
||||||
|
initial_balance: number;
|
||||||
|
current_balance: number;
|
||||||
|
net_usdt: number;
|
||||||
|
net_r: number;
|
||||||
|
trade_count: number;
|
||||||
|
win_rate: number;
|
||||||
|
avg_win_r: number;
|
||||||
|
avg_loss_r: number;
|
||||||
|
open_positions: number;
|
||||||
|
pnl_usdt_24h: number;
|
||||||
|
pnl_r_24h: number;
|
||||||
|
std_r: number;
|
||||||
|
cvd_windows?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Signal {
|
||||||
|
ts: number;
|
||||||
|
symbol: string;
|
||||||
|
score: number;
|
||||||
|
signal: string | null;
|
||||||
|
price: number;
|
||||||
|
factors: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Trade {
|
||||||
|
id: number;
|
||||||
|
symbol: string;
|
||||||
|
direction: string;
|
||||||
|
score: number;
|
||||||
|
entry_price: number;
|
||||||
|
exit_price: number | null;
|
||||||
|
tp1_price: number;
|
||||||
|
tp2_price: number;
|
||||||
|
sl_price: number;
|
||||||
|
tp1_hit: boolean;
|
||||||
|
pnl_r: number;
|
||||||
|
risk_distance: number;
|
||||||
|
entry_ts: number;
|
||||||
|
exit_ts: number | null;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Helpers ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function bjt(ms: number) {
|
||||||
|
const d = new Date(ms + 8 * 3600 * 1000);
|
||||||
|
return `${String(d.getUTCMonth() + 1).padStart(2, "0")}/${String(d.getUTCDate()).padStart(2, "0")} ${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtDur(ms: number) {
|
||||||
|
const s = Math.floor((Date.now() - ms) / 1000);
|
||||||
|
const d = Math.floor(s / 86400);
|
||||||
|
const h = Math.floor((s % 86400) / 3600);
|
||||||
|
if (d > 0) return `${d}天${h}h`;
|
||||||
|
const m = Math.floor((s % 3600) / 60);
|
||||||
|
if (h > 0) return `${h}h${m}m`;
|
||||||
|
return `${m}m`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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>;
|
||||||
|
if (status === "paused") return <span className="flex items-center gap-1 text-xs text-yellow-400"><PauseCircle size={12} />已暂停</span>;
|
||||||
|
return <span className="flex items-center gap-1 text-xs text-red-400"><AlertCircle size={12} />异常</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Sub-views ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function SignalsView({ strategyId }: { strategyId: string }) {
|
||||||
|
const [signals, setSignals] = useState<Signal[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetch_ = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/strategy-plaza/${strategyId}/signals?limit=40`);
|
||||||
|
const d = await r.json();
|
||||||
|
setSignals(d.signals || []);
|
||||||
|
} catch {}
|
||||||
|
setLoading(false);
|
||||||
|
}, [strategyId]);
|
||||||
|
|
||||||
|
useEffect(() => { fetch_(); const iv = setInterval(fetch_, 15000); return () => clearInterval(iv); }, [fetch_]);
|
||||||
|
|
||||||
|
if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载信号中...</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-gray-400 border-b border-gray-700 text-xs">
|
||||||
|
<th className="py-2 px-3 text-left">时间(北京)</th>
|
||||||
|
<th className="py-2 px-3 text-left">币种</th>
|
||||||
|
<th className="py-2 px-3 text-right">价格</th>
|
||||||
|
<th className="py-2 px-3 text-right">分数</th>
|
||||||
|
<th className="py-2 px-3 text-center">信号</th>
|
||||||
|
<th className="py-2 px-3 text-right">CVD 30m</th>
|
||||||
|
<th className="py-2 px-3 text-right">CVD 4h</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{signals.map((s, i) => {
|
||||||
|
const fc = s.factors && (typeof s.factors === "string" ? JSON.parse(s.factors) : s.factors);
|
||||||
|
return (
|
||||||
|
<tr key={i} className="border-b border-gray-800 hover:bg-gray-800/50">
|
||||||
|
<td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(s.ts)}</td>
|
||||||
|
<td className="py-1.5 px-3 font-mono font-bold text-white">{s.symbol.replace("USDT", "")}</td>
|
||||||
|
<td className="py-1.5 px-3 text-right text-gray-300">{s.price?.toLocaleString()}</td>
|
||||||
|
<td className="py-1.5 px-3 text-right">
|
||||||
|
<span className={`font-bold ${s.score >= 75 ? "text-emerald-400" : s.score >= 50 ? "text-yellow-400" : "text-gray-500"}`}>
|
||||||
|
{s.score}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="py-1.5 px-3 text-center">
|
||||||
|
{s.signal ? (
|
||||||
|
<span className={`text-xs font-bold px-2 py-0.5 rounded ${s.signal === "LONG" ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
|
||||||
|
{s.signal}
|
||||||
|
</span>
|
||||||
|
) : <span className="text-gray-600 text-xs">—</span>}
|
||||||
|
</td>
|
||||||
|
<td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_30m?.toFixed(0) ?? "—"}</td>
|
||||||
|
<td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_4h?.toFixed(0) ?? "—"}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{signals.length === 0 && <div className="text-center text-gray-500 py-10">暂无信号数据</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TradesView({ strategyId }: { strategyId: string }) {
|
||||||
|
const [trades, setTrades] = useState<Trade[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetch_ = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/strategy-plaza/${strategyId}/trades?limit=50`);
|
||||||
|
const d = await r.json();
|
||||||
|
setTrades(d.trades || []);
|
||||||
|
} catch {}
|
||||||
|
setLoading(false);
|
||||||
|
}, [strategyId]);
|
||||||
|
|
||||||
|
useEffect(() => { fetch_(); }, [fetch_]);
|
||||||
|
|
||||||
|
if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载交易记录中...</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-gray-400 border-b border-gray-700 text-xs">
|
||||||
|
<th className="py-2 px-3 text-left">入场时间</th>
|
||||||
|
<th className="py-2 px-3 text-left">出场时间</th>
|
||||||
|
<th className="py-2 px-3 text-left">币种</th>
|
||||||
|
<th className="py-2 px-3 text-center">方向</th>
|
||||||
|
<th className="py-2 px-3 text-right">入场价</th>
|
||||||
|
<th className="py-2 px-3 text-right">出场价</th>
|
||||||
|
<th className="py-2 px-3 text-right">盈亏R</th>
|
||||||
|
<th className="py-2 px-3 text-right">盈亏U</th>
|
||||||
|
<th className="py-2 px-3 text-center">状态</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{trades.map((t) => {
|
||||||
|
const isWin = t.pnl_r > 0;
|
||||||
|
const isActive = !t.exit_ts;
|
||||||
|
return (
|
||||||
|
<tr key={t.id} className="border-b border-gray-800 hover:bg-gray-800/50">
|
||||||
|
<td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(t.entry_ts)}</td>
|
||||||
|
<td className="py-1.5 px-3 text-gray-400 text-xs">{t.exit_ts ? bjt(t.exit_ts) : <span className="text-yellow-400">持仓中</span>}</td>
|
||||||
|
<td className="py-1.5 px-3 font-mono font-bold text-white">{t.symbol.replace("USDT", "")}</td>
|
||||||
|
<td className="py-1.5 px-3 text-center">
|
||||||
|
<span className={`text-xs font-bold ${t.direction === "LONG" ? "text-emerald-400" : "text-red-400"}`}>
|
||||||
|
{t.direction === "LONG" ? "多" : "空"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="py-1.5 px-3 text-right text-gray-300">{t.entry_price?.toLocaleString()}</td>
|
||||||
|
<td className="py-1.5 px-3 text-right text-gray-300">{t.exit_price?.toLocaleString() ?? "—"}</td>
|
||||||
|
<td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
|
||||||
|
{isActive ? "活跃" : `${isWin ? "+" : ""}${t.pnl_r?.toFixed(3)}R`}
|
||||||
|
</td>
|
||||||
|
<td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
|
||||||
|
{isActive ? "—" : `${isWin ? "+" : ""}${Math.round(t.pnl_r * 200)}U`}
|
||||||
|
</td>
|
||||||
|
<td className="py-1.5 px-3 text-center">
|
||||||
|
<span className={`text-xs px-1.5 py-0.5 rounded ${isActive ? "bg-yellow-900 text-yellow-400" : isWin ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
|
||||||
|
{isActive ? "活跃" : isWin ? "盈利" : "亏损"}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{trades.length === 0 && <div className="text-center text-gray-500 py-10">暂无交易记录</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Main Page ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function StrategyDetailPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const strategyId = params?.id as string;
|
||||||
|
const tab = searchParams?.get("tab") || "signals";
|
||||||
|
|
||||||
|
const [summary, setSummary] = useState<StrategySummary | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetchSummary = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const r = await authFetch(`/api/strategy-plaza/${strategyId}/summary`);
|
||||||
|
if (r.ok) { const d = await r.json(); setSummary(d); }
|
||||||
|
} catch {}
|
||||||
|
setLoading(false);
|
||||||
|
}, [strategyId]);
|
||||||
|
|
||||||
|
useEffect(() => { fetchSummary(); const iv = setInterval(fetchSummary, 30000); return () => clearInterval(iv); }, [fetchSummary]);
|
||||||
|
|
||||||
|
if (loading) return <div className="flex items-center justify-center min-h-screen"><div className="text-gray-400 animate-pulse">加载中...</div></div>;
|
||||||
|
if (!summary) return <div className="flex items-center justify-center min-h-screen"><div className="text-red-400">策略不存在</div></div>;
|
||||||
|
|
||||||
|
const isProfit = summary.net_usdt >= 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 max-w-6xl mx-auto">
|
||||||
|
{/* Back */}
|
||||||
|
<Link href="/strategy-plaza" className="flex items-center gap-2 text-gray-400 hover:text-white text-sm mb-6 transition-colors">
|
||||||
|
<ArrowLeft size={16} />
|
||||||
|
返回策略广场
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 mb-6">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white">{summary.display_name}</h1>
|
||||||
|
{summary.description && <p className="text-gray-400 text-sm mt-1">{summary.description}</p>}
|
||||||
|
<div className="flex items-center gap-3 mt-2">
|
||||||
|
<StatusBadge status={summary.status} />
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
<Clock size={10} className="inline mr-1" />
|
||||||
|
运行 {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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className={`text-3xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>
|
||||||
|
{isProfit ? "+" : ""}{summary.net_usdt.toLocaleString()} U
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-400 text-sm">{summary.current_balance.toLocaleString()} / {summary.initial_balance.toLocaleString()} USDT</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
{[
|
||||||
|
{ label: "胜率", value: `${summary.win_rate}%`, color: summary.win_rate >= 50 ? "text-emerald-400" : summary.win_rate >= 45 ? "text-yellow-400" : "text-red-400" },
|
||||||
|
{ label: "净R", value: `${summary.net_r >= 0 ? "+" : ""}${summary.net_r}R`, color: summary.net_r >= 0 ? "text-emerald-400" : "text-red-400" },
|
||||||
|
{ label: "24h盈亏", value: `${summary.pnl_usdt_24h >= 0 ? "+" : ""}${summary.pnl_usdt_24h}U`, color: summary.pnl_usdt_24h >= 0 ? "text-emerald-400" : "text-red-400" },
|
||||||
|
{ label: "总交易数", value: summary.trade_count, color: "text-white" },
|
||||||
|
].map(({ label, value, color }) => (
|
||||||
|
<div key={label} className="bg-gray-800 rounded-lg p-3">
|
||||||
|
<div className="text-xs text-gray-400 mb-1">{label}</div>
|
||||||
|
<div className={`text-xl font-bold ${color}`}>{value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-2 mb-6">
|
||||||
|
{["signals", "paper"].map((t) => (
|
||||||
|
<button
|
||||||
|
key={t}
|
||||||
|
onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${t}`)}
|
||||||
|
className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
tab === t
|
||||||
|
? "bg-cyan-600 text-white"
|
||||||
|
: "bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t === "signals" ? "📊 信号引擎" : "📈 模拟盘"}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="bg-gray-900 border border-gray-700 rounded-xl overflow-hidden">
|
||||||
|
{tab === "signals" ? (
|
||||||
|
<SignalsView strategyId={strategyId} />
|
||||||
|
) : (
|
||||||
|
<TradesView strategyId={strategyId} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
253
frontend/app/strategy-plaza/page.tsx
Normal file
253
frontend/app/strategy-plaza/page.tsx
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { authFetch } from "@/lib/auth";
|
||||||
|
import { useAuth } from "@/lib/auth";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
Minus,
|
||||||
|
Clock,
|
||||||
|
Activity,
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle,
|
||||||
|
PauseCircle,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface StrategyCard {
|
||||||
|
id: string;
|
||||||
|
display_name: string;
|
||||||
|
status: "running" | "paused" | "error";
|
||||||
|
started_at: number;
|
||||||
|
initial_balance: number;
|
||||||
|
current_balance: number;
|
||||||
|
net_usdt: number;
|
||||||
|
net_r: number;
|
||||||
|
trade_count: number;
|
||||||
|
win_rate: number;
|
||||||
|
avg_win_r: number;
|
||||||
|
avg_loss_r: number;
|
||||||
|
open_positions: number;
|
||||||
|
pnl_usdt_24h: number;
|
||||||
|
pnl_r_24h: number;
|
||||||
|
std_r: number;
|
||||||
|
last_trade_at: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(ms: number): string {
|
||||||
|
const totalSec = Math.floor((Date.now() - ms) / 1000);
|
||||||
|
const d = Math.floor(totalSec / 86400);
|
||||||
|
const h = Math.floor((totalSec % 86400) / 3600);
|
||||||
|
const m = Math.floor((totalSec % 3600) / 60);
|
||||||
|
if (d > 0) return `${d}天 ${h}小时`;
|
||||||
|
if (h > 0) return `${h}小时 ${m}分`;
|
||||||
|
return `${m}分钟`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(ms: number | null): string {
|
||||||
|
if (!ms) return "—";
|
||||||
|
const d = new Date(ms);
|
||||||
|
return d.toLocaleString("zh-CN", {
|
||||||
|
timeZone: "Asia/Shanghai",
|
||||||
|
month: "2-digit",
|
||||||
|
day: "2-digit",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (status === "paused") {
|
||||||
|
return (
|
||||||
|
<span className="flex items-center gap-1 text-xs text-yellow-400">
|
||||||
|
<PauseCircle size={12} />
|
||||||
|
已暂停
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="flex items-center gap-1 text-xs text-red-400">
|
||||||
|
<AlertCircle size={12} />
|
||||||
|
异常
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StrategyCardComponent({ s }: { s: StrategyCard }) {
|
||||||
|
const isProfit = s.net_usdt >= 0;
|
||||||
|
const is24hProfit = s.pnl_usdt_24h >= 0;
|
||||||
|
const balancePct = ((s.current_balance / s.initial_balance) * 100).toFixed(1);
|
||||||
|
|
||||||
|
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">
|
||||||
|
{/* 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">
|
||||||
|
{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>
|
||||||
|
</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
|
||||||
|
</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">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{is24hProfit ? (
|
||||||
|
<TrendingUp size={14} className="text-emerald-400" />
|
||||||
|
) : (
|
||||||
|
<TrendingDown size={14} className="text-red-400" />
|
||||||
|
)}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||||
|
<Activity size={10} />
|
||||||
|
{s.open_positions > 0 ? (
|
||||||
|
<span className="text-yellow-400">{s.open_positions}仓持仓中</span>
|
||||||
|
) : (
|
||||||
|
<span>上次: {formatTime(s.last_trade_at)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StrategyPlazaPage() {
|
||||||
|
const { token } = useAuth();
|
||||||
|
const [strategies, setStrategies] = useState<StrategyCard[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await authFetch("/api/strategy-plaza");
|
||||||
|
const data = await res.json();
|
||||||
|
setStrategies(data.strategies || []);
|
||||||
|
setLastUpdated(new Date());
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
const interval = setInterval(fetchData, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="text-gray-400 animate-pulse">加载中...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 max-w-6xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<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}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Strategy Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||||
|
{strategies.map((s) => (
|
||||||
|
<StrategyCardComponent key={s.id} s={s} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{strategies.length === 0 && (
|
||||||
|
<div className="text-center text-gray-500 py-20">暂无策略数据</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -14,10 +14,7 @@ const navItems = [
|
|||||||
{ href: "/", label: "仪表盘", icon: LayoutDashboard },
|
{ href: "/", label: "仪表盘", icon: LayoutDashboard },
|
||||||
{ href: "/trades", label: "成交流", icon: Activity },
|
{ href: "/trades", label: "成交流", icon: Activity },
|
||||||
{ href: "/live", label: "⚡ 实盘交易", icon: Bolt, section: "── 实盘 ──" },
|
{ href: "/live", label: "⚡ 实盘交易", icon: Bolt, section: "── 实盘 ──" },
|
||||||
{ href: "/signals-v53", label: "V5.3 信号引擎", icon: Zap, section: "── V5.3 ──" },
|
{ href: "/strategy-plaza", label: "策略广场", icon: Zap, section: "── 策略 ──" },
|
||||||
{ href: "/paper-v53", label: "V5.3 模拟盘", icon: LineChart },
|
|
||||||
{ href: "/signals-v53fast", label: "V5.3 Fast 信号", icon: Zap, section: "── V5.3 Fast ──" },
|
|
||||||
{ href: "/paper-v53fast", label: "V5.3 Fast 模拟盘", icon: LineChart },
|
|
||||||
{ href: "/server", label: "服务器", icon: Monitor },
|
{ href: "/server", label: "服务器", icon: Monitor },
|
||||||
{ href: "/about", label: "说明", icon: Info },
|
{ href: "/about", label: "说明", icon: Info },
|
||||||
];
|
];
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user