中控手机端使用独立底栏与卡片总览，电脑端布局保持不变。

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

templates/base.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>{% block title %}加密货币｜OKX 期权中控{% endblock %}</title>
   <meta name="theme-color" content="#070b14">
   <meta name="mobile-web-app-capable" content="yes">
@@ -11,16 +11,40 @@
   <link rel="icon" href="{{ url_for('static', filename='icons/favicon.ico') }}?v=2" sizes="any">
   <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}?v=2">
   <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=38">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=39">
+  <script>
+  (function () {
+    try {
+      if (window.matchMedia("(max-width: 720px)").matches) {
+        document.documentElement.classList.add("hub-phone-html");
+      }
+    } catch (e) {}
+  })();
+  </script>
 </head>
 <body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path.startswith('/settings') %}page-settings{% elif request.path.startswith('/cond_orders') %}page-cond-orders{% elif request.path == '/' %}page-dashboard{% endif %}">
   {% if session.get('logged_in') %}
-  <a href="/logout" class="topbar-logout">退出</a>
+  <a href="/logout" class="topbar-logout hub-desk-chrome">退出</a>
   {% endif %}
   <main class="main">
     {% if session.get('logged_in') %}
-    <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
-    <div class="topbar-row">
+    <header class="hub-phone-bar hub-phone-chrome">
+      <div class="hub-phone-bar-title">期权中控</div>
+      <div class="hub-phone-quotes" id="nav-spot-tickers-phone" data-hub-quotes="1" aria-label="BTC ETH 报价">
+        <div class="nav-spot-row" data-base="ETH">
+          <span class="nav-spot-icon nav-spot-icon--eth" aria-hidden="true">Ξ</span>
+          <span class="nav-spot-last" data-field="last">—</span>
+          <span class="nav-spot-pct" data-field="change_pct">—</span>
+        </div>
+        <div class="nav-spot-row" data-base="BTC">
+          <span class="nav-spot-icon nav-spot-icon--btc" aria-hidden="true">₿</span>
+          <span class="nav-spot-last" data-field="last">—</span>
+          <span class="nav-spot-pct" data-field="change_pct">—</span>
+        </div>
+      </div>
+    </header>
+    <a href="/" class="topbar-brand hub-desk-chrome">加密货币｜OKX 期权中控</a>
+    <div class="topbar-row hub-desk-chrome">
       <nav class="topbar-nav">
         <a href="/" class="{% if request.path == '/' %}active{% endif %}">总览</a>
         <a href="/cond_orders" class="{% if request.path.startswith('/cond_orders') %}active{% endif %}">条件单</a>
@@ -29,7 +53,7 @@
         <a href="/stats" class="{% if request.path.startswith('/stats') %}active{% endif %}">数据统计</a>
         <a href="/settings" class="{% if request.path.startswith('/settings') %}active{% endif %}">系统设置</a>
       </nav>
-      <div class="top-nav-spot-tickers" id="nav-spot-tickers" aria-label="BTC ETH 报价" title="来自在线客户端 · 相对北京 08:00">
+      <div class="top-nav-spot-tickers" id="nav-spot-tickers" data-hub-quotes="1" aria-label="BTC ETH 报价" title="来自在线客户端 · 相对北京 08:00">
         <div class="nav-spot-row" data-base="ETH">
           <span class="nav-spot-ribbon" aria-hidden="true"></span>
           <span class="nav-spot-icon nav-spot-icon--eth" aria-hidden="true">Ξ</span>
@@ -54,14 +78,38 @@
     {% endwith %}
     {% block body %}{% endblock %}
   </main>
