Improve options review tabs and multi-timeframe uploads.
Add source-type tabs, open an inline journal form from list rows, and match contract-style 5m/15m/1h/4h screenshot slots. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -1,28 +1,38 @@
|
||||
{# OKX 期权复盘(含对冲):独立页,不混合约 journal #}
|
||||
{# OKX 期权复盘:三类 Tab + 列表 + 下方多周期截图复盘表单 #}
|
||||
<div class="options-review-wrap" id="options-review-root" style="grid-column:1/-1">
|
||||
{% if not options_enabled %}
|
||||
<div class="flash" style="margin-bottom:12px">期权未启用:请设置 <code>OKX_OPTIONS_ENABLED=true</code> 后重启.对冲计划仍可单独同步(若本地有已结束计划).</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.or-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
|
||||
.or-tab{border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;padding:8px 14px;border-radius:8px;cursor:pointer}
|
||||
.or-tab.active{background:rgba(59,130,246,.25);border-color:rgba(59,130,246,.55)}
|
||||
.or-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(127,127,127,.2);font-size:12px}
|
||||
.or-stat-card{border:1px solid rgba(127,127,127,.25);border-radius:8px;padding:10px}
|
||||
.or-trades-table tr.or-row-active{outline:1px solid rgba(59,130,246,.55);background:rgba(59,130,246,.08)}
|
||||
.or-trades-table tbody tr{cursor:pointer}
|
||||
.or-upload-slots{display:flex;flex-direction:column;gap:8px;margin:10px 0}
|
||||
.or-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||||
.or-upload-slot-label{min-width:36px;font-weight:600}
|
||||
.or-mood-grid{display:flex;flex-wrap:wrap;gap:10px 14px;margin:10px 0}
|
||||
.or-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:8px}
|
||||
.or-form-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:8px}
|
||||
</style>
|
||||
|
||||
<div class="card" style="margin-bottom:12px">
|
||||
<div class="form-row" style="flex-wrap:wrap;align-items:center;gap:8px">
|
||||
<h2 style="margin:0;margin-right:auto">期权复盘</h2>
|
||||
<button type="button" class="btn-secondary" id="or-sync-btn">从 OKX / 对冲计划同步</button>
|
||||
<span class="muted" id="or-sync-status"></span>
|
||||
</div>
|
||||
<p class="muted" style="margin:8px 0 0">同一列表三类:<strong>纯期权</strong>(交易所已平仓)、<strong>永期对冲</strong> / <strong>期期对冲</strong>(本地已结束计划,计划级一条).对冲盈亏用合计;归属对冲的期权腿默认不重复计入.</p>
|
||||
<style>
|
||||
.or-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(127,127,127,.2);font-size:12px}
|
||||
.or-stat-card{border:1px solid rgba(127,127,127,.25);border-radius:8px;padding:10px}
|
||||
#or-edit-modal{align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
|
||||
</style>
|
||||
<div class="or-tabs" role="tablist" aria-label="复盘分类">
|
||||
<button type="button" class="or-tab active" data-source="option_spot" role="tab">期权交易记录</button>
|
||||
<button type="button" class="or-tab" data-source="options_options" role="tab">期期对冲记录</button>
|
||||
<button type="button" class="or-tab" data-source="perp_options" role="tab">永期对冲记录</button>
|
||||
</div>
|
||||
<p class="muted" style="margin:0">点列表行进入下方「复盘记录上传」;截图槽位与合约一致(5m / 15m / 1h / 4h).对冲盈亏用计划合计;归属对冲的期权腿默认不重复计入.</p>
|
||||
<div class="form-row" style="flex-wrap:wrap;gap:8px;margin-top:10px">
|
||||
<select id="or-filter-source">
|
||||
<option value="">类型:全部</option>
|
||||
<option value="option_spot">纯期权</option>
|
||||
<option value="perp_options">永期对冲</option>
|
||||
<option value="options_options">期期对冲</option>
|
||||
</select>
|
||||
<select id="or-filter-uly">
|
||||
<option value="">标的:全部</option>
|
||||
<option value="ETH">ETH</option>
|
||||
@@ -54,10 +64,10 @@
|
||||
<div id="or-stats-groups" style="margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3 style="margin-top:0">交易列表</h3>
|
||||
<div class="card" style="margin-bottom:12px">
|
||||
<h3 style="margin-top:0" id="or-list-title">期权交易记录</h3>
|
||||
<div class="options-strike-table-wrap">
|
||||
<table class="options-strike-table" id="or-trades-table">
|
||||
<table class="options-strike-table or-trades-table" id="or-trades-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>类型</th>
|
||||
@@ -67,25 +77,81 @@
|
||||
<th>持有</th>
|
||||
<th>策略</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="or-trades-tbody">
|
||||
<tr><td colspan="8" class="muted">加载中…</td></tr>
|
||||
<tr><td colspan="7" class="muted">加载中…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-modal" id="or-edit-modal" style="display:none" onclick="OptionsReview.closeModal(event)">
|
||||
<div class="panel" style="max-width:720px;width:94%" onclick="event.stopPropagation()">
|
||||
<div class="panel-head">
|
||||
<div class="panel-title" id="or-edit-title">复盘编辑</div>
|
||||
<button type="button" class="panel-close" onclick="OptionsReview.closeModal()">关闭</button>
|
||||
</div>
|
||||
<div class="panel-body" id="or-edit-body"></div>
|
||||
<div class="card" id="or-journal-card" hidden>
|
||||
<h2 style="margin-top:0">复盘记录上传(含截图)</h2>
|
||||
<p class="muted" id="or-journal-summary" style="margin-top:0"></p>
|
||||
<form id="or-journal-form" onsubmit="return false;">
|
||||
<input type="hidden" id="or-trade-id" value="">
|
||||
<input type="hidden" id="or-draft-id" value="">
|
||||
<div class="or-form-grid">
|
||||
<input type="datetime-local" id="or-f-open" title="开仓时间" readonly>
|
||||
<input type="datetime-local" id="or-f-close" title="平仓时间" readonly>
|
||||
<input type="text" id="or-f-coin" placeholder="标的" readonly>
|
||||
<input type="text" id="or-f-inst" placeholder="合约/计划" readonly>
|
||||
<input type="text" id="or-f-pnl" placeholder="盈亏" readonly>
|
||||
<input type="text" id="or-f-hold" placeholder="持有" readonly>
|
||||
</div>
|
||||
<div class="or-form-grid2">
|
||||
<input type="text" id="or-f-strategy" placeholder="策略标签" required>
|
||||
<input type="text" id="or-f-direction" placeholder="方向判断">
|
||||
<select id="or-f-exit" title="离场原因">
|
||||
<option value="">离场原因</option>
|
||||
<option value="止盈">止盈</option>
|
||||
<option value="止损">止损</option>
|
||||
<option value="到期">到期</option>
|
||||
<option value="目标价">目标价</option>
|
||||
<option value="手动平仓">手动平仓</option>
|
||||
<option value="其他">其他</option>
|
||||
</select>
|
||||
<select id="or-f-followed" title="是否按计划">
|
||||
<option value="">是否按计划</option>
|
||||
<option value="是">是</option>
|
||||
<option value="否">否</option>
|
||||
<option value="部分">部分</option>
|
||||
</select>
|
||||
<input type="text" id="or-f-result" placeholder="结果标签">
|
||||
</div>
|
||||
<textarea id="or-f-entry" rows="2" placeholder="入场逻辑" style="width:100%;margin-bottom:8px"></textarea>
|
||||
|
||||
<div class="or-upload-slots" id="or-upload-slots">
|
||||
{% for tf in ['5m', '15m', '1h', '4h'] %}
|
||||
<div class="or-upload-row journal-upload-row" data-tf="{{ tf }}">
|
||||
<span class="or-upload-slot-label">{{ tf }}</span>
|
||||
<input type="file" accept="image/*" class="or-upload-input" data-tf="{{ tf }}">
|
||||
<input type="hidden" class="or-upload-hidden" data-tf="{{ tf }}" value="">
|
||||
<span class="or-upload-status muted" data-tf="{{ tf }}" aria-live="polite"></span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="sub muted" style="margin-top:0">可只传部分周期;选文件后即时上传,保存后详情可查看</p>
|
||||
|
||||
<div class="or-mood-grid">
|
||||
<label><input type="checkbox" class="or-mood" value="怕踏空">怕踏空</label>
|
||||
<label><input type="checkbox" class="or-mood" value="报复开仓">报复开仓</label>
|
||||
<label><input type="checkbox" class="or-mood" value="盈利飘了">盈利飘了</label>
|
||||
<label><input type="checkbox" class="or-mood" value="拿不住单">拿不住单</label>
|
||||
<label><input type="checkbox" class="or-mood" value="扛单">扛单</label>
|
||||
<label><input type="checkbox" class="or-mood" value="重仓违规">重仓违规</label>
|
||||
</div>
|
||||
<textarea id="or-f-note" rows="2" placeholder="备注" style="width:100%"></textarea>
|
||||
<div class="form-row" style="margin-top:10px;gap:8px">
|
||||
<button type="button" class="btn" id="or-save-btn">保存复盘记录</button>
|
||||
<button type="button" class="btn-secondary" id="or-clear-btn">收起</button>
|
||||
<button type="button" class="btn-secondary" id="or-del-btn">删除复盘</button>
|
||||
<span class="muted" id="or-save-status"></span>
|
||||
</div>
|
||||
<div id="or-legs-host" style="margin-top:12px"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/options_review.js?v=1"></script>
|
||||
<script src="/static/options_review.js?v=2"></script>
|
||||
|
||||
Reference in New Issue
Block a user