From 4c4a811af4096b6cb9e47ec5939ed7f53600197e Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 4 Oct 2026 20:21:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E4=B8=8E=E6=80=BB=E8=A7=88?=
 =?UTF-8?q?=E5=90=8C=E5=AE=BD=E4=BD=BF=E6=8A=A5=E4=BB=B7=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=EF=BC=8C=E6=A0=87=E9=A2=98=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E9=97=B4=E8=B7=9D=E5=AF=B9=E9=BD=90=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=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      | 63 +++++++++++++++++++++++++++++++--------------
 templates/base.html |  6 ++---
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/static/hub.css b/static/hub.css
index 54c075b..989d100 100644
--- a/static/hub.css
+++ b/static/hub.css
@@ -56,17 +56,40 @@ a:hover { color: #7dd3fc; }
   justify-content: flex-start;
   gap: 0;
   min-height: 0;
-  padding: 40px 0 18px;
+  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 {
-  align-self: center;
-  margin-bottom: 32px;
-  font-family: var(--font);
+  display: block;
+  margin: 0 auto 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1.75rem;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 0;
   text-indent: 0;
   color: #dbe4ff;
@@ -76,17 +99,12 @@ 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;
+  margin-bottom: 0;
 }
 .topbar-nav {
   grid-column: 2;
@@ -94,11 +112,12 @@ a:hover { color: #7dd3fc; }
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 .topbar-nav a {
   color: #8fc8ff;
-  font-size: 0.92rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 400;
   letter-spacing: 0;
   padding: 6px 10px;
   border: 1px solid #304164;
@@ -181,7 +200,7 @@ a:hover { color: #7dd3fc; }
 .nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
 .topbar-logout {
   position: absolute;
-  top: 28px;
+  top: 16px;
   right: 22px;
   color: var(--muted);
   font-size: 0.82rem;
@@ -204,17 +223,21 @@ a:hover { color: #7dd3fc; }
 @media (max-width: 720px) {
   .topbar {
     min-height: 0;
-    padding: 28px 0 12px;
+    padding: 8px 0 12px;
   }
   .topbar-brand {
-    margin-bottom: 18px;
-    font-size: 1.35rem;
+    margin-bottom: 12px;
+    font-size: 1rem;
   }
-  .topbar-inner {
-    padding: 0 16px;
+  .topbar-shell {
+    padding: 0 10px;
+  }
+  .topbar-nav a {
+    padding: 8px 12px;
+    font-size: 0.78rem;
   }
   .topbar-logout {
-    top: 12px;
+    top: 10px;
     right: 14px;
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 8daba57..895a85c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,13 +4,13 @@
   <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=25">
+  <link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=26">
 </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>
-    <div class="topbar-inner">
+    <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>