From f49365b4d4dbea8523451d2a8b4352b0b054a9ac Mon Sep 17 00:00:00 2001 From: dekun Date: Wed, 29 Jul 2026 17:37:34 +0800 Subject: [PATCH] Constrain funds bar width and fold strategy rules. Match page max-width on ultrawide and move the plan subtitle into a collapsible rules section under the funds strip. Co-authored-by: Cursor --- backend/app/api/funds.py | 3 + docs/更新说明.md | 9 ++ frontend/src/components/FundsBar.tsx | 125 +++++++++++++++++---------- frontend/src/pages/Plan.tsx | 8 -- frontend/src/styles/app.css | 59 ++++++++++++- 5 files changed, 145 insertions(+), 59 deletions(-) diff --git a/backend/app/api/funds.py b/backend/app/api/funds.py index 3b18d92..a9e49f5 100644 --- a/backend/app/api/funds.py +++ b/backend/app/api/funds.py @@ -163,6 +163,9 @@ async def funds_summary(_user: Annotated[str, Depends(require_user)]) -> dict[st "options_trading_label": _fmt_opt(opt_t_usdc, opt_t_usdt), "realtime_pnl": realtime, "usdc_usdt_rate": rate, + "perp_inst_id": str( + db.get_setting("perp_inst_id") or s.perp_inst_id or "ETH-USDT-SWAP" + ), "updated_at_ms": int(datetime.now(timezone.utc).timestamp() * 1000), } diff --git a/docs/更新说明.md b/docs/更新说明.md index ef08907..081b60e 100644 --- a/docs/更新说明.md +++ b/docs/更新说明.md @@ -5,6 +5,15 @@ --- +## 2026-07-29 — 资金条与内容区同宽；规则说明折叠 + +### 变更 + +1. 资金横条内容区与下方页面同宽（带鱼屏不再拉满全屏）。 +2. 原计划页说明文案收入资金条下方「规则说明」折叠。 + +--- + ## 2026-07-29 — 资金条 + USDT/USDC 兑换划转（SIM/LIVE） ### 变更 diff --git a/frontend/src/components/FundsBar.tsx b/frontend/src/components/FundsBar.tsx index 6a197bc..1b52d70 100644 --- a/frontend/src/components/FundsBar.tsx +++ b/frontend/src/components/FundsBar.tsx @@ -15,6 +15,7 @@ export type FundsSummary = { options_trading_label: string; realtime_pnl: number | null; usdc_usdt_rate?: number; + perp_inst_id?: string; detail?: string; }; @@ -30,6 +31,7 @@ function pnlClass(n: number | null | undefined) { export default function FundsBar() { const [s, setS] = useState(null); + const [rulesOpen, setRulesOpen] = useState(false); const load = useCallback(() => { apiFetch("/api/funds/summary") @@ -47,56 +49,83 @@ export default function FundsBar() { if (!s?.ok) return null; + const rulesText = `行情 ${s.exchange || "OKX"} · ${ + s.perp_inst_id || "ETH-USDT-SWAP" + } · 目标平仓(双腿/远虚只平永续) · 未达标则到期结算`; + return ( -
-
-
交易所
-
{s.exchange || "—"}
-
-
-
交易日
-
{s.trading_day}
-
-
-
总交易
-
{s.total_trades}
-
-
-
胜率
-
- {(s.win_rate * 100).toFixed(0)}% +
+
+
+
+
交易所
+
{s.exchange || "—"}
+
+
+
交易日
+
{s.trading_day}
+
+
+
总交易
+
{s.total_trades}
+
+
+
胜率
+
+ {(s.win_rate * 100).toFixed(0)}% +
+
+
+
盈亏比
+
+ {s.profit_loss_ratio != null + ? s.profit_loss_ratio.toFixed(2) + : "—"} +
+
+
+
总资金
+
{fmtU(s.total_funds)}
+
+
+
资金账户
+
{fmtU(s.funding_usdt)}
+
+
+
交易账户
+
{fmtU(s.trading_usdt)}
+
+
+
期权资金账户
+
{s.options_funding_label}
+
+
+
期权交易账户
+
{s.options_trading_label}
+
+
+
实时盈亏
+
+ {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)} +
+
-
-
-
盈亏比
-
- {s.profit_loss_ratio != null ? s.profit_loss_ratio.toFixed(2) : "—"} -
-
-
-
总资金
-
{fmtU(s.total_funds)}
-
-
-
资金账户
-
{fmtU(s.funding_usdt)}
-
-
-
交易账户
-
{fmtU(s.trading_usdt)}
-
-
-
期权资金账户
-
{s.options_funding_label}
-
-
-
期权交易账户
-
{s.options_trading_label}
-
-
-
实时盈亏
-
- {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)} + +
+ + {rulesOpen ? ( +

{rulesText}

+ ) : null}
diff --git a/frontend/src/pages/Plan.tsx b/frontend/src/pages/Plan.tsx index 040f39a..cc35d47 100644 --- a/frontend/src/pages/Plan.tsx +++ b/frontend/src/pages/Plan.tsx @@ -167,14 +167,6 @@ export default function PlanPage() {

自动对冲计划

-

- 行情 {(snap?.exchange || "okx").toUpperCase()} - {snap?.perp_inst_id ? ` · ${snap.perp_inst_id}` : ""} · - 目标平仓(双腿/远虚只平永续) · 未达标则到期结算 - {plan?.mode === "LIVE" && plan.live_ready === false - ? ` · 未就绪: ${plan.live_ready_reason || "请配置 API"}` - : ""} -

{/* 手机端一屏监控卡：状态 / 净利 / 倒计时 */} diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 5d01e09..50ddb37 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -83,13 +83,32 @@ input { grid-template-rows: auto auto 1fr; } +.funds-bar-shell { + border-bottom: 1px solid var(--line); + background: rgba(18, 22, 28, 0.96); +} + +.funds-bar-inner { + width: 100%; + max-width: min(1680px, 100%); + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} + +@media (min-width: 1800px) { + .funds-bar-inner { + max-width: 1760px; + padding-left: 28px; + padding-right: 28px; + } +} + .funds-bar { display: flex; flex-wrap: wrap; gap: 2px 0; - padding: 8px 12px; - border-bottom: 1px solid var(--line); - background: rgba(18, 22, 28, 0.96); + padding: 8px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } @@ -128,6 +147,40 @@ input { font-variant-numeric: tabular-nums; } +.funds-rules { + padding: 2px 10px 8px; + border-top: 1px solid rgba(30, 38, 48, 0.85); +} + +.funds-rules-toggle { + display: inline-flex; + align-items: center; + gap: 6px; + margin: 0; + padding: 0; + border: none; + background: transparent; + color: var(--muted); + font-size: 12px; + cursor: pointer; +} + +.funds-rules-toggle:hover { + color: var(--text); +} + +.funds-rules-chevron { + font-size: 11px; + opacity: 0.85; +} + +.funds-rules-body { + margin: 6px 0 0; + font-size: 12px; + line-height: 1.45; + color: var(--muted); +} + .topnav { display: grid; grid-template-columns: 1fr auto 1fr;