crypto_monitor/lib/instance/templates/instance_header_panel.html

{# 统一顶栏：状态 + 筛选（上）· 统计条（下） #}
<div class="instance-header-panel card">
    <div class="instance-header-toolbar">
        <div class="instance-header-toolbar-filter">
            <span class="list-window-label" title="列表按 UTC 时间筛选，默认当日">UTC {{ list_window.label }}</span>
            <label class="list-window-preset">预设
                <select id="win-preset-select" onchange="toggleListWindowCustom()">
                    <option value="utc_today" {% if list_window.preset == 'utc_today' %}selected{% endif %}>UTC 当日</option>
                    <option value="utc_last24h" {% if list_window.preset == 'utc_last24h' %}selected{% endif %}>近 24 小时</option>
                    <option value="utc_last7d" {% if list_window.preset == 'utc_last7d' %}selected{% endif %}>近 7 天</option>
                    <option value="custom" {% if list_window.preset == 'custom' %}selected{% endif %}>自定义</option>
                </select>
            </label>
            <span id="win-custom-range" class="list-window-custom" style="{% if list_window.preset != 'custom' %}display:none{% endif %}">
                <label>起 <input type="datetime-local" id="win-from-utc" value="{{ list_window.start_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
                <label>止 <input type="datetime-local" id="win-to-utc" value="{{ list_window.end_utc.strftime('%Y-%m-%dT%H:%M') }}"></label>
            </span>
            <button type="button" class="list-window-apply" onclick="applyListWindow()">应用</button>
            <span class="list-window-hint" title="统计分析页按北京时间 {{ stats_bundle.stats_reset_hour|default(reset_hour) }}:00 切交易日">统计切日 {{ stats_bundle.stats_reset_hour|default(reset_hour) }}:00</span>
        </div>
        <div class="instance-header-toolbar-end">
            <div class="instance-toolbar-status">
                <div class="exchange-tag">{{ exchange_display }}</div>
                {% if trade_policy.badge_text %}
                <span class="trade-policy-badge" title="账户交易限制（.env）">{{ trade_policy.badge_text }}</span>
                {% endif %}
                {% include 'force_close_header_badge.html' %}
                <span class="risk-status-badge risk-status-{{ risk_status.status|default('normal') }}" id="account-risk-badge" role="status" title="{{ risk_status.reason|default('', true) }}" data-status-label="{{ risk_status.status_label|default('正常') }}"{% if risk_status.freeze_until_ms %} data-freeze-until-ms="{{ risk_status.freeze_until_ms }}"{% endif %}>{{ risk_status.status_label|default('正常') }}</span>
            </div>
            <div class="theme-toggle instance-theme-toggle instance-header-theme" role="group" aria-label="界面主题">
                <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
                    <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                        <path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
                    <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="instance-header-stats instance-desktop-only">
        <div class="stat-strip-item stat-strip-item--primary">
            <div class="label">交易所</div>
            <div class="value">{{ exchange_display }}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">交易日</div>
            <div class="value">{{ trading_day }}</div>
        </div>
        <div class="stat-strip-item stat-strip-item--primary">
            <div class="label">总交易</div>
            <div class="value" id="stat-total">{{ total }}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">胜率</div>
            <div class="value" id="stat-rate">{{ rate }}%</div>
        </div>
        <div class="stat-strip-item" title="平均盈利 ÷ 平均亏损（当前列表窗口）">
            <div class="label">盈亏比</div>
            <div class="value" id="stat-pl-ratio">{% if profit_loss_ratio is not none %}{{ profit_loss_ratio }}{% else %}—{% endif %}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">总资金</div>
            <div class="value" id="total-funds">{% if total_funds is not none %}{{ funds_fmt(total_funds) }}U{% else %}—{% endif %}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">资金账户</div>
            <div class="value" id="total-capital">{% if funding_usdt is not none %}{{ funds_fmt(funding_usdt) }}U{% else %}—{% endif %}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">交易账户</div>
            <div class="value" id="current-capital">{{ funds_fmt(current_capital) }}U</div>
        </div>
        {% if options_enabled %}
        <div class="stat-strip-item">
            <div class="label">期权资金账户</div>
            <div class="value" id="options-funding-usdc">{% if options_funding_usdc is not none %}{{ funds_fmt(options_funding_usdc) }} USDC{% else %}—{% endif %}</div>
        </div>
        <div class="stat-strip-item">
            <div class="label">期权交易账户</div>
            <div class="value" id="options-trading-usdc">{% if options_trading_usdc is not none %}{{ funds_fmt(options_trading_usdc) }} USDC{% else %}—{% endif %}</div>
        </div>
        {% endif %}
        <div class="stat-strip-item stat-strip-item--pnl">
            <div class="label">实时盈亏</div>
            <div class="value" id="realtime-pnl">—</div>
        </div>
    </div>
</div>