Show option premium in trade detail and widen the modal.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/pages/Trades.tsx

@@ -481,6 +481,14 @@ export default function TradesPage() {
                           : "—"}
                       </span>
                     </div>
+                    <div className="kv">
+                      <span>初始权利金</span>
+                      <span className="mono">
+                        {selectedGroup.initial_premium != null
+                          ? `${fmt(selectedGroup.initial_premium)} USDT`
+                          : "—"}
+                      </span>
+                    </div>
                     <div className="kv">
                       <span>波动点数</span>
                       <span className="mono">
@@ -525,25 +533,36 @@ export default function TradesPage() {
                     </div>
                   ) : null}
 
-                  {fills.map((f) => (
+                  {fills.map((f) => {
-                    <div key={f.id} className="trade-fill kv">
+                    const isOpt = f.leg === "option";
-                      <span className="mono">
+                    const pxLabel = isOpt ? "权利金" : "价";
-                        {fillDescZh(
+                    const notional =
-                          f.leg,
+                      isOpt && f.action === "open"
-                          f.action,
+                        ? Number(f.fill_px) * Number(f.qty_eth)
-                          f.side,
+                        : null;
-                          selectedGroup.close_reason,
+                    return (
-                        )}
+                      <div key={f.id} className="trade-fill kv">
-                        {f.inst_id ? (
+                        <span className="mono">
-                          <span className="meta"> · {f.inst_id}</span>
+                          {fillDescZh(
-                        ) : null}
+                            f.leg,
-                      </span>
+                            f.action,
-                      <span className="mono">
+                            f.side,
-                        价 {f.fill_px.toFixed(4)} · 数量 {f.qty_eth} · 手续费{" "}
+                            selectedGroup.close_reason,
-                        {f.fee.toFixed(4)}
+                          )}
-                      </span>
+                          {f.inst_id ? (
-                    </div>
+                            <span className="meta"> · {f.inst_id}</span>
-                  ))}
+                          ) : null}
+                        </span>
+                        <span className="mono">
+                          {pxLabel} {f.fill_px.toFixed(4)} · 数量 {f.qty_eth}
+                          {notional != null && Number.isFinite(notional)
+                            ? ` · 合计 ${notional.toFixed(2)}`
+                            : ""}{" "}
+                          · 手续费 {f.fee.toFixed(4)}
+                        </span>
+                      </div>
+                    );
+                  })}
 
                   {summary ? (
                     <div className="trade-pnl-block">

frontend/src/styles/app.css

@@ -949,6 +949,12 @@ input {
   overflow: hidden;
 }
 
+/* 策略机交易记录详情：加宽，减少换行 */
+.modal-dialog.trade-detail-modal {
+  width: min(920px, 100%);
+  max-height: min(90vh, 960px);
+}
+
 .modal-head {
   display: flex;
   align-items: center;