Move desktop calculator tabs left.

Compress wide-screen calculator inputs into three rows while preserving mobile layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/更新文档.md

@@ -4,6 +4,31 @@
 
 ---
 
+## 2026-07-16 · 计算器左侧 Tab + 三行输入
+
+### 修改原因
+
+电脑端顶部横向 Tab 与纵向表单不协调，输入项行数偏多。
+
+### 修改的地方
+
+| 文件 | 改动摘要 |
+|------|----------|
+| `manual_trading_hub/static/index.html` | 增加计算器工作区容器，更新 CSS 缓存 |
+| `manual_trading_hub/static/app.css` | 电脑端 Tab 改为左侧竖排；≥1200px 基础输入改为五列、三行排列 |
+
+### 达成的目标
+
+电脑端左侧切换计算器，右侧集中填写；宽屏基础输入压缩为三行。
+
+### 交付之后的验收
+
+1. 电脑端两个计算器 Tab 位于左侧。
+2. 1920px 宽屏基础输入区为三行。
+3. Tab 切换和计算功能正常；手机端保持原布局。
+
+---
+
 ## 2026-07-16 · 电脑端计算器改为 Tab 切换
 
 ### 修改原因

manual_trading_hub/static/app.css

@@ -9364,12 +9364,19 @@ body.funds-fullscreen-open {
   display: none;
 }
 
+body:not(.hub-phone) #page-calculator .calc-workspace {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
 body:not(.hub-phone) #page-calculator .calc-mobile-tabs {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr);
   gap: 8px;
-  max-width: 640px;
+  max-width: none;
-  margin: 0 auto 14px;
+  margin: 0;
   padding: 5px;
   border: 1px solid var(--border-soft);
   border-radius: 12px;
@@ -9386,6 +9393,8 @@ body:not(.hub-phone) #page-calculator .calc-m-tab {
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
+  text-align: left;
+  padding: 9px 12px;
 }
 
 body:not(.hub-phone) #page-calculator .calc-m-tab:hover {
@@ -9410,6 +9419,7 @@ body:not(.hub-phone) #page-calculator .calc-tab-label-desktop {
 
 body:not(.hub-phone) #page-calculator .calc-layout {
   grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
 }
 
 body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="trend"] [data-calc-pane="roll"],
@@ -9417,6 +9427,12 @@ body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-c
   display: none;
 }
 
+@media (min-width: 1200px) {
+  body:not(.hub-phone) #page-calculator .calc-form-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
 /* --- 策略说明 --- */
 .strategy-page-head {
   display: flex;

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <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" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-      <link rel="stylesheet" href="/assets/app.css?v=20260716-calc-desktop-tabs" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260716-calc-left-tabs" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>
@@ -746,6 +746,7 @@
         <button type="button" id="calc-btn-refresh" class="primary">刷新</button>
         <span id="calc-refresh-status" class="toolbar-meta"></span>
       </div>
+      <div class="calc-workspace">
         <div class="calc-mobile-tabs" role="tablist" aria-label="计算器切换">
           <button type="button" class="calc-m-tab is-active" data-calc-tab="trend" role="tab" aria-selected="true">
             <span class="calc-tab-label-mobile">趋势回调</span><span class="calc-tab-label-desktop">趋势回调计算器</span>
@@ -879,6 +880,7 @@
           </section>
         </div>
       </div>
+    </div>
 
     <div id="page-strategy" class="page hidden">
       <div class="page-head strategy-page-head">