前端ui

manual_trading_hub/hub.py

@@ -43,7 +43,7 @@ HUB_BRIDGE_TOKEN = (os.getenv("HUB_BRIDGE_TOKEN") or os.getenv("CONTROL_TOKEN")
 _trust_raw = (os.getenv("HUB_TRUST_LAN", "true") or "").strip().lower()
 HUB_TRUST_LAN = _trust_raw not in ("0", "false", "no", "off")
 DIR = Path(__file__).resolve().parent
-HUB_BUILD = "20260525-tpsl-ui"
+HUB_BUILD = "20260525-orders-ui"
 
 
 def _is_local(host: str | None) -> bool:

manual_trading_hub/static/app.css

@@ -370,9 +370,7 @@ button:disabled {
   box-shadow: var(--glow);
 }
 
-.btn-close-pos {
+.btn-close-pos.btn-sm {
-  font-size: 11px;
-  padding: 4px 10px;
   white-space: nowrap;
 }
 
@@ -556,27 +554,117 @@ button:disabled {
   margin-bottom: 0;
 }
 
-.pos-orders {
+.pos-action-group {
-  margin: 8px 0 0;
+  display: inline-flex;
-  padding: 8px 10px;
+  flex-direction: row;
-  background: rgba(0, 0, 0, 0.2);
+  align-items: center;
-  border-radius: 6px;
+  justify-content: flex-end;
-  border: 1px solid var(--border-soft);
+  gap: 6px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
 }
 
-.pos-orders-head {
+.data-table .td-actions .btn-sm {
+  margin: 0;
+  vertical-align: middle;
+}
+
+button.btn-sm {
+  padding: 4px 11px;
+  font-size: 11px;
+  line-height: 1.35;
+  border-radius: 6px;
+  min-width: 48px;
+}
+
+.btn-place-tpsl.btn-sm {
+  border-color: rgba(0, 212, 255, 0.35);
+  color: var(--accent);
+}
+
+.pos-orders-collapse {
+  margin: 10px 0 0;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.pos-orders-collapse-summary {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
-  gap: 8px;
+  padding: 8px 10px;
-  margin-bottom: 6px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  background: rgba(0, 212, 255, 0.04);
+  border-bottom: 1px solid transparent;
 }
 
-.pos-orders-title {
+.pos-orders-collapse[open] > .pos-orders-collapse-summary {
+  border-bottom-color: var(--border-soft);
+}
+
+.pos-orders-collapse-summary::-webkit-details-marker {
+  display: none;
+}
+
+.pos-orders-collapse-summary::before {
+  content: "▸";
+  flex-shrink: 0;
+  color: var(--accent);
+  font-size: 11px;
+  width: 12px;
+  transition: transform 0.15s ease;
+}
+
+.pos-orders-collapse[open] > .pos-orders-collapse-summary::before {
+  transform: rotate(90deg);
+}
+
+.pos-orders-collapse-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--text);
+}
+
+.pos-orders-collapse-label em {
+  font-style: normal;
+  color: var(--accent);
+  margin-left: 2px;
+}
+
+.pos-orders-collapse-meta {
+  flex: 1;
   font-size: 10px;
   color: var(--muted);
-  letter-spacing: 0.06em;
+  min-width: 0;
+}
+
+.pos-orders-collapse-summary .btn-cancel-cond-all {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.pos-orders-collapse-body {
+  padding: 8px 10px 10px;
+}
+
+.orders-section + .orders-section {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--border-soft);
+}
+
+.orders-section-head {
+  font-size: 10px;
+  color: var(--muted);
+  letter-spacing: 0.08em;
   text-transform: uppercase;
+  margin-bottom: 6px;
 }
 
 .data-table-sub {
@@ -594,48 +682,6 @@ button:disabled {
   padding: 6px 4px 8px;
 }
 
-.td-actions-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.orders-collapse {
-  margin-bottom: 8px;
-}
-
-.orders-collapse-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  list-style: none;
-  padding: 4px 0;
-  user-select: none;
-}
-
-.orders-collapse-summary::-webkit-details-marker {
-  display: none;
-}
-
-.orders-collapse-summary::before {
-  content: "▸";
-  color: var(--muted);
-  margin-right: 6px;
-  font-size: 10px;
-  transition: transform 0.15s ease;
-}
-
-.orders-collapse[open] > .orders-collapse-summary::before {
-  transform: rotate(90deg);
-}
-
-.orders-collapse-body {
-  margin-top: 6px;
-}
-
 .modal {
   position: fixed;
   inset: 0;

manual_trading_hub/static/app.js

@@ -218,11 +218,13 @@
     const guess = guessTpslFromCondOrders(x.side, cond);
     const slAttr = esc(String(guess.sl)).replace(/"/g, """);
     const tpAttr = esc(String(guess.tp)).replace(/"/g, """);
+    const orderTotal = cond.length + reg.length;
     const condAllBtn =
       cond.length > 0
-        ? `<button type="button" class="btn-cancel-cond-all ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}">撤销全部</button>`
+        ? `<button type="button" class="btn-cancel-cond-all btn-sm ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}">撤销条件单</button>`
         : "";
     const condBody = renderOrderRows(exchangeId, x.symbol, cond, "conditional");
+    const regBody = renderOrderRows(exchangeId, x.symbol, reg, "limit");
     return `<div class="pos-block">
       <table class="data-table"><thead><tr><th>合约</th><th>方向</th><th>张数</th><th>浮盈</th><th>操作</th></tr></thead><tbody>
         <tr>
@@ -230,25 +232,31 @@
           <td>${esc(x.side)}</td>
           <td>${fmt(x.contracts, 4)}</td>
           <td class="${pnlCls(x.unrealized_pnl)}">${fmt(x.unrealized_pnl, 4)}</td>
-          <td class="td-actions td-actions-row">
+          <td class="td-actions">
-            <button type="button" class="btn-place-tpsl ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-side="${sideAttr}" data-contracts="${contractsAttr}" data-sl="${slAttr}" data-tp="${tpAttr}">委托</button>
+            <div class="pos-action-group">
-            <button type="button" class="btn-close-pos danger" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-side="${sideAttr}">平仓</button>
+              <button type="button" class="btn-place-tpsl btn-sm ghost" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-side="${sideAttr}" data-contracts="${contractsAttr}" data-sl="${slAttr}" data-tp="${tpAttr}">委托</button>
+              <button type="button" class="btn-close-pos btn-sm danger" data-ex-id="${esc(exchangeId)}" data-symbol="${symAttr}" data-side="${sideAttr}">平仓</button>
+            </div>
           </td>
         </tr>
       </tbody></table>
-      <div class="pos-orders">
+      <details class="pos-orders-collapse">
-        <details class="orders-collapse">
+        <summary class="pos-orders-collapse-summary">
-          <summary class="orders-collapse-summary">
+          <span class="pos-orders-collapse-label">委托单 <em>${orderTotal}</em></span>
-            <span class="pos-orders-title">条件单 · ${cond.length}</span>
+          <span class="pos-orders-collapse-meta">条件 ${cond.length} · 普通 ${reg.length}</span>
           ${condAllBtn}
         </summary>
-          <div class="orders-collapse-body">${condBody}</div>
+        <div class="pos-orders-collapse-body">
+          <div class="orders-section">
+            <div class="orders-section-head">条件单</div>
+            ${condBody}
+          </div>
+          <div class="orders-section">
+            <div class="orders-section-head">普通委托</div>
+            ${regBody}
+          </div>
+        </div>
       </details>
-        <div class="pos-orders-head" style="margin-top:10px">
-          <span class="pos-orders-title">普通委托 · ${reg.length}</span>
-        </div>
-        ${renderOrderRows(exchangeId, x.symbol, reg, "limit")}
-      </div>
     </div>`;
   }
 

manual_trading_hub/static/index.html

@@ -7,7 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="/assets/app.css?v=20260525-tpsl-ui" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260525-orders-ui" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -101,6 +101,6 @@
   </div>
 
   <div id="toast"></div>
-  <script src="/assets/app.js?v=20260525-tpsl-ui"></script>
+  <script src="/assets/app.js?v=20260525-orders-ui"></script>
 </body>
 </html>