Use horizontal tables for strategy and stats in centered fullscreen modal.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -1,9 +1,4 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { apiFetch, clearSession, getToken, type NodeCard } from "../api";
|
||||
|
||||
function pickStrategy(n: NodeCard) {
|
||||
@@ -635,168 +630,143 @@ export default function MonitorPage() {
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="modal-grid-2">
|
||||
<section className="modal-section">
|
||||
<h4>策略详情</h4>
|
||||
<div className="kv-table-wrap">
|
||||
<table className="kv-table">
|
||||
<tbody>
|
||||
{(() => {
|
||||
const r = riskLines(detail.strat);
|
||||
const rows: { k: string; v: ReactNode }[] = [
|
||||
{ k: "定仓", v: r.sizing },
|
||||
...(r.lossPct != null
|
||||
? [{ k: "风险比例", v: r.lossPct }]
|
||||
: []),
|
||||
{ k: "出场", v: r.exit },
|
||||
...(r.openRatio
|
||||
? [{ k: "开仓比例", v: r.openRatio }]
|
||||
: []),
|
||||
{ k: "杠杆", v: r.leverage },
|
||||
{
|
||||
k: "状态",
|
||||
v: `${detailRunning ? "运行中" : "已停"} · ${detail.phase}`,
|
||||
},
|
||||
{
|
||||
k: "模式 / 交易所",
|
||||
v: `${detail.mode} / ${detail.exchange}`,
|
||||
},
|
||||
{ k: "轮次", v: String(detail.rounds ?? "—") },
|
||||
{
|
||||
k: "组 ID",
|
||||
v: (
|
||||
<span className="mono">
|
||||
{String(
|
||||
detail.strat.group_id ||
|
||||
detail.position.group_id ||
|
||||
"—",
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
k: "保证金",
|
||||
v: String(detail.strat.perp_margin_mode || "—"),
|
||||
},
|
||||
{
|
||||
k: "名义 永续/期权",
|
||||
v: `${fmt(detail.strat.perp_qty_eth, 4)} / ${fmt(detail.strat.option_qty_eth, 4)} ETH`,
|
||||
},
|
||||
{
|
||||
k: "出场目标",
|
||||
v: `${fmt(detail.strat.exit_target_usdt, 2)} USDT`,
|
||||
},
|
||||
{ k: "指数", v: fmt(detail.index_px, 2) },
|
||||
{
|
||||
k: "合约对",
|
||||
v: (
|
||||
<span className="mono">
|
||||
{detail.pair
|
||||
? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}`
|
||||
: "—"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
if (detail.strat.last_error) {
|
||||
rows.push({
|
||||
k: "最近错误",
|
||||
v: (
|
||||
<span className="err soft">
|
||||
{String(detail.strat.last_error)}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
}
|
||||
return rows.map((row) => (
|
||||
<tr key={row.k}>
|
||||
<th scope="row">{row.k}</th>
|
||||
<td>{row.v}</td>
|
||||
</tr>
|
||||
));
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="modal-section">
|
||||
<h4>整体统计</h4>
|
||||
{detailStatsLoading ? (
|
||||
<p className="meta">正在从策略机拉取统计…</p>
|
||||
) : null}
|
||||
{detailStatsErr ? (
|
||||
<p className="err soft">{detailStatsErr}</p>
|
||||
) : null}
|
||||
{detailStats ? (
|
||||
<div className="kv-table-wrap">
|
||||
<table className="kv-table">
|
||||
<section className="modal-section">
|
||||
<h4>策略详情</h4>
|
||||
{(() => {
|
||||
const r = riskLines(detail.strat);
|
||||
return (
|
||||
<div className="legs-table-wrap">
|
||||
<table className="legs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>定仓</th>
|
||||
{r.lossPct != null ? <th>风险比例</th> : null}
|
||||
<th>出场</th>
|
||||
{r.openRatio ? <th>开仓比例</th> : null}
|
||||
<th>杠杆</th>
|
||||
<th>状态</th>
|
||||
<th>模式/交易所</th>
|
||||
<th>轮次</th>
|
||||
<th>组 ID</th>
|
||||
<th>保证金</th>
|
||||
<th>名义永续/期权</th>
|
||||
<th>出场目标</th>
|
||||
<th>指数</th>
|
||||
<th>合约对</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">组数 / 胜率</th>
|
||||
<td className="mono">
|
||||
{detailStats.groups} /{" "}
|
||||
{(detailStats.win_rate * 100).toFixed(1)}%
|
||||
<td>{r.sizing}</td>
|
||||
{r.lossPct != null ? <td>{r.lossPct}</td> : null}
|
||||
<td>{r.exit}</td>
|
||||
{r.openRatio ? <td>{r.openRatio}</td> : null}
|
||||
<td>{r.leverage}</td>
|
||||
<td>
|
||||
{detailRunning ? "运行中" : "已停"} · {detail.phase}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">总盈亏</th>
|
||||
<td
|
||||
className={`mono ${pnlClass(detailStats.total_pnl)}`}
|
||||
>
|
||||
{fmt(detailStats.total_pnl, 2)} USDT
|
||||
<td>
|
||||
{detail.mode} / {detail.exchange}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">永续手续费</th>
|
||||
<td>{detail.rounds ?? "—"}</td>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.fees_perp ?? 0, 4)}
|
||||
{String(
|
||||
detail.strat.group_id ||
|
||||
detail.position.group_id ||
|
||||
"—",
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">期权手续费</th>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.fees_option ?? 0, 4)}
|
||||
<td>{String(detail.strat.perp_margin_mode || "—")}</td>
|
||||
<td>
|
||||
{fmt(detail.strat.perp_qty_eth, 4)} /{" "}
|
||||
{fmt(detail.strat.option_qty_eth, 4)} ETH
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">手续费合计</th>
|
||||
<td>{fmt(detail.strat.exit_target_usdt, 2)} USDT</td>
|
||||
<td>{fmt(detail.index_px, 2)}</td>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.total_fees, 4)}
|
||||
</td>
|
||||
</tr>
|
||||
{(detailStats.show_slip ??
|
||||
detailStats.mode !== "LIVE") ? (
|
||||
<tr>
|
||||
<th scope="row">滑点合计</th>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.total_slip ?? 0, 4)}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
<tr>
|
||||
<th scope="row">平仓原因</th>
|
||||
<td className="mono">
|
||||
{Object.keys(detailStats.close_reasons || {})
|
||||
.length === 0
|
||||
? "—"
|
||||
: Object.entries(detailStats.close_reasons)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([k, n]) => (
|
||||
<div key={k}>
|
||||
{closeReasonZh(k)} × {n}
|
||||
</div>
|
||||
))}
|
||||
{detail.pair
|
||||
? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}`
|
||||
: "—"}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : !detailStatsLoading && !detailStatsErr ? (
|
||||
<p className="meta">暂无统计</p>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{detail.strat.last_error ? (
|
||||
<p className="err soft" style={{ marginTop: 8 }}>
|
||||
最近错误：{String(detail.strat.last_error)}
|
||||
</p>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="modal-section">
|
||||
<h4>整体统计</h4>
|
||||
{detailStatsLoading ? (
|
||||
<p className="meta">正在从策略机拉取统计…</p>
|
||||
) : null}
|
||||
{detailStatsErr ? (
|
||||
<p className="err soft">{detailStatsErr}</p>
|
||||
) : null}
|
||||
{detailStats ? (
|
||||
<div className="legs-table-wrap">
|
||||
<table className="legs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>组数/胜率</th>
|
||||
<th>总盈亏</th>
|
||||
<th>永续手续费</th>
|
||||
<th>期权手续费</th>
|
||||
<th>手续费合计</th>
|
||||
{(detailStats.show_slip ??
|
||||
detailStats.mode !== "LIVE") ? (
|
||||
<th>滑点合计</th>
|
||||
) : null}
|
||||
<th>平仓原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="mono">
|
||||
{detailStats.groups} /{" "}
|
||||
{(detailStats.win_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className={pnlClass(detailStats.total_pnl)}>
|
||||
{fmt(detailStats.total_pnl, 2)} USDT
|
||||
</td>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.fees_perp ?? 0, 4)}
|
||||
</td>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.fees_option ?? 0, 4)}
|
||||
</td>
|
||||
<td className="mono">
|
||||
{fmt(detailStats.total_fees, 4)}
|
||||
</td>
|
||||
{(detailStats.show_slip ??
|
||||
detailStats.mode !== "LIVE") ? (
|
||||
<td className="mono">
|
||||
{fmt(detailStats.total_slip ?? 0, 4)}
|
||||
</td>
|
||||
) : null}
|
||||
<td className="mono">
|
||||
{Object.keys(detailStats.close_reasons || {})
|
||||
.length === 0
|
||||
? "—"
|
||||
: Object.entries(detailStats.close_reasons)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.map(([k, n]) => `${closeReasonZh(k)}×${n}`)
|
||||
.join(" · ")}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : !detailStatsLoading && !detailStatsErr ? (
|
||||
<p className="meta">暂无统计</p>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="modal-section">
|
||||
<h4>按组盈亏</h4>
|
||||
|
||||
@@ -451,21 +451,26 @@ td {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* 全屏遮罩；带鱼屏两侧留黑，内容始终水平垂直居中 */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(4, 8, 14, 0.88);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(4, 8, 14, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
padding: 24px 16px;
|
||||
z-index: 50;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: min(920px, 100%);
|
||||
max-height: calc(100vh - 32px);
|
||||
max-width: 920px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
@@ -474,7 +479,8 @@ td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: auto;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-panel.running {
|
||||
@@ -482,18 +488,6 @@ td {
|
||||
box-shadow: 0 0 0 1px rgba(60, 179, 113, 0.2);
|
||||
}
|
||||
|
||||
.modal-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.modal-grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -530,41 +524,6 @@ td {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.kv-table-wrap {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kv-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.kv-table th {
|
||||
width: 38%;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--muted);
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.kv-table td {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
text-align: left;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.kv-table tr:last-child th,
|
||||
.kv-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-kv {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user