修复前端

2026-05-22 11:12:00 +08:00
parent 3515b440cd
commit 8b3ab87715
5 changed files with 77 additions and 24 deletions
@@ -41,9 +41,10 @@ a:hover {

 /* —— 顶栏 —— */
 .app-shell {
-  max-width: 1280px;
+  width: 100%;
+  max-width: none;
  margin: 0 auto;
-  padding: 0 20px 48px;
+  padding: 0 clamp(16px, 2.5vw, 48px) 48px;
 }

 .app-header {
@@ -300,10 +301,50 @@ button:disabled {

 .grid-monitor {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
+  gap: clamp(12px, 1.2vw, 20px);
+}
+
+@media (min-width: 1400px) {
+  .grid-monitor {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 2200px) {
+  .grid-monitor {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.page-head {
+  max-width: 100%;
+}
+
+.trade-bar,
+.toolbar,
+.hint-box {
+  max-width: 100%;
+}
+
+.settings-grid-wrap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 16px;
 }

+@media (min-width: 1600px) {
+  .settings-grid-wrap {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 2400px) {
+  .settings-grid-wrap {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 /* 监控统计 */
 .stat-row {
  display: grid;
@@ -545,12 +586,6 @@ button:disabled {
 }

 /* —— 系统设置 —— */
-.settings-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
 .settings-card {
  background: var(--panel);
  border: 1px solid var(--border);
@@ -375,7 +375,7 @@
    loadSettingsMetaLine();
    loadSettings().then((data) => {
      const list = document.getElementById("settings-list");
-      list.innerHTML = (data.exchanges || [])
+      document.getElementById("settings-list").innerHTML = (data.exchanges || [])
        .map((ex, idx) => renderSettingsCard(ex, idx))
        .join("");
      list.querySelectorAll(".btn-del-ex").forEach((btn) => {
@@ -3,13 +3,13 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>多账户交易中控</title>
+  <title>复盘系统中控</title>
  <link rel="stylesheet" href="/assets/app.css" />
 </head>
 <body>
  <div class="app-shell">
    <header class="app-header">
-      <div class="brand">交易中控 <span>manual_trading_hub</span></div>
+      <div class="brand">复盘系统中控</div>
      <nav class="top-nav">
        <a href="/monitor" id="nav-monitor">监控区</a>
        <a href="/trade" id="nav-trade">下单区</a>
@@ -237,7 +237,7 @@
        <button type="button" id="btn-settings-add">添加交易所</button>
        <button type="button" id="btn-settings-reload">重新加载</button>
      </div>
-      <div id="settings-list" class="settings-cards"></div>
+      <div id="settings-list" class="settings-grid-wrap"></div>
    </div>
  </div>