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

Add tabbed layout for options positions card.

Browse Source 
Split current positions, stats, and history into tabs to save vertical space and improve readability.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-10 11:19:33 +08:00
parent b6d116ec7a
commit b70ce510ef
3 changed files with 82 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/options/templates/options_panel.html
+10 -8
View File
@@ -78,16 +78,19 @@
<h2>持仓</h2>
<button type="button" class="btn-secondary" id="opt-refresh-positions">刷新</button>
</div>
<div class="options-pos-stack">
<div class="card-nested options-pos-subcard">
<h3>当前持仓</h3>
<div class="options-pos-tabs" role="tablist" aria-label="持仓面板">
<button type="button" class="btn-secondary opt-pos-tab active" data-opt-pos-tab="live" role="tab" aria-selected="true" id="opt-pos-tab-live">当前持仓</button>
<button type="button" class="btn-secondary opt-pos-tab" data-opt-pos-tab="stats" role="tab" aria-selected="false" id="opt-pos-tab-stats">数据统计</button>
<button type="button" class="btn-secondary opt-pos-tab" data-opt-pos-tab="history" role="tab" aria-selected="false" id="opt-pos-tab-history">期权历史</button>
</div>
<div class="options-pos-tab-body">
<div class="options-pos-pane is-active" data-opt-pos-pane="live" role="tabpanel" aria-labelledby="opt-pos-tab-live">
<div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
<div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
<div id="opt-pos-cards"></div>
</div>
</div>
<div class="card-nested options-pos-subcard options-pos-stats-card">
<h3>数据统计</h3>
<div class="options-pos-pane" data-opt-pos-pane="stats" role="tabpanel" aria-labelledby="opt-pos-tab-stats" hidden>
<div class="options-stats-grid">
<div class="options-stat-item">
<span class="k">胜率</span>
@@ -111,8 +114,7 @@
</div>
</div>
</div>
<div class="card-nested options-pos-subcard options-pos-history-card">
<h3>期权历史</h3>
<div class="options-pos-pane" data-opt-pos-pane="history" role="tabpanel" aria-labelledby="opt-pos-tab-history" hidden>
<div class="options-history-table-wrap">
<table class="options-strike-table opt-history-table" id="opt-history-table">
<thead>
@@ -137,4 +139,4 @@
</div>
</div>
<script src="/static/options_expiry_countdown.js?v=1"></script>
<script src="/static/options_panel.js?v=17"></script>
<script src="/static/options_panel.js?v=18"></script>