Match options branding: title prefix and ETH/BTC header quotes.

Use 「加密货币 | OKX 对冲」 and show live top-right ETHUSDT/BTCUSDT quotes like the options instance.

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

app.py

@@ -7134,6 +7134,36 @@ def options_main_page():
     return render_main_page("options")
 
 
+@app.route("/api/header-quotes")
+@login_required
+def api_header_quotes():
+    """顶栏 ETH/BTC 报价(公共 ticker last + 24h 涨跌)."""
+    from lib.exchange.okx_public_http_lib import fetch_swap_ticker
+
+    quotes = []
+    for base in ("ETH", "BTC"):
+        item: dict = {"base": base, "symbol": f"{base}USDT"}
+        try:
+            row = fetch_swap_ticker(base)
+            last = float(row.get("last") or row.get("markPx") or 0)
+            open24 = float(row.get("open24h") or row.get("sodUtc0") or 0)
+            change = (last - open24) if open24 > 0 else 0.0
+            pct = (change / open24 * 100.0) if open24 > 0 else 0.0
+            item.update(
+                {
+                    "last": last,
+                    "open24h": open24,
+                    "change": change,
+                    "pct": pct,
+                    "mark": float(row.get("markPx") or last or 0) or None,
+                }
+            )
+        except Exception as e:
+            item["error"] = str(e)[:160]
+        quotes.append(item)
+    return jsonify({"ok": True, "quotes": quotes})
+
+
 @app.route("/api/account_snapshot")
 @login_required
 def api_account_snapshot():
@@ -9408,6 +9438,7 @@ _OPTIONS_PANEL_JS = os.path.join(_REPO_STATIC_DIR, "options_panel.js")
 _OPTIONS_EXPIRY_COUNTDOWN_JS = os.path.join(_REPO_STATIC_DIR, "options_expiry_countdown.js")
 _OPTIONS_SETTINGS_JS = os.path.join(_REPO_STATIC_DIR, "options_settings.js")
 _HEDGE_PLAN_JS = os.path.join(_REPO_STATIC_DIR, "hedge_plan.js")
+_HEADER_LIVE_QUOTES_JS = os.path.join(_REPO_STATIC_DIR, "header_live_quotes.js")
 
 
 @app.route("/static/ai_review_render.js")
@@ -9417,6 +9448,13 @@ def static_ai_review_render_js():
     return send_file(_AI_REVIEW_RENDER_JS, mimetype="application/javascript; charset=utf-8")
 
 
+@app.route("/static/header_live_quotes.js")
+def static_header_live_quotes_js():
+    if not os.path.isfile(_HEADER_LIVE_QUOTES_JS):
+        return Response("not found", status=404, mimetype="text/plain; charset=utf-8")
+    return send_file(_HEADER_LIVE_QUOTES_JS, mimetype="application/javascript; charset=utf-8")
+
+
 @app.route("/static/form_submit_guard.js")
 def static_form_submit_guard_js():
     if not os.path.isfile(_FORM_SUBMIT_GUARD_JS):

lib/common/static/header_live_quotes.js

