dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add desktop calculator tabs.

Browse Source 
Show one strategy calculator at a time while preserving the existing mobile tab experience.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 14:44:36 +08:00
parent b30129f83f
commit c9d40e5e52
3 changed files with 90 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/更新文档.md
+25
View File
@@ -4,6 +4,31 @@
---
## 2026-07-16 · 电脑端计算器改为 Tab 切换
### 修改原因
电脑端同时并排显示趋势回调与滚仓计算器，横向空间利用和操作聚焦不理想。
### 修改的地方
| 文件 | 改动摘要 |
|------|----------|
| `manual_trading_hub/static/index.html` | 计算器 Tab 增加电脑端完整名称，更新 CSS 缓存 |
| `manual_trading_hub/static/app.css` | 电脑端显示 Tab、单列展示当前计算器；手机端沿用原紧凑 Tab |
### 达成的目标
电脑端通过「趋势回调计算器 / 滚仓计算器」Tab 切换，一次只显示一个计算器。
### 交付之后的验收
1. 电脑端默认显示趋势回调计算器。
2. 点击滚仓计算器 Tab 后只显示滚仓计算器，切回正常。
3. 手机端原有计算器 Tab 样式和交互不变。
---
## 2026-07-16 · 资金概况移除累计盈亏长条
### 修改原因
manual_trading_hub/static/app.css
+58
View File
@@ -9359,6 +9359,64 @@ body.funds-fullscreen-open {
}
}
/* 电脑端计算器改为单页 Tab；手机继续使用原有紧凑 Tab 样式 */
.calc-tab-label-desktop {
display: none;
}
body:not(.hub-phone) #page-calculator .calc-mobile-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-width: 640px;
margin: 0 auto 14px;
padding: 5px;
border: 1px solid var(--border-soft);
border-radius: 12px;
background: var(--nav-bg);
}
body:not(.hub-phone) #page-calculator .calc-m-tab {
min-height: 42px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
body:not(.hub-phone) #page-calculator .calc-m-tab:hover {
color: var(--text);
border-color: var(--border-soft);
}
body:not(.hub-phone) #page-calculator .calc-m-tab.is-active {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
background: var(--accent-dim);
box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent);
}
body:not(.hub-phone) #page-calculator .calc-tab-label-mobile {
display: none;
}
body:not(.hub-phone) #page-calculator .calc-tab-label-desktop {
display: inline;
}
body:not(.hub-phone) #page-calculator .calc-layout {
grid-template-columns: minmax(0, 1fr);
}
body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="trend"] [data-calc-pane="roll"],
body:not(.hub-phone) #page-calculator .calc-layout[data-calc-tab="roll"] [data-calc-pane="trend"] {
display: none;
}
/* --- 策略说明 --- */
.strategy-page-head {
display: flex;
manual_trading_hub/static/index.html
+7 -3
View File
@@ -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-hub-stats-fold" />
<link rel="stylesheet" href="/assets/app.css?v=20260716-calc-desktop-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>
@@ -747,8 +747,12 @@
<span id="calc-refresh-status" class="toolbar-meta"></span>
</div>
<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">趋势回调</button>
<button type="button" class="calc-m-tab" data-calc-tab="roll" role="tab" aria-selected="false">滚仓</button>
<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>
</button>
<button type="button" class="calc-m-tab" data-calc-tab="roll" role="tab" aria-selected="false">
<span class="calc-tab-label-mobile">滚仓</span><span class="calc-tab-label-desktop">滚仓计算器</span>
</button>
</div>
<div class="calc-layout" data-calc-tab="trend">
<section class="calc-card card" data-calc-pane="trend">