From ad1f7b7c3d0df6afb0fc762741bb457fe15c3197 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 4 Oct 2026 20:14:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E4=BB=B7=E5=9B=9E=E5=88=B0=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E5=90=8C=E4=B8=80=E8=A1=8C=E5=8F=B3=E4=BE=A7=E5=B9=B6?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E6=80=BB=E8=A7=88=E5=8D=A1=E7=89=87=EF=BC=8C?=
 =?UTF-8?q?=E6=8B=89=E5=BC=80=E6=A0=87=E9=A2=98=E4=B8=8E=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D=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           | 64 ++++++++++++++++++++++++----------------
 templates/base.html      | 40 +++++++++++++++++++------
 templates/dashboard.html | 34 ++++-----------------
 3 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/static/hub.css b/static/hub.css
index 1ffb560..54c075b 100644
--- a/static/hub.css
+++ b/static/hub.css
@@ -54,15 +54,16 @@ a:hover { color: #7dd3fc; }
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
-  gap: 12px;
+  gap: 0;
   min-height: 0;
-  padding: 40px 28px 16px;
+  padding: 40px 0 18px;
   border-bottom: 1px solid var(--line);
   background: rgba(8, 14, 26, 0.75);
   backdrop-filter: blur(12px);
 }
 .topbar-brand {
   align-self: center;
+  margin-bottom: 32px;
   font-family: var(--font);
   font-size: 1.75rem;
   font-weight: 600;
@@ -75,7 +76,20 @@ a:hover { color: #7dd3fc; }
 .topbar-brand:hover {
   color: #ffffff;
 }
+.topbar-inner {
+  width: 100%;
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 0 clamp(16px, 3vw, 48px);
+}
+.topbar-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px 12px;
+}
 .topbar-nav {
+  grid-column: 2;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -101,6 +115,8 @@ a:hover { color: #7dd3fc; }
   text-shadow: none;
 }
 .top-nav-spot-tickers {
+  grid-column: 3;
+  justify-self: end;
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -174,15 +190,29 @@ a:hover { color: #7dd3fc; }
 .topbar-logout:hover {
   color: #e8f1ff;
 }
+@media (max-width: 1100px) {
+  .topbar-row {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+  .topbar-nav,
+  .top-nav-spot-tickers {
+    grid-column: 1;
+    justify-self: center;
+  }
+}
 @media (max-width: 720px) {
   .topbar {
     min-height: 0;
-    padding: 28px 16px 12px;
-    gap: 10px;
+    padding: 28px 0 12px;
   }
   .topbar-brand {
+    margin-bottom: 18px;
     font-size: 1.35rem;
   }
+  .topbar-inner {
+    padding: 0 16px;
+  }
   .topbar-logout {
     top: 12px;
     right: 14px;
@@ -236,23 +266,8 @@ body.page-login .main {
   font-weight: 600;
   letter-spacing: 0.04em;
 }
-.overview-head {
-  align-items: flex-start;
-}
-.overview-head-right {
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
-}
-.overview-head-clock-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-}
 .overview-bj-clock {
-  margin-left: 0;
+  margin-left: auto;
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
@@ -319,13 +334,12 @@ body.page-login .main {
 }
 @media (max-width: 720px) {
   .page-head { flex-wrap: wrap; }
-  .overview-head-right {
+  .overview-bj-clock {
     margin-left: 0;
+    order: 3;
     width: 100%;
-    align-items: flex-start;
-  }
-  .overview-head-clock-row {
-    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-top: 2px;
   }
 }
 .muted { color: var(--muted); font-size: 0.9rem; }
diff --git a/templates/base.html b/templates/base.html
index ed7f38b..8daba57 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,20 +4,42 @@
   <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=24">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=25">
 </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">
     <a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
-    <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="topbar-inner">
+      <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>
+    </div>
     <a href="/logout" class="topbar-logout">退出</a>
   </header>
   {% endif %}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index d472880..a04be76 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,36 +1,14 @@
 {% extends "base.html" %}
 {% block title %}总览 · 加密货币｜OKX 期权中控{% endblock %}
 {% block body %}
-<section class="page-head overview-head">
+<section class="page-head">
   <h1>期权持仓总览</h1>
-  <div class="overview-head-right">
-    <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 class="overview-head-clock-row">
-      <div class="overview-bj-clock" id="overview-bj-clock" title="Asia/Shanghai">
-        <span class="overview-bj-label">北京时间</span>
-        <time class="overview-bj-time" id="overview-bj-time" datetime="">--</time>
-        <span class="overview-bj-meta" id="overview-bj-meta"></span>
-      </div>
-      <button type="button" class="btn" id="btn-refresh">刷新</button>
-    </div>
+  <div class="overview-bj-clock" id="overview-bj-clock" title="Asia/Shanghai">
+    <span class="overview-bj-label">北京时间</span>
+    <time class="overview-bj-time" id="overview-bj-time" datetime="">--</time>
+    <span class="overview-bj-meta" id="overview-bj-meta"></span>
   </div>
+  <button type="button" class="btn" id="btn-refresh">刷新</button>
 </section>
 <p class="muted" id="overview-status">加载中…</p>
 <section class="overview-summary" id="overview-summary" hidden></section>