@@ -0,0 +1,107 @@
+/**
+ * 顶栏右上角 ETH/BTC 实时报价(公共 ticker).
+ */
+(function (global) {
+  const BASES = ["ETH", "BTC"];
+
+  function $(id) {
+    return document.getElementById(id);
+  }
+
+  function refreshMs() {
+    const raw = document.body && document.body.getAttribute("data-price-refresh-ms");
+    const n = Number(raw);
+    return n > 2000 ? n : 5000;
+  }
+
+  function fmtLast(base, v) {
+    if (v == null || Number.isNaN(Number(v))) return "—";
+    const n = Number(v);
+    if (base === "BTC") {
+      return n.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
+    }
+    return n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  function fmtChg(base, v) {
+    if (v == null || Number.isNaN(Number(v))) return "—";
+    const n = Number(v);
+    const abs = Math.abs(n);
+    const body =
+      base === "BTC"
+        ? abs.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+        : abs.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    if (n > 0) return "+" + body;
+    if (n < 0) return "-" + body;
+    return body;
+  }
+
+  function fmtPct(v) {
+    if (v == null || Number.isNaN(Number(v))) return "—";
+    const n = Number(v);
+    const body = Math.abs(n).toFixed(2) + "%";
+    if (n > 0) return "+" + body;
+    if (n < 0) return "-" + body;
+    return body;
+  }
+
+  function paintRow(row, q) {
+    if (!row || !q) return;
+    const last = row.querySelector('[data-hlq="last"]');
+    const chg = row.querySelector('[data-hlq="chg"]');
+    const pct = row.querySelector('[data-hlq="pct"]');
+    const base = row.getAttribute("data-base") || "";
+    if (last) last.textContent = fmtLast(base, q.last);
+    if (chg) chg.textContent = fmtChg(base, q.change);
+    if (pct) pct.textContent = fmtPct(q.pct);
+    const up = Number(q.change) > 0 || Number(q.pct) > 0;
+    const down = Number(q.change) < 0 || Number(q.pct) < 0;
+    row.classList.toggle("is-up", up);
+    row.classList.toggle("is-down", down);
+  }
+
+  async function fetchQuotes() {
+    const r = await fetch("/api/header-quotes", {
+      credentials: "same-origin",
+      cache: "no-store",
+    });
+    const d = await r.json();
+    if (!d || !d.ok) throw new Error((d && d.msg) || "行情失败");
+    return d.quotes || [];
+  }
+
+  async function tick() {
+    const host = $("header-live-quotes");
+    if (!host) return;
+    try {
+      const quotes = await fetchQuotes();
+      BASES.forEach(function (base) {
+        const row = host.querySelector('.hlq-row[data-base="' + base + '"]');
+        const q = quotes.find(function (x) {
+          return String((x && x.base) || "").toUpperCase() === base;
+        });
+        if (row && q && !q.error) paintRow(row, q);
+      });
+    } catch (_) {
+      /* 静默:保持上次有效行情 */
+    }
+  }
+
+  let timer = null;
+  function boot() {
+    if (!$("header-live-quotes")) return;
+    void tick();
+    if (timer) clearInterval(timer);
+    timer = setInterval(function () {
+      void tick();
+    }, refreshMs());
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+
+  global.HeaderLiveQuotes = { refresh: tick, boot: boot };
+})(window);

lib/common/static/instance_theme.css

@@ -561,6 +561,129 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
   margin-top: 6px;
 }
 
+/* 顶栏品牌:加密货币 | OKX 对冲 + 右上角 ETH/BTC 报价 */
+.header.header--brand {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 52px;
+  margin-bottom: 10px;
+  padding: 0 168px 0 12px;
+  box-sizing: border-box;
+}
+.header.header--brand .brand-title {
+  margin: 0;
+  font-size: 1.7rem;
+  font-weight: 700;
+  color: #e8ecff;
+  text-align: center;
+  line-height: 1.25;
+  letter-spacing: 0.02em;
+}
+.header.header--brand .brand-prefix {
+  color: #e8ecff;
+}
+.header.header--brand .brand-sep {
+  display: inline-block;
+  margin: 0 0.45em;
+  color: #9aa3bf;
+  font-weight: 500;
+}
+.header.header--brand .brand-product {
+  color: #e8ecff;
+}
+.header-live-quotes {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
+  z-index: 2;
+  pointer-events: none;
+}
+.header-live-quotes .hlq-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.72rem;
+  line-height: 1.2;
+  color: #c5cce0;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.header-live-quotes .hlq-icon {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+.header-live-quotes .hlq-icon--eth {
+  background: radial-gradient(circle at 35% 30%, #8ad0ff, #3c7cff 55%, #1a3a8a);
+}
+.header-live-quotes .hlq-icon--btc {
+  background: radial-gradient(circle at 35% 30%, #ffd27a, #f0a028 55%, #a65a00);
+}
+.header-live-quotes .hlq-sym {
+  color: #9aa3bf;
+  min-width: 58px;
+}
+.header-live-quotes .hlq-last {
+  color: #e8ecff;
+  font-weight: 600;
+  min-width: 64px;
+  text-align: right;
+}
+.header-live-quotes .hlq-chg,
+.header-live-quotes .hlq-pct {
+  min-width: 48px;
+  text-align: right;
+  color: #9aa3bf;
+}
+.header-live-quotes .hlq-row.is-up .hlq-chg,
+.header-live-quotes .hlq-row.is-up .hlq-pct {
+  color: #3dd68c;
+}
+.header-live-quotes .hlq-row.is-down .hlq-chg,
+.header-live-quotes .hlq-row.is-down .hlq-pct {
+  color: #ff8a8a;
+}
+html[data-theme="light"] .header.header--brand .brand-title,
+html[data-theme="light"] .header.header--brand .brand-prefix,
+html[data-theme="light"] .header.header--brand .brand-product {
+  color: #142232;
+}
+html[data-theme="light"] .header.header--brand .brand-sep,
+html[data-theme="light"] .header-live-quotes .hlq-sym {
+  color: #5a6f85;
+}
+html[data-theme="light"] .header-live-quotes .hlq-last {
+  color: #142232;
+}
+@media (max-width: 720px) {
+  .header.header--brand {
+    padding: 0 8px;
+    min-height: 0;
+    align-items: flex-start;
+  }
+  .header.header--brand .brand-title {
+    font-size: 1.05rem !important;
+    text-align: left;
+  }
+  .header-live-quotes {
+    position: static;
+    transform: none;
+    margin-top: 6px;
+    align-items: flex-start;
+    width: 100%;
+  }
+}
+
 /* ── 统一顶栏面板:状态/筛选 + 统计条 ── */
 .instance-header-panel {
   margin-top: 18px;

lib/hub/hub_bridge.py

@@ -79,6 +79,8 @@ def install_instance_theme_static(app) -> None:
         "account_ledger.js": "application/javascript; charset=utf-8",
         "options_expiry_countdown.js": "application/javascript; charset=utf-8",
         "options_panel.js": "application/javascript; charset=utf-8",
+        "header_live_quotes.js": "application/javascript; charset=utf-8",
+        "hedge_plan.js": "application/javascript; charset=utf-8",
         "order_entry_model.js": "application/javascript; charset=utf-8",
         "focus_chart_page.js": "application/javascript; charset=utf-8",
         "focus_chart_page.css": "text/css; charset=utf-8",

lib/instance/instance_embed_lib.py

@@ -215,7 +215,7 @@ def pwa_app_name(exchange_key: str) -> str:
     ex = (exchange_key or "").strip().lower()
     return {
         "binance": "Binance 交易系统",
-        "okx": "okx对冲",
+        "okx": "加密货币 | OKX 对冲",
         "gate": "Gate 交易系统",
     }.get(ex, "交易系统")
 

lib/instance/templates/embed_shell.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=13">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=121">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=122">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <script src="/static/open_submit_gate.js?v=1"></script>
     <meta name="theme-color" content="#0b0d14">
@@ -27,9 +27,7 @@
     data-price-refresh-ms="{{ price_refresh_seconds * 1000 }}"
 >
 <div class="container">
-    <div class="header">
+    {% include 'instance_brand_header.html' %}
-        <h1>okx对冲</h1>
-    </div>
     <nav class="top-nav embed-top-nav" aria-label="实例导航">
         {% if hedge_plan_nav_visible and display.show_nav_hedge_plan %}
         <a href="/hedge-plan" data-embed-tab="hedge_plan" class="{% if initial_tab == 'hedge_plan' %}active{% endif %}">{% if hedge_plan_show_options_options %}期期对冲{% else %}永期对冲{% endif %}</a>
@@ -140,5 +138,6 @@ window.__INSTANCE_DISPLAY__ = {{ display | tojson }};
 <script src="/static/instance_live.js?v=6"></script>
 <script src="/static/instance_embed.js?v=32"></script>
 <script src="/static/instance_mobile_nav.js?v=3"></script>
+<script src="/static/header_live_quotes.js?v=1"></script>
 </body>
 </html>

lib/instance/templates/index.html

@@ -19,7 +19,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ pwa_app_name }}</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=13">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=121">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=122">
 
 </head>
 <body
@@ -150,9 +150,7 @@
 </div>
 {% endmacro %}
 <div class="container">
-    <div class="header">
+    {% include 'instance_brand_header.html' %}
-        <h1>okx对冲</h1>
-    </div>
     <div class="top-nav">
         {% if hedge_plan_nav_visible and display.show_nav_hedge_plan %}
         <a href="/hedge-plan" class="{% if page == 'hedge_plan' %}active{% endif %}">{% if hedge_plan_show_options_options %}期期对冲{% else %}永期对冲{% endif %}</a>
@@ -2091,5 +2089,6 @@ document.addEventListener("DOMContentLoaded", function () {
 {% endif %}
 </script>
 <script src="/static/instance_settings_prefs.js?v=22"></script>
+<script src="/static/header_live_quotes.js?v=1"></script>
 </body>
 </html>

lib/instance/templates/instance_brand_header.html

@@ -0,0 +1,24 @@
+{# 顶栏品牌标题 + 右上角 ETH/BTC 报价(与期权仓同款) #}
+<div class="header header--brand">
+    <h1 class="brand-title">
+        <span class="brand-prefix">加密货币</span>
+        <span class="brand-sep" aria-hidden="true">|</span>
+        <span class="brand-product">OKX 对冲</span>
+    </h1>
+    <div class="header-live-quotes" id="header-live-quotes" aria-label="ETH/BTC 行情">
+        <div class="hlq-row" data-base="ETH">
+            <span class="hlq-icon hlq-icon--eth" aria-hidden="true"></span>
+            <span class="hlq-sym">ETHUSDT</span>
+            <span class="hlq-last" data-hlq="last">—</span>
+            <span class="hlq-chg" data-hlq="chg">—</span>
+            <span class="hlq-pct" data-hlq="pct">—</span>
+        </div>
+        <div class="hlq-row" data-base="BTC">
+            <span class="hlq-icon hlq-icon--btc" aria-hidden="true"></span>
+            <span class="hlq-sym">BTCUSDT</span>
+            <span class="hlq-last" data-hlq="last">—</span>
+            <span class="hlq-chg" data-hlq="chg">—</span>
+            <span class="hlq-pct" data-hlq="pct">—</span>
+        </div>
+    </div>
+</div>