ui: 顶栏透明、设置两列、下单与持仓监控优化

导航栏与页面背景一致;系统设置双列布局;下单三行表单与开仓状态反馈;持仓卡片增加平仓与止盈止损挂单展示。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-24 12:46:23 +08:00
parent 528d9811e3
commit 67683f5562
8 changed files with 304 additions and 75 deletions
+38 -36
View File
@@ -32,50 +32,52 @@
</div>
</div>
<div class="trade-form-grid">
<div class="symbol-wrap trade-field span-2">
<label class="text-label">品种</label>
<input type="text" id="trade-symbol" class="symbol-input" placeholder="主力合约 rb2610" autocomplete="off">
<div class="symbol-dropdown"></div>
<div class="symbol-selected" id="sym-selected"></div>
</div>
<div class="trade-field">
<label class="text-label">方向</label>
<select id="trade-direction">
<option value="long">做多</option>
<option value="short"></option>
</select>
</div>
<div class="trade-field" id="field-lots">
<label class="text-label">手数</label>
<input type="number" id="trade-lots" min="1" step="1" value="1" {% if sizing_mode == 'risk' %}hidden{% endif %}>
<input type="text" id="trade-lots-calc" class="lots-auto" readonly placeholder="填写止损后自动计算" {% if sizing_mode != 'risk' %}hidden{% endif %}>
</div>
<div class="trade-field span-2">
<label class="text-label">入场价</label>
<div class="price-type-tabs">
<button type="button" class="price-tab active" data-type="limit">限价</button>
<button type="button" class="price-tab" data-type="market">市价</button>
<div class="trade-form-rows">
<div class="trade-form-line line-3">
<div class="symbol-wrap trade-field">
<label class="text-label">品种</label>
<input type="text" id="trade-symbol" class="symbol-input" placeholder="主力合约 rb2610" autocomplete="off">
<div class="symbol-dropdown"></div>
<div class="symbol-selected" id="sym-selected"></div>
</div>
<div class="trade-field">
<label class="text-label">方向</label>
<select id="trade-direction">
<option value="long"></option>
<option value="short">做空</option>
</select>
</div>
<div class="trade-field" id="field-lots">
<label class="text-label">手数</label>
<input type="number" id="trade-lots" min="1" step="1" value="1" {% if sizing_mode == 'risk' %}hidden{% endif %}>
<input type="text" id="trade-lots-calc" class="lots-auto" readonly placeholder="填写止损后自动计算" {% if sizing_mode != 'risk' %}hidden{% endif %}>
</div>
<input type="number" id="trade-price" step="any" placeholder="限价">
<p class="hint market-hint" id="market-hint" hidden>市价将按最新行情价报单</p>
</div>
<div class="trade-field">
<label class="text-label">止损</label>
<input type="number" id="trade-sl" step="any">
</div>
<div class="trade-field">
<label class="text-label">止盈</label>
<input type="number" id="trade-tp" step="any">
<div class="trade-form-line line-3">
<div class="trade-field">
<label class="text-label">入场价</label>
<div class="price-type-tabs">
<button type="button" class="price-tab active" data-type="limit">限价</button>
<button type="button" class="price-tab" data-type="market">市价</button>
</div>
<input type="number" id="trade-price" step="any" placeholder="限价">
<p class="hint market-hint" id="market-hint" hidden>市价将按最新行情价报单</p>
</div>
<div class="trade-field">
<label class="text-label">止盈</label>
<input type="number" id="trade-tp" step="any">
</div>
<div class="trade-field">
<label class="text-label">止损</label>
<input type="number" id="trade-sl" step="any">
</div>
</div>
</div>
<div class="trade-action-row">
<button type="button" class="btn-primary btn-open" id="btn-open">开仓</button>
<button type="button" class="btn-secondary" id="btn-close-pos">平仓</button>
<p class="trade-order-msg" id="order-msg" hidden></p>
</div>
<div class="trade-footer" id="trade-footer">