dekun
8842f0b869
Show five pending trades per page, reveal the upload form only after clicking 复盘, and list saved reviews with image detail above stats. Co-authored-by: Cursor <cursoragent@cursor.com>
221 lines
13 KiB
HTML
221 lines
13 KiB
HTML
{# OKX 期权复盘:交易记录(5行) → 点复盘出表单 → 复盘记录 → 统计 #}
|
|
<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;font-size:.82rem">期权未启用:请设置 <code>OKX_OPTIONS_ENABLED=true</code> 后重启.</div>
|
|
{% endif %}
|
|
|
|
<style>
|
|
.options-review-wrap{font-size:.82rem}
|
|
.options-review-wrap h2{font-size:1rem;margin:0 0 8px}
|
|
.options-review-wrap h3{font-size:.9rem;margin:0 0 8px}
|
|
.or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
|
|
.or-tab{border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:.78rem}
|
|
.or-tab.active{background:rgba(59,130,246,.25);border-color:rgba(59,130,246,.55)}
|
|
.or-badge{display:inline-block;padding:1px 6px;border-radius:999px;background:rgba(127,127,127,.2);font-size:.7rem}
|
|
.or-stat-card{border:1px solid rgba(127,127,127,.25);border-radius:8px;padding:8px;font-size:.78rem}
|
|
.or-trades-table{font-size:.78rem}
|
|
.or-trades-table tr.or-row-active{outline:1px solid rgba(59,130,246,.55);background:rgba(59,130,246,.08)}
|
|
.or-journal-card{font-size:.78rem}
|
|
.or-journal-card h2{font-size:.92rem}
|
|
.or-journal-card input,
|
|
.or-journal-card select,
|
|
.or-journal-card textarea,
|
|
.or-journal-card button{font-size:.76rem}
|
|
.or-journal-card .or-form-grid,
|
|
.or-journal-card .or-form-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:6px}
|
|
.or-journal-card .or-mood-grid{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0;font-size:.74rem}
|
|
.or-journal-card .muted,
|
|
.or-journal-card .sub{font-size:.7rem}
|
|
.or-journal-card.hidden{display:none!important}
|
|
.or-reviewed-table tbody tr{cursor:pointer}
|
|
.or-detail-panel{margin-top:10px;padding-top:10px;border-top:1px solid rgba(127,127,127,.25)}
|
|
.or-detail-panel.hidden{display:none!important}
|
|
.or-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 12px;font-size:.76rem;margin-bottom:8px}
|
|
.or-detail-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0}
|
|
.or-detail-img-cell{border:1px solid rgba(127,127,127,.25);border-radius:6px;padding:6px;text-align:center}
|
|
.or-detail-img-label{display:block;font-size:.7rem;margin-bottom:4px;opacity:.8}
|
|
.or-detail-img-thumb{max-width:100%;max-height:160px;border-radius:4px;cursor:pointer}
|
|
.or-pager{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.74rem}
|
|
</style>
|
|
|
|
{# 1. 交易记录(含 Tab/筛选,固定约5行) #}
|
|
<div class="card" style="margin-bottom:10px">
|
|
<div class="form-row" style="flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px">
|
|
<h2 style="margin:0;margin-right:auto">期权复盘</h2>
|
|
<span class="muted" id="or-sync-status" style="font-size:.72rem"></span>
|
|
<button type="button" class="btn-secondary" id="or-reload-btn" style="font-size:.76rem;padding:4px 10px">刷新</button>
|
|
</div>
|
|
<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 0 8px;font-size:.72rem">待复盘交易(每页5条).点「复盘」填写表单;保存后进入下方复盘记录.</p>
|
|
<div class="form-row" style="flex-wrap:wrap;gap:6px;margin-bottom:8px">
|
|
<select id="or-filter-uly" style="font-size:.76rem">
|
|
<option value="">标的:全部</option>
|
|
<option value="ETH">ETH</option>
|
|
<option value="BTC">BTC</option>
|
|
</select>
|
|
<select id="or-filter-opt" style="font-size:.76rem">
|
|
<option value="">Call/Put:全部</option>
|
|
<option value="C">Call</option>
|
|
<option value="P">Put</option>
|
|
</select>
|
|
<input type="text" id="or-filter-strategy" placeholder="策略标签" style="max-width:110px;font-size:.76rem">
|
|
<input type="datetime-local" id="or-filter-from" title="平仓起" style="font-size:.76rem">
|
|
<input type="datetime-local" id="or-filter-to" title="平仓止" style="font-size:.76rem">
|
|
<label class="muted" style="display:flex;align-items:center;gap:4px;font-size:.72rem">
|
|
<input type="checkbox" id="or-include-hedge-legs"> 含已归属对冲的期权腿
|
|
</label>
|
|
</div>
|
|
<h3 id="or-list-title" style="margin-top:0">期权交易记录</h3>
|
|
<div class="options-strike-table-wrap">
|
|
<table class="options-strike-table or-trades-table" id="or-trades-table">
|
|
<thead>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>标的/合约</th>
|
|
<th>盈亏</th>
|
|
<th>开/平</th>
|
|
<th>持有</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="or-trades-tbody">
|
|
<tr><td colspan="6" class="muted">加载中…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="or-pager" id="or-trades-pager">
|
|
<button type="button" class="btn-secondary" id="or-trades-prev" style="font-size:.72rem;padding:2px 8px">上一页</button>
|
|
<span class="muted" id="or-trades-page-label">1</span>
|
|
<button type="button" class="btn-secondary" id="or-trades-next" style="font-size:.72rem;padding:2px 8px">下一页</button>
|
|
</div>
|
|
</div>
|
|
|
|
{# 2. 复盘上传(默认隐藏,点交易「复盘」后显示) #}
|
|
<div class="card journal-card or-journal-card hidden" id="or-journal-card" style="margin-bottom:10px">
|
|
<h2>复盘记录上传(含截图)</h2>
|
|
<p class="muted" id="or-journal-summary" style="margin-top:0">截图槽位与合约复盘相同(5m / 15m / 1h / 4h).</p>
|
|
<div class="or-journal-body">
|
|
<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="开仓时间">
|
|
<input type="datetime-local" id="or-f-close" title="平仓时间">
|
|
<input type="text" id="or-f-coin" placeholder="标的(如 ETH)">
|
|
<input type="text" id="or-f-inst" placeholder="合约/计划">
|
|
<input type="text" id="or-f-pnl" placeholder="盈亏(U)">
|
|
<input type="text" id="or-f-hold" placeholder="持有时长" readonly>
|
|
</div>
|
|
<div class="or-form-grid2">
|
|
<select id="or-f-strategy" title="策略标签" required>
|
|
<option value="">策略标签</option>
|
|
</select>
|
|
<select id="or-f-direction" title="方向判断">
|
|
<option value="">方向判断</option>
|
|
</select>
|
|
<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>
|
|
<select id="or-f-result" title="结果标签">
|
|
<option value="">结果标签</option>
|
|
<option value="盈利">盈利</option>
|
|
<option value="亏损">亏损</option>
|
|
<option value="持平">持平</option>
|
|
</select>
|
|
</div>
|
|
<select id="or-f-entry" title="入场逻辑" style="width:100%;margin-bottom:6px;box-sizing:border-box">
|
|
<option value="">入场逻辑</option>
|
|
</select>
|
|
|
|
<input type="hidden" id="journal-draft-id" value="">
|
|
<div class="journal-upload-slots" id="or-upload-slots">
|
|
{% for tf in ['5m', '15m', '1h', '4h'] %}
|
|
<div class="journal-upload-row" data-tf="{{ tf }}">
|
|
<span class="journal-upload-slot-label">{{ tf }}</span>
|
|
<input type="file" accept="image/*" class="journal-upload-slot-input or-upload-input" data-tf="{{ tf }}">
|
|
<input type="hidden" class="journal-upload-hidden-file or-upload-hidden" data-tf="{{ tf }}" value="">
|
|
<span class="journal-upload-status or-upload-status" data-tf="{{ tf }}" aria-live="polite"></span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<p class="sub journal-upload-hint">可只传部分周期;选文件后即时上传</p>
|
|
|
|
<div class="or-mood-grid 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%;box-sizing:border-box"></textarea>
|
|
<div class="form-row" style="margin-top:8px;gap:6px">
|
|
<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:10px;font-size:.74rem"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{# 3. 已复盘记录 + 详情 #}
|
|
<div class="card" style="margin-bottom:10px">
|
|
<h3>复盘记录</h3>
|
|
<p class="muted" style="margin-top:0;font-size:.72rem">保存后出现在此.点一行查看详情(含截图与完整复盘内容).</p>
|
|
<div class="options-strike-table-wrap">
|
|
<table class="options-strike-table or-reviewed-table" id="or-reviewed-table">
|
|
<thead>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>标的/合约</th>
|
|
<th>盈亏</th>
|
|
<th>策略</th>
|
|
<th>结果</th>
|
|
<th>复盘时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="or-reviewed-tbody">
|
|
<tr><td colspan="6" class="muted">加载中…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="or-detail-panel hidden" id="or-detail-panel">
|
|
<div class="form-row" style="align-items:center;gap:8px;margin-bottom:6px">
|
|
<h3 style="margin:0;margin-right:auto" id="or-detail-title">复盘详情</h3>
|
|
<button type="button" class="btn-secondary" id="or-detail-edit-btn" style="font-size:.72rem;padding:2px 8px">编辑</button>
|
|
<button type="button" class="btn-secondary" id="or-detail-close-btn" style="font-size:.72rem;padding:2px 8px">收起</button>
|
|
</div>
|
|
<div class="or-detail-grid" id="or-detail-meta"></div>
|
|
<div id="or-detail-text" style="font-size:.76rem;line-height:1.5;margin-bottom:8px"></div>
|
|
<div class="or-detail-images" id="or-detail-images"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{# 4. 统计 #}
|
|
<div class="card" style="margin-bottom:10px">
|
|
<h3>统计</h3>
|
|
<div id="or-kpi" class="form-row" style="flex-wrap:wrap;gap:10px"></div>
|
|
<div id="or-stats-groups" style="margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/options_review.js?v=8"></script>
|