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 <cursoragent@cursor.com>

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<FundsSummary | null>(null);
+  const [rulesOpen, setRulesOpen] = useState(false);
 
   const load = useCallback(() => {
     apiFetch<FundsSummary>("/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 (
-    <div className="funds-bar" aria-label="资金与统计">
-      <div className="funds-item funds-item--primary">
-        <div className="funds-label">交易所</div>
-        <div className="funds-value">{s.exchange || "—"}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">交易日</div>
-        <div className="funds-value mono">{s.trading_day}</div>
-      </div>
-      <div className="funds-item funds-item--primary">
-        <div className="funds-label">总交易</div>
-        <div className="funds-value mono">{s.total_trades}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">胜率</div>
-        <div className="funds-value mono">
-          {(s.win_rate * 100).toFixed(0)}%
+    <div className="funds-bar-shell">
+      <div className="funds-bar-inner">
+        <div className="funds-bar" aria-label="资金与统计">
+          <div className="funds-item funds-item--primary">
+            <div className="funds-label">交易所</div>
+            <div className="funds-value">{s.exchange || "—"}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">交易日</div>
+            <div className="funds-value mono">{s.trading_day}</div>
+          </div>
+          <div className="funds-item funds-item--primary">
+            <div className="funds-label">总交易</div>
+            <div className="funds-value mono">{s.total_trades}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">胜率</div>
+            <div className="funds-value mono">
+              {(s.win_rate * 100).toFixed(0)}%
+            </div>
+          </div>
+          <div className="funds-item" title="平均盈利 ÷ 平均亏损">
+            <div className="funds-label">盈亏比</div>
+            <div className="funds-value mono">
+              {s.profit_loss_ratio != null
+                ? s.profit_loss_ratio.toFixed(2)
+                : "—"}
+            </div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">总资金</div>
+            <div className="funds-value mono">{fmtU(s.total_funds)}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">资金账户</div>
+            <div className="funds-value mono">{fmtU(s.funding_usdt)}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">交易账户</div>
+            <div className="funds-value mono">{fmtU(s.trading_usdt)}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">期权资金账户</div>
+            <div className="funds-value mono">{s.options_funding_label}</div>
+          </div>
+          <div className="funds-item">
+            <div className="funds-label">期权交易账户</div>
+            <div className="funds-value mono">{s.options_trading_label}</div>
+          </div>
+          <div className="funds-item funds-item--pnl">
+            <div className="funds-label">实时盈亏</div>
+            <div className={`funds-value mono ${pnlClass(s.realtime_pnl)}`}>
+              {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)}
+            </div>
+          </div>
         </div>
-      </div>
-      <div className="funds-item" title="平均盈利 ÷ 平均亏损">
-        <div className="funds-label">盈亏比</div>
-        <div className="funds-value mono">
-          {s.profit_loss_ratio != null ? s.profit_loss_ratio.toFixed(2) : "—"}
-        </div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">总资金</div>
-        <div className="funds-value mono">{fmtU(s.total_funds)}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">资金账户</div>
-        <div className="funds-value mono">{fmtU(s.funding_usdt)}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">交易账户</div>
-        <div className="funds-value mono">{fmtU(s.trading_usdt)}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">期权资金账户</div>
-        <div className="funds-value mono">{s.options_funding_label}</div>
-      </div>
-      <div className="funds-item">
-        <div className="funds-label">期权交易账户</div>
-        <div className="funds-value mono">{s.options_trading_label}</div>
-      </div>
-      <div className="funds-item funds-item--pnl">
-        <div className="funds-label">实时盈亏</div>
-        <div className={`funds-value mono ${pnlClass(s.realtime_pnl)}`}>
-          {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)}
+
+        <div className="funds-rules">
+          <button
+            type="button"
+            className="funds-rules-toggle"
+            aria-expanded={rulesOpen}
+            onClick={() => setRulesOpen((v) => !v)}
+          >
+            <span>规则说明</span>
+            <span className="funds-rules-chevron" aria-hidden>
+              {rulesOpen ? "▾" : "▸"}
+            </span>
+          </button>
+          {rulesOpen ? (
+            <p className="funds-rules-body meta">{rulesText}</p>
+          ) : null}
         </div>
       </div>
     </div>