dekun/eth_hedge_sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center detail modal at 920px with table layout for strategy and stats.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-08-02 10:06:41 +08:00
parent 18fdfc6d0a
commit b76ef0d248
2 changed files with 288 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/pages/Monitor.tsx
+142 -105
View File
@@ -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,66 +635,89 @@ export default function MonitorPage() {
</button> </button>
</header> </header>
<div className="modal-grid-2">
<section className="modal-section"> <section className="modal-section">
<h4>策略详情</h4> <h4>策略详情</h4>
<RiskParamsBox strat={detail.strat} /> <div className="kv-table-wrap">
<dl className="kv detail-kv"> <table className="kv-table">
<div> <tbody>
<dt>状态</dt> {(() => {
<dd> const r = riskLines(detail.strat);
{detailRunning ? "运行中" : "已停"} · {detail.phase} const rows: { k: string; v: ReactNode }[] = [
</dd> { k: "定仓", v: r.sizing },
</div> ...(r.lossPct != null
<div> ? [{ k: "风险比例", v: r.lossPct }]
<dt>模式 / 交易所</dt> : []),
<dd> { k: "出场", v: r.exit },
{detail.mode} / {detail.exchange} ...(r.openRatio
</dd> ? [{ k: "开仓比例", v: r.openRatio }]
</div> : []),
<div> { k: "杠杆", v: r.leverage },
<dt>轮次</dt> {
<dd>{detail.rounds ?? "—"}</dd> k: "状态",
</div> v: `${detailRunning ? "运行中" : "已停"} · ${detail.phase}`,
<div> },
<dt>组 ID</dt> {
<dd className="mono"> k: "模式 / 交易所",
{String(detail.strat.group_id || detail.position.group_id || "—")} v: `${detail.mode} / ${detail.exchange}`,
</dd> },
</div> { k: "轮次", v: String(detail.rounds ?? "—") },
<div> {
<dt>保证金</dt> k: "组 ID",
<dd>{String(detail.strat.perp_margin_mode || "—")}</dd> v: (
</div> <span className="mono">
<div> {String(
<dt>名义 永续/期权</dt> detail.strat.group_id ||
<dd> detail.position.group_id ||
{fmt(detail.strat.perp_qty_eth, 4)} /{" "} "—",
{fmt(detail.strat.option_qty_eth, 4)} ETH )}
</dd> </span>
</div> ),
<div> },
<dt>出场目标</dt> {
<dd>{fmt(detail.strat.exit_target_usdt, 2)} USDT</dd> k: "保证金",
</div> v: String(detail.strat.perp_margin_mode || "—"),
<div> },
<dt>指数</dt> {
<dd>{fmt(detail.index_px, 2)}</dd> k: "名义 永续/期权",
</div> v: `${fmt(detail.strat.perp_qty_eth, 4)} / ${fmt(detail.strat.option_qty_eth, 4)} ETH`,
<div> },
<dt>合约对</dt> {
<dd className="mono"> 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
? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}` ? `${detail.pair.expiry_ymd || "?"} @ ${detail.pair.strike ?? "?"}`
: "—"} : "—"}
</dd> </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>
{detail.strat.last_error ? (
<div className="span-2">
<dt>最近错误</dt>
<dd className="err soft">{String(detail.strat.last_error)}</dd>
</div>
) : null}
</dl>
</section> </section>
<section className="modal-section"> <section className="modal-section">
@@ -701,52 +729,56 @@ export default function MonitorPage() {
<p className="err soft">{detailStatsErr}</p> <p className="err soft">{detailStatsErr}</p>
) : null} ) : null}
{detailStats ? ( {detailStats ? (
<> <div className="kv-table-wrap">
<dl className="kv detail-kv"> <table className="kv-table">
<div> <tbody>
<dt>组数 / 胜率</dt> <tr>
<dd className="mono"> <th scope="row">组数 / 胜率</th>
<td className="mono">
{detailStats.groups} /{" "} {detailStats.groups} /{" "}
{(detailStats.win_rate * 100).toFixed(1)}% {(detailStats.win_rate * 100).toFixed(1)}%
</dd> </td>
</div> </tr>
<div> <tr>
<dt>总盈亏</dt> <th scope="row">总盈亏</th>
<dd className={`mono ${pnlClass(detailStats.total_pnl)}`}> <td
className={`mono ${pnlClass(detailStats.total_pnl)}`}
>
{fmt(detailStats.total_pnl, 2)} USDT {fmt(detailStats.total_pnl, 2)} USDT
</dd> </td>
</div> </tr>
<div> <tr>
<dt>永续手续费</dt> <th scope="row">永续手续费</th>
<dd className="mono"> <td className="mono">
{fmt(detailStats.fees_perp ?? 0, 4)} {fmt(detailStats.fees_perp ?? 0, 4)}
</dd> </td>
</div> </tr>
<div> <tr>
<dt>期权手续费</dt> <th scope="row">期权手续费</th>
<dd className="mono"> <td className="mono">
{fmt(detailStats.fees_option ?? 0, 4)} {fmt(detailStats.fees_option ?? 0, 4)}
</dd> </td>
</div> </tr>
<div> <tr>
<dt>手续费合计</dt> <th scope="row">手续费合计</th>
<dd className="mono"> <td className="mono">
{fmt(detailStats.total_fees, 4)} {fmt(detailStats.total_fees, 4)}
</dd> </td>
</div> </tr>
{(detailStats.show_slip ?? detailStats.mode !== "LIVE") ? ( {(detailStats.show_slip ??
<div> detailStats.mode !== "LIVE") ? (
<dt>滑点合计</dt> <tr>
<dd className="mono"> <th scope="row">滑点合计</th>
<td className="mono">
{fmt(detailStats.total_slip ?? 0, 4)} {fmt(detailStats.total_slip ?? 0, 4)}
</dd> </td>
</div> </tr>
) : null} ) : null}
<div className="span-2"> <tr>
<dt>平仓原因</dt> <th scope="row">平仓原因</th>
<dd className="mono"> <td className="mono">
{Object.keys(detailStats.close_reasons || {}).length === {Object.keys(detailStats.close_reasons || {})
0 .length === 0
? "—" ? "—"
: Object.entries(detailStats.close_reasons) : Object.entries(detailStats.close_reasons)
.sort((a, b) => b[1] - a[1]) .sort((a, b) => b[1] - a[1])
@@ -755,12 +787,23 @@ export default function MonitorPage() {
{closeReasonZh(k)} × {n} {closeReasonZh(k)} × {n}
</div> </div>
))} ))}
</dd> </td>
</tr>
</tbody>
</table>
</div> </div>
</dl> ) : !detailStatsLoading && !detailStatsErr ? (
{equityNewestFirst.length ? ( <p className="meta">暂无统计</p>
) : null}
</section>
</div>
<section className="modal-section">
<h4>按组盈亏</h4>
{detailStatsLoading ? (
<p className="meta">加载中…</p>
) : equityNewestFirst.length ? (
<> <>
<h4 style={{ marginTop: "0.75rem" }}>按组盈亏</h4>
<div className="legs-table-wrap"> <div className="legs-table-wrap">
<table className="legs-table"> <table className="legs-table">
<thead> <thead>
@@ -784,8 +827,7 @@ export default function MonitorPage() {
<div className="pager"> <div className="pager">
<span className="pager-meta"> <span className="pager-meta">
第 {equityPageSafe + 1}/{equityPageCount} 页 · 每页{" "} 第 {equityPageSafe + 1}/{equityPageCount} 页 · 每页{" "}
{EQUITY_PAGE_SIZE} 行 · 共 {equityNewestFirst.length}{" "} {EQUITY_PAGE_SIZE} 行 · 共 {equityNewestFirst.length} 组
组
</span> </span>
<div className="pager-actions"> <div className="pager-actions">
<button <button
@@ -804,10 +846,7 @@ export default function MonitorPage() {
disabled={equityPageSafe >= equityPageCount - 1} disabled={equityPageSafe >= equityPageCount - 1}
onClick={() => onClick={() =>
setEquityPage( setEquityPage(
Math.min( Math.min(equityPageCount - 1, equityPageSafe + 1),
equityPageCount - 1,
equityPageSafe + 1,
),
) )
} }
> >
@@ -819,8 +858,6 @@ export default function MonitorPage() {
) : ( ) : (
<p className="meta">暂无已平仓组</p> <p className="meta">暂无已平仓组</p>
)} )}
</>
) : null}
</section> </section>
<section className="modal-section"> <section className="modal-section">
control/frontend/src/styles.css
+67 -14
View File
@@ -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 {