Center detail modal at 920px with table layout for strategy and stats.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -1,4 +1,9 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
import {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
type ReactNode,
|
||||||
|
} from "react";
|
||||||
import { apiFetch, clearSession, getToken, type NodeCard } from "../api";
|
import { apiFetch, clearSession, getToken, type NodeCard } from "../api";
|
||||||
|
|
||||||
function pickStrategy(n: NodeCard) {
|
function pickStrategy(n: NodeCard) {
|
||||||
@@ -630,197 +635,229 @@ export default function MonitorPage() {
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="modal-section">
|
<div className="modal-grid-2">
|
||||||
<h4>策略详情</h4>
|
<section className="modal-section">
|
||||||
<RiskParamsBox strat={detail.strat} />
|
<h4>策略详情</h4>
|
||||||
<dl className="kv detail-kv">
|
<div className="kv-table-wrap">
|
||||||
<div>
|
<table className="kv-table">
|
||||||
<dt>状态</dt>
|
<tbody>
|
||||||
<dd>
|
{(() => {
|
||||||
{detailRunning ? "运行中" : "已停"} · {detail.phase}
|
const r = riskLines(detail.strat);
|
||||||
</dd>
|
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>
|
</div>
|
||||||
<div>
|
</section>
|
||||||
<dt>模式 / 交易所</dt>
|
|
||||||
<dd>
|
<section className="modal-section">
|
||||||
{detail.mode} / {detail.exchange}
|
<h4>整体统计</h4>
|
||||||
</dd>
|
{detailStatsLoading ? (
|
||||||
</div>
|
<p className="meta">正在从策略机拉取统计…</p>
|
||||||
<div>
|
|
||||||
<dt>轮次</dt>
|
|
||||||
<dd>{detail.rounds ?? "—"}</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>组 ID</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{String(detail.strat.group_id || detail.position.group_id || "—")}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>保证金</dt>
|
|
||||||
<dd>{String(detail.strat.perp_margin_mode || "—")}</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>名义 永续/期权</dt>
|
|
||||||
<dd>
|
|
||||||
{fmt(detail.strat.perp_qty_eth, 4)} /{" "}
|
|
||||||
{fmt(detail.strat.option_qty_eth, 4)} ETH
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>出场目标</dt>
|
|
||||||
<dd>{fmt(detail.strat.exit_target_usdt, 2)} USDT</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>指数</dt>
|
|
||||||
<dd>{fmt(detail.index_px, 2)}</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>合约对</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{detail.pair
|
|
||||||
? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}`
|
|
||||||
: "—"}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
{detail.strat.last_error ? (
|
|
||||||
<div className="span-2">
|
|
||||||
<dt>最近错误</dt>
|
|
||||||
<dd className="err soft">{String(detail.strat.last_error)}</dd>
|
|
||||||
</div>
|
|
||||||
) : null}
|
) : null}
|
||||||
</dl>
|
{detailStatsErr ? (
|
||||||
</section>
|
<p className="err soft">{detailStatsErr}</p>
|
||||||
|
) : null}
|
||||||
|
{detailStats ? (
|
||||||
|
<div className="kv-table-wrap">
|
||||||
|
<table className="kv-table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">组数 / 胜率</th>
|
||||||
|
<td className="mono">
|
||||||
|
{detailStats.groups} /{" "}
|
||||||
|
{(detailStats.win_rate * 100).toFixed(1)}%
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">总盈亏</th>
|
||||||
|
<td
|
||||||
|
className={`mono ${pnlClass(detailStats.total_pnl)}`}
|
||||||
|
>
|
||||||
|
{fmt(detailStats.total_pnl, 2)} USDT
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">永续手续费</th>
|
||||||
|
<td className="mono">
|
||||||
|
{fmt(detailStats.fees_perp ?? 0, 4)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">期权手续费</th>
|
||||||
|
<td className="mono">
|
||||||
|
{fmt(detailStats.fees_option ?? 0, 4)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">手续费合计</th>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
) : !detailStatsLoading && !detailStatsErr ? (
|
||||||
|
<p className="meta">暂无统计</p>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section className="modal-section">
|
<section className="modal-section">
|
||||||
<h4>整体统计</h4>
|
<h4>按组盈亏</h4>
|
||||||
{detailStatsLoading ? (
|
{detailStatsLoading ? (
|
||||||
<p className="meta">正在从策略机拉取统计…</p>
|
<p className="meta">加载中…</p>
|
||||||
) : null}
|
) : equityNewestFirst.length ? (
|
||||||
{detailStatsErr ? (
|
|
||||||
<p className="err soft">{detailStatsErr}</p>
|
|
||||||
) : null}
|
|
||||||
{detailStats ? (
|
|
||||||
<>
|
<>
|
||||||
<dl className="kv detail-kv">
|
<div className="legs-table-wrap">
|
||||||
<div>
|
<table className="legs-table">
|
||||||
<dt>组数 / 胜率</dt>
|
<thead>
|
||||||
<dd className="mono">
|
<tr>
|
||||||
{detailStats.groups} /{" "}
|
<th>组</th>
|
||||||
{(detailStats.win_rate * 100).toFixed(1)}%
|
<th>盈亏</th>
|
||||||
</dd>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{equityPageRows.map((x) => (
|
||||||
|
<tr key={x.group_id}>
|
||||||
|
<td className="mono">{x.group_id}</td>
|
||||||
|
<td className={pnlClass(x.realized_pnl)}>
|
||||||
|
{fmt(x.realized_pnl, 2)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="pager">
|
||||||
|
<span className="pager-meta">
|
||||||
|
第 {equityPageSafe + 1}/{equityPageCount} 页 · 每页{" "}
|
||||||
|
{EQUITY_PAGE_SIZE} 行 · 共 {equityNewestFirst.length} 组
|
||||||
|
</span>
|
||||||
|
<div className="pager-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn ghost"
|
||||||
|
disabled={equityPageSafe <= 0}
|
||||||
|
onClick={() =>
|
||||||
|
setEquityPage(Math.max(0, equityPageSafe - 1))
|
||||||
|
}
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn ghost"
|
||||||
|
disabled={equityPageSafe >= equityPageCount - 1}
|
||||||
|
onClick={() =>
|
||||||
|
setEquityPage(
|
||||||
|
Math.min(equityPageCount - 1, equityPageSafe + 1),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<dt>总盈亏</dt>
|
|
||||||
<dd className={`mono ${pnlClass(detailStats.total_pnl)}`}>
|
|
||||||
{fmt(detailStats.total_pnl, 2)} USDT
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>永续手续费</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{fmt(detailStats.fees_perp ?? 0, 4)}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>期权手续费</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{fmt(detailStats.fees_option ?? 0, 4)}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>手续费合计</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{fmt(detailStats.total_fees, 4)}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
{(detailStats.show_slip ?? detailStats.mode !== "LIVE") ? (
|
|
||||||
<div>
|
|
||||||
<dt>滑点合计</dt>
|
|
||||||
<dd className="mono">
|
|
||||||
{fmt(detailStats.total_slip ?? 0, 4)}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="span-2">
|
|
||||||
<dt>平仓原因</dt>
|
|
||||||
<dd 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>
|
|
||||||
))}
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
{equityNewestFirst.length ? (
|
|
||||||
<>
|
|
||||||
<h4 style={{ marginTop: "0.75rem" }}>按组盈亏</h4>
|
|
||||||
<div className="legs-table-wrap">
|
|
||||||
<table className="legs-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>组</th>
|
|
||||||
<th>盈亏</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{equityPageRows.map((x) => (
|
|
||||||
<tr key={x.group_id}>
|
|
||||||
<td className="mono">{x.group_id}</td>
|
|
||||||
<td className={pnlClass(x.realized_pnl)}>
|
|
||||||
{fmt(x.realized_pnl, 2)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div className="pager">
|
|
||||||
<span className="pager-meta">
|
|
||||||
第 {equityPageSafe + 1}/{equityPageCount} 页 · 每页{" "}
|
|
||||||
{EQUITY_PAGE_SIZE} 行 · 共 {equityNewestFirst.length}{" "}
|
|
||||||
组
|
|
||||||
</span>
|
|
||||||
<div className="pager-actions">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn ghost"
|
|
||||||
disabled={equityPageSafe <= 0}
|
|
||||||
onClick={() =>
|
|
||||||
setEquityPage(Math.max(0, equityPageSafe - 1))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
上一页
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn ghost"
|
|
||||||
disabled={equityPageSafe >= equityPageCount - 1}
|
|
||||||
onClick={() =>
|
|
||||||
setEquityPage(
|
|
||||||
Math.min(
|
|
||||||
equityPageCount - 1,
|
|
||||||
equityPageSafe + 1,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
下一页
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<p className="meta">暂无已平仓组</p>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : (
|
||||||
|
<p className="meta">暂无已平仓组</p>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="modal-section">
|
<section className="modal-section">
|
||||||
|
|||||||
@@ -454,27 +454,44 @@ td {
|
|||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(4, 8, 14, 0.92);
|
background: rgba(4, 8, 14, 0.88);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-panel {
|
.modal-panel {
|
||||||
width: 100%;
|
width: min(920px, 100%);
|
||||||
height: 100%;
|
max-height: calc(100vh - 32px);
|
||||||
max-height: none;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border: none;
|
border: 1px solid var(--line);
|
||||||
border-radius: 0;
|
border-radius: 12px;
|
||||||
padding: 20px 24px 28px;
|
padding: 16px 18px 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 12px;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-panel.running {
|
.modal-panel.running {
|
||||||
box-shadow: inset 0 0 0 2px rgba(60, 179, 113, 0.45);
|
border-color: rgba(60, 179, 113, 0.65);
|
||||||
|
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 {
|
.pager {
|
||||||
@@ -482,12 +499,12 @@ td {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-top: 10px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pager-meta {
|
.pager-meta {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -501,15 +518,51 @@ td {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-head h3 {
|
.modal-head h3 {
|
||||||
margin: 0 0 4px;
|
margin: 0 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-section h4 {
|
.modal-section h4 {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 6px;
|
||||||
font-size: 0.95rem;
|
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 {
|
.detail-kv {
|
||||||
|
|||||||
Reference in New Issue
Block a user