From 55b2a4802602b5ea8dc2ec94ee4cae6d578d94c8 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 4 Oct 2026 20:27:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=AF=BC=E8=88=AA=E4=B8=8E?=
 =?UTF-8?q?=E6=80=BB=E8=A7=88=E5=90=8C=E5=88=97=E5=AF=B9=E9=BD=90=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=EF=BC=8C=E9=A1=B6=E6=A0=8F=E9=97=B4=E8=B7=9D=E6=8C=89?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E9=93=BA=E6=BB=A1=E5=B9=B6=E5=9C=A8=E5=B8=A6?=
 =?UTF-8?q?=E9=B1=BC=E5=B1=8F=E9=94=81=201800=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/hub.css      | 87 +++++++++++----------------------------------
 templates/base.html | 66 +++++++++++++++++-----------------
 2 files changed, 52 insertions(+), 101 deletions(-)

diff --git a/static/hub.css b/static/hub.css
index 989d100..d7b3a2f 100644
--- a/static/hub.css
+++ b/static/hub.css
@@ -48,42 +48,6 @@ body > * { position: relative; z-index: 1; }
 a { color: var(--accent-2); text-decoration: none; }
 a:hover { color: #7dd3fc; }
 
-.topbar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: 0;
-  min-height: 0;
-  padding: 14px 0 12px;
-  border-bottom: 1px solid var(--line);
-  background: rgba(8, 14, 26, 0.75);
-  backdrop-filter: blur(12px);
-}
-.topbar-shell {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-body.page-dashboard .topbar-shell {
-  max-width: 1800px;
-  padding: 0 clamp(16px, 3vw, 48px);
-}
-body.page-instances .topbar-shell {
-  max-width: none;
-  padding: 0 clamp(12px, 2vw, 28px);
-}
-@media (min-aspect-ratio: 21/9) {
-  body.page-instances .topbar-shell {
-    max-width: 1800px;
-  }
-}
-body.page-desk .topbar-shell {
-  max-width: none;
-  padding: 0 12px;
-}
 .topbar-brand {
   display: block;
   margin: 0 auto 12px;
@@ -104,7 +68,7 @@ body.page-desk .topbar-shell {
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 10px 12px;
-  margin-bottom: 0;
+  margin: 0 0 12px;
 }
 .topbar-nav {
   grid-column: 2;
@@ -199,9 +163,10 @@ body.page-desk .topbar-shell {
 .nav-spot--flat .nav-spot-chg,
 .nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
 .topbar-logout {
-  position: absolute;
+  position: fixed;
   top: 16px;
   right: 22px;
+  z-index: 20;
   color: var(--muted);
   font-size: 0.82rem;
   letter-spacing: 0.04em;
@@ -221,17 +186,10 @@ body.page-desk .topbar-shell {
   }
 }
 @media (max-width: 720px) {
-  .topbar {
-    min-height: 0;
-    padding: 8px 0 12px;
-  }
   .topbar-brand {
     margin-bottom: 12px;
     font-size: 1rem;
   }
-  .topbar-shell {
-    padding: 0 10px;
-  }
   .topbar-nav a {
     padding: 8px 12px;
     font-size: 0.78rem;
@@ -242,13 +200,25 @@ body.page-desk .topbar-shell {
   }
 }
 
-.main { padding: 16px; max-width: 1200px; margin: 0 auto; }
-/* 总览保持 1800;工作台外壳全屏(内嵌客户端带鱼屏自锁 1800) */
-body.page-dashboard .main {
-  max-width: 1800px;
+.main {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 14px clamp(6px, 1vw, 14px) 16px;
+}
+/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */
+body.page-dashboard .main,
+body.page-instances .main {
+  max-width: none;
   width: 100%;
   margin: 0 auto;
-  padding: 12px clamp(16px, 3vw, 48px) 20px;
+  padding: 14px clamp(6px, 1vw, 14px) 16px;
+}
+@media (min-aspect-ratio: 21/9) {
+  body.page-dashboard .main,
+  body.page-instances .main {
+    max-width: min(1800px, calc(100vw - 24px));
+  }
 }
 body.page-desk .main {
   max-width: none;
@@ -256,18 +226,6 @@ body.page-desk .main {
   margin: 0;
   padding: 10px 12px 14px;
 }
-/* 实例页主区:随屏宽;带鱼屏上限 1800 */
-body.page-instances .main {
-  max-width: none;
-  width: 100%;
-  margin: 0 auto;
-  padding: 12px clamp(12px, 2vw, 28px) 20px;
-}
-@media (min-aspect-ratio: 21/9) {
-  body.page-instances .main {
-    max-width: 1800px;
-  }
-}
 body.page-login {
   min-height: 100vh;
 }
@@ -1438,11 +1396,6 @@ input.readonly {
   .desk-side-toggle--bar { display: none !important; }
 }
 @media (min-width: 2000px) {
-  body.page-dashboard .main {
-    max-width: 1800px;
-    padding-left: clamp(32px, 6vw, 96px);
-    padding-right: clamp(32px, 6vw, 96px);
-  }
   body.page-desk .main {
     max-width: none;
     padding-left: 12px;
diff --git a/templates/base.html b/templates/base.html
index 895a85c..54818d4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,46 +4,44 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}加密货币｜OKX 期权中控{% endblock %}</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=26">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=27">
 </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 == '/' %}page-dashboard{% endif %}">
   {% if session.get('logged_in') %}
-  <header class="topbar">
-    <div class="topbar-shell">
-      <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
-      <div class="topbar-row">
-        <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>
-          <a href="/instances" class="{% if request.path.startswith('/instances') %}active{% endif %}">实例</a>
-          <a href="/desk" class="{% if request.path.startswith('/desk') %}active{% endif %}">工作台</a>
-          <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="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>
-            <span class="nav-spot-sym">ETHUSDT</span>
-            <span class="nav-spot-last" data-field="last">—</span>
-            <span class="nav-spot-chg" data-field="change">—</span>
-            <span class="nav-spot-pct" data-field="change_pct">—</span>
-          </div>
-          <div class="nav-spot-row" data-base="BTC">
-            <span class="nav-spot-ribbon" aria-hidden="true"></span>
-            <span class="nav-spot-icon nav-spot-icon--btc" aria-hidden="true">₿</span>
-            <span class="nav-spot-sym">BTCUSDT</span>
-            <span class="nav-spot-last" data-field="last">—</span>
-            <span class="nav-spot-chg" data-field="change">—</span>
-            <span class="nav-spot-pct" data-field="change_pct">—</span>
-          </div>
+  <a href="/logout" class="topbar-logout">退出</a>
+  {% endif %}
+  <main class="main">
+    {% if session.get('logged_in') %}
+    <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
+    <div class="topbar-row">
+      <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>
+        <a href="/instances" class="{% if request.path.startswith('/instances') %}active{% endif %}">实例</a>
+        <a href="/desk" class="{% if request.path.startswith('/desk') %}active{% endif %}">工作台</a>
+        <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="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>
+          <span class="nav-spot-sym">ETHUSDT</span>
+          <span class="nav-spot-last" data-field="last">—</span>
+          <span class="nav-spot-chg" data-field="change">—</span>
+          <span class="nav-spot-pct" data-field="change_pct">—</span>
+        </div>
+        <div class="nav-spot-row" data-base="BTC">
+          <span class="nav-spot-ribbon" aria-hidden="true"></span>
+          <span class="nav-spot-icon nav-spot-icon--btc" aria-hidden="true">₿</span>
+          <span class="nav-spot-sym">BTCUSDT</span>
+          <span class="nav-spot-last" data-field="last">—</span>
+          <span class="nav-spot-chg" data-field="change">—</span>
+          <span class="nav-spot-pct" data-field="change_pct">—</span>
         </div>
       </div>
     </div>
-    <a href="/logout" class="topbar-logout">退出</a>
-  </header>
-  {% endif %}
-  <main class="main">
+    {% endif %}
     {% with messages = get_flashed_messages() %}
       {% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
     {% endwith %}