Show option expiry countdown and widen settings for ultrawide/tablet.

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

frontend/src/pages/Plan.tsx

@@ -11,6 +11,28 @@ function pnlClass(n: number | null | undefined) {
   return n > 0 ? "pos-pnl-profit" : "pos-pnl-loss";
 }
 
+/** OKX 期权到期：YYMMDD 当日 08:00 UTC（上海 16:00） */
+function expiryMsFromYmd(ymd: string | null | undefined): number | null {
+  if (!ymd || ymd.length !== 6) return null;
+  const yy = 2000 + Number(ymd.slice(0, 2));
+  const mm = Number(ymd.slice(2, 4));
+  const dd = Number(ymd.slice(4, 6));
+  if (![yy, mm, dd].every((x) => Number.isFinite(x))) return null;
+  return Date.UTC(yy, mm - 1, dd, 8, 0, 0);
+}
+
+function formatCountdown(msLeft: number): string {
+  if (msLeft <= 0) return "已到期";
+  const s = Math.floor(msLeft / 1000);
+  const d = Math.floor(s / 86400);
+  const h = Math.floor((s % 86400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (d > 0) return `${d}天 ${h}时 ${String(m).padStart(2, "0")}分`;
+  if (h > 0) return `${h}时 ${String(m).padStart(2, "0")}分 ${String(sec).padStart(2, "0")}秒`;
+  return `${m}分 ${String(sec).padStart(2, "0")}秒`;
+}
+
 const PHASE_ZH: Record<string, string> = {
   idle: "空闲",
   wait_signal: "等待信号",
@@ -29,6 +51,7 @@ export default function PlanPage() {
   const [plan, setPlan] = useState<PlanState | null>(null);
   const [err, setErr] = useState("");
   const [busy, setBusy] = useState("");
+  const [nowMs, setNowMs] = useState(() => Date.now());
 
   async function refresh() {
     try {
@@ -50,6 +73,11 @@ export default function PlanPage() {
     return () => window.clearInterval(t);
   }, []);
 
+  useEffect(() => {
+    const t = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(t);
+  }, []);
+
   async function act(path: string, label: string) {
     setBusy(label);
     setErr("");
@@ -84,6 +112,12 @@ export default function PlanPage() {
       ? `权利金×${fmt(plan?.premium_exit_multiple ?? 1, 2)}`
       : `固定 ${fmt(plan?.net_profit_target ?? 15)} U`;
   const phaseLabel = PHASE_ZH[plan?.phase || ""] || plan?.phase || "—";
+  const expiryMs =
+    pos?.expiry_ms ?? expiryMsFromYmd(pos?.expiry_ymd) ?? null;
+  const countdown =
+    open && expiryMs != null ? formatCountdown(expiryMs - nowMs) : "—";
+  const countdownUrgent =
+    open && expiryMs != null && expiryMs - nowMs > 0 && expiryMs - nowMs < 6 * 3600_000;
 
   return (
     <div>
@@ -290,6 +324,14 @@ export default function PlanPage() {
                   </span>
                 </div>
                 <div className="pos-grid">
+                  <div className="pos-cell pos-cell-wide">
+                    <span className="pos-label">到期倒计时</span>
+                    <span
+                      className={`pos-value mono ${countdownUrgent ? "pos-countdown-urgent" : ""}`}
+                    >
+                      {countdown}
+                    </span>
+                  </div>
                   <div className="pos-cell">
                     <span className="pos-label">开仓均价</span>
                     <span className="pos-value mono">{fmt(pos?.option_entry_px)}</span>