260 lines
9.1 KiB
TypeScript
260 lines
9.1 KiB
TypeScript
"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,
|
|
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-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-amber-600 font-medium">
|
|
<PauseCircle size={11} className="text-amber-500" />
|
|
已暂停
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span className="flex items-center gap-1 text-xs text-red-600 font-medium">
|
|
<AlertCircle size={11} className="text-red-500" />
|
|
异常
|
|
</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="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="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>
|
|
<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>
|
|
|
|
{/* 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>
|
|
</div>
|
|
|
|
{/* 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={12} className="text-emerald-500" />
|
|
) : (
|
|
<TrendingDown size={12} className="text-red-500" />
|
|
)}
|
|
<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-[10px] text-slate-400">
|
|
<Activity size={9} />
|
|
{s.open_positions > 0 ? (
|
|
<span className="text-amber-600 font-medium">{s.open_positions}仓持仓中</span>
|
|
) : (
|
|
<span>上次: {formatTime(s.last_trade_at)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function StrategyPlazaPage() {
|
|
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-64">
|
|
<div className="text-slate-400 text-sm animate-pulse">加载中...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 max-w-5xl mx-auto">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-5">
|
|
<div>
|
|
<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-4">
|
|
{strategies.map((s) => (
|
|
<StrategyCardComponent key={s.id} s={s} />
|
|
))}
|
|
</div>
|
|
|
|
{strategies.length === 0 && (
|
|
<div className="text-center text-slate-400 text-sm py-16">暂无策略数据</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|