+  {% if session.get('logged_in') %}
+  <nav id="hub-phone-tabbar" class="hub-phone-tabbar hub-phone-chrome" aria-label="手机导航">
+    <a href="/" class="hub-phone-tab{% if request.path == '/' %} is-active{% endif %}" data-hub-tab="/">总览</a>
+    <a href="/cond_orders" class="hub-phone-tab{% if request.path.startswith('/cond_orders') %} is-active{% endif %}" data-hub-tab="/cond_orders">条件单</a>
+    <button type="button" class="hub-phone-tab" id="hub-phone-more-btn" aria-haspopup="dialog" aria-expanded="false">更多</button>
+  </nav>
+  <div id="hub-phone-more" class="hub-phone-more hub-phone-chrome" aria-hidden="true">
+    <div class="hub-phone-more-backdrop" id="hub-phone-more-backdrop"></div>
+    <div class="hub-phone-more-sheet" role="dialog" aria-modal="true">
+      <div class="hub-phone-more-handle" aria-hidden="true"></div>
+      <h2 class="hub-phone-more-title">更多</h2>
+      <p class="hub-phone-more-hint">次要页面 · 完整操作请用电脑</p>
+      <nav class="hub-phone-more-nav">
+        <a href="/instances"{% if request.path.startswith('/instances') %} class="is-active"{% endif %}>实例</a>
+        <a href="/stats"{% if request.path.startswith('/stats') %} class="is-active"{% endif %}>数据统计</a>
+        <a href="/settings"{% if request.path.startswith('/settings') %} class="is-active"{% endif %}>系统设置</a>
+        <a href="/logout">退出登录</a>
+      </nav>
+      <button type="button" class="hub-phone-more-close" id="hub-phone-more-close">关闭</button>
+    </div>
+  </div>
+  {% endif %}
   {% if session.get('logged_in') and not request.path.startswith('/desk') %}
-  <script src="{{ url_for('static', filename='hub_quotes.js') }}?v=1"></script>
+  <script src="{{ url_for('static', filename='hub_quotes.js') }}?v=2"></script>
   {% endif %}
   {% block scripts %}{% endblock %}
   {% if session.get('logged_in') and not request.path.startswith('/desk') %}
   <script>if (window.HubQuotes) HubQuotes.boot();</script>
   {% endif %}
   <script src="{{ url_for('static', filename='hub_pwa.js') }}?v=2"></script>
+  <script src="{{ url_for('static', filename='hub_phone.js') }}?v=1"></script>
   <script>if (window.HubPwa) HubPwa.boot();</script>
+  <script>if (window.HubPhone) HubPhone.boot();</script>
 </body>
 </html>

templates/dashboard.html

@@ -15,6 +15,6 @@
 <div id="overview-grid"></div>
 {% endblock %}
 {% block scripts %}
-<script src="{{ url_for('static', filename='hub.js') }}?v=26"></script>
+<script src="{{ url_for('static', filename='hub.js') }}?v=27"></script>
 <script>HubOverview.boot();</script>
 {% endblock %}

templates/desk.html

@@ -37,9 +37,44 @@
     {% endif %}
   </div>
 </section>
+<section class="hub-phone-desk hub-phone-chrome">
+  <p class="hub-phone-desk-hint muted">点开后进入该客户端（手机页），不经过中控工作台嵌页。</p>
+  <ul class="hub-phone-desk-list">
+    {% for inst in instances %}
+    <li>
+      <button type="button" class="btn hub-phone-desk-open" data-open-id="{{ inst.id }}">{{ inst.name }}</button>
+    </li>
+    {% else %}
+    <li class="muted">无启用实例</li>
+    {% endfor %}
+  </ul>
+</section>
 {% endblock %}
 {% block scripts %}
 <script>
+(function () {
+  var phone = document.documentElement.classList.contains("hub-phone-html");
+  if (!phone) return;
+  var blank = document.getElementById("desk-open-blank");
+  if (blank && blank.getAttribute("href")) {
+    window.location.replace(blank.getAttribute("href"));
+    return;
+  }
+  document.querySelectorAll(".hub-phone-desk-open[data-open-id]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var id = btn.getAttribute("data-open-id");
+      if (!id) return;
+      fetch("/api/instances/" + encodeURIComponent(id) + "/open_url")
+        .then(function (r) { return r.json(); })
+        .then(function (d) {
+          if (d && d.url) window.location.href = d.url;
+        })
+        .catch(function () {});
+    });
+  });
+})();
+</script>
+<script>
 (function () {
   var KEY = "hub_desk_side_collapsed";
   var root = document.getElementById("desk-root");