254 lines
8.4 KiB
TypeScript
254 lines
8.4 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,
|
|
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() {
|
|
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>
|
|
);
|
|
}
|